/**
 * Pattern: Info Band — date + venue  (patterns/info-band.php)
 *
 * Full-bleed purple strip (Figma 10:327, 1440×74) directly under the home
 * hero: calendar icon + date/time on the left, pin icon + venue on the
 * right, vertically centred, one row down to 1024 (venue wraps within its
 * own column below the 1216px composition width — see the media query
 * below). No mobile comp exists, so ≤768 is derived per the project's
 * convention: two stacked rows, each icon+text left-aligned, band height
 * grows to fit.
 *
 * One pattern = one CSS partial (auto-enqueued by inc/enqueue.php). All
 * rules, incl. responsive media queries, stay in this file.
 */

/* ── Band shell ────────────────────────────────────────────────────────────
 * min-height (not a hard height) so the band still reads correctly if the
 * long venue string ever wraps to 2 lines at a narrower "same row" width
 * (1024) — at 1440 the content is well under 74px tall, so min-height
 * resolves to exactly 4.625rem (74px), matching 10:327 without risking
 * clipped text at 1024. */
.dfd-info-band {
	display: flex;
	align-items: center;
	min-height: 4.625rem; /* 74px — Figma band height, 10:327 */
}

/* Neutralise WP core's default block-gap margin on the row's own children
   (the two icon+text groups) — every gap here is expressed explicitly via
   flex column-gap/row-gap instead, so the block-gap margin only double-counts. */
.dfd-info-band__row > * {
	margin-top: 0;
}

.dfd-info-band__row {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	width: 100%;
}

/* ── Date group — fixed 623px flex-basis (not a max-width) ────────────────
 * 10:330 (pin icon) sits at x735, i.e. 623px from the 1216px column's own
 * left edge (735 − 112 column-inset = 623). Reserving that exact width for
 * the date group — regardless of how long the date string ever gets — means
 * the venue group always starts flush at +623px, the same fixed-column
 * technique steps-band uses for its heading/list split (build-tracker trap:
 * a `max-width` alone shrinks to the content's own width and misses the
 * target offset). */
.dfd-info-band__group--date {
	flex: 0 0 38.9375rem; /* 623px */
	padding-left: 0.625rem; /* 10px — 10:331 calendar icon x122, 112px column inset */
}

.dfd-info-band__group--venue {
	flex: 1 1 auto;
	min-width: 0;
}

.dfd-info-band__group {
	display: flex;
	align-items: center;
	color: var(
		--wp--preset--color--base
	); /* white — resolves the icons' currentColor fill */
}

/* Gaps differ per group because the two icons have different registered
   bounding-box widths (calendar 24px, pin 22px) against the same text
   x-offset — measured from the node coordinates, not assumed equal. */
.dfd-info-band__group--date {
	gap: 1.1875rem; /* 19px — 165 (date text x) − 122 (icon x) − 24 (icon width) */
}

.dfd-info-band__group--venue {
	gap: 0.875rem; /* 14px — 771 (venue text x) − 735 (icon x) − 22 (icon width) */
}

.dfd-info-band__icon {
	display: block;
	flex: 0 0 auto;
}

/* ── Text — Helvetica Neue Bold 20px white (figma-analysis §1.2 "body-md").
 * The whole line is uniformly bold, not a word emphasised within surrounding
 * text, so a dedicated class carries the weight rather than wrapping the
 * entire paragraph in `<strong>` (which would misuse its semantics — nothing
 * here is being called out against non-bold neighbour text). Size (20px)
 * comes from the block's own `fontSize:"large"` attribute in the .php, not
 * redeclared here. */
.dfd-info-band__text {
	margin: 0;
	font-family: var(--kd-font-body);
	font-weight: 700;
	line-height: normal;
	/* Single line at desktop — required for the 1440 pixel-match (10:328/329
	   are both one line). The venue group is flex:1 1 auto, so without
	   flex-shrink:0 the flex algorithm would size the text box to whatever's
	   "left over" in the row (measured 546px) rather than its own 556.5px
	   natural width, and — because nowrap can't wrap to compensate — the
	   glyphs paint 10px past the box's own reported edge (caught via
	   `scrollWidth` (557) vs `offsetWidth` (546) on the element itself, a
	   real visual overflow that page-level `document.body.scrollWidth`
	   didn't surface). flex-shrink:0 keeps the box true to its content. */
	white-space: nowrap;
	flex-shrink: 0;
}

/* ── Section-gap override — flush under the hero ───────────────────────────
 * The sitewide owl (.entry-content > * + *, global.css) gives every pair of
 * stacked sections --kd-section-gap of margin-top. This band must sit flush
 * (0 gap) under the home hero per 10:327's own y-position (y845, i.e. 1px
 * below the hero's own bottom at y845/846 — no gap in the comp at all).
 * Selector shape mirrors split-what-is's own gap override (specificity
 * beats the owl without !important — .entry-content.kd-section.dfd-info-band
 * is 3 classes vs the owl's 1). */
.entry-content > .kd-section.dfd-info-band {
	--dfd-info-band-gap-top: 0px;
	margin-block-start: var(--dfd-info-band-gap-top);
}

/* ── Sub-composition (<1216px, i.e. any row narrower than the full
 * 1216px content column) — the desktop rule's exact-px 623px date column +
 * nowrap + flex-shrink:0 is a 1440-literal fit: the venue group needs
 * ~592.5px single-line (22px icon + 14px gap + 556.5px text), so it only
 * clears without wrapping once the row itself is >= 623 + 592.5 = 1215.5px.
 * Below that — which includes the WHOLE 1024–1215px window, not just the
 * 1024 test width (review-gate round 1 finding: that gap let the venue
 * overflow its box between 1025–1215px, since the old breakpoint was
 * max-width:1024px and the desktop nowrap rules apply above it) — switch
 * the split to a 50/50 percentage and allow wrapping. white-space:normal
 * only wraps when content doesn't fit, so this doesn't force 2 lines near
 * the top of the range (e.g. ~1200px, where 50% comfortably clears 592.5px)
 * — only the narrower end (measured: 1024 wraps venue to 2 lines, 1440/1920
 * stay unaffected since they're above this query entirely). ── */
@media (max-width: 1215.98px) {
	.dfd-info-band__group--date {
		flex-basis: 50%;
	}

	.dfd-info-band__text {
		white-space: normal;
		flex-shrink: 1;
		min-width: 0; /* allow the box to shrink to the group's fair share now
		   that wrapping (not overflow) is how it handles the deficit. */
	}
}

/* ── Mobile/tablet stack (≤768px, no mobile comp — derived per the project's
   convention): two rows, each icon+text left-aligned, band height grows. ── */
@media (max-width: 768px) {
	.dfd-info-band {
		min-height: 0;
		padding-block: 1.5rem; /* band grows to fit the stacked rows */
	}

	.dfd-info-band__row {
		flex-direction: column;
		align-items: flex-start;
		row-gap: 0.75rem;
	}

	.dfd-info-band__group--date {
		flex: 0 0 auto;
		padding-left: 0; /* both groups start flush left when stacked */
	}
}