/*
 * blog.css
 * Listaxe do blog — scope .ot-blog
 * O salto de sección grande vai antes do título (padding na cabeceira); o espazo tras a cabeceira é menor.
 * Entre a liña da destacada e a grella: 40px (--ot-blog-card-gap na grella; sen margin extra na destacada).
 * Primeira entrada grande; resto en 2 columnas (1 en móbil).
 * Ancho máximo do bloque: 900px de contido (+ padding do .contenedor).
 */

.ot-blog {
	padding-top:    0;
	padding-bottom: var(--ot-gap-seccion);
}

.ot-blog .contenedor {
	max-width: calc(900px + var(--contenedor-padding) * 2);
}

/* Categoría, etiqueta e tax de entradas: --ot-gap-seccion arriba e abaixo do bloque (sen duplicar co padding da cabeceira). */
.ot-blog.ot-blog--archive-tax {
	padding-top:    var(--ot-gap-seccion);
	padding-bottom: var(--ot-gap-seccion);
}

.ot-blog.ot-blog--archive-tax .ot-blog__page-header {
	padding-top: 0;
}

.ot-blog__page-header {
	padding-top:    var(--ot-gap-seccion);
	margin-bottom:  var(--ot-space-8);
	padding-bottom: var(--ot-space-6);
	border-bottom:  1px solid var(--ot-blue);
}

.ot-blog__title {
	font-size:     var(--ot-text-2xl);
	font-weight:   var(--ot-weight-bold);
	color:         var(--ot-blue);
	line-height:   var(--ot-leading-tight);
	margin-bottom: var(--ot-space-3);
}

.ot-blog__intro {
	font-size:   var(--ot-text-sm);
	color:       var(--ot-color-text-muted);
	line-height: var(--ot-leading-normal);
	max-width:   42rem;
}

.ot-blog__intro p {
	margin-bottom: var(--ot-space-2);
}

.ot-blog__intro p:last-child {
	margin-bottom: 0;
}

.ot-blog__date {
	display:       block;
	font-size:     var(--ot-text-sm);
	color:         var(--ot-color-text-muted);
	margin-bottom: var(--ot-space-2);
}

/* -------------------------------------------------- */
/* Entrada destacada                                   */
/* -------------------------------------------------- */

.ot-blog__featured {
	margin-bottom:  0;
	padding-bottom: var(--ot-space-6);
	border-bottom:  1px solid var(--ot-blue);
}

.ot-blog__featured-link {
	display:         block;
	text-decoration: none;
	color:           inherit;
	transition:      opacity var(--ot-transition);
}

.ot-blog__featured-link:hover {
	opacity: 0.92;
}

.ot-blog__featured-media {
	position:       relative;
	margin:         0 0 var(--ot-space-5);
	border-radius: var(--ot-radius-lg);
	overflow:       hidden;
	background:     var(--ot-color-surface);
	aspect-ratio:   16 / 9;
}

.ot-blog__featured-media--placeholder {
	min-height: 0;
}

.ot-blog__featured-img {
	position:   absolute;
	inset:      0;
	width:      100%;
	height:     100%;
	object-fit: cover;
	object-position: center;
	display:    block;
}

.ot-blog__featured-title {
	font-size:   var(--ot-text-xl);
	font-weight: var(--ot-weight-bold);
	line-height: var(--ot-leading-snug);
	color:       var(--ot-blue);
	margin:      0;
}

/* -------------------------------------------------- */
/* Grella de tarxetas                                  */
/* Destacada: liña horizontal completa. Na grella: padding-top da grella respecto á destacada; entre filas só o padding-bottom das tarxetas (sen duplicar padding-top). */
/* -------------------------------------------------- */

.ot-blog__grid {
	--ot-blog-card-gap: 40px;
	display:            grid;
	grid-template-columns: 1fr;
	column-gap:            0;
	row-gap:               0;
	margin-bottom:         var(--ot-gap-seccion);
	padding-top:           var(--ot-blog-card-gap);
	overflow:              visible;
}

.ot-blog__grid > .ot-blog__card {
	padding-inline:   0;
	padding-bottom:   calc(2 * var(--ot-blog-card-gap));
	position:         relative;
	border-bottom:    none;
	overflow:         visible;
}

.ot-blog__grid > .ot-blog__card:last-child {
	padding-bottom: var(--ot-blog-card-gap);
}

@media (max-width: 719px) {
	.ot-blog__grid > .ot-blog__card:not(:last-child)::before {
		content:          "";
		position:         absolute;
		inset-inline:     0;
		inset-block-end:  var(--ot-blog-card-gap);
		height:           1px;
		background:       var(--ot-blue);
		pointer-events:   none;
	}

	.ot-blog__grid > .ot-blog__card:not(:first-child) {
		padding-top: var(--ot-blog-card-gap);
	}
}

@media (min-width: 720px) {
	.ot-blog__grid {
		grid-template-columns: 1fr 1fr;
	}

	/*
	 * Liña horizontal entre filas: o espazo vén do padding-bottom da fila anterior
	 * (liña a inset-block-end 40px); non se suma padding-top nas filas seguintes para non duplicar.
	 */
	.ot-blog__grid > .ot-blog__card:nth-child(odd)::before {
		content:            "";
		position:           absolute;
		inset-inline-start: 0;
		inset-inline-end:   auto;
		inset-block-end:    var(--ot-blog-card-gap);
		width:              200%;
		height:             1px;
		background:         var(--ot-blue);
		pointer-events:     none;
	}

	.ot-blog__grid:has(> .ot-blog__card:nth-last-child(1):nth-child(even))
		> .ot-blog__card:nth-last-child(-n+2) {
		padding-bottom: var(--ot-blog-card-gap);
	}

	.ot-blog__grid:has(> .ot-blog__card:nth-last-child(1):nth-child(even))
		> .ot-blog__card:nth-last-child(-n+2):nth-child(odd)::before {
		content: none;
		display: none;
	}

	/* Última fila cunha soa tarxeta (total impar): sen liña horizontal na cela sola. */
	.ot-blog__grid:has(> .ot-blog__card:nth-last-child(1):nth-child(odd))
		> .ot-blog__card:nth-last-child(1)::before {
		content: none;
		display: none;
	}

	/*
	 * Liña vertical entre columnas: alto do bloque enlace (foto → texto), non o padding inferior da tarxeta.
	 */
	.ot-blog__grid > .ot-blog__card:nth-child(odd) .ot-blog__card-link {
		position:             relative;
		padding-inline-start: 0;
		padding-inline-end:   var(--ot-blog-card-gap);
	}

	.ot-blog__grid > .ot-blog__card:nth-child(odd) .ot-blog__card-link::after {
		content:          "";
		position:         absolute;
		inset-inline-end: 0;
		inset-block:      0;
		width:            1px;
		background:       var(--ot-blue);
		pointer-events:   none;
		z-index:          1;
	}

	.ot-blog__grid > .ot-blog__card:nth-child(even) .ot-blog__card-link {
		padding-inline-start: var(--ot-blog-card-gap);
		padding-inline-end:   0;
	}

	.ot-blog__grid > .ot-blog__card {
		padding-top: 0;
	}
}

.ot-blog__card-link {
	display:         block;
	text-decoration: none;
	color:           inherit;
	transition:      opacity var(--ot-transition);
	padding-inline: 0;
}

.ot-blog__card-link:hover {
	opacity: 0.92;
}

.ot-blog__card-media {
	position:       relative;
	margin:         0 0 var(--ot-space-4);
	border-radius: var(--ot-radius-md);
	overflow:       hidden;
	background:     var(--ot-color-surface);
	aspect-ratio:   16 / 9;
}

.ot-blog__card-media--placeholder {
	min-height: 0;
}

.ot-blog__card-img {
	position:   absolute;
	inset:      0;
	width:      100%;
	height:     100%;
	object-fit: cover;
	object-position: center;
	display:    block;
}

.ot-blog__card-title {
	font-size:   var(--ot-text-lg);
	font-weight: var(--ot-weight-bold);
	line-height: var(--ot-leading-snug);
	color:       var(--ot-blue);
	margin:      0;
}

/* -------------------------------------------------- */
/* Navegación entre páxinas                            */
/* -------------------------------------------------- */

.ot-blog .posts-navigation {
	margin-top:  var(--ot-gap-seccion);
	padding-top: var(--ot-space-6);
	border-top:  1px solid var(--ot-blue);
}

.ot-blog .posts-navigation .nav-links {
	display:         flex;
	justify-content: space-between;
	gap:             var(--ot-space-4);
	flex-wrap:       wrap;
}

.ot-blog .posts-navigation a {
	color:           var(--ot-blue);
	text-decoration: none;
	font-weight:     var(--ot-weight-semibold);
}

.ot-blog .posts-navigation a:hover {
	opacity: 0.85;
}

.ot-blog .posts-navigation .nav-subtitle {
	font-size: var(--ot-text-sm);
}