/*!
 * article-entorn.css
 *
 * Pagines d'article de /entorn/ — pobles, excursions, activitats, destins.
 * Implementacio del handoff "design_handoff_article_entorn" (versio A, Bandes).
 *
 * REESCRIT el 25/08/2026. La primera versio portava tota la maquetacio en CSS
 * —rejilles, columnes, flex— i el cos muntat amb blocs de core, saltant-se la
 * norma del projecte: primer els ajustos del bloc de Kadence, i el CSS nomes
 * per al que el bloc no pot expressar.
 *
 * QUE HA PASSAT A SER AJUST DE BLOC (i per tant ha desaparegut d'aqui):
 *   · Les dues columnes de les seccions      → Row Layout, columnes 50/50
 *   · L'alternança foto dreta/esquerra       → ordre de les columnes al bloc
 *   · La fitxa de dades i les cel·les        → Row Layout amb 4 i 3 columnes
 *   · Les quatre cel·les d'"abans d'anar-hi" → Row Layout amb 4 columnes
 *   · La barra de context i el tancament     → Row Layout amb 2 columnes
 *   · El vel fosc del hero                   → Overlay de la fila (degradat)
 *   · Fons de banda, alçades, encoixinats    → ajustos de fila i columna
 *   · El filet verd de l'entrada             → bloc separador
 *
 * Tot aixo queda editable des de l'escriptori i, de propina, el full baixa de
 * 80 regles a ~35.
 *
 * QUE ES QUEDA: tipografia, color, vores i superficies — el que defineix com es
 * veu el sistema i s'ha de poder canviar en un sol lloc. Els valors surten del
 * prototip del handoff, que la documentacio declara font de veritat.
 *
 * NOTA DE SISTEMA: el disseny introdueix una superficie nova, #F7F4ED (la banda
 * alterna). Al lloc ja hi conviuen #F7F3EA, #F4F0E8 i #FBF9F4 — quatre cremes
 * molt properes. Val la pena unificar-les algun dia.
 */

/* Tokens de l'article. Els que ja existeixen al sistema s'hereten; nomes es
   declaren els dos que el disseny aporta de nou. */
.era-article {
	--era-band:       #F7F4ED;                       /* banda alterna de seccio */
	--era-paper:      var(--er-bg, #F4F0E8);         /* panells */
	--era-ink:        var(--er-ink, #2A2520);
	--era-ink-soft:   var(--er-ink-soft, #6B6258);
	--era-line:       var(--er-line, #E3DCCF);
	--era-green:      var(--er-green, #3EA534);
	--era-green-dark: var(--er-green-fn, #03693A);
	--era-serif:      var(--er-serif, 'Playfair Display', Georgia, serif);
	--era-sans:       var(--er-sans, 'Jost', -apple-system, sans-serif);
}

/* ───────── Tipografia comuna ───────── */

.era-kick {
	font-family: var(--era-sans);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--era-green-dark);
	margin: 0 0 14px;
}

.era-titol {
	font-family: var(--era-serif);
	font-weight: 500;
	letter-spacing: -.01em;
	line-height: 1.14;
	text-wrap: balance;
	color: var(--era-ink);
	margin: 0;
}

.era-text {
	font-family: var(--era-sans);
	font-weight: 400;
	font-size: 1rem;
	line-height: 1.7;
	color: var(--era-ink);
	text-wrap: pretty;
}

/* ───────── 1 · Hero ─────────
   L'alçada, la foto i el vel son ajustos de la fila. Aqui nomes el color del
   text, que va sobre foto i no pot heretar-lo. */

.era-hero .era-kick {
	color: #D6E4C2;
}
.era-hero .era-titol {
	font-size: clamp(2.4rem, 5.4vw, 3.7rem);
	color: #fff;
}

/* ───────── 2 · Barra de context ───────── */

.era-ctx {
	border-bottom: 1px solid var(--era-line);
}
.era-ctx .rank-math-breadcrumb,
.era-ctx .rank-math-breadcrumb p {
	font-family: var(--era-sans);
	font-size: 13.5px;
	color: var(--era-ink-soft);
	margin: 0;
}
.era-ctx .rank-math-breadcrumb a {
	color: var(--era-ink-soft);
	text-decoration: none;
}
.era-ctx .rank-math-breadcrumb a:hover {
	color: var(--era-ink);
}
.era-ctx .rank-math-breadcrumb .separator {
	opacity: .45;
}
/* La pestanya de reserva: el fons i les vores laterals son ajustos de la
   columna; aqui la tipografia. */
.era-tab {
	font-family: var(--era-sans);
	font-size: 13.5px;
	line-height: 1.35;
	color: var(--era-ink);
	margin: 0;
}
.era-tab strong {
	font-weight: 500;
}

/* ───────── 3 · Entrada ───────── */

.era-intro .era-titol {
	font-size: clamp(1.5rem, 2.6vw, 1.95rem);
}
.era-intro .era-text {
	font-size: 1.06rem;
	color: var(--era-ink-soft);
}

/* ───────── 4 · Fitxa de dades i cel·les ─────────
   Les vores es col·lapsen amb marges negatius perque les cel·les contigues
   comparteixin filet. Aixo no es un ajust de columna: es queda al CSS. */

.era-cel {
	border: 1px solid var(--era-line);
	margin: -1px 0 0 -1px;
	background: #fff;
}
.era-cel__et {
	font-family: var(--era-sans);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--era-ink-soft);
	margin: 0 0 6px;
}
.era-cel__val {
	font-family: var(--era-sans);
	font-size: 14.5px;
	line-height: 1.4;
	color: var(--era-ink);
	margin: 0;
}

/* ───────── 5 · Seccions ───────── */

.era-sec .era-titol {
	font-size: clamp(1.75rem, 3.2vw, 2.35rem);
	margin-bottom: 20px;
}
.era-sec .era-text + .era-text {
	margin-top: 1.05rem;
}
/* Peu de foto */
.era-sec__cap,
.era-article figcaption {
	font-family: var(--era-sans);
	font-size: 12px;
	line-height: 1.5;
	color: var(--era-ink-soft);
	padding-top: 10px;
	margin: 0;
}
/* Fitxa de seccio: dins d'una banda es queda blanca per mantenir el contrast. */
.era-fact {
	background: #fff;
	border: 1px solid var(--era-line);
}
.era-fact .era-text {
	font-size: 13.5px;
	line-height: 1.5;
}
.era-fact svg {
	width: 20px;
	height: 20px;
	stroke: var(--era-green-dark);
	stroke-width: 1.3;
	fill: none;
}
/* Enllaç de seccio */
.era-more {
	font-family: var(--era-sans);
	font-weight: 500;
	font-size: 14.5px;
	color: var(--era-green-dark);
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	padding-bottom: 2px;
}
.era-more:hover {
	color: var(--era-ink);
}

/* ───────── 6 · Banda de foto ─────────
   La foto i el panell son files; aqui la cursiva del peu, que el bloc no te. */

.era-plate__frase {
	font-family: var(--era-serif);
	font-style: italic;
	font-weight: 500;
	font-size: clamp(1.2rem, 2.2vw, 1.5rem);
	line-height: 1.3;
	color: var(--era-ink);
	margin: 0;
}
.era-plate__et {
	font-family: var(--era-sans);
	font-weight: 600;
	font-size: 12.5px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--era-ink-soft);
	margin: 0;
}

/* ───────── 7 · Abans d'anar-hi ───────── */

.era-before .era-titol {
	font-size: clamp(1.5rem, 2.6vw, 1.9rem);
}
.era-before .era-cel__et {
	font-size: 11px;
	letter-spacing: .18em;
	margin-bottom: 8px;
}
.era-before .era-cel__val {
	font-size: 15px;
	line-height: 1.5;
}

/* ───────── 8 · Tancament ───────── */

.era-end .era-titol {
	font-size: clamp(1.5rem, 2.8vw, 2rem);
}
.era-end .era-text {
	color: var(--era-ink-soft);
}

/* Cap ombra i cap cantonada arrodonida a tot l'article: ho diu el handoff.
   Els botons de compartir son l'unica excepcio (rodons). */
.era-article .kb-button,
.era-article .wp-block-button__link,
.era-article img {
	border-radius: 0;
}