/* ==========================================================================
   LISTAS DE CANCIONES CON FICHA VISIBLE
   --------------------------------------------------------------------------
   Lo usan las páginas del Día del Padre (single-padre.php) y del Día de la
   Madre (single-madre.php). Encima de este archivo va siempre
   `rkb-listas-canciones.css`, que trae la cabecera, la barra de secciones y
   las fichas; aquí está solo lo que hace falta para enseñar la lista
   desplegada, con la miniatura del vídeo de cada canción y las tarjetas de
   perfiles.

   El prefijo `rkb-pad-` se quedó del primer uso (Día del Padre) y no se ha
   renombrado a propósito: es el mismo caso que `rkb-nav-*` en el archivo
   compartido. Si algún día se renombra, hay que tocar los dos templates a la
   vez.

   Todo cuelga de `.rkb-pad`, que llevan los <main> de ambas páginas, para no
   afectar a la lista de Navidad.
   ========================================================================== */

/* --------------------------------------------------------------------------
   La lista de canciones, siempre desplegada
   --------------------------------------------------------------------------
   En Navidad cada ficha es un acordeón porque son 53. Aquí son 17 y el texto
   se lee de un tirón, así que no hay nada que abrir: el título, la historia y
   el vídeo están a la vista en cuanto se llega.

   La rejilla compartida pone dos columnas a partir de 760px. Aquí se anula:
   con el texto y el vídeo en la misma tarjeta, dos columnas no caben.
   ------------------------------------------------------------------------ */

.rkb-pad .rkb-pad-songs {
	grid-template-columns: minmax(0, 1fr);
	gap: .9rem;
}

.rkb-pad .rkb-pad-song {
	padding: 1rem 1.1rem 1.1rem;
	border: 1px solid var(--nav-line);
	border-radius: var(--nav-radio);
	background: linear-gradient(160deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .012));
}

.rkb-pad .rkb-pad-song__head {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: baseline;
	gap: .7rem;
	margin-bottom: .6rem;
}

.rkb-pad .rkb-pad-song__num {
	color: var(--nav-gold);
	font-size: .82rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	letter-spacing: .04em;
}

.rkb-pad .rkb-pad-song__titulo {
	margin: 0;
	color: var(--nav-text);
	font-size: 1.05rem;
	line-height: 1.3;
}

.rkb-pad .rkb-pad-song__artista {
	margin: .1rem 0 0;
	color: var(--nav-muted);
	font-size: .84rem;
	text-transform: uppercase;
	letter-spacing: .05em;
}

/* Texto y vídeo: en móvil uno debajo del otro, a partir de 760px el vídeo se
   va a la derecha en columna propia. */
.rkb-pad .rkb-pad-song__body {
	display: grid;
	gap: .8rem;
}

.rkb-pad .rkb-pad-song__texto {
	margin: 0;
	color: #ddd6cb;
	font-size: .94rem;
	line-height: 1.6;
}

.rkb-pad .rkb-pad-song__media {
	margin: 0;
	align-self: start;
}

/* Miniatura del vídeo: es solo una imagen, no cuesta nada cargarla. El iframe
   de verdad entra al pulsar. */
.rkb-pad .rkb-pad-song__thumb {
	position: relative;
	display: block;
	width: 100%;
	padding: 0;
	border: 1px solid var(--nav-line-2);
	border-radius: var(--nav-radio);
	background: #000;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	cursor: pointer;
	transition: border-color .16s ease;
}

.rkb-pad .rkb-pad-song__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: .82;
	transition: opacity .16s ease, transform .3s ease;
}

.rkb-pad .rkb-pad-song__thumb:hover img,
.rkb-pad .rkb-pad-song__thumb:focus-visible img {
	opacity: 1;
	transform: scale(1.03);
}

.rkb-pad .rkb-pad-song__thumb:focus-visible {
	outline: 2px solid var(--nav-gold);
	outline-offset: 2px;
}

.rkb-pad .rkb-pad-song__play {
	position: absolute;
	top: 50%;
	left: 50%;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: rgba(227, 38, 46, .92);
	color: #fff;
	font-size: .8rem;
	line-height: 1;
	box-shadow: 0 4px 18px rgba(0, 0, 0, .45);
	transition: transform .16s ease, background .16s ease;
}

.rkb-pad .rkb-pad-song__thumb:hover .rkb-pad-song__play {
	transform: translate(-50%, -50%) scale(1.1);
	background: var(--nav-gold);
	color: #15111a;
}

.rkb-pad .rkb-pad-song__frame {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 0;
	border-radius: var(--nav-radio);
	background: #000;
}

@media (min-width: 760px) {
	.rkb-pad .rkb-pad-song__body {
		grid-template-columns: minmax(0, 1fr) 240px;
		align-items: start;
		gap: 1.1rem;
	}
}

/* --------------------------------------------------------------------------
   Tarjetas de «según tu padre»
   --------------------------------------------------------------------------
   Cada tarjeta lleva dentro su propia lista de canciones, así que necesita
   más aire que la tarjeta genérica.
   ------------------------------------------------------------------------ */

.rkb-pad .rkb-pad-card {
	display: flex;
	flex-direction: column;
	gap: .55rem;
}

.rkb-pad .rkb-pad-card .rkb-nav-card__texto {
	margin: 0;
	color: var(--nav-muted);
	font-size: .9rem;
	line-height: 1.55;
}

.rkb-pad .rkb-pad-card__lista {
	margin: .35rem 0 0;
	padding: .7rem 0 0;
	border-top: 1px solid var(--nav-line);
	list-style: none;
	display: grid;
	gap: .45rem;
}

.rkb-pad .rkb-pad-card__lista li {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .35rem;
	font-size: .86rem;
	line-height: 1.4;
}

.rkb-pad .rkb-pad-card__lista strong {
	color: var(--nav-text);
	font-weight: 700;
}

.rkb-pad .rkb-pad-card__lista span {
	color: var(--nav-muted);
	font-size: .8rem;
}

/* --------------------------------------------------------------------------
   Modo embed
   --------------------------------------------------------------------------
   El despeje de 66px de la barra de secciones ya lo anula el CSS compartido.
   Aquí solo se evita que el vídeo se pegue a los bordes del WebView.
   ------------------------------------------------------------------------ */

.rkb-embed .rkb-pad .rkb-pad-song__frame,
.rkb-embed .rkb-pad .rkb-pad-song__thumb {
	border-radius: 0;
}