/*
Theme Name: ChromeNews Araba.top
Template: chromenews
Description: Child theme for ChromeNews customized for Araba.top with breadcrumb fixes for Spanish locale
Version: 1.0
Author: Araba.top
*/

@import url("../chromenews/style.css");

/* =========================================================================
   CAPA DE DISEÑO ARABAKOAK
   La marca no se toca: wordmark, menú, amarillo #ffc934 y Merriweather en los
   titulares. Lo que cambia es el soporte —papel blanco en vez de gris— y un
   segundo registro tipográfico de palo seco para la letra pequeña de servicio,
   que es lo que da densidad y aire de periódico.
   Las reglas llevan `html` delante porque el tema imprime su CSS en línea
   después de esta hoja y hay que ganarle la especificidad sin `!important`.
   ====================================================================== */

:root {
	--arb-oro: #ffc934;
	--arb-tinta: #191713;
	--arb-tinta-media: #5b564c;
	--arb-tinta-tenue: #8a8478;
	--arb-papel: #ffffff;
	--arb-papel-banda: #f7f4ed;
	--arb-filete: #e3ddd1;
	--arb-sans: "Barlow", "Helvetica Neue", Arial, sans-serif;
}

/* ---- 1. El papel es blanco; el crema solo separa bandas ---- */

html body.aft-light-mode,
html body.aft-light-mode.custom-background,
html body.aft-light-mode #sidr {
	background-color: var(--arb-papel);
}

/* Las bandas de sección dejan de ser gris de sistema y pasan a papel cálido */
html body.aft-light-mode .aft-blocks.bg,
html body.aft-light-mode .af-main-banner-featured-posts,
html body.aft-light-mode .above-footer-widget-section {
	background-color: var(--arb-papel-banda);
}

/* ---- 2. Filetes cálidos en vez de grises de caja ---- */

html body.aft-light-mode .aft-archive-wrapper article,
html body.aft-light-mode .read-single,
html body.aft-light-mode .exclusive-posts,
html body.aft-light-mode .widget-title,
html body.aft-light-mode #main-navigation-bar,
html body.aft-light-mode .bottom-header {
	border-color: var(--arb-filete);
}

/* ---- 3. Letra pequeña de servicio en palo seco ----
   El menú y el wordmark NO se tocan: siguen en Merriweather. */

html body .entry-meta,
html body .post-item-metadata,
html body .item-metadata,
html body .aft-cat-links a,
html body .read-categories a,
html body .chromenews-pagination .nav-links,
html body .exclusive-post-title,
html body .arb-serv,
html body .arb-ekimen {
	font-family: var(--arb-sans);
}

html body .entry-meta,
html body .post-item-metadata {
	font-size: .78rem;
	letter-spacing: .04em;
	color: var(--arb-tinta-tenue);
	font-variant-numeric: tabular-nums;
}

/* Las etiquetas de categoría: más pequeñas, en mayúscula y con aire */
html body .aft-cat-links a,
html body .read-categories a {
	font-size: .7rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .09em;
	padding: .2rem .5rem;
}

/* ---- 4. Jerarquía de titulares ----
   Merriweather aguanta mal los cuerpos grandes con interlineado suelto. */

html body .aft-main-banner-wrapper .read-title h3,
html body .aft-main-banner-wrapper .read-title h2 {
	line-height: 1.1;
	letter-spacing: -.01em;
}

html body .aft-archive-wrapper .read-title h3 {
	font-size: 1.12rem;
	line-height: 1.32;
}

html body .read-details .post-description p {
	color: var(--arb-tinta-media);
	line-height: 1.6;
}

/* ---- 5. Rótulos de sección: filete de oro a toda la fila ---- */

html body .widget-title .heading-line,
html body .aft-blocks .widget-title {
	font-family: var(--arb-sans);
	letter-spacing: .1em;
}

/* Custom styles for Araba.top can be added here */

/* =========================================================================
   Cierre de portada: servicios (tiempo + cartelera) y franja de Ekimen
   ====================================================================== */

/* ---- Bloques de sección propios: una con foto, tres titulares al lado ---- */

.arb-seccion {
	width: 100%;
	margin: 0 0 2rem;
	padding-top: 1.4rem;
	border-top: 2px solid var(--arb-tinta);
}

.arb-seccion__titulo {
	margin: 0 0 1rem;
	font-family: var(--arb-sans);
	font-size: .95rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .12em;
}

.arb-seccion__cuerpo {
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	gap: 2rem;
}

.arb-seccion__foto {
	display: block;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	margin-bottom: .7rem;
	background: var(--arb-papel-banda);
}

.arb-seccion__foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.arb-seccion__meta {
	margin: 0 0 .2rem;
	font-family: var(--arb-sans);
	font-size: .74rem;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--arb-tinta-tenue);
	font-variant-numeric: tabular-nums;
}

.arb-seccion__principal h3 {
	margin: 0 0 .4rem;
	font-size: 1.3rem;
	line-height: 1.24;
}

.arb-seccion__entradilla {
	margin: 0;
	font-size: .92rem;
	line-height: 1.6;
	color: var(--arb-tinta-media);
}

.arb-seccion__lista article {
	padding-bottom: .8rem;
	margin-bottom: .8rem;
	border-bottom: 1px solid var(--arb-filete);
}

.arb-seccion__lista article:last-child {
	padding-bottom: 0;
	margin-bottom: 0;
	border-bottom: 0;
}

.arb-seccion__lista h4 {
	margin: 0;
	font-size: 1.02rem;
	line-height: 1.3;
}

.arb-seccion a {
	color: inherit;
}

.arb-seccion a:hover,
.arb-seccion a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---- Cartelera antes del río ---- */

.arb-portada-servicios--cine .arb-cartelera__lista {
	columns: 2;
	column-gap: 2.5rem;
}

.arb-portada-servicios--cine .arb-peli {
	break-inside: avoid;
}

.arb-portada-servicios {
	display: grid;
	grid-template-columns: 1fr 1.5fr;
	gap: 2.5rem;
	width: 100%;
	margin: 0 0 2rem;
	padding: 1.6rem 1.4rem;
	background: #f7f4ed;
	border-top: 1px solid #e3ddd1;
	border-bottom: 1px solid #e3ddd1;
}

body.aft-dark-mode .arb-portada-servicios {
	background: #1d1b15;
	border-top-color: #35311f;
	border-bottom-color: #35311f;
}

.arb-portada-servicios__col {
	min-width: 0;
}

.arb-ekimen {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.2rem 2.5rem;
	width: 100%;
	margin: 0 0 2rem;
	padding: 1.4rem;
	background: #1c1a15;
	color: #e9e4d8;
}

.arb-ekimen__txt {
	max-width: 52ch;
	margin: 0;
	font-size: .95rem;
	line-height: 1.6;
}

.arb-ekimen__txt a {
	color: #ffc934;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.arb-ekimen__txt a:hover,
.arb-ekimen__txt a:focus-visible {
	color: #fff;
}

/* El nombre del producto pesa un poco más que el correo */
.arb-ekimen__marca {
	font-weight: 700;
}

.arb-ekimen__cifras {
	display: flex;
	gap: 2rem;
}

.arb-ekimen__cifras span {
	display: block;
	font-size: 1.7rem;
	font-weight: 700;
	line-height: 1;
	color: #ffc934;
	font-variant-numeric: tabular-nums;
}

.arb-ekimen__cifras small {
	font-size: .72rem;
	text-transform: uppercase;
	letter-spacing: .1em;
	opacity: .82;
}

@media (max-width: 900px) {
	.arb-portada-servicios {
		grid-template-columns: 1fr;
		gap: 1.8rem;
	}

	.arb-portada-servicios--cine .arb-cartelera__lista {
		columns: 1;
	}

	.arb-seccion__cuerpo {
		grid-template-columns: 1fr;
		gap: 1.4rem;
	}
}