/* Homepage layouts (inc/homepage.php): split, centred with floating cards, full-bleed board.
   Shared tokens only, so Light, Dark and System appearance apply to every layout. */

.fota-homepage { --fota-home-gutter: clamp(1rem, 4vw, 3rem); }
.fota-home-hero__eyebrow { margin: 0 0 .5rem; font-size: .82rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.fota-home-hero__intro { max-width: 40rem; font-size: clamp(1.05rem, 1rem + .4vw, 1.25rem); line-height: 1.6; }
.fota-home-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.fota-home-actions--center { justify-content: center; }
.fota-home-section__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: .75rem 1.5rem; }
.fota-home-section__head p { margin: .25rem 0 0; }
.fota-home-find .fota-search { margin-block: 1rem; }
.fota-home-takepart ol { margin: .5rem 0 1rem; padding-left: 1.25rem; }
.fota-home-takepart__grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }

/* 1. Split: the existing hero treatment. */
.fota-home-hero--split .fota-home-hero__eyebrow { color: var(--fota-intro-text); opacity: .85; }

/* 2. Centred headline with floating cards. */
.fota-home-hero--centred { position: relative; padding: clamp(2.5rem, 6vw, 5rem) var(--fota-home-gutter) 0; background: var(--fota-intro-surface); color: var(--fota-intro-text); text-align: center; overflow: hidden; }
.fota-home-hero--centred .fota-home-hero__inner { max-width: 50rem; margin-inline: auto; }
.fota-home-hero--centred h1 { margin: 0 0 1rem; color: var(--fota-intro-text); font-size: clamp(2.1rem, 1.4rem + 3vw, 3.75rem); line-height: 1.08; letter-spacing: -.01em; }
.fota-home-hero--centred .fota-home-hero__intro { margin-inline: auto; }
.fota-home-floats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 1rem; max-width: 64rem; margin: 2rem auto 0; text-align: left; position: relative; z-index: 2; }
.fota-home-float { display: grid; gap: .3rem; align-content: start; padding: 1rem 1.1rem; background: var(--fota-surface); color: var(--fota-text); border: 1px solid var(--fota-border); border-radius: var(--fota-radius); box-shadow: var(--fota-shadow); text-decoration: none; min-width: 0; }
a.fota-home-float:hover { border-color: var(--fota-link); }
.fota-home-float img { width: 3.5rem; height: 3.5rem; object-fit: contain; }
.fota-home-float__label { margin: 0; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--fota-link); }
.fota-home-float__meta { font-size: .85rem; color: var(--fota-muted); }
.fota-home-float .fota-spots-board, .fota-home-float [data-fota-spots] { margin: 0; }
.fota-home-hero__wide { max-width: 72rem; margin: -1rem auto 0; }
.fota-home-hero__wide .fota-hero__image { border-radius: var(--fota-radius) var(--fota-radius) 0 0; }
@media (min-width: 64rem) {
	.fota-home-floats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.fota-home-float--spot { transform: translateY(.75rem); }
	.fota-home-float--award { transform: translateY(1.25rem); }
}

/* 3. Full-bleed artwork with the live board. */
.fota-home-hero--board { position: relative; isolation: isolate; color: var(--fota-on-accent); background: var(--fota-hero); }
.fota-home-hero__art { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.fota-home-hero__art picture, .fota-home-hero__art img { width: 100%; height: 100%; object-fit: cover; }
.fota-home-hero__art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(4, 36, 70, .94) 0%, rgba(4, 36, 70, .82) 55%, rgba(4, 36, 70, .6) 100%); }
.fota-home-hero--board .fota-home-hero__inner { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: center; max-width: 100rem; margin-inline: auto; padding: clamp(2.5rem, 6vw, 5rem) var(--fota-home-gutter); }
.fota-home-hero--board h1 { margin: 0 0 1rem; color: var(--fota-on-accent); font-size: clamp(2rem, 1.4rem + 2.4vw, 3.4rem); line-height: 1.1; }
.fota-home-hero--board .fota-btn--ghost { color: var(--fota-on-accent); border-color: currentColor; }
.fota-home-board { padding: 1rem 1.25rem 1.25rem; background: var(--fota-surface); color: var(--fota-text); border-radius: var(--fota-radius); box-shadow: var(--fota-shadow); min-width: 0; }
.fota-home-board__head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.fota-home-board__head h2 { margin: 0; font-size: 1.2rem; display: flex; gap: .4rem; align-items: center; }
.fota-home-board__hint { margin: .25rem 0 .75rem; font-size: .85rem; color: var(--fota-muted); }
@media (max-width: 56rem) { .fota-home-hero--board .fota-home-hero__inner { grid-template-columns: 1fr; } }

/* Restrained entrance on the first visit of a session only (fota-home.js). Content is
   readable from the first frame; nothing moves for reduced motion or on return visits. */
.fota-home-enter [data-home-enter] { animation: fota-home-in 480ms cubic-bezier(.2, .7, .2, 1) both; animation-delay: var(--d, 0ms); }
@keyframes fota-home-in { from { opacity: .35; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .fota-home-enter [data-home-enter] { animation: none; } }

/* Fixes after visual review: section headings align with their content and actions; the
   centred artwork is an ordinary image below the cards (the split hero's absolute artwork
   rule applies to the split layout only); ghost buttons stay legible on the navy board. */
.fota-home-section__head { max-width: none; margin: 0 0 1.25rem; text-align: left; }
.fota-home-picture, .fota-home-picture__img { display: block; width: 100%; height: auto; }
.fota-home-picture__img { border-radius: var(--fota-radius) var(--fota-radius) 0 0; }
.fota-home-hero--board .fota-home-actions .fota-btn--ghost { background: transparent; color: #ffffff; border: 1px solid rgba(255, 255, 255, .8); }
.fota-home-hero--board .fota-home-actions .fota-btn--ghost:hover { background: rgba(255, 255, 255, .12); }
/* Live spots inside the board panel and the floating card stay within their container. */
.fota-home-board, .fota-home-float { position: relative; overflow: hidden; }
.fota-home-board .fota-spots-mount, .fota-home-float .fota-spots-mount { min-width: 0; max-width: 100%; overflow-x: auto; }