/* ==========================================================================
   ceb5 - Comunità Ebraica di Bologna
   Foglio di stile principale. Si appoggia sopra Cassiopeia (Bootstrap 5).
   Le personalizzazioni che devono sopravvivere agli aggiornamenti vanno in
   user.css, non qui.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Variabili
   -------------------------------------------------------------------------- */

:root {
    /* Palette istituzionale.
       I valori usati per il testo sono verificati per il contrasto WCAG AA. */
    --ceb-navy:        #123354;   /* 11.4:1 su bianco */
    --ceb-navy-dark:   #0d2740;
    --ceb-navy-soft:   #1d4a75;
    --ceb-blue:        #2a6089;   /* 5.6:1  su bianco - colore dei link */
    --ceb-blue-dark:   #1c4462;
    --ceb-gold:        #9a6f22;   /* 4.9:1  su bianco - testo accento */
    --ceb-gold-bright: #c9a227;   /* decorativo / su fondo scuro */
    --ceb-gold-pale:   #f3e9cf;

    --ceb-ink:         #232a31;   /* testo corrente */
    --ceb-muted:       #5b6570;   /* 5.6:1  su bianco - testo secondario */
    --ceb-line:        #e3ded4;
    --ceb-line-strong: #cfc7b8;
    --ceb-paper:       #faf8f4;   /* fondo caldo */
    --ceb-paper-deep:  #f2ede4;
    /* Fascia dei mesi nella tabella degli orari: fredda, per non confondersi
       con l'oro che segna il sabato in arrivo. */
    --ceb-mese:        #e9eff5;
    --ceb-mese-filo:   #c2d2e0;
    --ceb-white:       #ffffff;

    --ceb-focus:       #b8481f;   /* anello di focus, distinto dalla palette */

    /* Tipografia */
    --ceb-font-body: "Assistant", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --ceb-font-head: "Frank Ruhl Libre", Georgia, "Times New Roman", serif;

    /* Misure */
    --ceb-container: 1240px;
    --ceb-gutter: clamp(1rem, 3vw, 2rem);
    --ceb-radius: 6px;
    --ceb-radius-lg: 10px;
    --ceb-shadow-sm: 0 1px 2px rgba(18, 51, 84, .06), 0 2px 8px rgba(18, 51, 84, .05);
    --ceb-shadow-md: 0 4px 12px rgba(18, 51, 84, .09), 0 12px 28px rgba(18, 51, 84, .07);
    --ceb-header-h: 96px;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}

body.site {
    font-family: var(--ceb-font-body);
    font-size: 1.0625rem;      /* 17px */
    line-height: 1.65;
    color: var(--ceb-ink);
    background: var(--ceb-white);
    margin: 0;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--ceb-font-head);
    font-weight: 700;
    color: var(--ceb-navy);
    line-height: 1.22;
    letter-spacing: -0.005em;
    margin: 0 0 .6em;
    text-wrap: balance;
}

h1, .h1 { font-size: clamp(1.85rem, 1.3rem + 2.2vw, 2.75rem); }
h2, .h2 { font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.1rem); }
h3, .h3 { font-size: clamp(1.25rem, 1.05rem + .8vw, 1.55rem); }
h4, .h4 { font-size: 1.2rem; }
h5, .h5 { font-size: 1.05rem; }
h6, .h6 { font-size: .95rem; letter-spacing: .04em; text-transform: uppercase; }

p { margin: 0 0 1.15em; }

a {
    color: var(--ceb-blue);
    text-decoration-thickness: 1px;
    text-underline-offset: .18em;
    transition: color .15s ease;
}

a:hover,
a:focus-visible {
    color: var(--ceb-blue-dark);
}

/* Focus visibile e coerente su tutto il sito (requisito di accessibilità) */
:focus-visible {
    outline: 3px solid var(--ceb-focus);
    outline-offset: 2px;
    border-radius: 2px;
}

hr {
    border: 0;
    border-top: 1px solid var(--ceb-line);
    margin: 2rem 0;
    opacity: 1;
}

::selection {
    background: var(--ceb-gold-pale);
    color: var(--ceb-navy-dark);
}

.ceb-container {
    width: 100%;
    max-width: var(--ceb-container);
    margin-inline: auto;
    padding-inline: var(--ceb-gutter);
}

.ceb-skip-link {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, -120%);
    z-index: 2000;
    background: var(--ceb-navy);
    color: var(--ceb-white);
    padding: .7rem 1.25rem;
    border-radius: 0 0 var(--ceb-radius) var(--ceb-radius);
    font-weight: 600;
    text-decoration: none;
    transition: transform .18s ease;
}

.ceb-skip-link:focus {
    transform: translate(-50%, 0);
    color: var(--ceb-white);
}

/* --------------------------------------------------------------------------
   3. Testata
   -------------------------------------------------------------------------- */

.ceb-header {
    background: var(--ceb-white);
    /* Riga d'ottone sotto la barra dei menu: chiude la testata e riprende
       il colore caldo usato per gli accenti in tutto il sito. */
    border-bottom: 5px solid var(--ceb-gold);
    position: relative;
    z-index: 900;
}

.ceb-header.is-sticky {
    position: sticky;
    top: 0;
}

.ceb-header.is-scrolled {
    box-shadow: var(--ceb-shadow-md);
}

/* Barra di servizio: fondo bianco, con una riga sottile che la stacca
   dalla fascia del logo, anch'essa bianca. */
.ceb-topbar {
    background: var(--ceb-white);
    color: var(--ceb-muted);
    font-size: .875rem;
    border-bottom: 1px solid var(--ceb-line);
}

.ceb-topbar__inner {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1.25rem;
    min-height: 40px;
    flex-wrap: wrap;
}

.ceb-topbar a {
    color: var(--ceb-blue);
    text-decoration: none;
}

.ceb-topbar a:hover,
.ceb-topbar a:focus-visible {
    color: var(--ceb-navy);
    text-decoration: underline;
}

.ceb-topbar .mod-languages ul,
.ceb-topbar ul {
    display: flex;
    gap: .85rem;
    list-style: none;
    margin: 0;
    padding: 0;
    align-items: center;
}

.ceb-topbar .mod-languages img { display: none; }

.ceb-topbar .mod-languages a {
    font-size: .84rem;
    font-weight: 600;
    padding: .2rem .1rem;
    border-bottom: 2px solid transparent;
}

/* mod_languages porta con sé un proprio foglio di stile: qui lo neutralizziamo */
.ceb-topbar .mod-languages li,
.ceb-topbar .mod-languages li.lang-active {
    background: transparent;
    border: 0;
    padding: 0;
}

.ceb-topbar .mod-languages li.lang-active > a {
    color: var(--ceb-navy);
    border-bottom-color: var(--ceb-gold);
}

/* Con due moduli il primo va a sinistra e le lingue restano a destra;
   se resta solo il selettore lingua, deve stare a destra da solo. */
.ceb-topbar__inner:has(> :nth-child(2)) > :first-child { margin-inline-end: auto; }

/* Riga logo + azioni */
.ceb-header__main {
    background: var(--ceb-white);
}

.ceb-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding-block: .85rem;
}

.ceb-brand {
    display: flex;
    align-items: center;
    gap: 1rem;
    text-decoration: none;
    color: inherit;
    /* deve poter cedere spazio, ma non fino a schiacciare il logo */
    flex: 1 1 auto;
    min-width: 0;
}

.ceb-brand__logo {
    height: clamp(72px, 8.4vw, 116px);
    width: auto;
    flex: none;
}

.ceb-brand__text {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding-inline-start: 1.35rem;
}

/* Il filetto fra il marchio e il nome del sito. Il logo porta gia' scritto
   "COMUNITA' EBRAICA BOLOGNA" al suo interno: senza una divisione le stesse
   parole si leggono due volte di fila, in due caratteri diversi. */
.ceb-brand__text::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 62%;
    background: var(--ceb-line-strong);
}

.ceb-brand__name {
    font-family: var(--ceb-font-head);
    font-weight: 700;
    font-size: clamp(1.05rem, .8rem + .9vw, 1.5rem);
    line-height: 1.15;
    color: var(--ceb-navy);
    letter-spacing: -0.01em;
}

.ceb-brand__claim {
    font-size: .82rem;
    color: var(--ceb-muted);
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-top: .15rem;
}

.ceb-header__actions {
    position: relative;   /* aggancia i suggerimenti della ricerca */
    display: flex;
    align-items: center;
    gap: .5rem;
    flex: none;
}

.ceb-iconbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--ceb-line);
    border-radius: 50%;
    background: var(--ceb-white);
    color: var(--ceb-navy);
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.ceb-iconbtn:hover,
.ceb-iconbtn[aria-expanded="true"] {
    background: var(--ceb-navy);
    border-color: var(--ceb-navy);
    color: var(--ceb-white);
}

/* Pulsante di invito all'azione (donazioni) */
.ceb-header__cta .btn,
.ceb-header__cta a {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    background: var(--ceb-gold);
    color: var(--ceb-white);
    border: 0;
    border-radius: 999px;
    padding: .62rem 1.35rem;
    font-weight: 700;
    font-size: .95rem;
    text-decoration: none;
    box-shadow: var(--ceb-shadow-sm);
    transition: background .15s ease, transform .15s ease;
}

.ceb-header__cta a:hover,
.ceb-header__cta a:focus-visible {
    background: #855e18;
    color: var(--ceb-white);
    transform: translateY(-1px);
}

.ceb-header__cta p { margin: 0; }

/* Hamburger */
.ceb-burger {
    display: none;
    width: 46px;
    height: 44px;
    align-items: center;
    justify-content: center;
    background: var(--ceb-navy);
    border: 0;
    border-radius: var(--ceb-radius);
    cursor: pointer;
}

.ceb-burger__bars {
    display: block;
    width: 22px;
    height: 16px;
    position: relative;
}

.ceb-burger__bars span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--ceb-white);
    border-radius: 2px;
    transition: transform .2s ease, opacity .2s ease, top .2s ease;
}

.ceb-burger__bars span:nth-child(1) { top: 0; }
.ceb-burger__bars span:nth-child(2) { top: 7px; }
.ceb-burger__bars span:nth-child(3) { top: 14px; }

.ceb-burger[aria-expanded="true"] .ceb-burger__bars span:nth-child(1) { top: 7px; transform: rotate(45deg); }
.ceb-burger[aria-expanded="true"] .ceb-burger__bars span:nth-child(2) { opacity: 0; }
.ceb-burger[aria-expanded="true"] .ceb-burger__bars span:nth-child(3) { top: 7px; transform: rotate(-45deg); }

/* --------------------------------------------------------------------------
   4. Navigazione principale
   -------------------------------------------------------------------------- */

.ceb-nav {
    background: var(--ceb-navy);
}

.ceb-nav .ceb-menu {
    display: flex;
    /* Cassiopeia imposta flex-direction: column su .mod-menu */
    flex-direction: row;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
}

.ceb-nav .ceb-menu > li {
    position: relative;
}

.ceb-nav .ceb-menu > li > a,
.ceb-nav .ceb-menu > li > span.ceb-menu__sep {
    display: flex;
    align-items: center;
    gap: .35rem;
    padding: .95rem 1rem;
    color: rgba(255, 255, 255, .93);
    font-weight: 600;
    font-size: .95rem;
    letter-spacing: .015em;
    text-decoration: none;
    text-transform: uppercase;
    border-bottom: 3px solid transparent;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
    white-space: nowrap;
}

.ceb-nav .ceb-menu > li > a:hover,
.ceb-nav .ceb-menu > li.is-open > a,
.ceb-nav .ceb-menu > li:focus-within > a {
    background: var(--ceb-navy-soft);
    color: var(--ceb-white);
}

.ceb-nav .ceb-menu > li.current > a,
.ceb-nav .ceb-menu > li.active > a {
    border-bottom-color: var(--ceb-gold-bright);
    color: var(--ceb-white);
}

/* Freccia dei sottomenu */
.ceb-menu__caret {
    width: .55rem;
    height: .55rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translate(-1px, -1px);
    flex: none;
    transition: transform .2s ease;
}

/* Livelli successivi */
.ceb-nav .ceb-menu ul {
    list-style: none;
    margin: 0;
    padding: .4rem 0;
}

.ceb-nav .ceb-menu > li > ul {
    position: absolute;
    top: 100%;
    inset-inline-start: 0;
    min-width: 270px;
    max-width: 340px;
    background: var(--ceb-white);
    border: 1px solid var(--ceb-line);
    border-top: 3px solid var(--ceb-gold-bright);
    border-radius: 0 0 var(--ceb-radius) var(--ceb-radius);
    box-shadow: var(--ceb-shadow-md);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity .16s ease, transform .16s ease, visibility .16s;
    z-index: 20;
}

.ceb-nav .ceb-menu > li.is-open > ul,
.ceb-nav .ceb-menu > li:hover > ul,
.ceb-nav .ceb-menu > li:focus-within > ul {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.ceb-nav .ceb-menu ul a {
    display: block;
    padding: .55rem 1.1rem;
    color: var(--ceb-ink);
    font-size: .94rem;
    line-height: 1.35;
    text-decoration: none;
    border-inline-start: 3px solid transparent;
}

.ceb-nav .ceb-menu ul a:hover,
.ceb-nav .ceb-menu ul a:focus-visible {
    background: var(--ceb-paper);
    border-inline-start-color: var(--ceb-gold-bright);
    color: var(--ceb-navy);
}

.ceb-nav .ceb-menu ul li.current > a {
    font-weight: 700;
    color: var(--ceb-navy);
    border-inline-start-color: var(--ceb-gold-bright);
}

/* Terzo livello: a comparsa laterale su desktop */
.ceb-nav .ceb-menu ul ul {
    position: absolute;
    top: -.4rem;
    inset-inline-start: 100%;
    min-width: 250px;
    background: var(--ceb-white);
    border: 1px solid var(--ceb-line);
    border-radius: var(--ceb-radius);
    box-shadow: var(--ceb-shadow-md);
    opacity: 0;
    visibility: hidden;
    transition: opacity .16s ease, visibility .16s;
}

.ceb-nav .ceb-menu ul li:hover > ul,
.ceb-nav .ceb-menu ul li:focus-within > ul,
.ceb-nav .ceb-menu ul li.is-open > ul {
    opacity: 1;
    visibility: visible;
}

.ceb-nav .ceb-menu li.parent > a::after {
    content: "";
    display: inline-block;
    width: .45rem;
    height: .45rem;
    margin-inline-start: .5rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    opacity: .6;
}

.ceb-nav .ceb-menu > li.parent > a::after {
    transform: rotate(45deg);
}

/* Pulsante di apertura sottomenu: solo su mobile */
.ceb-menu__toggle {
    display: none;
    background: transparent;
    border: 0;
    color: inherit;
    width: 46px;
    align-self: stretch;
    cursor: pointer;
}

/* Sfondo scuro dietro al menu mobile.
   Deve restare SOTTO .ceb-header (z-index 900), non sopra: il pannello del menu
   sta dentro l'intestazione, quindi il suo z-index 1000 vale solo fra i fratelli
   li' dentro e verso l'esterno conta come 900. Con lo sfondo a 950 finiva sopra
   al menu e si mangiava tutti i tocchi sulle voci: si vedevano ma non si
   cliccavano. */
.ceb-nav-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(13, 39, 64, .55);
    z-index: 880;
    opacity: 0;
    transition: opacity .2s ease;
}

.ceb-nav-backdrop.is-visible { opacity: 1; }

/* --------------------------------------------------------------------------
   4b. Navigazione su schermi piccoli: pannello laterale
   -------------------------------------------------------------------------- */

@media (max-width: 991.98px) {

    .ceb-burger { display: inline-flex; }

    .ceb-nav {
        position: fixed;
        top: 0;
        inset-inline-end: 0;
        width: min(92vw, 380px);
        height: 100dvh;
        overflow-y: auto;
        overscroll-behavior: contain;
        background: var(--ceb-navy);
        z-index: 1000;
        transform: translateX(105%);
        transition: transform .25s ease;
        padding-block: 5rem 2rem;
        box-shadow: -8px 0 30px rgba(13, 39, 64, .3);
    }

    html[dir="rtl"] .ceb-nav { transform: translateX(-105%); }

    .ceb-nav.is-open { transform: translateX(0); }

    .ceb-nav .ceb-menu { display: block; flex-direction: column; }

    .ceb-nav .ceb-menu > li,
    .ceb-nav .ceb-menu li {
        position: static;
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
        border-bottom: 1px solid rgba(255, 255, 255, .1);
    }

    .ceb-nav .ceb-menu > li > a,
    .ceb-nav .ceb-menu ul a {
        flex: 1;
        white-space: normal;
        border-bottom: 0;
        border-inline-start: 0;
        color: rgba(255, 255, 255, .93);
        padding: .85rem .25rem;
        text-transform: none;
        font-size: 1rem;
    }

    .ceb-nav .ceb-menu > li > a { text-transform: uppercase; font-size: .95rem; }

    .ceb-nav .ceb-menu ul a:hover,
    .ceb-nav .ceb-menu ul a:focus-visible {
        background: rgba(255, 255, 255, .08);
        color: var(--ceb-white);
    }

    .ceb-nav .ceb-menu li.parent > a::after { display: none; }

    .ceb-menu__toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: rgba(255, 255, 255, .75);
    }

    .ceb-menu__toggle .ceb-menu__caret { transition: transform .2s ease; }
    .ceb-menu__toggle[aria-expanded="true"] .ceb-menu__caret { transform: rotate(-135deg) translate(-2px, -2px); }

    /* I sottomenu diventano fisarmoniche.
       I selettori vanno ripetuti tutti e tre: le regole per schermo grande sono
       `.ceb-nav .ceb-menu > li > ul` e `.ceb-nav .ceb-menu ul ul`, che pesano
       piu' di `.ceb-nav .ceb-menu ul` e vincono anche se stanno prima. Con il
       solo selettore generico il sottomenu restava assoluto a `top: 100%`, cioe'
       all'altezza del pannello: si apriva sotto il bordo dello schermo e non lo
       vedeva nessuno. */
    .ceb-nav .ceb-menu ul,
    .ceb-nav .ceb-menu > li > ul,
    .ceb-nav .ceb-menu ul ul {
        position: static;
        top: auto;
        inset-inline-start: auto;
        flex: 0 0 100%;
        display: none;
        opacity: 1;
        visibility: visible;
        transform: none;
        min-width: 0;
        max-width: none;
        background: rgba(0, 0, 0, .18);
        border: 0;
        border-radius: 0;
        box-shadow: none;
        padding-inline-start: 1rem;
    }

    .ceb-nav .ceb-menu li.is-open > ul { display: block; }
    .ceb-nav .ceb-menu > li:hover > ul,
    .ceb-nav .ceb-menu li:hover > ul,
    .ceb-nav .ceb-menu li:focus-within > ul { display: none; }
    .ceb-nav .ceb-menu li.is-open > ul { display: block; }

    body.has-nav-open { overflow: hidden; }
}

@media (min-width: 992px) {
    .ceb-nav-backdrop { display: none !important; }
}

/* --------------------------------------------------------------------------
   4c. Testata sui formati ridotti
   -------------------------------------------------------------------------- */

@media (max-width: 991.98px) {
    /* La voce "Offerte" resta nel menu: qui il pulsante toglierebbe spazio al logo */
    .ceb-header__cta { display: none; }
    .ceb-brand__claim { display: none; }
    .ceb-header__inner { gap: .75rem; }
    .ceb-header__actions { gap: .35rem; }
}

@media (max-width: 767.98px) {
    .ceb-brand__logo { height: 64px; }
    .ceb-brand__name { font-size: 1.02rem; }
    .ceb-brand { gap: .6rem; }

    /* stretti si toglie: ogni punto di larghezza serve al nome */
    .ceb-brand__text { padding-inline-start: 0; }
    .ceb-brand__text::before { display: none; }
}

@media (max-width: 575.98px) {
    .ceb-topbar { font-size: .8rem; }
    .ceb-topbar__inner { justify-content: space-between; gap: .5rem; min-height: 34px; }
    /* Su schermo stretto resta il numero di telefono, l'indirizzo passa al piè di pagina */
    .ceb-topbar__contacts li:not(:first-child) { display: none; }
    .ceb-brand__name { font-size: .95rem; }
}

/* --------------------------------------------------------------------------
   5. Pannello di ricerca
   -------------------------------------------------------------------------- */

/* --- ricerca in testata: il campo si apre di fianco alla lente --- */
.ceb-ricerca {
    display: flex;
    align-items: center;
    gap: 0;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.ceb-ricerca.is-aperta {
    background: var(--ceb-paper);
    border-color: var(--ceb-line-strong);
}

/* Scrivendo nel campo la pillola si scurisce appena, restando nei toni caldi
   del sito. Prima prendeva un bordo blu con l'alone attorno: appariva una riga
   colorata proprio in cima alla pagina, che dava fastidio a ogni clic. */
.ceb-ricerca.is-aperta:focus-within {
    border-color: var(--ceb-line-strong);
    background: var(--ceb-white);
}

.ceb-ricerca input.ceb-ricerca__campo {
    /* Il tag va ripetuto: regole come ".awesomplete > input" sono piu
       specifiche della sola classe e rimetterebbero imbottitura e bordi.
       Senza questo il campo è un elemento flessibile che si lascia comprimere
       dalla testata e la larghezza impostata viene ignorata */
    flex: none;
    width: 0;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: .95rem;
    color: var(--ceb-ink);
    opacity: 0;
    transition: width .26s cubic-bezier(.4, 0, .2, 1), padding .26s cubic-bezier(.4, 0, .2, 1), opacity .18s ease;
}

/* Nessun contorno quando si clicca con il mouse. Chi naviga con il Tab deve
   però vedere dove si trova: l'attributo lo mette ceb5.js quando riconosce la
   tastiera, e il segno è in oro invece che in blu. */
.ceb-ricerca input.ceb-ricerca__campo:focus { outline: 0; }

[data-tastiera] .ceb-ricerca input.ceb-ricerca__campo:focus {
    outline: 2px solid var(--ceb-gold);
    outline-offset: 3px;
    border-radius: 999px;
}

.ceb-ricerca.is-aperta input.ceb-ricerca__campo {
    width: clamp(150px, 20vw, 230px);
    padding: .5rem .35rem .5rem 1.05rem;
    opacity: 1;
}

/* la crocetta di serie dei campi di ricerca stona con il disegno */
.ceb-ricerca__campo::-webkit-search-cancel-button { display: none; }

.ceb-ricerca__lente {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex: none;
    padding: 0;
    border: 1px solid var(--ceb-line);
    border-radius: 50%;
    background: var(--ceb-white);
    color: var(--ceb-navy);
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.ceb-ricerca__lente:hover {
    background: var(--ceb-navy);
    border-color: var(--ceb-navy);
    color: var(--ceb-white);
}

/* aperta, la lente perde il proprio contorno e diventa parte della pillola */
.ceb-ricerca.is-aperta .ceb-ricerca__lente {
    border-color: transparent;
    background: transparent;
    color: var(--ceb-navy);
}

.ceb-ricerca.is-aperta .ceb-ricerca__lente:hover {
    color: var(--ceb-gold);
}

/* I suggerimenti di Joomla escono da un contenitore che va agganciato al campo */
.ceb-ricerca .awesomplete { display: contents; }

.ceb-ricerca .awesomplete > ul {
    position: absolute;
    inset-inline-end: 0;
    top: calc(100% + .4rem);
    z-index: 30;
    min-width: 240px;
    max-width: min(360px, 90vw);
    padding: .3rem;
    background: var(--ceb-white);
    border: 1px solid var(--ceb-line-strong);
    border-radius: var(--ceb-radius);
    box-shadow: var(--ceb-shadow-md);
}

.ceb-ricerca .awesomplete > ul > li {
    padding: .45rem .6rem;
    border-radius: calc(var(--ceb-radius) - 3px);
    font-size: .92rem;
    line-height: 1.35;
    color: var(--ceb-ink);
    cursor: pointer;
}

.ceb-ricerca .awesomplete > ul > li:hover,
.ceb-ricerca .awesomplete > ul > li[aria-selected="true"] {
    background: var(--ceb-paper);
    color: var(--ceb-navy);
}

/* Awesomplete evidenzia le lettere digitate in giallo fluo: qui diventa un
   semplice neretto, che si legge senza gridare. */
.ceb-ricerca .awesomplete mark {
    padding: 0;
    font-weight: 700;
    color: inherit;
    background: transparent;
}

.ceb-searchpanel {
    background: var(--ceb-paper);
    border-bottom: 1px solid var(--ceb-line);
    padding-block: 1rem;
}

.ceb-searchpanel[hidden] { display: none; }

.ceb-searchpanel form {
    max-width: 620px;
    margin-inline: auto;
}

.ceb-searchpanel .mod-finder__search,
.ceb-searchpanel .input-group {
    display: flex;
    gap: .5rem;
}

.ceb-searchpanel input[type="text"],
.ceb-searchpanel input[type="search"] {
    flex: 1;
    min-width: 0;
    padding: .7rem 1rem;
    border: 1px solid var(--ceb-line-strong);
    border-radius: var(--ceb-radius);
    font-size: 1rem;
    background: var(--ceb-white);
}

.ceb-searchpanel .btn,
.ceb-searchpanel button {
    flex: none;
    background: var(--ceb-navy);
    color: var(--ceb-white);
    border: 0;
    border-radius: var(--ceb-radius);
    padding: .7rem 1.4rem;
    font-weight: 600;
}

.ceb-searchpanel .btn:hover { background: var(--ceb-navy-soft); }

/* Suggerimenti automatici di Smart Search */
.ceb-searchpanel .awesomplete > ul {
    background: var(--ceb-white);
    border: 1px solid var(--ceb-line);
    box-shadow: var(--ceb-shadow-md);
    border-radius: var(--ceb-radius);
}

/* Recapiti nella barra di servizio */
.ceb-topbar__contacts {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem 1.1rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.ceb-topbar__contacts li {
    display: flex;
    align-items: center;
    gap: .35rem;
}


/* --------------------------------------------------------------------------
   6. Slider di apertura
   -------------------------------------------------------------------------- */

.ceb-hero { background: var(--ceb-navy-dark); }

.ceb-slider {
    position: relative;
    overflow: hidden;
}

.ceb-slider__track {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ceb-slider__slide {
    position: relative;
    flex: 0 0 100%;
    min-width: 100%;
}

.ceb-slider__slide img {
    display: block;
    width: 100%;
    height: clamp(240px, 46vw, 560px);
    object-fit: cover;
}

.ceb-slider__caption {
    position: absolute;
    inset-inline-start: 0;
    bottom: 0;
    width: 100%;
    padding: 3.5rem var(--ceb-gutter) 1.75rem;
    background: linear-gradient(to top, rgba(13, 39, 64, .88), rgba(13, 39, 64, 0));
    color: var(--ceb-white);
}

.ceb-slider__caption-inner {
    max-width: var(--ceb-container);
    margin-inline: auto;
}

.ceb-slider__title {
    font-family: var(--ceb-font-head);
    font-size: clamp(1.3rem, 1rem + 1.6vw, 2.1rem);
    color: var(--ceb-white);
    margin: 0 0 .25rem;
}

.ceb-slider__text {
    margin: 0;
    font-size: 1rem;
    color: rgba(255, 255, 255, .9);
    max-width: 60ch;
}

.ceb-slider__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .85);
    color: var(--ceb-navy);
    cursor: pointer;
    transition: background .15s ease;
}

.ceb-slider__nav:hover { background: var(--ceb-white); }
.ceb-slider__nav--prev { inset-inline-start: 1rem; }
.ceb-slider__nav--next { inset-inline-end: 1rem; }

.ceb-slider__dots {
    position: absolute;
    bottom: .85rem;
    inset-inline: 0;
    display: flex;
    justify-content: center;
    gap: .45rem;
    padding: 0;
    margin: 0;
    list-style: none;
    z-index: 3;
}

.ceb-slider__dot {
    width: 11px;
    height: 11px;
    padding: 0;
    border: 2px solid rgba(255, 255, 255, .85);
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
}

.ceb-slider__dot[aria-current="true"] {
    background: var(--ceb-gold-bright);
    border-color: var(--ceb-gold-bright);
}

/* --------------------------------------------------------------------------
   7. Fascia "in evidenza"
   -------------------------------------------------------------------------- */

.ceb-features {
    background: var(--ceb-paper);
    border-bottom: 1px solid var(--ceb-line);
    padding-block: clamp(1.75rem, 4vw, 2.75rem);
}

.ceb-features__grid {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

/* Il numero di colonne arriva dal template, che conta i riquadri davvero
   presenti: cambiano da una lingua all'altra. */
@media (min-width: 1000px) {
    .ceb-features__grid {
        grid-template-columns: var(--ceb-features-cols, repeat(auto-fit, minmax(230px, 1fr)));
    }

    /* Quando la lingua ha un solo riquadro (in inglese esiste il solo Shabbat)
       non deve stirarsi per tutta la fascia: resta di misura normale. */
    .ceb-features__grid:has(> :only-child) {
        grid-template-columns: minmax(0, 400px);
    }
}

/* --- riquadro del prossimo Shabbat --- */
.ceb-shabbatcard {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--ceb-navy);
    color: var(--ceb-white);
    border-radius: var(--ceb-radius);
    border-top: 3px solid var(--ceb-gold-bright);
    padding: 1.1rem 1.25rem 1.25rem;
    box-shadow: var(--ceb-shadow-md);
}

/* Miniatura "Shabbat Shalom": è una miniatura miniata su carta chiara, quindi
   sul blu si stacca da sola. Il filetto dorato la lega al resto del riquadro. */
.ceb-shabbatcard__figura {
    display: block;
    width: 140px;
    height: auto;
    margin: 0 0 .7rem;
    border-radius: 6px;
    border: 1px solid rgba(201, 162, 39, .55);
    flex: none;
}

.ceb-shabbatcard__label {
    margin: 0 0 .35rem;
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ceb-gold-bright);
}

/* Data e orari sono un unico bersaglio cliccabile che porta alla pagina di quel
   sabato. Sta dentro una scheda blu, quindi non prende il colore dei link: il
   segno che è cliccabile lo dà il movimento al passaggio del mouse. Quando la
   settimana non ha ancora la sua pagina lo stesso blocco è un div, e queste
   regole semplicemente non si applicano. */
a.ceb-shabbatcard__quando {
    display: block;
    color: inherit;
    text-decoration: none;
    border-radius: var(--ceb-radius);
    transition: background .18s ease;
    /* Il bersaglio era largo quanto il testo: qui si allarga e prende aria
       sopra e sotto, perché conta soprattutto da telefono, dove si punta con il
       dito. Il margine negativo compensa il riempimento, così il testo resta
       dov'era e cambia solo la superficie su cui si può premere.
       Resta uno stacco dal bordo della scheda: arrivandoci a ridosso, l'area
       evidenziata sembrava mangiarne il contorno arrotondato. */
    margin: -.5rem -.5rem -.35rem;
    padding: .5rem .5rem .35rem;
}

/* Nessuno spostamento: la scheda non si muove, si limita a schiarirsi appena.
   Il sollevamento faceva ballare un rettangolo grande quanto mezza scheda. */
a.ceb-shabbatcard__quando:hover,
a.ceb-shabbatcard__quando:focus-visible {
    background: rgba(255, 255, 255, .07);
}

a.ceb-shabbatcard__quando:focus-visible {
    outline: 2px solid var(--ceb-gold-bright);
    outline-offset: 3px;
}

.ceb-shabbatcard__date {
    margin: 0 0 .9rem;
    font-family: var(--ceb-font-head);
    font-size: 1.4rem;
    line-height: 1.15;
    color: var(--ceb-white);
}

.ceb-shabbatcard__times {
    display: flex;
    gap: 1.75rem;
    margin: 0 0 1rem;
}

.ceb-shabbatcard__times div {
    display: flex;
    flex-direction: column;
    gap: .1rem;
}

.ceb-shabbatcard__times dt {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .72);
}

.ceb-shabbatcard__times dd {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.ceb-shabbatcard__link {
    margin-top: auto;
    align-self: flex-start;
    color: var(--ceb-gold-bright);
    font-size: .9rem;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid rgba(201, 162, 39, .5);
    padding-bottom: .1rem;
}

.ceb-shabbatcard__link:hover,
.ceb-shabbatcard__link:focus-visible {
    color: var(--ceb-white);
    border-bottom-color: var(--ceb-white);
}

/* --- titolo di sezione --- */
.ceb-sectiontitle {
    margin: 0 0 1.5rem;
    padding-bottom: .7rem;
    font-size: clamp(1.35rem, 1.1rem + 1vw, 1.8rem);
    border-bottom: 1px solid var(--ceb-line);
    position: relative;
}

.ceb-sectiontitle::after {
    content: "";
    position: absolute;
    bottom: -1px;
    inset-inline-start: 0;
    width: 64px;
    height: 3px;
    background: var(--ceb-gold-bright);
}

/* --- tessere di scoperta --- */
.ceb-tiles {
    background: var(--ceb-paper);
    border-top: 1px solid var(--ceb-line);
    padding-block: clamp(2.25rem, 5vw, 3.5rem);
}

.ceb-tiles__grid {
    display: grid;
    gap: 1.1rem;
    grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
    list-style: none;
    margin: 0;
    padding: 0;
}

.ceb-tile {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: var(--ceb-radius-lg);
    aspect-ratio: 4 / 3;
    text-decoration: none;
    box-shadow: var(--ceb-shadow-sm);
    background: var(--ceb-navy-dark);
}

.ceb-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .45s ease, opacity .3s ease;
    opacity: .82;
}

.ceb-tile:hover img,
.ceb-tile:focus-visible img {
    transform: scale(1.06);
    opacity: 1;
}

.ceb-tile__label {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    padding: 2.5rem 1rem .95rem;
    background: linear-gradient(to top, rgba(13, 39, 64, .92), rgba(13, 39, 64, 0));
    color: var(--ceb-white);
    font-family: var(--ceb-font-head);
    font-size: 1.12rem;
    font-weight: 700;
    line-height: 1.2;
}

.ceb-tile__label small {
    display: block;
    margin-top: .2rem;
    font-family: var(--ceb-font-body);
    font-size: .8rem;
    font-weight: 400;
    color: rgba(255, 255, 255, .82);
}

.ceb-features .card {
    height: 100%;
    background: var(--ceb-white);
    border: 1px solid var(--ceb-line);
    border-top: 3px solid var(--ceb-gold-bright);
    border-radius: var(--ceb-radius);
    box-shadow: var(--ceb-shadow-sm);
    overflow: hidden;
}

.ceb-features .card-header {
    background: transparent;
    border-bottom: 1px solid var(--ceb-line);
    padding: .9rem 1.1rem .6rem;
}

.ceb-features .card-header h3,
.ceb-features .card-header .card-header-title {
    margin: 0;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--ceb-gold);
    font-family: var(--ceb-font-body);
}

.ceb-features .card-body {
    padding: 1.1rem 1.25rem 1.25rem;
    font-size: .96rem;
}

.ceb-features .card-body p:last-child { margin-bottom: 0; }

/* I moduli di questa fascia sono scritti a mano nell'editor e portano
   allineamenti e corpi in linea: qui vengono ricondotti a un aspetto unico,
   coerente con il riquadro dello Shabbat accanto. */
.ceb-features .card-body,
.ceb-features .card-body span,
.ceb-features .card-body strong,
.ceb-features .card-body p {
    font-family: var(--ceb-font-body) !important;
    text-align: start !important;
    line-height: 1.4;
}

.ceb-features .card-body p {
    margin: 0;
}

.ceb-features .card-body img {
    display: block;
    /* La misura sta qui e non nel testo dei riquadri: le immagini portano
       ancora le dimensioni scritte a mano nel contenuto, diverse fra loro,
       e da qui valgono per tutti e sei i riquadri - italiani e inglesi -
       senza dover riaprire ogni modulo. */
    width: 130px;
    height: auto;
    margin: 0 0 .8rem !important;
    float: none !important;
    border-radius: 6px;
}

.ceb-features .card-body br { display: none; }

/* l'etichetta del riquadro */
.ceb-features .card-body strong {
    display: block;
    font-size: .76rem !important;
    font-weight: 700;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--ceb-gold);
}

/* il titolo dell'articolo collegato */
.ceb-features .card-body a {
    display: block;
    margin-top: .45rem;
    font-family: var(--ceb-font-head) !important;
    font-size: 1.05rem !important;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ceb-navy);
    text-decoration: none;
}

.ceb-features .card-body a:hover,
.ceb-features .card-body a:focus-visible {
    color: var(--ceb-blue);
    text-decoration: underline;
}

/* --------------------------------------------------------------------------
   8. Impaginazione dei contenuti
   -------------------------------------------------------------------------- */

.ceb-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(1.5rem, 3vw, 2.75rem);
    padding-block: clamp(1.75rem, 4vw, 3rem);
    align-items: start;
}

@media (min-width: 992px) {
    /* Colonna dei riquadri fissi: leggermente più stretta, così le locandine
       non pesano quanto le notizie accanto. */
    .ceb-grid.has-sidebar-right { grid-template-columns: minmax(0, 1fr) 270px; }
    .ceb-grid.has-sidebar-left  { grid-template-columns: 300px minmax(0, 1fr); }
    .ceb-grid.has-sidebar-left.has-sidebar-right { grid-template-columns: 260px minmax(0, 1fr) 300px; }
    .ceb-grid.has-sidebar-left .ceb-sidebar--left { order: -1; }
}

.ceb-main { min-width: 0; }

.ceb-breadcrumbs {
    padding-top: 1rem;
    font-size: .875rem;
}

.ceb-breadcrumbs .breadcrumb {
    background: transparent;
    /* Joomla applica px-3 py-2 di Bootstrap: qui sfalserebbe l'allineamento
       col titolo sottostante */
    padding: 0 !important;
    margin: 0;
    gap: .15rem;
    flex-wrap: wrap;
}

.ceb-breadcrumbs .breadcrumb-item,
.ceb-breadcrumbs .breadcrumb-item a { color: var(--ceb-muted); }
.ceb-breadcrumbs .breadcrumb-item.active span { color: var(--ceb-ink); font-weight: 600; }

.ceb-top-a, .ceb-top-b, .ceb-bottom-a, .ceb-bottom-b {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    padding-block: 1.25rem;
    /* le schede si fermano dove finisce il contenuto, senza allungarsi
       fino alla più alta della riga */
    align-items: start;
}

/* Questi moduli contengono soltanto un'immagine, spesso con il testo già
   dentro: la scheda si adatta all'immagine invece di lasciarle attorno un
   bordo bianco sproporzionato. */
.ceb-bottom-a .card,
.ceb-bottom-b .card {
    overflow: hidden;
    margin-bottom: 0;
}

.ceb-bottom-a .card-body,
.ceb-bottom-b .card-body {
    padding: 0;
}

.ceb-bottom-a .card-body p,
.ceb-bottom-b .card-body p {
    margin: 0;
}

.ceb-bottom-a .card-body a,
.ceb-bottom-b .card-body a {
    display: block;
}

.ceb-bottom-a .card-body img,
.ceb-bottom-b .card-body img {
    display: block;
    width: 100%;
    height: auto;
}

/* --------------------------------------------------------------------------
   9. Articoli e blog
   -------------------------------------------------------------------------- */

.page-header h1,
.page-header h2 {
    margin-bottom: .35rem;
}

.page-header {
    margin-bottom: 1.5rem;
    padding-bottom: .9rem;
    border-bottom: 2px solid var(--ceb-line);
    position: relative;
}

.page-header::after {
    content: "";
    position: absolute;
    bottom: -2px;
    inset-inline-start: 0;
    width: 72px;
    height: 2px;
    background: var(--ceb-gold-bright);
}

.com-content-article__body,
.item-content,
.com-content-category-blog__item .item-content {
    min-width: 0;
}

/* Le immagini dei vecchi articoli hanno larghezze fisse in linea:
   le riportiamo dentro i limiti del contenitore. */
.ceb-main img,
.ceb-features img,
.ceb-sidebar img,
.ceb-footer img {
    max-width: 100%;
    height: auto;
}

.ceb-main iframe,
.ceb-main video,
.ceb-main embed,
.ceb-main object {
    max-width: 100%;
}

.ceb-main table {
    max-width: 100%;
    border-collapse: collapse;
}

/* Le tabelle larghe scorrono invece di sfondare il layout */
.ceb-main .table-responsive-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 1.25rem;
}

.ceb-main table td,
.ceb-main table th {
    padding: .5rem .65rem;
    border: 1px solid var(--ceb-line);
    vertical-align: top;
}

.ceb-main table th {
    background: var(--ceb-paper);
    font-weight: 700;
    text-align: start;
}

/* Griglia di articoli */
.blog-items,
.com-content-category-blog__items {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    margin-bottom: 2rem;
}

/* Quando Joomla dichiara il numero di colonne lo rispettiamo: in home sono
   quattro notizie disposte due per riga, e devono restare due anche se la
   colonna centrale si allarga. */
@media (min-width: 700px) {
    .blog-items.columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .blog-items.columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

    /* Tutte le schede alte uguale, anche fra una riga e l'altra: i testi degli
       articoli hanno lunghezze diverse e senza questo le quattro caselle
       risultavano sfalsate. */
    .blog-items.columns-2,
    .blog-items.columns-3 { grid-auto-rows: 1fr; }
}

.blog-items.items-leading,
.com-content-category-blog__items.items-leading {
    grid-template-columns: minmax(0, 1fr);
}

.blog-item,
.com-content-category-blog__item {
    display: flex;
    flex-direction: column;
    background: var(--ceb-white);
    border: 1px solid var(--ceb-line);
    border-radius: var(--ceb-radius-lg);
    overflow: hidden;
    box-shadow: var(--ceb-shadow-sm);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.blog-item:hover,
.com-content-category-blog__item:hover {
    transform: translateY(-2px);
    box-shadow: var(--ceb-shadow-md);
    border-color: var(--ceb-line-strong);
}

.blog-item .item-content,
.com-content-category-blog__item .item-content {
    padding: 1.25rem 1.35rem 1.35rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.blog-item .page-header,
.com-content-category-blog__item .page-header {
    border: 0;
    padding: 0;
    margin-bottom: .5rem;
}

.blog-item .page-header::after,
.com-content-category-blog__item .page-header::after { display: none; }

.blog-item .page-header h2,
.com-content-category-blog__item .page-header h2 {
    font-size: 1.3rem;
    margin: 0;
}

.blog-item .page-header h2 a,
.com-content-category-blog__item .page-header h2 a {
    color: var(--ceb-navy);
    text-decoration: none;
}

.blog-item .page-header h2 a:hover,
.blog-item .page-header h2 a:focus-visible {
    color: var(--ceb-blue);
    text-decoration: underline;
}

/* Scheda articolo generata dall'override ceb5-card */
.blog-item .item-title,
.com-content-category-blog__item .item-title {
    font-size: 1.28rem;
    line-height: 1.3;
    margin: 0 0 .5rem;
}

.blog-item .item-title a,
.com-content-category-blog__item .item-title a {
    color: var(--ceb-navy);
    text-decoration: none;
}

.blog-item .item-title a:hover,
.blog-item .item-title a:focus-visible,
.com-content-category-blog__item .item-title a:hover {
    color: var(--ceb-blue);
    text-decoration: underline;
}

.ceb-card__cat {
    margin: 0 0 .4rem;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ceb-gold);
}

.ceb-card__date {
    margin: 0 0 .6rem;
    font-size: .82rem;
    color: var(--ceb-muted);
}

.ceb-card__excerpt {
    margin: 0;
    color: var(--ceb-ink);
    font-size: .97rem;
}

.ceb-card__image {
    display: block;
    text-decoration: none;
}

/* La prima scheda, a tutta larghezza, si dispone su due colonne */
@media (min-width: 720px) {
    .items-leading .blog-item,
    .items-leading .com-content-category-blog__item {
        flex-direction: row;
    }

    .items-leading .blog-item .item-image,
    .items-leading .com-content-category-blog__item .item-image {
        flex: 0 0 46%;
        aspect-ratio: 4 / 3;
        max-height: 420px;
    }

    .items-leading .blog-item .item-content,
    .items-leading .com-content-category-blog__item .item-content {
        justify-content: center;
        padding: 2rem 2.25rem;
    }

    .items-leading .blog-item .item-title {
        font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem);
    }

    .items-leading .ceb-card__excerpt { font-size: 1.03rem; }
}

/* Immagine di apertura dell'articolo nella griglia.
   Viene mostrata intera: niente ritagli che tagliano la testa alle persone o
   metà locandina. Lo spazio che avanza è riempito dalla stessa foto sfocata
   e ingrandita, che fa da passe-partout colorato. */
.blog-item .item-image,
.com-content-category-blog__item .item-image {
    position: relative;
    margin: 0;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--ceb-paper-deep);
}

.blog-item .item-image::before,
.com-content-category-blog__item .item-image::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--ceb-card-sfondo);
    background-size: cover;
    background-position: center;
    filter: blur(22px) saturate(1.15);
    transform: scale(1.2);
    opacity: .55;
}

.blog-item .item-image img,
.com-content-category-blog__item .item-image img {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: .5rem;
}

/* Riga informativa */
.article-info,
.com-content-article__info {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem 1rem;
    margin: 0 0 .85rem;
    padding: 0;
    font-size: .84rem;
    color: var(--ceb-muted);
    list-style: none;
}

.article-info dd { margin: 0; }
.article-info .article-info-term { display: none; }

.readmore { margin-top: auto; padding-top: 1rem; }

.readmore .btn,
.readmore a {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: transparent;
    color: var(--ceb-blue);
    border: 1px solid var(--ceb-line-strong);
    border-radius: 999px;
    padding: .42rem 1.1rem;
    font-size: .9rem;
    font-weight: 600;
    text-decoration: none;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.readmore a:hover,
.readmore a:focus-visible,
.readmore .btn:hover {
    background: var(--ceb-navy);
    border-color: var(--ceb-navy);
    color: var(--ceb-white);
}

/* Articolo singolo */
/* Senza colonna laterale la lettura è più comoda con la misura contenuta
   e il testo centrato nella pagina. */
.item-page {
    max-width: 78ch;
    margin-inline: auto;
}

.ceb-grid.has-sidebar-right .item-page,
.ceb-grid.has-sidebar-left .item-page {
    max-width: none;
}

.item-page > .page-header + .article-info { margin-top: -.4rem; }

.item-page blockquote {
    margin: 1.75rem 0;
    padding: .35rem 0 .35rem 1.35rem;
    border-inline-start: 4px solid var(--ceb-gold-bright);
    font-family: var(--ceb-font-head);
    font-size: 1.15rem;
    color: var(--ceb-navy);
}

.item-page ul, .item-page ol { margin-bottom: 1.15em; }
.item-page li { margin-bottom: .3em; }

/* Elenco di categorie prodotto da Joomla senza il nostro override.
   La pagina di sezione ha il suo layout in ".ceb-sezioni": se ci fosse anche
   questa regola, quell'elenco diventerebbe una casella di un'altra griglia e
   si stringerebbe alla larghezza del contenuto. */
.com-content-categories__items,
.categories-list:not(.ceb-sezione) {
    display: grid;
    gap: 1.15rem;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    list-style: none;
    padding: 0;
}

.com-content-categories__items .list-group-item,
.categories-list .list-group-item {
    border: 1px solid var(--ceb-line);
    border-radius: var(--ceb-radius-lg);
    padding: 1.15rem 1.25rem;
    background: var(--ceb-white);
    box-shadow: var(--ceb-shadow-sm);
}

/* Paginazione */
.pagination {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    justify-content: center;
    list-style: none;
    padding: 0;
    margin: 2rem 0 1rem;
}

.pagination .page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    padding: 0 .7rem;
    border: 1px solid var(--ceb-line);
    border-radius: var(--ceb-radius);
    color: var(--ceb-navy);
    background: var(--ceb-white);
    text-decoration: none;
    font-weight: 600;
}

.pagination .page-item.active .page-link,
.pagination .page-link:hover {
    background: var(--ceb-navy);
    border-color: var(--ceb-navy);
    color: var(--ceb-white);
}

.pagination .page-item.disabled .page-link {
    color: var(--ceb-muted);
    opacity: .55;
}

.counter, .pagination-counter {
    text-align: center;
    color: var(--ceb-muted);
    font-size: .875rem;
}

/* --------------------------------------------------------------------------
   10. Moduli in colonna
   -------------------------------------------------------------------------- */

.ceb-sidebar .card,
.ceb-top-a .card,
.ceb-top-b .card,
.ceb-bottom-a .card,
.ceb-bottom-b .card {
    background: var(--ceb-white);
    border: 1px solid var(--ceb-line);
    border-radius: var(--ceb-radius-lg);
    box-shadow: var(--ceb-shadow-sm);
    margin-bottom: 1.5rem;
    overflow: hidden;
}

.ceb-sidebar .card-header,
.ceb-top-a .card-header,
.ceb-bottom-a .card-header {
    background: var(--ceb-navy);
    border: 0;
    padding: .8rem 1.15rem;
}

.ceb-sidebar .card-header h3,
.ceb-sidebar .card-header .card-header-title,
.ceb-top-a .card-header h3,
.ceb-bottom-a .card-header h3 {
    margin: 0;
    color: var(--ceb-white);
    font-family: var(--ceb-font-body);
    font-size: .88rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* Le schede fotografiche della colonna destra - il calendario e le visite -
   sono già una scheda: hanno la loro cornice, i loro angoli e la loro ombra.
   Dentro la cornice bianca del modulo diventavano una scheda dentro una
   scheda, e si vedeva. Qui la cornice esterna sparisce e restano nude come il
   riquadro del capo mese, che il modello disegna da sé e quindi non ne ha
   mai avuta una. */
/* Il capo mese e le tessere con la foto disegnano gia' il proprio riquadro:
   la cornice bianca del modulo, attorno, ne farebbe due uno dentro l'altro.
   Il capo mese e' entrato in questo elenco quando e' passato da riquadro
   scritto nel modello a modulo vero, per poterne cambiare il collegamento. */
.ceb-sidebar .card:has(.ceb-roshcard),
.ceb-sidebar .card:has(.ceb-fotocard) {
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
    /* il margine sotto ce l'ha già la scheda: qui raddoppierebbe */
    margin-bottom: 0;
}

.ceb-sidebar .card:has(.ceb-roshcard) .card-body,
.ceb-sidebar .card:has(.ceb-fotocard) .card-body { padding: 0; }

.ceb-sidebar .card-body { padding: 1.1rem 1.15rem; font-size: .96rem; }
.ceb-sidebar .card-body > :last-child { margin-bottom: 0; }
.ceb-sidebar img { border-radius: var(--ceb-radius); }


/* --- riquadro-invito della colonna destra ----------------------------------
   Un richiamo a una pagina, con l'immagine in cima e due righe di testo.
   Tutto il riquadro è un unico collegamento: si clicca dovunque, non solo
   sulla scritta. Le righe interne sono <span> e non <p> perché stanno dentro
   una <a>, e un paragrafo dentro un collegamento non è HTML valido. */
.ceb-invito {
    display: block;
    margin-bottom: 1.5rem;
    border: 1px solid var(--ceb-line);
    border-radius: var(--ceb-radius-lg);
    overflow: hidden;
    background: var(--ceb-white);
    color: inherit;
    text-decoration: none;
    box-shadow: var(--ceb-shadow-sm);
    transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}

.ceb-invito:hover,
.ceb-invito:focus-visible {
    border-color: var(--ceb-line-strong);
    box-shadow: var(--ceb-shadow-md);
    transform: translateY(-2px);
}

.ceb-invito:focus-visible {
    outline: 2px solid var(--ceb-focus);
    outline-offset: 2px;
}

/* L'immagine è larga e bassa (1205x482): "aspect-ratio" la tiene in proporzione
   qualunque sia la larghezza della colonna, senza scatti mentre carica. */
.ceb-invito__figura {
    display: block;
    width: 100%;
    aspect-ratio: 1205 / 482;
    object-fit: cover;
    border-radius: 0;
}

.ceb-invito__corpo {
    display: block;
    padding: 1rem 1.15rem 1.15rem;
}

.ceb-invito__label {
    display: block;
    margin-bottom: .3rem;
    color: var(--ceb-gold);
    font-family: var(--ceb-font-body);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.ceb-invito__titolo {
    display: block;
    margin-bottom: .45rem;
    color: var(--ceb-navy);
    font-family: var(--ceb-font-head);
    font-size: 1.12rem;
    line-height: 1.25;
}

.ceb-invito__testo {
    display: block;
    color: var(--ceb-muted);
    font-size: .92rem;
    line-height: 1.45;
}

.ceb-invito__azione {
    display: inline-block;
    margin-top: .75rem;
    color: var(--ceb-navy);
    font-size: .88rem;
    font-weight: 600;
}

/* la freccetta si sposta al passaggio del mouse: dice "si va da un'altra parte"
   senza aggiungere parole */
.ceb-invito__azione::after {
    content: " \203A";
    display: inline-block;
    margin-left: .25rem;
    transition: transform .18s ease;
}

.ceb-invito:hover .ceb-invito__azione::after {
    transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
    .ceb-invito,
    .ceb-invito__azione::after {
        transition: none;
    }

    .ceb-invito:hover {
        transform: none;
    }
}

/* --- capo mese: riquadro calcolato, non più un'immagine rifatta ogni mese --- */
.ceb-roshcard {
    position: relative;
    /* Da quando porta alla pagina del capo mese e' un collegamento: senza
       "block" resterebbe alto quanto una riga di testo. */
    display: block;
    text-decoration: none;
    transition: box-shadow .18s ease, transform .18s ease;
    margin-bottom: 1.5rem;
    padding: 4.6rem 1.1rem 1.1rem;
    border-radius: var(--ceb-radius-lg);
    overflow: hidden;
    /* "cover" invece di "100% auto": la vecchia regola scalava la foto sulla
       sola larghezza della scheda, quindi la sua altezza dipendeva dalle
       proporzioni del file. Con una foto quadrata o alta, come la luna piena,
       l'immagine sarebbe arrivata quasi in fondo alla scheda e il velo scuro
       sotto ne avrebbe coperta la maggior parte. "cover" riempie sempre la
       scheda intera, qualunque sia la forma della foto scelta in futuro. */
    background: var(--ceb-navy-dark) url("../images/sfondo-lune-hp.jpg") no-repeat center 30% / cover;
    color: var(--ceb-white);
    text-align: center;
    box-shadow: var(--ceb-shadow-sm);
    border: 1px solid var(--ceb-line);
}

a.ceb-roshcard:hover,
a.ceb-roshcard:focus-visible {
    box-shadow: var(--ceb-shadow-md);
    transform: translateY(-2px);
    /* Senza questa riga il nome del mese e i giorni sparivano al passaggio
       del mouse: la regola generale "a:hover" tinge di blu scuro tutto il
       riquadro, e quei due testi non hanno un colore proprio, quindi lo
       ereditavano - blu scuro su fondo blu scuro. */
    color: var(--ceb-white);
}


/* Velo scuro sotto le lune, così il testo resta leggibile.

   Misurato: l'etichetta "Rosh Chodesh · Capo mese" cade a 75px dall'alto e
   il velo cominciava a 73px - cioè esattamente dove il gradiente è ancora
   trasparente. Il testo finiva quindi sulla parte chiara della luna e non si
   leggeva. Ora **il velo comincia piu' in alto** e si scurisce prima, così
   quando arriva l'etichetta ha già corpo. */
.ceb-roshcard::after {
    content: "";
    position: absolute;
    inset: 14% 0 0;
    background: linear-gradient(to bottom,
        rgba(13, 39, 64, 0) 0%,
        rgba(13, 39, 64, .72) 34%,
        var(--ceb-navy-dark) 62%);
}

.ceb-roshcard > * {
    position: relative;
    z-index: 1;
}

.ceb-roshcard__label {
    margin: 0 0 .15rem;
    /* Era .68rem: a quel corpo, in maiuscoletto spaziato e su una foto,
       si leggeva a fatica anche con il contrasto giusto. */
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    /* Un oro piu' chiaro del solito: qui sotto non c'e' carta ma una
       fotografia, e l'oro da testo su fondo bianco non regge. */
    color: #f0cc72;
    /* L'ombra e' la rete di sicurezza: se un giorno si cambia la foto di
       sfondo con una piu' chiara, il testo resta comunque leggibile. */
    text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
}

.ceb-roshcard__mese {
    margin: 0;
    font-family: var(--ceb-font-display, inherit);
    font-size: 1.65rem;
    line-height: 1.1;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.ceb-roshcard__giorni {
    margin: .2rem 0 0;
    font-size: .98rem;
}

.ceb-roshcard__anno {
    margin: .1rem 0 0;
    font-size: .8rem;
    color: rgba(255, 255, 255, .6);
}

/* Riquadri fissi della home (Rosh Chodesh, Calendario, Visite): sono immagini
   manifesto, non testo. Riempiono la scheda da bordo a bordo, così le tre
   locandine hanno tutte la stessa larghezza anche se i file originali no. */
.ceb-sidebar .card-body:has(> .mod-custom > p:only-child > img),
.ceb-sidebar .card-body:has(> .mod-custom > p:only-child > a > img) {
    padding: 0;
}

.ceb-sidebar .card-body > .mod-custom > p:only-child { margin: 0; }

.ceb-sidebar .card-body > .mod-custom > p:only-child > a {
    display: block;
    overflow: hidden;
}

.ceb-sidebar .card-body > .mod-custom > p:only-child > img,
.ceb-sidebar .card-body > .mod-custom > p:only-child > a > img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 0;
    transition: transform .35s ease;
}

/* Chi è cliccabile lo fa capire al passaggio del mouse */
.ceb-sidebar .card:has(.card-body > .mod-custom > p > a) {
    transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}

.ceb-sidebar .card:has(.card-body > .mod-custom > p > a):hover {
    border-color: var(--ceb-line-strong);
    box-shadow: var(--ceb-shadow-md);
    transform: translateY(-2px);
}

.ceb-sidebar .card:has(.card-body > .mod-custom > p > a):hover img {
    transform: scale(1.03);
}

.ceb-sidebar ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ceb-sidebar ul li { border-bottom: 1px solid var(--ceb-line); }
.ceb-sidebar ul li:last-child { border-bottom: 0; }

.ceb-sidebar ul li a {
    display: block;
    padding: .5rem 0;
    text-decoration: none;
    color: var(--ceb-ink);
}

.ceb-sidebar ul li a:hover { color: var(--ceb-blue); }

/* --------------------------------------------------------------------------
   11. Piè di pagina
   -------------------------------------------------------------------------- */

.ceb-footer {
    background: var(--ceb-navy-dark);
    color: rgba(255, 255, 255, .8);
    margin-top: 3rem;
    font-size: .93rem;
}

.ceb-footer a {
    color: rgba(255, 255, 255, .82);
    text-decoration: none;
}

.ceb-footer a:hover,
.ceb-footer a:focus-visible {
    color: var(--ceb-gold-bright);
    text-decoration: underline;
}

/* Fascia con i dati della Comunità, in cima al piè di pagina */
.ceb-footer__identita {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.5rem 2.25rem;
    padding-block: clamp(1.75rem, 4vw, 2.5rem);
    border-bottom: 1px solid rgba(255, 255, 255, .13);
}

/* Il tag nel selettore serve a battere .ceb-footer img, che rimette height:auto */
.ceb-footer img.ceb-footer__logo {
    flex: none;
    height: 80px;
    width: auto;
    max-width: none;
    opacity: .95;
}

.ceb-footer__dati {
    flex: 1 1 320px;
    min-width: 0;
}

.ceb-footer__dati p { margin: 0 0 .3rem; }
.ceb-footer__dati p:last-child { margin-bottom: 0; }

/* Nel piè di pagina il grassetto è riservato alle etichette color oro:
   il nome della Comunità resta in tondo, si distingue già per corpo e
   colore. */
.ceb-footer__nome {
    font-family: var(--ceb-font-head);
    font-size: 1.2rem;
    font-weight: 400;
    color: var(--ceb-white);
}

.ceb-footer__recapiti {
    display: flex;
    flex-wrap: wrap;
    /* Le voci si allineano sulla riga di scrittura, così "SEGUICI" resta in
       linea con "TEL." e "SCRIVICI" anche se accanto ha un'icona più alta
       del testo. */
    align-items: baseline;
    gap: .2rem 1.5rem;
    list-style: none;
    margin: .55rem 0 0;
    padding: 0;
    font-size: .93rem;
}

.ceb-footer__recapiti li {
    display: flex;
    align-items: baseline;
    gap: .4rem;
}

/* La voce del profilo social ha la sola icona al posto del testo: qui
   l'allineamento alla riga di scrittura non ha appiglio, quindi l'icona
   viene centrata rispetto all'etichetta. */
.ceb-footer__recapiti li.ceb-footer__social {
    align-items: center;
    gap: .5rem;
}

.ceb-footer .ceb-social--icona {
    /* bianco pieno invece del bianco velato degli altri link: un segno
       piccolo e senza testo accanto ha bisogno di più stacco per leggersi */
    color: #fff;
    line-height: 0;
}

.ceb-footer .ceb-social--icona svg {
    width: 1.45em;
    height: 1.45em;
}

.ceb-footer .ceb-social--icona:hover,
.ceb-footer .ceb-social--icona:focus-visible {
    color: var(--ceb-gold-bright);
}

.ceb-footer__etichetta {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ceb-gold-bright);
}

/* Collegamento a un profilo social (oggi solo Instagram).
   L'icona è disegnata in SVG e prende il colore del testo che la circonda
   ("currentColor"): così la stessa riga funziona sul blu scuro del piè di
   pagina e sul fondo chiaro della pagina Contatti, senza due immagini
   diverse e senza bordi bianchi attorno. */
.ceb-social {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
}

.ceb-social svg {
    flex: none;
    width: 1.15em;
    height: 1.15em;
}

/* Nella pagina (fondo chiaro) è una riga a sé, un po' più in evidenza. */
.ceb-seguici {
    margin: 1.25rem 0 0;
}

.ceb-seguici .ceb-social {
    padding: .5rem .95rem;
    border: 1px solid var(--ceb-line);
    border-radius: 999px;
    background: var(--ceb-paper);
    color: var(--ceb-ink);
    text-decoration: none;
    font-weight: 600;
    transition: border-color .15s ease, background .15s ease;
}

.ceb-seguici .ceb-social:hover,
.ceb-seguici .ceb-social:focus-visible {
    border-color: var(--ceb-gold);
    background: var(--ceb-gold-pale);
}

.ceb-footer__cols {
    display: grid;
    gap: 1.75rem 2rem;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    padding-block: clamp(2.25rem, 5vw, 3.25rem);
}

.ceb-footer__col h2,
.ceb-footer__col h3,
.ceb-footer__col h4,
.ceb-footer__col h5,
.ceb-footer__col h6,
.ceb-footer__col .card-header-title,
.ceb-footer__col .module-title {
    font-family: var(--ceb-font-body);
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ceb-gold-bright);
    margin-bottom: .9rem;
    padding-bottom: .55rem;
    border-bottom: 1px solid rgba(255, 255, 255, .14);
}

.ceb-footer__col ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ceb-footer__col ul li { margin-bottom: .45rem; }

.ceb-footer__col ul ul {
    margin-top: .45rem;
    padding-inline-start: .9rem;
    border-inline-start: 1px solid rgba(255, 255, 255, .14);
}

.ceb-footer__col ul ul li a { font-size: .88rem; opacity: .85; }

/* Nel piè di pagina i menu restano elenchi semplici */
.ceb-footer .ceb-menu__toggle,
.ceb-footer .ceb-menu__caret { display: none; }

.ceb-footer__extra { padding-bottom: 1.5rem; }

/* Ultima fascia: resta sul blu del piè di pagina, separata solo da un filo.
   Prima era una striscia bianca sotto il blu, e a fondo pagina si vedeva un
   gradino di colore che non serviva a niente. */
.ceb-footer__bar {
    border-top: 1px solid rgba(255, 255, 255, .16);
    background: transparent;
}

.ceb-footer__barinner {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.5rem;
    align-items: center;
    justify-content: flex-end;
    padding-block: 1rem;
}

.ceb-footer__copy {
    margin: 0;
    font-size: .875rem;
    color: rgba(255, 255, 255, .78);
}

/* Sul blu i collegamenti restano chiari come quelli del resto del piè di
   pagina: qui prima venivano riportati ai colori su carta, perché la fascia
   era bianca. */
.ceb-footer .ceb-footer__bar a {
    color: var(--ceb-white);
}

.ceb-footer .ceb-footer__bar a:hover,
.ceb-footer .ceb-footer__bar a:focus-visible {
    color: var(--ceb-gold-bright);
}

.ceb-footer__legal ul {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: .875rem;
}

/* --------------------------------------------------------------------------
   12. Torna su
   -------------------------------------------------------------------------- */

.ceb-backtop {
    position: fixed;
    inset-inline-end: 1.25rem;
    bottom: 1.25rem;
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ceb-navy);
    color: var(--ceb-white);
    border-radius: 50%;
    box-shadow: var(--ceb-shadow-md);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
    z-index: 800;
}

.ceb-backtop.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.ceb-backtop:hover { background: var(--ceb-navy-soft); color: var(--ceb-white); }

/* --------------------------------------------------------------------------
   13. Bottoni, moduli e messaggi
   -------------------------------------------------------------------------- */

.btn-primary,
.btn.btn-primary {
    background: var(--ceb-navy);
    border-color: var(--ceb-navy);
    color: var(--ceb-white);
    font-weight: 600;
}

.btn-primary:hover,
.btn-primary:focus-visible {
    background: var(--ceb-navy-soft);
    border-color: var(--ceb-navy-soft);
}

.btn-secondary,
.btn.btn-secondary {
    background: transparent;
    border: 1px solid var(--ceb-line-strong);
    color: var(--ceb-navy);
    font-weight: 600;
}

.btn-secondary:hover {
    background: var(--ceb-navy);
    border-color: var(--ceb-navy);
    color: var(--ceb-white);
}

input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
input[type="search"], input[type="password"], input[type="number"], input[type="date"],
select, textarea, .form-control, .form-select {
    border: 1px solid var(--ceb-line-strong);
    border-radius: var(--ceb-radius);
    padding: .6rem .8rem;
    font-family: inherit;
    font-size: 1rem;
    background: var(--ceb-white);
    color: var(--ceb-ink);
    max-width: 100%;
}

input:focus, select:focus, textarea:focus, .form-control:focus {
    border-color: var(--ceb-blue);
    box-shadow: 0 0 0 3px rgba(42, 96, 137, .16);
    outline: none;
}

label, .control-label { font-weight: 600; color: var(--ceb-navy); }

.alert {
    border-radius: var(--ceb-radius);
    border-inline-start: 4px solid;
}

/* --------------------------------------------------------------------------
   12b. Articolo singolo
   -------------------------------------------------------------------------- */

.ceb-article {
    /* testo + figura: oltre questa misura la composizione si sfilaccia */
    max-width: 1040px;
    margin-inline: auto;
}

.ceb-article__header {
    margin-bottom: 1.75rem;
    padding-bottom: 1.1rem;
    border-bottom: 1px solid var(--ceb-line);
    position: relative;
}

.ceb-article__header::after {
    content: "";
    position: absolute;
    bottom: -1px;
    inset-inline-start: 0;
    width: 72px;
    height: 3px;
    background: var(--ceb-gold-bright);
}

.ceb-article__eyebrow {
    margin: 0 0 .5rem;
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ceb-gold);
}

.ceb-article__eyebrow a {
    color: inherit;
    text-decoration: none;
}

.ceb-article__eyebrow a:hover,
.ceb-article__eyebrow a:focus-visible {
    text-decoration: underline;
}

.ceb-article__title {
    margin: 0;
    font-size: clamp(1.75rem, 1.3rem + 1.9vw, 2.6rem);
    line-height: 1.15;
}

.ceb-article__meta {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem 1.25rem;
    margin: .85rem 0 0;
    font-size: .87rem;
    color: var(--ceb-muted);
}

.ceb-article__author::before {
    content: "·";
    margin-inline-end: 1.25rem;
    color: var(--ceb-line-strong);
}

/* Corpo del testo affiancato alla figura */
.ceb-article__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.75rem;
    align-items: start;
}

@media (min-width: 768px) {
    .ceb-article.has-side-image .ceb-article__layout {
        /* La colonna del testo si ferma alla misura di lettura e non prende
           tutto lo spazio disponibile: prima era "1fr", quindi la colonna era
           larga 712 punti mentre il testo dentro si fermava a 600, e fra la
           fine delle righe e la fotografia restava un buco di centoquaranta
           punti. Adesso le due colonne stanno insieme e il gruppo si centra. */
        grid-template-columns: minmax(0, 72ch) var(--ceb-figure-w, 300px);
        justify-content: center;
    }

    /* La figura resta in alto a destra e scorre con il resto. Prima era
       agganciata allo scorrimento: su un articolo come il Ghetto, dove sotto
       il testo c'è una galleria di quaranta foto, si trascinava dietro al
       lettore per ottomila pixel. */
    .ceb-article.has-side-image .ceb-article__figure--side {
        grid-column: 2;
        grid-row: 1;
    }

    .ceb-article.has-side-image .ceb-article__body {
        grid-column: 1;
        grid-row: 1;
    }
}

.ceb-article__figure {
    margin: 0;
}

.ceb-article__figure img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--ceb-radius);
    background: var(--ceb-paper-deep);
}

/* Figura in colonna: non viene mai ingrandita oltre la misura del file */
.ceb-article__figure--side {
    width: 100%;
    max-width: var(--ceb-figure-w, 300px);
    margin-inline: auto;
}

.ceb-article__figure--side img {
    box-shadow: var(--ceb-shadow-sm);
    border: 1px solid var(--ceb-line);
}

/* Figura di apertura, per le foto abbastanza grandi.
   Nessun ritaglio: su centinaia di articoli un taglio automatico prima o poi
   tronca una testa o un dettaglio che conta. L'immagine resta nelle sue
   proporzioni, larga quanto la colonna del testo. */
.ceb-article__figure--wide {
    margin: 0 0 2rem;
    /* misura contenuta: una foto 4:3 a piena colonna spingerebbe il testo
       sotto la piega */
    max-width: 620px;
}

.ceb-article__figure--wide img {
    box-shadow: var(--ceb-shadow-sm);
    border: 1px solid var(--ceb-line);
}

/* Pagine intere di un quaderno o libretto scannerizzato (es. la Haggadah
   per bambini, tavola dopo tavola): non sono una foto d'apertura ne' un
   dettaglio in mezzo al testo, sono l'unico contenuto della pagina e vanno
   lette. Restano grandi sia guardando una pagina alla volta sia in "tutte
   le pagine", dove altrimenti si comprimerebbero alla misura di
   un'illustrazione qualsiasi. */
.ceb-article__body p.ceb-pagina {
    margin: 2rem 0;
}

.ceb-article__body p.ceb-pagina img {
    /* "width: auto" e non 100%: le tavole scansionate ad alta risoluzione
       (es. 3504px) riempiono i 900px, ma quella più piccola dell'apertura
       (476px) resta alla sua misura vera invece di essere ingrandita e
       uscirne sfocata. */
    display: block;
    width: auto;
    max-width: min(900px, 100%);
    height: auto;
    margin: 0 auto;
    border-radius: var(--ceb-radius-lg);
    box-shadow: var(--ceb-shadow-sm);
    border: 1px solid var(--ceb-line);
}

.ceb-article__figure figcaption {
    margin-top: .5rem;
    font-size: .82rem;
    line-height: 1.45;
    color: var(--ceb-muted);
}

/* Testo dell'articolo */
.ceb-article__body {
    min-width: 0;
    max-width: 72ch;
    font-size: 1.06rem;
    line-height: 1.72;
}

/* L'apertura in evidenza si applica solo se il primo capoverso è davvero
   un capoverso: su una firma di tre parole sarebbe fuori posto. */
.ceb-article__body > p.is-lead {
    font-size: 1.15rem;
    line-height: 1.6;
    color: var(--ceb-navy);
}

.ceb-article__body p { margin: 0 0 1.15em; }

/* Molti articoli separano i capoversi con un a capo invece che con un
   paragrafo: senza questo respiro diventano un muro di testo. */
.ceb-article__body br {
    content: "";
    display: block;
    margin-bottom: .5em;
}

.ceb-article__body h2,
.ceb-article__body h3,
.ceb-article__body h4 {
    margin-top: 2rem;
}

.ceb-article__body ul,
.ceb-article__body ol {
    margin: 0 0 1.15em;
    padding-inline-start: 1.4rem;
}

.ceb-article__body li { margin-bottom: .35em; }

.ceb-article__body a {
    text-decoration: underline;
    text-decoration-color: var(--ceb-line-strong);
}

.ceb-article__body a:hover,
.ceb-article__body a:focus-visible {
    text-decoration-color: currentColor;
}

.ceb-article__body blockquote {
    margin: 1.75rem 0;
    padding: .35rem 0 .35rem 1.35rem;
    border-inline-start: 4px solid var(--ceb-gold-bright);
    font-family: var(--ceb-font-head);
    font-size: 1.12rem;
    color: var(--ceb-navy);
}

/* Immagini che restano dentro al testo */
.ceb-article__body .ceb-article__inline-image {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 1.75rem auto;
    border-radius: var(--ceb-radius);
    border: 1px solid var(--ceb-line);
}

.ceb-article__body iframe,
.ceb-article__body video {
    max-width: 100%;
    margin-block: 1.5rem;
}

/* Con una foto grande in apertura il testo sotto resta su una misura
   leggibile, come in una rivista: la foto già riempie la larghezza, il
   paragrafo sotto no. */
.ceb-article.has-wide-image .ceb-article__body {
    max-width: 72ch;
}

/* Senza nessuna figura promossa - un lungo testo con le sue immagini incluse
   nel racconto, come questo - il corpo usa tutta la colonna dell'articolo:
   niente margine morto a destra mentre il testo resta compresso a sinistra.
   Le immagini nel testo restano alla loro misura naturale (260px al massimo,
   fissata su .ceb-testo__figura), quindi anche su una colonna larga il testo
   ha sempre spazio vero per scorrergli attorno. */
.ceb-article.has-no-image .ceb-article__body {
    max-width: none;
}

/* Alcune pagine contengono blocchi che stanno stretti nella misura di
   lettura - mappe, griglie di schede. Lì il corpo si allarga, ma i paragrafi
   restano corti: si allargano solo i blocchi che ne hanno bisogno. */
/* Il prefisso .ceb-article serve ad avere la meglio sulle regole
   .has-no-image / .has-wide-image, che fissano la misura di lettura. */
.ceb-article .ceb-article__body:has(.ceb-mappa),
.ceb-article .ceb-article__body:has(.ceb-modi),
.ceb-article .ceb-article__body:has(.ceb-luoghi),
.ceb-article .ceb-article__body:has(.ceb-orario),
.ceb-article .ceb-article__body:has(.ceb-esito),
.ceb-article .ceb-article__body:has(.ceb-galleria),
.ceb-article .ceb-article__body:has(.ceb-schede),
.ceb-article .ceb-article__body:has(.ceb-calendario) {
    max-width: none;
}

.ceb-article__body:has(.ceb-mappa) > p,
.ceb-article__body:has(.ceb-mappa) > h2,
.ceb-article__body:has(.ceb-mappa) > h3,
.ceb-article__body:has(.ceb-modi) > p,
.ceb-article__body:has(.ceb-modi) > h2,
.ceb-article__body:has(.ceb-modi) > h3,
.ceb-article__body:has(.ceb-luoghi) > p,
.ceb-article__body:has(.ceb-luoghi) > h2,
.ceb-article__body:has(.ceb-orario) > p,
.ceb-article__body:has(.ceb-orario) > h2,
.ceb-article__body:has(.ceb-galleria) > p,
.ceb-article__body:has(.ceb-galleria) > h2,
.ceb-article__body:has(.ceb-galleria) > h3,
.ceb-article__body:has(.ceb-galleria) > ul:not(.ceb-galleria),
.ceb-article__body:has(.ceb-galleria) > ol,
.ceb-article__body:has(.ceb-schede) > p,
.ceb-article__body:has(.ceb-schede) > h2,
.ceb-article__body:has(.ceb-schede) > h3,
/* La citazione ha un corpo più grande dei paragrafi, quindi lo stesso numero
   di caratteri le darebbe una riga più lunga: qui ne bastano meno per stare
   allineata al testo attorno. */
.ceb-article__body:has(.ceb-schede) > blockquote,
.ceb-article__body:has(.ceb-schede) > ul:not(.ceb-schede),
.ceb-article__body:has(.ceb-schede) > ol,
/* i contenitori che avvolgono una galleria devono restare larghi */
.ceb-article__body:has(.ceb-galleria) > div:not(:has(.ceb-galleria)) {
    /* Era 72ch. Il corpo si allarga per la galleria o per la mappa, ma il
       testo restava stretto a sinistra, con un vuoto largo quanto una colonna
       alla sua destra. Ora accompagna la larghezza della pagina, come già
       faceva quella del Memoriale - lì per un <section> di troppo dentro il
       contenuto, non per scelta.

       Il tetto resta, ma alto: oltre una certa larghezza l'occhio non ritrova
       più l'inizio della riga dopo. */
    max-width: 108ch;
}

/* La citazione è scritta più grande dei paragrafi: a parità di caratteri la
   sua riga verrebbe più lunga, e sporgerebbe a destra del testo attorno. */
.ceb-article__body:has(.ceb-schede) > blockquote {
    max-width: 88ch;
}

@media (max-width: 767.98px) {
    .ceb-article__figure--side {
        max-width: min(var(--ceb-figure-w, 300px), 260px);
        margin-bottom: 1.5rem;
    }
}

/* --------------------------------------------------------------------------
   Fascia d'apertura
   Una fotografia larga in cima alla pagina, tagliata bassa. Non e' una figura
   in mezzo al testo: e' il primo colpo d'occhio, e serve a far vedere il
   luogo di cui la pagina parla.

   Il taglio lo fa il foglio di stile e non il file, cosi' su un telefono -
   dove una striscia 5:2 sarebbe una fessura - la stessa foto si mostra quasi
   intera senza doverne tenere due copie.
   -------------------------------------------------------------------------- */

/* Vale anche fuori dagli articoli: la usa l'introduzione delle sezioni, che
   non è un articolo ma ha lo stesso bisogno di una fotografia d'apertura. */
.ceb-sezione .ceb-fascia,
.ceb-article__body .ceb-fascia {
    margin: 0 0 1.9rem;
}

/* La proporzione cambia con la larghezza dello schermo, non per vezzo: una
   striscia 3:1 su un telefono sarebbe una fessura, e una 3:2 su un portatile
   riempirebbe lo schermo da sola, spingendo sotto la piega tutto il resto
   della pagina. Il taglio lo fa "cover", quindi il file e' sempre lo stesso. */
.ceb-fascia img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    /* un po' piu' in alto del centro: e' li' che stanno il rosone e il matroneo */
    object-position: center 40%;
    border-radius: var(--ceb-radius-lg);
    border: 1px solid var(--ceb-line);
    box-shadow: var(--ceb-shadow-sm);
}

@media (min-width: 700px) {
    .ceb-fascia img { aspect-ratio: 5 / 2; }
}

@media (min-width: 1100px) {
    .ceb-fascia img { aspect-ratio: 3 / 1; }
}

.ceb-fascia figcaption {
    margin-top: .55rem;
    font-size: .82rem;
    line-height: 1.45;
    color: var(--ceb-muted);
}

/* --------------------------------------------------------------------------
   12b-bis. Gallerie fotografiche
   -------------------------------------------------------------------------- */

.ceb-galleria {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    list-style: none;
    margin: 1.75rem 0 2.25rem;
    padding: 0;
}

.ceb-galleria__cella { margin: 0; }

.ceb-galleria__voce {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: var(--ceb-radius);
    background: var(--ceb-paper-deep);
    aspect-ratio: 4 / 3;
    box-shadow: var(--ceb-shadow-sm);
    cursor: zoom-in;
}

.ceb-galleria__voce img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    margin: 0;
    border: 0;
    border-radius: 0;
    transition: transform .4s ease;
}

.ceb-galleria__voce:hover img,
.ceb-galleria__voce:focus-visible img { transform: scale(1.06); }

.ceb-galleria__voce::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(13, 39, 64, 0);
    transition: background .25s ease;
}

.ceb-galleria__voce:hover::after { background: rgba(13, 39, 64, .18); }

/* Visore a tutto schermo */
.ceb-visore {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: clamp(1rem, 4vw, 3rem);
    background: rgba(9, 26, 43, .93);
}

.ceb-visore[hidden] { display: none; }

body.has-visore { overflow: hidden; }

.ceb-visore__corpo {
    margin: 0;
    max-width: min(1200px, 100%);
    max-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
}

.ceb-visore__corpo img {
    max-width: 100%;
    max-height: calc(100vh - 8rem);
    width: auto;
    height: auto;
    border-radius: var(--ceb-radius);
    box-shadow: 0 20px 60px rgba(0, 0, 0, .45);
    background: var(--ceb-navy-dark);
}

/* Le foto d'archivio troppo piccole per riempire il riquadro prendono una
   cornice chiara, come una vecchia stampa in un passe-partout: ceb5.js le
   ingrandisce quel poco che basta e aggiunge questa classe. */
.ceb-visore__corpo--piccola img {
    padding: 1.1rem;
    max-height: calc(100vh - 11rem);
    background: var(--ceb-paper);
    box-shadow: 0 20px 60px rgba(0, 0, 0, .45), 0 0 0 1px rgba(0, 0, 0, .06) inset;
}

.ceb-visore__conta {
    color: rgba(255, 255, 255, .78);
    font-size: .88rem;
    font-variant-numeric: tabular-nums;
}

.ceb-visore__nav,
.ceb-visore__chiudi {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: var(--ceb-white);
    cursor: pointer;
    transition: background .15s ease;
}

.ceb-visore__nav:hover,
.ceb-visore__chiudi:hover { background: rgba(255, 255, 255, .26); }

.ceb-visore__nav[hidden] { display: none; }

.ceb-visore__chiudi {
    position: absolute;
    top: 1rem;
    inset-inline-end: 1rem;
    font-size: 1.9rem;
    line-height: 1;
}

@media (max-width: 575.98px) {
    .ceb-visore { padding: 1rem .5rem 3.5rem; }
    .ceb-visore__nav {
        position: absolute;
        bottom: 1rem;
        width: 44px;
        height: 44px;
    }
    .ceb-visore__nav--prec { inset-inline-start: 25%; }
    .ceb-visore__nav--succ { inset-inline-end: 25%; }
}

/* --------------------------------------------------------------------------
   12b-ter. Orari delle funzioni
   Componente riutilizzabile: vale per le funzioni di Shabbat e per le
   pagine "Orario officiature per..." delle singole festività.
   -------------------------------------------------------------------------- */

.ceb-orario {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    margin: 1.75rem 0 2rem;
}

.ceb-orario__giorno {
    background: var(--ceb-white);
    border: 1px solid var(--ceb-line);
    border-top: 3px solid var(--ceb-gold-bright);
    border-radius: var(--ceb-radius);
    padding: 1.1rem 1.35rem 1.25rem;
    box-shadow: var(--ceb-shadow-sm);
}

.ceb-article__body .ceb-orario__titolo {
    margin: 0 0 .9rem;
    padding-bottom: .55rem;
    border-bottom: 1px solid var(--ceb-line);
    font-size: 1.15rem;
    color: var(--ceb-navy);
}

.ceb-orario__voci {
    margin: 0;
    display: grid;
    gap: .65rem;
}

.ceb-orario__voci > div {
    display: grid;
    grid-template-columns: 4.2rem 1fr;
    gap: .75rem;
    align-items: baseline;
}

.ceb-orario__voci dt {
    margin: 0;
    font-weight: 700;
    font-size: 1.05rem;
    font-variant-numeric: tabular-nums;
    color: var(--ceb-navy);
    text-align: end;
}

.ceb-orario__voci dd {
    margin: 0;
    color: var(--ceb-ink);
}

.ceb-orario__voci dd small {
    display: block;
    margin-top: .1rem;
    font-size: .85rem;
    color: var(--ceb-muted);
}

/* Le parti di cui si compone una funzione, accanto al suo nome e non sotto:
   sono un dettaglio della stessa riga, non una nota a parte. */
.ceb-orario__voci dd .ceb-orario__parti {
    font-size: .85rem;
    color: var(--ceb-muted);
    white-space: nowrap;
}

@media (max-width: 480px) {
    .ceb-orario__voci dd .ceb-orario__parti { white-space: normal; }
}

/* --------------------------------------------------------------------------
   12b-quater. Pagine di esito (ritorno da PayPal)
   -------------------------------------------------------------------------- */

.ceb-esito {
    max-width: 620px;
    margin: 1rem auto 2rem;
    padding: 2.25rem 2rem 2.5rem;
    text-align: center;
    background: var(--ceb-white);
    border: 1px solid var(--ceb-line);
    border-top: 4px solid var(--ceb-gold-bright);
    border-radius: var(--ceb-radius-lg);
    box-shadow: var(--ceb-shadow-md);
}

.ceb-esito--ko { border-top-color: var(--ceb-line-strong); }

.ceb-esito__segno {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    margin: 0 auto 1.25rem;
    border-radius: 50%;
    background: var(--ceb-gold-pale);
    color: var(--ceb-gold);
    font-size: 2.4rem;
    line-height: 1;
}

.ceb-esito--ko .ceb-esito__segno {
    background: var(--ceb-paper-deep);
    color: var(--ceb-muted);
}

.ceb-article__body .ceb-esito__titolo {
    margin: 0 0 1rem;
    font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
}

.ceb-esito__testo {
    margin: 0 auto .9rem;
    max-width: 46ch;
    color: var(--ceb-ink);
}

.ceb-esito__azioni {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .85rem;
    margin: 1.75rem 0 0;
}

.ceb-esito__bottone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ceb-navy);
    color: var(--ceb-white);
    border-radius: 999px;
    padding: .75rem 1.9rem;
    font-weight: 700;
    text-decoration: none;
    box-shadow: var(--ceb-shadow-sm);
}

.ceb-esito__bottone:hover,
.ceb-esito__bottone:focus-visible {
    background: var(--ceb-navy-soft);
    color: var(--ceb-white);
}

.ceb-esito__link {
    font-size: .92rem;
    color: var(--ceb-muted);
}

/* --------------------------------------------------------------------------
   12c. Dove siamo: indirizzi e mappa
   -------------------------------------------------------------------------- */

.ceb-luoghi {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    margin: 0 0 2rem;
    padding: 0;
    list-style: none;
}

/* una scheda sola non deve stendersi su tutta la riga */
.ceb-luoghi:has(> .ceb-luogo:only-child) {
    grid-template-columns: minmax(250px, 440px);
}

.ceb-luogo {
    background: var(--ceb-white);
    border: 1px solid var(--ceb-line);
    border-top: 3px solid var(--ceb-gold-bright);
    border-radius: var(--ceb-radius);
    padding: 1.15rem 1.35rem 1.35rem;
    box-shadow: var(--ceb-shadow-sm);
}

.ceb-luogo__tipo {
    margin: 0 0 .5rem;
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ceb-gold);
}

.ceb-luogo__via {
    margin: 0 0 .6rem;
    font-family: var(--ceb-font-head);
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--ceb-navy);
}

.ceb-luogo p { margin: 0 0 .45rem; }
.ceb-luogo p:last-child { margin-bottom: 0; }

.ceb-luogo__nota {
    font-size: .9rem;
    color: var(--ceb-muted);
}

.ceb-luogo__link {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-top: .5rem;
    font-size: .92rem;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid rgba(42, 96, 137, .35);
}

.ceb-luogo__link:hover { border-bottom-color: currentColor; }

/* Mappa: prima del clic non viene contattato nessun server esterno */
.ceb-mappa {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .85rem;
    margin: 0 0 2rem;
    min-height: 320px;
    padding: 2rem 1.25rem;
    text-align: center;
    background:
        repeating-linear-gradient(45deg, var(--ceb-paper) 0 12px, var(--ceb-paper-deep) 12px 24px);
    border: 1px solid var(--ceb-line);
    border-radius: var(--ceb-radius-lg);
    overflow: hidden;
}

.ceb-mappa__carica {
    background: var(--ceb-navy);
    color: var(--ceb-white);
    border: 0;
    border-radius: 999px;
    padding: .7rem 1.6rem;
    font-family: inherit;
    font-size: .98rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: var(--ceb-shadow-sm);
}

.ceb-mappa__carica:hover { background: var(--ceb-navy-soft); }

.ceb-mappa__nota {
    margin: 0;
    max-width: 46ch;
    font-size: .84rem;
    line-height: 1.45;
    color: var(--ceb-muted);
}

/* --------------------------------------------------------------------------
   Pagine di sezione: Eventi, Cultura, Festività, Shabbat
   -------------------------------------------------------------------------- */

.ceb-sezione__titolo {
    margin: 0 0 1.25rem;
    font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.3rem);
    line-height: 1.15;
}

.ceb-sezione__intro {
    display: flex;
    flex-wrap: wrap;
    align-items: start;
    gap: 1.5rem;
    margin-bottom: 2.25rem;
    padding-bottom: 1.75rem;
    border-bottom: 1px solid var(--ceb-line);
}

.ceb-sezione__figura {
    flex: none;
    /* Era min(180px, 32vw): una miniatura, accanto a due righe di testo e
       sopra riquadri larghi una spanna. Portata alla misura naturale dei file
       che ci finiscono - stanno quasi tutti fra i 350 e i 400 punti - così si
       vede senza ingrandirla oltre quello che è, che la sgranerebbe. */
    width: min(340px, 42vw);
    height: auto;
    border-radius: var(--ceb-radius);
    border: 1px solid var(--ceb-line);
}

/* Immagine di apertura grande: non fa la figurina di lato, apre la pagina.
   Il modello mette questa classe solo quando il file regge la misura - sotto
   i 900 punti resta la figura piccola accanto al testo, che ingrandita si
   sgranerebbe. */
.ceb-sezione__intro--fascia {
    flex-direction: column;
    align-items: center;
    gap: 1.4rem;
}

.ceb-sezione__intro--fascia .ceb-sezione__figura {
    width: 100%;
    max-width: 720px;
}

.ceb-sezione__intro--fascia .ceb-sezione__testo {
    flex: 1 1 auto;
    width: 100%;
}

.ceb-sezione__testo {
    flex: 1 1 22rem;
    min-width: 0;
    font-size: 1.02rem;
    line-height: 1.65;
    color: var(--ceb-ink);
}

.ceb-sezione__testo p:last-child { margin-bottom: 0; }

/* --- griglia delle sottosezioni ---------------------------------------------
   Ogni riquadro porta una copertina presa dagli articoli della sezione: senza,
   erano tutti uguali e non si distinguevano l'uno dall'altro. Chi non ha foto
   ripiega su una fascia blu con l'iniziale in oro, che resta riconoscibile.
   --------------------------------------------------------------------------- */
/* Una scheda per riga: a quattro per riga le copertine erano francobolli e
   i titoli stavano stretti. */
.ceb-sezioni {
    display: grid;
    gap: 1.1rem;
    grid-template-columns: 1fr;
    margin: 0;
    padding: 4px 0 0;
    list-style: none;
}

.ceb-sezioni__scheda {
    position: relative;
    display: flex;
    /* la foto a sinistra, il testo accanto */
    flex-direction: row;
    align-items: stretch;
    overflow: hidden;
    background: var(--ceb-white);
    border: 1px solid var(--ceb-line);
    border-radius: var(--ceb-radius-lg);
    box-shadow: var(--ceb-shadow-sm);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.ceb-sezioni__scheda:hover {
    transform: translateY(-4px);
    box-shadow: var(--ceb-shadow-md);
    border-color: var(--ceb-line-strong);
}

/* --- la copertina --- */
.ceb-sezioni__copertina {
    position: relative;
    display: block;
    flex: none;
    width: clamp(180px, 30%, 320px);
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: var(--ceb-navy);
}

/* Targhe e marchi: piccoli e con una scritta dentro, ritagliarli li
   decapiterebbe e ingrandirli li sgranerebbe. Si mostrano interi, sul fondo
   blu che la copertina ha già. */
.ceb-sezioni__copertina--targa img {
    object-fit: contain;
    padding: .9rem;
}

.ceb-sezioni__scheda:hover .ceb-sezioni__copertina--targa img {
    transform: none;
}

.ceb-sezioni__copertina img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .45s ease;
}

.ceb-sezioni__scheda:hover .ceb-sezioni__copertina img {
    transform: scale(1.05);
}

/* Il velo scuro sulla foto serviva quando il testo le stava sotto: adesso le
   sta accanto, e scurire la foto non aiuterebbe nessuno. */

/* ripiego per le sezioni senza foto */
.ceb-sezioni__iniziale {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--ceb-font-head);
    font-size: 4.2rem;
    line-height: 1;
    color: rgba(201, 162, 39, .9);
    background:
        radial-gradient(circle at 30% 25%, rgba(255, 255, 255, .10), transparent 60%),
        var(--ceb-navy);
}

/* Su schermo stretto la foto torna sopra e il testo sotto: una foto larga
   180 punti accanto a un titolo lascerebbe al titolo due parole per riga. */
@media (max-width: 620px) {
    .ceb-sezioni__scheda { flex-direction: column; }

    .ceb-sezioni__copertina {
        width: 100%;
    }
}

/* --- il testo --- */
.ceb-sezioni__testo {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .3rem;
    padding: 1.1rem 1.4rem;
    min-width: 0;
}

.ceb-sezioni__conto {
    order: -1;
    margin: 0;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ceb-gold);
}

.ceb-sezioni__titolo {
    margin: 0;
    font-family: var(--ceb-font-head);
    font-size: 1.16rem;
    line-height: 1.25;
}

.ceb-sezioni__titolo a {
    color: var(--ceb-navy);
    text-decoration: none;
}

/* tutta la scheda è cliccabile, non solo le parole del titolo */
.ceb-sezioni__titolo a::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

.ceb-sezioni__scheda:hover .ceb-sezioni__titolo a {
    color: var(--ceb-blue);
}

.ceb-sezioni__figli {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem .35rem;
    margin-top: .6rem;
}

/* i link delle sottosezioni restano cliccabili sopra il velo della scheda */
.ceb-sezioni__figli a {
    position: relative;
    z-index: 2;
    display: inline-block;
    padding: .18rem .58rem;
    font-family: var(--ceb-font-body);
    font-size: .79rem;
    text-decoration: none;
    color: var(--ceb-muted);
    background: var(--ceb-paper);
    border: 1px solid var(--ceb-line);
    border-radius: 999px;
}

.ceb-sezioni__figli a:hover {
    color: var(--ceb-navy);
    background: var(--ceb-white);
    border-color: var(--ceb-line-strong);
}


/* --------------------------------------------------------------------------
   Indice a capitoli: pagine che raccontano una storia invece di elencare
   appuntamenti, dove gli articoli portano tutti la stessa foto di repertorio.
   -------------------------------------------------------------------------- */

.ceb-indice {
    margin: 1.5rem 0 0;
    padding: 0;
    list-style: none;
    counter-reset: capitolo;
    border-top: 1px solid var(--ceb-line);
}

.ceb-indice__voce {
    position: relative;
    display: grid;
    grid-template-columns: 3.2rem minmax(0, 1fr);
    align-items: baseline;
    gap: 0 .35rem;
    padding: 1.15rem .6rem 1.2rem;
    border-bottom: 1px solid var(--ceb-line);
    transition: background .15s ease;
}

.ceb-indice__voce:hover { background: var(--ceb-paper); }

/* La coda delle sottosezioni di Cultura: gli articoli che non sono entrati
   nelle schede. Non è una serie ordinata - sono i mesi dell'anno, i capitoli
   di un trattato, quello che c'è - quindi niente numeri: al loro posto un
   filetto dorato, che tiene le voci allineate come il numero faceva. */
.ceb-indice--coda {
    margin-top: 2.4rem;
    padding-top: 1.6rem;
    border-top: 1px solid var(--ceb-line);
}

.ceb-indice--coda .ceb-indice__numero {
    font-size: 0;
    line-height: 0;
}

.ceb-indice--coda .ceb-indice__numero::before {
    content: "";
    display: block;
    width: 14px;
    height: 2px;
    margin-top: .85em;
    background: var(--ceb-gold-bright);
    border-radius: 1px;
}

.ceb-indice__numero {
    font-family: var(--ceb-font-head);
    font-size: 1.5rem;
    line-height: 1;
    color: var(--ceb-gold-bright);
    font-variant-numeric: tabular-nums;
}

.ceb-indice__voce:hover .ceb-indice__numero { color: var(--ceb-gold); }

.ceb-indice__corpo {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    min-width: 0;
}

.ceb-indice__titolo {
    font-family: var(--ceb-font-head);
    font-size: 1.14rem;
    line-height: 1.3;
    color: var(--ceb-navy);
    text-decoration: none;
}

/* tutta la riga è cliccabile */
.ceb-indice__titolo::before {
    content: "";
    position: absolute;
    inset: 0;
}

.ceb-indice__voce:hover .ceb-indice__titolo { color: var(--ceb-blue); }

.ceb-indice__testo {
    font-size: .93rem;
    line-height: 1.55;
    color: var(--ceb-muted);
    max-width: 68ch;
}

@media (max-width: 560px) {
    .ceb-indice__voce {
        grid-template-columns: 2.2rem minmax(0, 1fr);
        padding-inline: .2rem;
    }

    .ceb-indice__numero { font-size: 1.15rem; }
}

/* --------------------------------------------------------------------------
   Filtri delle pagine di eventi
   -------------------------------------------------------------------------- */

.ceb-filtri {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: .9rem 1.6rem;
    margin: 2.25rem 0 1.25rem;
    padding: 1rem 1.25rem;
    background: var(--ceb-white);
    border: 1px solid var(--ceb-line);
    border-inline-start: 4px solid var(--ceb-gold-bright);
    border-radius: var(--ceb-radius);
    box-shadow: var(--ceb-shadow-sm);
    transition: border-inline-start-color .2s ease;
}

/* quando un filtro è attivo il filetto si accende */
.ceb-filtri.is-filtrata { border-inline-start-color: var(--ceb-gold); }

.ceb-filtri[hidden] { display: none; }

.ceb-filtri__gruppo {
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

.ceb-filtri__gruppo label {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ceb-gold);
}

/* La freccina è disegnata qui: quella di sistema cambia da un browser
   all'altro e stonava con il resto. */
.ceb-filtri__scelta {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.ceb-filtri__scelta::after {
    content: "";
    position: absolute;
    inset-inline-end: .8rem;
    width: 8px;
    height: 8px;
    border-inline-end: 2px solid var(--ceb-navy);
    border-block-end: 2px solid var(--ceb-navy);
    transform: translateY(-2px) rotate(45deg);
    pointer-events: none;
}

.ceb-filtri select {
    min-width: 11.5rem;
    padding: .5rem 2.4rem .5rem .85rem;
    font: inherit;
    font-size: .93rem;
    color: var(--ceb-ink);
    background: var(--ceb-paper);
    border: 1px solid var(--ceb-line-strong);
    border-radius: 999px;
    cursor: pointer;
    appearance: none;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}

.ceb-filtri select:hover { background: var(--ceb-white); border-color: var(--ceb-navy-soft); }

.ceb-filtri select:focus-visible {
    outline: 0;
    border-color: var(--ceb-navy-soft);
    box-shadow: 0 0 0 3px rgba(29, 74, 117, .14);
}

.ceb-filtri__azzera {
    align-self: end;
    margin-bottom: .1rem;
    padding: .5rem 1rem;
    font: inherit;
    font-size: .86rem;
    color: var(--ceb-muted);
    background: transparent;
    border: 1px solid var(--ceb-line);
    border-radius: 999px;
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease, background .15s ease;
}

.ceb-filtri__azzera:hover {
    color: var(--ceb-navy);
    border-color: var(--ceb-line-strong);
    background: var(--ceb-paper);
}

.ceb-filtri__azzera[hidden] { display: none; }

.ceb-filtri__conta {
    margin: 0 0 .55rem auto;
    font-size: .82rem;
    color: var(--ceb-muted);
    white-space: nowrap;
}

.ceb-filtri__conta em {
    font-style: italic;
    font-weight: 600;
    color: var(--ceb-navy);
}

.ceb-elenco__voce[hidden] { display: none; }

/* --------------------------------------------------------------------------
   Elenco dei sabati, con gli orari accanto alla data
   --------------------------------------------------------------------------
   La pagina si chiama "Orario Shabbat" e mostrava cinquantatré date in fila,
   senza un'ora. Adesso ogni riga porta l'inizio e il termine, letti dalla
   pagina di quel sabato: si scorre e si trova, senza dover aprire.
   -------------------------------------------------------------------------- */

.ceb-settimane {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--ceb-line);
}

.ceb-settimane__intestazione {
    display: grid;
    grid-template-columns: 1fr 5.5rem 5.5rem;
    gap: 0 1rem;
    margin: 1.4rem 0 .1rem;
    padding: 0 .75rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ceb-muted);
}

/* le due etichette stanno sopra le due colonne degli orari, non sopra la data */
.ceb-settimane__intestazione span {
    grid-column: auto;
    text-align: end;
}

.ceb-settimane__intestazione span:first-child { grid-column: 2; }

.ceb-settimane .ceb-elenco__voce > a {
    display: grid;
    grid-template-columns: 1fr 5.5rem 5.5rem;
    gap: 0 1rem;
    align-items: baseline;
    padding: .62rem .75rem;
    color: var(--ceb-ink);
    text-decoration: none;
    transition: background .15s ease, color .15s ease;
}

.ceb-settimane .ceb-elenco__voce { border-bottom: 1px solid var(--ceb-line); }

.ceb-settimane .ceb-elenco__voce > a:hover,
.ceb-settimane .ceb-elenco__voce > a:focus-visible {
    background: var(--ceb-paper);
    color: var(--ceb-blue);
}

.ceb-settimane__ora {
    text-align: end;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--ceb-navy);
}

.ceb-settimane .ceb-elenco__voce > a:hover .ceb-settimane__ora { color: var(--ceb-blue); }

@media (max-width: 520px) {
    .ceb-settimane__intestazione,
    .ceb-settimane .ceb-elenco__voce > a {
        grid-template-columns: 1fr 4.2rem 4.2rem;
        gap: 0 .5rem;
        padding-inline: .35rem;
    }
}

.ceb-elenco__vuoto {
    margin: 1rem 0;
    padding: 1rem 1.15rem;
    background: var(--ceb-paper);
    border: 1px dashed var(--ceb-line-strong);
    border-radius: var(--ceb-radius);
    color: var(--ceb-muted);
}

.ceb-elenco__vuoto[hidden] { display: none; }

/* --------------------------------------------------------------------------
   Moduli di contatto
   -------------------------------------------------------------------------- */

.ceb-contatto__testata { margin-bottom: 1.5rem; }

.ceb-contatto__nome {
    margin: 0;
    font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem);
    line-height: 1.15;
}

.ceb-modulo {
    max-width: 640px;
}

.ceb-modulo__avviso {
    margin-bottom: 1.5rem;
    padding: 1.1rem 1.25rem;
    background: var(--ceb-paper);
    border: 1px solid var(--ceb-line);
    border-inline-start: 4px solid var(--ceb-gold-bright);
    border-radius: var(--ceb-radius);
}

.ceb-modulo__avviso p {
    margin: 0 0 .8rem;
    font-size: .95rem;
    line-height: 1.55;
}

.ceb-modulo__orari {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .5rem 1.1rem;
    font: inherit;
    font-size: .9rem;
    font-weight: 600;
    color: var(--ceb-navy);
    background: var(--ceb-white);
    border: 1px solid var(--ceb-line-strong);
    border-radius: 999px;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.ceb-modulo__orari:hover {
    background: var(--ceb-navy);
    border-color: var(--ceb-navy);
    color: var(--ceb-white);
}

.ceb-campo {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    margin-bottom: 1.15rem;
}

.ceb-campo > label {
    font-size: .9rem;
    font-weight: 600;
    color: var(--ceb-ink);
}

.ceb-campo__obbligo { color: var(--ceb-gold); }

/* --- la domanda di sicurezza ------------------------------------------------
   Passa dal campo captcha di Joomla, che la avvolge in due contenitori di
   Bootstrap: annullandoli si allinea agli altri campi senza spazi in più.
   La risposta è una cifra o una parola breve, quindi il riquadro resta stretto.
   --------------------------------------------------------------------------- */
.ceb-modulo__form .control-group,
.ceb-modulo__form .controls {
    display: contents;
}

.ceb-campo--domanda input[type="text"] {
    max-width: 12rem;
}

.ceb-modulo input[type="text"],
.ceb-modulo input[type="email"],
.ceb-modulo textarea {
    width: 100%;
    padding: .7rem .9rem;
    font: inherit;
    color: var(--ceb-ink);
    background: var(--ceb-white);
    border: 1px solid var(--ceb-line-strong);
    border-radius: var(--ceb-radius);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.ceb-modulo input[type="text"]:focus,
.ceb-modulo input[type="email"]:focus,
.ceb-modulo textarea:focus {
    outline: 0;
    border-color: var(--ceb-navy-soft);
    box-shadow: 0 0 0 3px rgba(29, 74, 117, .14);
}

.ceb-modulo textarea { resize: vertical; min-height: 160px; }

.ceb-campo--file input[type="file"] {
    padding: .6rem;
    font-size: .92rem;
    background: var(--ceb-paper);
    border: 1px dashed var(--ceb-line-strong);
    border-radius: var(--ceb-radius);
}

.ceb-campo__aiuto {
    margin: 0;
    font-size: .84rem;
    color: var(--ceb-muted);
}

.ceb-campo--scelta > label {
    flex-direction: row;
    display: flex;
    align-items: center;
    gap: .5rem;
    font-weight: 400;
}

/* Campo esca: nascosto a chi legge e agli ausili vocali, non ai robot */
.ceb-esca {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.ceb-modulo__nota {
    margin: 0 0 1rem;
    font-size: .85rem;
    color: var(--ceb-muted);
}

.ceb-modulo__invia {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .8rem 2rem;
    font: inherit;
    font-size: 1rem;
    font-weight: 700;
    color: var(--ceb-white);
    background: var(--ceb-navy);
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    transition: background .15s ease, transform .15s ease;
}

.ceb-modulo__invia:hover {
    background: var(--ceb-navy-soft);
    transform: translateY(-1px);
}

/* --- finestrella con gli orari di Shabbat --- */
.ceb-orari[open] {
    display: block;
    width: min(92vw, 460px);
    padding: 1.4rem 1.5rem 1.5rem;
    border: 1px solid var(--ceb-line-strong);
    border-radius: var(--ceb-radius-lg);
    box-shadow: var(--ceb-shadow-md);
    background: var(--ceb-white);
    color: var(--ceb-ink);
}

.ceb-orari::backdrop { background: rgba(13, 39, 64, .45); }

.ceb-orari__testata {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .9rem;
}

.ceb-orari__testata h2 { margin: 0; font-size: 1.15rem; }

.ceb-orari__chiudi {
    flex: none;
    width: 32px;
    height: 32px;
    font-size: 1.4rem;
    line-height: 1;
    color: var(--ceb-muted);
    background: transparent;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
}

.ceb-orari__chiudi:hover { background: var(--ceb-paper-deep); color: var(--ceb-ink); }

.ceb-orari__tabella {
    width: 100%;
    border-collapse: collapse;
    font-size: .93rem;
}

.ceb-orari__tabella th,
.ceb-orari__tabella td {
    padding: .5rem .4rem;
    text-align: start;
    border-bottom: 1px solid var(--ceb-line);
}

.ceb-orari__tabella thead th {
    font-size: .74rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ceb-muted);
}

.ceb-orari__tabella tbody th { font-weight: 600; }
.ceb-orari__tabella tbody td { font-variant-numeric: tabular-nums; }

.ceb-orari__fonte { margin: .9rem 0 0; font-size: .88rem; }

/* --------------------------------------------------------------------------
   Pagina Contatti: orari degli uffici, rubrica, schede, trasparenza
   -------------------------------------------------------------------------- */

.ceb-orariufficio {
    margin: 0 0 2rem;
    padding: 0;
    list-style: none;
    border: 1px solid var(--ceb-line);
    border-radius: var(--ceb-radius);
    overflow: hidden;
}

.ceb-orariufficio__riga {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "giorni ore"
        "nota   nota";
    gap: .15rem 1rem;
    align-items: baseline;
    padding: .95rem 1.15rem;
    background: var(--ceb-white);
}

.ceb-orariufficio__riga + .ceb-orariufficio__riga {
    border-top: 1px solid var(--ceb-line);
}

.ceb-article__body .ceb-orariufficio__giorni {
    grid-area: giorni;
    margin: 0;
    font-weight: 600;
}

.ceb-article__body .ceb-orariufficio__ore {
    grid-area: ore;
    margin: 0;
    font-weight: 700;
    color: var(--ceb-gold);
    white-space: nowrap;
}

.ceb-article__body .ceb-orariufficio__nota {
    grid-area: nota;
    margin: 0;
    font-size: .88rem;
    color: var(--ceb-muted);
}

/* Cassiopeia ritaglia ogni elenco dentro un articolo
   (".com-content-article ul { overflow: hidden }"): con i riquadri che si
   sollevano al passaggio del mouse il bordo superiore verrebbe tagliato via.
   Il tag nel selettore serve a pareggiare la specificità di quella regola. */
.ceb-article__body ul.ceb-rubrica,
.ceb-article__body ul.ceb-schede,
.ceb-article__body ul.ceb-luoghi,
.ceb-article__body ul.ceb-modi,
.ceb-article__body ul.ceb-orariufficio {
    overflow: visible;
}

/* --- rubrica: chi contattare --- */
.ceb-rubrica {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    margin: 0 0 2rem;
    /* aria in cima: è lo spazio in cui il riquadro si solleva */
    padding: 4px 0 0;
    list-style: none;
}

/* Le schede che portano altrove, invece di dire una cosa e basta: filo blu
   invece che dorato e fondo appena tinto. Sulla pagina dei contatti stanno in
   fondo, dopo nove schede di recapiti, e senza differenza sembravano il
   decimo e l'undicesimo recapito. */
.ceb-rubrica--vai .ceb-rubrica__voce {
    background: var(--ceb-paper);
    border-top-color: var(--ceb-navy-soft);
}

.ceb-rubrica--vai .ceb-rubrica__voce:hover {
    background: var(--ceb-white);
    border-top-color: var(--ceb-navy);
}

/* Il prefisso serve a battere ".ceb-article__body .ceb-rubrica__ruolo", che
   ha lo stesso peso e sta piu' in basso nel foglio: senza, l'etichetta
   restava dorata come quella dei recapiti. */
.ceb-article__body .ceb-rubrica--vai .ceb-rubrica__ruolo {
    color: var(--ceb-navy-soft);
}

.ceb-rubrica__voce {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    padding: 1.1rem 1.2rem;
    background: var(--ceb-white);
    border: 1px solid var(--ceb-line);
    border-radius: var(--ceb-radius);
    border-top: 3px solid var(--ceb-gold-bright);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.ceb-rubrica__voce:hover {
    transform: translateY(-3px);
    box-shadow: var(--ceb-shadow-md);
    border-color: var(--ceb-line-strong);
    border-top-color: var(--ceb-gold);
}

.ceb-article__body .ceb-rubrica__ruolo {
    margin: 0;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ceb-gold);
}

.ceb-article__body .ceb-rubrica__nome {
    margin: 0;
    font-weight: 600;
    font-size: 1.02rem;
}

.ceb-article__body .ceb-rubrica__dati {
    margin: 0;
    font-size: .92rem;
    color: var(--ceb-muted);
    line-height: 1.5;
}

.ceb-article__body .ceb-rubrica__azione {
    margin: .55rem 0 0;
}

.ceb-rubrica__azione a {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .89rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--ceb-blue);
}

.ceb-rubrica__azione a::after {
    content: "→";
    transition: transform .15s ease;
}

.ceb-rubrica__azione a:hover { color: var(--ceb-navy); }
.ceb-rubrica__azione a:hover::after { transform: translateX(3px); }

/* --- schede di approfondimento --- */
.ceb-schede {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    margin: 0 0 2.5rem;
    padding: 4px 0 0;
    list-style: none;
}

/* Variante in rilievo: tre etichette corte che stanno in fila e portano il
   filo dorato in cima, come le schede dei recapiti e quelle dei luoghi. Serve
   dove i riquadri sono il primo colpo d'occhio della pagina e non un elenco
   di rimandi: con la misura minima normale andavano a capo due e uno, e da
   soli in fondo alla riga sembravano un ripensamento. */
.ceb-article__body .ceb-schede--rilievo {
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: .9rem;
}

.ceb-schede--rilievo .ceb-scheda {
    background: var(--ceb-white);
    border-top: 3px solid var(--ceb-gold-bright);
    box-shadow: var(--ceb-shadow-sm);
}

/* Variante per le quattro cose che si cercano per prime in una pagina:
   quando, quanti, quanto dura, quanto costa. Sono etichette corte, stanno
   su una riga sola, quindi ci stanno tutte e quattro affiancate anche
   quando dividono la larghezza con la foto di apertura. */
.ceb-article__body .ceb-schede--fatti {
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: .8rem;
}

.ceb-scheda {
    padding: 1.1rem 1.2rem;
    background: var(--ceb-paper);
    border: 1px solid var(--ceb-line);
    border-radius: var(--ceb-radius);
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.ceb-scheda:hover {
    border-color: var(--ceb-line-strong);
    box-shadow: var(--ceb-shadow-sm);
    transform: translateY(-2px);
}

.ceb-article__body .ceb-scheda__titolo {
    margin: 0 0 .35rem;
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.3;
}

.ceb-scheda__titolo a {
    text-decoration: none;
    color: var(--ceb-navy);
}

.ceb-scheda__titolo a:hover { color: var(--ceb-blue); }

.ceb-article__body .ceb-scheda__testo {
    margin: 0;
    font-size: .91rem;
    color: var(--ceb-muted);
    line-height: 1.5;
}

/* --------------------------------------------------------------------------
   Pagine di una festività o di un digiuno
   --------------------------------------------------------------------------
   Diciassette pagine con la stessa struttura: quest'anno, da sapere, anni
   passati. Le schede e l'indice sono quelli di sempre, ma nascono dentro il
   corpo di un articolo e le loro regole sono scritte così: qui vanno ripetute
   per la pagina di categoria, che articolo non è.
   -------------------------------------------------------------------------- */

.ceb-festa__blocco { margin: 0 0 2.6rem; }
.ceb-festa__blocco:last-child { margin-bottom: 0; }

.ceb-festa__titoletto {
    margin: 0 0 1.15rem;
    padding-bottom: .5rem;
    font-size: 1.22rem;
    line-height: 1.25;
    color: var(--ceb-navy);
    border-bottom: 1px solid var(--ceb-line);
}

/* Il filo dorato che apre la sezione, come nelle schede in rilievo. */
.ceb-festa__titoletto::before {
    content: "";
    display: block;
    width: 2.2rem;
    height: 3px;
    margin-bottom: .6rem;
    background: var(--ceb-gold-bright);
    border-radius: 2px;
}

.ceb-festa .ceb-schede--rilievo {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: .9rem;
    margin-bottom: 0;
}

.ceb-festa .ceb-scheda__titolo {
    margin: 0 0 .35rem;
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.3;
}

.ceb-festa .ceb-scheda__testo {
    margin: 0;
    font-size: .91rem;
    line-height: 1.5;
    color: var(--ceb-muted);
}

/* Gli anni passati: pochi, quindi un elenco basta e il filtro non serve.
   Lo stile resta chiuso dentro .ceb-festa perché la stessa classe la usano le
   pagine di eventi, dove l'elenco è numerato ed è giusto che lo resti. */
.ceb-festa .ceb-elenco {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ceb-festa .ceb-elenco__voce { border-top: 1px solid var(--ceb-line); }
.ceb-festa .ceb-elenco__voce:last-child { border-bottom: 1px solid var(--ceb-line); }

.ceb-festa .ceb-elenco__voce > a {
    display: block;
    padding: .72rem .3rem;
    color: var(--ceb-ink);
    text-decoration: none;
    transition: color .15s ease, background .15s ease;
}

.ceb-festa .ceb-elenco__voce > a:hover,
.ceb-festa .ceb-elenco__voce > a:focus-visible {
    color: var(--ceb-blue);
    background: var(--ceb-paper);
}

/* --- trasparenza: obbligatoria per legge, non da mettere in vetrina --- */
.ceb-trasparenza {
    margin-top: 2.5rem;
    padding-top: 1.4rem;
    border-top: 1px solid var(--ceb-line);
}

.ceb-article__body .ceb-trasparenza h2,
.category-desc .ceb-trasparenza h2 {
    margin: 0 0 .3rem;
    font-size: 1rem;
    color: var(--ceb-muted);
}

.ceb-article__body .ceb-trasparenza > p,
.category-desc .ceb-trasparenza > p {
    margin: 0 0 .7rem;
    font-size: .88rem;
    color: var(--ceb-muted);
    max-width: 62ch;
}

/* Nella descrizione della categoria il blocco apre la pagina invece di
   chiuderla: senza filetto sopra e senza tanta aria. */
.category-desc .ceb-trasparenza {
    margin: .5rem 0 2rem;
    padding-top: 0;
    border-top: 0;
}

.ceb-trasparenza__anni {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ceb-trasparenza__anni a {
    display: inline-block;
    padding: .3rem .8rem;
    font-size: .86rem;
    text-decoration: none;
    color: var(--ceb-muted);
    background: var(--ceb-paper);
    border: 1px solid var(--ceb-line);
    border-radius: 999px;
}

.ceb-trasparenza__anni a:hover {
    color: var(--ceb-navy);
    border-color: var(--ceb-line-strong);
    background: var(--ceb-white);
}

.ceb-mappa.is-caricata {
    display: block;
    padding: 0;
    min-height: 0;
    background: var(--ceb-paper-deep);
}

.ceb-mappa iframe {
    display: block;
    width: 100%;
    height: clamp(320px, 48vw, 460px);
    border: 0;
}

/* --------------------------------------------------------------------------
   12d. Offerte
   -------------------------------------------------------------------------- */

.ceb-modi {
    display: grid;
    gap: 1.35rem;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    margin: 2rem 0;
    padding: 0;
    list-style: none;
}

.ceb-modo {
    display: flex;
    flex-direction: column;
    background: var(--ceb-white);
    border: 1px solid var(--ceb-line);
    border-radius: var(--ceb-radius-lg);
    padding: 1.35rem 1.45rem 1.5rem;
    box-shadow: var(--ceb-shadow-sm);
}

.ceb-modo--primario {
    background: var(--ceb-navy);
    border-color: var(--ceb-navy);
    color: var(--ceb-white);
    box-shadow: var(--ceb-shadow-md);
}

.ceb-modo p { margin: 0 0 .7rem; font-size: .97rem; }
.ceb-modo--primario p { color: rgba(255, 255, 255, .88); }

/* Etichetta e titolo vanno dopo la regola generica su p, e con il tag nel
   selettore, altrimenti .ceb-modo p vincerebbe sulla dimensione. */
.ceb-modo p.ceb-modo__etichetta {
    margin: 0 0 .4rem;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ceb-gold);
}

.ceb-modo--primario p.ceb-modo__etichetta { color: var(--ceb-gold-bright); }

.ceb-modo p.ceb-modo__titolo {
    margin: 0 0 .8rem;
    font-family: var(--ceb-font-head);
    font-size: 1.32rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--ceb-navy);
}

.ceb-modo--primario p.ceb-modo__titolo { color: var(--ceb-white); }

.ceb-modo dl { margin: .3rem 0 .9rem; }
.ceb-modo dt {
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ceb-muted);
    margin-top: .7rem;
}
.ceb-modo dd {
    margin: .1rem 0 0;
    font-weight: 600;
    color: var(--ceb-navy);
}

/* solo l'IBAN può andare a capo dentro la parola */
.ceb-iban {
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: 1rem;
    letter-spacing: .02em;
    word-break: break-all;
}

.ceb-copia {
    align-self: flex-start;
    margin-top: .2rem;
    background: transparent;
    border: 1px solid var(--ceb-line-strong);
    border-radius: 999px;
    padding: .35rem 1rem;
    font-family: inherit;
    font-size: .85rem;
    font-weight: 600;
    color: var(--ceb-navy);
    cursor: pointer;
}

.ceb-copia:hover { background: var(--ceb-paper); }
.ceb-copia.is-copiato {
    background: var(--ceb-navy);
    border-color: var(--ceb-navy);
    color: var(--ceb-white);
}

/* Il pulsante resta attaccato al testo che lo introduce: spingerlo in fondo
   alla scheda lo staccava dalla didascalia dei metodi accettati. */
.ceb-modo__azione { margin: .4rem 0 0; }


/* Il pulsante vero di PayPal, quello che apre la finestrella: sta fuori campo
   perché a schermo si vede il nostro. Non si usa "display: none" perché a un
   elemento non disegnato lo script di PayPal non sempre aggancia il clic. */
.ceb-paypal-nascosto {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    pointer-events: none;
}

.ceb-bottone-paypal {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    width: 100%;
    background: var(--ceb-gold-bright);
    color: var(--ceb-navy-dark);
    border: 0;
    border-radius: 999px;
    padding: 1rem 1.75rem;
    font-family: inherit;
    font-size: 1.08rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .01em;
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 2px 0 rgba(0, 0, 0, .18), 0 6px 18px rgba(0, 0, 0, .22);
    transition: background .15s ease, transform .12s ease, box-shadow .15s ease;
}

.ceb-bottone-paypal:hover,
.ceb-bottone-paypal:focus-visible {
    background: #dcbb52;
    color: var(--ceb-navy-dark);
    transform: translateY(-1px);
    box-shadow: 0 3px 0 rgba(0, 0, 0, .18), 0 10px 24px rgba(0, 0, 0, .28);
}

/* alla pressione il pulsante si abbassa: dà la sensazione del tasto premuto */
.ceb-bottone-paypal:active {
    transform: translateY(1px);
    box-shadow: 0 1px 0 rgba(0, 0, 0, .18), 0 3px 10px rgba(0, 0, 0, .22);
}

.ceb-bottone-paypal:focus-visible {
    outline: 3px solid var(--ceb-white);
    outline-offset: 3px;
}

@media (min-width: 480px) {
    /* nelle schede larghe non serve che occupi tutta la riga */
    .ceb-modo--primario .ceb-bottone-paypal { width: auto; min-width: 15rem; }
}

/* Il tag va ripetuto nel selettore: ".ceb-modo p" è più specifico della sola
   classe e altrimenti vince lui, azzerando il margine. */
.ceb-modo p.ceb-modo__mezzi {
    margin: 1.5rem 0 0;
    font-size: .82rem;
    color: rgba(255, 255, 255, .72);
}

.ceb-avviso {
    display: flex;
    gap: .9rem;
    align-items: flex-start;
    padding: 1rem 1.2rem;
    margin: 0 0 1.5rem;
    background: var(--ceb-gold-pale);
    border-inline-start: 4px solid var(--ceb-gold);
    border-radius: 0 var(--ceb-radius) var(--ceb-radius) 0;
    font-size: .95rem;
}

.ceb-avviso p { margin: 0; }

.ceb-fiscale {
    padding: 1.15rem 1.35rem;
    background: var(--ceb-paper);
    border: 1px solid var(--ceb-line);
    border-radius: var(--ceb-radius);
    font-size: .95rem;
}

.ceb-fiscale h2 {
    margin: 0 0 .5rem;
    font-size: 1.05rem;
}

.ceb-fiscale p:last-child { margin-bottom: 0; }

.ceb-fiscale ul {
    margin: .2rem 0 .9rem;
    padding-inline-start: 1.2rem;
}

.ceb-fiscale li { margin-bottom: .4rem; }

/* Variante in rilievo: l'8 per mille non è un'offerta come le altre,
   non costa nulla a chi firma, e vale la pena che si distingua. */
/* L'8x1000 non è un'offerta alla Comunità: è una scelta che si fa in
   dichiarazione dei redditi e non costa nulla. Lo stacco deve dire a colpo
   d'occhio che si sta parlando di un'altra cosa. */
.ceb-fiscale--rilievo {
    position: relative;
    margin-top: 4rem;
    background: var(--ceb-paper);
    border: 1px solid var(--ceb-line-strong);
    border-inline-start: 5px solid var(--ceb-gold-bright);
    border-radius: var(--ceb-radius-lg);
    box-shadow: var(--ceb-shadow-sm);
    padding: 1.6rem 1.75rem 1.75rem;
}

/* filo di separazione sopra il riquadro, con aria attorno */
.ceb-fiscale--rilievo::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    top: -2rem;
    height: 1px;
    background: var(--ceb-line-strong);
}

.ceb-fiscale__occhiello {
    margin: 0 0 .3rem;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ceb-gold);
}

.ceb-article__body .ceb-fiscale--rilievo h2 {
    margin: 0 0 .8rem;
    font-size: 1.3rem;
}

.ceb-article__body .ceb-fiscale--rilievo h3 {
    margin: 1.6rem 0 .2rem;
    font-size: 1.05rem;
}

/* Banner della campagna UCEI */
.ceb-banner8 {
    margin: 1.1rem 0 1.4rem;
}

/* Il selettore ripete ".ceb-article__body" per avere la meglio sulla regola
   generica delle immagini nel testo (".ceb-article__body .ceb-article__inline-image"),
   che l'immagine prende comunque perché passa dalla stessa normalizzazione
   delle altre - a parità di classi conta solo l'ordine, ed è un dettaglio
   fragile su cui non vale la pena contare. */
.ceb-article__body .ceb-banner8 img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 720px;
    border-radius: var(--ceb-radius);
    box-shadow: var(--ceb-shadow-sm);
}

/* I tre modi per firmare */
.ceb-firma {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    list-style: none;
    margin: 1.1rem 0 1.4rem;
    padding: 0;
}

.ceb-firma__caso {
    background: var(--ceb-paper);
    border: 1px solid var(--ceb-line);
    border-radius: var(--ceb-radius);
    padding: 1.05rem 1.2rem 1.2rem;
}

.ceb-article__body .ceb-firma__modello {
    margin: 0 0 .7rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--ceb-line-strong);
    font-family: var(--ceb-font-head);
    font-size: 1.08rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--ceb-navy);
}

.ceb-firma__caso dl { margin: 0; }

.ceb-firma__caso dt {
    margin-top: .75rem;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ceb-gold);
}

.ceb-firma__caso dt:first-child { margin-top: 0; }

.ceb-firma__caso dd {
    margin: .15rem 0 0;
    font-size: .93rem;
    line-height: 1.5;
    color: var(--ceb-ink);
}

/* Collegamento per scaricare la guida */
.ceb-firma__guida {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .9rem;
    margin: 0 0 1.1rem;
}

.ceb-scarica {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    background: var(--ceb-navy);
    color: var(--ceb-white);
    border-radius: 999px;
    padding: .65rem 1.4rem;
    font-size: .95rem;
    font-weight: 700;
    text-decoration: none;
    box-shadow: var(--ceb-shadow-sm);
    transition: background .15s ease;
}

.ceb-scarica:hover,
.ceb-scarica:focus-visible {
    background: var(--ceb-navy-soft);
    color: var(--ceb-white);
}

.ceb-scarica svg { flex: none; width: 1.1em; height: 1.1em; }

.ceb-scarica__dettaglio {
    font-size: .85rem;
    color: var(--ceb-muted);
}

/* --------------------------------------------------------------------------
   13a. Orari dello Shabbat
   -------------------------------------------------------------------------- */

.ceb-shabbat__intro {
    font-size: 1.05rem;
}

.ceb-shabbat__note {
    font-size: .92rem;
    color: var(--ceb-muted);
    padding: .8rem 1rem;
    background: var(--ceb-paper);
    border-inline-start: 3px solid var(--ceb-line-strong);
    border-radius: 0 var(--ceb-radius) var(--ceb-radius) 0;
}

.ceb-shabbat__credit {
    font-size: .85rem;
    color: var(--ceb-muted);
    margin-top: 1.5rem;
}

/* Riquadro del prossimo Shabbat, riempito dal javascript del template */
.ceb-shabbat__next {
    background: var(--ceb-navy);
    color: var(--ceb-white);
    border-radius: var(--ceb-radius-lg);
    padding: 1.35rem 1.5rem;
    margin: 1.75rem 0;
    box-shadow: var(--ceb-shadow-md);
    border-top: 4px solid var(--ceb-gold-bright);
}

.ceb-shabbat__next[hidden] { display: none; }

.ceb-shabbat__next-label {
    margin: 0 0 .2rem;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ceb-gold-bright);
}

.ceb-shabbat__next-date {
    font-family: var(--ceb-font-head);
    font-size: clamp(1.3rem, 1.1rem + 1vw, 1.75rem);
    color: var(--ceb-white);
    margin: 0 0 .9rem;
    line-height: 1.2;
}

.ceb-shabbat__next-times {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 2.5rem;
    margin: 0;
}

.ceb-shabbat__next-times div {
    display: flex;
    flex-direction: column;
    gap: .1rem;
}

.ceb-shabbat__next-times dt {
    font-size: .78rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .72);
    font-weight: 600;
}

.ceb-shabbat__next-times dd {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--ceb-white);
}

.ceb-shabbat__next-times dd small {
    display: block;
    font-size: .8rem;
    font-weight: 400;
    color: rgba(255, 255, 255, .78);
}

/* Gli stessi due orari dentro la scheda di anteprima del singolo sabato.
   Lì il fondo è chiaro, quindi cambiano solo i colori: la forma - etichetta
   piccola in alto, ora in grande, giorno sotto - è quella del riquadro azzurro
   in cima alla pagina degli orari, che è dove il lettore l'ha già vista. */
.ceb-card__sabato {
    margin: .35rem 0 1.1rem;
}

/* Nella scheda la lista perde tutto il vestito che ha nella pagina: là è un
   riquadro a due caselle divise da un filo, e per ottenerlo il contenitore ha
   un fondo grigio che si vede attraverso il distacco di un pixel. Messo in
   fila invece che in griglia, quel fondo restava scoperto e si vedeva una
   fascia grigia larga mezza scheda. */
.ceb-card__sabato .ceb-sabato__orari {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem 2.4rem;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    overflow: visible;
}

.ceb-card__sabato .ceb-sabato__voce {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    padding: 0;
    background: none;
    text-align: start;
}

.ceb-card__sabato .ceb-sabato__voce dd {
    flex-direction: row;
    align-items: baseline;
    gap: .45rem;
}

/* L'ora, nella scheda, non è il contenuto della pagina ma una riga di
   anteprima: sta al corpo del testo, non a due centimetri d'altezza. */
.ceb-card__sabato .ceb-sabato__voce time {
    font-family: var(--ceb-font-head);
    font-size: 1.45rem;
    line-height: 1.1;
    color: var(--ceb-navy);
}

/* La candela e le tre stelle sono disegnini da venticinque pixel: alla misura
   dell'anteprima diventano due macchioline e non aggiungono nulla a due
   etichette che già dicono "accensione" e "termine". */
.ceb-card__sabato .ceb-sabato__icona { display: none; }

/* La scheda del prossimo sabato non è un articolo illustrato: sono una data e
   due orari. Con la spartizione normale - quasi metà scheda alla fotografia -
   restava una miniatura alta quattrocento punti accanto a tre righe di testo,
   e sotto il vuoto. Qui la figura si stringe a una colonna stretta e il
   contenuto prende il resto. */
@media (min-width: 720px) {
    .items-leading .blog-item:has(.ceb-card__sabato) .item-image {
        flex: 0 0 clamp(180px, 22%, 260px);
        aspect-ratio: 1 / 1;
        max-height: none;
    }

    .items-leading .blog-item:has(.ceb-card__sabato) .item-content {
        padding: 1.7rem 2rem;
    }
}

.ceb-card__sabato dt {
    font-size: .74rem;
    letter-spacing: .09em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--ceb-muted);
}

.ceb-card__sabato dd {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--ceb-navy);
}

.ceb-card__sabato dd small {
    display: block;
    font-size: .78rem;
    font-weight: 400;
    color: var(--ceb-muted);
}

/* Il rimando alla lettura della settimana, dentro il riquadro blu.
   Sta sopra "Vedi nella tabella" perche' e' un'altra pagina, mentre quello
   e' un salto dentro la stessa. */
.ceb-shabbat__next-parasha {
    margin: .85rem 0 0;
    font-size: .9rem;
}

.ceb-shabbat__next-parasha a {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    color: var(--ceb-gold-pale);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid rgba(243, 233, 207, .4);
    padding-bottom: 1px;
}

.ceb-shabbat__next-parasha a:hover,
.ceb-shabbat__next-parasha a:focus-visible {
    color: var(--ceb-white);
    border-bottom-color: var(--ceb-white);
}

.ceb-shabbat__next-icona {
    flex: none;
    /* il rotolo e' piu' alto che largo: un filo sotto la linea di base
       si allinea meglio con le maiuscole della scritta */
    transform: translateY(1px);
}

.ceb-shabbat__next-jump {
    margin: 1.1rem 0 0;
    font-size: .9rem;
}

.ceb-shabbat__next-jump a {
    color: var(--ceb-gold-bright);
    text-underline-offset: .2em;
}

.ceb-shabbat__next-jump a:hover,
.ceb-shabbat__next-jump a:focus-visible {
    color: var(--ceb-white);
}

/* La riga raggiunta dal collegamento non deve finire sotto l'intestazione
   fissa. Questo e' solo il valore di partenza: appena la pagina si apre,
   ceb5.js lo sostituisce con l'altezza vera dell'intestazione, che cambia
   parecchio fra desktop e telefono. */
.ceb-orari tr[id] { scroll-margin-top: 15rem; }

/* Tabella degli orari dello Shabbat.
   Il selettore include il tag perché .ceb-main table, più su, ha la stessa
   specificità e altrimenti vincerebbe sul max-width. */
table.ceb-orari {
    width: 100%;
    /* cinque colonne: data, lettura, inizio, termine e la freccia. A 620
       punti, misura buona quando le colonne erano tre, i nomi delle parashot
       andavano a capo. */
    max-width: 780px;
    border-collapse: collapse;
    margin: 1.5rem 0 2.5rem;
    font-variant-numeric: tabular-nums;
}

.ceb-orari caption {
    caption-side: top;
    text-align: start;
    font-family: var(--ceb-font-head);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--ceb-navy);
    padding-bottom: .6rem;
}

/* L'intestazione resta in vista mentre si scorre: trentasette righe sono
   troppe per tenere a mente quale colonna è l'inizio e quale il termine.
   Si ferma sotto l'intestazione del sito, la cui altezza vera la scrive
   ceb5.js in --ceb-header-h: qui non si può indovinare, cambia fra desktop
   e telefono. */
.ceb-orari thead th {
    position: sticky;
    top: var(--ceb-header-h, 96px);
    z-index: 2;
    background: var(--ceb-navy);
    color: var(--ceb-white);
    font-family: var(--ceb-font-body);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    text-align: start;
    padding: .65rem .9rem;
    border: 0;
}

/* La stessa classe veste anche il riquadro a comparsa degli orari, che si apre
   dal modulo della sorveglianza. Li' dentro non c'e' nessuna testata del sito
   sopra, quindi `top: 96px` non aggancia niente: stacca l'intestazione dal
   bordo e la deposita in mezzo alle righe, sopra le prime quattro date.
   Nel riquadro le righe sono poche e stanno tutte in vista: l'intestazione
   torna dove deve, in cima e ferma. */
dialog.ceb-orari thead th {
    position: static;
    top: auto;
}

/* Gli orari incolonnati a destra, i nomi a sinistra: un nome allineato a
   destra si legge male in un elenco. Sono la seconda e la terza colonna da
   quando la parashà è passata in fondo: prima stava fra la data e l'inizio, e
   divideva in due le tre cose che si leggono insieme. */
.ceb-orari thead th:nth-child(2),
.ceb-orari thead th:nth-child(3) { text-align: end; }

.ceb-orari tbody th,
.ceb-orari tbody td {
    padding: .6rem .9rem;
    border: 0;
    border-bottom: 1px solid var(--ceb-line);
}

.ceb-orari tbody th {
    font-weight: 500;
    text-align: start;
    color: var(--ceb-ink);
    background: transparent;
    white-space: nowrap;
}

.ceb-orari tbody td {
    text-align: end;
    font-weight: 600;
    color: var(--ceb-navy);
    white-space: nowrap;
}

/* Niente righe alternate: i separatori di mese le sfaserebbero.
   La lettura è guidata dai filetti e dall'evidenziazione al passaggio. */
.ceb-orari tbody tr:not(.ceb-orari__mese):hover th,
.ceb-orari tbody tr:not(.ceb-orari__mese):hover td {
    background: var(--ceb-paper);
}

/* --- la lettura della settimana ------------------------------------------
   Il nome della parashà, che prima stava nascosto nel suggerimento del
   collegamento sulla data: c'era, ma solo per chi ha un mouse. */
.ceb-orari__lettura {
    text-align: start !important;
    font-weight: 500 !important;
    white-space: normal !important;
    color: var(--ceb-muted) !important;
    /* Molte settimane non hanno ancora il commento e la cella resta vuota:
       senza una misura minima la colonna si stringerebbe a nulla e le righe
       piene sembrerebbero sfalsate rispetto alle altre. */
    min-width: 9rem;
}

.ceb-orari__lettura a {
    color: var(--ceb-blue);
    text-decoration: none;
    text-underline-offset: .18em;
}

.ceb-orari__lettura a:hover,
.ceb-orari__lettura a:focus-visible {
    color: var(--ceb-navy);
    text-decoration: underline;
}

/* --- i sabati già passati -------------------------------------------------
   Smorzati, non nascosti: servono a chi cerca un orario di un mese fa, ma non
   devono contendere l'attenzione a quelli che devono ancora arrivare. */
.ceb-orari tr.is-past th,
.ceb-orari tr.is-past td {
    color: var(--ceb-muted);
    font-weight: 400;
}

.ceb-orari tr.is-past .ceb-orari__lettura a { color: var(--ceb-muted); }

.ceb-orari tr.is-past .ceb-orari__lettura a:hover,
.ceb-orari tr.is-past .ceb-orari__lettura a:focus-visible { color: var(--ceb-navy); }

/* --- colonna che porta alla pagina del singolo sabato ---------------------
   La freccia resta scolorita finché non si passa sulla riga: è un servizio in
   più, non deve competere con gli orari, che sono il motivo per cui si apre
   questa tabella. Dove la pagina della settimana non esiste la cella è vuota,
   e la colonna tiene comunque la sua larghezza perché le righe non ballino. */
/* La parashà e il rotolo sono un collegamento solo: si clicca il nome o
   l'icona, si arriva nello stesso posto. Prima erano due colonne separate -
   il nome, e in fondo una freccia - e non era detto che portassero alla stessa
   pagina. */
.ceb-orari__parasha {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
}

.ceb-orari__sefer {
    flex: none;
    color: var(--ceb-gold);
    transition: color .15s ease;
}

.ceb-orari__parasha:hover .ceb-orari__sefer,
.ceb-orari__parasha:focus-visible .ceb-orari__sefer {
    color: var(--ceb-navy);
}

.ceb-orari tr.is-past .ceb-orari__sefer { color: var(--ceb-line-strong); }

/* Riga di separazione fra i mesi */
/* Il titolo del mese non resta agganciato mentre si scorre, anche se sarebbe
   comodo: il browser vincola le celle agganciate alla tabella intera e non al
   gruppo di righe, quindi si fermerebbero tutti alla stessa altezza uno sopra
   l'altro. Provato anche agganciando la riga invece della cella: uguale.
   Compaiono ogni quattro o cinque sabati, non si è mai lontani da uno. */
/* La riga del mese è una fascia colorata e non più una scritta sospesa nel
   bianco: novantadue righe tutte uguali si leggono male, e il colore dà
   all'occhio un appiglio per capire dove finisce un mese e comincia l'altro
   senza doverlo leggere. */
/* Il selettore porta "tbody" davanti apposta: la regola generale
   ".ceb-orari tbody th" è più specifica di ".ceb-orari__mese th", e vinceva
   lei. Era già così prima, e infatti il colore oro del mese non si è mai
   visto: si leggeva del testo scuro su fondo bianco come tutto il resto. */
/* La fascia del mese è azzurrina, non dorata: l'oro in questa tabella vuol dire
   una cosa sola, "questo è il sabato che viene", e averlo anche sui ventitré
   cambi di mese metteva sulla pagina ventiquattro strisce identiche fra cui il
   sabato non si distingueva più. Il mese divide, e basta che si veda che
   divide; il sabato in arrivo deve saltare all'occhio. */
.ceb-orari tbody tr.ceb-orari__mese th {
    background: var(--ceb-mese);
    padding: .5rem .9rem;
    font-family: var(--ceb-font-body);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ceb-navy);
    text-align: start;
    border-top: 1px solid var(--ceb-mese-filo);
    border-bottom: 1px solid var(--ceb-mese-filo);
}

/* La prima riga del mese non ha bisogno del filo sopra: ce l'ha già la fascia. */
.ceb-orari__mese + tr th,
.ceb-orari__mese + tr td { border-top: 0; }

/* Lo Shabbat in arrivo */
.ceb-orari tr.is-next th,
.ceb-orari tr.is-next td {
    background: var(--ceb-gold-pale);
    border-bottom-color: var(--ceb-gold-bright);
    font-weight: 700;
    color: var(--ceb-navy-dark);
}

.ceb-orari tr.is-next th:first-child {
    box-shadow: inset 3px 0 0 var(--ceb-gold-bright);
}

.ceb-orari tr.is-next th::after {
    content: "→";
    margin-inline-start: .45rem;
    color: var(--ceb-gold);
    font-weight: 700;
}

.ceb-orari tr.is-next .ceb-orari__lettura a {
    color: var(--ceb-navy-dark);
    font-weight: 700;
}

/* Su schermo stretto la freccia se ne va: la pagina del singolo sabato si
   raggiunge comunque dal riquadro in cima, e quei tre centimetri servono ai
   nomi delle parashot. */
@media (max-width: 640px) {
    /* Su schermo stretto il nome della parashà resta - è l'unica cosa in
       tabella che porti da qualche parte - ma si stringe. */
    .ceb-orari__lettura { min-width: 0; }
}

@media (max-width: 480px) {
    .ceb-orari tbody th,
    .ceb-orari tbody td,
    .ceb-orari thead th { padding-inline: .5rem; }
    .ceb-orari { font-size: .92rem; }
    .ceb-orari__lettura { font-size: .85rem; }
}

/* --------------------------------------------------------------------------
   13b. Pagina di errore
   -------------------------------------------------------------------------- */

.ceb-error {
    max-width: 60ch;
    padding-block: clamp(2rem, 6vw, 4rem);
}

.ceb-error__code {
    font-family: var(--ceb-font-head);
    font-size: clamp(3.5rem, 10vw, 6rem);
    line-height: 1;
    color: var(--ceb-gold-bright);
    margin: 0 0 .25rem;
}

.ceb-error__intro { font-size: 1.1rem; }

.ceb-error__message {
    color: var(--ceb-muted);
    font-size: .95rem;
    padding: .75rem 1rem;
    background: var(--ceb-paper);
    border-inline-start: 3px solid var(--ceb-line-strong);
    border-radius: 0 var(--ceb-radius) var(--ceb-radius) 0;
}

.ceb-error__debug {
    margin-top: 2rem;
    font-size: .8rem;
    overflow-x: auto;
}

/* --------------------------------------------------------------------------
   14. Utilità
   -------------------------------------------------------------------------- */

.visually-hidden,
.sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Stampa */
/* --------------------------------------------------------------------------
   Calendario delle festività
   Una fila di mesi: a sinistra il periodo, a destra le ricorrenze. I digiuni
   restano più sobri delle feste, così si distinguono senza bisogno di leggere.
   La ricorrenza più vicina viene messa in risalto da ceb5.js.
   -------------------------------------------------------------------------- */

.ceb-calendario__intro {
    max-width: 62ch;
    color: var(--ceb-muted);
}

.ceb-calendario {
    margin: 1.8rem 0 1.4rem;
    border-top: 1px solid var(--ceb-line);
}

.ceb-calendario__gruppo {
    display: grid;
    grid-template-columns: 11rem minmax(0, 1fr);
    gap: 0 1.5rem;
    padding: 1.25rem 0 1.35rem;
    border-bottom: 1px solid var(--ceb-line);
}

/* --- la fascia del mese --- */
.ceb-calendario__mese {
    margin: 0;
    font-family: var(--ceb-font-head);
    font-size: 1.02rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ceb-navy);
    align-self: start;
    position: sticky;
    top: calc(var(--ceb-header-h) + 1rem);
}

.ceb-calendario__meseanno {
    display: block;
    font-family: var(--ceb-font-body);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--ceb-gold);
}

/* --- le ricorrenze --- */
.ceb-calendario__voci {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: .1rem;
}

.ceb-calendario__voce {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: .1rem .9rem;
    padding: .5rem .7rem;
    border-radius: var(--ceb-radius);
}

/* Ricorrenze già passate e annate finite: fuori dalla vista. Le marca il
   JS confrontando la data di fine con oggi. Restano però nella pagina, così
   il calendario completo non va perso e per rivederlo tutto basta togliere
   queste due righe. */
.ceb-calendario__voce.is-passata,
.ceb-calendario__gruppo.is-passato {
    display: none;
}

/* Se la prima voce visibile non è la prima dell'elenco, le righe alternate
   partirebbero dal colore sbagliato: si lascia fare al nth-child, che conta
   anche le nascoste, per non far saltare il ritmo quando cambia il giorno. */
.ceb-calendario__voce:nth-child(odd) { background: var(--ceb-paper); }

.ceb-calendario__nome {
    font-weight: 600;
    color: var(--ceb-ink);
}

.ceb-calendario__quando {
    text-align: right;
    color: var(--ceb-muted);
    font-variant-numeric: tabular-nums;
}

/* la vigilia sta sotto la data, in piccolo: è un'informazione di servizio */
.ceb-calendario__vigilia {
    grid-column: 2;
    text-align: right;
    font-size: .82rem;
    font-style: italic;
    color: var(--ceb-muted);
}

/* --- i digiuni --- */
.ceb-calendario__voce--digiuno .ceb-calendario__nome {
    font-weight: 500;
    color: var(--ceb-muted);
}

.ceb-calendario__voce--digiuno .ceb-calendario__nome::before {
    content: "";
    display: inline-block;
    width: .42rem;
    height: .42rem;
    margin-inline-end: .5rem;
    vertical-align: .1em;
    border: 1px solid var(--ceb-line-strong);
    border-radius: 50%;
}

/* --- la prossima ricorrenza --- */
.ceb-calendario__voce.is-prossima {
    background: var(--ceb-gold-pale);
    box-shadow: inset 3px 0 0 var(--ceb-gold-bright);
}

.ceb-calendario__voce.is-prossima .ceb-calendario__nome,
.ceb-calendario__voce.is-prossima .ceb-calendario__quando {
    color: var(--ceb-navy);
}

.ceb-calendario__voce.is-prossima .ceb-calendario__nome::after {
    content: attr(data-etichetta);
    margin-inline-start: .6rem;
    padding: .06rem .45rem;
    font-family: var(--ceb-font-body);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ceb-white);
    background: var(--ceb-gold);
    border-radius: 999px;
    white-space: nowrap;
}

.ceb-calendario__nota {
    margin-top: 1.2rem;
    font-size: .88rem;
    color: var(--ceb-muted);
}

@media (max-width: 640px) {
    .ceb-calendario__gruppo {
        grid-template-columns: minmax(0, 1fr);
        gap: .5rem;
    }

    .ceb-calendario__mese {
        position: static;
        display: flex;
        align-items: baseline;
        gap: .5rem;
    }

    .ceb-calendario__meseanno { display: inline; }

    .ceb-calendario__voce {
        grid-template-columns: minmax(0, 1fr);
        gap: .1rem;
    }

    .ceb-calendario__quando,
    .ceb-calendario__vigilia {
        grid-column: 1;
        text-align: left;
    }
}

/* --------------------------------------------------------------------------
   Pagina del singolo Shabbat
   L'originale metteva due numeri affiancati a due iconcine - la candela e le
   tre stelle - senza dire quale fosse l'accensione e quale il termine, e senza
   ricordare che l'accensione è la sera prima. Le icone restano, perché sono il
   linguaggio con cui la Comunità segna queste due ore, ma ora ognuna ha il suo
   nome e il suo giorno.

   Sotto la scheda continua il testo della parashà così com'è scritto
   nell'articolo: lì non si tocca la struttura, si sistema solo la lettura.
   -------------------------------------------------------------------------- */

.ceb-sabato {
    max-width: 560px;
    margin: 1.5rem auto 1.8rem;
}

.ceb-sabato__orari {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    margin: 0;
    background: var(--ceb-line);
    border: 1px solid var(--ceb-line);
    border-radius: var(--ceb-radius-lg);
    overflow: hidden;
}

.ceb-sabato__voce {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    padding: 1.3rem 1.1rem 1.4rem;
    background: var(--ceb-white);
    text-align: center;
}

.ceb-sabato__voce dt {
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ceb-muted);
}

.ceb-sabato__voce dd {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .3rem;
}

/* Le due icone hanno proporzioni diverse - la candela è alta, le stelle sono
   larghe - quindi si allineano su un'altezza comune invece che su una misura. */
.ceb-sabato__icona {
    width: auto;
    height: 34px;
    opacity: .85;
}

.ceb-sabato__voce time {
    font-family: var(--ceb-font-head);
    font-size: 2.2rem;
    line-height: 1;
    color: var(--ceb-navy);
    font-variant-numeric: tabular-nums;
}

.ceb-sabato__voce small {
    font-size: .78rem;
    line-height: 1.35;
    color: var(--ceb-muted);
}

/* La riga che dichiara la traduzione automatica, in fondo ai commenti alla
   parashà in inglese. Sta staccata dal testo e scritta in piccolo: è una nota
   di servizio, non fa parte del commento. */
.ceb-article__body .ceb-tradotto {
    margin: 2.4rem 0 0;
    padding-top: .9rem;
    border-top: 1px solid var(--ceb-line);
    font-size: .82rem;
    font-style: italic;
    line-height: 1.5;
    color: var(--ceb-muted);
}

/* --- rimando al commento della settimana ---------------------------------
   Sta in fondo alla pagina, dopo che si è letto di quale parashà si tratta:
   prima veniva subito sotto gli orari e proponeva un commento senza che si
   sapesse ancora a cosa si riferisse. È l'unica azione della pagina, quindi
   ha il peso di un invito e non di un link di servizio. */
.ceb-sabato__commento {
    margin: 2.2rem 0 .5rem;
    text-align: center;
}

.ceb-sabato__commento a {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .7rem 1.35rem;
    font-size: .95rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--ceb-white);
    background: var(--ceb-navy);
    border: 1px solid var(--ceb-navy);
    border-radius: 999px;
    transition: background .18s ease, border-color .18s ease, transform .18s ease;
}

.ceb-sabato__commento a:hover,
.ceb-sabato__commento a:focus-visible {
    background: var(--ceb-blue);
    border-color: var(--ceb-blue);
    transform: translateY(-1px);
}

.ceb-sabato__commento a:focus-visible {
    outline: 2px solid var(--ceb-gold);
    outline-offset: 3px;
}

/* la freccia si sposta all'invito, come a dire "si va di là" */
.ceb-sabato__commento svg {
    transition: transform .18s ease;
}

.ceb-sabato__commento a:hover svg {
    transform: translateX(3px);
}

/* --- il testo della parashà, che segue la scheda ---------------------------
   Resta centrato come nell'originale. Il nome e le due diciture sono tutti in
   grassetto dentro il testo e per 86 pagine su 104 stanno nello stesso
   paragrafo: li distingue ceb5-content.php, che li marca leggendone il testo,
   perché dal solo foglio di stile non erano separabili. */
.ceb-sabato ~ p {
    max-width: 62ch;
    margin-inline: auto;
    text-align: center;
    line-height: 1.75;
}

/* Tutta la pagina del sabato sta in una colonna sola, larga quanto la scheda
   degli orari e centrata: prima ogni pezzo prendeva una misura sua - la
   scheda 560, i capoversi 517, l'elenco degli argomenti tutta la pagina - e
   sulle centosei pagine settimanali non ce n'erano due uguali. */
.ceb-article .ceb-article__body:has(.ceb-sabato) {
    max-width: 560px;
    margin-inline: auto;
}

.ceb-article__body:has(.ceb-sabato) > * {
    max-width: none;
}

/* L'elenco degli argomenti della parashà, centrato come tutto il resto della
   pagina.
   Prima era allineato a sinistra e la pagina si spezzava in due: il titolo, i
   brani e il pulsante al centro, l'elenco tutto a sinistra. Stringerlo non
   serviva - la voce più lunga è "A Mosè viene richiesto di salire sul monte e
   vi rimane per quaranta giorni", che la colonna la riempie tutta - quindi si
   toglie il pallino e si centra il testo, che è la forma che hanno già le
   righe dei brani qui sopra. */
.ceb-sabato ~ ul,
.ceb-sabato ~ ol {
    max-width: 62ch;
    margin-inline: auto;
    padding-inline-start: 0;
    list-style: none;
    text-align: center;
    line-height: 1.7;
}

.ceb-sabato ~ ul li,
.ceb-sabato ~ ol li {
    margin-bottom: .2em;
}

/* il nome della parashà: è il titolo di fatto della pagina */
.ceb-sabato__nome {
    display: inline-block;
    margin-bottom: .35rem;
    font-family: var(--ceb-font-head);
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--ceb-navy);
}

/* "Parashà:" e "Haftarà:" introducono i riferimenti, non sono testo corrente */
.ceb-sabato__eti {
    display: inline-block;
    margin-top: .7rem;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--ceb-gold);
}

/* Il ritorno a capo dentro l'etichetta arriva dal testo originale e con il
   blocco in linea lascerebbe una riga vuota. */
.ceb-sabato__eti br { display: none; }

@media (max-width: 420px) {
    .ceb-sabato__orari { grid-template-columns: minmax(0, 1fr); }
    .ceb-sabato__voce time { font-size: 1.9rem; }
}

/* --------------------------------------------------------------------------
   Testi lunghi delle festività
   Erano un unico paragrafo di quindici cartelle: i titoli di sezione esistevano
   ma erano segnati in modi diversi fra loro - a volte un grassetto, a volte
   solo un corpo più grande, che la ripulitura degli stili toglie - e all'occhio
   non restava nessun appiglio. Ora sono titoli veri.
   -------------------------------------------------------------------------- */

.ceb-testo__sezione {
    clear: both;
    margin: 2.4rem 0 .9rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--ceb-line);
    font-family: var(--ceb-font-head);
    font-size: 1.42rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--ceb-navy);
}

/* il primo non ha bisogno della riga che lo stacca da quello che c'era prima */
.ceb-testo__sezione:first-of-type {
    border-top: 0;
    padding-top: 0;
}

/* Da dove viene il testo: si cita, ma non si legge come il resto. */
.ceb-testo__fonti {
    clear: both;
    margin-top: 2rem;
    padding-top: .9rem;
    border-top: 1px solid var(--ceb-line);
    font-size: .84rem;
    line-height: 1.6;
    color: var(--ceb-muted);
}

/* --- immagini dentro al testo -----------------------------------------
   Prima erano incollate al paragrafo con 10px di margine su un lato solo:
   la prima riga di testo gli girava attorno stretta stretta. Qui hanno aria
   su tutti i lati, un bordo e un'ombra leggera come le altre immagini del
   sito, e una didascalia per chi si chiede cosa si sta guardando. Restano
   affiancate al testo (il punto della richiesta era usare tutta la pagina,
   non eliminare le foto dal fianco del testo) ma con lo spazio giusto. */
.ceb-testo__figura {
    margin: .3rem 0 1.5rem;
    max-width: 260px;
}

.ceb-testo__figura--dx {
    float: right;
    margin-inline-start: 1.75rem;
}

.ceb-testo__figura--sx {
    float: left;
    margin-inline-end: 1.75rem;
}

/* le due verticali (la cartolina, l'infografica del seder) restano più strette,
   altrimenti a parità di larghezza sembrerebbero sproporzionate */
.ceb-testo__figura--stretta { max-width: 190px; }

.ceb-testo__figura img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--ceb-radius);
    border: 1px solid var(--ceb-line);
    box-shadow: var(--ceb-shadow-sm);
}

.ceb-testo__figura figcaption {
    margin-top: .5rem;
    font-size: .8rem;
    line-height: 1.4;
    color: var(--ceb-muted);
    text-align: center;
}

/* Un'immagine piccola nel primo paragrafo: stessa cura, ma senza pretendere
   la scheda intera - qui basta un accento accanto alle prime righe. */
.ceb-testo__apertura {
    float: left;
    margin: .2rem 1.5rem 1rem 0;
    max-width: 150px;
}

.ceb-testo__apertura img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--ceb-radius);
    border: 1px solid var(--ceb-line);
    box-shadow: var(--ceb-shadow-sm);
}

@media (max-width: 560px) {
    .ceb-testo__figura,
    .ceb-testo__apertura {
        float: none;
        max-width: 320px;
        margin: 1.25rem auto;
    }
}

/* --------------------------------------------------------------------------
   Un documento, da solo: pagine come questa non hanno testo attorno, solo
   una scansione o una foto - il testo del Kol Nidrei, per esempio. Il layout
   a due colonne pensato per un articolo con la sua immagine di apertura non
   serve a niente qui: metà pagina resterebbe vuota. L'immagine sta invece al
   centro, alla misura più grande che la sua risoluzione regge senza sfocarsi,
   su un cartoncino chiaro che la fa sembrare in mostra, non solo incollata.
   -------------------------------------------------------------------------- */
.ceb-documento {
    max-width: 560px;
    margin: 1.5rem auto;
    padding: 1.75rem;
    text-align: center;
    background: var(--ceb-paper);
    border: 1px solid var(--ceb-line);
    border-radius: var(--ceb-radius-lg);
    box-shadow: var(--ceb-shadow-sm);
}

.ceb-documento img {
    display: block;
    width: 100%;
    height: auto;
    margin-inline: auto;
    border-radius: calc(var(--ceb-radius) - 2px);
    box-shadow: var(--ceb-shadow-sm);
    background: var(--ceb-white);
}

.ceb-documento figcaption {
    margin-top: 1.1rem;
    font-size: .88rem;
    line-height: 1.5;
    color: var(--ceb-muted);
}

@media (max-width: 640px) {
    .ceb-documento {
        max-width: 100%;
        padding: 1.25rem;
    }
}

@media print {
    .ceb-header, .ceb-nav, .ceb-hero, .ceb-features, .ceb-sidebar,
    .ceb-footer, .ceb-backtop, .ceb-breadcrumbs, .ceb-searchpanel { display: none !important; }
    body.site { font-size: 11pt; color: #000; }
    a { color: #000; text-decoration: underline; }
    .ceb-main { max-width: none; }
}

/* Indice di un articolo diviso in pagine ({pagebreak}, es. la Haggadah per
   bambini in 22 tavole). Di suo Joomla lo mette in una card stretta
   agganciata a destra del testo: un elenco verticale che con più di una
   manciata di pagine diventa una colonna lunghissima e spinge tutto il
   resto in basso. Qui diventa una fila di pillole che vanno a capo -
   leggibile a colpo d'occhio, comoda anche da telefono. */
.ceb-article .article-index {
    /* Bootstrap mette "float-end" e i margini come utility !important:
       senza pareggiarli qui, il float vince comunque sulla larghezza 100%. */
    float: none !important;
    width: 100%;
    max-width: none;
    margin: 0 0 2rem !important;
    background: var(--ceb-paper);
    border: 1px solid var(--ceb-line);
    border-radius: var(--ceb-radius-lg);
    box-shadow: var(--ceb-shadow-sm);
}

.ceb-article .article-index .card-body {
    padding: 1.1rem 1.4rem;
}

.ceb-article .article-index h3 {
    margin: 0 0 .75rem;
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--ceb-ink);
    opacity: .65;
}

.ceb-article .article-index ul.nav {
    /* Joomla ci mette anche "flex-column": un'altra utility Bootstrap
       !important, va pareggiata o l'elenco resta in colonna. */
    display: flex;
    flex-direction: row !important;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: .4rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.ceb-article .article-index ul.nav li {
    display: block;
    width: auto;
    margin: 0;
    padding: 0;
}

.ceb-article .article-index .toclink {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.2rem;
    padding: .35rem .75rem;
    border-radius: 999px;
    background: var(--ceb-paper-deep);
    border: 1px solid var(--ceb-line);
    color: var(--ceb-ink);
    text-decoration: none;
    font-size: .88rem;
    line-height: 1.2;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.ceb-article .article-index .toclink:hover,
.ceb-article .article-index .toclink:focus-visible {
    background: var(--ceb-gold-pale);
    border-color: var(--ceb-gold);
}

/* la pagina che si sta guardando, segnata dal JS (initIndiceArticolo) */
.ceb-article .article-index .toclink.is-corrente {
    background: var(--ceb-gold);
    border-color: var(--ceb-gold);
    color: var(--ceb-white);
    font-weight: 600;
}

/* l'ultima voce e' sempre "Tutte le pagine": porta a una vista diversa
   dalle altre (l'intera storia di seguito), si distingue un poco */
.ceb-article .article-index ul.nav li:last-child .toclink:not(.is-corrente) {
    border-color: var(--ceb-gold);
    font-weight: 600;
}

@media (max-width: 560px) {
    .ceb-article .article-index .card-body {
        padding: 1rem;
    }

    .ceb-article .article-index .toclink {
        min-width: 2rem;
        padding: .3rem .6rem;
        font-size: .84rem;
    }
}

/* --- paragrafo d'apertura ---------------------------------------------------
   La frase che accoglie il lettore: più grande del testo normale ma non un
   titolo. Serve a far capire in due righe di che pagina si tratta. */
.ceb-article__body .ceb-guida {
    margin: 0 0 1.75rem;
    color: var(--ceb-ink);
    font-size: 1.12rem;
    line-height: 1.6;
}

/* --- passi da seguire -------------------------------------------------------
   Un elenco numerato dove il numero è un pallino disegnato, non la cifra
   piccola del browser. Resta un <ol>: chi usa un lettore di schermo sente
   comunque "elemento 1 di 3", e senza il foglio di stile si legge lo stesso. */
.ceb-article__body .ceb-passi {
    counter-reset: passo;
    display: grid;
    gap: 1rem;
    margin: 1.5rem 0 2rem;
    padding: 0;
    list-style: none;
}

.ceb-passi__voce {
    position: relative;
    padding: 0 0 0 3.4rem;
    min-height: 2.4rem;
}

.ceb-passi__voce::before {
    counter-increment: passo;
    content: counter(passo);
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    display: grid;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    background: var(--ceb-navy);
    color: var(--ceb-white);
    font-family: var(--ceb-font-body);
    font-size: 1rem;
    font-weight: 700;
}

.ceb-article__body .ceb-passi__titolo {
    margin: .25rem 0 .2rem;
    color: var(--ceb-navy);
    font-size: 1.02rem;
    font-weight: 700;
}

.ceb-article__body .ceb-passi__testo {
    margin: 0;
    color: var(--ceb-muted);
    font-size: .97rem;
}

/* --- rimando a un'altra pagina ----------------------------------------------
   Un richiamo dentro il testo: dice in due righe cosa si trova di là e ci
   porta. Tutto il blocco è un collegamento, come il riquadro della colonna
   destra, così è difficile mancarlo. */
.ceb-article__body .ceb-rimando {
    display: block;
    margin: 2rem 0;
    padding: 1.25rem 1.4rem;
    background: var(--ceb-paper);
    border: 1px solid var(--ceb-line);
    border-inline-start: 4px solid var(--ceb-navy);
    border-radius: 0 var(--ceb-radius) var(--ceb-radius) 0;
    color: inherit;
    text-decoration: none;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.ceb-rimando:hover,
.ceb-rimando:focus-visible {
    background: var(--ceb-white);
    border-color: var(--ceb-line-strong);
    border-inline-start-color: var(--ceb-gold);
    box-shadow: var(--ceb-shadow-sm);
}

.ceb-rimando:focus-visible {
    outline: 2px solid var(--ceb-focus);
    outline-offset: 2px;
}

.ceb-rimando__label {
    display: block;
    margin-bottom: .3rem;
    color: var(--ceb-gold);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.ceb-rimando__titolo {
    display: block;
    margin-bottom: .5rem;
    color: var(--ceb-navy);
    font-family: var(--ceb-font-head);
    font-size: 1.18rem;
    line-height: 1.25;
}

.ceb-rimando__righe {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem 1.4rem;
    margin-bottom: .6rem;
    color: var(--ceb-ink);
    font-size: .95rem;
}

.ceb-rimando__riga {
    display: inline-flex;
    gap: .5rem;
    align-items: baseline;
}

.ceb-rimando__ora {
    font-weight: 700;
    color: var(--ceb-navy);
    font-variant-numeric: tabular-nums;
}

.ceb-rimando__azione {
    display: inline-block;
    color: var(--ceb-navy);
    font-size: .9rem;
    font-weight: 600;
}

.ceb-rimando__azione::after {
    content: " \203A";
    display: inline-block;
    margin-left: .25rem;
    transition: transform .18s ease;
}

.ceb-rimando:hover .ceb-rimando__azione::after { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
    .ceb-rimando,
    .ceb-rimando__azione::after { transition: none; }
}

/* La riga "seguici" dentro una pagina: l'etichetta e i pulsanti su una riga
   sola, che va a capo da sola sugli schermi stretti. */
.ceb-article__body .ceb-seguici {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem;
    margin: 2rem 0 0;
}

.ceb-seguici__etichetta {
    margin-inline-end: .2rem;
    color: var(--ceb-muted);
    font-size: .95rem;
}

/* ------------------------------------------------------------------ */
/* Elenchi di cariche: presidenti, rabbini, segretari.                 */
/* La pagina esiste per i nomi, non per le date: il nome sta grande e  */
/* in evidenza, gli anni gli stanno accanto piccoli, come una nota a   */
/* margine. Prima erano scritti nello stesso corpo e la pagina si      */
/* leggeva come un tabulato.                                          */
/* ------------------------------------------------------------------ */

.ceb-cariche__foto {
    margin: 0 0 2rem;
}

.ceb-cariche__foto img {
    width: 100%;
    height: auto;
    max-height: 320px;
    object-fit: cover;
    border-radius: 8px;
    display: block;
}

.ceb-cariche__gruppo {
    margin: 0 0 2.6rem;
}

.ceb-cariche__titolo {
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ceb-gold);
    font-family: var(--ceb-font-body);
    margin: 0 0 1rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--ceb-line);
}

.ceb-cariche__elenco {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ceb-cariche__voce {
    padding: .75rem 0 .75rem 1.15rem;
    border-left: 2px solid var(--ceb-line);
    position: relative;
}

.ceb-cariche__voce::before {
    content: "";
    position: absolute;
    left: -5px;
    top: 1.35rem;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ceb-gold);
}

.ceb-cariche__voce:hover { border-left-color: var(--ceb-gold); }

.ceb-cariche__nome {
    display: block;
    font-family: var(--ceb-font-title, inherit);
    font-size: 1.22rem;
    line-height: 1.25;
    font-weight: 600;
    color: var(--ceb-navy);
}

.ceb-cariche__mandato {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .2rem .7rem;
    margin-top: .2rem;
}

.ceb-cariche__anni {
    font-size: .88rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: .03em;
    color: var(--ceb-gold-bright, var(--ceb-gold));
    white-space: nowrap;
}

.ceb-cariche__nota {
    font-size: .88rem;
    color: var(--ceb-muted, #5b6570);
}

/* Da due mandati in su gli anni vanno a capo uno sotto l'altro: in fila
   si confondevano con un unico intervallo lunghissimo. */
.ceb-cariche__mandato + .ceb-cariche__mandato { margin-top: .1rem; }

/* Una colonna sola, sempre: su due colonne l'occhio deve decidere se
   proseguire a destra o scendere, e una successione di presidenti si legge
   dall'alto in basso e basta. */

/* ------------------------------------------------------------------ */
/* Programma di una giornata di eventi.                                */
/* L'ora sta in una colonna sua, allineata: chi legge cerca "a che ora */
/* e dove", e con l'ora annegata nel testo deve rileggere ogni riga.   */
/* ------------------------------------------------------------------ */

.ceb-gece__tema {
    font-size: 1.05rem;
    line-height: 1.6;
    overflow: hidden;
}

.ceb-gece__marchio {
    float: left;
    margin: .1rem 1rem .4rem 0;
    height: auto;
}

/* Il pulsante per scaricare l'allegato. */
.ceb-scarica {
    margin: 1.4rem 0 2.2rem;
}

.ceb-scarica__link {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .7rem 1.4rem;
    border-radius: 6px;
    background: var(--ceb-navy);
    color: #fff !important;
    font-weight: 600;
    text-decoration: none;
    font-size: .98rem;
}

.ceb-scarica__link::before {
    content: "\2193";
    font-size: 1.1em;
    line-height: 1;
}

.ceb-scarica__link:hover,
.ceb-scarica__link:focus-visible {
    background: var(--ceb-gold);
    color: #fff !important;
}

.ceb-gece__giorno { margin: 0 0 2.4rem; }

.ceb-gece__data {
    font-size: 1.35rem;
    color: var(--ceb-navy);
    margin: 0 0 1.2rem;
    padding-bottom: .45rem;
    border-bottom: 2px solid var(--ceb-gold);
}

.ceb-gece__luogo { margin: 0 0 1.8rem; }

.ceb-gece__sede {
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--ceb-gold);
    font-family: var(--ceb-font-body);
    margin: 0;
}

.ceb-gece__indirizzo {
    margin: .1rem 0 0;
    font-size: .9rem;
    font-style: italic;
    color: var(--ceb-muted, #5b6570);
}

.ceb-gece__rassegna {
    margin: .5rem 0 0;
    font-size: 1.02rem;
    font-weight: 600;
    color: var(--ceb-navy);
}

.ceb-gece__voci {
    list-style: none;
    margin: .7rem 0 0;
    padding: 0;
}

.ceb-gece__voce {
    display: grid;
    grid-template-columns: 6.5rem 1fr;
    gap: .2rem .9rem;
    padding: .7rem 0;
    border-top: 1px solid var(--ceb-line);
}

.ceb-gece__ora {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--ceb-gold-bright, var(--ceb-gold));
    font-size: .95rem;
    padding-top: .1rem;
}

.ceb-gece__titolo {
    display: block;
    font-size: 1.06rem;
    font-weight: 600;
    color: var(--ceb-navy);
    line-height: 1.3;
}

.ceb-gece__dettagli {
    display: block;
    margin-top: .2rem;
    line-height: 1.5;
}

.ceb-gece__prenota {
    display: block;
    margin-top: .35rem;
    font-size: .9rem;
    color: var(--ceb-muted, #5b6570);
}

.ceb-gece__info {
    margin: 2.4rem 0 0;
    padding: 1.2rem 1.4rem;
    border: 1px solid var(--ceb-line);
    border-left: 4px solid var(--ceb-gold);
    border-radius: 0 6px 6px 0;
    background: var(--ceb-paper);
}

.ceb-gece__info p { margin: 0 0 .5rem; }
.ceb-gece__info p:last-child { margin-bottom: 0; }

.ceb-gece__info-titolo {
    font-weight: 700;
    color: var(--ceb-navy);
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: .84rem;
}

/* Sul telefono l'ora va sopra: due colonne strette spezzerebbero i titoli. */
@media (max-width: 560px) {
    .ceb-gece__voce { grid-template-columns: 1fr; }
    .ceb-gece__marchio { float: none; display: block; margin: 0 0 .8rem; }
}

/* ------------------------------------------------------------------ */
/* "Vedi altro…": il collegamento che porta dalle quattro immagini in  */
/* homepage alla sezione intera. Volutamente discreto - non deve       */
/* competere con le immagini che ha sopra, deve solo dire che c'è del  */
/* seguito.                                                            */
/* ------------------------------------------------------------------ */

/* ------------------------------------------------------------------ */
/* Il pulsante "Vedi altro" in coda a una sezione della homepage.       */
/*                                                                      */
/* Le due righe che lo affiancano servono a chiudere la sezione: da     */
/* solo in mezzo al bianco il pulsante non diceva dove finisse una cosa */
/* e cominciasse l'altra. Al passaggio del mouse si riempie di blu      */
/* invece di cambiare soltanto colore al bordo, cosi' si capisce che e' */
/* un pulsante e non una scritta qualsiasi.                             */
/* ------------------------------------------------------------------ */

.ceb-altro__riga {
    display: flex;
    align-items: center;
    gap: clamp(.75rem, 3vw, 1.6rem);
    margin: 1.7rem 0 0;
}

.ceb-altro__riga::before,
.ceb-altro__riga::after {
    content: "";
    flex: 1 1 0;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--ceb-line-strong), transparent);
}

.ceb-altro {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: .5rem;
    padding: .62rem 1.6rem;
    border: 1px solid var(--ceb-line-strong);
    border-radius: 999px;
    background: var(--ceb-white);
    box-shadow: var(--ceb-shadow-sm);
    color: var(--ceb-navy);
    font-weight: 600;
    font-size: .95rem;
    text-decoration: none;
    transition: background-color .18s ease, border-color .18s ease,
                color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.ceb-altro::after {
    content: "\2192";
    transition: transform .18s ease;
}

.ceb-altro:hover,
.ceb-altro:focus-visible {
    background: var(--ceb-navy);
    border-color: var(--ceb-navy);
    color: var(--ceb-white);
    box-shadow: var(--ceb-shadow-md);
    transform: translateY(-1px);
}

.ceb-altro:hover::after,
.ceb-altro:focus-visible::after {
    transform: translateX(4px);
}

/* ------------------------------------------------------------------ */
/* Riquadro laterale delle funzioni di Shabbat.                         */
/*                                                                      */
/* Sta sopra quello del pranzo e risponde alla prima domanda di chi     */
/* arriva il venerdi': a che ora si prega. L'ora ha una colonna sua     */
/* perche' e' quello che l'occhio cerca per primo.                      */
/*                                                                      */
/* Il giorno sta in una pastiglia blu e l'ora in una dorata: le due     */
/* informazioni si distinguono a colpo d'occhio senza doverle leggere,  */
/* che e' il modo in cui un riquadro simile viene davvero guardato.     */
/* ------------------------------------------------------------------ */

.ceb-funzioni {
    background: var(--ceb-white);
    border: 1px solid var(--ceb-line);
    /* Lo stesso filo che portano le schede dei recapiti e quelle dei luoghi.
       Prima era una sfumatura disegnata solo per questo riquadro: bella, ma
       assomigliava soltanto a se stessa. */
    border-top: 3px solid var(--ceb-gold-bright);
    border-radius: var(--ceb-radius-lg);
    box-shadow: var(--ceb-shadow-sm);
    padding: 1.15rem 1.15rem 0;
    margin: 0 0 1rem;
    overflow: hidden;
}

.ceb-funzioni__label {
    margin: 0 0 .9rem;
    padding-bottom: .6rem;
    border-bottom: 1px solid var(--ceb-line);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--ceb-gold);
    font-family: var(--ceb-font-body);
}

.ceb-funzioni__label a {
    color: inherit;
    text-decoration: none;
}

.ceb-funzioni__label a:hover,
.ceb-funzioni__label a:focus-visible {
    text-decoration: underline;
}

.ceb-funzioni__elenco {
    margin: 0;
}

/* Venerdì e sabato sono due momenti diversi, non due voci di un elenco. */
.ceb-funzioni__giorno + .ceb-funzioni__giorno {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--ceb-line);
}

.ceb-funzioni__giorno dt {
    display: inline-block;
    margin-bottom: .5rem;
    padding: .14rem .65rem;
    border-radius: 999px;
    background: var(--ceb-navy);
    color: var(--ceb-white);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.ceb-funzioni__giorno dd {
    display: grid;
    /* Larga quanto serve all'orario più lungo delle due lingue: "8.00 pm" non
       sta in 3,4 rem, e in inglese le ore uscivano dalla colonna portandosi
       dietro i nomi delle funzioni a distanze diverse fra loro. */
    grid-template-columns: 4.7rem 1fr;
    align-items: baseline;
    gap: .8rem;
    margin: 0;
    font-size: .9rem;
    line-height: 1.45;
    color: var(--ceb-ink);
}

.ceb-funzioni__giorno dd + dd {
    margin-top: .35rem;
}

/* L'ora è il motivo per cui si guarda questo riquadro, quindi è la cosa più
   forte che c'è dentro. Non porta più una pastiglia: con quella del giorno
   erano due sistemi di evidenziazione nello stesso spazio, e nessuno dei due
   vinceva. Allineata a destra e con le cifre di larghezza fissa, i punti dei
   tre orari cadono in colonna. */
.ceb-funzioni__ora {
    text-align: end;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    font-size: 1rem;
    color: var(--ceb-navy);
    white-space: nowrap;
}

/* La riga del pranzo arriva fino ai bordi della scheda: e' il seguito
   della giornata, non l'ultima voce dell'elenco delle preghiere. */
.ceb-funzioni__seguito {
    margin: 1.15rem -1.15rem 0;
    padding: .75rem 1.15rem;
    border-top: 1px solid var(--ceb-line);
    background: var(--ceb-paper);
    font-size: .88rem;
}

/* Non "inline-flex": con quello, quando la frase va a capo - succede in
   inglese, dove è più lunga - la freccia si piazzava a metà altezza contro il
   bordo destro invece che in fondo alle parole. Così segue il testo come
   farebbe l'ultima parola della frase. */
.ceb-funzioni__seguito a {
    color: var(--ceb-navy);
    font-weight: 600;
    text-decoration: none;
}

.ceb-funzioni__seguito a::after {
    content: "\00a0\2192";
    display: inline-block;
    color: var(--ceb-gold);
    transition: transform .18s ease;
}

.ceb-funzioni__seguito a:hover,
.ceb-funzioni__seguito a:focus-visible {
    color: var(--ceb-gold);
}

.ceb-funzioni__seguito a:hover::after,
.ceb-funzioni__seguito a:focus-visible::after {
    transform: translateX(3px);
}

/* ------------------------------------------------------------------ */
/* Riquadro con fotografia e testo sopra: lo usano il calendario (la   */
/* ruota delle festivita' con l'anno) e le visite guidate (una foto    */
/* della sinagoga). Si chiama "fotocard" e non "calendario" perche'    */
/* quel nome e' gia' del calendario dentro la pagina, che e' altra cosa.*/
/*                                                                     */
/* Prima l'anno era stampato dentro il file JPG, e ogni Rosh ha-shana  */
/* qualcuno doveva rifare l'immagine. Ora il testo sta qui e l'anno lo */
/* calcola il plugin: la ruota resta pulita e non invecchia.           */
/* ------------------------------------------------------------------ */

.ceb-fotocard {
    position: relative;
    display: block;
    margin: 0 0 1.5rem;
    border-radius: var(--ceb-radius-lg);
    overflow: hidden;
    border: 1px solid var(--ceb-line);
    box-shadow: var(--ceb-shadow-sm);
    text-decoration: none;
    background: var(--ceb-navy-dark);
    /* gli stessi tempi del riquadro del capo mese, così i tre riquadri della
       colonna reagiscono allo stesso modo */
    transition: box-shadow .18s ease, transform .18s ease;
}

.ceb-fotocard__ruota {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    /* La ruota e' un disegno chiaro e molto dettagliato: leggermente
       schiarita regge meglio il testo che le finisce sopra. */
    filter: brightness(1.04) saturate(.95);
}

/* Il velo parte da meta' e si chiude in fondo: la parte alta della ruota
   resta visibile, il testo trova fondo scuro dove serve. */
.ceb-fotocard::after {
    content: "";
    position: absolute;
    inset: 34% 0 0;
    background: linear-gradient(to bottom,
        rgba(13, 39, 64, 0) 0%,
        rgba(13, 39, 64, .78) 42%,
        var(--ceb-navy-dark) 78%);
}

.ceb-fotocard__testo {
    position: absolute;
    z-index: 1;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0 1rem 1.05rem;
    text-align: center;
    color: var(--ceb-white);
}

.ceb-fotocard__titolo {
    display: block;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #f0cc72;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
}

.ceb-fotocard__anno {
    display: block;
    font-family: var(--ceb-font-title, inherit);
    font-size: 2.15rem;
    line-height: 1.05;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
    margin: .1rem 0 .2rem;
    text-shadow: 0 2px 6px rgba(0, 0, 0, .5);
}

.ceb-fotocard__sotto {
    display: block;
    font-size: .82rem;
    line-height: 1.35;
    color: rgba(255, 255, 255, .85);
    text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}

.ceb-fotocard:hover .ceb-fotocard__ruota,
.ceb-fotocard:focus-visible .ceb-fotocard__ruota {
    filter: brightness(1.1) saturate(1);
}

/* Lo stesso sollevarsi del riquadro del capo mese: nella colonna di destra i
   tre riquadri si susseguono uguali, e uno solo che reagisce al passaggio del
   mouse farebbe pensare che gli altri due non si possano cliccare. */
.ceb-fotocard:hover,
.ceb-fotocard:focus-visible {
    box-shadow: var(--ceb-shadow-md);
    transform: translateY(-2px);
}

.ceb-fotocard:focus-visible {
    outline: 3px solid var(--ceb-gold);
    outline-offset: 2px;
}

/* Quando sotto il titolo non c'e' nessun anno - il riquadro delle visite -
   il titolo puo' respirare: resta comunque su una riga o due, ma leggibile
   da lontano invece che ridotto a un'etichetta. */
.ceb-fotocard--solotitolo .ceb-fotocard__titolo {
    font-size: 1.12rem;
    letter-spacing: .04em;
    line-height: 1.25;
    text-transform: none;
    color: var(--ceb-white);
}

.ceb-fotocard--solotitolo .ceb-fotocard__testo {
    padding-bottom: 1.15rem;
}

/* La foto della sinagoga e' larga, non quadrata come la ruota: si lascia
   la sua forma invece di ritagliarla a forza. */
.ceb-fotocard--solotitolo .ceb-fotocard__foto {
    aspect-ratio: 3 / 2;
}

/* Collegamento al modulo nell'altra lingua, dentro l'avviso della sorveglianza.
   Serve perche' il selettore di lingua in testata, da questa pagina, riporta
   alla home: il contatto ha lingua "Tutte" e Joomla non trova associazioni. */
.ceb-modulo__altralingua {
    /* Il filo va staccato dal pulsante, non appoggiato: e' un cambio di
       argomento, non la continuazione del comando qui sopra. */
    margin: 1.5rem 0 0;
    padding-top: .85rem;
    border-top: 1px solid var(--ceb-line);
    font-size: .8rem;
    font-style: italic;
}

.ceb-modulo__altralingua a {
    color: var(--ceb-muted);
    text-decoration: none;
    border-bottom: 1px solid rgba(0, 0, 0, .18);
}

.ceb-modulo__altralingua a:hover,
.ceb-modulo__altralingua a:focus-visible {
    color: var(--ceb-navy);
    border-bottom-color: currentColor;
}

/* I messaggi di esito (verde, rosso) stavano incollati al titolo della pagina. */
#system-message-container { margin-bottom: 1.6rem; }

/* --------------------------------------------------------------------------
   Elenco degli allegati nel modulo della sorveglianza
   -------------------------------------------------------------------------- */

.ceb-allegati__elenco {
    list-style: none;
    margin: .7rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.ceb-allegati__voce {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .45rem .6rem;
    background: var(--ceb-paper);
    border: 1px solid var(--ceb-line);
    border-radius: var(--ceb-radius);
    font-size: .88rem;
}

/* Il nome puo' essere lunghissimo: si accorcia con i puntini invece di
   spingere fuori il peso e la crocetta. */
.ceb-allegati__nome {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ceb-allegati__peso {
    flex: 0 0 auto;
    color: var(--ceb-muted);
    font-size: .82rem;
    font-variant-numeric: tabular-nums;
}

.ceb-allegati__togli {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--ceb-muted);
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.ceb-allegati__togli:hover,
.ceb-allegati__togli:focus-visible {
    background: var(--ceb-navy);
    color: var(--ceb-white);
}

.ceb-allegati__totale {
    color: var(--ceb-muted);
    font-size: .8rem;
    font-style: italic;
    padding-inline-start: .6rem;
}

.ceb-allegati__errore {
    margin: .5rem 0 0;
    color: #97301f;
    font-size: .86rem;
}