/**
 * Individual sede styles — shared by every sede page.
 *
 * 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.
 *
 * Planes is not styled here: it shares assets/css/section-planes.css with the
 * home page, enqueued by page-sede.php before this file.
 */

/* 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;
}

/* CPT single can still get Astra "blog" wrappers; neutralize like plain pages. */
.qx-fullwidth.single-sede #content,
.qx-fullwidth.single-sede #primary,
.qx-fullwidth.single-sede .site-content,
.qx-fullwidth.single-sede .ast-article-single,
.qx-fullwidth.single-sede .entry-content {
	margin: 0 !important;
	padding: 0 !important;
	max-width: none !important;
	width: 100% !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}

.qx-fullwidth.single-sede .entry-header,
.qx-fullwidth.single-sede .post-navigation,
.qx-fullwidth.single-sede .ast-single-post-order {
	display: none !important;
}

.qx-sede {
	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-sede > :where(section) {
	padding-block: var(--qx-section-y);
}

/* ==========================================================================
   Info — photo carousel beside the location / opening-hours panels.
   Dark section: it carries the page's H1 and matches the reference design for
   these two panels (yellow icon badge, uppercase title, faint row rules).
   ========================================================================== */

.qx-sede-info {
	background: var(--qx-bg-dark);
	color: var(--qx-text-on-dark);
}

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

/* Same footprint as the other section titles (.qx-planes__title et al). */
.qx-sede-info__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-on-dark);
}

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

.qx-sede-info__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--qx-space-6);
	align-items: start;
}

/* Two columns from `lg` up. The carousel gets the wider track so the photos
   stay readable next to the text panels. minmax(0, …) stops the flex track
   inside the carousel from blowing the column out. */
@media (min-width: 1024px) {
	.qx-sede-info__grid {
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
		gap: var(--qx-space-7);
	}

	.qx-sede-info__grid--no-gallery {
		grid-template-columns: 1fr;
		max-width: 920px;
		margin-inline: auto;
	}

	.qx-sede-info__grid--no-gallery .qx-sede-info__data {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--qx-space-6);
		align-items: stretch;
	}
}

@media (min-width: 640px) and (max-width: 1023.98px) {
	.qx-sede-info__grid--no-gallery .qx-sede-info__data {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--qx-space-5);
		align-items: stretch;
	}
}

/* --------------------------------------------------------------------------
   Carousel — scroll-snap based on purpose: touch swipe comes free, and with
   JS unavailable the viewport is still scrollable instead of dead. The arrows
   and dots in pages/sede/script.js only drive scrollLeft.
   -------------------------------------------------------------------------- */

.qx-carousel {
	position: relative;
	min-width: 0;
}

/* The viewport is the scroll container and must stay a block: the track below
   is the flex row, and its slides are sized against the viewport's width. */
.qx-carousel__viewport {
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	border-radius: var(--qx-radius-lg);
	/* Hide the scrollbar: the dots already communicate position. */
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.qx-carousel__viewport::-webkit-scrollbar {
	display: none;
}

.qx-carousel__track {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* flex-shrink 0 is what makes the slides overflow the track and give the
   viewport something to scroll. */
.qx-carousel__slide {
	flex: 0 0 100%;
	scroll-snap-align: start;
}

.qx-carousel__slide img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* Placeholder — self-removes per photo once its file exists in
   assets/img/sedes/{slug}/. */
.qx-carousel__placeholder {
	display: grid;
	place-items: center;
	aspect-ratio: 4 / 3;
	background: var(--qx-ink-800);
	color: var(--qx-text-muted-on-dark);
	font-size: var(--qx-fs-small);
}

/* Arrows and dots are bare <button>s, so Astra's core button styles load
   after this file and tie on specificity. `!important` is the same escape
   hatch already used by .qx-sede__lightbox-close below. */
.qx-carousel__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: grid !important;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0 !important;
	border: 0 !important;
	border-radius: var(--qx-radius-pill) !important;
	background: var(--qx-ink) !important;
	color: var(--qx-white) !important;
	cursor: pointer;
	transition: background-color var(--qx-dur) var(--qx-ease);
}

.qx-carousel__arrow:hover,
.qx-carousel__arrow:focus-visible {
	background: var(--qx-yellow) !important;
	color: var(--qx-ink) !important;
}

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

.qx-carousel__arrow--prev {
	left: var(--qx-space-3);
}

.qx-carousel__arrow--next {
	right: var(--qx-space-3);
}

.qx-carousel__arrow svg {
	width: 22px;
	height: 22px;
	stroke: currentColor;
	fill: none;
}

.qx-carousel__dots {
	display: flex;
	justify-content: center;
	gap: var(--qx-space-2);
	margin-top: var(--qx-space-4);
}

.qx-carousel__dot {
	flex: 0 0 auto;
	width: 9px;
	height: 9px;
	min-width: 0 !important;
	min-height: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: var(--qx-radius-pill) !important;
	background: var(--qx-ink-700) !important;
	cursor: pointer;
	transition: background-color var(--qx-dur) var(--qx-ease), width var(--qx-dur) var(--qx-ease);
}

.qx-carousel__dot[aria-current='true'] {
	width: 26px;
	background: var(--qx-yellow) !important;
}

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

/* --------------------------------------------------------------------------
   Location / opening-hours panels.
   -------------------------------------------------------------------------- */

.qx-sede-info__data {
	display: flex;
	flex-direction: column;
	gap: var(--qx-space-5);
	min-width: 0;
}

.qx-sede-panel {
	padding: var(--qx-space-6);
	background: var(--qx-ink-800);
	border: 1px solid var(--qx-border-dark);
	border-radius: var(--qx-radius-lg);
}

.qx-sede-panel__head {
	display: flex;
	align-items: center;
	gap: var(--qx-space-4);
	margin-bottom: var(--qx-space-5);
}

.qx-sede-panel__icon {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	background: var(--qx-yellow-tint-dark);
	border-radius: var(--qx-radius);
	color: var(--qx-yellow);
}

.qx-sede-panel__icon svg {
	width: 24px;
	height: 24px;
	stroke: currentColor;
	fill: none;
}

.qx-sede-panel__title {
	margin: 0;
	font-size: var(--qx-fs-h4);
	line-height: var(--qx-lh-snug);
	letter-spacing: var(--qx-ls-heading);
	text-transform: uppercase;
	color: var(--qx-text-on-dark);
}

.qx-sede-panel__address {
	margin: 0 0 var(--qx-space-4);
	font-size: var(--qx-fs-body);
	line-height: var(--qx-lh-body);
	color: var(--qx-text-on-dark);
}

.qx-sede-panel__map-link {
	display: inline-flex;
	align-items: center;
	gap: var(--qx-space-2);
	font-family: var(--qx-font);
	font-size: var(--qx-fs-eyebrow);
	font-weight: var(--qx-fw-bold);
	letter-spacing: var(--qx-ls-eyebrow);
	text-transform: uppercase;
	text-decoration: none;
	color: var(--qx-yellow);
}

.qx-sede-panel__map-link:hover,
.qx-sede-panel__map-link:focus-visible {
	color: var(--qx-yellow);
	text-decoration: underline;
}

.qx-sede-panel__map-link svg {
	width: 15px;
	height: 15px;
	stroke: currentColor;
	fill: none;
}

/* Opening hours — day on the left, time on the right, faint rule between
   rows. The rows are a <dl>, so the grid lives on each row wrapper. */
.qx-sede-hours {
	margin: 0;
}

.qx-sede-hours__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--qx-space-4);
	padding-block: var(--qx-space-3);
	border-top: 1px solid var(--qx-border-dark);
}

.qx-sede-hours__row:first-child {
	border-top: 0;
	padding-top: 0;
}

.qx-sede-hours__day {
	margin: 0;
	font-family: var(--qx-font);
	font-size: var(--qx-fs-small);
	font-weight: var(--qx-fw-semibold);
	letter-spacing: var(--qx-ls-eyebrow);
	text-transform: uppercase;
	color: var(--qx-text-muted-on-dark);
}

.qx-sede-hours__time {
	margin: 0;
	font-size: var(--qx-fs-small);
	font-weight: var(--qx-fw-semibold);
	white-space: normal;
	word-break: break-word;
	overflow-wrap: break-word;
	color: var(--qx-text-on-dark);
}

/* ==========================================================================
   Beneficios de esta sede — text column (eyebrow chip, big left-aligned title,
   lead, icon rows, CTA) beside the class-grid artwork. Layout follows the
   reference design, translated to light: off-white background, so it reads as
   its own block after the dark Info section.

   Contrast, per DESIGN.md — yellow on a light surface is 1.7:1 and fails even
   the 3:1 floor for icons, so the reference's yellow-on-transparent treatment
   is inverted here: the chip is a yellow pill with ink text, and the icon
   badges are ink squares with a yellow glyph.
   ========================================================================== */

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

.qx-sede-beneficios__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--qx-space-7);
	align-items: center;
}

@media (min-width: 1024px) {
	.qx-sede-beneficios__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
		gap: var(--qx-space-8);
	}

	.qx-sede-beneficios__grid--solo {
		grid-template-columns: 1fr;
		max-width: 880px;
		margin-inline: auto;
	}
}

.qx-sede-beneficios__intro {
	min-width: 0;
}

.qx-sede-beneficios--solo .qx-sede-beneficios__intro {
	text-align: center;
}

.qx-sede-beneficios--solo .qx-sede-beneficios__lead {
	margin-inline: auto;
}

.qx-sede-beneficios--solo .qx-sede-beneficios__list {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--qx-space-4);
	text-align: left;
	max-width: 640px;
	margin-inline: auto;
}

@media (min-width: 640px) {
	.qx-sede-beneficios--solo .qx-sede-beneficios__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--qx-space-5);
		max-width: none;
	}
}

.qx-sede-beneficios--solo .qx-sede-beneficios__item {
	padding: var(--qx-space-4);
	background: var(--qx-bg);
	border: 1px solid var(--qx-border);
	border-radius: var(--qx-radius-lg);
	box-shadow: var(--qx-shadow-sm);
}

.qx-sede-beneficios--solo .qx-sede-beneficios__cta {
	margin-inline: auto;
}

/* Bigger and heavier than the other section titles, and left-aligned: the
   reference leads with the headline instead of centring it. */
.qx-sede-beneficios__title {
	margin: 0 0 var(--qx-space-4);
	font-size: var(--qx-fs-h2);
	font-weight: var(--qx-fw-black);
	line-height: var(--qx-lh-heading);
	letter-spacing: var(--qx-ls-heading);
	text-transform: uppercase;
	color: var(--qx-text);
}

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

.qx-sede-beneficios__lead {
	margin: 0 0 var(--qx-space-7);
	max-width: 46ch;
	font-size: var(--qx-fs-lead);
	line-height: var(--qx-lh-body);
	color: var(--qx-text-muted);
}

/* Rows sit directly on the section background — no card, matching the
   reference. */
.qx-sede-beneficios__list {
	display: flex;
	flex-direction: column;
	gap: var(--qx-space-5);
	margin: 0 0 var(--qx-space-7);
	padding: 0;
	list-style: none;
}

.qx-sede-beneficios__item {
	display: flex;
	align-items: center;
	gap: var(--qx-space-4);
}

.qx-sede-beneficios__icon {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	background: var(--qx-ink);
	border-radius: var(--qx-radius);
	color: var(--qx-yellow);
}

.qx-sede-beneficios__icon svg {
	width: 26px;
	height: 26px;
	stroke: currentColor;
	fill: none;
}

.qx-sede-beneficios__icon--media {
	background: var(--qx-ink);
	padding: 10px;
}

.qx-sede-beneficios__icon--media img {
	display: block;
	width: 26px;
	height: 26px;
	object-fit: contain;
}

.qx-sede-beneficios__text {
	font-family: var(--qx-font);
	font-size: var(--qx-fs-body);
	font-weight: var(--qx-fw-semibold);
	line-height: var(--qx-lh-snug);
	color: var(--qx-text);
}

/* Same footprint as .qx-planes__cta / .qx-clase-prueba__cta:
   plain yellow pill with a centred label. The reference's arrow-in-a-circle is
   deliberately dropped — no other CTA on the site has one. */
.qx-sede-beneficios__cta {
	width: min(100%, 380px);
	font-size: var(--qx-fs-body);
}

/* Small mobile — keep the headline from eating the viewport. */
@media (max-width: 575.98px) {
	.qx-sede-beneficios__title {
		font-size: calc(var(--qx-fs-h2) * 0.88);
	}

	.qx-sede-beneficios__icon {
		width: 42px;
		height: 42px;
	}

	.qx-sede-beneficios__icon svg {
		width: 22px;
		height: 22px;
	}

	.qx-sede-beneficios__cta {
		font-size: var(--qx-fs-small);
	}
}

/* Class grid — one artwork per sede. The file is 9:16 and already carries its
   own dark frame, so there is no border here. Capped at 480px because at 9:16
   anything wider makes the column much taller than the text beside it. */
.qx-sede-grilla {
	margin: 0;
}

/* A bare <button>, so Astra's core button styles load after this file and tie
   on specificity. `!important` is the same escape hatch used by the carousel
   arrows above. */
.qx-sede-grilla__zoom {
	display: block !important;
	width: 100%;
	max-width: 480px;
	margin-inline: auto;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	border-radius: var(--qx-radius-lg) !important;
	/* The artwork's own corners are square, so the radius has to clip here. */
	overflow: hidden;
	cursor: zoom-in;
	transition: transform var(--qx-dur) var(--qx-ease);
}

.qx-sede-grilla__zoom:hover {
	transform: translateY(-3px);
}

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

.qx-sede-grilla__img,
.qx-sede-grilla__placeholder {
	display: block;
	width: 100%;
	max-width: 480px;
	margin-inline: auto;
	border-radius: var(--qx-radius-lg);
	box-shadow: var(--qx-shadow);
}

.qx-sede-grilla__img {
	height: auto;
}

/* Placeholder — self-removes once the artwork exists in
   assets/img/sedes/{slug}/. Aspect ratio comes from the inline style so it
   tracks the width/height declared in pages/sede/data.php. */
.qx-sede-grilla__placeholder {
	display: grid;
	place-items: center;
	background: var(--qx-gray-100);
	color: var(--qx-text-muted);
	font-size: var(--qx-fs-small);
	box-shadow: none;
}

.qx-sede-grilla__caption {
	margin-top: var(--qx-space-4);
	font-size: var(--qx-fs-small);
	line-height: var(--qx-lh-snug);
	text-align: center;
	color: var(--qx-text-muted);
}

/* Own line so the caption reads as "what it is" then "what you can do". */
.qx-sede-grilla__hint {
	display: block;
	margin-top: var(--qx-space-1);
}

/* --------------------------------------------------------------------------
   Grilla lightbox — same behaviour and data-attribute wiring as the home's
   photo lightbox (pages/home/style.css), with one difference that is the whole
   point of it: the artwork is 9:16, so fitting it to the viewport height would
   leave it no more readable than it already is inline. Instead it renders at up
   to its natural 1080px width and the overlay scrolls.
   -------------------------------------------------------------------------- */

/* Same z-index and backdrop as the sede photo lightbox —
   above the header's 40, and consistent between the two overlays. */
.qx-sede-lightbox {
	position: fixed;
	inset: 0;
	z-index: 100;
	overflow: hidden;
	background: rgb(0 0 0 / 0.85);
}

.qx-sede-lightbox[hidden] {
	display: none;
}

.qx-sede-lightbox__scroll {
	width: 100%;
	height: 100%;
	overflow-y: auto;
	/* Stops the scroll from chaining to the page behind once the image ends. */
	overscroll-behavior: contain;
	padding: var(--qx-space-5);
	text-align: center;
}

.qx-sede-lightbox__img {
	display: block;
	width: 100%;
	max-width: 1080px;
	height: auto;
	margin-inline: auto;
	border-radius: var(--qx-radius);
}

/* Astra's core button styles load after this file and tie on specificity. */
.qx-sede-lightbox__close {
	position: absolute;
	top: var(--qx-space-4);
	right: var(--qx-space-4);
	z-index: 1;
	display: grid !important;
	place-items: center;
	width: 44px;
	height: 44px;
	min-height: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: var(--qx-radius-pill) !important;
	background: var(--qx-ink) !important;
	color: var(--qx-white) !important;
	font-size: 2rem !important;
	line-height: 1 !important;
	cursor: pointer;
}

.qx-sede-lightbox__close:hover,
.qx-sede-lightbox__close:focus-visible {
	background: var(--qx-yellow) !important;
	color: var(--qx-ink) !important;
}

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