/* ============================================================
 * flibbr / bootcamps-overview.css
 *
 * Surface CSS for /bootcamps/ (page-bootcamps.php).
 * Lifted from the locked canonical
 * `flibbr-design-mockup-final-bootcamp-overview.html` (locked
 * v4, 30 Apr 2026), reduced to surface-only scope.
 *
 * SCOPE
 * Only the page-specific selectors are in this stylesheet —
 * all page-* chassis selectors are inherited from
 * page-chassis.css, including the .page-label sticky-CTA
 * family promoted to chassis at v0.5.34 (open #56 closed).
 * The IntersectionObserver footer script that toggles
 * .is-released remains in functions.php since it names the
 * surface-specific anchor target (#cohorts).
 *
 * NAMING
 * All page-content selectors live under .page-prose to match
 * the canonical and the v0.5.32 / v0.5.33 surface-CSS pattern.
 * Op-learning #16: every body-prose-targeted rule is scoped
 * `.page-prose .bootcamps-*` so chassis cascade rules
 * (`.page-prose p { margin: 0 }` etc.) don't override.
 *
 * SURFACE-SPECIFIC CLASS FAMILIES
 *   - .bootcamps-platform-pillars + .bootcamps-pillar +
 *     .bootcamps-pillar-numeral + .bootcamps-pillar-body +
 *     .bootcamps-pillar-name + .bootcamps-pillar-prose
 *     (the §3 five-pillar manifesto block, decimal-leading-
 *     zero counters)
 *   - .bootcamps-cohort-row + .bootcamps-cohort-card +
 *     .bootcamps-cohort-card-pill (+ .is-recap variant) +
 *     .bootcamps-cohort-card-where + .bootcamps-cohort-card-
 *     headline + .bootcamps-cohort-card-summary +
 *     .bootcamps-cohort-card-meta + .bootcamps-cohort-card-cta
 *     + .bootcamps-cohort-card-cta-arrow
 *     (the §5 cohort row — 2 hero-weight doorway cards)
 *   - .bootcamps-audience + .bootcamps-audience-row +
 *     .bootcamps-audience-name + .bootcamps-audience-frame
 *     (the §2 four-row audience-cuts list)
 *   - .upcoming-notify + .upcoming-notify-kicker +
 *     .upcoming-notify-headline + .upcoming-notify-supporting +
 *     .upcoming-notify-form + .upcoming-notify-input +
 *     .upcoming-notify-submit + .upcoming-notify-fineprint
 *     (the §7 notify-me capture — pattern reused from the
 *     unbuilt final-bootcamp-upcoming canonical; currently
 *     scoped to this surface, will deduplicate when the
 *     upcoming-event surface ships)
 *   - .case-related + .case-related-header + .case-related-label
 *     + .case-related-headline + .recap-tail-paths +
 *     .recap-tail-path + .recap-tail-path-kicker +
 *     .recap-tail-path-headline + .recap-tail-path-supporting
 *     + .recap-tail-path-cta + .recap-tail-path-cta-arrow
 *     (the tail rail — 3 equal-weight forward-path cards;
 *     pattern reused from the unbuilt final-bootcamp-upcoming
 *     canonical; same future-deduplication note)
 *
 * @package Flibbr
 * @since   0.5.34
 * ============================================================ */


/* ============================================================
 * §3 PILLARS — five-pillar manifesto block.
 *
 * Each pillar is a small stack: numeral · pillar-name ·
 * pillar-prose. Numerals carry light weight (sans 600,
 * ink-quiet, decimal-leading-zero style — same convention as
 * TOC counters). Pillar-name in serif italic, pillar-prose
 * in standard prose voice.
 *
 * This is a manifesto, not a feature grid. Pillars stack;
 * the reader moves through them at the same pace as the
 * prose above and below.
 * ============================================================ */
.page-prose .bootcamps-platform-pillars {
	counter-reset: pillar-counter;
	display: flex; flex-direction: column;
	gap: var(--s-7);
}
.page-prose .bootcamps-pillar {
	counter-increment: pillar-counter;
	display: grid;
	grid-template-columns: 64px 1fr;
	gap: var(--s-5);
	align-items: start;
}
@media (max-width: 540px) {
	.page-prose .bootcamps-pillar {
		grid-template-columns: 1fr;
		gap: var(--s-3);
	}
}
.page-prose .bootcamps-pillar-numeral {
	font-family: var(--sans); font-weight: 600;
	font-size: 14px; line-height: 1.2;
	letter-spacing: 0.06em;
	color: var(--ink-quiet);
	padding-top: var(--s-2);
}
.page-prose .bootcamps-pillar-numeral::before {
	content: counter(pillar-counter, decimal-leading-zero);
}
.page-prose .bootcamps-pillar-body {
	display: flex; flex-direction: column;
	gap: var(--s-3);
}
.page-prose .bootcamps-pillar-name {
	margin: 0;
	font-family: var(--serif); font-style: italic;
	font-weight: 400;
	font-size: clamp(20px, 2vw, 24px); line-height: 1.25;
	letter-spacing: -0.005em;
	color: var(--ink);
}
.page-prose .bootcamps-pillar-prose {
	font-family: var(--serif); font-weight: 400;
	font-size: 17px; line-height: 1.65;
	color: var(--ink-soft);
	margin: 0;
	max-width: 56ch;
}


/* ============================================================
 * §5 COHORT ROW — pair of hero-weight doorway cards.
 *
 * "Coming up" + "Recent recap". Each card is the doorway
 * into a major canonical surface (the upcoming-event page
 * and the recap page respectively). Visually heavier than
 * the small 3-card tail rail at the bottom of the page —
 * these are primary forward-paths, not afterthoughts.
 *
 * Two-up grid at desktop+, stacked at tablet. Each card has:
 * state pill · city + month · headline · 2-line summary ·
 * meta strip · CTA row.
 * ============================================================ */
.page-prose .bootcamps-cohort-row {
	display: grid; grid-template-columns: 1fr 1fr;
	gap: var(--s-5);
	margin-top: var(--s-5);
}
@media (max-width: 880px) {
	.page-prose .bootcamps-cohort-row {
		grid-template-columns: 1fr;
		gap: var(--s-4);
	}
}
.page-prose .bootcamps-cohort-card {
	display: flex; flex-direction: column;
	gap: var(--s-4);
	padding: var(--s-7) var(--s-6);
	background: var(--paper-warm);
	border: 1px solid var(--rule-soft);
	text-decoration: none; color: inherit;
	transition: border-color var(--motion-duration-ui) var(--motion-ease-ui),
	            box-shadow var(--motion-duration-content) var(--motion-ease-content),
	            transform var(--motion-duration-ui) var(--motion-ease-ui);
}
.page-prose .bootcamps-cohort-card:hover {
	border-color: var(--ink);
	box-shadow: 0 8px 24px rgba(20,20,19,.04);
	transform: translateY(-1px);
}
.page-prose .bootcamps-cohort-card-pill {
	display: inline-flex; align-self: flex-start;
	align-items: center;
	font-family: var(--sans); font-weight: 600;
	font-size: 11px; line-height: 1;
	letter-spacing: 0.16em; text-transform: uppercase;
	color: var(--paper);
	background: var(--accent);
	padding: var(--s-2) var(--s-3);
}
.page-prose .bootcamps-cohort-card-pill.is-recap {
	/* recent-recap variant — paper background, ink text, ink border.
	   Not a second accent. Keeps palette discipline (working
	   principle #15) while differentiating the two card states. */
	color: var(--ink);
	background: transparent;
	border: 1px solid var(--ink);
	padding: calc(var(--s-2) - 1px) calc(var(--s-3) - 1px);
}
.page-prose .bootcamps-cohort-card-where {
	font-family: var(--sans); font-weight: 400;
	font-size: 12px; line-height: 1;
	letter-spacing: 0.06em; text-transform: uppercase;
	color: var(--ink-quiet);
}
.page-prose .bootcamps-cohort-card-headline {
	margin: 0;
	font-family: var(--serif); font-weight: 400;
	font-size: clamp(24px, 2.6vw, 32px); line-height: 1.18;
	letter-spacing: -0.012em;
	color: var(--ink);
	max-width: 18ch;
}
.page-prose .bootcamps-cohort-card-headline em { font-style: italic; }
.page-prose .bootcamps-cohort-card-summary {
	font-family: var(--serif); font-weight: 400;
	font-size: 16px; line-height: 1.6;
	color: var(--ink-soft);
	margin: 0;
	flex: 1;
}
.page-prose .bootcamps-cohort-card-meta {
	font-family: var(--sans); font-weight: 400;
	font-size: 12px; line-height: 1.5;
	letter-spacing: 0.04em; text-transform: uppercase;
	color: var(--ink-quiet);
	padding-top: var(--s-4);
	border-top: 1px solid var(--rule);
}
.page-prose .bootcamps-cohort-card-cta {
	font-family: var(--sans); font-weight: 600;
	font-size: 13px; line-height: 1;
	letter-spacing: 0.04em;
	color: var(--ink);
	display: inline-flex; align-items: center; gap: var(--s-2);
	transition: color var(--motion-duration-ui) var(--motion-ease-ui);
}
.page-prose .bootcamps-cohort-card:hover .bootcamps-cohort-card-cta {
	color: var(--accent);
}
.page-prose .bootcamps-cohort-card-cta-arrow {
	transition: transform var(--motion-duration-ui) var(--motion-ease-ui);
}
.page-prose .bootcamps-cohort-card:hover .bootcamps-cohort-card-cta-arrow {
	transform: translateX(3px);
}


/* ============================================================
 * §2 AUDIENCE — four audience cuts as a structured list.
 *
 * Each row: name (sans uppercase) · short framing line
 * (serif italic). Four rows, visually balanced. Reads like
 * a cohort-fact panel cousin without becoming one — the rows
 * are simpler (no two-column data grid).
 * ============================================================ */
.page-prose .bootcamps-audience {
	display: flex; flex-direction: column;
	border-top: 1px solid var(--rule-soft);
}
.page-prose .bootcamps-audience-row {
	display: grid;
	grid-template-columns: 240px 1fr;
	gap: var(--s-5);
	padding-block: var(--s-5);
	border-bottom: 1px solid var(--rule-soft);
}
@media (max-width: 720px) {
	.page-prose .bootcamps-audience-row {
		grid-template-columns: 1fr;
		gap: var(--s-2);
	}
}
.page-prose .bootcamps-audience-name {
	font-family: var(--sans); font-weight: 600;
	font-size: 13px; line-height: 1.3;
	letter-spacing: 0.08em; text-transform: uppercase;
	color: var(--ink);
	padding-top: 4px;
}
.page-prose .bootcamps-audience-frame {
	font-family: var(--serif); font-style: italic;
	font-weight: 400;
	font-size: 17px; line-height: 1.55;
	color: var(--ink-soft);
	margin: 0;
}


/* ============================================================
 * §4 FBAI MENTION — single inline paragraph, accent-coloured
 * forward link to the Flibbr Brand AI canonical.
 *
 * Not a callout. Not a card. Just a paragraph that earns its
 * place inside the format-explainer section, with an inline
 * forward link styled like every other prose link on the page.
 * Relies on .page-prose p + .page-prose p a defaults.
 * Documented for inventory only — no specific styling needed.
 * ============================================================ */


/* ============================================================
 * §7 UPCOMING-NOTIFY — tail capture form.
 *
 * Pattern reused from the unbuilt final-bootcamp-upcoming
 * canonical. Paper-warm panel. At wire phase (post v0.5.34)
 * the WordPress template hands form rendering to a Fluent
 * Forms instance — current build ships the static markup
 * with client-side validation only (open #59 — per-cohort vs
 * bootcamps-notification list-tag decision).
 *
 * Copy on this surface is platform-level, not cohort-specific.
 * ============================================================ */
.page-prose .upcoming-notify {
	padding: var(--s-7) var(--s-6) var(--s-6);
	background: var(--paper-warm);
	border: 1px solid var(--rule-soft);
}
.page-prose .upcoming-notify-kicker {
	font-family: var(--sans); font-weight: 600;
	font-size: 11px; line-height: 1.2;
	letter-spacing: 0.16em; text-transform: uppercase;
	color: var(--accent);
	margin-bottom: var(--s-3);
}
.page-prose .upcoming-notify-headline {
	font-family: var(--serif); font-weight: 400;
	font-size: clamp(22px, 2.2vw, 28px); line-height: 1.2;
	letter-spacing: -0.012em;
	color: var(--ink);
	max-width: 22ch;
	margin: 0 0 var(--s-3);
}
.page-prose .upcoming-notify-headline em { font-style: italic; }
.page-prose .upcoming-notify-supporting {
	font-family: var(--serif); font-weight: 400;
	font-size: 16px; line-height: 1.55;
	color: var(--ink-soft);
	max-width: 56ch;
	margin: 0 0 var(--s-5);
}
.page-prose .upcoming-notify-form {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: var(--s-3);
	max-width: 480px;
}
@media (max-width: 480px) {
	.page-prose .upcoming-notify-form {
		grid-template-columns: 1fr;
	}
}
.page-prose .upcoming-notify-input {
	font-family: var(--sans); font-size: 15px;
	color: var(--ink);
	background: #fff;
	border: 1px solid var(--rule);
	padding: var(--s-3) var(--s-4);
	line-height: 1.4;
}
.page-prose .upcoming-notify-input::placeholder {
	color: var(--ink-quiet);
}
.page-prose .upcoming-notify-input:focus {
	outline: 2px solid var(--accent);
	outline-offset: 1px;
	border-color: var(--accent);
}
.page-prose .upcoming-notify-submit {
	/* button-defaults reset before any visual styling —
	   operational learning #10. */
	display: block;
	border: 0;
	font: inherit;
	font-family: var(--sans); font-weight: 600;
	font-size: 13px; line-height: 1;
	letter-spacing: 0.06em; text-transform: uppercase;
	color: var(--paper);
	background: var(--ink);
	padding: var(--s-3) var(--s-5);
	cursor: pointer;
	transition: background var(--motion-duration-ui) var(--motion-ease-ui);
}
.page-prose .upcoming-notify-submit:hover {
	background: var(--accent);
}
.page-prose .upcoming-notify-fineprint {
	font-family: var(--sans); font-size: 12px; line-height: 1.5;
	color: var(--ink-quiet);
	margin: var(--s-4) 0 0;
	max-width: 56ch;
}


/* ============================================================
 * NOTIFY — Fluent Forms reconciliation (ship α #208, v0.5.43).
 *
 * The .upcoming-notify-form div now wraps a Fluent Forms
 * shortcode rendering of Form 6 (Cohort notification — single
 * email field + submit button). The static placeholder it
 * replaced was a 2-column grid (input | button); FF renders a
 * vertical column by default. We restore the horizontal layout
 * and harmonize FF's input + button styling with the theme's
 * .upcoming-notify-input / .upcoming-notify-submit register.
 *
 * All overrides scoped to .page-prose .upcoming-notify-form so
 * we don't disturb FF rendering elsewhere (e.g. /contact/,
 * /validation-room/, /bootcamps/ enquire form).
 * ============================================================ */

.page-prose .upcoming-notify-form .fluentform {
	display: contents; /* let the form's children inherit the parent grid */
}

.page-prose .upcoming-notify-form .fluentform form {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: var(--s-3);
	width: 100%;
}
@media (max-width: 480px) {
	.page-prose .upcoming-notify-form .fluentform form {
		grid-template-columns: 1fr;
	}
}

/* Hide FF's per-field row chrome — labels, descriptions —
   we don't need them for a single-email cohort form. The
   placeholder text on the input itself is sufficient.
   v0.5.44 (#235): widened to plain `label` because FF renders
   the input label as <label> (no .ff-el-input--label class). */
.page-prose .upcoming-notify-form .fluentform .ff-el-input--label,
.page-prose .upcoming-notify-form .fluentform label,
.page-prose .upcoming-notify-form .fluentform .ff-text-help {
	display: none;
}

/* FF's group container — strip its default margins. */
.page-prose .upcoming-notify-form .fluentform .ff-el-group {
	margin: 0;
}

/* Email input — match .upcoming-notify-input register. */
.page-prose .upcoming-notify-form .fluentform input[type="email"],
.page-prose .upcoming-notify-form .fluentform input[type="text"],
.page-prose .upcoming-notify-form .fluentform .ff-el-form-control {
	font-family: var(--sans); font-size: 15px;
	color: var(--ink);
	background: #fff;
	border: 1px solid var(--rule);
	border-radius: 0;
	padding: var(--s-3) var(--s-4);
	line-height: 1.4;
	width: 100%;
	box-shadow: none;
	height: auto;
}
.page-prose .upcoming-notify-form .fluentform input[type="email"]::placeholder,
.page-prose .upcoming-notify-form .fluentform input[type="text"]::placeholder,
.page-prose .upcoming-notify-form .fluentform .ff-el-form-control::placeholder {
	color: var(--ink-quiet);
}
.page-prose .upcoming-notify-form .fluentform input[type="email"]:focus,
.page-prose .upcoming-notify-form .fluentform input[type="text"]:focus,
.page-prose .upcoming-notify-form .fluentform .ff-el-form-control:focus {
	outline: 2px solid var(--accent);
	outline-offset: 1px;
	border-color: var(--accent);
	box-shadow: none;
}

/* Submit button — match .upcoming-notify-submit register. */
.page-prose .upcoming-notify-form .fluentform .ff-btn,
.page-prose .upcoming-notify-form .fluentform button[type="submit"],
.page-prose .upcoming-notify-form .fluentform input[type="submit"] {
	display: block;
	border: 0;
	border-radius: 0;
	font-family: var(--sans); font-weight: 600;
	font-size: 13px; line-height: 1;
	letter-spacing: 0.06em; text-transform: uppercase;
	color: var(--paper);
	background: var(--ink);
	padding: var(--s-3) var(--s-5);
	cursor: pointer;
	box-shadow: none;
	height: auto;
	transition: background var(--motion-duration-ui) var(--motion-ease-ui);
}
.page-prose .upcoming-notify-form .fluentform .ff-btn:hover,
.page-prose .upcoming-notify-form .fluentform button[type="submit"]:hover,
.page-prose .upcoming-notify-form .fluentform input[type="submit"]:hover {
	background: var(--accent);
}

/* Submit-row should stretch full width on mobile when the
   grid collapses to single column. */
.page-prose .upcoming-notify-form .fluentform .ff-el-submit {
	margin: 0;
}

/* Inline confirmation message Fluent Forms renders after
   submission — match the editorial register. */
.page-prose .upcoming-notify-form .ff-message-success {
	font-family: var(--sans); font-size: 14px; line-height: 1.5;
	color: var(--ink);
	background: transparent;
	border: 0;
	padding: var(--s-3) 0;
	margin: 0;
	grid-column: 1 / -1;
}

/* Validation error styling. */
.page-prose .upcoming-notify-form .fluentform .error,
.page-prose .upcoming-notify-form .fluentform .ff-el-is-error .text-danger {
	font-family: var(--sans); font-size: 12px; line-height: 1.5;
	color: var(--accent);
	margin-top: var(--s-2);
}


/* ============================================================
 * TAIL RAIL — .recap-tail-paths grid.
 *
 * Three equal-weight cards. Re-anchored on this surface as:
 *   1. All past events       → /bootcamps/past-events/
 *   2. About Flibbr          → /about/
 *   3. Flibbr Brand AI       → /brand-ai/
 *
 * The wrapper (.case-related, .case-related-header,
 * .case-related-label, .case-related-headline) lives in
 * base.css per op-learning #16 (lifted at v0.5.47 when
 * single-case_study.php became a second consumer).
 * ============================================================ */
.recap-tail-paths {
	display: grid; grid-template-columns: repeat(3, 1fr);
	gap: var(--s-5);
}
@media (max-width: 880px) {
	.recap-tail-paths { grid-template-columns: 1fr; gap: var(--s-4); }
}
.recap-tail-path {
	display: flex; flex-direction: column;
	gap: var(--s-4);
	padding: var(--s-5);
	background: var(--paper);
	border: 1px solid var(--rule-soft);
	border-radius: 4px;
	text-decoration: none; color: inherit;
	transition: border-color var(--motion-duration-ui) var(--motion-ease-ui),
	            box-shadow var(--motion-duration-content) var(--motion-ease-content),
	            transform var(--motion-duration-ui) var(--motion-ease-ui);
}
.recap-tail-path:hover {
	border-color: var(--ink);
	box-shadow: 0 8px 24px rgba(20,20,19,.04);
	transform: translateY(-1px);
}
.recap-tail-path-kicker {
	font-family: var(--sans); font-weight: 600;
	font-size: 11px; line-height: 1;
	letter-spacing: 0.18em; text-transform: uppercase;
	color: var(--accent);
}
.recap-tail-path-headline {
	margin: 0;
	font-family: var(--serif); font-weight: 400;
	font-size: clamp(20px, 1.8vw, 24px); line-height: 1.22;
	color: var(--ink);
	letter-spacing: -0.005em;
}
.recap-tail-path-headline em { font-style: italic; }
.recap-tail-path-supporting {
	font-family: var(--sans); font-weight: 400;
	font-size: 13px; line-height: 1.55;
	color: var(--ink-soft);
	flex: 1;
}
.recap-tail-path-cta {
	font-family: var(--sans); font-weight: 600;
	font-size: 12px; line-height: 1;
	letter-spacing: 0.06em;
	color: var(--ink);
	padding-top: var(--s-3);
	border-top: 1px solid var(--rule-soft);
	display: inline-flex; align-items: center; gap: var(--s-2);
	transition: color var(--motion-duration-ui) var(--motion-ease-ui);
}
.recap-tail-path:hover .recap-tail-path-cta { color: var(--accent); }
.recap-tail-path-cta-arrow {
	transition: transform var(--motion-duration-ui) var(--motion-ease-ui);
}
.recap-tail-path:hover .recap-tail-path-cta-arrow {
	transform: translateX(3px);
}

/* G.3c — mobile tap-target for FF submit (forms.css patch was wrong host; not enqueued on this page; see op-learning #355). */
@media (max-width: 880px) {
	.page-prose .upcoming-notify-form .fluentform .ff-btn,
	.page-prose .upcoming-notify-form .fluentform button[type="submit"],
	.page-prose .upcoming-notify-form .fluentform input[type="submit"] {
		min-height: 44px;
	}
}