/* ==========================================================================
   Pàgines de contingut (L'ESCOLA, EL NACHO...)
   Hereta les variables de tema de theme.css

   ⚠️ AQUÍ NO ES FAN SERVIR `rem`, I ÉS A PROPÒSIT.

   Bootstrap 3 posa `html { font-size: 10px }`, o sigui que en aquest projecte
   1rem val 10 px i no els 16 px que val per defecte. La primera versió d'aquest
   fitxer estava escrita en `rem` donant per fet els 16: tot es pintava al
   62,5% del que tocava (el cos del text quedava en 10,5 px i el títol del hero
   en 30 en lloc de 48).

   Mentre el web vagi amb Bootstrap 3, el `rem` és un parany. Els píxels aquí
   diuen exactament el que es veurà.
   ========================================================================== */

.pagina-contingut {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 16px 48px;
}

/* Amplada de lectura.

   La mida de lletra no és l'únic que fa que un text es llegeixi malament: amb
   el contenidor a 900 px i la lletra petita hi cabien ~155 caràcters per línia,
   i el que es llegeix bé són 45-75. En tornar de final de línia a principi de
   la següent, l'ull es perd.

   Els blocs de text es limiten; el hero i la galeria es queden amples, que és
   on l'amplada sí que suma. */
.pagina-contingut .bloc-text,
.pagina-contingut .bloc-cita,
.pagina-contingut .bloc-cronologia {
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
}

/* ── Hero ── */
.pagina-contingut .bloc-hero {
    position: relative;
    background-color: var(--coral, #E84540);
    background-size: cover;
    background-position: center;
    color: #fff;
    padding: 64px 24px;
    margin: 0 -16px 40px;
    text-align: center;
}

/* Vel fosc, NOMÉS quan el hero porta una foto de fons.

   Al principi s'aplicava sempre, per pujar el contrast del text blanc sobre el
   coral. Però enfosquir el coral el fa deixar de ser el color de marca: el hero
   es veia d'un vermell diferent del botó del menú, que és el mateix
   `--coral: #E84540`. Es va notar de seguida.

   Sobre el coral pla el problema es resol per la MIDA i no pel color: el títol
   (34-52 px) i el subtítol (24 px) compten tots dos com a *text gran* per a la
   WCAG, i el text gran només necessita 3:1. Blanc sobre #E84540 dona 3,92:1,
   que hi passa de sobres.

   Sobre una FOTO no hi ha manera de saber quin contrast hi haura: alla el vel
   es imprescindible i s'hi manté. */
.pagina-contingut .bloc-hero--amb-imatge::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
}

.pagina-contingut .hero-content {
    position: relative;
}

.pagina-contingut .hero-title {
    font-family: 'Bebas Neue', Impact, sans-serif;
    /* clamp perquè baixi sol a les pantalles estretes sense una media query. */
    font-size: clamp(34px, 6vw, 52px);
    line-height: 1.05;
    letter-spacing: 0.02em;
    /* L'!important és necessari, no una comoditat: theme.css:84 posa
       `h1..h6 { color: var(--text-primary) !important }` i sense ell el títol
       del hero surt gairebé negre sobre el coral. Es toca només aquí i no al
       tema, que el fan servir totes les plantilles del web. */
    color: #fff !important;
    margin: 0;
}

.pagina-contingut .hero-subtitle {
    /* 24 px és el llindar de *text gran* de la WCAG. Per sota, sobre el coral
       pla es quedaria en 3,92:1 quan en calen 4,5 i caldria enfosquir el fons:
       exactament el que s'ha tret. La mida el salva. */
    font-size: 24px;
    line-height: 1.4;
    color: #fff;
    margin: 12px 0 0;
}

/* ── Text ── */
.pagina-contingut .bloc-text {
    margin-bottom: 40px;
}

.pagina-contingut .bloc-titol {
    font-family: 'Bebas Neue', Impact, sans-serif;
    font-size: 32px;
    line-height: 1.15;
    letter-spacing: 0.01em;
    color: var(--turquoise, #0D9488);
    margin: 0 0 12px;
}

.pagina-contingut .bloc-cos {
    font-size: 18px;
    line-height: 1.7;
}

.pagina-contingut .bloc-cos p {
    /* El contingut ric del bloc de text porta els seus propis <p>, que sense
       això heretarien la mida del body (14 px). */
    font-size: inherit;
    line-height: inherit;
    margin: 0 0 16px;
}

.pagina-contingut .bloc-cos p:last-child {
    margin-bottom: 0;
}

/* ── Cita ── */
.pagina-contingut .bloc-cita {
    border-left: 4px solid var(--turquoise, #0D9488);
    padding: 8px 0 8px 20px;
    margin-top: 32px;
    margin-bottom: 32px;
    font-size: 22px;
    line-height: 1.5;
    font-style: italic;
}

.pagina-contingut .bloc-cita-autor {
    font-size: 16px;
    font-style: normal;
    color: var(--text-muted, #6b7280);
    margin-top: 8px;
}

.pagina-contingut .bloc-cita-autor::before {
    content: '— ';
}

/* ── Cronologia ──
   No tenia cap estil: es pintava com una llista numerada del navegador, amb
   els números per davant i sense relació visual entre l'any i el que va passar. */
.pagina-contingut .bloc-cronologia {
    margin-bottom: 40px;
}

.pagina-contingut .cronologia-llista {
    list-style: none;
    margin: 0;
    padding: 0;
}

.pagina-contingut .cronologia-fita {
    display: flex;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid #eee;
}

.pagina-contingut .cronologia-fita:last-child {
    border-bottom: 0;
}

.pagina-contingut .cronologia-any {
    flex: 0 0 72px;
    font-family: 'Bebas Neue', Impact, sans-serif;
    font-size: 24px;
    line-height: 1.3;
    color: var(--coral, #E84540);
}

.pagina-contingut .cronologia-text {
    font-size: 18px;
    line-height: 1.6;
}

/* ── Galeria ── */
.pagina-contingut .bloc-galeria {
    margin-bottom: 40px;
}

.pagina-contingut .galeria-graella {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.pagina-contingut .galeria-item img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
}

.pagina-contingut .galeria-item figcaption {
    font-size: 15px;
    line-height: 1.5;
    color: var(--text-muted, #6b7280);
    margin-top: 6px;
}

/* ── Pàgina sense contingut ── */
.pagina-contingut .pagina-buida {
    text-align: center;
    padding: 64px 16px;
    color: var(--text-muted, #6b7280);
}

@media (max-width: 768px) {
    .pagina-contingut .bloc-hero { padding: 40px 16px; }
    /* El subtítol NO baixa de 24 px tampoc aquí: per sota deixaria de ser
       text gran i el contrast sobre el coral no arribaria a la norma. */
    .pagina-contingut .bloc-titol { font-size: 27px; }
    /* El cos NO baixa a mòbil: 17 px és el mínim còmode per llegir un text
       llarg al telèfon, no un màxim. */
    .pagina-contingut .bloc-cos,
    .pagina-contingut .cronologia-text { font-size: 17px; }
    .pagina-contingut .bloc-cita { font-size: 19px; }
    .pagina-contingut .cronologia-any { flex-basis: 60px; font-size: 21px; }
}