/*
Theme Name:   arte-child
Template:     generatepress
Description:  Tema figlio di GeneratePress per Quaderni.org/arte
Version:      1.8
*/

/* ============================================================
   VARIABILI GLOBALI
   Sovrascrivono le impostazioni predefinite di GeneratePress
   ============================================================ */

:root {
    /* ── TIPOGRAFIA ── */
    --font-body-family: Arial, sans-serif;
    --font-body-size: 16px;
    --font-body-line-height: 1.5;
    --font-body-weight: 400;

    --font-heading-family: Georgia, sans-serif;
    --font-heading-weight: 700;
    --font-heading-line-height: 1.3;

    /* ── LAYOUT ── */
    --content-width: 1200px;
    --container-width: 780px;

    /* ── SPAZIATURA ── */
    --spacing-content-vertical: 20px;
    --spacing-content-horizontal: 40px;
    --spacing-widget: 20px;
}

/* ============================================================
   TIPOGRAFIA GLOBALE
   ============================================================ */

body {
    font-family: Arial, sans-serif;
    font-size: clamp(17px, 1.1vw, 19px);
    line-height: 1.4;
    color: #333333;
    background-color: #cdcdcd;
}

h1, h2, h3, h4, h5, h6 {
    font-family: Georgia, sans-serif;
    font-weight: 700;
    line-height: 1.3;
    color: #8BC34A;
}

h1 { font-size: 2rem; }
h2 { font-size: 1.6rem; }
h3 { font-size: 1.2rem; }
h4 { font-size: 1rem; }

p {
    margin-bottom: 0.8rem;
}

a {
    color: #336699;
    text-decoration: none;
}

a:hover {
    color: #cc0000;
    text-decoration: none;
}

/* Corregge overflow orizzontale generato da screen-reader-text */
.screen-reader-text {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(1px, 1px, 1px, 1px) !important;
    white-space: nowrap !important;
    left: 0 !important;
}

footer.entry-meta {
    margin-top: 0;
}

hr {
    background-color: rgba(0,0,0,.1);
    border: 0;
    height: 1px;
    margin-top: 10px;
    margin-bottom: 10px;
}

blockquote {
    padding: 0px;
    font-size: 1.2em;
    font-style: italic;
    margin: 0em;
    position: relative;
}

/* ============================================================
   HEADER — desktop
   Layout: titolo in alto a sinistra, menu in basso a sinistra,
   box didascalia in posizione assoluta a destra sull'immagine
   ============================================================ */

.site-header {
    background-color: #336699;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    min-height: 288px;
    border-bottom: 2px solid #336699;
    padding: 0;
    position: relative;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
}

.inside-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 50px 10px 10px 40px;
    min-height: 288px;
    box-sizing: border-box;
    gap: 0;
}

.site-title {
    font-size: 45px;
    line-height: 1.2;
    margin: 0;
    padding: 0;
}

.site-title a {
    color: #ffffff;
    text-decoration: none;
    text-shadow: 1px 1px 4px rgba(0,0,0,0.7);
}

.site-title a:hover {
    color: #cc0000;
}

.site-description {
    display: none;
}

.header-didascalia {
    position: absolute;
    top: 20px;
    right: 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    color: #ffffff;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.7);
    background-color: rgba(0,0,0,0.30);
    border-radius: 4px 0 0 4px;
    padding: 8px 14px;
    max-width: 220px;
    box-sizing: border-box;
    z-index: 10;
}

.header-didascalia-titolo {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    text-align: right;
    margin-bottom: 4px;
}

.header-didascalia-testo {
    display: block;
    font-size: 0.85rem;
    font-style: italic;
    text-align: right;
}

.main-navigation {
    background: transparent;
    margin-top: auto;
    align-self: flex-start;
}

.main-navigation a,
.main-navigation .main-nav ul li a {
    color: #ffffff !important;
    font-size: 15px;
    text-decoration: none;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.6);
    background: transparent !important;
    font-weight: 700;
}

.main-navigation a:hover,
.main-navigation .current-menu-item > a {
    color: #cc0000 !important;
    background: transparent !important;
}

.main-navigation .main-nav ul,
.main-navigation .main-nav ul li {
    background: transparent !important;
}

.main-navigation .main-nav ul li a {
    padding-left: 10px;
    padding-right: 10px;
    line-height: 30px;
    border: 1px solid #ffffff;
}

.menu-toggle {
    padding: 0 10px;
    line-height: 40px;
}

/* Lente cerca mobile — nascosta su desktop */
.mobile-search-toggle {
    display: none;
}

#mobile-search-panel {
    display: none;
}

/* Autore mobile — nascosto su desktop */
.header-autore-mobile {
    display: none;
}

/* ============================================================
   MOBILE (max-width: 767px) — unico breakpoint responsivo
   ============================================================ */

@media (max-width: 767px) {

    /* ── Header mobile ── */

    .site-header {
        background-image: none !important;
        background-color: #336699;
        min-height: unset;
        padding: 8px 0;
    }

    .inside-header {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 0 15px;
        min-height: unset;
        gap: 0;
    }

    .site-title {
        font-size: 25px;
    }

    .header-didascalia {
        display: none;
    }

    .main-navigation {
        margin-top: 0;
        align-self: center;
        position: static;
    }

    .menu-toggle {
        color: #ffffff !important;
        background: none !important;
        border: none !important;
        padding: 0 10px;
        line-height: 40px;
        cursor: pointer;
    }

    /* Autore visibile su mobile */
    .header-autore-mobile {
        display: block;
        color: #ffffff;
        font-size: 14px;
        font-style: italic;
        text-align: left;
        padding: 2px 15px 6px 15px;
        background-color: #336699;
    }

    /* Bottone lente cerca */
    .mobile-search-toggle {
        display: block;
        background: none !important;
        border: none;
        color: #ffffff;
        font-size: 18px;
        cursor: pointer;
        padding: 0 8px;
        line-height: 40px;
    }

    /* Pannello ricerca */
    #mobile-search-panel {
        display: none;
        background-color: #336699;
        padding: 8px 15px;
        width: 100%;
        box-sizing: border-box;
        align-items: center;
        gap: 8px;
    }

    #mobile-search-panel .wp-block-search,
    #mobile-search-panel form {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 6px;
        width: 100%;
    }

    #mobile-search-panel input[type="search"] {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        width: 100% !important;
        padding: 5px 8px !important;
        font-size: 14px;
        border: 1px solid #ffffff;
        border-radius: 3px;
        box-sizing: border-box !important;
    }

    #mobile-search-panel input[type="submit"],
    #mobile-search-panel button[type="submit"],
    #mobile-search-panel .search-submit {
        flex: 0 0 auto !important;
        padding: 5px 8px !important;
        background-color: #8BC34A !important;
        color: #ffffff !important;
        border: none !important;
        border-radius: 3px !important;
        cursor: pointer !important;
        font-size: 13px !important;
        white-space: nowrap !important;
    }

    /* ── Sidebar mobile ── */

    .both-sidebars .site-content {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        grid-template-areas:
            "content content"
            "sidebar rightsidebar" !important;
        gap: 0 10px;
    }

    .both-sidebars #primary {
        grid-area: content !important;
        width: auto !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .both-sidebars #left-sidebar {
        grid-area: sidebar !important;
        display: block !important;
        width: auto !important;
        box-sizing: border-box !important;
        min-width: 0;
    }

    .both-sidebars #right-sidebar,
    .both-sidebars .widget-area.is-right-sidebar {
        grid-area: rightsidebar !important;
        display: block !important;
        width: auto !important;
        box-sizing: border-box !important;
        justify-self: end;
        min-width: 0;
    }

    /* Larghezze sidebar su mobile */
    .both-sidebars .is-left-sidebar {
        width: 100% !important;
    }

    .both-sidebars .is-right-sidebar {
        width: 90% !important;
    }

    /* Font-size link elenchi nelle sidebar */
    .is-left-sidebar li,
    .is-right-sidebar li,
    .is-left-sidebar li a,
    .is-right-sidebar li a {
        font-size: 16px !important;
    }

    /* ── Immagini mobile ── */

    .entry-content .wp-block-image {
        display: block;
        clear: both;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }

    .entry-content .wp-block-image img {
        display: block;
        margin-left: auto;
        margin-right: auto;
        float: none !important;
        max-width: 100%;
        height: auto;
    }

    .entry-content .wp-block-image.alignleft,
    .entry-content .wp-block-image.alignright {
        float: none !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* ── Colonne Gutenberg mobile ── */

    .entry-content .wp-block-columns {
        flex-direction: column !important;
    }

    .entry-content .wp-block-column {
        width: 100% !important;
        flex-basis: 100% !important;
        text-align: center;
    }

    .entry-content .wp-block-column .lcp_thumbnail {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    .entry-content .wp-block-column .lcp_catlist {
        list-style: none;
        padding: 0;
        text-align: center;
    }

    /* ── Catlist mobile ── */

    .riga-cat {
        flex-direction: column;
    }

    /* ── Layout left-sidebar su mobile: contenuto full width, sidebar sotto ── */
    .left-sidebar .site-content,
    .left-sidebar.separate-containers .site-content {
        display: flex !important;
        flex-direction: column !important;
    }

    .left-sidebar .content-area {
        width: 100% !important;
        order: 1;
    }

    .left-sidebar .is-left-sidebar,
    .left-sidebar #left-sidebar {
        width: 100% !important;
        order: 2;
    }

    /* left-sidebar + separate-containers mobile: forza full width */
    .left-sidebar.separate-containers .content-area {
        width: 100% !important;
        box-sizing: border-box;
    }

    .left-sidebar.separate-containers .is-left-sidebar {
        width: 100% !important;
        float: none !important;
        box-sizing: border-box;
    }

}

/* ============================================================
   LAYOUT TRE COLONNE — 25% / 55% / 20%
   ============================================================ */

.both-sidebars .site-content,
.both-sidebars.separate-containers .site-content {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
}

.both-sidebars .content-area {
    width: 55% !important;
    flex: none;
    box-sizing: border-box;
}

.both-sidebars .is-right-sidebar {
    width: 20% !important;
}

.both-sidebars .is-left-sidebar {
    width: 25% !important;
}

/* ============================================================
   LAYOUT DUE COLONNE — sidebar sinistra 25% + contenuto 75%
   ============================================================ */

.left-sidebar .site-content,
.left-sidebar.separate-containers .site-content {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    box-sizing: border-box;
}

.left-sidebar .content-area {
    width: 75% !important;
    flex: none;
    box-sizing: border-box;
}

.left-sidebar .is-left-sidebar {
    width: 25% !important;
    flex: none;
    box-sizing: border-box;
}

@media (max-width: 480px) {
    .left-sidebar .site-content {
        display: flex !important;
        flex-direction: column !important;
    }

    .left-sidebar .content-area {
        width: 100% !important;
        order: 1;
    }

    .left-sidebar #left-sidebar {
        width: 100% !important;
        order: 2;
    }
}

/* ============================================================
   SIDEBAR
   ============================================================ */

.separate-containers .inside-left-sidebar {
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: 10px;
}

.separate-containers .inside-right-sidebar {
    margin-top: 20px;
    margin-bottom: 20px;
    margin-right: 10px;
}

.sidebar .widget {
    margin-bottom: 20px;
    padding: 5px 10px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    background-color: #f4f4f4;
}

.sidebar .widget-title,
.sidebar h2,
.sidebar h3 {
    font-size: 0.9rem;
    font-weight: 700;
    color: #8BC34A;
    border-bottom: 2px solid #336699;
    padding-bottom: 5px;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.sidebar .wp-block-categories__label {
    color: #8BC34A;
    text-transform: uppercase;
    font-size: 0.9rem;
    font-weight: 700;
    border-bottom: 2px solid #336699;
    padding-bottom: 5px;
    margin-bottom: 10px;
    letter-spacing: 0.05em;
    display: block;
}

.widget_lcp_widget .widget-title,
.lcp_widget_title {
    font-size: 0.9rem;
    font-weight: 700;
    color: #8BC34A;
    border-bottom: 2px solid #336699;
    padding-bottom: 5px;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.sidebar .widget a {
    color: #336699;
    text-decoration: none;
}

.sidebar .widget a:hover {
    text-decoration: none;
    color: #cc0000;
}

.sidebar .widget_nav_menu ul li,
.sidebar .widget ul li {
    list-style-type: none;
    border-bottom: 1px solid rgb(221, 221, 221);
    font-size: 15px;
    padding-left: 10px;
    padding-right: 10px;
    margin-bottom: 0;
}

/* Widget Ricerca */
.sidebar .wp-block-search__label {
    display: none;
}

.sidebar .wp-block-search__inside-wrapper {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap;
    width: 100%;
    max-width: 100%;
    gap: 6px;
}

.sidebar .wp-block-search__input {
    width: 100% !important;
    padding: 4px 6px;
    font-size: 16px;
    border: 1px solid #336699;
    border-radius: 3px;
    box-sizing: border-box;
}

.sidebar .wp-block-search__button {
    width: 100% !important;
    padding: 4px 6px;
    font-size: 13px;
    background-color: #336699;
    color: #ffffff;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    box-sizing: border-box;
}

.sidebar .wp-block-search__button:hover {
    background-color: #cc0000;
}

.wp-block-search__button {
    margin-left: 0px;
    word-break: normal;
}

/* Widget Categorie */
.sidebar .widget_categories ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar .widget_categories ul li {
    list-style-type: none;
    border-bottom: 1px solid rgb(221, 221, 221);
    font-size: 14px;
    padding-left: 10px;
    padding-right: 10px;
    margin-bottom: 0;
}

.sidebar .widget_categories ul li:last-child {
    border-bottom: none;
}

.sidebar .widget_categories select {
    width: 100%;
    font-size: 13px;
    padding: 2px 4px;
    box-sizing: border-box;
    border: 1px solid #336699;
    border-radius: 3px;
}

/* Widget Menu */
.sidebar .widget_nav_menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Widget List Category Posts */
.widget_lcp_widget ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.widget_lcp_widget ul li {
    padding: 0;
    border-bottom: none;
    font-size: 14px;
    margin: 0;
}

.widget_lcp_widget ul li:last-child {
    border-bottom: none;
}

.widget_lcp_widget ul li a {
    color: #336699;
    text-decoration: none;
}

.widget_lcp_widget ul li a:hover {
    text-decoration: none;
    color: #cc0000;
}

/* ============================================================
   AREA CONTENUTO E STRUTTURA POST SINGOLO
   ============================================================ */

.site-content {
    background-color: #ffffff;
}

.separate-containers .page-header {
    padding: 10px 10px 0px 40px;
}

.entry-header h1,
.page-header h1 {
    color: #8BC34A;
    font-size: 1.6em;
    padding: 10px 10px 10px 15px;
}

.featured-image.page-header-image-single {
    display: none;
}

.separate-containers .inside-article {
    padding: 0px 20px 0px 20px !important;
    background-color: #eeeeee;
    margin: 20px 10px;
}

.page .inside-article {
    padding: 5px 20px 5px 20px;
    background-color: #eeeeee;
    margin: 20px 10px;
    box-sizing: border-box;
}

.separate-containers .site-main {
    margin: 15px 0px 15px 0px;
}

.one-container .site-content {
    padding: 0px 40px;
}

.entry-content:not(:first-child),
.entry-summary:not(:first-child),
.page-content:not(:first-child) {
    margin-top: 0em;
}

.one-container.archive .post:not(:last-child):not(.is-loop-template-item),
.one-container.blog .post:not(:last-child):not(.is-loop-template-item) {
    padding-bottom: 0px;
    margin-bottom: 0px;
}

.entry-content p:empty {
    display: none;
}

.site-main .wp-block-group__inner-container {
    padding: 0px 20px !important;
}

/* Riga categoria + data sotto il titolo */
.post-meta-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
    margin: 10px 15px 10px 15px;
}

.post-category-label a {
    color: #336699;
    text-decoration: none;
    border: 1px solid #336699;
    padding: 2px 8px;
    border-radius: 3px;
}

.post-category-label a:hover {
    background-color: #cc0000;
    color: #ffffff;
}

.post-date-label {
    color: #777777;
    font-style: italic;
}

/* Barra info admin */
.admin-post-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fffbe6;
    border-left: 4px solid #336699;
    padding: 6px 12px;
    margin: 10px 15px 10px 15px;
    font-size: 0.85rem;
}

.admin-post-id {
    color: #555555;
    font-weight: 600;
}

.admin-fg-layout {
    color: #336699;
    font-weight: 600;
    font-style: italic;
}

.admin-edit-link {
    color: #336699;
    text-decoration: none;
    font-weight: 600;
}

.admin-edit-link:hover {
    text-decoration: underline;
}

/* Immagini nei post */
.post-image:not(:first-child) {
    margin-top: 1em;
}

/* ============================================================
   PAGINAZIONE POST (precedente / successivo)
   ============================================================ */

.post-navigation-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    padding: 8px 5px;
    border-top: 1px solid #336699;
    letter-spacing: 0.05em;
    font-size: 0.9rem;
    clear: both;
}

.nav-prev {
    color: #336699;
    text-decoration: none;
    max-width: 45%;
}

.nav-next {
    color: #336699;
    text-decoration: none;
    text-align: right;
    max-width: 45%;
}

.nav-prev:hover,
.nav-next:hover {
    text-decoration: none;
    color: #cc0000;
}

.nav-placeholder {
    width: 45%;
}

/* ============================================================
   HOME / ARCHIVIO — categoria a destra del titolo + paginazione
   ============================================================ */

.home .entry-header,
.archive .entry-header,
.search .entry-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
}

.home-post-category a {
    font-size: 0.8rem;
    color: #336699;
    border: 1px solid #336699;
    padding: 2px 8px;
    border-radius: 3px;
    text-decoration: none;
    white-space: nowrap;
}

.home-post-category a:hover {
    background-color: #cc0000;
    border-color: #cc0000;
    color: #ffffff;
}

.home-pagination {
    display: flex;
    justify-content: center;
    gap: 6px;
    padding: 20px 0;
    flex-wrap: wrap;
}

.home-pagination .page-numbers {
    display: inline-block;
    padding: 8px 5px;
    border: 1px solid #336699;
    border-radius: 3px;
    color: #336699;
    text-decoration: none;
    font-size: 1rem;
}

.home-pagination .page-numbers.current {
    background-color: #336699;
    color: #ffffff;
}

.home-pagination .page-numbers:hover {
    background-color: #cc0000;
    border-color: #cc0000;
    color: #ffffff;
}

/* ============================================================
   TITOLI POST E PAGINE
   ============================================================ */

.single .entry-title,
.page .entry-title {
    color: #336699;
    font-family: Georgia, sans-serif;
}

.home .entry-title a,
.blog .entry-title a,
.entry-title a {
    font-size: 1.2rem;
    color: #336699;
}

/* ============================================================
   PAGINE 404 E NO-RESULTS
   ============================================================ */

.errore-404-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 30px auto;
    width: fit-content;
    max-width: 100%;
}

.errore-404-img {
    display: block;
    max-width: 100%;
    height: auto;
}

.errore-404-testo {
    margin-top: 16px;
    font-size: 1rem;
    font-weight: 700;
    color: #336699;
    text-align: center;
    line-height: 1.6;
    width: 100%;
    box-sizing: border-box;
}

/* ============================================================
   BLOCCO LATEST POSTS — layout a griglia con box bordo
   ============================================================ */

.wp-block-latest-posts {
    list-style: none;
    padding: 0;
    margin: 0;
    /* Annulla alignwide che espande oltre il contenitore */
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Ogni li diventa un box con bordo e passepartout */
.wp-block-latest-posts li {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-bottom: 12px;
    border: 1px solid #cccccc;
    padding: 8px;
    box-sizing: border-box;
    background-color: #ffffff;
}

/* Immagine: occupa tutta la larghezza interna, margine uguale sotto */
.wp-block-latest-posts .wp-block-latest-posts__featured-image {
    flex: 0 0 auto;
    margin: 0 0 8px 0;
}

.wp-block-latest-posts .wp-block-latest-posts__featured-image a {
    display: block;
}

.wp-block-latest-posts .wp-block-latest-posts__featured-image img {
    display: block;
    width: 100%;
    height: auto;
}

/* Titolo centrato sotto l'immagine */
.wp-block-latest-posts .wp-block-latest-posts__post-title {
    flex: 1;
    font-size: 14px;
    line-height: 1.4;
    text-align: center;
    color: #336699;
    padding: 0;
}

/* ============================================================
   TABELLA DUE COLONNE CATLIST (shortcode riga_cat)
   ============================================================ */

.riga-cat {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

.riga-cat .col-cat {
    flex: 1;
    min-width: 0;
}

.col-cat-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: #8BC34A;
    border-bottom: 2px solid #336699;
    padding-bottom: 5px;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ============================================================
   FOOTER
   ============================================================ */

.site-footer {
    background-color: #f4f4f4;
    border-top: 2px solid #336699;
    padding: 10px 0;
    font-size: 0.85rem;
    color: #555555;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.site-footer a {
    color: #336699;
    text-decoration: none;
}

.site-footer a:hover {
    text-decoration: none;
    color: #cc0000;
}

.inside-site-info {
    display: flex;
    justify-content: center;
    padding: 0px 40px;
}

/* ============================================================
   SIMPLE LIGHTBOX — stile didascalia
   ============================================================ */

.slb_data_title span {
    font-family: Arial, sans-serif !important;
    font-size: 14px !important;
    font-weight: normal !important;
    font-style: normal !important;
}

.slb_data_desc,
.slb_group_status {
    display: none !important;
}

/* ============================================================
   FOOGALLERY — responsive colonne (tablet: 2 colonne)
   Il mobile a 1 colonna è nel blocco @media 767px sopra
   ============================================================ */

@media (min-width: 768px) and (max-width: 880px) {

    /* ── separate-containers: sidebar dopo il contenuto, scendono al 50% affiancate ── */
    .both-sidebars.separate-containers .site-content {
        width: 100% !important;
    }

    .both-sidebars.separate-containers .is-left-sidebar,
    .both-sidebars.separate-containers .is-right-sidebar {
        width: 50% !important;
        float: left !important;
        box-sizing: border-box;
    }

    .both-sidebars.separate-containers .is-left-sidebar {
        padding-right: 10px;
    }

    .both-sidebars.separate-containers .is-right-sidebar {
        padding-left: 10px;
    }

    /* ── one-container (fallback): flex wrap ── */
    .both-sidebars:not(.separate-containers) .site-content {
        display: flex !important;
        flex-wrap: wrap !important;
    }

    .both-sidebars:not(.separate-containers) .content-area {
        width: 100% !important;
        flex: none !important;
        order: 1;
    }

    .both-sidebars:not(.separate-containers) .is-left-sidebar {
        width: 50% !important;
        flex: none !important;
        order: 2;
        box-sizing: border-box;
        padding-right: 10px;
    }

    .both-sidebars:not(.separate-containers) .is-right-sidebar {
        width: 50% !important;
        display: block !important;
        flex: none !important;
        order: 3;
        box-sizing: border-box;
        padding-left: 10px;
    }

}

.wp-block-latest-posts__featured-image img {
  display: block;
  margin: 0 auto;
}

/* ============================================================
   FASCIA INTERMEDIA 481–767px
   Solo layout sidebar — nessuna interferenza con FooGallery
   ============================================================ */

@media (min-width: 481px) and (max-width: 767px) {

    /* Sidebar sinistra: passa sotto il contenuto, 50% affiancata */
    .left-sidebar .is-left-sidebar {
        width: 100% !important;
        flex: none;
        box-sizing: border-box;
    }

}


/* ============================================================
   FOOGALLERY + FOOBOX — stili specifici plugin
   ============================================================ */

/* FooBox: nasconde descrizione ripetuta nel lightbox */
.fbx-caption-desc {
    display: none !important;
}

/* FooGallery: miniatura con titolo */
.fg-item a::before {
    content: attr(data-caption-title);
    display: block;
    font-weight: 700;
    font-size: 0.9rem;
    color: #ffffff;
}

/* ============================================================
   HOME BOX PICCOLI — griglia 2 colonne, immagine + titolo
   ============================================================ */



.home-boxes-small {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-bottom: 20px;
}

.home-box-small {
    background-color: #f4f4f4;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    overflow: hidden;
    box-sizing: border-box;
}

.home-box-small-image {
    height: 180px;
    overflow: hidden;
    background-color: #ffffff;
    padding: 8px;
    box-sizing: border-box;
}

.home-box-small-image a {
    display: block !important;
    height: 100%;
    line-height: 0;
}

/* Selettore specifico — batte regole GP e attributi HTML width/height */
.home-boxes-small .home-box-small .home-box-small-image a img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    }

.home-box-small-title {
    text-align: center;
    background-color: #ffffff;
    padding: 4px 10px;
    font-size: 0.9rem;
    font-family: Georgia, sans-serif;
    line-height: 1.3;
}

.home-box-small-title a {
    color: #336699;
    text-decoration: none;
}

.home-box-small-title a:hover {
    color: #cc0000;
}

/* Mobile: 1 colonna */
@media (max-width: 480px) {
    .home-boxes-small {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   HOME BOX ORIZZONTALI — singola colonna, float immagine
   ============================================================ */

.home-boxes {
    padding: 10px 10px 20px 10px;
    margin-top: 10px;
}

.home-box {
    overflow: hidden;
    background-color: #f4f4f4;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 14px;
    margin-bottom: 14px;
    box-sizing: border-box;
}

.home-box-image {
    float: left;
    width: 240px;
    margin: 0 16px 8px 0;
}

.home-box-image a {
    display: block;
    line-height: 0;
}

/* Selettore specifico per battere height:auto di GP */
.home-boxes .home-box .home-box-image img {
    width: 240px !important;
    height: 180px !important;
    max-width: 240px !important;
    object-fit: cover !important;
    border-radius: 3px;
    display: block;
}

.home-box-category {
    float: right;
    margin-left: 8px;
    margin-bottom: 4px;
    line-height: 1.6;
}

.home-box-category a {
    display: inline-block;
    font-size: 0.75rem;
    color: #336699;
    border: 1px solid #336699;
    padding: 2px 8px;
    border-radius: 3px;
    text-decoration: none;
    white-space: nowrap;
    margin-left: 4px;
}

.home-box-category a:first-child {
    margin-left: 0;
}

.home-box-category a:hover {
    background-color: #cc0000;
    border-color: #cc0000;
    color: #ffffff;
}

.home-box-category a + a {
    margin-left: 2px;
}

.home-box-title {
    font-size: 1.05rem;
    font-family: Georgia, sans-serif;
    margin: 0 0 4px 0;
    line-height: 1.3;
    overflow-wrap: break-word;
    word-break: normal;
}

.home-box-title a {
    color: #336699;
    text-decoration: none;
}

.home-box-title a:hover {
    color: #cc0000;
}

.home-box-excerpt {
    color: #555555;
    line-height: 1.5;
}

.home-box-excerpt p {
    margin: 0;
}

/* Tablet e mobile medio: immagine fissa 180px fino a 480px */
@media (min-width: 481px) and (max-width: 1050px) {
    .home-box-image {
        width: 180px !important;
        max-width: 180px !important;
    }
    .home-boxes .home-box .home-box-image img {
        width: 180px !important;
        max-width: 180px !important;
        height: 135px !important;
        object-fit: cover !important;
    }
}

/* Mobile stretto: float annullato, immagine full-width */
@media (max-width: 480px) {
    .home-box-image {
        float: none;
        width: 100%;
        margin: 0 auto 10px auto;
    }
    .home-boxes .home-box .home-box-image img {
        width: 100% !important;
        max-width: 100% !important;
        height: 180px !important;
        object-fit: cover !important;
    }
}

/* ============================================================
   TAG — nascosti nella visualizzazione front-end
   I tag restano attivi per sidebar, filtri e altre funzioni
   ============================================================ */

.entry-footer .tags-links,
.tags-links {
    display: none;
}

/* ============================================================
   CATLIST DINAMICO — link post attivo evidenziato
   ============================================================ */

.catlist-active a {
    display: block;
    color: #ffffff !important;
    background-color: #cc0000;
    padding: 1px 5px;
    border-radius: 2px;
    text-decoration: none;
}

.catlist-active a:hover {
    background-color: #aa0000;
    color: #ffffff !important;
}

/* Titolo-link post-indice (tag sidebargallerie) nel widget catlist */
.widget-title .catlist-indice-link {
    color: #8BC34A;
    text-decoration: none;
    transition: color 0.2s;
}

.widget-title .catlist-indice-link:hover {
    color: #cc0000;
    text-decoration: none;
}

/* Titolo post-indice quando si è sul post-indice stesso */
.widget-title .catlist-indice-corrente {
    color: #cc0000;
}

.page-header-image { display: none !important; }