/* =====================================================================
   SCC Comunità — tema Coppermine di SanCostantinoCalabro.net.
   Stessi colori e caratteri del tema WordPress "scc-comunita".
   Si carica dopo style.css (ereditato da "curve") e ne prevale.
   ===================================================================== */

@font-face { font-family: "Literata"; font-weight: 400; font-style: normal; font-display: swap; src: url(fonts/Literata72pt-Regular.woff2) format("woff2"); }
@font-face { font-family: "Literata"; font-weight: 600; font-style: normal; font-display: swap; src: url(fonts/Literata72pt-SemiBold.woff2) format("woff2"); }
@font-face { font-family: "Literata"; font-weight: 700; font-style: normal; font-display: swap; src: url(fonts/Literata72pt-Bold.woff2) format("woff2"); }
@font-face { font-family: "Fira Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url(fonts/FiraSans-Regular.woff2) format("woff2"); }
@font-face { font-family: "Fira Sans"; font-weight: 500; font-style: normal; font-display: swap; src: url(fonts/FiraSans-Medium.woff2) format("woff2"); }
@font-face { font-family: "Fira Sans"; font-weight: 600; font-style: normal; font-display: swap; src: url(fonts/FiraSans-SemiBold.woff2) format("woff2"); }

:root {
    --scc-pietra: #F6F2EA;
    --scc-bianco: #FFFDF9;
    --scc-inchiostro: #2B2A28;
    --scc-terracotta: #B4472F;
    --scc-scuro: #33402B; /* verde ulivo (prima blu montagna) */
    --scc-grigio: #6B665E;
    --scc-sabbia: #E6DCCB;
    --scc-titoli: "Literata", Georgia, serif;
    --scc-testo: "Fira Sans", system-ui, sans-serif;
}

body.scc {
    background: var(--scc-pietra);
    color: var(--scc-inchiostro);
    font-family: var(--scc-testo);
    font-size: 16px;
    line-height: 1.55;
    padding: 0;
    margin: 0;
}
.scc-contenitore { max-width: 1200px; margin: 0 auto; padding: 0 24px; box-sizing: border-box; }

.scc h1, .scc h2, .scc h3 { font-family: var(--scc-titoli); color: var(--scc-scuro); font-weight: 600; }
/* "curve" imposta Verdana/Arial su molti elementi: si torna al carattere del sito */
.scc table, .scc td, .scc th, .scc p, .scc input, .scc select, .scc textarea, .scc .textinput, .scc .listbox { font-family: var(--scc-testo); }
.scc a:link, .scc a:visited { color: var(--scc-terracotta); text-decoration: none; }
.scc a:hover, .scc a:focus { color: var(--scc-scuro); text-decoration: underline; }

/* Intestazione (uguale al sito principale) */
.scc-intestazione { background: var(--scc-scuro); border-bottom: 4px solid var(--scc-terracotta); color: var(--scc-bianco); }
.scc-intestazione__riga { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 32px; padding-top: 18px; padding-bottom: 18px; }
.scc-marchio { display: flex; flex-direction: column; }
.scc .scc-marchio__nome:link, .scc .scc-marchio__nome:visited { font-family: var(--scc-titoli); font-weight: 700; font-size: 1.75rem; color: var(--scc-bianco); line-height: 1.2; text-decoration: none; }
.scc-marchio__motto { color: #C9D6E3; font-size: 0.875rem; }
.scc-menu { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.scc .scc-menu a:link, .scc .scc-menu a:visited { color: var(--scc-bianco); font-weight: 500; font-size: 1.05rem; padding: 4px 0; border-bottom: 2px solid transparent; text-decoration: none; }
.scc .scc-menu a:hover, .scc .scc-menu a.scc-menu__attivo { border-bottom-color: var(--scc-terracotta); color: var(--scc-bianco); text-decoration: none; }

/* Barra della gallery: menu di Coppermine */
.scc-barra-gallery { background: var(--scc-bianco); border-bottom: 1px solid var(--scc-sabbia); padding: 12px 0; }
.scc #main_menu { padding: 0; margin: 0; display: flow-root; }
.scc-barra-gallery .scc-contenitore { display: flow-root; }
.scc .menuheight { display: none; }
.scc .dropmenu li a.firstlevel, .scc .dropmenu li a.firstlevel span.firstlevel,
.scc .dropmenu li a.firstlevel:hover, .scc .dropmenu li a.firstlevel:hover span.firstlevel,
.scc .dropmenu li a.active, .scc .dropmenu li a.active span.firstlevel {
    background: none;
    height: auto;
    line-height: 1.4;
}
.scc .dropmenu li a.firstlevel { border-radius: 4px; margin-right: 6px; padding: 0; }
.scc .dropmenu li a.firstlevel span.firstlevel { padding: 6px 12px; color: var(--scc-scuro); font-family: var(--scc-testo); font-size: 0.95rem; font-weight: 500; }
.scc .dropmenu li a.firstlevel:hover { background: var(--scc-pietra); text-decoration: none; }
.scc .dropmenu li a.firstlevel span.firstlevel img { vertical-align: -3px; margin-right: 4px; opacity: 0.8; }
.scc .dropmenu li ul { background: var(--scc-bianco); border: 1px solid var(--scc-sabbia); border-radius: 4px; box-shadow: 0 6px 18px rgba(51, 64, 43, 0.12); }
.scc .dropmenu li li a { color: var(--scc-scuro); background: none; }
.scc .dropmenu li li a:hover { background: var(--scc-pietra); color: var(--scc-terracotta); }

/* Contenuto */
.scc-principale { padding-top: 28px; padding-bottom: 24px; }
.scc .maintable { background: var(--scc-bianco); border: 1px solid var(--scc-sabbia); border-radius: 6px; border-collapse: separate; border-spacing: 0; overflow: hidden; margin-bottom: 24px; }
.scc .cpg_starttable_outer, .scc .cpg_starttable_outer div.cpg_starttable_inner { background: none; padding: 0; }
.scc .tableh1, .scc .tableh1 a:link, .scc .tableh1 a:visited {
    background: var(--scc-scuro);
    color: var(--scc-bianco);
    font-family: var(--scc-testo);
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border: 0;
}
.scc .tableh1 { padding: 10px 14px; }
.scc .tableh2 { background: var(--scc-sabbia); color: var(--scc-inchiostro); border: 0; padding: 8px 14px; }
.scc .tableb, .scc .tableb_alternate { background: var(--scc-bianco); color: var(--scc-inchiostro); border-color: var(--scc-sabbia); padding: 10px 14px; }
.scc .tableb_alternate { background: #FBF8F2; }
.scc .tablef { background: var(--scc-pietra); border: 0; padding: 10px 14px; }
.scc .catrow, .scc .catrow_noalb { background: var(--scc-bianco); border-bottom: 1px solid var(--scc-sabbia); padding: 14px; }
.scc .catrow a:link, .scc .catrow a:visited, .scc .catrow_noalb a:link, .scc .catrow_noalb a:visited { font-family: var(--scc-titoli); font-size: 1.2rem; font-weight: 600; color: var(--scc-scuro); }
.scc .alblink a:link, .scc .alblink a:visited { font-family: var(--scc-titoli); font-size: 1.1rem; font-weight: 600; color: var(--scc-scuro); text-decoration: none; }
.scc .alblink a:hover { color: var(--scc-terracotta); }
.scc .album_stat { color: var(--scc-grigio); font-size: 0.85rem; }
/* Ordinamento delle miniature: in "curve" le etichette erano bianche su una barra scura */
.scc .sortorder_options { color: var(--scc-grigio); font-size: 0.8rem; font-weight: 500; }
.scc .sortorder_cell img { vertical-align: -2px; }
.scc .thumb_title, .scc .thumb_caption, .scc .thumb_filename { font-family: var(--scc-testo); color: var(--scc-inchiostro); }

/* Celle delle miniature: niente grigio di "curve" */
.scc .thumbnails, .scc .navmenu, .scc .imageborder { background: var(--scc-bianco); }
.scc .tableb .thumbnails, .scc .tableb_alternate .thumbnails { background: transparent; }
.scc td.tableb.tableb_alternate { background: var(--scc-bianco); }

/* Miniature come piccole schede */
/* solo le miniature <img>: nella pagina della foto ".image" è una cella con la foto come sfondo */
.scc img.image, .scc a:link img.image, .scc a:visited img.image {
    border: 1px solid var(--scc-sabbia);
    border-radius: 4px;
    background: var(--scc-bianco);
    padding: 4px;
    margin: 4px;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.scc a:hover img.image, .scc a:focus img.image { border-color: var(--scc-terracotta); box-shadow: 0 6px 18px rgba(51, 64, 43, 0.15); transform: translateY(-2px); }
.scc .imageborder { border: 1px solid var(--scc-sabbia); background: var(--scc-bianco); }

/* Navigazione tra pagine, pulsanti, campi */
.scc .navmenu { background: none; border: 0; color: var(--scc-scuro); font-weight: 600; font-size: 0.85rem; letter-spacing: 0.04em; }
.scc .button, .scc .admin_menu, .scc a.button, .scc a.admin_menu {
    background: var(--scc-terracotta);
    color: var(--scc-bianco);
    border: 0;
    border-radius: 4px;
    font-family: var(--scc-testo);
    font-weight: 600;
    padding: 6px 12px;
}
.scc a:hover.button, .scc a:hover.admin_menu { background: var(--scc-scuro); color: var(--scc-bianco); text-decoration: none; }
.scc .textinput, .scc .listbox { border: 1px solid var(--scc-sabbia); border-radius: 4px; padding: 6px 8px; font-family: var(--scc-testo); }

/* Pagina della singola foto */
.scc .display_media { background: var(--scc-bianco); }
/* Video (YouTube e MP4): mai più larghi dello schermo, sempre in 16:9 */
.scc .display_media iframe {
    display: block;
    width: 100%;
    max-width: 640px;
    height: auto;
    aspect-ratio: 16 / 9;
    margin: 0 auto;
}
.scc .display_media video { display: block; width: 100%; max-width: 100%; height: auto; margin: 0 auto; }
.scc .img_caption_table th { background: var(--scc-sabbia); color: var(--scc-inchiostro); }
.scc .img_caption_table td { background: var(--scc-bianco); }
.scc .pic_title { font-family: var(--scc-titoli); color: var(--scc-scuro); }
.scc .filmstrip_background { background: var(--scc-pietra); }

/* Piè di pagina (uguale al sito principale) */
.scc-piede { background: var(--scc-scuro); border-top: 4px solid var(--scc-terracotta); color: var(--scc-bianco); margin-top: 40px; padding: 40px 0 24px; font-size: 0.95rem; }
.scc-piede__colonne { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 32px; }
.scc-piede p { margin: 0 0 8px; color: #C9D6E3; }
.scc .scc-piede__nome { font-family: var(--scc-titoli); font-weight: 700; font-size: 1.4rem; color: var(--scc-bianco); }
.scc .scc-piede__titolo { font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.9rem; color: var(--scc-bianco); }
.scc-piede ul { list-style: none; margin: 0; padding: 0; }
.scc-piede li { padding: 2px 0; }
.scc .scc-piede a:link, .scc .scc-piede a:visited { color: var(--scc-bianco); }
.scc-piede__fondo { border-top: 1px solid #3A5670; margin-top: 24px; padding-top: 16px; font-size: 0.85rem; }
.scc .scc-piede__crediti, .scc .scc-piede__crediti a:link, .scc .scc-piede__crediti a:visited, .scc .footer, .scc .footer a:link, .scc .footer a:visited { color: #9FB3C6; font-size: 0.8rem; }

/* Schermi stretti */
@media (max-width: 720px) {
    .scc-piede__colonne { grid-template-columns: 1fr; }
    .scc-menu { gap: 4px 16px; }
    .scc .scc-menu a:link, .scc .scc-menu a:visited { font-size: 0.95rem; }
    .scc .maintable { display: block; overflow-x: auto; }
    .scc .scc-marchio__nome:link, .scc .scc-marchio__nome:visited { font-size: 1.35rem; }
    .scc-contenitore { padding: 0 16px; }
}

/* =====================================================================
   Foto grande nella pagina della foto (tutte le dimensioni dello schermo)
   ===================================================================== */
.scc img.scc-foto {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    border-radius: 4px;
    background: #111;
}

/* Panorama a 360°: anteprima finché Pannellum non ha caricato l'immagine */
.scc .scc-pano {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: 70vh;
    margin: 0 auto;
    border-radius: 4px;
    overflow: hidden;
    background: #111;
}
/* Mappa delle foto georeferenziate: prima un invito, al clic la mappa OpenStreetMap */
.scc .scc-mappa {
    margin: 16px auto 4px;
    padding: 16px;
    border: 1px dashed var(--scc-sabbia);
    border-radius: 6px;
    text-align: center;
}
.scc .scc-mappa__apri {
    font: 600 1rem var(--scc-testo);
    padding: 8px 18px;
    border: 0;
    border-radius: 999px;
    background: var(--scc-scuro);
    color: var(--scc-bianco);
    cursor: pointer;
}
.scc .scc-mappa__nota { margin: 8px 0 0; font-size: 0.85rem; color: #6b6255; }
.scc .scc-mappa--aperta { height: 360px; padding: 0; border: 0; text-align: left; }
.scc .scc-mappa__fumetto { max-height: 220px; overflow-y: auto; }
.scc .scc-mappa__fumetto p { margin: 0 0 6px; font-weight: 600; }
.scc .scc-mappa__fumetto a { display: flex; align-items: center; gap: 8px; margin: 4px 0; }
.scc .scc-mappa__fumetto img { width: 56px; height: 42px; object-fit: cover; border-radius: 3px; flex: none; }
.scc .leaflet-container img { max-width: none; }
.scc .scc-mappa__fumetto img { max-width: 56px; }
@media (max-width: 720px) {
    .scc .scc-mappa { margin: 12px 16px 4px; }
    .scc .scc-mappa--aperta { margin: 12px 0 4px; height: 300px; border-radius: 0; }
}

/* Coppermine dà alle miniature le proporzioni della foto intera (striscia 360°): qui sono vedute 4:3 */
.scc img[src*="/thumb_"][src$="_360.jpg"] { height: auto; }
.scc .scc-pano__anteprima { display: block; width: 100%; height: 100%; object-fit: cover; }
.scc .scc-pano__visore { position: absolute; inset: 0; }
.scc .scc-pano--pronto .scc-pano__anteprima { visibility: hidden; }
.scc .scc-pano--piatto { height: auto; overflow-x: auto; background: none; }
.scc .scc-pano--piatto img { display: block; height: min(60vh, 500px); width: auto; max-width: none; }
.scc .scc-pano--piatto p { margin: 6px 0 0; font-size: 0.9rem; text-align: center; }

/* =====================================================================
   Smartphone: griglia stile Instagram, foto a tutto schermo
   ===================================================================== */
@media (max-width: 720px) {
    /* La tabella delle miniature diventa una griglia di quadrati a 3 colonne */
    .scc-pagina-album .scc table.maintable:has(td.thumbnails) { display: block; border-radius: 0; border-left: 0; border-right: 0; }
    .scc-pagina-album .scc table.maintable:has(td.thumbnails) > tbody { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
    .scc-pagina-album .scc table.maintable:has(td.thumbnails) > tbody > tr { display: contents; }
    .scc-pagina-album .scc table.maintable:has(td.thumbnails) > tbody > tr > td { display: block; grid-column: 1 / -1; }
    .scc-pagina-album .scc table.maintable:has(td.thumbnails) > tbody > tr > td.thumbnails { grid-column: auto; padding: 0; width: auto; background: none; }
    .scc-pagina-album .scc td.thumbnails table, .scc-pagina-album .scc td.thumbnails tbody, .scc-pagina-album .scc td.thumbnails tr, .scc-pagina-album .scc td.thumbnails td { display: block; width: 100%; padding: 0; }
    .scc-pagina-album .scc td.thumbnails a { display: block; }
    .scc-pagina-album .scc td.thumbnails img,
    .scc-pagina-album .scc td.thumbnails a:link img.image, .scc-pagina-album .scc td.thumbnails a:visited img.image {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
        object-fit: cover;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        transform: none;
    }
    .scc-pagina-album .scc td.thumbnails .thumb_title, .scc-pagina-album .scc td.thumbnails .thumb_caption,
    .scc-pagina-album .scc td.thumbnails .thumb_num_comments, .scc-pagina-album .scc td.thumbnails br { display: none; }
    /* Lista degli album: ogni album diventa una scheda a tutta larghezza */
    .scc-pagina-indice .scc-principale table, .scc-pagina-indice .scc-principale tbody,
    .scc-pagina-indice .scc-principale tr, .scc-pagina-indice .scc-principale td {
        display: block;
        width: 100% !important;
        box-sizing: border-box;
    }
    .scc-pagina-indice .scc-principale img[src*="spacer.gif"],
    .scc-pagina-indice .scc-principale td.thumbnails br,
    .scc-pagina-indice .scc td.tableh1[width="10%"],
    .scc-pagina-indice .scc td.catrow[align="center"] { display: none; }
    .scc-pagina-indice .scc td.tableb.tableb_alternate[colspan="3"] { padding: 0; }
    .scc-pagina-indice .scc td[width="50%"] { padding: 10px 12px 14px; border-bottom: 1px solid var(--scc-sabbia); }
    .scc-pagina-indice .scc td.tableh2 { background: none; padding: 0 0 8px; }
    .scc-pagina-indice .scc td.thumbnails { padding: 0; background: none; }
    .scc-pagina-indice .scc td.thumbnails img.image {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 10;
        object-fit: cover;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 6px;
        box-shadow: none;
        transform: none;
    }
    .scc-pagina-indice .scc td.thumbnails + td + td { padding: 8px 0 0; }
    .scc-pagina-indice .scc td.catrow { padding: 14px 12px; }
    .scc-pagina-indice .scc td.catrow table td { display: block; }
    .scc-pagina-indice .scc td.catrow img.image { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; margin: 0 0 8px; border-radius: 6px; }
    .scc-principale { padding-left: 0; padding-right: 0; }
    .scc .maintable h2 { font-size: 1.3rem; padding: 0 12px; }
    /* Parte alta più compatta: niente ordinamento */
    .scc .sortorder_cell { display: none; }
    .scc-barra-gallery { padding: 12px 0 6px; }
    .scc .dropmenu li a.firstlevel span.firstlevel { padding: 4px 8px; font-size: 0.9rem; }

    /* Pagina della foto: immagine da bordo a bordo, alta al massimo quanto lo schermo */
    /* le tabelle annidate intorno alla foto diventano blocchi a tutta larghezza */
    .scc .maintable:has(td.display_media), .scc .maintable:has(td.display_media) > tbody,
    .scc .maintable:has(td.display_media) > tbody > tr,
    .scc td.display_media, .scc td.display_media table, .scc td.display_media tbody,
    .scc td.display_media tr, .scc td.display_media td {
        display: block;
        width: 100%;
        padding: 0;
        border-radius: 0;
        border-left: 0;
        border-right: 0;
        white-space: normal;
    }
    .scc img.scc-foto {
        width: 100%;
        max-width: 100%;
        max-height: 88svh;
        object-fit: contain;
        border-radius: 0;
    }
}

/* Visore a tutto schermo */
.scc-visore-aperto, .scc-visore-aperto body { overflow: hidden; }
.scc-visore {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: #000;
    color: #fff;
    font-family: var(--scc-testo);
}
.scc-visore__pista {
    display: flex;
    width: 100%;
    height: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    overscroll-behavior: contain;
    scrollbar-width: none;
}
.scc-visore__pista::-webkit-scrollbar { display: none; }
.scc-visore__diapositiva {
    flex: 0 0 100%;
    height: 100%;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}
.scc-visore__diapositiva > img {
    min-width: 0;
    min-height: 0;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}
.scc-visore__diapositiva--video a, .scc-visore__diapositiva--fine a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    color: #fff;
    font-weight: 600;
    text-decoration: none;
}
.scc-visore__diapositiva--video img { width: 80vw; max-width: 480px; border-radius: 6px; }
.scc-visore__diapositiva--video span, .scc-visore__diapositiva--fine a {
    background: var(--scc-terracotta);
    padding: 10px 18px;
    border-radius: 999px;
}
.scc-visore__chiudi {
    position: absolute;
    top: max(10px, env(safe-area-inset-top));
    right: 10px;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    font-size: 30px;
    line-height: 44px;
    cursor: pointer;
}
.scc-visore__info {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 28px 16px max(14px, env(safe-area-inset-bottom));
    background: linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
    font-size: 0.95rem;
    line-height: 1.4;
    transition: opacity 0.2s ease;
}
.scc-visore__info { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.scc-visore__info strong, .scc-visore__info p { flex-basis: 100%; }
.scc-visore__info strong { display: block; font-family: var(--scc-titoli); font-size: 1.1rem; font-weight: 600; margin: 2px 0; }
.scc-visore__info p { margin: 0 0 4px; color: #ddd; }
.scc-visore__info a { color: #ffd38a; font-weight: 600; }
/* nel visore i colori dei link generali del tema (terracotta) non valgono */
.scc .scc-visore a:link, .scc .scc-visore a:visited, .scc .scc-visore a:hover, .scc .scc-visore a:focus { color: #fff; text-decoration: none; }
.scc .scc-visore .scc-visore__info a:link, .scc .scc-visore .scc-visore__info a:visited { color: #ffd38a; }
.scc-visore__conta { font-size: 0.8rem; color: #bbb; }
.scc-visore--pulito .scc-visore__info, .scc-visore--pulito .scc-visore__chiudi { opacity: 0; pointer-events: none; }
/* link alla pagina della foto (commenti, voto, mappa): ben visibile */
.scc .scc-visore .scc-visore__info a.scc-visore__pagina:link, .scc .scc-visore .scc-visore__info a.scc-visore__pagina:visited {
    display: inline-block;
    margin-top: 4px;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--scc-terracotta);
    color: #fff;
}
.scc .scc-visore .scc-visore__info a.scc-visore__pagina:hover { background: var(--scc-scuro); }
/* frecce per il mouse; sugli schermi tattili si scorre con il dito */
.scc-visore__freccia {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    font-size: 40px;
    line-height: 48px;
    cursor: pointer;
    transition: opacity 0.2s, background 0.2s;
}
.scc-visore__freccia:hover { background: rgba(0, 0, 0, 0.75); }
.scc-visore__freccia--prec { left: 16px; }
.scc-visore__freccia--succ { right: 16px; }
.scc-visore__freccia[hidden] { display: none; }
.scc-visore--pulito .scc-visore__freccia { opacity: 0; pointer-events: none; }
@media (hover: none) { .scc-visore__freccia { display: none; } }
/* su schermi larghi le informazioni stanno in una colonna centrata */
@media (min-width: 721px) {
    .scc-visore__info { padding-left: max(16px, calc(50% - 400px)); padding-right: max(16px, calc(50% - 400px)); }
    .scc-visore__diapositiva > img { max-height: calc(100% - 24px); }
}

/* Pulsante "Condividi": nel visore accanto alla chiusura, nella pagina della foto sotto l'immagine */
.scc .scc-visore__condividi, .scc .scc-condividi {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 0;
    border-radius: 999px;
    font: 600 0.95rem var(--scc-testo, inherit);
    cursor: pointer;
}
.scc .scc-visore__condividi {
    position: absolute;
    top: max(10px, env(safe-area-inset-top));
    right: 62px;
    height: 44px;
    padding: 0 16px;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    transition: opacity 0.2s;
}
.scc .scc-visore__condividi[hidden] { display: none; }
.scc-visore--pulito .scc-visore__condividi { opacity: 0; pointer-events: none; }
.scc-condividi__riga { display: flex; justify-content: center; padding: 12px 0 4px; }
.scc .scc-condividi { padding: 10px 20px; background: var(--scc-terracotta); color: #fff; }
.scc .scc-condividi:hover, .scc .scc-condividi:focus-visible { background: var(--scc-scuro); }
.scc-avviso {
    position: fixed;
    left: 50%;
    bottom: max(24px, env(safe-area-inset-bottom));
    transform: translateX(-50%);
    z-index: 10001;
    padding: 10px 18px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    font-weight: 600;
}