/**
 * HBLAB Event Calendar — detail sub-page styles.
 *
 * Reuses P1 tokens + shared components from base.css (loaded first, as a
 * dependency — see enqueue_assets() in class-hblab-ec-plugin.php). Only
 * detail-page-specific layout lives here: hero, overview table, agenda table,
 * speaker cards, form, related grid, responsive breakpoints.
 */

/* ------------------------------------------------------------------ *
 * Detail container — matches the hero width (`--hbec-maxw`) so the body
 * content below the hero (overview, recap, agenda, related events) lines
 * up edge-to-edge with the banner above it. The long-form reading column
 * inside stays capped separately (`.hbec-overview__body`, 720px) so text
 * line-length remains comfortable even though the container is wide.
 * ------------------------------------------------------------------ */
.hbec-detail {
	max-width: var(--hbec-maxw);
	margin-left: auto;
	margin-right: auto;
	padding-top: 32px;
}

/* ------------------------------------------------------------------ *
 * Breadcrumb
 * ------------------------------------------------------------------ */
.hbec-detail__crumb {
	padding: 20px 20px 0;
}

.hbec-detail__crumb a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--hbec-muted);
	transition: color var(--hbec-dur-fast) ease;
}

.hbec-detail__crumb a::before {
	content: "←";
}

.hbec-detail__crumb a:hover,
.hbec-detail__crumb a:focus-visible {
	color: var(--hbec-yellow-text);
}

/* ------------------------------------------------------------------ *
 * Hero banner — accent band (gen-hero-detail.webp) behind the event
 * banner photo, gradient scrim for AA title contrast, floating
 * key-facts bento card overlapping the bottom seam.
 * ------------------------------------------------------------------ */
.hbec-detail__hero {
	position: relative;
	max-width: var(--hbec-maxw);
	margin: 0 auto 0;
	padding: 16px 20px 0;
}

.hbec-detail__banner {
	position: relative;
	overflow: hidden;
	border-radius: var(--hbec-radius-lg);
	background: var(--hbec-grad-navy);
	box-shadow: var(--hbec-shadow-lg);
	transition: box-shadow var(--hbec-dur) var(--hbec-ease);
}

.hbec-detail__banner:hover {
	box-shadow: 0 20px 45px rgba(20, 27, 46, 0.18);
}

.hbec-detail__accent {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.7;
	z-index: var(--hbec-z-bg);
}

.hbec-detail__photo {
	position: relative;
	width: 100%;
	aspect-ratio: 1200 / 630;
	max-height: 60vh;
	object-fit: cover;
	z-index: var(--hbec-z-content);
	filter: grayscale(1);
	opacity: 0.85;
}

.hbec-detail__scrim {
	position: absolute;
	inset: 0;
	z-index: var(--hbec-z-content);
	background: linear-gradient(180deg, rgba(13, 18, 32, 0.15) 0%, rgba(13, 18, 32, 0.55) 60%, rgba(13, 18, 32, 0.9) 100%);
}

.hbec-detail__heading {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: var(--hbec-z-sticky);
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding-bottom: 32px;
}

/* `.hblab-ec` prefix raises specificity above the base reset `.hblab-ec h1`
 * (0,1,1) so the white-over-banner title actually wins (AA contrast). */
.hblab-ec .hbec-detail__title {
	max-width: var(--hbec-maxw);
	font-size: clamp(1.75rem, 4.5vw, 3rem);
	font-weight: var(--hbec-fw-display);
	color: #fff;
	line-height: 1.25;
	text-shadow: 0 2px 16px rgba(13, 18, 32, 0.55);
}

/* Lede — event excerpt shown under the hero title (`.hblab-ec` prefix for the
 * same specificity reason as `.hbec-detail__title` above: it must win over
 * the base `.hblab-ec p` reset so the light color reads on the dark scrim). */
.hblab-ec .hbec-detail__lede {
	max-width: 640px;
	font-size: 1.0625rem;
	font-weight: 500;
	line-height: 1.6;
	color: var(--hbec-navy-text);
	text-shadow: 0 1px 8px rgba(13, 18, 32, 0.5);
}

/* Badge sits over the dark scrim here, so give it a brand-yellow fill for
 * AA contrast (the default soft-cream fill reads too light on navy). */
.hbec-detail__heading .hbec-badge {
	background: var(--hbec-yellow);
	color: var(--hbec-yellow-text);
}

.hbec-detail__heading .hbec-badge--ended {
	background: var(--hbec-navy-text);
	color: var(--hbec-navy);
}

/* Key-facts bento card — overlaps the banner bottom seam on desktop. */
.hbec-detail__facts {
	position: relative;
	z-index: var(--hbec-z-sticky);
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	margin-top: -40px;
	background: var(--hbec-border);
	border-radius: var(--hbec-radius-lg);
	box-shadow: var(--hbec-shadow-lg);
	overflow: hidden;
}

.hbec-detail__fact {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 20px 24px;
	background: var(--hbec-bg);
}

.hbec-detail__fact-label {
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--hbec-muted);
}

.hbec-detail__fact-value {
	font-size: 1rem;
	font-weight: 700;
	color: var(--hbec-heading);
}

/* Status badge — shared visual language with the list page card badge. */
.hbec-badge {
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
	padding: 4px 14px;
	border-radius: 999px;
	background: var(--hbec-bg-soft);
	color: var(--hbec-yellow-text);
	font-size: 0.8125rem;
	font-weight: 700;
}

.hbec-badge--ended {
	background: var(--hbec-border);
	color: var(--hbec-muted);
}

.hbec-badge--ongoing {
	background: var(--hbec-green);
	color: #fff;
}

/* ------------------------------------------------------------------ *
 * Recap
 * ------------------------------------------------------------------ */
.hbec-recap {
	padding-top: 0;
}

/* ------------------------------------------------------------------ *
 * Post-event recap (item #11) — HBLAB's write-up shown once the event has
 * ended, in its own highlighted container above the (normally-rendered)
 * event info below it.
 * ------------------------------------------------------------------ */
.hbec-eventrecap {
	padding: 28px 32px;
	background: var(--hbec-bg-soft);
	border: 1px solid var(--hbec-border);
	border-left: 4px solid var(--hbec-yellow);
	border-radius: var(--hbec-radius-lg);
}

/* The container already carries the yellow accent on its left edge, so drop
 * the heading's own yellow bar to avoid a doubled accent. */
.hbec-eventrecap .hbec-heading {
	padding-left: 0;
}

.hbec-eventrecap .hbec-heading::before {
	display: none;
}

.hbec-eventrecap__stat {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin: 0 0 20px;
}

.hbec-eventrecap__stat-num {
	font-size: 2.5rem;
	font-weight: 800;
	line-height: 1;
	color: var(--hbec-yellow);
}

.hbec-eventrecap__stat-label {
	font-size: 1rem;
	font-weight: 700;
	color: var(--hbec-heading);
}

.hbec-eventrecap__body {
	max-width: 760px;
	line-height: 1.9;
	color: var(--hbec-heading);
}

/* ------------------------------------------------------------------ *
 * Overview — bento info grid (date / venue / audience) + long-form body
 * ------------------------------------------------------------------ */
.hbec-overview__bento {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin-bottom: 24px;
}

.hbec-overview__tile {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 20px 24px;
	background: var(--hbec-bg-soft);
	border: 1px solid var(--hbec-border);
	border-radius: var(--hbec-radius-lg);
}

.hbec-overview__tile-label {
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--hbec-muted);
}

.hbec-overview__tile-value {
	font-size: 1rem;
	font-weight: 700;
	color: var(--hbec-heading);
	line-height: 1.5;
}

.hbec-overview__body {
	margin-bottom: 0;
}

/* Intro (イベント紹介), when paired with the overview's sidebar — see
 * $overview_intro in overview-table.php. Replaces the ~96px gap two stacked
 * .hbec-section blocks would otherwise have (48px padding-bottom + 48px
 * padding-top) now that both live inside one section's main column. */
.hbec-overview__intro {
	margin-bottom: 48px;
}

/* ------------------------------------------------------------------ *
 * Overview layout — sticky sidebar (facts + table of contents) next to
 * the long-form article, so a reader scrolling through a long recap
 * always has the event facts and a jump-to-section list in view.
 * Collapses to a single column (sidebar above article) below 900px.
 * ------------------------------------------------------------------ */
.hbec-overview__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 280px;
	gap: 48px;
	align-items: start;
}

/* The article renders after the aside in the DOM (so screen readers /
 * keyboard users reach the TOC first, and it stacks on top on mobile), but
 * on desktop the article must occupy the wide first column and the sidebar
 * the narrow second column — hence the explicit grid placement. */
.hbec-overview__main {
	grid-column: 1;
	grid-row: 1;
	min-width: 0;
}

.hbec-overview__aside {
	grid-column: 2;
	grid-row: 1;
	position: sticky;
	top: 98px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.hbec-overview__aside-card {
	padding: 20px;
	background: var(--hbec-bg-soft);
	border: 1px solid var(--hbec-border);
	border-radius: var(--hbec-radius-lg);
}

.hbec-overview__aside-title {
	margin: 0 0 12px;
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--hbec-muted);
}

.hbec-overview__fact {
	padding: 10px 0;
	border-top: 1px solid var(--hbec-border);
}

.hbec-overview__fact:first-of-type {
	border-top: none;
	padding-top: 0;
}

.hbec-overview__fact-label {
	display: block;
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--hbec-muted);
	margin-bottom: 4px;
}

.hbec-overview__fact-value {
	display: block;
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--hbec-heading);
	line-height: 1.5;
}

/* Event metadata card — white fill (vs the soft-cream TOC card) so the
 * status badge and topic chips inside, which use the soft-cream fill, stay
 * visible instead of blending into the card. */
.hbec-eventmeta {
	background: var(--hbec-bg);
}

.hbec-eventmeta .hbec-badge {
	margin-top: 2px;
}

/* Long values (excerpt, venue) wrap normally rather than truncate. */
.hbec-eventmeta .hbec-overview__fact-value {
	font-weight: 500;
	word-break: break-word;
}

.hbec-eventmeta__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.hbec-toc__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.hbec-toc__list a {
	display: flex;
	gap: 8px;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--hbec-text);
	text-decoration: none;
	transition: color var(--hbec-dur-fast) ease;
}

.hbec-toc__list a:hover,
.hbec-toc__list a:focus-visible {
	color: var(--hbec-yellow-text);
}

.hbec-toc__num {
	flex: none;
	color: var(--hbec-muted);
	font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------ *
 * Overview body — news-article style reading treatment for the Gutenberg
 * content (headings + photos). Narrower reading column, kept separate from
 * the wider bento/hero width so long-form text doesn't stretch edge to edge.
 * Applies on every event status, not just recap.
 * ------------------------------------------------------------------ */
.hbec-overview__body {
	max-width: 720px;
	font-size: 1.0625rem;
	line-height: 1.9;
}

/* Anchor jumps from the TOC land below the sticky header instead of
 * directly under it. */
.hbec-overview__body h2,
.hbec-overview__body h3 {
	scroll-margin-top: 96px;
}

/* Lead-in paragraph: the article's opening line reads larger than the
 * rest of the body, same treatment editorial sites use to separate the
 * summary from the write-up. */
.hbec-overview__body > p:first-of-type {
	font-size: 1.1875rem;
	font-weight: 500;
	line-height: 1.85;
	color: var(--hbec-heading);
}

.hbec-overview__body > :first-child {
	margin-top: 0;
}

/* A trailing element (typically a closing photo) must not add its own bottom
 * margin on top of the section's padding, which otherwise leaves an oversized
 * gap before the next section's heading. */
.hbec-overview__body > :last-child {
	margin-bottom: 0;
}

/* Post-event, the イベント紹介 intro renders as a second prose section right
 * below the recap. Two stacked sections would double their 48px vertical
 * padding; drop the intro's top padding so the boundary reads as one
 * comfortable gap. Only applies when a section precedes it (i.e. post-event) —
 * pre-event the intro is first and keeps its full padding. */
.hbec-section + .hbec-intro {
	padding-top: 0;
}

.hbec-overview__body h1,
.hbec-overview__body h2,
.hbec-overview__body h3,
.hbec-overview__body h4 {
	margin-top: 2.4em;
	margin-bottom: 0.9em;
	line-height: 1.5;
	color: var(--hbec-heading);
}

/* Primary section headings (H1/H2) reuse the yellow left-bar the standalone
 * section titles use, plus a hairline underline, so a reader scanning a long
 * recap can pick out each section at a glance (matches the .hbec-heading look). */
.hbec-overview__body h1,
.hbec-overview__body h2 {
	position: relative;
	margin-top: 2.6em;
	padding-left: 14px;
	padding-bottom: 0.45em;
	border-bottom: 1px solid var(--hbec-border);
	font-size: 1.5rem;
}

.hbec-overview__body h1::before,
.hbec-overview__body h2::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.18em;
	width: 5px;
	height: 1em;
	background: var(--hbec-yellow);
	border-radius: 2px;
}

/* Sub-headings (H3/H4) stay lighter: bold, a touch larger than body, no bar. */
.hbec-overview__body h3,
.hbec-overview__body h4 {
	font-size: 1.1875rem;
}

.hbec-overview__body figure {
	margin: 1.6em 0;
}

.hbec-overview__body figure.wp-block-image {
	text-align: center;
}

/* Click-to-preview photos: fill the full reading-column width so they line up
 * edge-to-edge with the paragraphs above/below, with a light border + soft
 * radius so they read as clean inset photographs. Editors who mark an image
 * "wide" or "full width" in the block toolbar (.alignwide/.alignfull) get a
 * stronger shadow — a deliberate way to break the rhythm for a hero-ish photo
 * without every image looking identical. */
.hbec-overview__body img {
	width: 100%;
	max-width: 100%;
	margin: 0 auto;
	border: 1px solid var(--hbec-border);
	border-radius: var(--hbec-radius);
	box-shadow: var(--hbec-shadow);
	cursor: zoom-in;
	transition: box-shadow var(--hbec-dur-fast) var(--hbec-ease), transform var(--hbec-dur-fast) var(--hbec-ease);
}

.hbec-overview__body figure.alignwide img,
.hbec-overview__body figure.alignfull img {
	max-width: 100%;
	box-shadow: var(--hbec-shadow-lg);
}

.hbec-overview__body img:hover {
	box-shadow: var(--hbec-shadow-lg);
	transform: translateY(-2px);
}

.hbec-overview__body img:focus-visible {
	outline: 2px solid var(--hbec-yellow);
	outline-offset: 3px;
}

.hbec-overview__body figcaption {
	display: inline-block;
	margin-top: 10px;
	padding-left: 12px;
	border-left: 2px solid var(--hbec-yellow);
	font-size: 0.8125rem;
	color: var(--hbec-muted);
	text-align: left;
}

/* Pull quote (core/quote block) — same yellow accent as figcaptions, larger
 * and darker so it reads as a highlighted remark rather than body text. */
.hbec-overview__body blockquote {
	margin: 1.8em 0;
	padding: 4px 0 4px 20px;
	border-left: 3px solid var(--hbec-yellow);
	font-size: 1.0625rem;
	font-weight: 600;
	color: var(--hbec-heading);
}

.hbec-overview__body blockquote p:last-child {
	margin-bottom: 0;
}

/* Restore real list markers + indentation inside the article body. The global
 * `.hblab-ec ul/ol { list-style: none }` reset (base.css) strips them for
 * nav/component lists, but editorial prose needs visible bullets/numbers so
 * items don't run together as plain lines. */
.hbec-overview__body ul,
.hbec-overview__body ol {
	margin: 1.1em 0;
	padding-left: 1.5em;
}

.hbec-overview__body ul {
	list-style: disc;
}

.hbec-overview__body ol {
	list-style: decimal;
}

.hbec-overview__body li {
	margin-bottom: 0.5em;
	padding-left: 0.25em;
}

/* Branded bullet accent (numbers keep the default color for contrast). */
.hbec-overview__body ul li::marker {
	color: var(--hbec-yellow);
}

/* ------------------------------------------------------------------ *
 * Image lightbox — click-to-preview overlay for overview body photos
 * (assets/js/lightbox.js). Fade-only transition, no motion beyond
 * opacity, so no `prefers-reduced-motion` gate is needed.
 * ------------------------------------------------------------------ */
.hbec-lightbox {
	position: fixed;
	inset: 0;
	z-index: var(--hbec-z-overlay);
	display: none;
	align-items: center;
	justify-content: center;
	padding: 40px 20px;
	background: rgba(13, 18, 32, 0.88);
	opacity: 0;
	transition: opacity var(--hbec-dur) var(--hbec-ease);
}

.hbec-lightbox.is-open {
	display: flex;
	opacity: 1;
}

.hbec-lightbox__img {
	max-width: min(100%, 1100px);
	max-height: 88vh;
	width: auto;
	height: auto;
	border-radius: var(--hbec-radius);
	box-shadow: var(--hbec-shadow-lg);
}

.hbec-lightbox__close {
	position: absolute;
	top: 20px;
	right: 24px;
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color var(--hbec-dur-fast) ease;
}

.hbec-lightbox__close:hover,
.hbec-lightbox__close:focus-visible {
	background: rgba(255, 255, 255, 0.22);
	outline: 2px solid var(--hbec-yellow);
	outline-offset: 2px;
}

/* ------------------------------------------------------------------ *
 * Agenda timeline — vertical connective line that draws in on scroll,
 * markers per step, staggered row reveal. Reduced-motion / no-support
 * shows the full line statically.
 * ------------------------------------------------------------------ */
.hbec-agenda__timeline {
	position: relative;
	padding-left: 8px;
}

/* Connective line: full height by default (fail-safe / reduced motion). */
.hbec-agenda__line {
	position: absolute;
	top: 6px;
	bottom: 6px;
	left: 13px;
	width: 2px;
	background: var(--hbec-border);
	transform-origin: top center;
}

/* The drawn (amber) portion, animated via a scroll-driven scaleY. */
.hbec-agenda__line::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--hbec-yellow);
	transform-origin: top center;
}

.hbec-agenda__list {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.hbec-agenda__item {
	position: relative;
	display: grid;
	grid-template-columns: 96px 1fr;
	gap: 8px 20px;
	align-items: baseline;
	padding-left: 34px;
}

.hbec-agenda__marker {
	position: absolute;
	left: 6px;
	top: 6px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--hbec-bg);
	border: 3px solid var(--hbec-yellow);
	box-shadow: 0 0 0 3px var(--hbec-bg);
}

.hbec-agenda__time {
	white-space: nowrap;
	color: var(--hbec-yellow-text);
	font-weight: 700;
	font-size: 0.9375rem;
}

.hbec-agenda__title-text {
	margin: 0 0 4px;
	font-weight: 700;
	color: var(--hbec-heading);
	line-height: 1.6;
}

.hbec-agenda__speaker-text {
	margin: 0;
	font-size: 0.875rem;
	color: var(--hbec-muted);
}

.hbec-agenda__speaker-text:empty {
	display: none;
}

/* Draw-on-scroll: collapse the amber overlay to 0 and grow it as the
 * timeline scrolls through the viewport. Only where supported + motion allowed. */
.hbec-agenda__line::after {
	transform: scaleY(1);
}

@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		.hbec-agenda__line::after {
			transform: scaleY(0);
			animation: hbec-agenda-draw linear both;
			animation-timeline: view(block);
			animation-range: entry 10% cover 60%;
		}
	}
}

@keyframes hbec-agenda-draw {
	to {
		transform: scaleY(1);
	}
}

/* ------------------------------------------------------------------ *
 * Speaker cards
 * ------------------------------------------------------------------ */
.hbec-speakers {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
}

.hbec-speakers__card {
	display: flex;
	gap: 20px;
	padding: 24px;
	background: var(--hbec-bg-soft);
	border: 1px solid var(--hbec-border);
	border-radius: var(--hbec-radius-lg);
	transition: box-shadow var(--hbec-dur) var(--hbec-ease);
}

.hbec-speakers__card:hover {
	box-shadow: var(--hbec-shadow-lg);
}

.hbec-speakers__photo {
	flex: 0 0 80px;
	width: 80px;
	height: 80px;
	border-radius: 50%;
	overflow: hidden;
}

.hbec-speakers__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hbec-speakers__name {
	font-weight: 700;
	color: var(--hbec-heading);
	margin-bottom: 4px;
}

.hbec-speakers__role {
	font-size: 0.875rem;
	color: var(--hbec-muted);
	margin-bottom: 8px;
}

.hbec-speakers__bio {
	font-size: 0.9375rem;
	margin-bottom: 0;
}

/* ------------------------------------------------------------------ *
 * Registration form — centred, highlighted card
 * ------------------------------------------------------------------ */
.hbec-registration {
	max-width: 920px;
	margin: 0 auto;
	padding: 44px 48px 48px;
	background: var(--hbec-bg);
	border: 1px solid var(--hbec-border);
	border-top: 4px solid var(--hbec-yellow);
	border-radius: var(--hbec-radius-lg);
	box-shadow: var(--hbec-shadow-lg);
}

/* Centre the section heading within the form card. */
.hbec-registration .hbec-heading {
	justify-content: center;
	padding-left: 0;
	text-align: center;
}

.hbec-registration .hbec-heading::before {
	position: static;
	transform: none;
	height: 1.2em;
}

.hbec-form {
	max-width: 900px;
	margin: 0 auto;
}

.hbec-form__form {
	display: grid;
	grid-template-columns: 1fr;
	column-gap: 24px;
}

@media (min-width: 640px) {
	.hbec-form__form {
		grid-template-columns: 1fr 1fr;
	}

	.hbec-form__field--full {
		grid-column: 1 / -1;
	}
}

.hbec-form__notice {
	padding: 12px 16px;
	margin-bottom: 28px;
	background: var(--hbec-bg-soft);
	border: 1px dashed var(--hbec-border);
	border-radius: var(--hbec-radius);
	font-size: 0.8125rem;
	color: var(--hbec-muted);
	text-align: center;
}

.hbec-form__field {
	margin-bottom: 20px;
}

.hbec-form__field > label {
	display: block;
	margin-bottom: 8px;
	font-weight: 700;
	color: var(--hbec-heading);
}

.hbec-form__required {
	display: inline-block;
	margin-left: 8px;
	padding: 2px 8px;
	border-radius: 4px;
	background: var(--hbec-yellow);
	color: var(--hbec-yellow-text);
	font-size: 0.6875rem;
	font-weight: 700;
	vertical-align: middle;
}

.hbec-form__field input[type="text"],
.hbec-form__field input[type="email"],
.hbec-form__field input[type="tel"] {
	width: 100%;
	padding: 12px 16px;
	border: 1px solid var(--hbec-border);
	border-radius: var(--hbec-radius);
	font-family: var(--hbec-font);
	font-size: 1rem;
	color: var(--hbec-text);
}

.hbec-form__field input[type="text"]:focus,
.hbec-form__field input[type="email"]:focus,
.hbec-form__field input[type="tel"]:focus {
	outline: 2px solid var(--hbec-yellow);
	outline-offset: 1px;
}

.hbec-form__field--checkbox label {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-weight: 400;
	color: var(--hbec-text);
}

.hbec-form__field--checkbox input[type="checkbox"] {
	margin-top: 4px;
}

.hbec-form__field--checkbox + .hbec-form__field--checkbox {
	margin-top: 10px;
}

.hbec-form__intro {
	margin-bottom: 28px;
	font-size: 0.875rem;
	color: var(--hbec-muted);
	text-align: center;
}

.hbec-form__required-mark {
	color: #B42318;
	font-weight: 700;
}

.hbec-form__field textarea {
	width: 100%;
	padding: 12px 16px;
	border: 1px solid var(--hbec-border);
	border-radius: var(--hbec-radius);
	font-family: var(--hbec-font);
	font-size: 1rem;
	color: var(--hbec-text);
	resize: vertical;
}

.hbec-form__field textarea:focus {
	outline: 2px solid var(--hbec-yellow);
	outline-offset: 1px;
}

.hbec-form__fieldset {
	padding: 0;
	border: none;
}

.hbec-form__fieldset legend {
	width: 100%;
	margin-bottom: 8px;
	padding: 0;
	font-weight: 700;
	color: var(--hbec-heading);
}

.hbec-form__radio-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px 20px;
}

.hbec-form__radio {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 8px;
	row-gap: 6px;
	align-items: start;
	font-weight: 400;
	color: var(--hbec-text);
}

.hbec-form__radio input[type="radio"] {
	margin-top: 4px;
}

.hbec-form__radio-other {
	grid-column: 1 / -1;
	width: 100%;
	padding: 6px 10px;
	border: 1px solid var(--hbec-border);
	border-radius: var(--hbec-radius);
	font-family: var(--hbec-font);
	font-size: 0.875rem;
	color: var(--hbec-text);
}

.hbec-form__consent-title {
	margin: 0 0 12px;
	font-weight: 700;
	color: var(--hbec-heading);
}

@media (max-width: 640px) {
	.hbec-form__radio-grid {
		grid-template-columns: 1fr;
	}
}

/* State hooks (style-only; no JS in this plugin) --------------------- *
 * Error slot: hidden until the field wrapper gets `.is-invalid`, then the
 * message shows in red and the input border turns red. Loading: the form
 * gets `aria-busy="true"` to dim + disable interaction (skeleton feel).
 * These are ready for the CF7 integrator to drive. */
.hbec-form__error {
	display: none;
	margin-top: 6px;
	font-size: 0.8125rem;
	font-weight: 700;
	color: #B42318;
}

.hbec-form__field.is-invalid .hbec-form__error {
	display: block;
}

.hbec-form__field.is-invalid input {
	border-color: #B42318;
}

.hbec-form__form[aria-busy="true"] {
	position: relative;
	opacity: 0.6;
	pointer-events: none;
}

/* ------------------------------------------------------------------ *
 * Related events grid
 * ------------------------------------------------------------------ */
/* Horizontal scroll-snap carousel: distinct from the list page bento grid. */
.hbec-related__grid {
	display: flex;
	gap: 20px;
	overflow-x: auto;
	padding-bottom: 8px;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
}

/* Firefox has no ::-webkit-scrollbar support, so it needs the standard properties. */
@supports not selector(::-webkit-scrollbar) {
	.hbec-related__grid {
		scrollbar-width: thin;
		scrollbar-color: var(--hbec-border) transparent;
	}
}

/* Chrome/Safari: an explicit size forces a classic (always-visible) scrollbar
   instead of the OS overlay one. Setting scrollbar-width here would make the
   browser ignore these rules entirely, so it must stay unset. */
.hbec-related__grid::-webkit-scrollbar {
	height: 6px;
}

.hbec-related__grid::-webkit-scrollbar-track {
	background: transparent;
}

.hbec-related__grid::-webkit-scrollbar-thumb {
	background-color: var(--hbec-border);
	border-radius: var(--hbec-radius-lg);
}

.hbec-related__card {
	display: block;
	flex: 0 0 clamp(240px, 28%, 300px);
	scroll-snap-align: start;
	border: 1px solid var(--hbec-border);
	border-radius: var(--hbec-radius-lg);
	overflow: hidden;
	background: var(--hbec-bg);
	transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.hbec-related__card:hover,
.hbec-related__card:focus-visible {
	box-shadow: var(--hbec-shadow-lg);
	transform: translateY(-2px);
}

.hbec-related__thumb img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.hbec-related__body {
	padding: 16px;
}

.hbec-related__title {
	margin: 8px 0 4px;
	font-weight: 700;
	color: var(--hbec-heading);
	font-size: 0.9375rem;
	line-height: 1.5;
}

.hbec-related__date {
	margin: 0;
	font-size: 0.8125rem;
	color: var(--hbec-muted);
}

/* ------------------------------------------------------------------ *
 * Responsive breakpoints — 1440 / 768 / 375
 * ------------------------------------------------------------------ */
@media (max-width: 900px) {
	.hbec-overview__layout {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	/* Reset the desktop grid placement so both stack in DOM order
	 * (aside, then article) instead of colliding on row 1. */
	.hbec-overview__main,
	.hbec-overview__aside {
		grid-column: 1;
		grid-row: auto;
	}

	.hbec-overview__aside {
		position: static;
	}
}

@media (max-width: 768px) {
	/* Heading (badge/title/excerpt) is too tall to overlay the fixed-ratio
	 * banner image at phone widths — it would get pushed above the box and
	 * clipped. Stack it below the image instead, on a solid navy panel. */
	.hbec-detail__heading {
		position: relative;
		background: var(--hbec-grad-navy);
		padding: 20px 20px 24px;
	}

	.hblab-ec .hbec-detail__title,
	.hblab-ec .hbec-detail__lede {
		text-shadow: none;
	}

	.hbec-detail__facts {
		grid-template-columns: 1fr;
		margin-top: -24px;
	}

	.hbec-overview__bento {
		grid-template-columns: 1fr;
	}

	.hbec-overview__body img {
		max-width: 100%;
	}

	.hbec-speakers {
		grid-template-columns: 1fr;
	}

	.hbec-registration {
		padding: 32px 22px 34px;
	}
}

@media (max-width: 375px) {
	/* Key-facts card MUST stack fully below the banner (no overlap) so it
	 * never collides with the title/scrim at narrow widths. */
	.hbec-detail__facts {
		margin-top: 16px;
		box-shadow: none;
		border: 1px solid var(--hbec-border);
	}

	.hbec-speakers__card {
		flex-direction: column;
		align-items: flex-start;
	}
}