/**
 * Ajustes responsive transversales.
 *
 * Los componentes ya son móvil primero y traen sus propias consultas. Aquí
 * solo se resuelve lo que afecta a varias piezas a la vez y los extremos de
 * la horquilla de dispositivos: 360 px de ancho y pantallas de 1920 px.
 *
 * @package ElEscorpion\Theme
 */

/* --- 360 px: el móvil más estrecho que se soporta ----------------------- */

@media (max-width: 22.5rem) {

	:root {
		--esc-gutter: 0.875rem;
	}

	.esc-section {
		padding-block: var(--esc-space-lg);
	}

	/* Con tan poco ancho, la tarjeta compacta se apila. */
	.esc-card--compact {
		flex-direction: column;
	}

	.esc-card--compact .esc-card__media {
		flex-basis: auto;
		aspect-ratio: 16 / 10;
	}

	.esc-player__play {
		width: 56px;
		height: 56px;
	}

	.esc-player__volume {
		display: none;
	}
}

/* --- Hasta 768 px: comportamiento táctil -------------------------------- */

@media (max-width: 47.99rem) {

	/* El hover no existe en táctil: se evita el desplazamiento de tarjetas. */
	.esc-card:hover,
	.esc-team:hover {
		transform: none;
	}

	/* El reproductor fijo deja hueco al final del documento. */
	.has-sticky-player {
		padding-block-end: 4.5rem;
	}

	.esc-content-area {
		padding-block: var(--esc-space-md);
	}
}

/* --- 768 px: tabletas ---------------------------------------------------- */

@media (min-width: 48rem) {

	.esc-player__inner {
		gap: var(--esc-space-lg);
	}

	.esc-section__header {
		flex-wrap: nowrap;
	}
}

/* --- 1024 px: escritorio pequeño ---------------------------------------- */

@media (min-width: 64rem) {

	.esc-onair__grid {
		display: grid;
		grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
		gap: var(--esc-space-lg);
		align-items: start;
	}

	.esc-onair__current {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--esc-space-md);
		align-items: center;
	}
}

/* --- 1280 px en adelante ------------------------------------------------- */

@media (min-width: 80rem) {

	:root {
		--esc-gutter: 2.5rem;
	}
}

/* --- 1600 px: pantallas grandes ------------------------------------------ */

@media (min-width: 100rem) {

	:root {
		/* El contenedor deja de crecer para que las líneas sigan siendo
		   legibles: más ancho no significa mejor lectura. */
		--esc-container: 1440px;
	}

	.esc-hero__title {
		font-size: 6rem;
	}
}

/* --- Impresión ----------------------------------------------------------- */

@media print {

	.site-header,
	.site-footer,
	.esc-sticky,
	.esc-whatsapp,
	.esc-ad,
	.esc-player,
	.esc-post-nav,
	.esc-comments {
		display: none !important;
	}

	body {
		background: #fff;
		color: #000;
	}

	.esc-entry__content {
		font-size: 12pt;
	}

	a[href]::after {
		content: " (" attr(href) ")";
		font-size: 9pt;
		color: #555;
	}
}