/**
 * CUTIS Theme — Service Hero section
 * BEM: service-hero, service-hero__content, service-hero__media,
 * service-hero__cta, service-hero__floating-card, service-hero__stats
 *
 * Colors/fonts/spacing are pulled from the CSS custom properties defined in
 * assets/css/header.css :root and from the Theme Settings design tokens
 * (inc/theme-settings.php -> cutis_output_theme_css_vars()). No new values
 * are hardcoded here.
 */

.service-hero {
  /* Vertical spacing comes from the .section-padding utility (assets/css/layout.css)
     applied in the markup — only horizontal gutters are set here so the two
     don't fight over the `padding` shorthand. */
  padding-left: var(--cutis-space-md);
  padding-right: var(--cutis-space-md);
}

.service-hero__inner {
  max-width: var(--cutis-container-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: var(--cutis-space-lg);
}

/* ------------------------------------------------------------------ */
/* Content column */
/* ------------------------------------------------------------------ */
.service-hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--cutis-space-sm);
}

.service-hero__badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--cutis-color-primary) 12%, white);
  color: var(--cutis-color-primary);
  font-family: var(--cutis-font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.service-hero__title {
  display: flex;
  flex-direction: column;
  margin: var(--cutis-space-xs) 0 0;
  font-family: var(--cutis-font-heading);
  font-weight: 700;
  line-height: 1.15;
}

.service-hero__title-line {
  font-size: clamp(28px, 4vw, 44px);
  color: var(--cutis-color-heading);
}

.service-hero__title-line--accent {
  color: var(--cutis-color-primary);
}

.service-hero__subheading {
  margin: var(--cutis-space-xs) 0 0;
  font-family: var(--cutis-font-body);
  font-size: calc(var(--cutis-font-size-base) + 2px);
  font-weight: 700;
  color: var(--cutis-color-heading);
}

.service-hero__description {
  margin: 0;
  max-width: 52ch;
  font-family: var(--cutis-font-body);
  font-size: var(--cutis-font-size-base);
  line-height: 1.6;
  color: var(--cutis-color-text);
}

/* ------------------------------------------------------------------ */
/* CTAs */
/* ------------------------------------------------------------------ */
.service-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cutis-space-sm);
  margin-top: var(--cutis-space-sm);
}

.service-hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: var(--cutis-button-radius);
  border: 2px solid transparent;
  font-family: var(--cutis-font-body);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease;
}

.service-hero__cta-icon {
  width: 18px;
  height: 18px;
  display: block;
}

.service-hero__cta--primary {
  background: var(--cutis-button-bg);
  border-color: var(--cutis-button-bg);
  color: var(--cutis-button-text);
}

.service-hero__cta--primary:hover {
  background: var(--cutis-button-bg-hover);
  border-color: var(--cutis-button-bg-hover);
}

.service-hero__cta--outline {
  background: transparent;
  border-color: var(--cutis-color-primary);
  color: var(--cutis-color-primary);
}

.service-hero__cta--outline:hover {
  background: color-mix(in srgb, var(--cutis-color-primary) 10%, transparent);
}

.service-hero__cta--tinted {
  background: color-mix(in srgb, var(--cutis-color-primary) 12%, white);
  color: var(--cutis-color-primary);
}

.service-hero__cta--tinted:hover {
  background: color-mix(in srgb, var(--cutis-color-primary) 20%, white);
}

/* ------------------------------------------------------------------ */
/* Media column: patient image + floating doctor image + floating cards */
/*                                                                      */
/* .service-hero__media shrink-wraps to the patient image's own        */
/* rendered size (width: fit-content — absolutely positioned children  */
/* don't contribute to that calculation), so it becomes the exact      */
/* positioning frame for the doctor image and floating cards instead   */
/* of the wider grid column. That's what lets top/right offsets below  */
/* track the image's real edges rather than an arbitrary flex box.     */
/* ------------------------------------------------------------------ */
.service-hero__media {
  position: relative;
  width: fit-content;
  max-width: 100%;
  margin-left: auto;
}

/* Decorative circle behind the patient image — sized off the image's own
   rendered WIDTH (not height) via aspect-ratio, so it scales with the photo
   at every breakpoint. The photo is portrait (much taller than wide), so
   sizing off height would make the circle's diameter far wider than the
   image itself, bleeding it out into the floating-card area to the right;
   basing it on width instead keeps the circle hugging the image's own
   footprint rather than overshooting it. */
.service-hero__media::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
  width: 94%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: var(--cutis-color-primary);
  opacity: 0.1;
}

.service-hero__patient-image {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 520px;
  border-radius: 24px;
  overflow: hidden;
}

.service-hero__patient-image img {
  width: 100%;
  height: auto;
  display: block;
}

.service-hero__doctor-image {
  position: absolute;
  z-index: 2;
  top: -32px;
  right: -24px;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  overflow: hidden;
  border: 7px solid var(--cutis-color-surface);
  box-shadow: 0 8px 20px rgba(15, 43, 61, 0.18);
}

.service-hero__doctor-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Cards are positioned by repeater order (1st/2nd/3rd), not by the
   card_type modifier class — content editors don't always pick a
   distinct type per row, so order is the only reliable signal for
   "which corner does this card belong in".
   NOTE: :nth-child(N of S) is used deliberately instead of plain
   :nth-of-type()/:nth-child() — this container's siblings are the
   patient-image div and doctor-image div FOLLOWED by the cards, and
   since every sibling here is a <div>, plain :nth-of-type(1)/(2)/(3)
   would count those image wrapper divs too and mis-target the cards
   entirely. ":nth-child(N of .service-hero__floating-card)" counts
   only among elements matching that class, which is what we want. */
.service-hero__floating-card {
  position: absolute;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  max-width: 190px;
  padding: var(--cutis-space-md);
  background: var(--cutis-color-surface);
  border: 1px solid var(--cutis-color-border);
  border-radius: 16px;
  box-shadow: 0 12px 28px rgba(15, 43, 61, 0.14);
}

/* Cards 1 and 2 ("Years Of Experience" stat, "Natural Result" icon+label)
   are round badges — fixed equal width/height circles with their content
   centered on both axes, instead of the left-aligned rectangle used by
   card 3. Sized/positioned independently of each other since they're each
   a different diameter. */
.service-hero__floating-card:nth-child(1 of .service-hero__floating-card):not(
    .service-hero__floating-card--text_card
  ),
.service-hero__floating-card:nth-child(2 of .service-hero__floating-card):not(
    .service-hero__floating-card--text_card
  ) {
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 50%;
  overflow: hidden;
  gap: 2px;
}

/* Stacked using fixed px `top` offsets — each one clearing the previous
   element's own bottom edge (itself a known, fixed value: -32 + 150 = 118,
   etc.) plus a deliberate gap — rather than percentages of the media box's
   height, which varies with the patient photo's own aspect ratio and made
   the gap between badges unpredictable (they ended up touching). */
.service-hero__floating-card:nth-child(1 of .service-hero__floating-card):not(
    .service-hero__floating-card--text_card
  ) {
  top: 146px;
  right: -45px;
  width: 150px;
  height: 150px;
  padding: 14px;
}

.service-hero__floating-card:nth-child(2 of .service-hero__floating-card):not(
    .service-hero__floating-card--text_card
  ) {
  top: 324px;
  right: -25px;
  width: 130px;
  height: 130px;
  padding: 14px;
}

.service-hero__floating-card-icon {
  width: 28px;
  height: 28px;
  display: block;
}

/* "Safe. Advanced. Trusted by Thousands." (card_type = text_card) — targeted
   by its type modifier class rather than nth-child position. The repeater
   currently has only this one row, which makes it :nth-child(1 of ...) and
   would otherwise pull in the fixed-size circle rules meant for the
   "stat"/"icon_label" cards above; a position-based selector would silently
   break again the next time a row is added, removed, or reordered in
   wp-admin. Specificity matches the nth-child rules it needs to beat
   (two classes) and it's declared after them, so it wins on source order. */
.service-hero__floating-card.service-hero__floating-card--text_card {
  top: auto;
  bottom: -33px;
  right: 8px;
  width: auto;
  height: auto;
  max-width: 300px;
  padding: 18px;
  border-radius: 16px;
  overflow: visible;
  background: var(--cutis-color-cream);
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: var(--cutis-space-sm);
  row-gap: 2px;
  align-items: center;
  justify-content: start;
  text-align: left;
}

.service-hero__floating-card--text_card .service-hero__floating-card-icon {
  grid-column: 1;
  grid-row: 1 / 3;
  width: 40px;
  height: 40px;
}

.service-hero__floating-card--text_card .service-hero__floating-card-title {
  grid-column: 2;
  grid-row: 1;
}

.service-hero__floating-card--text_card
  .service-hero__floating-card-description {
  grid-column: 2;
  grid-row: 2;
}

.service-hero__floating-card-number {
  font-family: var(--cutis-font-heading);
  font-size: 28px;
  line-height: 1;
  font-weight: 700;
  color: var(--cutis-color-primary);
}

.service-hero__floating-card-title {
  font-family: var(--cutis-font-body);
  font-size: 13px;
  font-weight: 700;
  color: var(--cutis-color-heading);
}

.service-hero__floating-card:nth-child(1 of .service-hero__floating-card)
  .service-hero__floating-card-title,
.service-hero__floating-card:nth-child(2 of .service-hero__floating-card)
  .service-hero__floating-card-title {
  font-size: 22px;
  line-height: 1.2;
}

.service-hero__floating-card-description {
  margin: 0;
  font-family: var(--cutis-font-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--cutis-color-text);
}

/* ------------------------------------------------------------------ */
/* Bottom statistics strip                                            */
/* Grid (not flex) so every column is a true equal fraction of the    */
/* row regardless of how many stats (4-6) are present.                */
/* ------------------------------------------------------------------ */
.service-hero__stats {
  /* box-sizing: border-box is required here specifically because this rule
     (unlike .service-hero__inner / .service-intro__inner, which have no
     padding/border of their own) combines max-width with its own padding
     and border. Without it, the default content-box model adds that
     padding+border ON TOP of the 1280px max-width, rendering this box
     ~70px wider than the section containers above it — which is what
     actually caused the container-width mismatch (see FIX 5). */
  box-sizing: border-box;
  max-width: var(--cutis-container-max);
  margin: var(--cutis-space-lg) auto 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--cutis-space-lg);
  padding: var(--cutis-space-lg);
  background: var(--cutis-color-surface);
  border: 1px solid var(--cutis-color-border);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(15, 43, 61, 0.08);
}

/* Icon on the left spanning both text rows, number + label stacked to its
   right — a 2-column/2-row grid instead of nested flex since the markup
   (icon img, number span, label span) has no wrapper element around the
   number+label pair to flex those two alone. */
.service-hero__stat {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: var(--cutis-space-sm);
  text-align: left;
  align-content: start;
  row-gap: 8px;
}

.service-hero__stat-icon {
  grid-column: 1;
  grid-row: 1 / 3;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  display: block;
}

.service-hero__stat-number {
  grid-column: 2;
  grid-row: 1;
  display: block;
  font-family: var(--cutis-font-heading);
  font-size: 22px;
  font-weight: 700;
  color: var(--cutis-color-heading);
}

.service-hero__stat-label {
  grid-column: 2;
  grid-row: 2;
  display: block;
  font-family: var(--cutis-font-body);
  font-size: 13px;
  color: var(--cutis-color-text);
}

/* Between roughly 991px and 1100px, the 6-column auto-fit grid above
   can only fit 5 of the 6 minmax(140px,1fr) columns, orphaning the 6th
   stat alone on its own row. A fixed 3-column intermediate step gives a
   clean, evenly-balanced 3x2 grid through that whole range instead of
   depending on auto-fit arithmetic landing exactly right at each width. */
@media (max-width: 1100px) {
  .service-hero__stats {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Between 991px and ~1355px the narrower two-column grid shrinks
   .service-hero__media enough that card 1's -45px right offset (see the
   desktop nth-child rule above) pushes its right edge past the section's
   own edge and out into the page, causing a real ~10px horizontal
   scrollbar (measured via getBoundingClientRect at 991/1100/1199/1300px).
   Card 2's -25px offset never actually reaches the edge on its own, but
   both cards' left edges are deliberately aligned on desktop (each card's
   `right` minus its own width lands on the same value), so both offsets
   are pulled in by the same 20px here to keep that alignment intact
   rather than only fixing card 1 and leaving them staggered. */
@media (min-width: 991px) and (max-width: 1399px) {
  .service-hero__floating-card:nth-child(1 of .service-hero__floating-card):not(
      .service-hero__floating-card--text_card
    ) {
    right: -25px;
  }

  .service-hero__floating-card:nth-child(2 of .service-hero__floating-card):not(
      .service-hero__floating-card--text_card
    ) {
    right: -5px;
  }
}

/* ------------------------------------------------------------------ */
/* Responsive: stack image below text, cards become inline, stats 2-col */
/* ------------------------------------------------------------------ */
@media (max-width: 990px) {
  .service-hero__inner {
    grid-template-columns: 1fr;
  }

  .service-hero__content {
    order: 1;
    align-items: center;
    text-align: center;
  }

  .service-hero__description {
    max-width: none;
  }

  .service-hero__ctas {
    justify-content: center;
  }

  .service-hero__media {
    order: 2;
    width: 100%;
    max-width: 520px;
    margin: var(--cutis-space-lg) auto 0;
  }

  .service-hero__floating-card {
    position: static;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--cutis-space-sm);
    max-width: none;
    width: 100%;
    margin-top: var(--cutis-space-sm);
  }

  /* Cards 1 and 2 are fixed-size circles on desktop (see the nth-child
       rules above, which win on specificity over the reset just above) —
       explicitly un-circle them back to the same row layout as card 3.
       NOTE: the :not(--text_card) clause here isn't for targeting (this
       media query block already resets the base .service-hero__floating-card
       above); it's required so this selector matches the desktop circle
       rule's specificity (0,0,3,0) exactly — without it this reset (one
       class + one pseudo-class lower) loses the cascade to the
       always-applicable desktop rule even inside this max-width block. */
  .service-hero__floating-card:nth-child(1 of .service-hero__floating-card):not(
      .service-hero__floating-card--text_card
    ),
  .service-hero__floating-card:nth-child(2 of .service-hero__floating-card):not(
      .service-hero__floating-card--text_card
    ) {
    width: 100%;
    height: auto;
    border-radius: 16px;
    justify-content: flex-start;
    text-align: left;
  }

  .service-hero__floating-card:nth-child(1 of .service-hero__floating-card)
    .service-hero__floating-card-title,
  .service-hero__floating-card:nth-child(2 of .service-hero__floating-card)
    .service-hero__floating-card-title {
    font-size: 13px;
    line-height: 1.4;
  }

  .service-hero__floating-card:nth-child(1 of .service-hero__floating-card)
    .service-hero__floating-card-number {
    font-size: 22px;
  }

  .service-hero__doctor-image {
    top: -24px;
    right: 4%;
  }

  .service-hero__stats {
    margin-top: var(--cutis-space-md);
    border-radius: 0;
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .service-hero__doctor-image {
    width: 96px;
    height: 96px;
    border-width: 4px;
    top: -16px;
    right: 4%;
  }
}