/* ==========================================================================
   15-bisect-hero.css — Sunrise Dermatology "photo bisects coloured zone"
                       hero component
   --------------------------------------------------------------------------
   ONE component, TWO variants, used on three pages today.

       Variant   | Pages                                 | Coloured zone   | Seam
       ----------+---------------------------------------+-----------------+--------------------
       full-cover| About hero                            | full-row blue   | row's TOP edge
       strip-top | Home "Proudly Serving" + /about/contact/ | strip @ row top | strip's BOTTOM edge

   Source:
     • About                  — Figma node 6506-6377 (file mIY3xFtVxnPjx9zUEZHWEN)
     • Home "Proudly Serving" — Figma node 6505-5024
     • /about/contact/        — Figma node 6513-1448

   --------------------------------------------------------------------------

   RESPONSIVE STRATEGY (the core rule, do not break)

     The bisect is expressed as ONE calc(), driven by container queries on
     the row. There are NO viewport breakpoints in the math — the same calc
     resolves correctly at every width from a phone to ultra-wide. Type
     tiers below the bisect get breakpoint scaling, but the bisect itself
     does not.

     Two unitless fractions parameterise everything:

       --sd-strip-aspect           (height / width of the bg-image's
                                   coloured zone within the row;
                                   Figma strip is 1440×392 → 0.27222,
                                   Figma full-cover blue is 1440×628
                                   but seams at row TOP so aspect = 0)

       --sd-photo-half-fraction    (half the visible photo's height
                                   divided by its width;
                                   Locations photo 1000×460 → 0.23,
                                   About hero photo 1000×520 → 0.26)

     Photo aspect ratio is FORCED via `aspect-ratio` so source image
     dimensions don't matter (home is 1000×562, contact is 2000×920, About
     is 1976×1040 — all three end up displayed at the Figma-correct ratio
     via object-fit: cover).

   --------------------------------------------------------------------------

   SCOPE / SELECTOR RULES (also non-negotiable)

     • NO row-unique IDs (`#row-unique-N`). They re-number when rows are
       added/removed in WPBakery.
     • NO `:nth-child` / `:nth-of-type` / row-position selectors.
     • NO `body.home` / `body.page-id-*` page locks on the component
       itself — the same row block must be drag-droppable onto any page
       and Just Work.
     • Only stable, intentional class names are used:
         .sd-bisect-hero                     (NEW component root)
         .sd-bisect-hero--full-cover         (NEW: About variant)
         .sd-bisect-hero--strip-top          (NEW: Locations variant)
         .sd-bisect-hero__title-row          (NEW: cream row above the photo row,
                                              full-cover variant only)
         .about-hero-title                   (existing on About)
         .about-hero-image-bg                (existing on About)
         .sd-locations-block                 (existing on Home + Contact)

     The .about-hero-* and .sd-locations-block names are kept in the
     selector lists below as backward-compat aliases so the live pages
     pick up the rules without WPBakery edits, AND new pages can use the
     generic .sd-bisect-hero* names for clean reuse.

   ========================================================================== */


/* ──────────────────────────────────────────────────────────────────────────
   1. Container queries + CSS custom properties per variant
   --------------------------------------------------------------------------
   Every row that participates in the component becomes an inline-size
   query container. That makes 100cqw inside the row resolve to the row's
   actual rendered width, regardless of viewport — which is what makes the
   bisect math responsive without any breakpoints.
   ────────────────────────────────────────────────────────────────────────── */

.sd-bisect-hero,
.sd-bisect-hero__title-row,
.about-hero-title,
.about-hero-image-bg,
.sd-locations-block {
	container-type: inline-size;
}

/* Variant A — full-cover bg colour, photo bisects the row's TOP edge.
   Seam is at row top, so seam-y = 0px. Photo half-fraction = 0.26
   (Figma photo 1000×520 → 520/2/1000). */
.sd-bisect-hero--full-cover,
.about-hero-image-bg {
	--sd-seam-y: 0px;
	--sd-photo-half-fraction: 0.26;
	--sd-photo-aspect-h: 520;
	--sd-photo-aspect-w: 1000;
}

/* Variant B — strip bg-image at row top (background-size: contain), photo
   bisects the strip's BOTTOM edge.
   Seam-y = strip rendered height = row_w × (strip_h / strip_w) =
   100cqw × (392 / 1440) = 100cqw × 0.27222.
   Photo half-fraction = 0.23 (Figma photo 1000×460 → 460/2/1000). */
.sd-bisect-hero--strip-top,
.sd-locations-block {
	--sd-seam-y: calc(100cqw * 0.27222);
	--sd-photo-half-fraction: 0.23;
	--sd-photo-aspect-h: 460;
	--sd-photo-aspect-w: 1000;
}


/* ──────────────────────────────────────────────────────────────────────────
   2. Photo aspect-ratio enforcement
   --------------------------------------------------------------------------
   Force every photo inside the component to render at the Figma-correct
   aspect, cropping with object-fit: cover. This decouples the bisect math
   from whichever source JPG/PNG is wired into the row. The 1000px max-width
   already lives on Uncode's .single-wrapper — we only override the height
   side of the equation here.
   ────────────────────────────────────────────────────────────────────────── */

.sd-bisect-hero .uncode-single-media img,
.about-hero-image-bg .uncode-single-media img,
.sd-locations-block .uncode-single-media img {
	aspect-ratio: var(--sd-photo-aspect-w) / var(--sd-photo-aspect-h) !important;
	object-fit: cover !important;
	width: 100% !important;
	height: auto !important;
}


/* ──────────────────────────────────────────────────────────────────────────
   3. The bisect — one calc(), every viewport
   --------------------------------------------------------------------------
   We want the photo's vertical CENTRE to land at the seam_y defined per
   variant above. The photo's natural top (after we zero the row's
   padding-top below) is row_top + 0 = row_top, so:

       margin-top = seam_y − half_photo_h
                  = var(--sd-seam-y) − (photo_w × photo_half_fraction)

   photo_w is min(100cqw, 1000px) — the photo fills the row width up to
   its 1000 px cap. min() over mixed length units resolves at compute
   time, so this stays correct at every breakpoint.

   Worked examples:

       Variant A (About): seam-y = 0px, half_fraction = 0.26
         row_w = 1248 → mt = 0px − (1000 × 0.26) = −260 px
         row_w =  800 → mt = 0px − ( 800 × 0.26) = −208 px

       Variant B (Locations): seam-y = 100cqw × 0.27222, half_fraction = 0.23
         row_w = 1248 → mt = (1248 × 0.27222) − (1000 × 0.23) =  109.7 px
         row_w =  800 → mt = ( 800 × 0.27222) − ( 800 × 0.23) =   33.8 px
         row_w =  400 → mt = ( 400 × 0.27222) − ( 400 × 0.23) =   16.9 px

   Note: seam-y is itself a CSS custom-property length so we never
   multiply a length by literal 0 inside this calc(). Chrome's CSS
   engine collapses `100cqw * 0` to a unitless `0`, which then makes
   the surrounding `<length> − <length>` subtraction invalid and
   silently pins margin-top to 0. Storing seam-y as `0px` (Variant A)
   or `calc(100cqw × 0.27222)` (Variant B) sidesteps that.
   ────────────────────────────────────────────────────────────────────────── */

/* Specificity note: Uncode's parent theme owns this very selective rule:
       .main-container .row-container .row-parent .uncont
           > :first-child:not([class*="shift_y_"]) { margin-top:0 !important }
   …which targets exactly our photo wrapper (`.uncode-single-media` is the
   first child of `.uncont`) and pins margin-top to 0. Specificity is
   0,6,0 with !important. To win cleanly we mirror that path and add the
   variant class + a `:first-child` qualifier, hitting 0,7,0 at !important.
   The same chain is repeated three times (one per variant class) so the
   component still works whether the row was tagged with `.about-hero-image-bg`,
   `.sd-locations-block`, or the new `.sd-bisect-hero`. */
.main-container .row-container.sd-bisect-hero .row-parent .uncont > .uncode-single-media:first-child,
.main-container .row-container.about-hero-image-bg .row-parent .uncont > .uncode-single-media:first-child,
.main-container .row-container.sd-locations-block .row-parent .uncont > .uncode-single-media:first-child {
	margin-top: calc(
		var(--sd-seam-y, 0px)
		- (min(100cqw, 1000px) * var(--sd-photo-half-fraction))
	) !important;
	position: relative;
	z-index: 2;
}

/* Zero the row's top padding so the photo's natural top is at row_top.
   The bisect calc above is written assuming this — without it the photo
   would land padding_top pixels too low. */
.sd-bisect-hero > .row-parent,
.about-hero-image-bg > .row-parent,
.sd-locations-block > .row-parent {
	padding-top: 0 !important;
}

/* Neutralise Uncode's built-in shift_y_quad / shift_y_neg_quad on any
   wpb_row inside the component. Both apply hard ±144 px margins + an
   inline height — neither of which is responsive. We replaced that
   mechanic with the calc above.

   Specificity note: Uncode's parent theme rule
       body:not(.vc-safe-mode) .shift_y_neg_quad { margin-top:-144px !important }
   is (0,2,1). We need (0,3,0)+ to beat it, so we mirror the
   .main-container .row-container.<variant> prefix used above. The
   shift class lives on an INNER wpb_row inside the column (not the
   outer row), so we use a descendant selector — any depth works. */
.main-container .row-container.sd-bisect-hero .shift_y_quad,
.main-container .row-container.sd-bisect-hero .shift_y_neg_quad,
.main-container .row-container.about-hero-image-bg .shift_y_quad,
.main-container .row-container.about-hero-image-bg .shift_y_neg_quad,
.main-container .row-container.sd-locations-block .shift_y_quad,
.main-container .row-container.sd-locations-block .shift_y_neg_quad {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	height: auto !important;
}


/* ──────────────────────────────────────────────────────────────────────────
   4. Title row above the full-cover variant (About hero)
   --------------------------------------------------------------------------
   In the full-cover variant the photo's TOP HALF overflows ABOVE the
   bisect-hero row, so it lands inside the cream title row above. The
   title row needs bottom padding equal to half the photo's height plus
   a 48 px gap (Figma hero stack uses 48 px between title and photo).

   Same calc shape as the bisect itself — capped at 1000 px photo width,
   driven by 100cqw of the title row.
   ────────────────────────────────────────────────────────────────────────── */

.sd-bisect-hero__title-row > .row-parent,
.about-hero-title > .row-parent {
	padding-bottom: calc(
		48px + (min(100cqw, 1000px) * var(--sd-photo-half-fraction, 0.26))
	) !important;
}


/* ──────────────────────────────────────────────────────────────────────────
   5. Typography — content sitting BELOW the photo inside the bisect-hero
   --------------------------------------------------------------------------
   Variant A (About) puts an h2.h3 intro paragraph below the photo.
   Variant B (Locations) puts the .sd-communities-widget below the photo;
   that widget is already typeset by 12-home-figma.css (under body.home)
   and by future per-page rules — we deliberately don't touch it here,
   to keep the component agnostic about what comes after the photo.

   Only the About-style intro paragraph gets a tier lock here, because
   it sits inside the bisect-hero's blue background and needs the white
   colour + Figma 40/48 SemiCondensed sizing.
   ────────────────────────────────────────────────────────────────────────── */

.sd-bisect-hero--full-cover .heading-text h1.h3,
.sd-bisect-hero--full-cover .heading-text h2.h3,
.sd-bisect-hero--full-cover .heading-text h3.h3,
.about-hero-image-bg .heading-text h1.h3,
.about-hero-image-bg .heading-text h2.h3,
.about-hero-image-bg .heading-text h3.h3 {
	font-family: var(--sd-font-heading) !important;
	font-size: 40px !important;
	font-weight: 400 !important;
	line-height: 48px !important;
	letter-spacing: 0 !important;
	color: var(--sd-white) !important;
	text-align: center;
}

/* Title in the cream row above (Variant A only) — Figma is 96/96 Mona
   Sans Medium #114671, centered. */
.sd-bisect-hero__title-row .heading-text h1.h1,
.sd-bisect-hero__title-row .heading-text h2.h1,
.sd-bisect-hero__title-row .heading-text h3.h1,
.about-hero-title .heading-text h1.h1,
.about-hero-title .heading-text h2.h1,
.about-hero-title .heading-text h3.h1 {
	color: var(--sd-blue-gray) !important;
	text-align: center;
}


/* ──────────────────────────────────────────────────────────────────────────
   6. Type tier scaling — only the intro paragraph below the About photo.
       Bisect math above is intentionally NOT scaled here; container
       queries handle that proportionally.
   ────────────────────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
	.sd-bisect-hero--full-cover .heading-text h1.h3,
	.sd-bisect-hero--full-cover .heading-text h2.h3,
	.sd-bisect-hero--full-cover .heading-text h3.h3,
	.about-hero-image-bg .heading-text h1.h3,
	.about-hero-image-bg .heading-text h2.h3,
	.about-hero-image-bg .heading-text h3.h3 {
		font-size: 22px !important;
		line-height: 30px !important;
	}
}