/**
 * FCQ Élan — block style variations & layout helpers
 * --------------------------------------------------------------
 * Single source of truth for the rounded "section card" system,
 * the stacked overlap, and the small utilities the patterns reuse.
 * Tokens (colours, spacing) come from theme.json; this file only
 * owns shapes, overlap and a few presentational helpers.
 */

/* ---------- Section card ----------
 * Two-layer architecture:
 *   <Group alignfull padding:3vw>      ← visible side gutter
 *     <Group .is-style-section-card>   ← bg + radius + inner padding
 * The bottom padding adds +76px to clear the -64px overlap seam.
 */
/* Minimum breathing room at the very top so the first section's rounded
 * card doesn't touch the viewport edge (matches the 3vw side gutter). */
.wp-site-blocks { padding-top: 1.5vw; }

/* Only the homepage hero needs the top gutter (its rounded card sits at the
 * very top). Other pages lead with the standalone navbar, which carries its
 * own 2rem top padding — so drop the gutter there. */
body:not(.home) .wp-site-blocks { padding-top: 0; }

.is-style-section-card {
	padding: clamp(1.75rem, 4vw, 4.5rem) !important;
	padding-top: clamp(2.33rem, 5.33vw, 6rem) !important;
	padding-bottom: calc(clamp(2.33rem, 5.33vw, 6rem) + 76px) !important;
	border-radius: 32px;
	box-sizing: border-box;
}

@media (max-width: 600px) {
	.is-style-section-card {
		padding: 1.75rem 1.5rem !important;
		border-radius: 22px;
	}
}

/* Hero / first section: lighter top padding (the nav sits inside it). */
.is-style-section-card.fcq-hero {
	padding-top: 3rem !important;
}

/* Flush: zero the card padding (full-bleed image splits). */
.is-style-section-card.is-style-flush,
.is-style-flush {
	padding: 0 !important;
}

/* Clipped: rounded corners clip a flush child image. */
.is-style-clipped {
	overflow: hidden;
}

/* ---------- Section overlap ----------
 * Each section card pulls up over the previous one and shows its
 * rounded top corners (later cards paint on top — same z-index,
 * later in DOM wins).
 */
/* Descendant :has() so sections that wrap their card(s) in columns
 * (e.g. Mission Duo) also join the overlap rhythm — not just sections
 * whose direct child is the section-card. */
.wp-site-blocks .alignfull:has(.is-style-section-card) { position: relative; }
.wp-site-blocks .alignfull:has(.is-style-section-card) + .alignfull:has(.is-style-section-card) {
	margin-block-start: -64px !important;
}
/* A section that wraps its cards in COLUMNS (e.g. Mission Duo) must NOT
 * overlap the section above it — the gutter between the columns would
 * reveal that section's colour as a band. And the section that FOLLOWS it
 * must not overlap it either (same band, from below). It is fully detached. */
.wp-site-blocks .alignfull:has(.is-style-section-card) + .alignfull:has(> .wp-block-columns),
.wp-site-blocks .alignfull:has(> .wp-block-columns) + .alignfull:has(.is-style-section-card) {
	margin-block-start: clamp(2rem, 3.5vw, 3rem) !important;
}

/* Editor-controllable opt-out: add the "Sans chevauchement" group style
 * (Bloc → Styles) to any section to detach it from the overlap on both sides. */
.wp-site-blocks .alignfull:has(> .is-style-no-overlap),
.wp-site-blocks .alignfull:has(> .is-style-no-overlap) + .alignfull:has(.is-style-section-card) {
	margin-block-start: clamp(2rem, 3.5vw, 3rem) !important;
}
.wp-site-blocks > footer { position: relative; margin-block-start: -64px; }

/* Footer links: light on the navy card (default link colour is navy → invisible). */
.wp-site-blocks > footer a { color: var(--wp--preset--color--light-gray); text-decoration: none; }
.wp-site-blocks > footer a:hover { color: var(--wp--preset--color--secondary); }
.wp-site-blocks > footer .wp-block-list { list-style: none; margin: 0; padding: 0; }

/* Cards laid out side-by-side in columns must match height so their bottom
 * edges align. They are detached (no overlap below), so drop the +76px
 * seam-compensation padding for balanced interior spacing. */
.wp-block-columns .wp-block-column > .is-style-section-card {
	height: 100%;
	padding-bottom: clamp(2.33rem, 5.33vw, 6rem) !important;
}

/* ---------- Image fill ----------
 * A column whose only child is an image: the image stretches to the
 * column's full height (set by the tallest sibling) and crops cover.
 */
.is-style-image-fill,
.is-style-image-fill .wp-block-image,
.is-style-image-fill .wp-block-image figure {
	height: 100%;
	margin: 0 !important;
}
.is-style-image-fill .wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ---------- Inverted surfaces ----------
 * Headings & links default to light text on navy / coral cards.
 */
.is-style-section-card.has-primary-background-color :where(h1,h2,h3,h4,h5,h6),
.is-style-section-card.has-coral-background-color :where(h1,h2,h3,h4,h5,h6) {
	color: var(--wp--preset--color--light-gray);
}

/* ---------- Logo grid ----------
 * Even row of partner logos, normalised to a common height.
 */
.wp-block-group.is-style-logo-grid {
	display: flex !important;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: clamp(2rem, 5vw, 4rem);
}
.wp-block-group.is-style-logo-grid .wp-block-image {
	margin: 0 !important;
}
.wp-block-group.is-style-logo-grid .wp-block-image img {
	max-height: 84px;
	width: auto;
	object-fit: contain;
}

/* ---------- Eyebrow ----------
 * Small uppercase kicker above headings. Apply to a paragraph.
 */
.is-style-eyebrow {
	font-size: 0.85rem !important;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	margin: 0 0 0.75rem;
}

/* ---------- Accent rule ----------
 * 48×3 yellow bar. Apply to a Separator (or a thin Group).
 */
.is-style-accent-rule {
	width: 48px;
	height: 3px;
	max-width: 48px;
	border: 0;
	border-radius: 2px;
	background: var(--wp--preset--color--secondary);
	margin: 0 0 1.5rem;
	opacity: 1;
}
.is-style-accent-rule.aligncenter { margin-inline: auto; }

/* ---------- Sticky header ---------- */
.wp-site-blocks > header .is-position-sticky { z-index: 100; }
.admin-bar .wp-site-blocks > header .is-position-sticky { top: 32px; }
@media (max-width: 782px) {
	.admin-bar .wp-site-blocks > header .is-position-sticky { top: 46px; }
}

/* ---------- News / card hover ---------- */
.fcq-news-card { transition: transform .2s ease, box-shadow .2s ease; }
.fcq-news-card:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(0,31,91,.08); }

/* ---------- Staggered reveal on scroll / load ----------
 * Content inside each section card fades + rises into place as the
 * section enters the viewport (assets/js/reveal.js sets per-item
 * delays and toggles classes). `.has-reveal` is added to <html>
 * before first paint. Disabled entirely for visitors who prefer
 * reduced motion, and absent when JS doesn't run (all visible).
 *
 * THREE states, on purpose — this is what makes the on-LOAD reveal
 * fire, not just the on-scroll one:
 *   1. `.reveal-item`              hidden start state, NO transition.
 *      reveal.js adds this, then forces a reflow, so opacity:0 is
 *      committed instantly (no 1→20 out-fade to fight against).
 *   2. `.reveal-item.reveal-ready` arms the transition on a LATER
 *      frame, once the hidden state is the real starting value.
 *   3. `.reveal-item.is-in`        end state → animates 0→1 cleanly,
 *      identically whether revealed at load or on scroll.
 */
@media (prefers-reduced-motion: no-preference) {
	.has-reveal .reveal-item {
		opacity: 0;
		transform: translateY(36px);
	}
	.has-reveal .reveal-item.reveal-ready {
		transition: opacity .7s cubic-bezier(.22, .61, .36, 1),
		            transform .7s cubic-bezier(.22, .61, .36, 1);
	}
	.has-reveal .reveal-item.is-in {
		opacity: 1;
		transform: none;
	}
}

/* ---------- Branded form controls (wp:html forms) ----------
 * Every colour here resolves from the theme palette (--wp--preset--color--*),
 * so editing the palette in the Site Editor — or switching style variation —
 * recolours all forms automatically. The only literal is #fff field fills
 * (form inputs read as white by convention). Borders derive from the primary
 * colour via color-mix so they track the palette too.
 */
.fcq-form,
.fcq-donate { display: flex; flex-direction: column; gap: 1.1rem; }
.fcq-donate { background: #fff; border-radius: 24px; padding: 2rem; gap: 1.25rem; }
.fcq-form label,
.fcq-donate > label,
.fcq-donate legend { font-size: .9rem; font-weight: 600; color: var(--wp--preset--color--primary); }
.fcq-form label,
.fcq-donate > label { display: flex; flex-direction: column; gap: .4rem; }
.fcq-form input,
.fcq-form textarea,
.fcq-form select,
.fcq-donate input[type="number"] {
	font: inherit; font-size: 1rem; font-weight: 400;
	padding: .8rem 1.1rem; border-radius: 14px;
	border: 1.5px solid color-mix(in srgb, var(--wp--preset--color--primary) 30%, transparent);
	background: #fff; color: var(--wp--preset--color--ink);
}
.fcq-form textarea { resize: vertical; }
.fcq-form .fcq-row { display: flex; gap: 1.1rem; flex-wrap: wrap; }
.fcq-form .fcq-row > label { flex: 1 1 200px; }

/* Donate — preset amount chips. Selected state via :has() so no JS/inline. */
.fcq-fieldset { border: 0; margin: 0; padding: 0; }
.fcq-amounts { display: flex; gap: .6rem; flex-wrap: wrap; }
.fcq-amount-opt {
	flex: 1 1 80px; text-align: center; font-weight: 700; cursor: pointer;
	color: var(--wp--preset--color--primary);
	border: 1.5px solid color-mix(in srgb, var(--wp--preset--color--primary) 30%, transparent);
	border-radius: 14px; padding: .85rem .5rem;
}
.fcq-amount-opt input { position: absolute; opacity: 0; }
.fcq-amount-opt:has(input:checked) {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--light-gray);
	border-color: var(--wp--preset--color--primary);
}
.fcq-fineprint { margin: 0; font-size: .82rem; color: var(--wp--preset--color--primary); opacity: .7; text-align: center; }

/* Pill submit buttons — primary, flipping to secondary on hover (brand move). */
.fcq-pill,
.fcq-submit {
	display: inline-block; font: inherit; font-weight: 600; font-size: 1rem;
	padding: .9rem 1.75rem; border-radius: 999px; border: 0; cursor: pointer;
	background: var(--wp--preset--color--primary); color: var(--wp--preset--color--light-gray);
	transition: background .2s ease, color .2s ease;
}
.fcq-submit { font-size: 1.05rem; padding: .95rem 1.75rem; }
.fcq-pill:hover,
.fcq-submit:hover { background: var(--wp--preset--color--secondary); color: var(--wp--preset--color--primary); }

/* Newsletter — inline email + button on the coral card. */
.fcq-newsletter { display: flex; gap: .75rem; flex-wrap: wrap; justify-content: center; max-width: 520px; margin: 0 auto; }
.fcq-newsletter input {
	flex: 1 1 240px; min-width: 0; font: inherit; font-size: 1rem;
	padding: .85rem 1.25rem; border-radius: 999px; border: 0;
	background: #fff; color: var(--wp--preset--color--primary);
}
.fcq-newsletter button {
	font: inherit; font-weight: 600; font-size: 1rem; white-space: nowrap;
	padding: .85rem 1.75rem; border-radius: 999px; border: 0; cursor: pointer;
	background: var(--wp--preset--color--secondary); color: var(--wp--preset--color--ink);
}

/* ---------- Immersive photo hero / CTA (cover-based) ----------
 * A core/cover wrapped in a flush+clipped section card: the card owns the
 * 32px radius + overlap hook, the cover supplies the photo, navy scrim and
 * inner content. The logo over the photo is forced white.
 */
.fcq-hero-photo,
.fcq-cta-photo { border-radius: 32px; }
.fcq-logo-invert img { filter: brightness(0) invert(1); }

/* ---------- Page hero height cap ----------
 * Page heroes (e.g. La Fondation) are capped at 600px tall and clip
 * the overflow so the cut-out athlete / photo bleeds off the bottom
 * edge. NOT applied to the homepage hero (which is content-sized).
 */
.fcq-hero-cap { max-height: 600px; overflow: hidden; }
.fcq-hero-photo { max-height: 600px; }

/* Hero images stay CONTAINED no matter how tall the user inserts — they
 * scale down to fit the capped hero instead of overflowing, pushing the
 * layout, or hiding the copy. `object-fit:contain` + auto width means a
 * tall portrait becomes narrower rather than taller; min-width:0 lets the
 * columns shrink; the card's overflow:hidden is the final safety net. */
.fcq-hero-cap .wp-block-column { min-width: 0; }
.fcq-hero-cap figure.wp-block-image { margin: 0; }
.fcq-hero-cap .wp-block-column img,
.fcq-hero-cap figure.wp-block-image img {
	max-height: 470px;
	width: auto;
	max-width: 100%;
	height: auto;
	object-fit: contain;
}

/* Mobile: once the hero columns stack (WP breakpoint ≤781px), the 600px cap
 * would clip the now-below image, and the text column's overlap-compensating
 * bottom padding leaves a big empty band before it. Lift the cap and drop that
 * padding so the image sits right under the copy and shows in full. */
@media (max-width: 781px) {
	.fcq-hero-cap { max-height: none; }
	.fcq-hero-cap .wp-block-columns .wp-block-column { padding-bottom: 0 !important; }
	.fcq-hero-cap .wp-block-column img,
	.fcq-hero-cap figure.wp-block-image img { max-height: 360px; }
}