/* =========================================
   NOTIZIE (/blog)
   Caricato solo da questa pagina (@push('styles') + <x-website.page-css>), dopo custom.css.
   Le card sono le stesse della sezione "Notizie" della home (classi .home-news-*,
   regole di base copiate da page-home.css: se cambi lo stile lì, allinealo qui).
   A differenza della home non c'è una notizia in evidenza: tutte le card hanno
   la stessa dimensione, affiancate in griglia (3 / 2 / 1 colonne).
   ========================================= */

/* Un'unica sfumatura (.cisl-gradient-bg di .news-stage) dietro fascia del titolo ed elenco:
   la fascia comune diventa trasparente e perde la sua sfumatura */
.news-stage > .page-hero,
.news-stage > .news-page {
    position: relative;
    z-index: 1;
}
.news-stage .page-hero {
    background: transparent;
}
.news-stage .page-hero .cisl-gradient-bg {
    display: none;
}

.news-page {
    padding: 16px 0 88px;
}

/* ---------- Barra: ricerca a sinistra, categorie a destra ---------- */

.news-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px 32px;
    margin-bottom: 40px;
}
.news-toolbar .news-tabs {
    justify-content: flex-end;
}

.news-search {
    --news-search-closed: 44px;
    position: relative;
    display: flex;
    align-items: center;
    flex: none;
    width: 340px;
    max-width: 100%;
    height: 44px;
    transition: width .4s cubic-bezier(.22, 1, .36, 1);
}
.news-search.is-instant,
.news-search.is-instant *,
.news-search.is-instant::after {
    transition: none !important;
}
/* chiusa (solo con JavaScript): resta la lente con la sua piccola sottolineatura */
.news-search.is-collapsible:not(.is-open) {
    width: var(--news-search-closed);
}

/* sottolineatura: corta sotto la lente, si allunga sotto tutto il campo quando si apre */
.news-search::after {
    content: "";
    position: absolute;
    left: 10px;
    bottom: 4px;
    width: calc(100% - 20px); /* 10px di rientro sia a sinistra sia a destra */
    height: 2px;
    border-radius: 2px;
    background: var(--cisl-green);
    opacity: .45;
    transition: width .4s cubic-bezier(.22, 1, .36, 1), opacity .2s ease, height .2s ease;
}
.news-search.is-collapsible:not(.is-open)::after {
    width: 24px;
    opacity: .7;
}
.news-search:focus-within::after {
    height: 2.5px;
    opacity: 1;
}

.news-search__toggle {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--cisl-green);
}
.news-search__lens {
    display: block;
    width: 24px;
    height: 24px;
    transform-origin: 45% 45%;
}
/* al passaggio del mouse la lente "cerca": un piccolo dondolio */
.news-search__toggle:hover .news-search__lens {
    animation: news-lens-wiggle .7s cubic-bezier(.36, .07, .19, .97);
    color: var(--cisl-green-dark);
}
@keyframes news-lens-wiggle {
    0%   { transform: rotate(0) scale(1); }
    25%  { transform: rotate(-14deg) scale(1.12); }
    50%  { transform: rotate(10deg) scale(1.12); }
    75%  { transform: rotate(-5deg) scale(1.06); }
    100% { transform: rotate(0) scale(1); }
}
.news-search__toggle:focus-visible {
    outline: 3px solid var(--cisl-green);
    outline-offset: 2px;
    border-radius: 8px;
}

.news-search__input {
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0 8px 0 46px;
    border: 0;
    background: transparent;
    color: #1d2026;
    font-size: 16px;
    outline: none;
    transition: opacity .2s ease .15s;
}
.news-search__input::placeholder {
    color: var(--gray-600, #5d5d5d);
}
.news-search.is-collapsible:not(.is-open) .news-search__input {
    opacity: 0;
    pointer-events: none;
    transition-delay: 0s;
}

@media (max-width: 991.98px) {
    /* una sotto l'altra: ricerca a tutta larghezza, categorie sotto */
    .news-toolbar {
        flex-direction: column;
        align-items: stretch;
        margin-bottom: 28px;
    }
    .news-search {
        width: 100%;
        align-self: center;
    }
    .news-toolbar .news-tabs {
        justify-content: center;
    }
}

/* ---------- Filtri per categoria: indicatore che scivola ---------- */

/* l'indicatore verde sta dietro ai link; quando lo script lo ha posizionato (.is-ready)
   la pill attiva perde il suo fondo e resta solo l'indicatore a fare da evidenza */
/* livelli: fondo bianco delle tab (::before) < indicatore verde < testo (.news-tab-label),
   così l'indicatore scivola sopra le tab bianche e sotto le scritte */
.news-tabs {
    position: relative;
    isolation: isolate;
}
.news-tabs > a {
    position: relative;
}
.news-tab-label {
    position: relative;
    z-index: 2;
    color: var(--cisl-green-dark); /* non selezionate: testo verde su fondo bianco */
    transition: color .2s ease;
}
/* selezionata (o sotto il mouse, col fondo verde del tema): testo bianco */
.news-tabs > a.btn-primary .news-tab-label,
.news-tabs > a.btn-outline-primary:hover .news-tab-label {
    color: #fff;
}
/* il tema da' alle pill un bagliore verde forte al passaggio del mouse: qui appena accennato */
.news-tabs > a.btn,
.news-tabs > a.btn:hover,
.news-tabs > a.btn:active {
    box-shadow: none;
}
/* tab non selezionate su fondo bianco (il tema le lascia trasparenti sulla sfumatura);
   al passaggio del mouse resta il verde del tema */
.news-tabs > a.btn-outline-primary:not(:hover)::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    background: #fff;
}
.news-tabs > a.btn-outline-primary:hover {
    box-shadow: 0 1px 4px rgba(10, 116, 79, 0.18);
}
.news-tabs-indicator {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    border-radius: 999px;
    background: var(--cisl-green);
    opacity: 0;
    pointer-events: none;
}
.news-tabs.is-ready .news-tabs-indicator {
    opacity: 1;
}
.news-tabs.is-animated .news-tabs-indicator {
    transition: transform .45s cubic-bezier(.22, 1, .36, 1), width .45s cubic-bezier(.22, 1, .36, 1);
}
.news-tabs.is-ready > a.btn-primary {
    background-color: transparent;
    border-color: transparent;
    color: #fff;
    transition: color .45s ease;
}

/* elenco in sostituzione: si attenua mentre arriva la categoria nuova, poi torna pieno */
.news-results {
    transition: opacity .2s ease;
}
.news-results.is-loading {
    opacity: .35;
}

/* ---------- Griglia: tutte le card uguali ---------- */

.news-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: 1fr; /* tutte le righe alte come la più alta: card identiche anche nell'ultima riga */
    gap: 24px;
}
@media (max-width: 991.98px) {
    .news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
}
@media (max-width: 575.98px) {
    .news-grid { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; gap: 16px; }
}

.news-empty {
    margin: 0;
    padding: 48px 0;
    text-align: center;
    color: var(--gray-600, #5d5d5d);
}

/* ---------- Card (come in home) ---------- */

.home-news-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06), 0 8px 20px rgba(0, 0, 0, 0.06);
    transition: box-shadow .2s ease;
}
/* Niente sollevamento all'hover: la card spostandosi usciva da sotto il cursore e tremolava */
.home-news-card:hover {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08), 0 14px 28px rgba(0, 0, 0, 0.12);
}
/* Focus da tastiera visibile su tutta la card, non solo sul titolo */
.home-news-card:focus-within {
    outline: 3px solid var(--cisl-green);
    outline-offset: 3px;
}
.home-news-card a:focus-visible { outline: none; }

/* Foto sempre 16:9 e ritagliata: card della stessa altezza anche con immagini di formati diversi */
.home-news-media {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #E5F1EC;
}
.home-news-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
    will-change: transform;
    backface-visibility: hidden;
}
.home-news-card:hover .home-news-media img { transform: scale(1.04); }

/* Etichette sulla foto: categoria in verde a sinistra, data a destra in un rosso più spento */
.home-news-category,
.home-news-date {
    position: absolute;
    top: 10px;
    padding: 2px 10px;
    border-radius: 999px;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}
.home-news-category { left: 10px; background: var(--cisl-green); }
.home-news-date { right: 10px; background: #9E3B44; }

/* Titolo e estratto con un numero fisso di righe: il "Leggi tutto" resta allineato in fondo */
.home-news-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    padding: 18px 20px 20px;
}
.home-news-title {
    font-size: 18px;
    line-height: 1.3;
    margin-bottom: 8px;
    text-wrap: balance;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.home-news-title a { color: #1d2026; }
.home-news-card:hover .home-news-title a { color: var(--cisl-green-dark); }
.home-news-excerpt {
    color: #5a616b;
    font-size: 15px;
    line-height: 1.5;
    margin-bottom: 12px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.home-news-more {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--cisl-red);
    font-size: 14px;
    font-weight: 600;
}
.home-news-more i { transition: transform .2s ease; }
.home-news-card:hover .home-news-more i { transform: translateX(4px); }

@media (max-width: 767.98px) {
    /* da telefono barra e card più vicine al titolo */
    .news-page { padding: 0 0 64px; }
}

@media (prefers-reduced-motion: reduce) {
    .news-tabs.is-animated .news-tabs-indicator,
    .news-results,
    .news-search,
    .news-search::after,
    .news-search__input,
    .home-news-card,
    .home-news-media img,
    .home-news-more i { transition: none; }
    .news-search__toggle:hover .news-search__lens { animation: none; }
    .home-news-card:hover .home-news-media img,
    .home-news-card:hover .home-news-more i { transform: none; }
}