/* ==========================================================================
   Inicio a pantalla completa: one block per screen, the page settles on the
   nearest block, and each block's content rises in softly when it arrives.
   Loaded only on the home page (includes/home-snap.php).
   ========================================================================== */

/* The page scrolls freely and only settles on a block when you stop near
   one, so it never feels pulled. */
html {
	scroll-snap-type: y proximity;
	scroll-padding-top: 0;
	scroll-behavior: smooth;
}

body.home {
	--snap-h: 100vh;
}
@supports (height: 100svh) {
	body.home {
		--snap-h: 100svh;
	}
}
/* Logged in: the black WordPress bar takes 32px off the top. */
@media (min-width: 783px) {
	html:has(body.admin-bar) {
		scroll-padding-top: 32px;
	}
	body.home.admin-bar {
		--snap-h: calc(100vh - 32px);
	}
	@supports (height: 100svh) {
		body.home.admin-bar {
			--snap-h: calc(100svh - 32px);
		}
	}
}

body.home .site-main {
	padding-bottom: 0;
}

/* Every block fills the window and is a place the page can stop. */
body.home .lead-hero,
body.home .lead-intro,
body.home .home-hero,
body.home .home-cta,
body.home .home-more {
	box-sizing: border-box;
	min-height: var(--snap-h);
	margin-top: 0;
	margin-bottom: 0;
	scroll-snap-align: start;
}
body.home .site-footer {
	scroll-snap-align: end;
}

/* 1. Video */
body.home .lead-hero {
	min-height: var(--snap-h);
}

/* 2. Cifras y presentación: centred in the window, under the header. */
body.home .lead-intro {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-top: calc(var(--header-h) + 32px);
	padding-bottom: 48px;
}
body.home .lead-stats {
	margin-bottom: clamp(32px, 6vh, 64px);
}
body.home .lead-intro__text {
	font-size: clamp(1.05rem, 1.5vw, 1.3rem);
}

/* 3. Novedades: heading at the top, the release in the middle, dots at the bottom.
   All the releases share the same place (the hidden ones are only invisible),
   so the block is as tall as the tallest one: the cover, the arrows and the
   dots stay put from one release to the next. */
body.home .home-hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: auto 1fr auto;
	padding: calc(var(--header-h) + 20px) 0 28px;
}
body.home .home-hero__head {
	grid-row: 1;
	width: 100%;
}
body.home .home-hero__slide,
body.home .home-hero__slide[hidden] {
	display: flex;
	grid-area: 2 / 1;
	align-items: center;
	padding-top: clamp(12px, 3vh, 32px);
	padding-bottom: clamp(12px, 3vh, 32px);
}
body.home .home-hero__slide[hidden] {
	visibility: hidden;
}
body.home .home-hero__inner {
	width: 100%;
}
/* The cover never pushes the block past the bottom of the window. */
body.home .home-hero__cover {
	width: min(74%, 54vh);
	justify-self: center;
}
body.home .home-hero__controls {
	grid-row: 3;
	margin-top: clamp(12px, 2.4vh, 24px);
}
@media (max-width: 860px) {
	/* Phones: each release starts at the top, so the cover never moves up or down. */
	body.home .home-hero__slide,
	body.home .home-hero__slide[hidden] {
		align-items: flex-start;
	}
	/* Between the side arrows. */
	body.home .home-hero__cover {
		width: min(100%, 36vh);
	}
}

/* Wide screens: the release fits the window's height, so the arrows and dots
   always have room at the bottom. Type and spacing follow the height (vh) as
   well as the width, and on shorter windows the semblanza shows fewer lines
   before "Leer más" (the artists, two at most). */
@media (min-width: 861px) {
	body.home .home-hero {
		padding-bottom: clamp(20px, 4vh, 40px);
	}
	body.home .home-hero__head {
		padding-bottom: clamp(10px, 1.8vh, 18px);
	}
	body.home .home-hero__heading {
		font-size: min(clamp(2.4rem, 5vw, 4rem), 7vh);
	}
	body.home .home-hero__slide,
	body.home .home-hero__slide[hidden] {
		padding-top: clamp(8px, 2vh, 24px);
		padding-bottom: clamp(8px, 2vh, 24px);
	}
	body.home .home-hero__cover {
		width: min(74%, 52vh);
	}
	body.home .home-hero__info .eyebrow {
		margin-bottom: clamp(4px, 1.2vh, 12px);
	}
	body.home .home-hero__title {
		margin: clamp(4px, .8vh, 8px) 0 clamp(8px, 1.6vh, 16px);
		font-size: min(clamp(2rem, 4vw, 3.4rem), 5.4vh);
	}
	body.home .home-hero__artists {
		display: -webkit-box;
		margin-bottom: clamp(12px, 2.6vh, 28px);
		overflow: hidden;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		font-size: min(1.05rem, 2.1vh);
	}
	body.home .home-hero__text {
		margin-bottom: clamp(16px, 3vh, 28px);
	}
	body.home .home-hero__more {
		margin-bottom: clamp(14px, 2.6vh, 26px);
	}
	body.home .home-hero__see {
		padding-top: clamp(10px, 1.6vh, 14px);
		padding-bottom: clamp(10px, 1.6vh, 14px);
	}
}
@media (min-width: 861px) and (max-height: 900px) {
	body.home [data-home-slider].can-cut .home-hero__text:not(.is-open) {
		max-height: calc(1.7em * 4);
	}
}
@media (min-width: 861px) and (max-height: 760px) {
	body.home [data-home-slider].can-cut .home-hero__text:not(.is-open) {
		max-height: calc(1.7em * 3);
	}
}

/* 4. Catálogo: under the header, the text and the wall of covers fill the
   window; the wall stretches to the block's full height. */
body.home .home-cta {
	padding-top: calc(var(--header-h) + 24px);
	padding-bottom: 24px;
}
@media (max-width: 860px) {
	body.home .home-cta {
		align-content: center;
	}
}

/* 5. Más allá del disco (Destacados): its heading under the header, and the
   panels take the rest of the window. */
body.home .home-more {
	display: flex;
	flex-direction: column;
	height: var(--snap-h);
	padding-top: calc(var(--header-h) + 20px);
}
body.home .home-more .home-accordion {
	flex: 1 1 auto;
	height: auto;
	min-height: 0;
}
@media (max-width: 760px) {
	body.home .home-more {
		height: auto;
		justify-content: center;
	}
}

/* Soft rise when a block comes into view (only once the script is running). */
html.urtext-snap-reveal body.home :is(.lead-hero__inner, .lead-stats > div, .lead-intro__text, .home-hero__head, .home-hero__slide:not([hidden]), .home-hero__controls, .home-cta__text > *, .home-cta__wall, .home-accordion__item) {
	opacity: 0;
}
html.urtext-snap-reveal body.home .is-in :is(.lead-hero__inner, .lead-stats > div, .lead-intro__text, .home-hero__head, .home-hero__slide:not([hidden]), .home-hero__controls, .home-cta__text > *, .home-cta__wall, .home-accordion__item) {
	animation: urtext-snap-rise 1.2s cubic-bezier(.16, 1, .3, 1) both;
	animation-delay: calc(var(--snap-i, 0) * 70ms);
}
@keyframes urtext-snap-rise {
	from {
		opacity: 0;
		translate: 0 16px;
	}
	to {
		opacity: 1;
		translate: none;
	}
}

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