/* ==========================================================================
   Responsive corrections for defects present in the approved reference build
   (tablet/mobile only; desktop is untouched). Enabled by default (approved by
   the project owner 2026-09-25) — see tmd_responsive_fixes_enabled().
   ========================================================================== */

/* 1. "A Complete Approach To Treatment": the stacked strips collapsed to 1px
      because the desktop `flex: 1` (zero basis) overrode the intended heights
      (120px, active 380px) declared in the reference's own ≤960px rules. */
@media (max-width: 960px) {
  .treatment-strip,
  .treatment-strip.active {
    flex: none;
  }
}

/* 2. Tablet header: menu links were squeezed between logo and button
      (769–960px). Use the reference's own hamburger menu from 960px down. */
@media (max-width: 960px) {
  .nav-menu {
    display: none;
  }
  .mobile-nav-toggle {
    display: block;
  }
}

/* 3. Phone header: "Book a consultation" wrapped onto two lines and covered
      the clinic name. Keep it on one line at a compact size. */
@media (max-width: 600px) {
  .site-header .nav-wrap {
    gap: 0.5rem;
  }
  .site-header .brand-badge {
    gap: 0.5rem;
    min-width: 0;
  }
  .site-header .brand-logo-img {
    width: 40px;
    height: 40px;
  }
  .site-header .brand-name-gold {
    font-size: 0.82rem;
  }
  .site-header .brand-sub-white {
    font-size: 0.68rem;
  }
  .site-header #navConsultBtn {
    white-space: nowrap;
    padding: 0.55rem 0.9rem;
    font-size: 0.8rem;
  }
}

/* 4. Phone hero: the review/avatars + buttons block flowed to the top of the
      hero, underneath the header. Anchor it at the bottom, centred — the same
      bottom placement the desktop design uses. */
@media (max-width: 768px) {
  .figma-right-actions-block {
    position: absolute;
    left: 50%;
    bottom: clamp(1.5rem, 6vh, 3rem);
    transform: translateX(-50%);
    margin-top: 0;
    width: calc(100% - 32px);
  }
}

/* 5. Treatments, phones: the card deck kept its desktop minimum height
      (400px) while the reference's mobile rule sets aspect-ratio 16/12, which
      forced a ~580px-wide column, widened the page past the screen and pushed
      the menu button off-screen. Let the column shrink and the 16/12 ratio
      drive the height, as the reference's mobile rule intends. */
@media (max-width: 900px) {
  .treatments-showcase-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .showcase-cards-deck {
    height: auto;
  }
}

/* 6. Header with the Diagnosis link (5 items): at small-laptop widths
      (961–1180 px) the labels wrapped onto two lines. Keep every label and
      the button on one line by tightening only the gap between links. */
@media (min-width: 961px) {
  .nav-link-item,
  #navConsultBtn,
  .brand-titles span {
    white-space: nowrap;
  }
}
@media (min-width: 961px) and (max-width: 1180px) {
  .nav-menu {
    gap: 1.6rem;
  }
}
@media (min-width: 961px) and (max-width: 1060px) {
  .nav-menu {
    gap: 1.1rem;
  }
}