/* ==========================================================================
   GOAT Sports Events — Marassi Rowing registration page
   Colours sampled off the client's reference (Refference.jpeg, media #11).
   ⚠ WordPress's flow layout gives every block after the first a top margin
   (:root :where(.is-layout-flow) > * + *, specificity 0,1,0). Every grid/flex
   container below zeroes its children's margins with a body-prefixed selector
   (0,1,1) so that stray margin can never shift one cell out of line.
   ========================================================================== */

:root {
	--gs-navy: #071b33;
	--gs-deep: #0c3855;
	--gs-deep-2: #103955;
	--gs-strip: #082c4c;
	--gs-sky: #b4dfef;
	--gs-mist: #b4c9de;
	--gs-gold: #cfb779;
	--gs-paper: #f8faf9;
	--gs-ink: #0b2941;
	--gs-slate: #2f4250;
	--gs-muted: #687176; /* 4.76:1 on the card (was #6e777c, 4.36:1 — Codex 2026-09-24) */
	--gs-line: #d0d5d9;
	--gs-rule: rgba(180, 201, 222, 0.28);
	--gs-footnote: #7b8fa7;

	--gs-gutter: clamp(1.125rem, 5vw, 5.75rem);
	--gs-max: 1320px;
}
/* Desktop: one width for header, hero, card and footer — like sl-tournaments (owner,
   2026-09-24: the hero ran wider than the form). Phones/tablets never reach --gs-max. */
@media (min-width: 1024px) { :root { --gs-max: 1180px; } }
@media (min-width: 1600px) { :root { --gs-max: 1280px; } }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
	background: var(--gs-navy);
	color: #fff;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

body .wp-site-blocks > * { margin-block: 0; }
/* The page's two sections sit flush; WP's flow layout would put a gap between them. */
body .wp-block-post-content > * { margin-block: 0; }

/* One container width for header, page and footer so their edges line up. */
.gs-header,
.gs-hero,
.gs-register,
.gs-footer,
.gs-thanks {
	width: min(100% - 2 * var(--gs-gutter), var(--gs-max));
	margin-inline: auto;
	box-sizing: border-box;
}

.gs-sep { opacity: 0.55; font-weight: 400; margin-inline: 0.45em; }

/* Buttons ---------------------------------------------------------------- */
.gs-btn-sky .wp-block-button__link {
	background: var(--gs-sky);
	color: var(--gs-navy);
	border-radius: 2px;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.gs-btn-sky .wp-block-button__link:hover,
.gs-btn-sky .wp-block-button__link:focus-visible {
	background: #fff;
	color: var(--gs-navy);
}
.wp-block-button__link:focus-visible {
	outline: 3px solid var(--gs-gold);
	outline-offset: 3px;
}

/* ==========================================================================
   Header
   ========================================================================== */
.gs-header {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 1rem;
	padding-block: clamp(1rem, 2.2vw, 1.75rem);
	border-bottom: 1px solid var(--gs-rule);
}
body .gs-header > * { margin: 0; }

.gs-header__meta {
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--gs-mist);
	line-height: 1.2;
}
.gs-header__meta--end { text-align: end; }

.gs-header__logo a { display: block; line-height: 0; }
.gs-header__logo img {
	display: block;
	height: clamp(48px, 5vw, 68px);
	width: auto;
	aspect-ratio: 520 / 182;
}

body .wp-block-buttons.gs-header__cta { display: none; }

@media (max-width: 767px) {
	.gs-header {
		display: flex;
		justify-content: space-between;
	}
	.gs-header__meta { display: none; }
	body .wp-block-buttons.gs-header__cta { display: flex; }
	.gs-header__cta .wp-block-button__link { padding: 0.8rem 1.1rem; font-size: 0.8125rem; }
}

/* The Register button is pointless once someone has registered. */
body:has(.gs-thanks) .wp-block-buttons.gs-header__cta { display: none; }

/* ==========================================================================
   The event page — two sections: .gs-hero (intro, photo, facts) and
   .gs-register (the card). Phones and tablets: one column, in that order.
   ========================================================================== */
.gs-hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas: "intro" "media" "facts";
	padding-block-start: clamp(1.75rem, 4vw, 3.25rem);
}
body .gs-hero > * { margin: 0; }
.gs-intro { grid-area: intro; }
.gs-media { grid-area: media; margin-top: 2rem !important; }
.gs-facts { grid-area: facts; }

.gs-register { padding-block: 2.5rem clamp(2.5rem, 5vw, 4.5rem); }
body .gs-register > * { margin: 0; }

@media (min-width: 1024px) {
	/* Desktop hero: intro left, photo right, both inside the page width (boxed, like the
	   header — owner, 2026-09-24); facts in a row underneath. */
	.gs-hero {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		grid-template-areas:
			"intro media"
			"facts facts";
		align-items: center;
		column-gap: clamp(2rem, 3.5vw, 3.5rem);
		padding-block: clamp(2.5rem, 4vw, 4rem) 0;
	}
	.gs-media { margin-top: 0 !important; }

	/* Its own band, edge to edge, so it reads as a second section; the card is centred in it. */
	.gs-register {
		width: 100%;
		margin-top: clamp(3.5rem, 5vw, 5rem) !important;
		padding: clamp(4rem, 6vw, 6rem) var(--gs-gutter);
		background: var(--gs-deep);
	}
}

/* Intro ------------------------------------------------------------------ */
body .gs-intro > * { margin: 0; }

/* Hero entrance (owner, 2026-09-24): a fade in, poster and title, phones too. Only opacity
   changes. Three states on <html>:
   - .gs-motion (head script): the pieces start hidden.
   - .gs-go (site.js only): page loaded + poster decoded + fonts ready + browser idle → fade in.
     Fill mode is `backwards` only: the start state holds through each delay, and when a
     fade ends the piece simply falls back to its own style (no finished effect lingers).
   - .gs-shown (head timer at 4 s, only if .gs-go never came, e.g. a very slow load or no
     site.js): everything appears at once, no animation — it can never cut a fade short.
   - .gs-io (site.js, only once its IntersectionObserver is running): the intro waits for
     .is-in — on phones it starts below the first screen and fades in when scrolled to.
   No JS at all: no classes, everything simply shows. Checked by Codex + GLM (2026-09-24). */
/* Fade only, no movement (owner, 2026-09-24: "fade only, no motion" — a moving rise kept
   showing him a jump at the end that no test here could reproduce). */
@keyframes gs-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}
@keyframes gs-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}
html.gs-motion:not(.gs-go):not(.gs-shown) .gs-intro > *,
html.gs-motion:not(.gs-go):not(.gs-shown) .gs-hero > .gs-media,
html.gs-io:not(.gs-shown) .gs-intro:not(.is-in) > * { opacity: 0; }
/* The fading pieces keep their own GPU layer from the first paint and NEVER give it back:
   handing a layer back when an animation ends makes the browser redraw it on the page, and the
   text lands one pixel off — the "jump at the very end" the owner saw (proven 2026-09-24:
   2,205 pixels of the date line change at the end without this, 0 with it). Five layers,
   front page only. */
html.gs-motion .gs-intro > *,
html.gs-motion .gs-hero > .gs-media { will-change: opacity; }
html.gs-go .gs-hero > .gs-media,
html.gs-go:not(.gs-io) .gs-intro > *,
html.gs-go .gs-intro.is-in > * { animation: gs-in 0.9s ease-out backwards; }
html.gs-go .gs-hero > .gs-media { animation-duration: 1.1s; }
html.gs-go .gs-intro > :nth-child(2) { animation-delay: 0.12s; }
html.gs-go .gs-intro > :nth-child(3) { animation-delay: 0.24s; }
html.gs-go .gs-intro > :nth-child(4) { animation-delay: 0.36s; }
/* Phones: the title fades in while the visitor is scrolling — a little quicker there. */
@media (max-width: 559px) {
	html.gs-go .gs-intro.is-in > * { animation-duration: 0.7s; }
	html.gs-go .gs-intro > :nth-child(2) { animation-delay: 0.08s; }
	html.gs-go .gs-intro > :nth-child(3) { animation-delay: 0.16s; }
	html.gs-go .gs-intro > :nth-child(4) { animation-delay: 0.24s; }
}
@media (min-width: 560px) {
	/* Tablets and desktop: the title leads, the poster follows. */
	html.gs-go .gs-hero > .gs-media { animation-delay: 0.2s; }
}
@media (prefers-reduced-motion: reduce) {
	/* No movement: a short fade, so nothing pops in either. */
	html.gs-go .gs-hero > .gs-media,
	html.gs-go:not(.gs-io) .gs-intro > *,
	html.gs-go .gs-intro.is-in > * { animation: gs-fade 0.2s ease backwards; animation-delay: 0s !important; }
}

.gs-eyebrow {
	display: flex;
	align-items: center;
	gap: 1.125rem;
	font-size: clamp(1rem, 1.5vw, 1.35rem);
	font-weight: 700;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: var(--gs-sky);
	line-height: 1.2;
}
.gs-eyebrow::before {
	content: "";
	flex: 0 0 auto;
	width: clamp(2.75rem, 6vw, 5.75rem);
	height: 5px;
	background: var(--gs-sky);
	align-self: flex-end;
	margin-bottom: 0.15em;
}

.gs-title {
	margin-top: clamp(1.25rem, 2.6vw, 2rem) !important;
	color: #fff;
	font-weight: 800;
	text-transform: uppercase;
	line-height: 0.86;
	letter-spacing: -0.03em;
}
.gs-title__top,
.gs-title__main { display: block; }
.gs-title__top  { font-size: clamp(3.4rem, 7.2vw, 6.4rem); }
.gs-title__main { font-size: clamp(4.4rem, 9.6vw, 8.6rem); margin-top: 0.04em; }

@media (min-width: 1024px) {
	/* The intro column is half the page here; size to it, not to the viewport. */
	.gs-title__top  { font-size: clamp(4rem, 6.2vw, 7.4rem); }
	.gs-title__main { font-size: clamp(5.2rem, 8.1vw, 9.6rem); }
}

.gs-when {
	margin-top: clamp(1.25rem, 2.4vw, 2rem) !important;
	color: var(--gs-gold);
	font-size: clamp(1rem, 1.6vw, 1.45rem);
	font-weight: 700;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	line-height: 1.35;
}
@media (min-width: 1024px) {
	/* After the base rule on purpose: same specificity, so order decides (Codex, 2026-09-24). */
	.gs-when { font-size: clamp(1rem, 1.3vw, 1.5rem); }
}

.gs-intro__cta { margin-top: 1.75rem !important; }
.gs-intro__cta .wp-block-button { width: 100%; }
.gs-intro__cta .wp-block-button__link { width: 100%; box-sizing: border-box; padding-block: 1.1rem; }
@media (min-width: 560px) {
	.gs-intro__cta .wp-block-button { width: auto; }
	.gs-intro__cta .wp-block-button__link { padding-inline: 2.25rem; }
}

/* Photo + strip ---------------------------------------------------------- */
body .gs-media > * { margin: 0; }
/* The poster's own shape, so none of the words printed on it is ever cropped. */
.gs-media__photo img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1080 / 1350;
	object-fit: cover;
}
@media (min-width: 560px) and (max-width: 1023px) {
	/* Tablets: a portrait poster at full width would be taller than the screen. */
	.gs-media { width: min(100%, 32rem); justify-self: center; }
}
/* One line, centred, the two facts split by a dot (owner, 2026-09-24, option C). The
   text sizes itself to the strip's own width (container units): the line is ≈28.6 × the
   font size wide, so it always fits — a 320px phone or a short laptop screen — capped at 16px. */
.gs-media__strip {
	container-type: inline-size;
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	padding: 0.95rem 1rem;
	background: var(--gs-strip);
	text-align: center;
}
body .gs-media__strip > * { margin: 0; }
.gs-media__strip p {
	font-size: min(1rem, calc(100cqi / 29)); /* cqi = the strip inside its padding */
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	line-height: 1.3;
	white-space: nowrap;
}
.gs-media__strip p + p::before {
	content: "·";
	margin-inline: 0.55em;
	opacity: 0.55;
	font-weight: 400;
}
@media (max-width: 559px) {
	/* Full-bleed on phones: the photo is the page's one image, let it breathe. */
	body .gs-hero > .gs-media { margin-inline: calc(var(--gs-gutter) * -1); }
	/* Phones (owner, 2026-09-24): the poster IS the hero — straight under the header,
	   the title block and Register button under it. Tablets/desktop keep intro first. */
	.gs-hero { grid-template-areas: "media" "intro" "facts"; padding-block-start: 0; }
	/* The tall phone poster (media #30, 9:16, via <picture>) IS the first screen: it fills
	   everything under the header (owner, 2026-09-24). 81px = the phone header (2 × 1rem +
	   48px logo + 1px rule). Phones differ in shape, so a sliver is trimmed off the edges.
	   The poster's words sit off-centre (≈108px free on the left, 70 on the right; lots of
	   sky on top, ≈113px under "MISR"), so the trim is weighted to the left and the top:
	   measured at 360×740, 375×667, 390×844, 412×915 — no word or logo touches an edge. */
	.gs-media__photo picture { display: block; }
	/* Only with the tall poster — without it (attachment missing) the 4:5 poster keeps its shape. */
	.gs-media__photo--tall img {
		height: calc(100vh - 81px);
		height: calc(100svh - 81px);
		aspect-ratio: auto;
		object-fit: cover;
		object-position: 60% 75%;
	}
	body .gs-hero > .gs-media { margin-top: 0 !important; }
	body .gs-hero > .gs-intro { margin-top: 2rem; }
}

@media (min-width: 1024px) {
	/* The poster keeps its shape; it is sized so poster + strip fit on one screen,
	   and sits on the right edge of the page, in line with the header. */
	.gs-media { width: min(100%, calc(min(68vh, 46rem) * 0.8)); justify-self: end; }
	.gs-media__strip { padding-block: 1.15rem; }
}

/* Facts ------------------------------------------------------------------ */
.gs-facts {
	display: grid;
	grid-template-columns: 1fr;
	margin-top: 2rem !important;
	border-top: 1px solid var(--gs-rule);
}
body .gs-facts > *,
body .gs-fact > * { margin: 0; }
.gs-fact {
	display: grid;
	grid-template-columns: 6.5rem minmax(0, 1fr);
	align-items: baseline;
	gap: 1rem;
	padding-block: 1rem;
	border-bottom: 1px solid var(--gs-rule);
}
.gs-fact__label {
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--gs-sky);
}
.gs-fact__value {
	font-size: 1.0625rem;
	color: #fff;
	line-height: 1.4;
}
@media (min-width: 640px) {
	.gs-facts {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		column-gap: 1.25rem;
		padding-top: 1.75rem;
	}
	.gs-fact {
		grid-template-columns: 1fr;
		gap: 0.7rem;
		padding-block: 0;
		border-bottom: 0;
	}
	.gs-fact__value { font-size: clamp(0.9375rem, 1.2vw, 1.0625rem); }
}
@media (min-width: 1024px) {
	.gs-facts { margin-top: clamp(2.5rem, 4vw, 3.5rem) !important; padding-top: 2rem; }
	.gs-fact__label { font-size: 0.9375rem; }
	.gs-fact__value { font-size: clamp(1.125rem, 1.45vw, 1.375rem); }
}

/* The registration card -------------------------------------------------- */
.gs-card {
	background: var(--gs-paper);
	color: var(--gs-ink);
	border-top: 10px solid var(--gs-sky);
	padding: clamp(1.5rem, 3.2vw, 2.75rem);
	box-sizing: border-box;
	scroll-margin-top: 1rem;
}
@media (min-width: 1024px) {
	/* The card fills the page width, edge to edge with the hero above it. */
	.gs-card {
		max-width: var(--gs-max);
		margin-inline: auto !important;
		padding: clamp(2.5rem, 4vw, 3.75rem);
	}
}
@media (max-width: 559px) {
	body .gs-register > .gs-card { margin-inline: calc(var(--gs-gutter) * -1); padding-inline: var(--gs-gutter); }
}
body .gs-card > * { margin: 0; }

.gs-card__kicker {
	font-size: 0.95rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: #2b586d;
}
.gs-card__title {
	margin-top: 0.7rem !important;
	color: var(--gs-ink);
	font-size: clamp(2.1rem, 3.3vw, 3rem);
	font-weight: 800;
	letter-spacing: -0.025em;
	line-height: 1.05;
}
.gs-card__lead {
	margin-top: 0.8rem !important;
	color: var(--gs-muted);
	font-size: 1.0625rem;
	line-height: 1.5;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.gs-footer {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 1.25rem 2rem;
	padding-block: 2rem 2.5rem;
	border-top: 1px solid var(--gs-rule);
}
body .gs-footer > *,
body .gs-footer__logos > * { margin: 0; }
.gs-footer__name {
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: var(--gs-mist);
}
.gs-footer__logos {
	display: flex;
	align-items: center;
	gap: clamp(1.75rem, 4vw, 3.5rem);
}
.gs-footer__logo img { display: block; width: auto; }
.gs-footer__logo--goat img  { height: 36px; aspect-ratio: 360 / 133; }
.gs-footer__logo--emaar img { height: 34px; aspect-ratio: 240 / 89; }
.gs-footer__legal {
	grid-column: 1 / -1;
	font-size: 0.8125rem;
	letter-spacing: 0.02em;
	color: var(--gs-footnote);
}
@media (min-width: 640px) {
	/* The two logos stacked in one column on the right (owner, 2026-09-24): GOAT beside
	   the festival name, EMAAR beside the copyright line. */
	.gs-footer { grid-template-areas: "name goat" "legal emaar"; row-gap: 0.9rem; }
	.gs-footer__logos { display: contents; }
	.gs-footer__name { grid-area: name; }
	.gs-footer__legal { grid-area: legal; grid-column: auto; }
	.gs-footer__logo--goat { grid-area: goat; justify-self: end; }
	.gs-footer__logo--emaar { grid-area: emaar; justify-self: end; }
}
@media (max-width: 639px) {
	/* "Marassi Endurance Festival" on one line, "Rowing" under it — the dot left
	   hanging at a line end looked broken (owner, 2026-09-24). */
	.gs-footer__name .gs-sep { display: block; height: 0; overflow: hidden; margin: 0; }
	.gs-footer {
		grid-template-columns: 1fr;
		justify-items: center;
		text-align: center;
	}
}

/* ==========================================================================
   Thank-you and 404
   ========================================================================== */
.gs-thanks {
	padding-block: clamp(3rem, 9vw, 7rem);
	min-height: 52vh;
}
body .gs-thanks > * { margin: 0; }
.gs-thanks__title {
	margin-top: 1.5rem !important;
	font-size: clamp(3.25rem, 8vw, 6.5rem);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: -0.03em;
	line-height: 0.9;
}
.gs-thanks__lead {
	margin-top: 1.5rem !important;
	max-width: 36rem;
	font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
	line-height: 1.55;
	color: #e3ecf4;
}
.gs-thanks .gs-when { margin-top: 1.5rem !important; }
.gs-thanks__cta { margin-top: 2.25rem !important; }
@media (max-width: 767px) {
	/* Thank-you and 404 on phones (owner, 2026-09-24): the header holds only the logo here
	   (no Register button), so it sits in the middle, and so does the one button. */
	body:has(.gs-thanks) .gs-header { justify-content: center; }
	body .wp-block-buttons.gs-thanks__cta { justify-content: center; }
}

/* Plain fallback pages (index / search) */
.gs-plain { width: min(100% - 2 * var(--gs-gutter), var(--gs-max)); margin-inline: auto; }

/* Desktop: the registration band already closes the page; no rule on top of the footer. */
@media (min-width: 1024px) { body:has(.gs-register) .gs-footer { border-top: 0; } }