/* --- Badge di stato sotto il titolo --- */
.scheda_museo_badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.scheda_museo_badges .badge-am {
    display: inline-block;
    padding: 4px 14px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: #000;
}
.scheda_museo_badges .badge-am-regionale {
    background-color: #9cd9c9;
    cursor: pointer;
}
.scheda_museo_badges .badge-am-family {
    background-color: #ffa38a;
}
/* --- Icona info accanto al titolo "Gallery" (link al disclaimer immagini, URL
   configurabile da Personalizza > Altre opzioni) --- */
.amfk-gallery__disclaimer-icon {
    color: #9cd9c9;
    font-size: 0.85rem;
}
.amfk-gallery__disclaimer-icon:hover,
.amfk-gallery__disclaimer-icon:visited,
.amfk-gallery__disclaimer-icon:active {
    color: #9cd9c9;
}
/* --- Sezione Selezione Family & Kids --- */
.amfk-selezione__titolo {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
}
/* .scheda_row: griglia a 3 colonne + spaziatura condivisa da Selezione Family & Kids e
   Approfondisci - stesso ritmo verticale in entrambe le sezioni. Grid fissa (non flex):
   se una colonna manca (es. nessuna news) deve restare vuota, non far riespandere le altre */
.scheda_row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin: 32px 0;
}
@media (max-width: 767.98px) {
    .scheda_row {
        grid-template-columns: 1fr;
    }
}
/* stessa spaziatura verticale di .scheda_row, per sezioni che non sono una griglia a 3
   colonne (Gallery, Contatti e informazioni) ma devono seguire lo stesso ritmo */
/* margin-top/bottom soltanto: "margin: 32px 0" azzererebbe anche left/right, sovrascrivendo
   il margin:auto di Bootstrap .container e disallineando la sezione dal resto della pagina */
.scheda_section {
    margin-top: 32px;
    margin-bottom: 32px;
}
/* colonna in flex-column cosi' un contenuto puo' dichiararsi flex:1 e riempire l'altezza
   di riga decisa dalla colonna piu' alta (il grid stira gia' .amfk-selezione__col stesso
   ad altezza uniforme per default - qui e' il CONTENUTO interno che deve seguirla) */
.amfk-selezione__col {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
/* titoletto condiviso da tutte le colonne della scheda museo (Selezione Family & Kids,
   Approfondisci): "La prossima attività", "News", "Materiali e media", "Scopri di più",
   "Questo museo fa parte di" - stesso stile ovunque, come "Scopri di più" */
.scheda_subtitle {
    font-weight: 600;
    font-size: 16px;
    margin-top: 0;
    margin-bottom: 12px;
    color: var(--primary);
}
/* Caroselli scroll-snap orizzontali a 1 elemento visibile, senza frecce (La prossima
   attivita' e News in Selezione Family & Kids, entrambi possono avere piu' elementi).
   Scroll nativo del browser: nessun listener di resize, stesso pattern gia' usato altrove
   sul sito. flex:1 sul carosello fa si' che riempia tutta l'altezza della colonna (decisa
   dalla colonna piu' alta, il grid stira gia' .amfk-selezione__col stesso), cosi' News ed
   Eventi risultano alti uguali; ogni .scroll-item eredita quell'altezza per default
   (align-items:stretch, il flex-row del carosello non lo sovrascrive). */
.amfk-selezione__scroll {
    flex: 1;
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.amfk-selezione__scroll::-webkit-scrollbar {
    display: none;
}
.amfk-selezione__scroll-item {
    flex: 0 0 100%;
    scroll-snap-align: start;
    min-width: 0;
}
/* .amfk-card ha "height:100%" pensato per un contesto senza fratelli (lo slide Splide di
   Family & Kids) - qui basta perche' .scroll-item e' l'unico figlio diretto della card */
.amfk-selezione__scroll-item .amfk-card {
    height: 100%;
}
/* printNotiziaAmfk() avvolge .amfk-news-card in .amfk-news__item (wrapper dello scroll-snap
   di Family & Kids): va reso alto quanto .scroll-item prima di poter stirare la card dentro */
.amfk-selezione__scroll-item .amfk-news__item {
    height: 100%;
}
.amfk-selezione__scroll-item .amfk-news-card {
    height: 100%;
    display: flex;
    flex-direction: column;
}
/* l'aspect-ratio fisso (16/10) impedirebbe all'immagine di crescere insieme alla card;
   flex:1 la fa espandere nello spazio rimasto sotto il testo, object-fit:cover (gia'
   presente sull'img) evita distorsioni tagliando l'immagine invece di stirarla */
.amfk-selezione__scroll-item .amfk-news-card__image {
    flex: 1;
    aspect-ratio: auto;
}
.amfk-selezione__scroll-item .amfk-news-card__body {
    flex: none;
}
/* Banner arancione della sezione Selezione Family & Kids: logo animato a sx, spazio per
   un'immagine a dx (asset non ancora consegnato da Marco - il div resta vuoto/nascosto
   finche' non arriva un <img> dentro via PHP, vedi :not(:empty) sotto).
   Nome scoped ".amfk-selezione__banner*" per non collidere con ".amfk-banner" gia' usato
   dallo shortcode "banner immagine+testo" (includes/shortcodes.php, assets/css/main.css) */
.amfk-selezione__banner {
    grid-column: 1 / -1;
    background-color: #ff8c6c;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 24px 32px;
    overflow: visible;
}
.amfk-selezione__banner-logo {
    height: 90px;
    width: auto;
}
.amfk-selezione__banner-image {
    display: none;
}
.amfk-selezione__banner-image:not(:empty) {
    display: block;
}
@media (max-width: 767.98px) {
    .amfk-selezione__banner {
        justify-content: center;
    }
    .amfk-selezione__banner-image:not(:empty) {
        display: none;
    }
}

/* --- Approfondisci (news/media generici + progetti) --- */
.approfondisci__col {
    min-width: 0;
}
/* riga "pillola" (icona/bollino + testo su sfondo grigio chiaro), condivisa da tutte
   le liste della sezione Approfondisci (progetti, poli museali, news, media) */
.approfondisci-item-list {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.approfondisci-item-list:last-child {
    margin-bottom: 0;
}
.approfondisci-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background-color: #e9e9e9;
    border-radius: 8px;
    padding: 10px 16px;
    color: #000;
    text-decoration: none;
}
.approfondisci-item:hover,
.approfondisci-item:active,
.approfondisci-item:visited {
    color: #000;
    text-decoration: none;
}
.approfondisci-item span {
    font-size: 0.875rem;
}
@media (max-width: 767.98px) {
    .approfondisci-item span {
        font-size: 1rem;
    }
}
.approfondisci-item__icon {
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.approfondisci-item__icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.approfondisci-item__icon--photo img {
    /* immagine in evidenza della notizia: a differenza dei loghi/bollini (contain), va
       riempita e ritagliata nel cerchio senza margini bianchi */
    object-fit: cover;
}
.approfondisci-item__icon--media {
    background-color: var(--primary_hover);
    border-radius: 6px;
}
.approfondisci-item__icon--media img {
    width: 60%;
    height: 60%;
    /* icone sorgente in nero pieno su sfondo trasparente: filter le rende bianche sul badge verde */
    filter: brightness(0) invert(1);
}
/* --- Accordion nativo Contatti e Informazioni --- */
.scheda_museo_accordion {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 32px;
}
.scheda_museo_accordion__item {
    background-color: #9cd9c9;
    border-radius: 6px;
    overflow: hidden;
}
.scheda_museo_accordion__trigger {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 16px 24px;
    font-weight: 700;
    color: #000;
    background: none;
    border: 0;
    text-align: left;
    cursor: pointer;
}
.scheda_museo_accordion__trigger:focus {
    /* l'outline di default del browser, non essendo arrotondato come .scheda_museo_accordion__item
       (che ha overflow:hidden), viene tagliato su 3 lati e resta visibile solo come riga in basso */
    outline: none;
}
.scheda_museo_accordion__trigger:focus-visible {
    outline: 2px solid var(--secondary);
    outline-offset: -2px;
}
.scheda_museo_accordion__trigger::after {
    /* icona meno, stato "aperto" (default, prima che Bootstrap aggiunga .collapsed) */
    content: "\f068";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: var(--secondary);
    color: #fff;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.scheda_museo_accordion__trigger.collapsed::after {
    /* stato "chiuso": Bootstrap aggiunge/rimuove .collapsed sul trigger in base allo stato del target */
    content: "\f067";
}
.scheda_museo_accordion .scheda_museo_accordion__body {
    padding: 0 24px 20px;
}
.scheda_museo_accordion .dettaglio {
    font-weight: 500;
    font-size: 1rem;
}