/* =========================================================================
   Voley PLT — homepage
   Hero · ticker · categories · products
   ========================================================================= */

/* Hero -------------------------------------------------------------------- */
/* The hero is the poster and nothing else: the artwork carries its own
   headline, so there is no overlay copy and no scrim to darken it for.
   ------------------------------------------------------------------------
   The box is cut to the poster's own shape rather than to a slice of the
   viewport. A fixed `min-height: 90vh` gave the hero whatever ratio the window
   happened to have — 1.48 on a 1024x768 screen against the poster's 1.78 — and
   `cover` then took the difference off the sides, which is exactly where these
   posters put their headline. Matching the ratio means nothing is ever cropped.

   Both values track the artwork: 1672x941 landscape, 941x1672 portrait. New
   posters at a different ratio need these updated to match. */
.voley-hero {
	/* How far the slide dots sit in from the corner. */
	--v-hero-nav-inset: 28px;
	position: relative;
	aspect-ratio: 1672 / 941;
	background: var(--v-ink-2);
	overflow: hidden;
}

/* Below this the <picture> in page-home.php swaps to the portrait poster, so
   the box has to turn with it — the two breakpoints must stay in step. */
@media (max-width: 767px) {
	.voley-hero {
		aspect-ratio: 941 / 1672;
	}
}

.voley-hero__bg {
	position: absolute;
	inset: 0;
}

.voley-hero__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 0.9s var(--v-ease);
}

.voley-hero__slide.is-active {
	opacity: 1;
}

/* A slide with phone artwork wraps its image in <picture>, which is an inline
   box of its own height — the image inside would measure 100% against nothing
   and collapse. `display: contents` takes the wrapper out of layout so the
   image still sizes against the slide. */
.voley-hero__bg picture {
	display: contents;
}

/* Centred, not offset: the artwork is a poster now, so whatever has to survive
   the crop was composed in the middle of it. */
.voley-root .voley-hero__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
}

/* Hero nav (dots) ---------------------------------------------------------- */
.voley-hero__nav {
	position: absolute;
	z-index: 2;
	left: 50%;
	transform: translateX(-50%);
	bottom: var(--v-hero-nav-inset);
	justify-content: center;
	display: flex;
	align-items: center;
	gap: 14px;
}

.voley-hero__dots {
	display: flex;
	align-items: center;
	gap: 8px;
}

.voley-hero__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.4);
	transition: background-color 0.25s var(--v-ease), transform 0.25s var(--v-ease);
}

.voley-hero__dot:hover {
	background: rgba(255, 255, 255, 0.7);
}

.voley-hero__dot.is-active {
	background: var(--v-white);
	transform: scale(1.2);
}


/* Announcement ticker ----------------------------------------------------- */
.voley-ticker {
	display: flex;
	align-items: center;
	height: 48px;
	background: var(--v-ink);
	color: var(--v-white);
	overflow: hidden;
}

.voley-ticker__viewport {
	display: flex;
	width: max-content;
	animation: voley-marquee 42s linear infinite;
}

.voley-ticker:hover .voley-ticker__viewport {
	animation-play-state: paused;
}

.voley-ticker__track {
	display: flex;
	align-items: center;
}

.voley-ticker__track li {
	display: flex;
	align-items: center;
	gap: 16px;
	padding-right: 30px;
	font-size: var(--v-fs-xs);
	font-weight: 600;
	letter-spacing: 0.14em;
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
	color: rgba(255, 255, 255, 0.88);
}

.voley-ticker__track li + li {
	padding-left: 0;
}

.voley-bolt {
	flex: none;
	width: 14px;
	height: 14px;
}

@keyframes voley-marquee {
	to {
		transform: translateX(-50%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.voley-ticker__viewport {
		animation: none;
	}
}

/* Categories -------------------------------------------------------------- */
.voley-cats {
	border-bottom: 1px solid var(--v-line-soft);
}

.voley-cats__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--v-gap);
}

.voley-cat {
	position: relative;
	display: block;
	/* Two across, so each card is wide — a squarer ratio here would make the
	   section over 550px tall for two tiles. */
	aspect-ratio: 1 / 0.62;
	border-radius: var(--v-r-card);
	background: var(--v-grey-100);
	overflow: hidden;
	isolation: isolate;
}

.voley-cat__media {
	position: absolute;
	inset: 0;
}

.voley-root .voley-cat__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.7s var(--v-ease);
}

.voley-cat::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.84) 0%, rgba(0, 0, 0, 0.4) 40%, rgba(0, 0, 0, 0) 72%);
}

.voley-cat:hover .voley-root .voley-cat__media img {
	transform: scale(1.05);
}

.voley-cat__body {
	position: absolute;
	inset: auto 0 0;
	z-index: 1;
	padding: 24px 26px 26px;
	color: var(--v-white);
}

/* Explicit + double-scoped: it sits on the dark photo overlay and must win
   over the light-bg default in base.css (and any theme/page-builder h3 color). */
.voley-root.voley-root .voley-cat__title {
	font-family: var(--v-font-display);
	font-size: var(--v-fs-h3);
	font-style: italic;
	font-weight: 800;
	letter-spacing: -0.005em;
	text-transform: uppercase;
	margin-bottom: 6px;
	color: var(--v-white);
}

.voley-cat__text {
	max-width: 30ch;
	font-size: var(--v-fs-sm);
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.74);
}

.voley-cat__arrow {
	position: absolute;
	top: 18px;
	right: 18px;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.14);
	backdrop-filter: blur(6px);
	color: var(--v-white);
	transition: background-color 0.3s var(--v-ease), transform 0.3s var(--v-ease);
}

.voley-cat:hover .voley-cat__arrow {
	background: var(--v-accent);
	transform: translate(2px, -2px);
}

/* Product grid -------------------------------------------------------------
   The .voley-product tile itself lives in base.css; this is only the container
   — a plain grid, so every product is on screen at once however many there are. */
.voley-pgrid__items {
	display: grid;
	grid-template-columns: repeat(var(--v-grid-cols, 4), minmax(0, 1fr));
	gap: 34px var(--v-gap);
}

/* About ------------------------------------------------------------------- */
.voley-about {
	display: grid;
	grid-template-columns: 3fr 2fr;
	gap: 70px;
	align-items: center;
}

.voley-about__visual {
	position: relative;
	padding: 0 0 108px 52px;
}

.voley-about__side {
	position: absolute;
	left: 24%;
	top: 4px;
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	font-family: var(--v-font-display);
	font-size: var(--v-fs-h3);
	font-style: italic;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--v-ink);
}

.voley-about__main {
	position: relative;
	z-index: 2;
	width: 76%;
	margin-left: auto;
	overflow: hidden;
	aspect-ratio: 1 / 0.7;
	border-radius: var(--v-r-card);
	background: var(--v-grey-100);
}

.voley-root .voley-about__main img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.voley-about__sub {
	position: absolute;
	z-index: 1;
	left: 10px;
	bottom: 34px;
	width: 47%;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--v-r-card);
	background: var(--v-grey-100);
}

.voley-root .voley-about__sub img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.voley-about__tag {
	position: absolute;
	right: 0;
	bottom: 60px;
	width: 46%;
	text-align: right;
}

.voley-root.voley-root .voley-about__tag h3 {
	color: var(--v-ink);
	font-family: var(--v-font-display);
	font-size: var(--v-fs-h3);
	font-style: italic;
	font-weight: 800;
	letter-spacing: -0.012em;
	text-transform: uppercase;
	margin-bottom: 6px;
}

.voley-about__tag p {
	font-size: var(--v-fs-sm);
	line-height: 1.55;
	color: var(--v-grey-600);
}

.voley-about__body .voley-h2 {
	margin-bottom: 14px;
}

.voley-about__body .voley-sub {
	margin-bottom: 26px;
}

.voley-about__body .voley-checks {
	margin-bottom: 32px;
}

/* Responsive -------------------------------------------------------------- */
@media (max-width: 1180px) {
	.voley-about {
			gap: 48px;
		}

	.voley-pgrid__items {
		--v-grid-cols: 3;
	}
}

@media (max-width: 1000px) {
	.voley-about {
			grid-template-columns: 1fr;
			gap: 44px;
		}

	.voley-about__visual {
			padding-bottom: 86px;
		}

	.voley-about__tag {
			width: 52%;
		}

	/* Two cards already sit side by side here — the old rule that let the first
	   card span the row was written for a three-card grid and would leave a
	   half-width orphan beside it. */
	.voley-cat:first-child {
		grid-column: auto;
	}

	.voley-cat {
		aspect-ratio: 1 / 0.78;
	}
}

@media (max-width: 900px) {
	.voley-pgrid__items {
		--v-grid-cols: 2;
	}
}

@media (max-width: 640px) {
	/*
		 * On a phone the collage becomes a stack, and a stack only reads as one if
		 * the photos share a left edge. The main photo kept its desktop
		 * `width: 76%; margin-left: auto`, which held it 76px clear of the photo
		 * below it and left a column of dead white space beside it — the two
		 * pictures looked like a mistake rather than a pair. Full width from the
		 * same edge fixes both, and the rotated label moves into the 34px strip
		 * that the padding already reserves for it rather than floating in the gap
		 * it used to leave behind.
		 */
		.voley-about__visual {
			padding: 0 0 0 34px;
		}

	.voley-about__main {
			width: 100%;
			margin-left: 0;
		}

	.voley-about__sub {
			position: relative;
			left: auto;
			bottom: auto;
			width: 100%;
			margin-top: 16px;
			aspect-ratio: 16 / 9;
			box-shadow: none;
		}

	.voley-about__tag {
			position: static;
			width: 100%;
			margin-top: 24px;
			text-align: left;
		}

	.voley-about__side {
			left: 0;
			top: 0;
			font-size: var(--v-fs-body);
		}

	/*
	 * A fixed 54px was less than the nav occupies, so the wrapped action row
	 * landed on top of it. Deriving the padding from the nav's own footprint
	 * makes that impossible: whatever the controls need, the copy clears it.
	 * Their inset also comes back to the container's 20px gutter, so they line
	 * up with everything else on the screen instead of sitting 32px in from an
	 * edge nothing else respects.
	 */
	.voley-hero {
		--v-hero-nav-inset: 20px;
	}


	.voley-ticker {
		height: 42px;
	}

	.voley-cats__grid {
		grid-template-columns: 1fr;
	}

	.voley-cat,
	.voley-cat:first-child {
		grid-column: auto;
		aspect-ratio: 1 / 0.72;
	}

	/* Two across, not one — product tiles stay legible at half a phone width
	   and the section does not turn into an endless column. */
	.voley-pgrid__items {
		--v-grid-cols: 2;
		gap: 26px 12px;
	}
}

/* Load more ---------------------------------------------------------------- */
.voley-more-item {
	display: contents;
}

/* Hidden only once the script is running, so without it every card shows. */
.voley-home-root.js .voley-more-item.is-more {
	display: none;
}

.voley-more-item.is-revealed > .voley-product {
	animation: voley-more-in 0.45s var(--v-ease) both;
}

@keyframes voley-more-in {
	from {
		opacity: 0;
		transform: translateY(14px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

.voley-home-more {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	margin-top: 48px;
}

.voley-home-root:not(.js) .voley-home-more {
	display: none;
}

.voley-root .voley-home-more__count {
	margin: 0;
	font-size: var(--v-fs-sm);
	color: var(--v-grey-500);
}

/* Only the visible slide takes clicks — the faded ones sit on top of it. */
.voley-hero__slide {
	pointer-events: none;
}

.voley-hero__slide.is-active {
	pointer-events: auto;
}