/*
 * Widget "Huelva TV: Programa (por etiqueta)" — widgets/widget-htv-programa.php
 *
 * Rejilla de tarjetas 16:9 para las piezas de un programa. Misma proporción
 * y mismos remates que la rejilla de Entretenimiento de la plantilla
 * destacada (template-parts/featured/featured-9.php), para que un programa
 * en la portada no se vea como un módulo de otra web. La cabecera no se
 * toca aquí: es la del tema (span.mvp-widget-home-title), coloreada desde
 * mu-plugins/antigravity-category-colors.php.
 */

/* Zona de widgets por encima de los destacados (page-home.php). Mismo
 * ancho que #mvp-home-widget-wrap y aire antes del bloque de noticias. */
#mvp-home-top-widget-wrap {
	margin-bottom: 40px;
	width: 100%;
	}

.htv-programa {
	float: left;
	position: relative;
	width: 100%;
	}

.htv-programa__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
	width: 100%;
	}

.htv-programa--1 .htv-programa__grid { grid-template-columns: minmax(0, 1fr); }
.htv-programa--2 .htv-programa__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.htv-programa--3 .htv-programa__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.htv-programa__card {
	display: block;
	color: inherit;
	text-decoration: none;
	}

.htv-programa__img {
	position: relative;
	margin-bottom: 10px;
	overflow: hidden;
	background: #000;
	aspect-ratio: 16 / 9;
	}

/* El tema esconde .mvp-reg-img en algunos listados y en móvil enseña una
 * .mvp-mob-img que aquí no existe: la única imagen de la tarjeta se ve
 * siempre. */
.htv-programa__img img {
	display: block !important;
	width: 100%;
	height: 100%;
	object-fit: cover;
	}

.htv-programa__card:hover .htv-programa__img img,
.htv-programa__card:hover h2 {
	opacity: .7;
	}

.htv-programa__card h2 {
	margin-top: 6px;
	color: #222;
	font-size: 1.1rem;
	font-weight: 700;
	letter-spacing: -.02em;
	line-height: 1.25;
	}

.htv-programa__more {
	clear: both;
	display: block;
	float: left;
	width: 100%;
	margin-top: 18px;
	color: #222;
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .02em;
	text-align: right;
	text-transform: uppercase;
	}

.htv-programa__more:hover {
	opacity: .7;
	}

@media (max-width: 767px) {
	.htv-programa__grid,
	.htv-programa--3 .htv-programa__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px;
		}

	.htv-programa__card h2 {
		font-size: .95rem;
		}
	}

/* Cabecera "Destacados" de la maqueta Featured 7: solo en escritorio, como
 * en featured.php. */
@media (min-width: 768px) {
	.htv-programa-head.desktop-only {
		display: block;
		margin-bottom: -5px;
		padding-bottom: 0;
		}
	}

@media (max-width: 767px) {
	.htv-programa-head.desktop-only {
		display: none;
		}
	}