/*
 * catalog.css — Pagine Catalogo (Occhiali da Vista / Occhiali da Sole)
 * Dipende da homepage.css (token :root, .hp-hero-block, .hp__section-lead)
 */


/* ═══════════════════════════════════════════════════════════════════════
   0. SEZIONE BRAND — pill etichette marchi
═══════════════════════════════════════════════════════════════════════ */

.wp-block-group.catalog-brands-section {
    background:          var(--color-white);
    padding-block-start: var(--space-16);
    padding-block-end:   var(--space-8);
}

.catalog-brands-section.is-layout-constrained > * {
    max-width: min(90%, 1200px) !important;
}

.catalog-brands-section .wp-block-heading {
    color:         var(--color-text-dark);
    margin-bottom: var(--space-6);
}

.catalog-brands__pills {
    display:         flex;
    flex-wrap:       wrap;
    gap:             var(--space-3);
    justify-content: center;
    margin-top:      var(--space-6);
}

.catalog-brands__pill {
    background:    #FAF7F5;
    border:        1.5px solid var(--color-border);
    border-radius: 2rem;
    padding:       0.375rem 1.125rem;
    font-family:   var(--font-primary);
    font-size:     var(--text-sm);
    font-weight:   400;
    color:         var(--color-text-dark);
    line-height:   1.4;
}


/* ═══════════════════════════════════════════════════════════════════════
   1. SEZIONE GALLERIA
   Sfondo: --color-white
═══════════════════════════════════════════════════════════════════════ */

.wp-block-group.catalogo-gallery-section {
    background:          var(--color-white);
    padding-block-start: var(--space-8);
    padding-block-end:   var(--space-20);
}

.catalogo-gallery-section.is-layout-constrained > * {
    max-width: min(90%, 1200px) !important;
}

.catalogo-gallery-section .wp-block-heading {
    color: var(--color-text-dark);
}

.catalogo-gallery-section .hp__section-lead {
    color:         var(--color-text-body);
    max-width:     60ch;
    margin-inline: auto;
    margin-bottom: var(--space-10);
}


/* ═══════════════════════════════════════════════════════════════════════
   2. GALLERIA GUTENBERG
═══════════════════════════════════════════════════════════════════════ */

.catalogo-gallery-section .wp-block-gallery.catalogo-gallery {
    margin-top: var(--space-10) !important;
    margin-block-start: var(--space-10) !important;
}

/* Griglia uniforme: 3 colonne su desktop */
.wp-block-gallery.catalogo-gallery .wp-block-image {
    margin: 0;
}

.wp-block-gallery.catalogo-gallery figure.wp-block-image img {
    width:         100%;
    height:        280px;
    object-fit:    cover;
    border-radius: 0.75rem;
    display:       block;
    transition:    transform 0.3s ease, box-shadow 0.3s ease;
}

.wp-block-gallery.catalogo-gallery figure.wp-block-image:hover img {
    transform:  scale(1.02);
    box-shadow: 0 8px 32px rgba(43, 31, 34, 0.15);
}

/* Le immagini sono cliccabili → lightbox */
.wp-block-gallery.catalogo-gallery figure.wp-block-image a {
    display: block;
    cursor:  zoom-in;
}

/* Caption: visibile solo nella lightbox (GLightbox la legge via data-description) */
.wp-block-gallery.catalogo-gallery figcaption {
    font-family: var(--font-primary);
    font-size:   var(--text-sm);
    color:       var(--color-text-body);
    text-align:  center;
    margin-top:  var(--space-2);
}


/* ═══════════════════════════════════════════════════════════════════════
   3. STATO VUOTO — galleria senza immagini
═══════════════════════════════════════════════════════════════════════ */

.wp-block-gallery.catalogo-gallery:not(:has(img)) {
    display:          flex;
    align-items:      center;
    justify-content:  center;
    min-height:       200px;
    border:           2px dashed var(--color-border);
    border-radius:    1rem;
    padding:          var(--space-8);
}

.wp-block-gallery.catalogo-gallery:not(:has(img))::after {
    content:     "Nessuna immagine ancora disponibile — torna a trovarci presto!";
    font-family: var(--font-primary);
    font-size:   var(--text-body);
    color:       var(--color-text-body);
    text-align:  center;
}


/* ═══════════════════════════════════════════════════════════════════════
   4. RESPONSIVE
═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 980px) {
    .wp-block-group.catalogo-gallery-section {
        padding-block: var(--space-16);
    }

    .wp-block-gallery.catalogo-gallery figure.wp-block-image img {
        height: 220px;
    }
}

@media (max-width: 600px) {
    .wp-block-group.catalogo-gallery-section {
        padding-block: var(--space-12);
    }

    .wp-block-gallery.catalogo-gallery figure.wp-block-image img {
        height: 180px;
    }
}


/* ── GLightbox caption ──────────────────────────────────────────────────── */

.gslide-desc {
    font-family: var(--font-primary) !important;
    font-size: 16px !important;
}