/**
 * Términos y condiciones 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. 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-terms-page {
	width: 100%;
	min-width: 0;
	font-family: var(--qx-font-body);
	color: var(--qx-text);
}

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

/* ==========================================================================
   Intro — page H1 + brand line. Centred header, two-tone title: same
   treatment as .qx-baja__title / .qx-branches-search__header.
   ========================================================================== */

/* Half the shared rhythm above, none below: the gap down to the document list
   is owned by .qx-terms-docs so the two paddings can't stack. Same split as
   .qx-branches-search on the Sedes page. */
.qx-terms-intro {
	padding-block: calc(var(--qx-section-y) / 2) 0;
}

.qx-terms-intro__header {
	text-align: center;
}

.qx-terms-intro__title {
	margin: 0 0 var(--qx-space-3);
	font-size: var(--qx-fs-h1);
	line-height: var(--qx-lh-heading);
	letter-spacing: var(--qx-ls-heading);
	color: var(--qx-text);
}

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

.qx-terms-intro__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-muted);
}

/* ==========================================================================
   Documentos — grid of hairline-separated cells, per the reference the client
   passed: page-outline glyph on the left; title in caps, "Conoce más" and the
   ".pdf – 125kb" weight on the right. No cards, no shadows, no radius — the
   only thing drawing structure is the 1px rule between cells.
   ========================================================================== */

/* Fixed gap under the header, full --qx-section-y below, where the footer
   actually needs the separation. Same convention as .qx-branches-list. */
.qx-terms-docs {
	padding-block: var(--qx-space-7) var(--qx-section-y);
}

/* The grid draws only the top and left rules; each cell draws its own right and
   bottom (below). That is what closes the frame without a `gap` + background
   sandwich: with 5 documents in 3 columns the last row is short, and a
   background showing through the gaps would paint the empty slot as a solid
   border-coloured block. This way an empty slot simply draws nothing. */
.qx-terms-docs__list {
	display: grid;
	grid-template-columns: 1fr;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--qx-border);
	border-left: 1px solid var(--qx-border);
	list-style: none;
}

.qx-terms-docs__item {
	border-right: 1px solid var(--qx-border);
	border-bottom: 1px solid var(--qx-border);
}

/* The whole cell is the link, so it has to fill the grid cell — rows are
   stretched to the tallest cell and a short one would otherwise leave a strip
   that doesn't respond to the pointer. */
.qx-terms-docs__link {
	display: flex;
	align-items: center;
	gap: var(--qx-space-5);
	height: 100%;
	padding: var(--qx-space-7) var(--qx-space-6);
	text-decoration: none;
	transition: background-color var(--qx-dur-fast) var(--qx-ease);
}

.qx-terms-docs__link:hover,
.qx-terms-docs__link:focus-visible {
	background: var(--qx-bg-alt);
}

/* Thin gray page outline, like the reference — not the ink/yellow badge used
   elsewhere on the site. It is decorative (aria-hidden, the title carries the
   meaning), so the light stroke doesn't owe the 3:1 icon contrast floor. */
.qx-terms-docs__icon {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	/* The glyph is drawn inset in its 24×24 box (the page is 15×19 of it), so the
	   box has to run bigger than the visible mark to match the reference, where
	   the icon reads about as tall as three lines of the title. */
	width: 68px;
	height: 68px;
	color: var(--qx-gray-300);
	transition: color var(--qx-dur-fast) var(--qx-ease);
}

.qx-terms-docs__link:hover .qx-terms-docs__icon,
.qx-terms-docs__link:focus-visible .qx-terms-docs__icon {
	color: var(--qx-text-muted);
}

.qx-terms-docs__icon svg {
	width: 100%;
	height: 100%;
	stroke: currentColor;
	fill: none;
}

/* `flex-basis: 0` instead of `auto`: flex sizing looks at the item's content
   width, so with `auto` a long title asked for more room than the cell had and
   squeezed the glyph. At basis 0 the text claims whatever is left and wraps
   inside its own column, so every cell has the same anatomy. */
.qx-terms-docs__body {
	flex: 1 1 0;
	min-width: 0;
}

/* Caps, like the reference. The transform lives here and not in the PHP so the
   strings stay readable and translatable. Uppercase Graphik needs the negative
   heading tracking removed — at these sizes it closes the caps up too much. */
.qx-terms-docs__title {
	margin: 0 0 var(--qx-space-3);
	font-size: var(--qx-fs-body);
	font-weight: var(--qx-fw-bold);
	line-height: var(--qx-lh-snug);
	letter-spacing: normal;
	text-transform: uppercase;
	color: var(--qx-text);
}

/* The reference's "CONOCE MÁS": muted, in caps, tracked. It is not a link of
   its own — the cell is — so it carries no underline at rest and picks one up
   with the rest of the cell on hover. */
.qx-terms-docs__cta {
	display: block;
	font-size: var(--qx-fs-eyebrow);
	font-weight: var(--qx-fw-medium);
	line-height: var(--qx-lh-snug);
	letter-spacing: var(--qx-ls-eyebrow);
	text-transform: uppercase;
	color: var(--qx-text-muted);
	transition: color var(--qx-dur-fast) var(--qx-ease);
}

.qx-terms-docs__link:hover .qx-terms-docs__cta,
.qx-terms-docs__link:focus-visible .qx-terms-docs__cta {
	color: var(--qx-text);
	text-decoration: underline;
}

/* File type + weight, the reference's ".pdf – 125kb" caption. */
.qx-terms-docs__meta {
	display: block;
	font-size: var(--qx-fs-small);
	line-height: var(--qx-lh-snug);
	color: var(--qx-text-muted);
}

@media (min-width: 768px) {
	.qx-terms-docs__list {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.qx-terms-docs__list {
		grid-template-columns: repeat(3, 1fr);
	}
}