/* ─────────────────────────────────────────────────────────────
   insurance-guide.css — Insurance Guide page template only
   (enqueued conditionally, dep odx-navigation)
   Ground truth: ui-blueprints/section-2-2-1440(-mobile).styles.json,
   section-537-2-1440(-mobile).styles.json — live computed-style dumps,
   /ultimate-guide-to-dental-insurance-nyc/. No shared .odx-page-header
   band on this page (confirmed absent from live markup) — the hero
   below is a page-specific full-bleed section, not the interior band.

   Namespace: `.odx-insurance-guide` wraps everything; no collision
   with `.odx-contact`/`.odx-hours-*` (footer-owned) or `.odx-cv__*`.
   ─────────────────────────────────────────────────────────── */

/* ── HERO — section-2-2: full-bleed dark hero, bg image + 50% black
   scrim, white text, 1120px rail, 2-col 560/560 (no explicit column
   gap; live's own inner padding on the finder col supplies the
   visual gutter). Vertical clearance lives here as PADDING on the
   SECTION (not as margin on .hero-inner) — a child's block margin
   collapses through a parent with no padding/border/BFC, which is
   why the dark bg painted ~170px short in round 1.
   r2 gate re-derivation from the live blueprint (section-2-2-1440.
   styles.json, cross-checked against verify-unit.mjs's own live
   SECTION geometry — both agree h=912, not the ledger's rough ≈682px
   estimate): inner-wrap padding 75/75, content-col margin-top:199px
   margin-bottom:50px, content-col h=513. 75+199+513+50+75 = 912 exact.
   Round-1's 44px top used a header-adjusted probe (our sticky header
   vs live's absolute-overlay header) that conflated SECTION POSITION
   (y, already handled separately — verify-unit normalizes the page-
   level header-band y-offset before comparing) with SECTION HEIGHT
   (h, an internal-to-the-section measurement the header mechanism
   doesn't touch). Using the literal top clearance (75+199=274) here,
   matching bottom's already-correct literal (50+75=125) — h now
   reproduces live's 912 exactly regardless of header type. ── */
.odx-insurance-guide__hero {
	background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
		url('../../../../uploads/2021/05/Screen-Shot-2021-03-24-at-1.57.54-PM.png');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	color: var(--color-white);
	padding: 274px 0 125px;
}

.odx-insurance-guide__hero-inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	max-width: 1120px;
	margin: 0 auto;
}

/* live: div_block-232-2 is align-items:flex-end (right-aligns its child
   within the 560px column); div_block-4-2 (the actual text wrap) is
   width:80% (448px) — so the whole intro block (heading/subheading/text/
   button) hugs the column's RIGHT edge as one 80%-wide unit */
.odx-insurance-guide__hero-col--intro {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}

.odx-insurance-guide__hero-col-wrap {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 80%;
}

.odx-insurance-guide__hero-col--finder {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding-left: 30px;
	padding-right: 30px;
}

.odx-insurance-guide__hero-title {
	color: var(--color-white);
	font-size: 36px;
	font-weight: 400;
	line-height: 1.6;
	margin: 0 0 25px;
}

.odx-insurance-guide__hero-subtitle {
	color: var(--color-white);
	font-size: 30px;
	font-weight: 400;
	line-height: 1.6;
	margin: 0 0 25px;
}

.odx-insurance-guide__hero-text {
	color: var(--color-white);
	font-size: 1rem;
	line-height: 1.6;
	max-width: 90%; /* live: text_block-10-2 max-width:90% of the .hero-col-wrap */
	margin-bottom: 25px;
}

.odx-insurance-guide__hero-text p {
	margin: 0;
}

/* live: link_button-382-2 — one-off blue-fill/3px-radius CTA, NOT the
   shared .odx-btn pill family (radius/hover differ: hover goes to navy,
   not white, per live computed-style probe). r2 gate: live computes
   fontWeight:400 here (probed via ui-clone anchor extraction on
   #section-2-2) — that's the plain body weight, i.e. the INHERITED
   serif face (--font-serif), not the sans override we had. No explicit
   font-family rule needed; removing the sans override lets it inherit
   Merriweather per PATTERNS.md's default-face rule. */
.odx-insurance-guide__hero-cta {
	display: inline-block;
	background-color: var(--color-blue);
	border: 1px solid var(--color-blue);
	color: var(--color-white);
	font-size: 1rem;
	padding: 10px 16px;
	border-radius: 3px;
	text-decoration: none;
	transition: background-color var(--transition-base), border-color var(--transition-base);
}

.odx-insurance-guide__hero-cta:hover {
	background-color: var(--color-navy);
	border-color: var(--color-navy);
	color: var(--color-white);
}

.odx-insurance-guide__finder-heading {
	color: var(--color-white);
	font-size: 24px;
	font-weight: 400;
	line-height: 1.6;
	text-align: left; /* live: headline-1120-2 text-align:left despite its centered flex parent (Oxygen author literal) */
	margin: 0 0 25px;
}

/* live: div_block-11/15-2 — outer 20px radius pill, inner 10px radius
   pill w/ inset shadow (a "quick jump" scroll box for the 12 provider
   anchor links), 30px vertical / 10px horizontal padding, max-height
   scroll via overflow */
.odx-insurance-guide__finder-pill {
	background-color: var(--color-white);
	border-radius: 20px;
	/* live: the 10px horizontal padding lives on THIS outer box, not the
	   scroller — so the scrollbar deducts from row width inside it (live
	   rows compute 304, not 307; flips the Empire pill wrap @767) */
	padding: 0 10px;
	max-width: 327px;
	width: 100%;
	margin-bottom: 30px; /* live div_block-11-2 — inert @1440 (intro col is taller) but it is the hero's −30 @767/375 */
}

.odx-insurance-guide__finder-list {
	list-style: none;
	margin: 0;
	padding: 30px 0;
	height: 350px; /* live: div_block-15-2 fixed height:350px (not max-height) — 12 rows overflow-scroll within it */
	overflow: hidden scroll; /* live #_dynamic_list-33-2 exact pair (x hidden, y scroll) */
	border-radius: 10px;
	box-shadow: inset 0 0 10px 2px rgba(160, 160, 160, 0.44);
}

.odx-insurance-guide__finder-row {
	padding: 5px 20px;
	text-align: center;
	max-width: 99%; /* live div_block-34-2 author literal — rows are 304/307, and that 3px is what wraps the Empire pill @767 */
}

.odx-insurance-guide__finder-row a {
	color: var(--color-blue);
	font-family: var(--font-sans); /* r2 gate: no rule here previously → inherited serif; live computes fontWeight:600 sans-bold (probed), and the wider Merriweather metrics were also breaking "Dental Network of America®" wrap */
	font-size: 1rem;
	font-weight: 600;
	text-transform: uppercase;
	text-decoration: none;
}

.odx-insurance-guide__finder-row a:hover {
	color: #108fed;
}

/* ── BODY — section-537-2: white BG. Live nests a 1120px outer rail
   (div_block-545-2, zero padding) inside which an 896px column
   (div_block-546-2, zero padding, margin-top:30) is centred — net
   effect is a plain 896px centred column with no side padding
   (content never touches the viewport edge until ≤767 gutters kick
   in), 75px bottom padding on the innermost wrap ── */
.odx-insurance-guide__body-inner {
	max-width: 896px;
	margin: 0 auto;
	/* live's 30px is margin-top on div_block-546-2 inside a FLEX inner-wrap,
	   so it never collapses; in plain block flow it collapses through the
	   section — carry it as padding-top instead (same painted geometry) */
	padding-top: 30px;
	padding-bottom: 75px;
}

/* live blocks (.our-office-textdiv) are flex columns — flex items form
   independent formatting contexts, so a trailing UL's 16px margin-bottom
   inside the rich text COUNTS toward block height instead of collapsing
   into the next block's margin-top (r3 gate: every 16px drift traced here) */
.odx-insurance-guide__block {
	margin-top: 25px;
	display: flex;
	flex-direction: column;
}

.odx-insurance-guide__block:first-child {
	margin-top: 0;
}

/* live: div_block-541-2 (the opening block only) carries a unique
   30px all-around padding not shared by any other article block */
/* live lede (div_block-541-2) computes display:grid gap:20px — the 20px
   H1→intro-text→phone-line gaps are grid gaps, not margins (block paints
   369px = 30 + 115 + 20 + 128 + 20 + 26 + 30) */
.odx-insurance-guide__block--lede {
	padding: 30px;
	display: grid;
	gap: 20px;
}

/* live: .our-office-heading — navy, 2.2em (35.2px @16px base), fw500,
   lh1.6, margin:0 (no bottom gap — confirmed via blueprint rects,
   heading bottom edge is flush with the following rich-text block,
   same pattern as cv.css/.odx-cv__heading and hours.css) */
.odx-insurance-guide__heading {
	color: var(--color-navy);
	font-size: 2.2em;
	font-weight: 500;
	line-height: 1.6;
	margin: 0;
}

/* live: headline-542-2 (the article's opening H1) carries only
   `.ct-headline`, NOT `our-office-heading` — plain h1 default size
   (36px), fw500, navy, no bottom margin (the text block below supplies
   its own top spacing via normal document flow) */
.odx-insurance-guide__heading--lede {
	font-size: 36px;
	margin-bottom: 0;
}

/* live: .our-office-text — theme serif (Merriweather), #404040, 16px,
   lh1.6 — confirmed via computed fontFamily probe (no inline Helvetica
   override on this page's rich text, unlike tpl-cv) */
.odx-insurance-guide__text,
.odx-insurance-guide__intro-text {
	color: var(--color-charcoal);
	font-size: 1rem;
	line-height: 1.6;
}

.odx-insurance-guide__text p,
.odx-insurance-guide__intro-text p {
	margin: 0 0 1em;
}

.odx-insurance-guide__text p:last-child {
	margin-bottom: 0;
}

.odx-insurance-guide__text ul {
	margin: 0 0 1em;
	padding-left: 40px; /* live computes 40px (UA 2.5em×16) — 1.5em left LI text 16px wider and flipped a wrap @767 */
}

/* live LIs carry zero margins — every local UL height excess at the r2
   gate (24/8/48/16/32px) was exactly 8px × LI count from a 0.5em mB */
.odx-insurance-guide__text li {
	margin-bottom: 0;
}

.odx-insurance-guide__text li ul {
	margin-top: 0; /* live nested UL computes mT0/mB0 */
	margin-bottom: 0;
}

.odx-insurance-guide__text a {
	color: var(--color-blue);
	text-decoration: none;
}

.odx-insurance-guide__text a:hover {
	color: #108fed;
}

.odx-insurance-guide__text h2 {
	color: var(--color-navy);
	font-size: 30px; /* live computes 30px/48px fw700 — off the token scale (xl=24/2xl=32), keep literal */
	line-height: 1.6;
}

.odx-insurance-guide__intro-text {
	margin-bottom: 20px;
}

/* ── PROVIDER GRID — dynamic_list-566-2: 3-col desktop, 20px gap,
   logo card w/ navy drop-shadow (static — no hover paint change per
   live computed-style probe), Poppins bold blue caption below logo ── */
.odx-insurance-guide__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.odx-insurance-guide__card {
	/* Visual box-model moved to .odx-insurance-guide__card a so it owns the
	   border-box sizing and renders full-track width (285px) instead of
	   shrinking by 2×(10px padding + 1px border) = 22px. */
}

.odx-insurance-guide__card a {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-decoration: none;
	width: 100%;
	box-sizing: border-box;
	background-color: var(--color-white);
	border: 1px solid rgba(24, 47, 108, 0.25);
	border-radius: 10px;
	box-shadow: 3px 3px 15px 1px rgba(24, 47, 108, 0.3);
	padding: 10px;
}

/* live: .oxy-dynamic-list [data-id="image-573-2"] sets ONLY height:150px
   — no width rule at all, so the browser renders each logo at its own
   native aspect ratio scaled to that height (width varies per-image,
   e.g. 259px @1440, 280px @767 for the first logo) rather than
   stretching to fill the card. Card is align-items:center so the
   naturally-sized image centers horizontally within it */
.odx-insurance-guide__card-logo {
	width: auto;
	height: 150px;
	max-width: 100%;
}

.odx-insurance-guide__card-label {
	display: block;
	color: var(--color-blue);
	font-family: var(--font-sans);
	font-size: 1rem;
	font-weight: 600;
	text-align: center;
	text-transform: uppercase; /* live text_block-614-2 — uppercase is what wraps "Empire Blue Cross Blue Shield™" to 2 lines */
	margin-top: 28px; /* live: label top edge 188px from card top = 10 pad + 150 logo + 28 (blueprint rects) */
}

/* ── RESPONSIVE — 767px (mobile flip) ────────────────────────
   live @767: hero collapses to single column (flex-column), 30px
   side gutters on the finder col only (intro col stays flush at the
   20px section-level gutter); provider grid stacks to 1-col, 30px
   side gutters (matches CV/hours mobile rail pattern).
   ─────────────────────────────────────────────────────────── */
@media ( max-width: 767px ) {
	/* r2 re-gate: section-2-2 blueprint at 767 shows the SAME 274px top /
	   125px bottom split as 1440 (75+199=274 top, 50+75=125 bottom;
	   1261-274-862=125 confirmed against the 767 content-col rect) — no
	   767-specific override needed, desktop .hero padding (see above)
	   already covers this breakpoint. */
	.odx-insurance-guide__hero-inner {
		display: flex;
		flex-direction: column;
		padding-left: 20px; /* live: inner-wrap gains 20px side gutters at ≤767 (measured; not --container-pad's 24px) */
		padding-right: 20px;
	}

	/* live @991 (still active at 767): div_block-4-2 releases to width:100%,
	   gains margin-bottom:50px @767; text_block-10-2 max-width releases
	   to 100% @767 too */
	.odx-insurance-guide__hero-col-wrap {
		width: 100%;
		margin-bottom: 50px;
	}

	.odx-insurance-guide__hero-text {
		max-width: 100%;
	}

	.odx-insurance-guide__body-inner {
		padding-left: 30px;
		padding-right: 30px;
		padding-bottom: 30px; /* live: section-537-2 inner-wrap padding-bottom 75px→30px at ≤991 */
		padding-top: 0; /* live: div_block-546-2 margin-top:30px (our padding-top) releases to 0 at ≤991 */
	}

	.odx-insurance-guide__grid {
		grid-template-columns: 1fr;
	}
}