/* GALLERY - griglia, vista ingrandita e download */

.gp-gallery {
    --gp-accent: #EA690B;
    --gp-ink: #2e3132;
    --gp-muted: #595959;
    --gp-line: #ececec;
    /* STESSA LARGHEZZA DEI CONTENITORI DEL TEMA (.wp-block-columns): IL CONTENUTO NON HA LIMITI PROPRI */
    max-width: 1400px; margin: 30px auto 60px; padding: 0 15px; box-sizing: border-box;
    font-family: 'Montserrat', Arial, sans-serif;
}

.gp-gallery-empty { margin: 40px 0; text-align: center; color: #595959; }


/* TOOLBAR DOWNLOAD --------------------------------------------------------------------------------- */

/* NON STICKY: L'HEADER DEL SITO E' FISSO E LA COPRIREBBE */
.gp-toolbar {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px;
    margin: 0 0 20px; padding: 12px 16px;
    background: rgba(255,255,255,.96); border: 1px solid var(--gp-line); border-radius: 8px;
}
/* "Scarica tutte" spinto a destra, separato dalle azioni di selezione */
.gp-toolbar .gp-dl-all { margin-left: auto; }

.gp-btn {
    padding: 9px 16px; border: 1px solid var(--gp-accent); border-radius: 4px;
    background: #fff; color: var(--gp-accent);
    font: 600 14px/1.2 'Nunito', Arial, sans-serif; cursor: pointer; transition: background .15s, color .15s;
}
.gp-btn:hover:not(:disabled) { background: var(--gp-accent); color: #fff; }
.gp-btn-primary { background: var(--gp-accent); color: #fff; }
.gp-btn-primary:hover:not(:disabled) { background: #c95a09; border-color: #c95a09; }
.gp-btn:disabled { opacity: .45; cursor: default; }


/* GRIGLIA ------------------------------------------------------------------------------------------ */

.gp-grid {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px;
    margin: 0; padding: 0; list-style: none;
    /* IL TOCCO PROLUNGATO ATTIVA LA SELEZIONE: VANNO TOLTI IL MENU "SALVA IMMAGINE" E L'EVIDENZIAZIONE */
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: rgba(0,0,0,.08);
}
.gp-selecting .gp-grid { user-select: none; -webkit-user-select: none; }
@media (max-width: 991px) { .gp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } }
/* DUE COLONNE ANCHE SUL TELEFONO: con molte foto una sola colonna diventa uno scroll infinito */
@media (max-width: 575px) { .gp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }

.gp-item { position: relative; margin: 0; padding: 0; }
.gp-item figure { margin: 0; }

.gp-open { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 6px; background: #f9f9f9; }
.gp-open img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.gp-open:hover img, .gp-open:focus-visible img { transform: scale(1.04); }
.gp-open:focus-visible { outline: 3px solid var(--gp-accent); outline-offset: 2px; }

.gp-item figcaption {
    margin: 10px 2px 0; color: var(--gp-ink);
    font: 600 15px/1.35 'Nunito', Arial, sans-serif;
}

/* SELEZIONE E DOWNLOAD SULLA SINGOLA FOTO */
.gp-check, .gp-dl {
    position: absolute; top: 10px; z-index: 2;
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; margin: 0; border-radius: 50%;
    background: rgba(255,255,255,.92); box-shadow: 0 1px 4px rgba(0,0,0,.25);
    cursor: pointer; transition: opacity .15s, background .15s;
}
.gp-check { left: 10px; }
.gp-dl { right: 10px; color: var(--gp-ink); }
.gp-check input { width: 18px; height: 18px; margin: 0; cursor: pointer; accent-color: var(--gp-accent); }
.gp-dl svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.gp-dl:hover { background: var(--gp-accent); color: #fff; }

/* LE CASELLE COMPAIONO SOLO IN MODALITA' SELEZIONE: FUORI DA LI' LA GRIGLIA RESTA PULITA */
.gp-check { display: none; }
.gp-selecting .gp-check { display: flex; }

/* IL PULSANTE DI DOWNLOAD SINGOLO COMPARE AL PASSAGGIO DEL MOUSE; SU TOUCH E' SEMPRE VISIBILE */
@media (hover: hover) {
    .gp-can-download .gp-dl { opacity: 0; }
    .gp-can-download .gp-item:hover .gp-dl, .gp-can-download .gp-item:focus-within .gp-dl { opacity: 1; }
}
.gp-selecting .gp-dl { display: none; }

/* STATO SELEZIONATO */
.gp-tick { display: none; }
.gp-selected .gp-open { outline: 3px solid var(--gp-accent); outline-offset: 2px; }
.gp-selected .gp-tick {
    display: block; position: absolute; inset: 0; border-radius: 6px;
    background: rgba(234,105,11,.22); pointer-events: none;
}
.gp-selecting .gp-open { cursor: pointer; }
.gp-selecting .gp-open img { transform: none !important; }


/* VISTA INGRANDITA --------------------------------------------------------------------------------- */

html.gp-lb-open { overflow: hidden; }

.gp-lb {
    position: fixed; inset: 0; z-index: 100000;
    display: grid; grid-template-columns: 70px minmax(0, 1fr) 70px; grid-template-rows: minmax(0, 1fr) auto;
    background: rgba(18,18,18,.95); color: #fff;
}
.gp-lb[hidden] { display: none; }

.gp-lb-stage {
    grid-column: 2; grid-row: 1; margin: 0; padding: 50px 0 10px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 0;
}
.gp-lb-stage img { max-width: 100%; max-height: calc(100% - 70px); object-fit: contain; border-radius: 3px; }
.gp-lb-stage figcaption { max-width: 820px; margin-top: 14px; text-align: center; }
.gp-lb-stage figcaption[hidden] { display: none; }
.gp-lb-stage strong { display: block; font: 700 18px/1.3 'Nunito', Arial, sans-serif; }
.gp-lb-stage span { display: block; margin-top: 4px; font-size: 14px; line-height: 1.5; color: #d0d0d0; }

.gp-lb-nav, .gp-lb-close {
    border: 0; background: transparent; color: #fff; cursor: pointer; opacity: .8; transition: opacity .15s;
}
.gp-lb-nav:hover, .gp-lb-close:hover { opacity: 1; }
.gp-lb-nav { grid-row: 1; font-size: 56px; line-height: 1; }
.gp-lb-prev { grid-column: 1; }
.gp-lb-next { grid-column: 3; }
.gp-lb-single .gp-lb-nav, .gp-lb-single .gp-lb-count { visibility: hidden; }
.gp-lb-close { position: absolute; top: 8px; right: 14px; z-index: 2; font-size: 40px; line-height: 1; }

.gp-lb-bar {
    grid-column: 1 / -1; grid-row: 2;
    display: flex; align-items: center; justify-content: center; gap: 20px; padding: 12px 16px 18px;
}
.gp-lb-count { font-size: 14px; color: #bdbdbd; }
.gp-lb-dl {
    padding: 8px 16px; border-radius: 4px; background: #EA690B; color: #fff !important;
    font: 600 14px/1.2 'Nunito', Arial, sans-serif; text-decoration: none !important;
}
.gp-lb-dl:hover { background: #c95a09; }
.gp-lb-dl[hidden] { display: none; }

@media (max-width: 767px) {
    .gp-lb { grid-template-columns: 0 minmax(0, 1fr) 0; }
    .gp-lb-nav { display: none; }
    .gp-lb-stage { padding: 56px 10px 0; }
}

/* CONTENUTO DELLA PAGINA ---------------------------------------------------------------------------
   Il tema limita a 1400px solo i blocchi colonna (.thecontent > .wp-block-columns): paragrafi,
   titoli e immagini inseriti normalmente nell'editor restavano a tutta larghezza, attaccati al
   bordo dello schermo. Qui ogni blocco viene allineato alla stessa griglia della gallery.
   Esclusi: la gallery, che si allinea da se', e i blocchi volutamente a tutta larghezza. */
.gp-gallery-page .thecontent > *:not(.gp-gallery):not(.alignfull):not(.gp-actionbar):not(.gp-top):not(.gp-selfab) {
    max-width: 1400px;
    margin-left: auto; margin-right: auto;
    padding-left: 15px; padding-right: 15px;
    box-sizing: border-box;
}


/* CARICAMENTO A BLOCCHI ----------------------------------------------------------------------------- */

.gp-more { margin: 28px 0 0; text-align: center; }
.gp-progress { margin: 10px 0 0; color: var(--gp-muted); font-size: 14px; }
.gp-more[hidden] { display: none; }


/* BARRA AZIONI FISSA IN BASSO ----------------------------------------------------------------------
   Con molte foto la toolbar in cima diventa irraggiungibile: le azioni sulla selezione stanno in
   fondo allo schermo, a portata di pollice, e restano visibili mentre si scorre. */

.gp-actionbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 99990;
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: #fff; border-top: 1px solid var(--gp-line);
    box-shadow: 0 -2px 14px rgba(0,0,0,.14);
    font-family: 'Montserrat', Arial, sans-serif;
}
.gp-actionbar[hidden] { display: none; }
.gp-actionbar .gp-selinfo { flex: 1; text-align: center; font-size: 14px; color: var(--gp-ink); }
.gp-actionbar .gp-btn { white-space: nowrap; }

/* LA BARRA NON DEVE COPRIRE LE ULTIME FOTO */
body.gp-selecting-body { padding-bottom: 76px; }


/* TORNA SU ------------------------------------------------------------------------------------------ */

/* PULSANTE FISSO PER ENTRARE IN SELEZIONE: IN CIMA ALLA PAGINA IL COMANDO SAREBBE IRRAGGIUNGIBILE
   DOPO AVER SCORSO. IN SELEZIONE SPARISCE, PERCHE' "Annulla" E' NELLA BARRA IN BASSO. */
.gp-selfab {
    position: fixed; right: 16px; bottom: 16px; z-index: 99985;
    display: flex; align-items: center; justify-content: center;
    width: 52px; height: 52px; border: 0; border-radius: 50%;
    background: var(--gp-accent); color: #fff; cursor: pointer;
    box-shadow: 0 3px 12px rgba(0,0,0,.3);
}
.gp-selfab svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.gp-selfab:hover { background: #c95a09; }
.gp-selecting .gp-selfab { display: none; }

.gp-top {
    position: fixed; right: 16px; bottom: 78px; z-index: 99980;
    width: 46px; height: 46px; border: 0; border-radius: 50%;
    background: rgba(46,49,50,.82); color: #fff; font-size: 20px; line-height: 1;
    cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,.25);
}
.gp-top:hover { background: var(--gp-accent); }
.gp-top[hidden] { display: none; }
body.gp-selecting-body .gp-top { bottom: 90px; }


/* TELEFONO ------------------------------------------------------------------------------------------ */

@media (max-width: 575px) {
    .gp-toolbar { gap: 8px; padding: 10px 12px; }
    .gp-toolbar .gp-btn { flex: 1; padding: 11px 10px; }
    .gp-item figcaption { font-size: 13px; margin-top: 6px; }
    .gp-check, .gp-dl { width: 32px; height: 32px; top: 6px; }
    .gp-check { left: 6px; } .gp-dl { right: 6px; }
    .gp-actionbar .gp-selinfo { font-size: 13px; }
}