/**
 * Home styles.
 *
 * One commented block per section, in the same order as $sections in
 * template.php. Only design tokens from assets/css/tokens.css — no hardcoded
 * colours, font sizes, radii or shadows. See DESIGN.md.
 */

/* Escape Astra's content wrapper.
   `#content .ast-container` is a flex container capped at the Customizer's
   content width, which both narrows the page and — because <main> becomes a
   flex item — collapses it to its text width. The `qx-fullwidth` body class
   comes from inc/layout.php. Sections set their own max-width. */
.qx-fullwidth #content > .ast-container {
	display: block;
	max-width: 100%;
	padding-inline: 0;
}

.qx-home {
	width: 100%;
	min-width: 0;
	font-family: var(--qx-font-body);
	color: var(--qx-text);
}

/* Shared vertical rhythm. Both sides are wrapped in :where() so the rule sits
   at zero specificity and any section can opt out with a plain single-class
   rule (.qx-hero, .qx-app-mobile) regardless of stylesheet order — which
   matters now that the opt-outs live in assets/css/section-*.css, loaded
   before this file. */
:where(.qx-home) > :where(section) {
	padding-block: var(--qx-section-y);
}

/* ==========================================================================
   Hero — full-bleed clickable banner, sits directly under the header.
   Reference: smartfit.com.ar (wrapper max 1860px, 11px gutter, 16px radius).
   ========================================================================== */

.qx-hero {
	--qx-hero-max-w: 1860px;
	--qx-hero-gutter: 11px;
	--qx-hero-radius: 16px;

	/* Overrides the shared section rhythm: the banner hugs the header. */
	padding-block: 0;
}

.qx-hero__frame {
	width: 100%;
	max-width: var(--qx-hero-max-w);
	margin-inline: auto;
	padding: var(--qx-hero-gutter);
}

.qx-hero__link {
	display: block;
	overflow: hidden;
	border-radius: var(--qx-hero-radius);
	text-decoration: none;
}

.qx-hero__link:focus-visible {
	outline: 3px solid var(--qx-yellow);
	outline-offset: 3px;
}

.qx-hero img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1920 / 850;
	object-fit: cover;
}

/* Placeholder — a plain box at the artwork's aspect ratio, so dropping the
   images in later causes no layout shift. Self-removes once the variants in
   assets/img/hero/ exist (generated by scripts/make-hero.py). */

.qx-hero__placeholder {
	display: grid;
	place-items: center;
	background: var(--qx-gray-100);
	color: var(--qx-text-muted);
}

.qx-hero__placeholder--desktop {
	aspect-ratio: 1920 / 850;
}

.qx-hero__placeholder--mobile {
	display: none;
	aspect-ratio: 1080 / 1789;
}

/* Portrait artwork takes over here. 768px rather than the reference's 576px:
   the desktop piece is a 2.26:1 strip and its benefit chips are set very small,
   so on a tablet in portrait they stop being readable well before 576px.
   Mirrored in $qx_hero_mobile_media (pages/home/sections/hero.php). */
@media (max-width: 767.98px) {
	.qx-hero img {
		aspect-ratio: 1080 / 1789;
	}

	.qx-hero__placeholder--desktop {
		display: none;
	}

	.qx-hero__placeholder--mobile {
		display: grid;
	}
}

/* ==========================================================================
   Planes — moved to assets/css/section-planes.css.
   The sede pages render the same block (template-parts/section-planes.php),
   so its styles live in a shared stylesheet enqueued by both pages instead of
   being duplicated here. Nothing changed visually; the rules are verbatim.
   ========================================================================== */

/* ==========================================================================
   Experiencia Qivox — moved to assets/css/section-experiencia.css.
   The Franquicias page renders the same block
   (template-parts/section-experiencia.php) with its own heading and CTA, so
   its styles live in a shared stylesheet enqueued by both pages instead of
   being duplicated here. Nothing changed visually; the rules are verbatim.
   ========================================================================== */

/* ==========================================================================
   App Mobile — moved to assets/css/section-app-mobile.css.
   Same reason as Experiencia above: the Franquicias page renders the block
   too (template-parts/section-app-mobile.php). Rules are verbatim, including
   the white background from d1a18a3.
   ========================================================================== */

/* ==========================================================================
   Clase de prueba — closes the home, right under App Mobile. Same two-tone
   title pattern as Planes/Sedes/Experiencia, a centered 3-step list (yellow
   icon badge + uppercase step text), and a single yellow CTA out to the
   Tally booking form.

   Background is a gym photo (assets/img/clase-prueba-bg.jpg) under a heavy
   white overlay — set via the --qx-clase-prueba-bg local custom property
   (inlined per-section in clase-prueba.php, same reasoning as the App
   Mobile phone image: a one-off illustrative asset, not a design token).
   The overlay is a flat white wash rather than a gradient, so it reads as
   "white section with a faint photo texture," not a hero-style photo panel.
   ========================================================================== */

.qx-clase-prueba {
	position: relative;
	background-image: linear-gradient(rgb(255 255 255 / 0.88), rgb(255 255 255 / 0.88)), var(--qx-clase-prueba-bg);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.qx-clase-prueba__header {
	max-width: var(--qx-container-narrow);
	margin-inline: auto;
	margin-bottom: var(--qx-space-8);
	text-align: center;
}

.qx-clase-prueba__title {
	margin: 0;
	font-size: calc(var(--qx-fs-h2) * 0.82);
	line-height: var(--qx-lh-heading);
	letter-spacing: var(--qx-ls-heading);
	color: var(--qx-text);
}

.qx-clase-prueba__title-accent {
	color: var(--qx-yellow);
}

.qx-clase-prueba__steps {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--qx-space-6);
	max-width: 760px;
	margin: 0 auto var(--qx-space-8);
	padding: 0;
	list-style: none;
}

@media (min-width: 768px) {
	.qx-clase-prueba__steps {
		grid-template-columns: repeat(3, 1fr);
	}
}

.qx-clase-prueba__step {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--qx-space-3);
	text-align: center;
}

.qx-clase-prueba__step-badge {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 3rem;
	height: 3rem;
	background: var(--qx-yellow);
	border-radius: var(--qx-radius-pill);
}

.qx-clase-prueba__step-icon {
	width: 1.5rem;
	height: 1.5rem;
	stroke: var(--qx-ink);
}

.qx-clase-prueba__step-text {
	font-size: var(--qx-fs-body);
	font-weight: var(--qx-fw-bold);
	letter-spacing: var(--qx-ls-heading);
	text-transform: uppercase;
	color: var(--qx-text);
}

.qx-clase-prueba__cta-row {
	display: flex;
	justify-content: center;
}

/* Same footprint as .qx-planes__cta / .qx-experiencia__cta. */
.qx-clase-prueba__cta {
	width: min(100%, 380px);
	font-size: var(--qx-fs-body);
}

/* ==========================================================================
   Solicitud de baja — closes the home, right under Clase de prueba. Same
   two-tone title pattern as the sections above it, then a bold lead line,
   a short paragraph and a single yellow CTA out to the Tally cancellation
   form. Background is the off-white alternated tone (same var(--qx-bg-alt)
   as Sedes) per request: "opaque white," not stark white.
   ========================================================================== */

.qx-baja {
	background: var(--qx-bg-alt);
}

.qx-baja__inner {
	text-align: center;
}

.qx-baja__header {
	margin-bottom: var(--qx-space-5);
}

.qx-baja__title {
	margin: 0 0 var(--qx-space-3);
	font-size: calc(var(--qx-fs-h2) * 0.82);
	line-height: var(--qx-lh-heading);
	letter-spacing: var(--qx-ls-heading);
	color: var(--qx-text);
}

.qx-baja__title-accent {
	color: var(--qx-yellow);
}

.qx-baja__lead {
	margin: 0;
	font-size: var(--qx-fs-lead);
	font-weight: var(--qx-fw-bold);
	line-height: var(--qx-lh-snug);
	color: var(--qx-text);
}

.qx-baja__text {
	margin: 0 0 var(--qx-space-7);
	font-size: var(--qx-fs-body);
	line-height: var(--qx-lh-body);
	color: var(--qx-text-muted);
}

.qx-baja__cta-row {
	display: flex;
	justify-content: center;
}

/* Same footprint as .qx-planes__cta / .qx-experiencia__cta / .qx-clase-prueba__cta. */
.qx-baja__cta {
	width: min(100%, 380px);
	font-size: var(--qx-fs-body);
}