/* ============================================================================
   PREMIUM VISUAL LAYER — HOMEPAGE
   Direction: "Soft UI Evolution". Loads after styles.css.

   The homepage previously carried three unrelated depth languages at once:
   a hard 20px offset block under the hero carousel, one-off drop shadows on
   the feature cards, and Google's own Material elevation on the review cards.
   This layer resolves them into a single hierarchy, using the shared tokens:

       carousel (focal)  >  feature cards  >  feature photos / location photo
       >  review cards (Google's own elevation, deliberately preserved)

   Boldness is spent in exactly one place — the hero carousel — and everything
   around it is made quieter and more evenly spaced. Copy, palette, fonts and
   the scroll-linked --feature-progress binding are untouched.

   NOTE: rules that would otherwise clobber styles.css's mobile overrides are
   deliberately wrapped in @media(min-width:851px), since this file wins the
   cascade on source order alone.
   ============================================================================ */


/* ---------------------------------------------------------------------------
   1. HERO
   --------------------------------------------------------------------------- */

@media(min-width:851px){
  .hero.hero--services{padding-bottom:var(--space-6)}
  /* Give the CTA row and the trust strip real breathing room. */
  .hero--services .hero-actions{gap:var(--space-4);margin-top:var(--space-4)}
  .hero--services .trust{margin-top:var(--space-5)}
}

/* The blueprint rails were competing with the photograph behind them. Quieter
   rails let the headline and the carousel carry the composition. */
.hero--services .hero-rails{opacity:.22}

/* The trust strip reads as a single soft chip rather than a pill sticker. */
.hero--services .trust{
  padding:10px 18px;
  border-radius:var(--r-lg);
  background:rgb(255 255 255 / .78);
  box-shadow:var(--elev-1),0 0 0 1px rgb(7 82 143 / .05);
  -webkit-backdrop-filter:saturate(1.35) blur(8px);
  backdrop-filter:saturate(1.35) blur(8px);
}


/* --- Hero service carousel: the one deliberately bold object --------------- */

/* Replaces the flat `20px 20px 0 #d9edf8` offset block. The same visual weight
   is kept, but expressed as genuine depth: three brand-tinted layers, tight to
   loose, so the panel reads as a lifted surface instead of a printed shadow. */
.hero-service-carousel__viewport{
  border-radius:var(--r-lg);
  box-shadow:
    0 2px 6px rgb(7 82 143 / .07),
    0 14px 30px rgb(7 82 143 / .11),
    0 38px 74px rgb(7 82 143 / .17);
  transition:box-shadow var(--dur-slow) var(--ease-out);
}

@media(max-width:560px){
  /* A 74px-blur shadow is too heavy at phone scale — same language, less spread. */
  .hero-service-carousel__viewport{
    box-shadow:
      0 2px 6px rgb(7 82 143 / .07),
      0 10px 24px rgb(7 82 143 / .14);
  }
}

/* Slide crossfade harmonised with the shared motion tokens. */
.hero-service-slide{
  transition:opacity var(--dur-slow) var(--ease-out),transform 560ms var(--ease-out);
}
.hero-service-slide img{transition:transform 820ms var(--ease-out)}

/* Controls: glassy rather than flat, with a proper press state. */
.hero-service-carousel__controls button{
  border-color:rgb(255 255 255 / .55);
  background:rgb(7 82 143 / .3);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  transition:
    background-color var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out),
    color var(--dur) var(--ease-out),
    transform var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out);
}
.hero-service-carousel__controls button:hover{
  border-color:#fff;
  box-shadow:0 6px 18px rgb(2 38 72 / .3);
}
.hero-service-carousel__controls button:active{
  transform:translateY(0) scale(.95);
  transition-duration:var(--dur-fast);
}

/* "Explore service" gets the same arrow nudge used elsewhere on the page. */
.hero-service-slide__copy a{
  transition:border-color var(--dur) var(--ease-out);
}
.hero-service-slide__copy a b{
  display:inline-block;
  transition:transform var(--dur) var(--ease-out);
}
.hero-service-slide__copy a:hover{border-bottom-color:#fff}
.hero-service-slide__copy a:hover b{transform:translateX(4px)}


/* ---------------------------------------------------------------------------
   2. FEATURE BANDS  (.home-about-feature / .home-service-feature)

   These are driven per-frame by --feature-progress from app.js, so `transform`
   and `transition` are intentionally NOT declared here — only depth and radius.
   --------------------------------------------------------------------------- */

@media(min-width:851px){
  /* One rhythm for both bands instead of 38/118 and 28/108. */
  .home-about-feature,
  .home-service-feature{margin:var(--space-4) auto var(--space-6)}
}

/* 14px sat outside the approved 8–12px band; both photos now match the cards. */
.home-about-feature figure,
.home-service-feature figure{
  border-radius:var(--r-lg);
  box-shadow:var(--elev-2);
}

/* The overlapping blue card is the second tier of the hierarchy: clearly above
   the photograph it sits on, clearly below the hero carousel. */
.home-about-feature__card,
.home-service-feature__card{
  border-radius:var(--r-lg);
  box-shadow:
    0 4px 10px rgb(7 82 143 / .10),
    0 18px 40px rgb(7 82 143 / .16),
    0 44px 84px rgb(7 82 143 / .12);
}

.home-about-feature__card .button,
.home-service-feature__card .button{
  transition:
    background-color var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out),
    color var(--dur) var(--ease-out),
    transform var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out);
}
.home-about-feature__card .button:hover,
.home-service-feature__card .button:hover{
  box-shadow:0 10px 24px rgb(2 38 72 / .3);
}
.home-about-feature__card .button:active,
.home-service-feature__card .button:active{
  transform:translateY(0);
  transition-duration:var(--dur-fast);
}


/* ---------------------------------------------------------------------------
   3. DOCTOR CONSULTATION BAND
   --------------------------------------------------------------------------- */

@media(min-width:851px){
  .doctor-consultation{margin:var(--space-5) 0 var(--space-6)}
}

/* The cut-out portrait needs a softer, wider contact shadow to sit in the band
   rather than float over it. */
.doctor-consultation__portrait img{
  filter:drop-shadow(0 16px 24px rgb(1 43 80 / .22));
}

.doctor-consultation .button{
  transition:
    background-color var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out),
    color var(--dur) var(--ease-out),
    transform var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out);
}
.doctor-consultation .button:hover{box-shadow:0 10px 26px rgb(1 43 80 / .32)}
.doctor-consultation .button:active{transform:translateY(0);transition-duration:var(--dur-fast)}

.doctor-consultation .text-link{
  transition:border-color var(--dur) var(--ease-out);
}
.doctor-consultation .text-link b{
  display:inline-block;
  transition:transform var(--dur) var(--ease-out);
}
.doctor-consultation .text-link:hover b{transform:translateX(4px)}


/* ---------------------------------------------------------------------------
   4. GOOGLE REVIEWS
   Google's own card styling (white, Material elevation, multicolour G, the
   summary line) is preserved exactly. Only the surrounding air and the
   transition quality change.
   --------------------------------------------------------------------------- */

@media(min-width:851px){
  .google-reviews{margin-bottom:var(--space-6);padding-top:var(--space-6)}
  .google-reviews__summary{margin-bottom:var(--space-4)}
  /* 16px → 24px gutters; flex-basis kept in sync so three cards still fit. */
  .google-reviews__rail{gap:var(--space-3)}
  .google-review-card{flex-basis:calc((100% - 48px) / 3)}
  .google-reviews__controls{margin-top:var(--space-3)}
}

.google-review-card{
  padding:var(--space-3) var(--space-3) 26px;
  transition:box-shadow var(--dur) var(--ease-out),transform var(--dur) var(--ease-out);
}
.google-review-card:hover{transform:translateY(-2px)}

.google-reviews__summary b{
  transition:color var(--dur) var(--ease-out),border-color var(--dur) var(--ease-out);
}
.google-reviews__summary:hover b{color:var(--clay);border-bottom-color:var(--clay)}

.google-reviews__controls button{
  transition:
    border-color var(--dur) var(--ease-out),
    background-color var(--dur) var(--ease-out),
    color var(--dur) var(--ease-out),
    transform var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out);
}
.google-reviews__controls button:hover{box-shadow:var(--elev-2);transform:translateY(-1px)}
.google-reviews__controls button:active{transform:translateY(0) scale(.95);transition-duration:var(--dur-fast)}


/* ---------------------------------------------------------------------------
   5. LOCATION
   --------------------------------------------------------------------------- */

@media(min-width:851px){
  .location{padding-top:var(--space-6);padding-bottom:var(--space-6);gap:var(--space-6)}
}

.location img{
  border-radius:var(--r-lg);
  box-shadow:var(--elev-3);
}

.location .text-link span{
  display:inline-block;
  transition:transform var(--dur) var(--ease-out);
}
.location .text-link:hover span{transform:translateX(4px)}


/* ---------------------------------------------------------------------------
   6. SHARED HOMEPAGE LINK / CTA CRAFT
   --------------------------------------------------------------------------- */

.hero--services .hero-actions .button{
  transition:
    background-color var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out),
    color var(--dur) var(--ease-out),
    transform var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out);
}
.hero--services .hero-actions .button:hover{box-shadow:var(--elev-3)}
.hero--services .hero-actions .button:active{transform:translateY(0);transition-duration:var(--dur-fast)}

.hero--services .text-link,
.location .text-link{transition:border-color var(--dur) var(--ease-out)}
.hero--services .text-link span{
  display:inline-block;
  transition:transform var(--dur) var(--ease-out);
}
.hero--services .text-link:hover span{transform:translateX(4px)}


/* ---------------------------------------------------------------------------
   7. REDUCED MOTION
   The foundation already collapses --dur*; this removes the remaining lifts.
   --------------------------------------------------------------------------- */

@media(prefers-reduced-motion:reduce){
  .google-review-card:hover,
  .google-reviews__controls button:hover,
  .hero-service-carousel__controls button:hover,
  .hero--services .hero-actions .button:hover,
  .home-about-feature__card .button:hover,
  .home-service-feature__card .button:hover,
  .doctor-consultation .button:hover{transform:none}
  .hero-service-slide__copy a:hover b,
  .hero--services .text-link:hover span,
  .location .text-link:hover span,
  .doctor-consultation .text-link:hover b{transform:none}
}


/* ---------------------------------------------------------------------------
   8. FIRST-PAINT ENTRANCE — the hero's second half
   The hero copy already animates in on load; the service panel beside it did
   not, so the hero arrived half-finished. This gives it the same t0 and slots
   it between the headline and the supporting copy, so the hero reads as one
   gesture. translateY + scale only — no horizontal movement.
   --------------------------------------------------------------------------- */
.page-entrance .hero-service-carousel{
  animation:home-panel-in var(--dur-slow) var(--ease-out) both;
  animation-delay:210ms;
}
@keyframes home-panel-in{
  from{opacity:0;transform:translateY(20px) scale(.988)}
  to{opacity:1;transform:none}
}
@media(prefers-reduced-motion:reduce){
  .page-entrance .hero-service-carousel{animation:none}
}