/*!
 * HEPI — homepage styles. Loaded on the front page only.
 */

/* ========================================================================
   1. Hero
   ==================================================================== */
.hp-hero {
	position: relative;
	isolation: isolate;
	display: grid;
	background: var(--hp-ink);
	overflow: hidden;
}

.hp-hero--short { min-height: clamp(360px, 46vw, 520px); }
.hp-hero--tall { min-height: clamp(460px, 62vw, 760px); }
.hp-hero--full { min-height: calc(100vh - var(--hp-header-h) - var(--hp-announce-h)); }

@supports (height: 100svh) {
	.hp-hero--full { min-height: calc(100svh - var(--hp-header-h) - var(--hp-announce-h)); }
}

/* All slides occupy the same grid cell so the hero is as tall as its tallest
   slide and each slide's background image always fills the whole band. */
.hp-hero__slide {
	grid-area: 1 / 1;
	position: relative;
	display: flex;
	align-items: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity .6s var(--hp-ease), visibility .6s;
}

.hp-hero__slide.is-active {
	opacity: 1;
	visibility: visible;
	z-index: 1;
}

.hp-hero__media { position: absolute; inset: 0; z-index: -1; }

/* <picture> is inline by default, which would break the object-fit on the img. */
.hp-hero__media picture { display: block; width: 100%; height: 100%; }
.hp-hero__media img { width: 100%; height: 100%; object-fit: cover; }

.hp-hero__slide--light .hp-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, rgba(0, 0, 0, .68) 0%, rgba(0, 0, 0, .32) 45%, rgba(0, 0, 0, .1) 100%);
}

.hp-hero__slide--dark .hp-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, rgba(255, 255, 255, .78) 0%, rgba(255, 255, 255, .36) 50%, rgba(255, 255, 255, .06) 100%);
}

.hp-hero__inner { width: 100%; padding-block: clamp(48px, 8vw, 110px); }

.hp-hero__content { max-width: 620px; }

.hp-hero__slide--light { color: #fff; }
.hp-hero__slide--light .hp-eyebrow { color: rgba(255, 255, 255, .78); }
.hp-hero__slide--dark { color: var(--hp-ink); }

.hp-hero__slide.is-align-center .hp-hero__content { margin-inline: auto; text-align: center; }
.hp-hero__slide.is-align-right .hp-hero__content { margin-left: auto; text-align: right; }

.hp-hero__title {
	font-size: clamp(2.25rem, 7vw, 5rem);
	line-height: .96;
	margin: 0 0 var(--hp-s4);
	font-weight: 900;
}

.hp-hero__text {
	font-size: clamp(1rem, 1.5vw, 1.1875rem);
	max-width: 46ch;
	margin: 0 0 var(--hp-s6);
	opacity: .92;
}

.hp-hero__slide.is-align-center .hp-hero__text { margin-inline: auto; }
.hp-hero__slide.is-align-right .hp-hero__text { margin-left: auto; }

.hp-hero__cta { display: flex; flex-wrap: wrap; gap: var(--hp-s3); }
.hp-hero__slide.is-align-center .hp-hero__cta { justify-content: center; }
.hp-hero__slide.is-align-right .hp-hero__cta { justify-content: flex-end; }

.hp-hero__nav {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 20px;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--hp-s4);
}

.hp-hero__arrow {
	width: 42px;
	height: 42px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(255, 255, 255, .5);
	border-radius: 999px;
	background: rgba(0, 0, 0, .25);
	color: #fff;
	backdrop-filter: blur(4px);
	transition: background-color .18s, border-color .18s;
}

.hp-hero__arrow:hover { background: #fff; color: var(--hp-ink); border-color: #fff; }

.hp-hero__dots { display: flex; gap: 8px; }

.hp-hero__dot {
	width: 28px;
	height: 3px;
	padding: 0;
	border: 0;
	background: rgba(255, 255, 255, .45);
	transition: background-color .2s, width .2s;
}

.hp-hero__dot.is-active { background: #fff; width: 44px; }

@media (max-width: 600px) {
	.hp-hero__arrow { display: none; }
	.hp-hero__cta .hp-btn { flex: 1 1 140px; }
}

/* ========================================================================
   2. Trust bar
   ==================================================================== */
.hp-usps {
	border-bottom: 1px solid var(--hp-line);
	background: var(--hp-paper);
}

.hp-usps__list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--hp-s3) var(--hp-s5);
	margin: 0;
	padding: 18px 0;
	list-style: none;
}

@media (min-width: 900px) {
	.hp-usps__list { grid-template-columns: repeat(4, 1fr); }
}

.hp-usps__item {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .02em;
	color: var(--hp-mute);
}

.hp-usps__item svg { flex: 0 0 auto; color: var(--hp-ink); }

/* ========================================================================
   3. Category grid
   ==================================================================== */
.hp-catgrid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(10px, 1.4vw, 18px);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 900px) {
	.hp-catgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Homepage category row: three banners, one row.
   Stacks to a single column on phones so the labels stay readable. */
.hp-catgrid--three { grid-template-columns: minmax(0, 1fr); }

@media (min-width: 640px) {
	.hp-catgrid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
	.hp-catgrid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.hp-cat {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--hp-radius-lg);
	background: var(--hp-paper-2);
}

.hp-cat__media { display: block; aspect-ratio: 3 / 4; }

/* The three-up row uses the same 4:5 crop as the product cards. */
.hp-catgrid--three .hp-cat__media { aspect-ratio: 4 / 5; }

.hp-cat__media img { transition: transform .6s var(--hp-ease); }
.hp-cat:hover .hp-cat__media img { transform: scale(1.05); }

.hp-cat__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, .62), rgba(0, 0, 0, .05) 55%);
}

.hp-cat__body {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: clamp(14px, 2vw, 26px);
	color: #fff;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.hp-cat__name {
	font-size: clamp(1.05rem, 2vw, 1.6rem);
	font-weight: 800;
	letter-spacing: .04em;
	text-transform: uppercase;
	line-height: 1.1;
}

.hp-cat__cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	opacity: .9;
}

.hp-cat:hover .hp-cat__cta svg { transform: translateX(4px); }
.hp-cat__cta svg { transition: transform .2s var(--hp-ease); }

/* ========================================================================
   4. Product rows + rails
   ==================================================================== */
/* Bottom-align so the "View all" link sits on exactly the same line as it does
   in every other section heading, even though the rail arrows are taller. */
.hp-sechead__tools {
	display: flex;
	align-items: flex-end;
	gap: var(--hp-s5);
}

.hp-sechead__tools .hp-link-arrow { margin-bottom: 11px; }

@media (max-width: 899px) {
	.hp-sechead__tools .hp-link-arrow { margin-bottom: 0; }
}

.hp-rail__btns { display: none; gap: 4px; }

@media (min-width: 900px) {
	.hp-rail__btns { display: flex; }
}

.hp-rail__btn { border: 1px solid var(--hp-line-2); }
.hp-rail__btn:hover { background: var(--hp-ink); color: #fff; border-color: var(--hp-ink); }

/* The rail is also a `ul.products`, which declares explicit
   `grid-template-columns`. Left in place, those explicit columns take the
   first 2–4 cards and collapse them to zero width, because the remaining
   cards land in implicit columns that consume all the available space first.
   Resetting the template is what makes every card go into an auto column. */
.hp-rail__track {
	display: grid !important;
	grid-template-columns: none !important;
	grid-auto-flow: column;
	grid-auto-columns: 64vw;
	gap: clamp(10px, 1.6vw, 20px);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	padding-bottom: 6px;
}

.hp-rail__track::-webkit-scrollbar { display: none; }
.hp-rail__track > li { scroll-snap-align: start; min-width: 0; }

/* Track widths must be a fixed size, never `minmax(0, …)`: a zero minimum
   lets the tracks shrink to fit instead of overflowing, and the rail then
   never scrolls. */
@media (min-width: 560px) {
	.hp-rail__track { grid-auto-columns: 42vw; }
}

@media (min-width: 900px) {
	.hp-rail__track { grid-auto-columns: calc((100% - 2 * 20px) / 3); }
}

@media (min-width: 1200px) {
	.hp-rail__track { grid-auto-columns: calc((100% - 3 * 20px) / 4); }
}

/* ========================================================================
   5. Editorial split
   ==================================================================== */
.hp-editorial {
	display: grid;
	min-height: clamp(380px, 48vw, 640px);
	background: var(--hp-ink);
	color: #fff;
}

@media (min-width: 900px) {
	.hp-editorial { grid-template-columns: 1.15fr .85fr; }
}

.hp-editorial__media { position: relative; min-height: 280px; }
.hp-editorial__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.hp-editorial__panel { display: flex; align-items: center; }

.hp-editorial__inner {
	padding: clamp(32px, 5vw, 80px);
	max-width: 560px;
}

.hp-editorial__panel .hp-eyebrow { color: rgba(255, 255, 255, .7); }

.hp-editorial__title {
	font-size: clamp(1.9rem, 4vw, 3.25rem);
	line-height: 1;
	margin: 0 0 var(--hp-s4);
}

.hp-editorial__text {
	color: rgba(255, 255, 255, .8);
	margin-bottom: var(--hp-s6);
	max-width: 44ch;
}

/* ========================================================================
   6. Sports grid
   ==================================================================== */
.hp-sports {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(10px, 1.4vw, 16px);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 700px) {
	.hp-sports { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 1200px) {
	.hp-sports { grid-template-columns: repeat(7, minmax(0, 1fr)); }
}

.hp-sport {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--hp-radius-lg);
	background: var(--hp-paper-2);
}

.hp-sport__media { display: block; }
.hp-sport__media img { transition: transform .5s var(--hp-ease); filter: grayscale(.25); }
.hp-sport:hover .hp-sport__media img { transform: scale(1.06); filter: none; }

.hp-sport__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, .68), rgba(0, 0, 0, 0) 60%);
}

.hp-sport__name {
	position: absolute;
	left: 12px;
	right: 12px;
	bottom: 12px;
	color: #fff;
	font-size: .8125rem;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
}

/* ========================================================================
   7. Brand story
   ==================================================================== */
.hp-story__grid {
	display: grid;
	gap: clamp(28px, 5vw, 72px);
	align-items: center;
}

@media (min-width: 900px) {
	.hp-story__grid { grid-template-columns: 1fr 1fr; }
}

.hp-story__title { font-size: clamp(1.8rem, 3.6vw, 2.75rem); margin: 0 0 var(--hp-s4); }
.hp-story__text { color: var(--hp-mute); max-width: 48ch; font-size: 1.05rem; }

.hp-story__points {
	list-style: none;
	margin: var(--hp-s5) 0 var(--hp-s6);
	padding: 0;
	display: grid;
	gap: 12px;
}

.hp-story__points li { display: flex; gap: 12px; align-items: flex-start; font-size: .9375rem; }
.hp-story__points svg { flex: 0 0 auto; color: var(--hp-accent-text); margin-top: 2px; }

.hp-story__media { border-radius: var(--hp-radius-lg); }

/* ========================================================================
   8. Promo banner
   ==================================================================== */
.hp-promo {
	position: relative;
	isolation: isolate;
	display: grid;
	place-items: center;
	min-height: clamp(320px, 38vw, 480px);
	background: var(--hp-ink);
	color: #fff;
	text-align: center;
	overflow: hidden;
}

.hp-promo__media { position: absolute; inset: 0; z-index: -1; }
.hp-promo__media img { width: 100%; height: 100%; object-fit: cover; }
.hp-promo__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .48);
}

.hp-promo__inner { padding-block: clamp(48px, 7vw, 96px); }

.hp-promo__title {
	font-size: clamp(1.9rem, 5vw, 3.5rem);
	line-height: 1;
	margin: 0 0 var(--hp-s3);
	max-width: 18ch;
	margin-inline: auto;
}

.hp-promo__text { color: rgba(255, 255, 255, .85); margin-bottom: var(--hp-s6); }

/* ========================================================================
   9. Social grid
   ==================================================================== */
.hp-socialgrid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(6px, 1vw, 12px);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 900px) {
	.hp-socialgrid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

.hp-socialgrid .hp-ratio { display: block; border-radius: var(--hp-radius); overflow: hidden; }
.hp-socialgrid img { transition: transform .4s var(--hp-ease); }
.hp-socialgrid a:hover img { transform: scale(1.06); }

/* ========================================================================
   10. Newsletter box
   ==================================================================== */
.hp-newsbox {
	background: var(--hp-paper-2);
	padding: clamp(28px, 4vw, 56px);
	border-radius: var(--hp-radius-lg);
}

/* ========================================================================
   11. Homepage rhythm
   ==================================================================== */
.hp-sec + .hp-sec { padding-top: 0; }
.hp-sec--best { padding-bottom: var(--hp-sec-y); }
.hp-editorial + .hp-sec,
.hp-promo + .hp-sec { padding-top: var(--hp-sec-y); }