/* Revision v13 — mobile visual hotfix. Desktop remains visually identical to v12. */

@media (max-width: 760px) {
  /* 44px minimum touch area without changing the visible icon sizes. */
  .header-phone-mobile,
  .mobile-nav > summary,
  .hero-v4-scroll,
  .footer--complete a {
    min-height: 44px;
  }

  .footer-brand > a,
  .footer-nav a,
  .footer-contact a,
  .footer--complete .back-top {
    display: flex;
    align-items: center;
  }

  /* Keep the long city name inside the content column on the narrowest phones. */
  #route .route-intro h2 {
    max-width: 100%;
    font-size: clamp(31px, 8.2vw, 40px);
    overflow-wrap: normal;
  }
  #route .route-intro h2 span { display: block; }
  #route .route-step,
  #route .route-step:last-child {
    grid-template-rows: 142px auto;
    padding: 24px 0 32px;
  }
  #route .route-icon { height: 142px; }
  #route .route-step > div:last-child { margin-top: 5px; }
  #route .route-step p { line-height: 1.52; }

  /* Organizer portrait: intentional close 4:3 crop, no dark empty panel. */
  #organizer .premium-organizer-portrait {
    width: 100%;
    max-width: none;
    aspect-ratio: 4 / 3;
    margin: 30px 0 0;
    overflow: hidden;
  }
  #organizer .premium-organizer-portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 54% 48%;
  }
  #organizer .premium-organizer-detail {
    top: 118px;
    right: -54px;
    width: 92px;
    opacity: .24;
  }

  /* Route story grows with its complete copy and keeps the full two-city title. */
  #geography .premium-atlas-title {
    max-width: 100%;
    font-size: clamp(27px, 8vw, 33px);
    white-space: normal;
  }
  #geography .premium-atlas-stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 306px auto;
    height: auto;
    overflow: visible;
  }
  #geography .premium-atlas-stage canvas {
    grid-area: 1 / 1;
    width: 100%;
    height: 306px;
  }
  #geography .premium-atlas-story {
    position: relative;
    inset: auto;
    grid-area: 2 / 1;
    display: grid;
    width: calc(100% - 2 * var(--space));
    min-height: 0;
    height: auto;
    margin: -8px var(--space) 0;
    overflow: visible;
  }
  #geography .premium-atlas-story-scene {
    position: relative;
    inset: auto;
    grid-area: 1 / 1;
    grid-template-columns: 86px minmax(0, 1fr);
    gap: 12px;
    padding: 16px 14px;
  }
  #geography .premium-atlas-story-icon {
    width: 86px;
    height: 86px;
  }
  #geography .premium-atlas-story-icon img { transform: scale(1.12); }
  #geography .premium-atlas-story-copy { gap: 7px; }
  #geography .premium-atlas-story-scene h3 {
    font-size: 17px;
    line-height: 1.22;
    white-space: normal;
  }
  #geography .premium-atlas-story-scene p {
    font-size: 14px;
    line-height: 1.43;
  }

  /* Clinic scene: image fills the media layer; fades only soften its seams. */
  #clinics.premium-clinics {
    display: block;
    position: relative;
    min-height: 740px;
  }
  #clinics .premium-clinics-art {
    position: absolute;
    inset: auto 0 0;
    z-index: -2;
    width: 100%;
    height: 48%;
    min-height: 0;
    aspect-ratio: auto;
    overflow: hidden;
  }
  #clinics .premium-clinics-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 83% 50%;
    transform: translateY(30%) scale(1.08);
    transform-origin: 83% 50%;
  }
  #clinics .premium-clinics-art::after {
    background:
      linear-gradient(180deg, #142c45 0%, rgba(20,44,69,.72) 8%, rgba(20,44,69,0) 19%, rgba(20,44,69,0) 82%, rgba(20,44,69,.28) 100%),
      linear-gradient(90deg, #142c45 0%, rgba(20,44,69,.78) 12%, rgba(20,44,69,.2) 32%, rgba(20,44,69,0) 42%);
  }
  #clinics .premium-clinics-wash {
    display: block;
    z-index: -1;
    background: linear-gradient(180deg, #142c45 0%, rgba(20,44,69,.97) 55%, rgba(20,44,69,.35) 78%, rgba(20,44,69,.08) 100%);
  }
  #clinics .premium-clinics-content {
    min-height: 740px;
    padding-bottom: 54px;
  }

  /* Portrait and conversation form one mobile scene with a protected face/phone zone. */
  #contact .premium-contact-photo { display: none; }
  #contact .premium-contact-inner { padding-bottom: 52px; }
  #contact .premium-contact-chips li {
    grid-template-columns: 68px minmax(0, 1fr);
    gap: 14px;
    padding: 15px;
  }
  #contact .premium-contact-card-copy { gap: 7px; }
  #contact .premium-contact-card-copy strong {
    font-size: 15px;
    line-height: 1.28;
  }
  #contact .premium-contact-card-copy > span {
    font-size: 13px;
    line-height: 1.45;
  }
  #contact .premium-contact-card-icon img { transform: scale(1.16); }

  .future-directions-grid .future-directions-more {
    display: grid;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
  }
  .future-directions-more-icon {
    display: block;
    width: 56px;
    height: 42px;
    color: #142c45;
  }
  .future-directions-more span {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  /* Reduce repeated-card fatigue while preserving the existing content. */
  .help-v5-card summary {
    grid-template-rows: auto minmax(250px, 1fr) auto auto !important;
    min-height: 390px !important;
  }
  .help-v5-visual,
  .help-v5-card--compact .help-v5-visual,
  .help-v5-card--eye .help-v5-visual,
  .help-v5-card--spine .help-v5-visual,
  .help-v5-card--other .help-v5-visual,
  .help-v5-card--plastic .help-v5-visual,
  .help-v5-card--orthopedics .help-v5-visual,
  .help-v5-card--rehabilitation .help-v5-visual,
  .help-v5-card--braces .help-v5-visual,
  .help-v5-card--laser .help-v5-visual {
    width: 62%;
  }
  #directions .direction-item,
  #directions .direction-item:nth-child(n),
  #directions .direction-item:first-child {
    min-height: 166px;
    padding-top: 13px;
    padding-bottom: 14px;
  }
  #directions .direction-art { height: 140px; }
  #faq .faq-answer { padding-bottom: 16px; }
}

@media (max-width: 340px) {
  #organizer .premium-organizer-detail {
    top: 112px;
    right: -58px;
    width: 86px;
  }
  #clinics.premium-clinics,
  #clinics .premium-clinics-content { min-height: 820px; }
  #clinics .premium-clinics-art { height: 50%; }
  #clinics .premium-clinics-photo { transform: translateY(45%) scale(1.08); }
}

@media (min-width: 761px) {
  .future-directions-more { display: none !important; }
}

@media (orientation: landscape) and (max-height: 500px) and (min-width: 701px) {
  /* The generated help overview previously used desktop columns in phone landscape. */
  #help .help-v5-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  #help .help-v5-card,
  #help .help-v5-card:nth-child(n) {
    grid-column: auto !important;
  }
  #help .help-v5-card summary {
    grid-template-rows: auto minmax(190px, 1fr) auto auto !important;
    min-height: 350px !important;
  }
  #help .help-v5-copy { max-width: 100% !important; }
}