/**
 * Pattern: Checklist service block  (P8)
 *   patterns/checklist-block.php (maroon-band) + checklist-block-cream.php (cream)
 *   ·  .kd-checklist*
 *
 * A 2-column service block used ×4 down the "Ways I Support" page (frame 2:1144),
 * alternating maroon-band (blocks 1 & 3) and cream (blocks 2 & 4):
 *   LEFT  = section heading + intro paragraph(s)
 *   RIGHT = a checklist — each row = a 24x24 cream check-badge + item text
 *
 * ONE partial, ONE namespace, TWO variants (colour-only modifiers on a shared
 * 2-col layout):
 *   .kd-checklist--band   content-width flat maroon #900000 rect, white text  (18:567 / 21:605)
 *   .kd-checklist--cream  transparent (page bg #fffefa), maroon heading + black text
 *
 * The check icon is Gracie's OWN svg asset (assets/images/gg-check-badge.svg —
 * a cream #FFF8D4 square with a maroon #900000 tick), referenced per row as a
 * decorative <img> (wp:image, empty alt). SAME asset both variants (no recolour).
 * This is a first-party asset → NO Font Awesome / no third-party icon licence
 * (resolves the old Q2 icon-licence question; the FA kit is NOT enqueued).
 *
 * WHITE text on the band is scoped LOCALLY to .kd-checklist--band so the global
 * <h2> stays maroon #900000 (F1). The cream heading is a bare <h2> → inherits the
 * maroon h2 default with NO colour override (P6/P7 band-pattern precedent, 2-class
 * scope where white is needed).
 *
 * TOKEN-DRY: every colour/size/font/gap flows through a --kd-* token. One-off
 * literals (band min-height 450, 56px comp side inset, 0.15px H2 tracking) are
 * pattern-specific + commented. Namespace .kd-checklist* — distinct from
 * .kd-highlightband / .kd-ctaband / .kd-dividerlist / .kd-mediasplit / .kd-values.
 *
 * !! RESPONSIVE — mobile MOCK vs BRIEF delta (flagged, built to the brief) !!
 *   The signed-off D1 mobile mock (2020:140) renders BOTH block types FULL-BLEED
 *   alternating bands: block 1/3 = full-bleed maroon, block 2/4 = full-bleed
 *   #fff8d4 cream wash — with a simplified single-glyph tick (not the badge).
 *   The build brief instead states: variant 2 sits on the page bg (#fffefa, no
 *   band) and the band "stays content-width w/ 20px gutters" on mobile. Built to
 *   the BRIEF (explicit task instruction + P6 gated precedent + no full-bleed
 *   breakout = no h-scroll risk) and kept the branded badge at every breakpoint.
 *   DESIGNER TO CONFIRM: mobile full-bleed alternating bands + cream #fff8d4 wash.
 */

/* == Shared 2-col layout (both variants) ======================================
   A default-align (constrained) child of the post-content -> caps at the 1216
   content column (112px page-bg margins at 1440), matching the comp band width.
   Square. Left col = heading+intro, right col = checklist. Right col starts at
   ~53% of the band (comp icon x759 / band 1216) -> 1fr 1fr + a 64px gap lands the
   split at ~52.8%, matching the comp. */
.kd-checklist {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--kd-space-xl); /* 64px column gap (comp: left col 496 / gap ~95 -> normalised to the 64px token; puts right col at ~53%) */
	align-items: start;
	padding-inline: 56px; /* comp SIDE inset: content x168 - band edge x112 (one-off; no 56px token — brief "side inset per comp") */
	border-radius: var(--kd-radius-0); /* SQUARE — decision-log shape rule (badge is square too) */
}
/* Neutralise WP flow block-gap margins on the grid items (grid gap owns rhythm;
   without this the 2nd grid child — the checklist — inherits a 24px top margin). */
.kd-checklist > * {
	margin-block: 0;
}

/* == Variant: maroon band (blocks 1 & 3) ======================================
   Content-width flat maroon panel, fixed comp height, generous block inset. */
.kd-checklist--band {
	background-color: var(--kd-color-secondary); /* maroon #900000 — flat (comp 18:567 / 21:605) */
	padding-block: var(--kd-space-xl); /* 64px top/bottom inset (brief "~64px block") */
	min-height: 450px; /* comp band height (one-off structural literal) */
}

/* == Variant: cream (blocks 2 & 4) ============================================
   No band — sits on the page background (#fffefa). Keeps the shared 56px side
   inset so its content aligns on the SAME left rail (x168) as the band blocks
   down the page (comp: cream heading 18:428 is also at x168). No block inset —
   inter-block spacing is the page section rhythm (100px owl margin). */
.kd-checklist--cream {
	background-color: transparent;
}

/* == Left column — heading + intro ============================================ */
.kd-checklist__intro-col {
	display: flex;
	flex-direction: column;
	gap: var(--kd-gap-normal); /* 12px heading -> intro (comp ~13px) */
}
.kd-checklist__intro-col > * {
	margin-block: 0; /* flex gap owns the rhythm */
}

/* Heading — bare <h2> inherits theme.json elements.h2 (Public Sans Medium 500,
   30px / 46px, +the <768 24px derivation). Only the 0.15px H2 tracking is added. */
.kd-checklist__heading {
	letter-spacing: 0.15px; /* comp H2 tracking (one-off; matches the section-H2 / P6 tracking) */
}
/* Band heading -> WHITE. Two-class scope (0,2,0) beats theme.json's maroon
   :where() h2 deterministically, independent of stylesheet print order (P6/P7
   precedent). Cream heading is left to inherit the maroon h2 default. */
.kd-checklist--band .kd-checklist__heading {
	color: var(--kd-color-white);
}

/* Intro paragraphs — Inter Regular 16/24; 16px between paragraphs (comp mb-16). */
.kd-checklist__intro > * {
	margin-block: 0;
}
.kd-checklist__intro > * + * {
	margin-block-start: var(--kd-space-sm); /* 16px between paragraphs (comp 10:60 mb-16) */
}
.kd-checklist__intro p {
	font-size: var(--kd-size-body); /* 16px */
	line-height: var(--kd-lh-body); /* 1.5 -> 24px */
}
.kd-checklist--band .kd-checklist__intro p {
	color: var(--kd-color-white);
}
.kd-checklist--cream .kd-checklist__intro p {
	color: var(--kd-color-body); /* black */
}

/* == Right column — the checklist ============================================
   A stack of icon+text rows. Row pitch ~42px (comp desktop) / 40px (comp mobile
   2020:156): each row is 24px tall (icon governs) + a 16px between-row gap =
   ~40-42px pitch. Between-row gap tokenised to --kd-space-sm (16px) rather than a
   raw 18px literal — the 2px desktop-pitch delta is imperceptible and mobile is
   exact. (Brief lists "item row pitch" as an allowed one-off; kept it a token.) */
.kd-checklist__list {
	display: flex;
	flex-direction: column;
	gap: var(--kd-space-sm); /* 16px between rows -> ~40-42px pitch with the 24px row */
	margin-block-start: 22px; /* comp drops the checklist ~22px below the heading top (item-1 box y890 vs heading y867 / cream 1335 vs 1314) so item-1 aligns to the heading's lower half — one-off; reset to 0 when stacked <768 */
}
.kd-checklist__list > * {
	margin-block: 0; /* WP flow margins off — the flex gap owns row rhythm */
}

/* One checklist row: badge + item text. align-items:flex-start keeps the badge
   top-aligned to the item's FIRST line, so a long item wraps cleanly in its
   column with the icon anchored at the top (never squished / never re-centred). */
.kd-checklist__item {
	display: flex;
	align-items: flex-start;
	gap: var(--kd-gap-normal); /* 12px icon -> text (comp icon x759 / text x796 = 13px; --kd-gap-normal is "icon -> label") */
}
.kd-checklist__item > * {
	margin-block: 0;
}

/* The badge (wp:image figure). Fixed 24x24, never shrinks beside wrapping text. */
.kd-checklist__badge,
.kd-checklist__item > .wp-block-image {
	flex: 0 0 24px;
	width: 24px;
	margin: 0;
	line-height: 0;
}
.kd-checklist__badge img {
	display: block;
	width: 24px;
	height: 24px;
}

/* Item text — Public Sans SemiBold 600, 17px (comp 18:391 / 18:434). */
.kd-checklist__item-text {
	font-family: var(--kd-font-heading); /* Public Sans */
	font-weight: var(--kd-fw-heading); /* 600 — SemiBold */
	font-size: var(--kd-size-footer-link); /* 17px (the "lead"/17 preset, same as P6 used) */
	line-height: var(--kd-lh-body); /* 1.5 -> ~25.5px; 24px row so the badge centres + clean 2-line wrap */
}
.kd-checklist--band .kd-checklist__item-text {
	color: var(--kd-color-white);
}
.kd-checklist--cream .kd-checklist__item-text {
	color: var(--kd-color-body); /* black */
}

/* == Mobile (<768) — stack to one column ======================================
   Heading+intro above, checklist below (D1). Grid -> 1 col, 16px stack gap
   (comp 2020:149/153 gaps are 16px). Band keeps content-width (brief) with a
   24px interior inset (P6 precedent) so the maroon has breathing room around the
   text; cream drops the 56px inset to sit flush at the 20px page gutter. H2 auto
   -> 24px via the global <768 rule (tokens.css). See the FULL-BLEED flag above. */
@media (max-width: 767.98px) {
	.kd-checklist {
		grid-template-columns: 1fr; /* stack */
		gap: var(--kd-space-sm); /* 16px stack gap (comp mobile) */
		padding-inline: 0; /* cream: flush to the 20px global page gutter */
	}
	.kd-checklist--band {
		padding-block: var(--kd-space-lg); /* 40px (comp ~48; P6 mobile band precedent) */
		padding-inline: var(--kd-space-md); /* 24px interior — maroon breathing room (P6 precedent) */
		min-height: 0; /* stacked content defines height */
	}
	.kd-checklist__list {
		margin-block-start: 0; /* no desktop cross-column drop when stacked — grid row-gap owns the 16px intro->checklist rhythm */
	}
}