/**
 * Actividades 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.
 *
 * The Plan Black card is not styled from scratch here: it renders the shared
 * block, so it arrives fully dressed from assets/css/section-planes.css
 * (enqueued by page-actividades.php before this file). What this page adds is
 * only what changes when that block moves inside a dark hero column instead of
 * standing alone on white.
 */

/* Escape Astra's content wrapper. Same fix as pages/home/style.css — see that
   file's comment for why; duplicated here because each page's stylesheet only
   loads on its own page (qivox_enqueue_page_assets). */
.qx-fullwidth #content > .ast-container {
	display: block;
	max-width: 100%;
	padding-inline: 0;
}

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

/* Shared vertical rhythm, same convention as .qx-home / .qx-franquicias. */
:where(.qx-actividades) > :where(section) {
	padding-block: var(--qx-section-y);
}

/* ==========================================================================
   Hero — one dark band with the page copy centred in it.

   It used to run two columns, the copy beside the Plan Black card; the plan
   came out of this page, so the copy is now a single centred column at every
   width. It is capped at 46rem rather than left to fill the container: three
   short lines of intro stretched across a 1200px band read as a paragraph of
   body text, not as a page opening.

   Same dark surface as the Trabajá con nosotros franja, so the "title band"
   pages read as one family. The band's height comes from its padding, not a
   fixed min-height.
   ========================================================================== */

.qx-act-hero {
	padding-block: clamp(3.5rem, 2rem + 6vw, 6rem);
	background: var(--qx-bg-dark);
}

.qx-act-hero__inner {
	display: grid;
	justify-items: center;
	text-align: center;
}

.qx-act-hero__copy {
	max-width: 46rem;
}

.qx-act-hero__title {
	margin: 0 0 var(--qx-space-4);
	font-size: var(--qx-fs-h1);
	font-weight: var(--qx-fw-bold);
	line-height: var(--qx-lh-heading);
	letter-spacing: var(--qx-ls-heading);
	text-transform: uppercase;
	color: var(--qx-text-on-dark);
}

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

.qx-act-hero__lead {
	margin: 0 0 var(--qx-space-4);
	font-family: var(--qx-font);
	font-size: var(--qx-fs-h4);
	font-weight: var(--qx-fw-medium);
	line-height: var(--qx-lh-snug);
	color: var(--qx-yellow);
}

.qx-act-hero__text {
	margin: 0 auto;
	max-width: 56ch;
	font-size: var(--qx-fs-lead);
	line-height: var(--qx-lh-body);
	color: var(--qx-text-muted-on-dark);
}

.qx-act-hero__cta-row {
	margin-top: var(--qx-space-6);
}

/* ==========================================================================
   Nuestras actividades — the nine disciplines, off-white band so the section
   separates from the hero above without a rule.

   Three columns from the desktop breakpoint, two on tablet, one on a phone.
   The cards are equal height by grid, not by a fixed one: the descriptions
   run from two to five lines and a fixed height would either clip Combat or
   leave a hole under Boxeo.
   ========================================================================== */

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

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

.qx-act-listado__title {
	margin: 0 0 var(--qx-space-3);
	/* Same step down from the section heading as .qx-planes__title. */
	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-act-listado__title-accent {
	color: var(--qx-yellow);
}

.qx-act-listado__subtitle {
	margin: 0;
	font-size: var(--qx-fs-lead);
	line-height: var(--qx-lh-snug);
	color: var(--qx-text-muted);
}

.qx-act-listado__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--qx-space-5);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 640px) {
	.qx-act-listado__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.qx-act-listado__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.qx-act-card {
	display: flex;
	flex-direction: column;
	padding: var(--qx-space-6);
	background: var(--qx-bg);
	border: 1px solid var(--qx-border);
	border-radius: var(--qx-radius-lg);
	box-shadow: var(--qx-shadow-sm);
	transition: transform var(--qx-dur) var(--qx-ease), box-shadow var(--qx-dur) var(--qx-ease);
}

.qx-act-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--qx-shadow);
}

/* Discipline pictogram: the art is a PNG silhouette used as a mask, so the
   glyph takes --qx-yellow from the token instead of the muted gold baked into
   the file. The URL arrives per card as --qx-act-card-icon (inlined in
   listado.php), same convention as the Clase de prueba background on Home.

   Yellow on the dark disc, not a yellow disc: at nine cards a solid #FFBD00
   surface would compete with the CTA buttons. See DESIGN.md §2 — yellow as a
   surface is reserved for actions. */
/* The disc is this element's background; the glyph is its ::before, because a
   mask on the element itself would cut the disc out too. Same 3rem-ish
   footprint as the Clase de prueba step badges on Home. */
.qx-act-card__badge {
	display: block;
	flex: 0 0 auto;
	box-sizing: border-box;
	width: 3.25rem;
	height: 3.25rem;
	margin-bottom: var(--qx-space-4);
	padding: var(--qx-space-3);
	background: var(--qx-ink);
	border-radius: var(--qx-radius-pill);
}

.qx-act-card__badge::before {
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	background: var(--qx-yellow);
	-webkit-mask-image: var(--qx-act-card-icon);
	mask-image: var(--qx-act-card-icon);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.qx-act-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--qx-space-2) var(--qx-space-3);
	margin-bottom: var(--qx-space-4);
}

/* Yellow tint, not the brand yellow itself — same reasoning as the badge. */
.qx-act-card__tag {
	padding: var(--qx-space-1) var(--qx-space-3);
	background: var(--qx-yellow-100);
	border-radius: var(--qx-radius-pill);
	font-size: var(--qx-fs-small);
	font-weight: var(--qx-fw-semibold);
	line-height: var(--qx-lh-snug);
	color: var(--qx-ink);
}

.qx-act-card__level {
	font-size: var(--qx-fs-small);
	color: var(--qx-text-muted);
}

.qx-act-card__name {
	margin: 0 0 var(--qx-space-3);
	font-size: var(--qx-fs-h4);
	line-height: var(--qx-lh-heading);
	color: var(--qx-text);
}

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

/* ==========================================================================
   Cierre — dark band over a gym photo, one CTA. Mirrors the hero on purpose:
   the page opens and closes on the same dark surface with the same button, so
   the grid of activities sits between two identical invitations.

   The photo arrives as --qx-act-cta-bg (inlined in cta.php) and only when the
   file is actually there; .qx-act-cta keeps its flat dark background, so a
   missing image costs the texture, never the legibility of the copy.

   0.82 on the wash is the lowest this photo takes while --qx-text-muted-on-dark
   (#B3B3B3) stays above 4.5:1 over the brightest part of the image.
   ========================================================================== */

.qx-act-cta {
	background-color: var(--qx-bg-dark);
}

.qx-act-cta--photo {
	background-image: linear-gradient(rgb(10 10 10 / 0.82), rgb(10 10 10 / 0.82)), var(--qx-act-cta-bg);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.qx-act-cta__inner {
	text-align: center;
}

.qx-act-cta__title {
	margin: 0 0 var(--qx-space-4);
	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-on-dark);
}

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

.qx-act-cta__text {
	margin: 0 auto;
	max-width: 62ch;
	font-size: var(--qx-fs-lead);
	line-height: var(--qx-lh-body);
	color: var(--qx-text-muted-on-dark);
}

.qx-act-cta__cta-row {
	margin-top: var(--qx-space-6);
}