/* ==========================================================================
   RESPONSIVE — mobile-first breakpoints
   Absolute Cosmetic Clinic
   --------------------------------------------------------------------------
   The other stylesheets describe the MOBILE layout. Every rule here is a
   min-width query that progressively enhances it upward. There are no
   max-width queries, so nothing has to be un-done at a larger size.

   Breakpoints (content-driven, not device-driven):
     560px   two-column cards, side-by-side form fields
     768px   tablet — footer columns, locations, steps
     900px   decorative layer returns, reviews split
     980px   desktop navigation replaces the hamburger
     1100px  full-width stat and number rows
     1280px  large-desktop refinements
   ========================================================================== */

/* --------------------------------------------------------------------------
   ≥ 560px — small tablet / large phone landscape
   -------------------------------------------------------------------------- */
@media (min-width: 560px) {

  .category-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .form__row {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid--2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .stat {
    border-right: 1px solid var(--color-border);
  }

  .stat:nth-child(2n) {
    border-right: none;
  }

  .numbers__item {
    border-right: 1px solid var(--color-border);
  }

  .numbers__item:nth-child(2n) {
    border-right: none;
  }

  .why-item {
    border-right: 1px solid var(--color-border);
  }

  .why-item:nth-child(2n) {
    border-right: none;
  }

  .review-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Quote mark has room to sit beside the text */
}

/* --------------------------------------------------------------------------
   ≥ 768px — tablet
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {

  .footer__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-10);
  }

  .locations {
    grid-template-columns: repeat(2, 1fr);
  }

  .steps {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
  }

  .grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Concern cards go to a single row here rather than at 900px, so they are
     only ever stacked on genuinely small screens. */
  .category-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .doctor {
    grid-template-columns: 180px 1fr;
    justify-items: start;
    text-align: left;
    gap: var(--space-8);
  }

  .section-head--split {
    flex-direction: row;
    align-items: flex-end;
  }

  .scroller > * {
    width: 320px;
    max-width: none;
  }

  /* Two pairs side by side */
  .scroller.ba-scroller > * {
    width: calc((100% - var(--space-4)) / 2);
    max-width: none;
  }

  /* Decorative script accents return once they have somewhere to sit */
  .about__script {
    display: block;
  }

  /* Reserves the strip under the photo that .about__script occupies */
  .about__media {
    padding-bottom: 4.75rem;
  }

  /* Leaf silhouette: pointed at the top-right and bottom-left, rounded at
     the other two corners. Only applied where the image is large enough
     that the crop does not eat the subject. */
  .about__image {
    border-radius: 42% 14% 42% 14% / 32% 22% 32% 22%;
  }
}

/* --------------------------------------------------------------------------
   ≥ 900px — small laptop
   -------------------------------------------------------------------------- */
@media (min-width: 900px) {

  .stat-row {
    grid-template-columns: repeat(4, 1fr);
  }

  .stat:nth-child(2n) {
    border-right: 1px solid var(--color-border);
  }

  .stat:last-child {
    border-right: none;
  }

  .why-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .why-item:nth-child(2n) {
    border-right: 1px solid var(--color-border);
  }

  .why-item:last-child {
    border-right: none;
  }

  .footer__grid {
    grid-template-columns: 1.4fr 1fr 1fr 1.3fr;
  }

  .grid--4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* --------------------------------------------------------------------------
   ≥ 980px — DESKTOP NAVIGATION
   The single most structural breakpoint: the hamburger is replaced by the
   full nav, and the sticky mobile CTA bar is retired.
   -------------------------------------------------------------------------- */
@media (min-width: 980px) {

  html {
    scroll-padding-top: calc(var(--chrome-h) + var(--space-8));
  }

  .header__bar {
    min-height: var(--header-h);
    padding-block: var(--header-pad);
    padding-inline: var(--space-8) var(--header-pad-right);
    /* A 3-column grid rather than space-between: the logo (165px) and the
       CTA (236px) are different widths, so space-between pushed the nav
       ~30px off centre. Equal 1fr side columns centre it against the pill,
       not against its neighbours. The hamburger is display:none here, so
       there are exactly three grid items. */
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
  }

  .header__logo { justify-self: start; }
  .nav          { justify-self: center; }
  .header__cta  { justify-self: end; }

  /* The sticky CTA bar is gone from here up, so the hero reclaims its foot */
  .hero {
    padding-block: calc(var(--chrome-h) + var(--space-12)) var(--space-20);
  }

  .header__logo img {
    height: var(--header-logo-h);
  }

  .nav {
    gap: clamp(var(--space-4), 1.3vw, var(--space-6));
  }

  .nav {
    display: flex;
  }

  .header__cta {
    display: block;
  }

  .nav-toggle {
    display: none;
  }

  /* Force the panel shut — it must never be reachable on desktop, even if
     it was left open while the window was resized. */
  .mobile-nav,
  .mobile-nav.is-open {
    display: none !important;
  }

  .mobile-cta {
    display: none !important;
  }

  /* With the sticky bar gone the button can sit in the corner proper. */
  .wa-float {
    --wa-bottom: var(--space-6);
    right: var(--space-6);
  }

  /* The body scroll lock is a mobile-menu concern only */
  body.is-locked {
    overflow: visible;
  }

  .about__inner {
    grid-template-columns: 1.1fr 0.9fr;
  }

  /* Three per row, as specified */
  .review-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Step connectors */
  .step::after {
    display: block;
  }

  /* Three pairs visible, as specified */
  .scroller.ba-scroller > * {
    width: calc((100% - (var(--space-4) * 2)) / 3);
  }

  .steps {
    gap: var(--space-6);
  }
}

/* --------------------------------------------------------------------------
   ≥ 1100px — full rows
   -------------------------------------------------------------------------- */
@media (min-width: 1100px) {

  .numbers {
    grid-template-columns: repeat(5, 1fr);
  }

  .numbers__item:nth-child(2n) {
    border-right: 1px solid var(--color-border);
  }

  .numbers__item:last-child {
    border-right: none;
  }

  /* The cards used to SHRINK as the viewport grew (260 -> 240 -> 220px).
     They now grow, so the row reads as a set of substantial cards rather
     than a strip of thumbnails. */
  .scroller > * {
    width: 344px;
  }
}

/* --------------------------------------------------------------------------
   ≥ 1280px — large desktop
   Content locks at --container-max and centres; only breathing room grows.
   -------------------------------------------------------------------------- */
@media (min-width: 1280px) {

  .section-head {
    margin-bottom: var(--space-12);
  }

  /* Horizontal scroll-reveal — only from here up.
     At 1280px the container is capped at 1200px, so a 20px slide can never
     push an element past the viewport edge. See animations.css section 1. */
  [data-reveal="left"]  { transform: translateX(-20px); }
  [data-reveal="right"] { transform: translateX(20px); }

  [data-reveal="left"].is-visible,
  [data-reveal="right"].is-visible {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   Very large screens — cap the decorative bleed so leaves and gradients do
   not drift absurdly far from the content column.
   -------------------------------------------------------------------------- */
@media (min-width: 1600px) {

  .hero__content {
    max-width: 58rem;
  }
}

/* --------------------------------------------------------------------------
   Short landscape phones — the sticky CTA bar eats too much of a 400px-tall
   viewport, so it is suppressed.
   -------------------------------------------------------------------------- */
@media (max-height: 460px) and (orientation: landscape) {

  .mobile-cta {
    display: none !important;
  }

  /* Nothing left to clear, and a 460px-tall viewport has none to spare. */
  .wa-float {
    --wa-bottom: var(--space-3);
    width: 62px;
    height: 62px;
  }
}

/* --------------------------------------------------------------------------
   Coarse pointers — enlarge touch targets and drop hover-only lifts, which
   stick on touch devices and look like a stuck state.
   -------------------------------------------------------------------------- */
@media (hover: none) and (pointer: coarse) {

  .category-card:hover,
  .treatment-card:hover,
  .step:hover,
  .btn:hover,
  .socials a:hover {
    transform: none;
  }

  .category-card:hover .category-card__media img,
  .treatment-card:hover .treatment-card__media img,
  .location-card:hover .location-card__media img {
    transform: none;
  }

  .nav__link,
  .footer__list a {
    padding-block: var(--space-2);
  }
}

/* --------------------------------------------------------------------------
   Forced-colours / Windows High Contrast
   -------------------------------------------------------------------------- */
@media (forced-colors: active) {

  .btn,
  .btn-circle,
  .card,
  .accordion__item,
  .category-card,
  .treatment-card,
  .location-card {
    border: 1px solid currentColor;
  }

  .decor,
  .about__leaf,
  .cta-band__leaf {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   INTERIOR PAGES — breadcrumbs clear the taller desktop header pill
   -------------------------------------------------------------------------- */
@media (min-width: 980px) {

  /* :not(--invert) matters. The in-hero breadcrumb already sits inside the
     hero's own top padding; without this exclusion responsive.css re-applied
     a full chrome-height offset on top of it and pushed the hero copy 156px
     down the page. */
  .breadcrumbs:not(.breadcrumbs--invert) {
    padding-top: calc(var(--chrome-h) + var(--space-6));
  }

  .page-hero__title {
    font-size: var(--fs-4xl);
  }
}

/* --------------------------------------------------------------------------
   The utility bar is fixed at the very top from 980px up, so the header pill
   has to start below it. Mobile is untouched: the bar is display:none there.
   -------------------------------------------------------------------------- */
@media (min-width: 980px) {

  .header {
    top: var(--space-3);
  }
}

/* --------------------------------------------------------------------------
   Mega-menu reaches its full 7-column layout once the container can hold
   seven readable columns. Below this it stays at four and wraps to two rows.
   -------------------------------------------------------------------------- */
@media (min-width: 1200px) {

  .mega__grid {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
}

/* --------------------------------------------------------------------------
   TREATMENT PAGE — multi-column layouts
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {

  .cost-grid,
  .mod-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .suit-grid,
  .care-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 980px) {

  /* The enquiry card is narrower than the copy: it is a short form, and at
     equal width the fields stretch far past a comfortable input length. */
  .treat-hero__grid {
    grid-template-columns: 1.25fr 0.75fr;
    gap: var(--space-12);
    /* Centred, not top-aligned: the enquiry card is much taller than the
       copy, so `start` left the headline floating at the top with a long
       empty run beside the lower half of the form. */
    align-items: center;
  }

  .mod-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Three cost factors, three columns — at two columns the third card is
   orphaned on its own row. */
@media (min-width: 980px) {

  .cost-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* The treatment hero carries the fixed chrome itself, so it needs the taller
   desktop offset. */
@media (min-width: 980px) {

  .treat-hero {
    padding-top: calc(var(--chrome-h) + var(--space-8));
    padding-bottom: var(--space-12);
  }
}

/* --------------------------------------------------------------------------
   TREATMENT PAGE — conversion layout breakpoints
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {

  .feat-grid { grid-template-columns: repeat(2, 1fr); }
  .split     { grid-template-columns: repeat(2, 1fr); gap: var(--space-12); }
  .promise   { grid-template-columns: 1.15fr 0.85fr; }

  .statbar__inner { grid-template-columns: repeat(4, 1fr); }

  .docpanel {
    grid-template-columns: 160px 1fr;
    gap: var(--space-8);
    padding: var(--space-8);
    align-items: start;
  }

  .docpanel__photo img { width: 160px; height: 160px; }
}

@media (min-width: 980px) {

  .feat-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Copy left, image right. The image column is the narrower of the two so the
   text keeps a readable measure rather than stretching to half the container. */
@media (min-width: 900px) {

  .media-split {
    grid-template-columns: 1.1fr 0.9fr;
    gap: var(--space-12);
  }
}

/* Alternating media side. The copy stays first in the DOM so reading order
   and tab order are unchanged; only the visual columns swap. */
@media (min-width: 900px) {

  .media-split--reverse {
    grid-template-columns: 0.9fr 1.1fr;
  }

  .media-split--reverse .media-split__copy  { order: 2; }
  .media-split--reverse .media-split__media { order: 1; }
}

/* Timeline goes horizontal once three columns fit without cramping. */
@media (min-width: 768px) {

  .timeline {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-8);
    padding: var(--space-10) 0 0;
    text-align: center;
  }

  .timeline::before {
    left: 12%;
    right: 12%;
    top: 7px;
    bottom: auto;
    width: auto;
    height: 2px;
    background: linear-gradient(90deg, var(--green-300), var(--green-200));
  }

  .timeline__dot {
    left: 50%;
    top: calc(var(--space-10) * -1);
    transform: translateX(-50%);
  }
}

/* --------------------------------------------------------------------------
   LANDING PAGES
   -------------------------------------------------------------------------- */
@media (min-width: 560px) {

  .header--lp__phone { display: inline-flex; }
}

@media (min-width: 768px) {

  .pick-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
  .pick-card__label { font-size: var(--fs-base); }
}

@media (min-width: 980px) {

  /* The landing header has no nav, so the pill is shorter than the main site's
     and the hero needs less clearance. */
  .lp-hero {
    padding-top: calc(var(--header-h) + var(--space-10));
    padding-bottom: var(--space-16);
  }
}

/* The landing header has NO utility bar above it, so it must not inherit the
   offset that exists to clear one. Without this it sat 38px lower and the
   hero eyebrow disappeared behind the pill. */
@media (min-width: 980px) {

  .header--lp {
    top: var(--space-3);
  }
}

@media (min-width: 980px) {

  /* Copy left, form right. The form column is fixed-ish so its fields keep a
     comfortable length instead of stretching with the viewport. */
  .lp-hero__grid {
    grid-template-columns: 1.15fr 0.85fr;
    gap: var(--space-12);
    align-items: center;
  }
}

@media (min-width: 768px) {

  .check-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
  .check-item { padding: var(--space-5); gap: var(--space-5); }
  .check-item__icon { width: 84px; height: 84px; }
  .area-grid  { grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
}