/**
 * Homepage styles — `template-homepage.php`.
 *
 * Blocks: `acf/home-hero`, `acf/sport-machines`.
 * Design reference: homepage-update-2026.png, measured on a 1920x1080 viewport.
 *
 * Loaded on the front page (see functions.php) and injected into the block
 * editor canvas via add_editor_style(), so the editor preview uses these same
 * numbers.
 */

/* ------------------------------------------------------------------
 * Tokens
 * ------------------------------------------------------------------ */

:root {
	/* Space left below the hero so the sport cards peek above the fold.
	   Desktop: 99 header + 850 hero + 131 peek = 1080. */
	--sf-peek: 131px;

	/* WP admin bar + .header__pre + .header__post + #header border.
	   The default below avoids a flash of `height: auto` before js runs;
	   footer.php refines it to the measured value. */
	--main-cover-offset: 99px;
}

@media (max-width: 991px) {
	:root {
		/* `.header__pre` is hidden at this breakpoint: 58px bar + 1px border. */
		--sf-peek: 0px;
		--main-cover-offset: 59px;
	}
}

/* ------------------------------------------------------------------
 * Hero
 * ------------------------------------------------------------------ */

.sf-hero {
	position: relative;
	display: block;
	overflow: hidden;
	background: #141414;

	/* `vh` first so browsers without `svh` still get a full-screen hero.
	   `svh` is deliberately not `dvh`: iOS collapses its bottom toolbar while
	   scrolling, and `dvh` would reflow the page mid-scroll. */
	height: calc(100vh - var(--main-cover-offset) - var(--sf-peek));
	height: calc(100svh - var(--main-cover-offset) - var(--sf-peek));
	min-height: 480px;
}

.sf-hero::before {
	content: '.';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 1;
	background: rgba(0, 0, 0, .5);
	color: transparent;
}

.sf-hero__video,
.sf-hero__poster {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}

/* The `.container` doubles as the vertical centring box so the copy block
   (356px -> 691px in the comp) sits dead centre of the 850px hero. */
.sf-hero__inner {
	position: relative;
	z-index: 2;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	padding-left: 24px;
	padding-right: 24px;
}

.sf-hero__inner > * {
	max-width: 100%;
}

@media (min-width: 768px) {
	.sf-hero__inner {
		padding-left: 40px;
		padding-right: 40px;
	}
}

@media (min-width: 1200px) {
	/* Theme `.container` content edge + the comp's 46px hero inset. */
	.sf-hero__inner {
		padding-left: 61px;
		padding-right: 61px;
	}
}

.product-badge--hero {
	border-color: var(--white);
	background: var(--white);
	color: var(--violet);
}

.sf-hero__title {
	margin: 14px 0 0;
	color: var(--white);
	font-size: 140px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.01em;
}

.sf-hero__sub {
	margin: 12px 0 0;
	color: var(--white);
	font-size: 34px;
	font-weight: 400;
	line-height: 1;
}

.sf-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	margin-top: 44px;
}

.sf-hero__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 56px;
	border-radius: 8px;
	font-size: 18px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.02em;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.sf-hero__btn:hover,
.sf-hero__btn:focus {
	text-decoration: none;
}

.sf-hero__btn--solid {
	padding: 0 40px;
	background: var(--white);
	color: var(--violet);
}

.sf-hero__btn--solid:hover,
.sf-hero__btn--solid:focus {
	background: var(--violet);
	color: var(--white);
}

.sf-hero__btn--ghost {
	gap: 0.5rem;
	padding: 0 32px;
	border: 1px solid var(--white);
	color: var(--white);
}

.sf-hero__btn--ghost:hover,
.sf-hero__btn--ghost:focus {
	background: rgba(255, 255, 255, 0.16);
	border-color: var(--white);
}

.sf-hero__btn-icon {
	flex: 0 0 auto;
	display: block;
	width: 20px;
	height: 20px;
}

/* ------------------------------------------------------------------
 * "Watch video" Magnific popup
 * ------------------------------------------------------------------ */

.sf-hero__popup {
	background: #000;
	line-height: 0;
}

.sf-hero__popup-video {
	display: block;
	width: 100%;
	height: auto;
	max-height: calc(100vh - 96px);
	max-height: calc(100svh - 96px);
}

/* YouTube popup variant (hero.php's `youtube_id` branch) — iframes have no
   intrinsic ratio, so give the frame the same footprint as the video. */
.sf-hero__popup-frame {
	border: 0;
	aspect-ratio: 16 / 9;
}

.sf-mfp-video .mfp-container {
	display: flex;
	align-items: center;
	padding: 0 16px;
}

.sf-mfp-video .mfp-content {
	position: relative;
	width: 100%;
	max-width: 1120px;
	margin: 0 auto;
}

.sf-mfp-video .mfp-close {
	right: 0;
	color: var(--white);
	opacity: 0.9;
}

/* ------------------------------------------------------------------
 * Sport cards
 * ------------------------------------------------------------------ */

.sf-sports {
	background: var(--white);
	padding: 27px 0 48px;
}

.sf-sports__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}

.sf-sport-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-height: 608px;
	padding: 32px 16px 40px;
	border: 1px solid var(--border-color);
	border-radius: 8px;
	color: inherit;
	text-decoration: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* The theme underlines every `a:hover`; the chip must stay clean. */
.sf-sport-card:hover,
.sf-sport-card:focus {
	text-decoration: none;
}

.sf-sport-card:hover {
	border-color: #9b9b9b;
	box-shadow: 0 6px 20px rgba(36, 36, 36, 0.1);
}

.sf-sport-card:focus-visible {
	outline: 2px solid var(--sky-blue);
	outline-offset: 2px;
}

/* Chip background defaults to --black; per-term colour is applied inline from
   the ACF `color` field on the `sport` taxonomy. */
.sf-sport-card__chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	height: 36px;
	padding: 0 16px;
	border-radius: 4px;
	background: var(--black);
	color: var(--white);
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
}

/* Reserved artwork area: the card height is fixed, so dropping an image in
   later cannot move the fold or reflow the row. */
.sf-sport-card__media {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 1 1 auto;
	width: 100%;
	min-height: 0;
	margin: 40px 0;
	overflow: hidden;
}

.sf-sport-card__img {
	display: block;
	width: 100%;
	height: 100%;
	max-height: 440px;
	object-fit: contain;
}

.sf-sport-card__link {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	gap: 8px;
	margin-top: 10px;
	color: var(--sky-blue);
	font-size: 1rem;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.sf-sport-card:hover .sf-sport-card__link {
	color: #2b93d4;
}

.sf-sport-card__chevron {
	flex: 0 0 auto;
	display: block;
	width: 12px;
	height: 12px;
}

/* ------------------------------------------------------------------
 * Responsive
 * ------------------------------------------------------------------ */

@media (max-width: 991px) {
	.sf-hero__title {
		font-size: clamp(56px, 9vw, 140px);
	}

	.sf-hero__sub {
		font-size: clamp(20px, 3vw, 34px);
	}

	.sf-sports__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.sf-sport-card {
		min-height: 520px;
	}

	.sf-sport-card__chip {
		font-size: 24px;
	}
}

@media (max-width: 767px) {
	.sf-sports__grid {
		grid-template-columns: 1fr;
	}

	.sf-sport-card {
		min-height: 480px;
	}
}

@media (max-width: 560px) {
	.sf-hero__actions {
		width: 100%;
		gap: 12px;
	}

	.sf-hero__btn {
		width: 100%;
	}

	.sf-hero__btn--ghost {
		gap: 14px;
	}

	.sf-sport-card__chip {
		font-size: 22px;
	}
}

@media (min-width: 992px) {
	/* Keep the comp's exact card metrics on the desktop grid. */
	.sf-sport-card {
		min-height: auto;
	}
}

/* ------------------------------------------------------------------
 * Homepage sections (acf/home-section)
 *
 * Generic section below the hero + sport cards: optional eyebrow/heading
 * pair above an image | content grid. The `--gray` modifier paints the
 * full-bleed band (the Spinfire App section in the comp); the section
 * itself spans edge to edge and `.container` constrains the inner row,
 * same as .sf-hero.
 * ------------------------------------------------------------------ */

.sf-section {
	padding: 72px 0;
}

body[class*='get-started'] .sf-section {
	padding: 42px 0;
}

.sf-section--gray {
	background: #f4f4f6;
}

/* The first section follows the sport cards' 48px bottom padding. */
.sf-sports + .sf-section {
	padding-top: 40px;
}

.sf-section__header {
	margin-bottom: 40px;
}

.sf-section__eyebrow {
	margin: 0 0 8px;
	color: var(--violet);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.sf-section__title {
	margin: 0;
	color: var(--black);
	font-size: 40px;
	font-weight: 700;
	line-height: 1.15;
}

.sf-section__grid {
	display: flex;
	align-items: center;
	gap: 56px;
}

.sf-section__media {
	flex: 0 0 42%;
	min-width: 0;
}

.sf-section__media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 16px;
}

.sf-section__content {
	flex: 1 1 auto;
	min-width: 0;
	color: #1a1a1a;
	font-size: 16px;
	line-height: 1.6;
}

.sf-section__content > :last-child {
	margin-bottom: 0;
}

/* Right: content | image. */
.sf-section--right .sf-section__media {
	order: 2;
}

/* Full: image and content stacked at full width. */
.sf-section--full .sf-section__grid {
	flex-direction: column;
	align-items: stretch;
	gap: 32px;
}

.sf-section--full .sf-section__media {
	flex: 0 0 auto;
}

/* Content helpers — badges, lead statements and CTAs are authored inside
   the wysiwyg (the block has no dedicated button fields). */
.sf-section__pill {
	display: inline-block;
	margin: 0;
	padding: 7px 14px;
	border: 1px solid var(--violet);
	border-radius: 8px;
	background: var(--white);
	color: var(--violet);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.sf-section__lead {
	margin: 24px 0 32px;
	font-size: 28px;
	line-height: 1.4;
	color: #1a1a1a;
}

.sf-section__btn {
	display: inline-block;
	padding: 14px 28px;
	border-radius: 8px;
	background: var(--violet);
	color: var(--white);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	transition: opacity 0.3s ease;
}

.sf-section__btn:hover,
.sf-section__btn:focus {
	opacity: 0.85;
	text-decoration: none;
}

/* "At a glance" list (the Pro 3 single product's spec grid, copied):
   a plain <ul> of <li><strong>label</strong><br><span>copy</span></li>
   rows rendered as a 3-column grid with hairline separators. */
.sf-section__content > ul {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: 32px;
	margin: 0;
	padding: 0;
	list-style: none;
	border-bottom: 1px solid var(--border-color);
}

.sf-section__content > ul > li {
	padding: 28px 0;
	border-top: 1px solid var(--border-color);
}

.sf-section__content > ul > li > strong {
	display: block;
	margin-bottom: 8px;
	color: #101010;
	font-size: 28px;
	line-height: 1.15;
	text-transform: uppercase;
}

.sf-section__content > ul > li > strong + br {
	display: none;
}

.sf-section__content > ul > li > span {
	color: var(--light-gray);
	font-size: 15px;
}

@media (max-width: 991px) {
	.sf-section {
		padding: 56px 0;
	}

	.sf-section__title {
		font-size: 32px;
	}

	.sf-section__header {
		margin-bottom: 28px;
	}

	.sf-section__grid {
		flex-direction: column;
		align-items: stretch;
		gap: 32px;
	}

	.sf-section__media {
		flex: 0 0 auto;
	}

	/* Stacked: the image always reads first on small screens. */
	.sf-section--right .sf-section__media {
		order: 0;
	}

	.sf-section__content > ul {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.sf-section {
		padding: 40px 0;
	}

	.sf-section__title {
		font-size: 26px;
	}

	.sf-section__lead {
		font-size: 22px;
	}

	.sf-section__content > ul {
		grid-template-columns: 1fr;
	}

	.sf-section__content > ul > li {
		padding: 20px 0;
	}

	.sf-section__content > ul > li > strong {
		font-size: 22px;
	}
}