/**
 * Sección del número actual: una tira, no un cartel de pared.
 *
 * Tres piezas ancladas: las portadas a la izquierda, el número (edición, tema, entradilla,
 * tiendas y botón de suscripción) en medio, la insignia a la derecha.
 *
 * El alto de la portada manda: es lo que decide cuánto de la primera pantalla se come la
 * banda. Por eso es una variable y no una consecuencia del ancho.
 *
 * Depende de assets/css/base.css.
 */

.radiowp-magazine {
	--radiowp-magazine-cover-height: 11rem;

	background-color: var(--magazine-bg);
	color: var(--magazine-fg);
	padding-block: var(--radiowp-section-space);
}

.radiowp-magazine--ink {
	--magazine-bg: var(--radiowp-color-ink);
	--magazine-fg: var(--radiowp-color-on-ink);
	/* El rojo de marca sobre tinta da 4.29:1: insuficiente para las viñetas. */
	--magazine-mark: var(--radiowp-color-accent-on-dark);
	--magazine-focus: var(--radiowp-color-on-ink);
}

.radiowp-magazine--paper {
	--magazine-bg: var(--radiowp-color-surface-sunken);
	--magazine-fg: var(--radiowp-color-fg);
	--magazine-mark: var(--radiowp-color-accent-hover);
	--magazine-focus: var(--radiowp-color-accent);
}

/* Móvil: portadas e insignia arriba, el texto del número debajo a todo el ancho. */
.radiowp-magazine__inner {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	grid-template-areas:
		"cover badge"
		"body body";
	align-items: end;
	gap: 1.25rem;
	max-width: var(--radiowp-container);
	margin-inline: auto;
	padding-inline: var(--radiowp-gutter);
}

/* --- Portada --------------------------------------------------------------- */

.radiowp-magazine__cover {
	grid-area: cover;
	display: flex;
	align-items: flex-end;
}

/* Dos portadas: la segunda asoma detrás de la primera, un poco más baja, como dos
   ejemplares apilados en el estante. */
.radiowp-magazine .radiowp-magazine__cover--pair > :is(img, a) ~ :is(img, a) {
	margin-inline-start: calc(var(--radiowp-magazine-cover-height) * -0.32);
	transform: translateY(-0.75rem) rotate(4deg);
	z-index: 0;
}

.radiowp-magazine__cover--pair > :is(img, a):first-of-type {
	position: relative;
	z-index: 1;
}

.radiowp-magazine__cover a {
	display: block;
}

/* --- Edición, tema y entradilla ---------------------------------------------- */

.radiowp-magazine__body {
	grid-area: body;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.875rem;
	min-width: 0;
	max-width: 40rem;
}

.radiowp-magazine__body > * {
	margin: 0;
}

.radiowp-magazine__edition {
	color: var(--magazine-mark);
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	line-height: 1.2;
	text-transform: uppercase;
}

.radiowp-magazine__headline {
	color: var(--magazine-fg);
	--radiowp-heading-color: var(--magazine-fg);
	font-family: var(--radiowp-font-display);
	font-size: clamp(1.375rem, 3vw, 2rem);
	font-weight: 700;
	line-height: 1.1;
	text-wrap: balance;
}

.radiowp-magazine__summary {
	color: var(--magazine-fg);
	font-size: 0.9375rem;
	line-height: 1.5;
	opacity: 0.86;
	max-width: 60ch;
}

.radiowp-magazine__cta {
	display: inline-flex;
	align-items: center;
	background-color: var(--radiowp-color-accent-ink);
	border-radius: var(--radiowp-radius);
	color: var(--radiowp-color-accent-contrast);
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1;
	padding: 0.875rem 1.375rem;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color var(--radiowp-transition);
}

/* Solo el color en los estados: el tema pone `a:visited` y `a:hover` oscuros. Va aparte
   porque una regla con estado pesa más que las de escritorio y les pisaría el tamaño. */
.radiowp-magazine__cta:visited,
.radiowp-magazine__cta:hover,
.radiowp-magazine__cta:focus,
.radiowp-magazine__cta:active {
	color: var(--radiowp-color-accent-contrast);
}

.radiowp-magazine__cta:hover,
.radiowp-magazine__cta:focus-visible {
	background-color: var(--radiowp-color-accent-hover);
	color: var(--radiowp-color-accent-contrast);
}

.radiowp-magazine__cover img {
	display: block;
	height: var(--radiowp-magazine-cover-height);
	width: auto;
	border-radius: var(--radiowp-radius);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.24), 0 14px 32px rgba(0, 0, 0, 0.32);
}

/* --- Tiendas ---------------------------------------------------------------- */

.radiowp-magazine__stores {
	min-width: 0;
}

/* Es el grito de la portada impresa, no una etiqueta de formulario: da peso a la columna
   central y evita que la fila se lea como dos cosas separadas por aire. */
.radiowp-magazine__stores-label {
	margin: 0 0 0.5rem;
	color: var(--magazine-fg);
	font-size: 0.8125rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	line-height: 1.2;
	text-transform: uppercase;
}

.radiowp-magazine__stores-list {
	display: flex;
	flex-direction: column;
	gap: 0.4375rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.radiowp-magazine__stores-list li {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	color: var(--magazine-fg);
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1.2;
	text-transform: uppercase;
}

.radiowp-magazine__stores-list li::before {
	content: "•";
	color: var(--magazine-mark);
	font-size: 1.125em;
	line-height: 1;
}

/* --- Insignia ---------------------------------------------------------------- */

/* Caja con reglas, como la impresa en la portada: número grande, texto pequeño al lado. */
.radiowp-magazine__badge {
	grid-area: badge;
	align-self: end;
	justify-self: end;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	padding: 0.375rem 0.6875rem 0.375rem 0.5625rem;
	border: 2px solid currentColor;
	color: var(--magazine-fg);
}

.radiowp-magazine__badge-number {
	font-size: 1.75rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.04em;
	line-height: 0.85;
}

.radiowp-magazine__badge-text {
	max-width: 5.5em;
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1.1;
	text-transform: uppercase;
}

.radiowp-magazine__hint {
	margin: 0;
	color: var(--radiowp-color-muted);
	font-size: 0.875rem;
}

.radiowp-magazine a:focus-visible {
	outline: 2px solid var(--magazine-focus);
	outline-offset: 3px;
	border-radius: var(--radiowp-radius);
}

/* En cuanto cabe, la lista se tumba: tres líneas de una palabra son tres líneas de aire. */
@media (min-width: 30rem) {
	.radiowp-magazine__stores-list {
		flex-direction: row;
		flex-wrap: wrap;
		column-gap: 1.25rem;
	}
}

/* --- Una sola fila ----------------------------------------------------------- */

/* Portadas a la izquierda, el número en medio, la insignia anclada a la derecha. */
@media (min-width: 48rem) {
	.radiowp-magazine__inner {
		grid-template-columns: auto minmax(0, 1fr) auto;
		grid-template-areas: "cover body badge";
		align-items: center;
		gap: clamp(1.5rem, 3.5vw, 3rem);
	}

	.radiowp-magazine__badge {
		align-self: start;
	}
}

/* La portada crece cuando hay sitio de sobra, no antes. */
@media (min-width: 64rem) {
	.radiowp-magazine {
		--radiowp-magazine-cover-height: 13.5rem;
	}
}