/**
 * images.css — Diego Kaminsky · Escuela de Canto
 *
 * Estilos para el sistema de imágenes reales del tema.
 * Tratamiento visual unificador: marco dorado, velo oscuro, vigñeta,
 * object-fit, aspect-ratio, y variantes por contexto.
 *
 * Cargado vía inc/enqueue.php después de components.css.
 * Las imágenes se insertan con dk_picture() (inc/images.php).
 */

/* ============================================================
   BASE — elemento <picture> generado por dk_picture()
   ============================================================ */

.dk-picture {
	display: block;
	line-height: 0; /* elimina gap inferior del inline-block del img */
	height: 100%; /* rellena cualquier contenedor con altura definida (ratio);
	                 evita que la imagen se muestre a tamaño natural y desborde */
}

.dk-picture img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	max-width: 100%;
}

/* ============================================================
   RETRATO ENMARCADO (hero, nosotros)
   Marco dorado 1px + sombra suave cálida — sin vignette oscuro
   (tema claro: fotos lucen directas sobre fondo marfil)
   ============================================================ */

.dk-portrait {
	position: relative;
	border-radius: var(--radius-lg);
	overflow: hidden;
	border: 1px solid var(--color-border-gold);
	box-shadow: var(--shadow-card);
}

/* Sin vignette en tema claro — eliminado */
.dk-portrait::after {
	content: none;
}

/* ============================================================
   FONDO DE SECCIÓN con velo oscuro
   Para imágenes de fondo que llevan texto encima
   ============================================================ */

.dk-bg-wrap {
	position: absolute;
	inset: 0;
	overflow: hidden;
	z-index: 0;
}

.dk-bg-wrap .dk-picture,
.dk-bg-wrap .dk-picture img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}

/* Overlay desactivado — las fotos se muestran limpias.
   El texto ya NO va sobre la imagen; se mueve a panel sólido (split layout).
   Si en algún caso puntual se necesita un velo mínimo local,
   se añade inline directamente en el elemento específico. */
.dk-bg-wrap::after {
	content: none;
}

.dk-bg-wrap--heavy::after {
	content: none;
}

/* Contenido posicionado sobre el fondo */
.dk-has-bg {
	position: relative;
}

.dk-has-bg > * {
	position: relative;
	z-index: 1;
}

/* ============================================================
   IMAGEN EN TARJETA DE SERVICIO (card__img-photo)
   ============================================================ */

.card__img-photo {
	position: relative;
	overflow: hidden;
	border-radius: var(--radius-md) var(--radius-md) 0 0;
	aspect-ratio: 4 / 3; /* la librería es vertical: 16/9 recortaba la cara. 4/3 la respeta */
	min-width: 0;
}

.card__img-photo .dk-picture,
.card__img-photo .dk-picture img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* En tema claro no se aplica velo oscuro sobre fotos de tarjeta
   sin texto encima — evitar efecto cinema sobre card clara */
.card__img-photo::after {
	content: none;
}

/* ============================================================
   HERO — layout 2 columnas (texto izq / retrato der)
   ============================================================ */

.hero--two-col {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-areas: "portrait" "content";
	gap: 2rem;
	align-items: center;
}

@media (min-width: 1024px) {
	.hero--two-col {
		grid-template-columns: 1fr 420px;
		grid-template-areas: "content portrait";
		gap: clamp(2rem, 5vw, 4rem);
	}
}

.hero__portrait-col {
	grid-area: portrait;
	display: flex;
	justify-content: center;
}

.hero__portrait-wrap {
	position: relative;
	width: min(320px, 100%);
	aspect-ratio: 3 / 4;
	flex-shrink: 0;
}

@media (min-width: 768px) {
	.hero__portrait-wrap {
		width: min(380px, 100%);
	}
}

@media (min-width: 1024px) {
	.hero__portrait-wrap {
		width: 100%;
	}
}

.hero__portrait-wrap .dk-portrait {
	width: 100%;
	height: 100%;
}

.hero__portrait-wrap .dk-portrait .dk-picture {
	width: 100%;
	height: 100%;
}

/* Acento dorado diagonal decorativo detrás del retrato */
.hero__portrait-wrap::before {
	content: "";
	position: absolute;
	inset: 12px -12px -12px 12px;
	border: 1px solid var(--color-border-gold);
	border-radius: var(--radius-lg);
	z-index: -1;
	opacity: 0.5;
}

/* ============================================================
   ABOUT-TEASER — imagen con marco dorado
   ============================================================ */

.about-teaser__img--photo {
	position: relative;
	border-radius: var(--radius-lg);
	overflow: hidden;
	border: 1px solid var(--color-border-gold);
	box-shadow: var(--shadow-card); /* sombra cálida en tema claro */
	aspect-ratio: 4 / 5;
	min-width: 0;
}

.about-teaser__img--photo .dk-picture {
	width: 100%;
	height: 100%;
}

.about-teaser__img--photo .dk-picture img {
	height: 100%;
	object-position: center top;
}

/* Modificador para fotos APAISADAS (ej. B/N de Diego con alumno):
   marco horizontal para no cortar a los sujetos de los lados. */
.about-teaser__img--landscape {
	aspect-ratio: 3 / 2;
}

/* Sin vignette oscura en tema claro */
.about-teaser__img--photo::after {
	content: none;
}

/* ============================================================
   TEXT-MEDIA — imagen en layout de 2 col (texto + foto)
   ============================================================ */

.text-media__media--photo {
	position: relative;
	border-radius: var(--radius-lg);
	overflow: hidden;
	border: 1px solid var(--color-border-gold);
	box-shadow: var(--shadow-card);
	aspect-ratio: 4 / 5;
	min-width: 0;
}

/* Modificador para fotos APAISADAS (ej. B/N de Diego dando clase):
   marco horizontal para no cortar a los sujetos de los lados. */
.text-media__media--landscape {
	aspect-ratio: 3 / 2;
}

.text-media__media--photo .dk-picture {
	width: 100%;
	height: 100%;
}

.text-media__media--photo .dk-picture img {
	height: 100%;
}

/* ============================================================
   WORKSHOP-CARD — imagen lateral de taller
   Móvil: cabecera horizontal (4/3).
   ≥768px: columna izquierda full-height (foto llena la altura de la card).
   ============================================================ */

.workshop-card__photo {
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 3; /* móvil: horizontal generoso, se ve la cara */
	min-width: 0;
}

@media (min-width: 768px) {
	.workshop-card__photo {
		aspect-ratio: auto; /* desktop: ocupa la altura completa de la card */
		height: 100%;
		min-height: 320px;
	}
}

.workshop-card__photo .dk-picture {
	width: 100%;
	height: 100%;
}

.workshop-card__photo .dk-picture img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Sin velo — imágenes limpias */
.workshop-card__photo::after {
	content: none;
}

/* ============================================================
   PAGE-HEADER — imagen de fondo en cabeceras de página
   ============================================================ */

.page-header--has-photo {
	position: relative;
	overflow: hidden;
}

.page-header--has-photo .dk-bg-wrap {
	z-index: 0;
}

.page-header--has-photo .page-header__inner {
	position: relative;
	z-index: 1;
}

/* ============================================================
   SECTION-PHOTO — foto de fondo en secciones genéricas
   ============================================================ */

.section--photo-bg {
	position: relative;
	overflow: hidden;
}

.section--photo-bg > .container {
	position: relative;
	z-index: 1;
}

/* ============================================================
   CLS — reservas de espacio para evitar layout shift
   Deben coincidir con el aspect-ratio de cada contenedor.
   ============================================================ */

.hero__portrait-wrap,
.about-teaser__img--photo,
.text-media__media--photo {
	/* aspect-ratio ya definido por encima — no añadir height fijo */
	contain: layout;
}

/* ============================================================
   ACCESIBILIDAD — imágenes decorativas de fondo
   ============================================================ */

.dk-bg-wrap img[alt=""] {
	/* Confirma que las imágenes de fondo son decorativas */
	pointer-events: none;
}

/* ============================================================
   GALLERY GRID — sección "La escuela en imágenes" (front-page)
   Rejilla editorial cuadrada, borde fino dorado, sin vignette
   ============================================================ */

.photo-gallery {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.75rem;
	min-width: 0;
}

@media (min-width: 768px) {
	.photo-gallery {
		grid-template-columns: repeat(4, 1fr);
		gap: 1rem;
	}

	/* Quinta foto: ocupa 2 cols en tablet para equilibrar rejilla 4+1 */
	.photo-gallery__item:nth-child(5) {
		grid-column: span 2;
	}
}

@media (min-width: 1024px) {
	.photo-gallery {
		grid-template-columns: repeat(4, 1fr);
		gap: 1.25rem;
	}

	.photo-gallery__item:nth-child(5) {
		grid-column: span 2;
	}
}

.photo-gallery__item {
	position: relative;
	overflow: hidden;
	border: 1px solid var(--color-border-gold);
	box-shadow: var(--shadow-card);
	aspect-ratio: 1 / 1; /* cuadrado editorial */
	min-width: 0;
	/* sin border-radius: esquinas cuadradas según estética del tema */
}

.photo-gallery__item .dk-picture {
	width: 100%;
	height: 100%;
}

.photo-gallery__item .dk-picture img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	transition: transform 0.55s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
}

.photo-gallery__item:hover .dk-picture img,
.photo-gallery__item:focus-within .dk-picture img {
	transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
	.photo-gallery__item .dk-picture img {
		transition: none;
	}
}

/* Quinta foto: aspecto 2:1 cuando ocupa span 2 */
@media (min-width: 768px) {
	.photo-gallery__item:nth-child(5) {
		aspect-ratio: 2 / 1;
	}
}

/* ============================================================
   CONTACT — imagen lateral en la página de contacto
   ============================================================ */

.contact-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: 3rem;
	align-items: start;
}

@media (min-width: 1024px) {
	.contact-layout {
		grid-template-columns: 1fr 360px;
		gap: 4rem;
		align-items: start;
	}
}

.contact-side-img {
	position: relative;
	overflow: hidden;
	border: 1px solid var(--color-border-gold);
	box-shadow: var(--shadow-card);
	aspect-ratio: 3 / 4;
	min-width: 0;
	/* cuadrado editorial — sin radius */
}

/* Desktop: acompaña el scroll del formulario en lugar de flotar a media altura. */
@media (min-width: 1024px) {
	.contact-side-img {
		position: sticky;
		top: 7rem;
	}
}

.contact-side-img .dk-picture {
	width: 100%;
	height: 100%;
}

.contact-side-img .dk-picture img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 22%;
}

/* En móvil ocultamos la imagen lateral para no duplicar visual con el header */
@media (max-width: 1023px) {
	.contact-side-img {
		display: none;
	}
}

/* ============================================================
   MÉTODO — imagen secundaria en sección de pilares
   ============================================================ */

.method-secondary-img {
	position: relative;
	overflow: hidden;
	border: 1px solid var(--color-border-gold);
	box-shadow: var(--shadow-card);
	aspect-ratio: 4 / 3; /* ratio amable para fotos con personas */
	width: 100%;
	max-width: 680px; /* no puede dominar la pantalla (antes 1136×852 ≈ 95vh) */
	margin-inline: auto;
	min-width: 0;
	margin-block: 3rem;
	/* sin radius — esquinas cuadradas */
}

.method-secondary-img .dk-picture {
	width: 100%;
	height: 100%;
}

.method-secondary-img .dk-picture img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 30%;
}

/* ============================================================
   POST-CARD — thumbnail fallback en blog
   ============================================================ */

.post-card__thumb {
	overflow: hidden;
	aspect-ratio: 16 / 9;
	min-width: 0;
	/* sin radius en tema cuadrado */
	border-bottom: 1px solid var(--color-border);
}

.post-card__thumb img,
.post-card__thumb .dk-picture {
	width: 100%;
	height: 100%;
}

.post-card__thumb .dk-picture img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	transition: transform 0.45s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
}

.post-card:hover .post-card__thumb .dk-picture img {
	transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
	.post-card__thumb .dk-picture img {
		transition: none;
	}
}

/* ============================================================
   prefers-reduced-motion — no añadimos motion nuevo aquí;
   el parallax se gestiona en motion.css y site-motion.js.
   ============================================================ */

/* ============================================================
   HERO SPLIT — layout de pantalla casi completa (min-height 88vh)
   Texto izquierda sobre degradado marfil | Imagen derecha a sangre.
   Ningún velo sobre la imagen — se ve limpia y luminosa.
   ============================================================ */

.hero--fullsplit {
	min-height: 88vh;
	display: flex;
	flex-direction: column;
}

.hero__split-inner {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto 1fr;
	flex: 1;
	min-height: inherit;
}

@media (min-width: 1024px) {
	.hero__split-inner {
		grid-template-columns: 48fr 52fr; /* imagen izquierda | texto derecha */
		grid-template-rows: 1fr;
	}
}

/* Columna texto — degradado marfil, sin overflow */
.hero__col-text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(2.5rem, 6vw, 5rem) var(--container-x);
	background: var(--grad-bg, #FCF7ED);
	min-width: 0;
	order: 2; /* móvil: texto abajo */
}

@media (min-width: 1024px) {
	.hero__col-text {
		order: 2; /* desktop: texto derecha */
		padding-inline: clamp(2rem, 5vw, 4rem);
	}
}

/* Eyebrow con filete dorado a la izquierda */
.hero__eyebrow--ruled {
	display: flex;
	align-items: center;
	gap: .75rem;
	margin-bottom: 1.25rem;
}

.hero__eyebrow--ruled::before {
	content: "";
	display: block;
	width: 2rem;
	height: 1px;
	background: var(--gradient-gold);
	flex-shrink: 0;
}

/* Titular grande — dominante, sube a 7xl en desktop ancho */
.hero__title--xl {
	font-size: var(--text-6xl);
	line-height: 1.0;
	margin-bottom: 1.25rem;
}

@media (min-width: 1280px) {
	.hero__title--xl {
		font-size: var(--text-7xl);
	}
}

/* Alto corto (laptops, ventanas bajas): el hero nunca debe pasar del alto de
   la pantalla. El padding vertical (basado en ancho) y el titular 7xl hacían
   que el contenido desbordara por debajo del viewport. Aquí se compactan para
   que el bloque entre sin scroll. No afecta a pantallas de alto normal. */
@media (max-height: 800px) {
	.hero--fullsplit {
		min-height: 100svh;
	}
	.hero__col-text {
		padding-block: clamp(1.25rem, 4vh, 3rem);
	}
	.hero__title--xl,
	.hero__title--xl.hero__title--xl {
		font-size: var(--text-6xl);
	}
}

@media (max-height: 640px) {
	.hero__col-text {
		padding-block: 1rem;
	}
	.hero__title--xl,
	.hero__title--xl.hero__title--xl {
		font-size: var(--text-5xl);
	}
}

/* Señal de confianza con cifra real — reseñas de Google (ver sección
   testimonios, 6 reseñas reales del perfil del cliente). */
.hero__rating {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	margin-bottom: 1.75rem;
}

.hero__rating__stars {
	color: var(--color-accent);
	font-size: var(--text-base);
	letter-spacing: 0.1em;
	line-height: 1;
}

.hero__rating__text {
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--gold-deep);
	letter-spacing: 0.01em;
}

/* Trust bar con puntos separadores */
.hero__trust-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem .75rem;
	margin-top: 1.75rem;
	font-size: var(--text-xs);
	color: var(--color-text-muted);
	text-transform: uppercase;
	letter-spacing: .08em;
}

.hero__trust-bar strong {
	color: var(--color-accent-soft);
}

.hero__trust-sep {
	color: var(--color-border-gold);
}

/* Columna imagen — full-bleed, sin recorte, sin velo */
.hero__col-img {
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 3; /* reserva espacio en móvil — evita CLS */
	order: 1; /* móvil: imagen arriba */
	min-width: 0;
}

@media (min-width: 1024px) {
	.hero__col-img {
		order: 1; /* desktop: imagen izquierda */
		aspect-ratio: auto; /* ocupa el alto de la fila completo */
	}
	/* La imagen (cuadrada) se saca del flujo para que NO imponga su alto
	   intrínseco a la fila: si no, en viewports de alto corto empujaba el hero
	   por debajo de la pantalla. Absoluta = rellena la columna (alto = texto /
	   min-height) sin arrastrarla. Mismo patrón que page-header--split. */
	.hero__col-img .dk-picture,
	.hero__col-img-picture {
		position: absolute;
		inset: 0;
	}
}

.hero__col-img-picture,
.hero__col-img .dk-picture {
	width: 100%;
	height: 100%;
}

.hero__col-img .dk-picture img,
.hero__col-img-picture img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	display: block;
}

/* Sin velo, sin ::after oscuro */
.hero__col-img::after {
	content: none;
}

/* ============================================================
   SUMMER SPLIT — Banner Curso de Verano sin velo
   Imagen izquierda limpia | Texto panel sólido derecha
   ============================================================ */

.summer-split {
	display: grid;
	grid-template-columns: 1fr;
	overflow: hidden;
	padding: 0 !important; /* override .section padding — el contenido lo gestiona */
}

@media (min-width: 1024px) {
	.summer-split {
		/* Texto izquierda | imagen derecha — alterna con el hero (imagen izq),
		   que ahora abre con la imagen a la izquierda. */
		grid-template-columns: 52fr 48fr;
		min-height: 560px; /* altura consistente con .cta-split (mismo "jumbotron") */
	}
	.summer-split__body {
		order: 1;
	}
	.summer-split__img {
		order: 2;
	}
}

.summer-split__img {
	position: relative;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	min-width: 0;
}

@media (min-width: 1024px) {
	.summer-split__img {
		aspect-ratio: auto;
	}
	/* La imagen rellena la altura de la fila; su ratio retrato no debe
	   inflar la sección por encima de la pantalla (era 102vh). */
	.summer-split__img .dk-picture {
		position: absolute;
		inset: 0;
	}
}

.summer-split__img .dk-picture,
.summer-split__img .dk-picture img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}

/* Sin velo */
.summer-split__img::after {
	content: none;
}

/* Curso de Verano = único "capítulo" oscuro de la home (junto al footer).
   Mismo espresso que .site-footer — banda escasa y especial, no un patrón
   repetido. Texto claro, CTA dorado (el ink oscuro del btn--primary por
   defecto se perdería sobre este fondo). */
.summer-split__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 5vw, 4rem);
	background: linear-gradient(135deg, #241C15 0%, #3C2A14 50%, #1F1810 100%);
	border-right: 1px solid var(--color-border-gold);
	min-width: 0;
}

.summer-split__title {
	font-family: var(--font-display);
	font-size: var(--text-3xl);
	line-height: 1.15;
	color: #FBEFD0;
	margin-top: .75rem;
	margin-bottom: .875rem;
}

.summer-split__text {
	color: rgba(251, 239, 208, 0.75);
	font-size: var(--text-sm);
	line-height: 1.75;
	max-width: 440px;
}

/* Badge y CTA abrazan su contenido (no estirar al ancho del panel flex) */
.summer-split__body > .badge,
.summer-split__body > .btn {
	align-self: flex-start;
}

/* CTA dorado visible sobre el panel espresso oscuro */
.summer-split__body .btn--primary {
	background: var(--gradient-gold);
	color: #241808;
	border-color: transparent;
}

.summer-split__body .btn--primary:hover {
	background: #FBEFD0;
	color: #241808;
	border-color: #FBEFD0;
	box-shadow: var(--glow-gold);
}

/* ============================================================
   CTA SPLIT — sección de conversión con imagen limpia al lado
   Panel ink oscuro (texto) | Imagen a sangre (sin velo)
   ============================================================ */

.cta-split {
	display: grid;
	grid-template-columns: 1fr;
	overflow: hidden;
	padding: 0 !important; /* mata las bandas muertas del padding de .section */
}

@media (min-width: 1024px) {
	.cta-split {
		grid-template-columns: 52fr 48fr;
		min-height: 560px; /* misma altura que .summer-split */
	}
}

.cta-split__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(3rem, 7vw, 6rem) clamp(1.5rem, 5vw, 4rem);
	min-width: 0;
	order: 2;
}

@media (min-width: 1024px) {
	.cta-split__body {
		order: 1;
	}
}

.cta-split__title {
	font-family: var(--font-display);
	font-size: var(--text-4xl);
	line-height: 1.1;
	color: #FBEFD0;
	margin-top: .75rem;
	margin-bottom: 1rem;
}

.cta-split__text {
	font-size: var(--text-base);
	line-height: 1.75;
	color: rgba(251, 239, 208, 0.75);
	max-width: 400px;
}

.cta-split__img {
	position: relative;
	overflow: hidden;
	aspect-ratio: 16 / 10;
	min-width: 0;
	order: 1; /* móvil: imagen arriba */
}

@media (min-width: 1024px) {
	.cta-split__img {
		order: 2;
		aspect-ratio: auto;
	}
}

.cta-split__img .dk-picture,
.cta-split__img .dk-picture img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}

/* Sin velo — imagen visible y limpia */
.cta-split__img::after {
	content: none;
}

/* CTA hug (no estirar) + botón dorado visible sobre panel ink oscuro */
.cta-split__body > .btn {
	align-self: flex-start;
}

.cta-split__body .btn--primary {
	background: var(--gradient-gold);
	color: #241808;
	border-color: transparent;
}

.cta-split__body .btn--primary:hover {
	background: #FBEFD0;
	color: #241808;
	border-color: #FBEFD0;
	box-shadow: var(--glow-gold);
}

/* Desktop: la imagen rellena la altura real de la columna de texto
   (evita que su ratio natural dispare la altura de la sección) */
@media (min-width: 1024px) {
	.cta-split__img .dk-picture {
		position: absolute;
		inset: 0;
	}
}

/* ============================================================
   GALLERY 8 FOTOS — variante extendida con ítems --wide
   ============================================================ */

.photo-gallery--8 {
	grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 768px) {
	.photo-gallery--8 {
		grid-template-columns: repeat(4, 1fr);
	}

	.photo-gallery--8 .photo-gallery__item--wide {
		grid-column: span 2;
		aspect-ratio: 2 / 1;
	}
}

@media (min-width: 1024px) {
	.photo-gallery--8 {
		grid-template-columns: repeat(4, 1fr);
	}

	.photo-gallery--8 .photo-gallery__item--wide {
		grid-column: span 2;
		aspect-ratio: 2 / 1;
	}
}

/* ============================================================
   PAGE HEADERS INTERNOS — cabecera con imagen limpia (split)
   Reemplaza los page-header--has-photo con velo oscuro.
   Nueva clase .page-header--split: imagen a sangre + panel texto.
   ============================================================ */

.page-header--split {
	display: grid;
	grid-template-columns: 1fr;
	overflow: hidden;
	/* Altura uniforme en TODAS las páginas internas (el texto va centrado):
	   el componente template-parts/page-header.php garantiza la misma
	   estructura y esta altura fija evita que unas cabeceras sean más altas. */
	min-height: 440px;
}

@media (min-width: 1024px) {
	.page-header--split {
		grid-template-columns: 55fr 45fr;
		min-height: 560px;
	}
}

.page-header--split .page-header__text-col {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(3rem, 7vw, 5.5rem) var(--container-x);
	background: var(--grad-bg, #FCF7ED);
	order: 2;
	min-width: 0;
}

@media (min-width: 1024px) {
	.page-header--split .page-header__text-col {
		order: 1;
		padding-inline: clamp(2rem, 5vw, 4rem);
	}
}

.page-header--split .page-header__img-col {
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	order: 1;
	min-width: 0;
}

@media (min-width: 1024px) {
	.page-header--split .page-header__img-col {
		order: 2;
		aspect-ratio: auto;
	}
	/* La imagen rellena la altura de la fila (la marca el texto), en vez de
	   que su ratio retrato infle la cabecera casi a pantalla completa. */
	.page-header--split .page-header__img-col .dk-picture {
		position: absolute;
		inset: 0;
	}
}

.page-header--split .page-header__img-col .dk-picture,
.page-header--split .page-header__img-col .dk-picture img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}

/* Sin velo — imagen visible */
.page-header--split .page-header__img-col::after {
	content: none;
}

/* Banda de CTAs bajo la cabecera (páginas con acción tras el hero, como
   Clases online y Curso de Verano). Va FUERA del header para no romper su
   altura uniforme; continúa el panel marfil para sentirse parte del hero. */
.page-header-actions {
	background: var(--grad-bg, #FCF7ED);
	padding-block: clamp(1.5rem, 3vw, 2.25rem);
	border-top: 1px solid var(--color-border-gold);
}

.page-header-actions__row {
	display: flex;
	gap: 0.875rem;
	flex-wrap: wrap;
}

/* ============================================================
   CURSO DE VERANO — Formato y condiciones (imagen + ficha)
   2 columnas en desktop para que la imagen quede contenida.
   ============================================================ */
.summer-formato-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
	align-items: center;
}

@media (min-width: 900px) {
	.summer-formato-grid {
		grid-template-columns: 1fr 1fr;
		gap: 3rem;
	}
}