/**
 * The Golf Shot — Homepage
 *
 * Loaded on the front page only (see inc/enqueue.php).
 * Depends on tokens and components from base.css.
 *
 * Sections:
 *   1. Page wrapper
 *   2. Hero
 *   3. Drop 01 / Current collection
 *   4. Lifestyle banner
 *   5. Shop by category
 *   6. Brand statement
 *   7. Editorial feature
 *   8. Most played
 *   9. Seen off course
 */

/* ==========================================================================
   1. Page wrapper
   ========================================================================== */

.gs-home {
	background-color: var(--gs-cream);
	color: var(--gs-charcoal);
	overflow-x: clip; /* guards full-bleed sections against horizontal scroll */
}

/* ==========================================================================
   2. Hero
   Mobile: stacked (copy, then image).
   Desktop (>= 1000px): two columns, copy left, image bleeding to the right edge.
   ========================================================================== */

.gs-hero {
	display: grid;
	grid-template-columns: 1fr;
	background-color: var(--gs-cream);
}

.gs-hero__content {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: var(--gs-space-md);
	padding: var(--gs-space-lg) var(--gs-gutter) var(--gs-space-lg);
}

.gs-hero__title {
	/* Sized so "GOLF-INSPIRED" fits on one line at every breakpoint. */
	font-size: clamp(2.25rem, 0.8rem + 4.2vw, 5.75rem);
	max-width: 12ch;
}

.gs-hero__text {
	margin: 0;
	max-width: 34ch;
	font-size: var(--gs-text-md);
	line-height: 1.55;
	color: var(--gs-charcoal);
}

.gs-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gs-space-sm);
	padding-top: var(--gs-space-xs);
}

/* Media */

.gs-hero__media {
	position: relative;
	aspect-ratio: 4 / 5;
	background-color: var(--gs-cream-deep);
	overflow: hidden;
}

.gs-hero__image {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

/*
 * PLACEHOLDER — only rendered while no hero image is set (see inc/home.php).
 * Safe to leave in place once the real image is added.
 */
.gs-hero__placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-end;
	padding: var(--gs-space-md);
	background:
		radial-gradient(120% 90% at 70% 30%, rgba(255, 255, 255, 0.45), transparent 60%),
		linear-gradient(160deg, var(--gs-cream-deep) 0%, #ddd5c3 100%);
}

.gs-hero__placeholder::before {
	content: "";
	position: absolute;
	inset: var(--gs-space-sm);
	border: 1px dashed rgba(22, 22, 20, 0.25);
	pointer-events: none;
}

.gs-hero__placeholder-label {
	position: relative;
	font-family: var(--gs-font-heading);
	font-size: var(--gs-text-xs);
	font-weight: 600;
	letter-spacing: var(--gs-tracking-wide);
	text-transform: uppercase;
	color: var(--gs-stone);
}

/* Small tablets: shorter image so the fold isn't all photo. */
@media (min-width: 690px) and (max-width: 999.98px) {
	.gs-hero__media {
		aspect-ratio: 5 / 4;
	}
}

/* Desktop */
@media (min-width: 1000px) {
	.gs-hero {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
		/* Fill the first screen below the header, but never force a very tall hero. */
		min-height: clamp(520px, calc(100svh - var(--header-height, 80px)), 760px);
	}

	.gs-hero__content {
		justify-content: flex-end;
		gap: clamp(1rem, 0.5rem + 1vw, 1.75rem);
		padding: var(--gs-space-lg) var(--gs-gutter);
	}

	/* ~59px at 1366px wide, ~78px (max) at 1920px. */
	.gs-hero__title {
		font-size: clamp(3rem, 0.8rem + 3.4vw, 4.875rem);
		line-height: 0.9;
	}

	.gs-hero__media {
		aspect-ratio: auto;
		height: 100%;
		min-height: 100%;
	}
}

/* Very wide screens: keep copy aligned with the site's max content width. */
@media (min-width: 1700px) {
	.gs-hero__content {
		padding-left: calc((100vw - var(--gs-max-width)) / 2 + var(--gs-gutter));
	}
}

/* ==========================================================================
   3. Drop 01 / Current collection
   Mobile (< 690px): 1 column. Tablet: 2 columns. Desktop (>= 1000px): one column per product
   (4 products = 4 columns, 3 = 3, etc.).
   ========================================================================== */

.gs-drop {
	padding-bottom: var(--gs-space-lg);
}

.gs-drop__header {
	display: flex;
	flex-direction: column;
	gap: var(--gs-space-sm);
	margin-bottom: var(--gs-space-md);
}

.gs-drop__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--gs-space-lg) clamp(0.75rem, 0.4rem + 1.2vw, 1.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.gs-drop__grid--count-1 {
	grid-template-columns: minmax(0, 1fr);
	max-width: 480px;
}

/* Product card */

.gs-product-card {
	margin: 0;
}

.gs-product-card__link {
	display: flex;
	flex-direction: column;
	gap: var(--gs-space-sm);
	color: inherit;
	text-decoration: none;
}

.gs-product-card__media {
	position: relative;
	aspect-ratio: 4 / 5;
	background-color: var(--gs-cream-deep);
	overflow: hidden;
}

.gs-product-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	transition: transform 600ms var(--gs-ease);
}

/* Marked model images: same framing as the archive cards (woocommerce-cards.css). */
.gs-product-card__media img.gs-model-image {
	object-position: center 5%;
}

.gs-product-card__link:hover .gs-product-card__media img,
.gs-product-card__link:focus-visible .gs-product-card__media img {
	transform: scale(1.03);
}

.gs-product-card__link:focus-visible {
	outline: 2px solid var(--gs-olive);
	outline-offset: 4px;
}

.gs-product-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.gs-product-card__title {
	margin: 0;
	font-family: var(--gs-font-heading);
	font-size: var(--gs-text-sm);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--gs-ink);
}

.gs-product-card__price {
	margin: 0;
	font-size: var(--gs-text-sm);
	line-height: 1.4;
	color: var(--gs-stone);
}

.gs-product-card__price del {
	margin-right: 0.4em;
	opacity: 0.6;
}

.gs-product-card__price ins {
	text-decoration: none;
	color: var(--gs-ink);
}

.gs-drop__actions {
	display: flex;
	justify-content: center;
	margin-top: var(--gs-space-lg);
}

/* Admin-only notice when the drop has no products. */
.gs-admin-notice {
	margin-block: var(--gs-space-md);
	font-size: var(--gs-text-sm);
	color: var(--gs-stone);
}

/* Mobile: single column for larger product imagery. */
@media (max-width: 689.98px) {
	.gs-drop__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (min-width: 1000px) {
	/* Slightly smaller than the global .gs-heading: ~48px at 1000px, max 60px (was up to 72px). */
	.gs-drop .gs-heading {
		font-size: clamp(2.75rem, 1.2rem + 2.9vw, 3.75rem);
	}

	.gs-product-card__title {
		font-size: var(--gs-text-base);
	}

	.gs-drop__grid--count-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.gs-drop__grid--count-4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (prefers-reduced-motion: reduce) {
	.gs-product-card__media img {
		transition: none;
	}
}

/* ==========================================================================
   4. Lifestyle banner
   Wide campaign crop within the content width, heading overlaid bottom-left.
   Mobile 4:5 -> tablet 4:3 -> desktop 16:7 (height capped).
   No top padding: Drop 01's bottom padding already separates the sections.
   ========================================================================== */

.gs-lifestyle {
	padding-bottom: var(--gs-space-lg);
}

.gs-lifestyle__frame {
	position: relative;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background-color: var(--gs-charcoal);
}

.gs-lifestyle__image {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

/* Restrained gradient, only behind the heading area, for legibility. */
.gs-lifestyle__overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-end;
	padding: var(--gs-space-md);
	background: linear-gradient(
		to top,
		rgba(22, 22, 20, 0.5) 0%,
		rgba(22, 22, 20, 0.18) 35%,
		rgba(22, 22, 20, 0) 60%
	);
	pointer-events: none;
}

.gs-lifestyle__title {
	margin: 0;
	max-width: 13ch;
	font-family: var(--gs-font-heading);
	font-size: clamp(2rem, 0.9rem + 3.4vw, 4.25rem);
	font-weight: 800;
	line-height: 0.92;
	letter-spacing: var(--gs-tracking-tight);
	text-transform: uppercase;
	color: var(--gs-cream);
	text-wrap: balance;
}

/*
 * PLACEHOLDER — only rendered while no banner image is set (see inc/home.php).
 * Dark so the overlaid heading previews as it will on a real photo.
 */
.gs-lifestyle__placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-start;
	justify-content: flex-end;
	padding: var(--gs-space-md);
	background:
		radial-gradient(90% 120% at 75% 20%, rgba(255, 255, 255, 0.08), transparent 60%),
		linear-gradient(150deg, #3d4130 0%, var(--gs-charcoal) 100%);
}

.gs-lifestyle__placeholder::before {
	content: "";
	position: absolute;
	inset: var(--gs-space-sm);
	border: 1px dashed rgba(245, 241, 232, 0.3);
	pointer-events: none;
}

.gs-lifestyle__placeholder-label {
	position: relative;
	font-family: var(--gs-font-heading);
	font-size: var(--gs-text-xs);
	font-weight: 600;
	letter-spacing: var(--gs-tracking-wide);
	text-transform: uppercase;
	text-align: right;
	color: rgba(245, 241, 232, 0.6);
}

/* Tablet */
@media (min-width: 690px) {
	.gs-lifestyle__frame {
		aspect-ratio: 4 / 3;
	}

	.gs-lifestyle__overlay {
		padding: var(--gs-space-lg);
	}
}

/* Desktop: wide campaign crop, never taller than ~70% of the viewport. */
@media (min-width: 1000px) {
	.gs-lifestyle__frame {
		aspect-ratio: 16 / 7;
		max-height: 70svh;
		min-height: 420px;
		width: 100%;
	}

	/*
	 * Heading tucked into the bottom-left corner over the quieter landscape,
	 * clear of the model. Fine-tune the position with the two variables:
	 * smaller = further left / lower.
	 */
	.gs-lifestyle__overlay {
		--gs-lifestyle-inset-left: clamp(1.5rem, 0.6rem + 1.4vw, 2.25rem);   /* ~30px at 1440px (was ~49px) */
		--gs-lifestyle-inset-bottom: clamp(1.5rem, 0.6rem + 1.4vw, 2.25rem); /* ~30px at 1440px (was ~49px) */

		padding: clamp(2.75rem, 1.5rem + 2.4vw, 4.5rem);
		padding-left: var(--gs-lifestyle-inset-left);
		padding-bottom: var(--gs-lifestyle-inset-bottom);
	}

	/*
	 * ~53px at 1440px wide, max 58px (was ~63px, max 68px).
	 * 10.5em width breaks the heading into two lines at the full stop:
	 * "THE ROUND ENDS." / "THE DAY DOESN'T."
	 */
	.gs-lifestyle__title {
		font-size: clamp(2.5rem, 1rem + 2.6vw, 3.625rem);
		max-width: 10.5em;
	}
}

/* ==========================================================================
   5. Shop by category
   Mobile: 1 column. Tablet: 2 columns, third card centred on its own row
   at the same width. Desktop (>= 1000px): 3 equal columns.
   No top padding: the Lifestyle banner's bottom padding separates them.
   ========================================================================== */

.gs-categories {
	padding-bottom: calc(var(--gs-space-xl) * 0.75); /* ~92px at 1366px; gap above Brand statement */
}

.gs-categories__title {
	margin-bottom: var(--gs-space-md);
}

.gs-categories__grid {
	--gs-categories-gap: clamp(1rem, 0.5rem + 1.5vw, 2rem);

	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--gs-space-lg) var(--gs-categories-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.gs-category-card {
	margin: 0;
}

.gs-category-card__link {
	display: flex;
	flex-direction: column;
	gap: 1.25rem; /* image -> label (was 1rem) */
	color: var(--gs-ink);
	text-decoration: none;
}

.gs-category-card__link:focus-visible {
	outline: 2px solid var(--gs-olive);
	outline-offset: 4px;
}

.gs-category-card__media {
	position: relative;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background-color: var(--gs-cream-deep);
}

.gs-category-card__image {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	transition: transform 700ms var(--gs-ease);
}

.gs-category-card__name {
	display: flex;
	align-items: baseline;
	justify-content: flex-start; /* arrow sits right after the name */
	gap: 0.4em;
	font-family: var(--gs-font-heading);
	font-size: var(--gs-text-lg);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	color: var(--gs-ink);
}

.gs-category-card__arrow {
	font-family: var(--gs-font-body);
	font-weight: 400;
	transition: transform var(--gs-duration) var(--gs-ease);
}

/* PLACEHOLDER — only rendered while a category image is missing. */
.gs-category-card__placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-end;
	padding: var(--gs-space-md);
	background:
		radial-gradient(120% 90% at 70% 30%, rgba(255, 255, 255, 0.45), transparent 60%),
		linear-gradient(160deg, var(--gs-cream-deep) 0%, #ddd5c3 100%);
}

.gs-category-card__placeholder::before {
	content: "";
	position: absolute;
	inset: var(--gs-space-sm);
	border: 1px dashed rgba(22, 22, 20, 0.25);
	pointer-events: none;
}

.gs-category-card__placeholder-label {
	position: relative;
	font-family: var(--gs-font-heading);
	font-size: var(--gs-text-xs);
	font-weight: 600;
	letter-spacing: var(--gs-tracking-wide);
	text-transform: uppercase;
	color: var(--gs-stone);
}

/* Tablet: 2 columns; an odd last card is centred at the same width. */
@media (min-width: 690px) and (max-width: 999.98px) {
	.gs-categories__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.gs-category-card:last-child:nth-child(odd) {
		grid-column: 1 / -1;
		justify-self: center;
		width: calc((100% - var(--gs-categories-gap)) / 2);
	}
}

/* Desktop: 3 equal columns, hover zoom. */
@media (min-width: 1000px) {
	.gs-categories__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	/* Eyebrow ~17% larger than the default 12px; still well below .gs-heading. */
	.gs-categories__title {
		font-size: 0.875rem;
	}

	/* ~22px at 1440px wide (was ~26px), bold rather than extra-bold. */
	.gs-category-card__name {
		font-size: clamp(1.125rem, 0.95rem + 0.5vw, 1.375rem);
		font-weight: 700;
	}

	.gs-category-card__link:hover .gs-category-card__image {
		transform: scale(1.03);
	}

	.gs-category-card__link:hover .gs-category-card__arrow {
		transform: translateX(4px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.gs-category-card__image,
	.gs-category-card__arrow {
		transition: none;
	}
}

/* ==========================================================================
   6. Brand statement
   Text-only, left-aligned. Text block max 760px on desktop; paragraph
   capped at ~60 characters per line.
   No top padding: Shop by category's bottom padding separates them.
   ========================================================================== */

/* The gap above comes from Shop by category's bottom padding. */
.gs-brand {
	padding-bottom: calc(var(--gs-space-xl) * 0.75); /* ~92px at 1366px */
}

.gs-brand__inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	max-width: 760px;
}

.gs-brand__eyebrow {
	margin-bottom: var(--gs-space-sm);
}

.gs-brand__statement {
	margin: 0;
	font-family: var(--gs-font-heading);
	font-size: clamp(2rem, 1.1rem + 3vw, 3rem);
	font-weight: 800;
	line-height: 0.95;
	letter-spacing: var(--gs-tracking-tight);
	text-transform: uppercase;
	color: var(--gs-ink);
	text-wrap: balance;
}

.gs-brand__text {
	max-width: 60ch;
	margin: var(--gs-space-md) 0 0;
	font-size: var(--gs-text-md);
	line-height: 1.6;
	color: var(--gs-charcoal);
}

.gs-brand__link {
	display: inline-flex;
	align-items: baseline;
	gap: 0.5em;
	margin-top: var(--gs-space-md);
	padding-bottom: 0.3em;
	border-bottom: 1.5px solid currentColor;
	font-family: var(--gs-font-heading);
	font-size: var(--gs-text-sm);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--gs-ink);
	transition: color var(--gs-duration) var(--gs-ease);
}

.gs-brand__link:hover,
.gs-brand__link:focus-visible {
	color: var(--gs-olive);
}

.gs-brand__link:focus-visible {
	outline: 2px solid var(--gs-olive);
	outline-offset: 4px;
}

.gs-brand__link-arrow {
	font-family: var(--gs-font-body);
	font-weight: 400;
	transition: transform var(--gs-duration) var(--gs-ease);
}

.gs-brand__link:hover .gs-brand__link-arrow,
.gs-brand__link:focus-visible .gs-brand__link-arrow {
	transform: translateX(4px);
}

/* Desktop: ~62px at 1440px wide, max 64px. */
@media (min-width: 1000px) {
	.gs-brand__statement {
		font-size: clamp(3rem, 1.2rem + 3vw, 4rem);
	}
}

@media (prefers-reduced-motion: reduce) {
	.gs-brand__link,
	.gs-brand__link-arrow {
		transition: none;
	}
}

/* ==========================================================================
   7. Editorial feature
   Mobile / small tablet (< 800px): stacked, image first.
   >= 800px: two columns, image 7fr (~58%) / text 5fr (~42%), text centred
   vertically against the image.
   No top padding: Brand statement's bottom padding separates them.
   ========================================================================== */

.gs-editorial {
	padding-bottom: calc(var(--gs-space-xl) * 0.75);
}

.gs-editorial__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--gs-space-md);
}

.gs-editorial__media {
	position: relative;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background-color: var(--gs-cream-deep);
}

.gs-editorial__image {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

/* PLACEHOLDER — only rendered while no feature image is set (see inc/home.php). */
.gs-editorial__placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-end;
	padding: var(--gs-space-md);
	background:
		radial-gradient(120% 90% at 70% 30%, rgba(255, 255, 255, 0.45), transparent 60%),
		linear-gradient(160deg, var(--gs-cream-deep) 0%, #ddd5c3 100%);
}

.gs-editorial__placeholder::before {
	content: "";
	position: absolute;
	inset: var(--gs-space-sm);
	border: 1px dashed rgba(22, 22, 20, 0.25);
	pointer-events: none;
}

.gs-editorial__placeholder-label {
	position: relative;
	font-family: var(--gs-font-heading);
	font-size: var(--gs-text-xs);
	font-weight: 600;
	letter-spacing: var(--gs-tracking-wide);
	text-transform: uppercase;
	color: var(--gs-stone);
}

/* Text block */

.gs-editorial__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	max-width: 480px;
}

.gs-editorial__eyebrow {
	margin-bottom: var(--gs-space-sm);
}

.gs-editorial__title {
	margin: 0;
	font-family: var(--gs-font-heading);
	font-size: clamp(1.75rem, 1.1rem + 2.2vw, 2.25rem);
	font-weight: 800;
	line-height: 0.95;
	letter-spacing: var(--gs-tracking-tight);
	text-transform: uppercase;
	color: var(--gs-ink);
	text-wrap: balance;
}

.gs-editorial__text {
	max-width: 44ch;
	margin: var(--gs-space-md) 0 0;
	font-size: var(--gs-text-md);
	line-height: 1.6;
	color: var(--gs-charcoal);
}

.gs-editorial__link {
	display: inline-flex;
	align-items: baseline;
	gap: 0.5em;
	margin-top: var(--gs-space-md);
	padding-bottom: 0.3em;
	border-bottom: 1.5px solid currentColor;
	font-family: var(--gs-font-heading);
	font-size: var(--gs-text-sm);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--gs-ink);
	transition: color var(--gs-duration) var(--gs-ease);
}

.gs-editorial__link:hover,
.gs-editorial__link:focus-visible {
	color: var(--gs-olive);
}

.gs-editorial__link:focus-visible {
	outline: 2px solid var(--gs-olive);
	outline-offset: 4px;
}

.gs-editorial__link-arrow {
	font-family: var(--gs-font-body);
	font-weight: 400;
	transition: transform var(--gs-duration) var(--gs-ease);
}

.gs-editorial__link:hover .gs-editorial__link-arrow,
.gs-editorial__link:focus-visible .gs-editorial__link-arrow {
	transform: translateX(4px);
}

/* Two columns from 800px. */
@media (min-width: 800px) {
	.gs-editorial__grid {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		align-items: center;
		gap: clamp(2rem, 0.5rem + 4.5vw, 6rem);
	}
}

/* Desktop: ~46px at 1440px wide, max 48px (Brand statement max is 64px). */
@media (min-width: 1000px) {
	.gs-editorial__title {
		font-size: clamp(2.25rem, 0.8rem + 2.4vw, 3rem);
	}

	/*
	 * Nudge the text block ~35px above vertical centre: the block is centred
	 * including its margin, so a 70px bottom margin lifts it by half that.
	 */
	.gs-editorial__content {
		margin-bottom: 4.375rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.gs-editorial__link,
	.gs-editorial__link-arrow {
		transition: none;
	}
}

/* ==========================================================================
   8. Most played
   Product cards reuse the .gs-product-card styles from section 3 (Drop 01).
   Mobile (< 690px): 1 column. Tablet: 2 columns. Desktop (>= 1000px):
   4 equal columns (fewer if the category has fewer products).
   No top padding: Editorial feature's bottom padding separates them.
   ========================================================================== */

.gs-most-played {
	padding-bottom: calc(var(--gs-space-xl) * 0.75);
}

.gs-most-played__header {
	display: flex;
	flex-direction: column;
	gap: var(--gs-space-sm);
	margin-bottom: var(--gs-space-md);
}

.gs-most-played__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--gs-space-lg) clamp(0.75rem, 0.4rem + 1.2vw, 1.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.gs-most-played__actions {
	display: flex;
	justify-content: center;
	margin-top: var(--gs-space-lg);
}

@media (min-width: 690px) {
	.gs-most-played__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.gs-most-played__grid--count-1 {
		grid-template-columns: minmax(0, 1fr);
		max-width: 480px;
	}
}

@media (min-width: 1000px) {
	/* ~52px max: a clear section heading, below the Brand statement (64px). */
	.gs-most-played__title {
		font-size: clamp(2.5rem, 1rem + 2.6vw, 3.25rem);
	}

	.gs-most-played__grid--count-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.gs-most-played__grid--count-4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* ==========================================================================
   9. Seen off course
   Editorial gallery, all images 4:5 portrait.
   Mobile (< 690px): 1 per row. Tablet: 2 columns, third wraps left.
   Desktop (>= 1000px): 3 equal columns, middle image dropped lower
   (staggered); outer images share a top edge.
   No top padding: In Rotation's bottom padding separates them.
   ========================================================================== */

.gs-seen {
	padding-bottom: calc(var(--gs-space-xl) * 0.75);
}

.gs-seen__header {
	display: flex;
	flex-direction: column;
	gap: var(--gs-space-sm);
	margin-bottom: var(--gs-space-md);
}

.gs-seen__gallery {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--gs-space-md) clamp(1rem, 0.5rem + 1.5vw, 2rem);
	align-items: start;
}

.gs-seen__item {
	position: relative;
	margin: 0;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background-color: var(--gs-cream-deep);
}

.gs-seen__image {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	transition: transform 700ms var(--gs-ease);
}

/* PLACEHOLDER — only rendered while an image file is missing. */
.gs-seen__placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-end;
	padding: var(--gs-space-md);
	background:
		radial-gradient(120% 90% at 70% 30%, rgba(255, 255, 255, 0.45), transparent 60%),
		linear-gradient(160deg, var(--gs-cream-deep) 0%, #ddd5c3 100%);
}

.gs-seen__placeholder::before {
	content: "";
	position: absolute;
	inset: var(--gs-space-sm);
	border: 1px dashed rgba(22, 22, 20, 0.25);
	pointer-events: none;
}

.gs-seen__placeholder-label {
	position: relative;
	font-family: var(--gs-font-heading);
	font-size: var(--gs-text-xs);
	font-weight: 600;
	letter-spacing: var(--gs-tracking-wide);
	text-transform: uppercase;
	color: var(--gs-stone);
}

@media (min-width: 690px) {
	.gs-seen__gallery {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1000px) {
	/* ~52px max, matching In Rotation; below the Brand statement (64px). */
	.gs-seen__title {
		font-size: clamp(2.5rem, 1rem + 2.6vw, 3.25rem);
	}

	.gs-seen__gallery {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	/* Staggered composition: middle image sits ~72px lower at 1440px. */
	.gs-seen__item:nth-child(3n + 2) {
		margin-top: clamp(3rem, 5vw, 5.5rem);
	}

	.gs-seen__item:hover .gs-seen__image {
		transform: scale(1.03);
	}
}

@media (prefers-reduced-motion: reduce) {
	.gs-seen__image {
		transition: none;
	}
}