/* ═══════════════════════════════════════════════════════
   DGCC Hero Banner Suite — Frontend CSS v6
   Prefisso: dgcc-hbs-  (nessun conflitto con altri plugin)
   ═══════════════════════════════════════════════════════ */

/* ── Utilities ── */
.dgcc-hbs-sr-only {
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.dgcc-hbs-skip-link {
    position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;
    background:#000;color:#fff;padding:6px 12px;z-index:9999;
    font-size:13px;text-decoration:none;border-radius:0 0 4px 0;
}
.dgcc-hbs-skip-link:focus {
    left:0;top:0;width:auto;height:auto;
}

/* ── Banner base ─────────────────────────────────────────
   height viene emessa DIRETTAMENTE nell'attributo style
   dal PHP (es. style="height:420px") — la CSS var è
   un secondo canale ridondante. Così nessun tema può
   interferire con la catena height:100%.
───────────────────────────────────────────────────────── */
.dgcc-hbs-banner {
    position: relative;
    display: block;
    width: 100%;
    /* height: sovrascritta dall'attributo style inline */
    height: var(--dgcc-hbs-h, 420px);
    overflow: hidden;
    background: var(--dgcc-hbs-bg, #111);
    box-sizing: border-box;
}

/* ── Overlay ── */
.dgcc-hbs-overlay {
    position: absolute; inset: 0;
    z-index: 2; pointer-events: none;
}
.dgcc-hbs-overlay--dark     { background: rgba(0,0,0,.40); }
.dgcc-hbs-overlay--light    { background: rgba(255,255,255,.30); }
.dgcc-hbs-overlay--gradient { background: linear-gradient(to bottom, rgba(0,0,0,0) var(--dgcc-hbs-ov-start,35%), rgba(0,0,0,.70) 100%); }
.dgcc-hbs-overlay--none     { display: none; }
/* custom: stile inline dal PHP */

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
    .dgcc-hbs-banner *,
    .dgcc-hbs-banner *::before,
    .dgcc-hbs-banner *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}


/* ══════════════════════════════════════════════════════
   STRIPS
   - width:100% esplicita risolve le fasce laterali
   - nessun gap: separatore tramite ::before interno
══════════════════════════════════════════════════════ */
.dgcc-hbs-strips {
    display: flex;
    align-items: stretch;  /* ogni striscia si allunga all'altezza del flex container */
    width: 100%;
    height: 100%;
}

.dgcc-hbs-strip {
    flex: 1 1 0%;
    position: relative;
    overflow: hidden;
    min-width: 0;
    height: 100%;
}

/* Vignette */
.dgcc-hbs-strip::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,.07) 0%, rgba(0,0,0,.18) 100%);
    pointer-events: none;
    z-index: 2;
}
/* Separatore verticale — non occupa spazio nel layout */
.dgcc-hbs-strip:not(:last-child)::before {
    content: '';
    position: absolute; top: 0; right: 0;
    width: 2px; height: 100%;
    background: rgba(255,255,255,.10);
    z-index: 3;
    pointer-events: none;
}

/* Slide dentro la striscia — nessuna regola opacity qui,
   gestita dalle regole data-effect specifiche */
.dgcc-hbs-strip .dgcc-hbs-slide {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    background-size: cover;
    background-position: var(--dgcc-hbs-img-x, 50%) var(--dgcc-hbs-img-y, 50%);
    background-repeat: no-repeat;
    will-change: transform, opacity;
}

/* Effetto slide */
.dgcc-hbs-strips[data-effect="slide"] .dgcc-hbs-slide {
    transform: translateY(0); opacity: 1;
    transition: transform var(--dgcc-hbs-fdur,.85s) cubic-bezier(.77,0,.18,1),
                opacity   var(--dgcc-hbs-fdur,.85s) ease;
}
.dgcc-hbs-strips[data-effect="slide"] .dgcc-hbs-slide.dgcc-hbs-enter { transform: translateY(100%); opacity: 0; }
.dgcc-hbs-strips[data-effect="slide"] .dgcc-hbs-slide.dgcc-hbs-exit  { transform: translateY(-100%); opacity: 0; pointer-events: none; }

/* Effetto fade */
.dgcc-hbs-strips[data-effect="fade"] .dgcc-hbs-slide {
    opacity: 1;
    transition: opacity var(--dgcc-hbs-fdur,1s) ease;
}
.dgcc-hbs-strips[data-effect="fade"] .dgcc-hbs-slide.dgcc-hbs-enter { opacity: 0; }
.dgcc-hbs-strips[data-effect="fade"] .dgcc-hbs-slide.dgcc-hbs-exit  { opacity: 0; pointer-events: none; }

/* Effetto zoom */
.dgcc-hbs-strips[data-effect="zoom"] .dgcc-hbs-slide {
    opacity: 1; transform: scale(1);
    transition: opacity var(--dgcc-hbs-fdur,1s) ease,
                transform var(--dgcc-hbs-fdur,1.2s) ease;
}
.dgcc-hbs-strips[data-effect="zoom"] .dgcc-hbs-slide.dgcc-hbs-enter { opacity: 0; transform: scale(1.13); }
.dgcc-hbs-strips[data-effect="zoom"] .dgcc-hbs-slide.dgcc-hbs-exit  { opacity: 0; transform: scale(.90); pointer-events: none; }

/* Mobile: riduzione numero strisce */
@media (max-width: 479px) {
    .dgcc-hbs-strips[data-strips-count="4"]  .dgcc-hbs-strip:nth-child(n+4),
    .dgcc-hbs-strips[data-strips-count="5"]  .dgcc-hbs-strip:nth-child(n+4),
    .dgcc-hbs-strips[data-strips-count="6"]  .dgcc-hbs-strip:nth-child(n+4),
    .dgcc-hbs-strips[data-strips-count="7"]  .dgcc-hbs-strip:nth-child(n+4),
    .dgcc-hbs-strips[data-strips-count="8"]  .dgcc-hbs-strip:nth-child(n+4),
    .dgcc-hbs-strips[data-strips-count="9"]  .dgcc-hbs-strip:nth-child(n+4),
    .dgcc-hbs-strips[data-strips-count="10"] .dgcc-hbs-strip:nth-child(n+4) { display: none; }
}
@media (min-width: 480px) and (max-width: 767px) {
    .dgcc-hbs-strips[data-strips-count="7"]  .dgcc-hbs-strip:nth-child(n+6),
    .dgcc-hbs-strips[data-strips-count="8"]  .dgcc-hbs-strip:nth-child(n+6),
    .dgcc-hbs-strips[data-strips-count="9"]  .dgcc-hbs-strip:nth-child(n+6),
    .dgcc-hbs-strips[data-strips-count="10"] .dgcc-hbs-strip:nth-child(n+6) { display: none; }
}

/* ══════════════════════════════════════════════════════
   SLIDESHOW, CAPTION, SINGLE
   ──────────────────────────────────────────────────────
   Approccio semplicissimo e robusto:
   - Tutte le slide sono position:absolute inset:0
   - opacity:0 / z-index:0 di default
   - .dgcc-hbs-active → opacity:1 / z-index:1
   - La transizione è SOLO sull'opacity (fade)
   - Per "slide" si aggiunge transform alla SOLA slide
     che entra e a quella che esce, mai alle altre
   - Questo elimina il problema delle slide che
     attraversano lo schermo da posizioni sbagliate
══════════════════════════════════════════════════════ */
.dgcc-hbs-slideshow,
.dgcc-hbs-caption,
.dgcc-hbs-single {
    position: relative;
}

/* Il wrapper occupa tutto il banner tramite absolute */
.dgcc-hbs-slides-wrap {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    overflow: hidden;
}

/* Slide: nascosta di default */
.dgcc-hbs-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: var(--dgcc-hbs-img-x, 50%) var(--dgcc-hbs-img-y, 50%);
    background-repeat: no-repeat;
    opacity: 0;
    z-index: 0;
    will-change: opacity;
    transition: opacity var(--dgcc-hbs-fdur, .9s) ease;
}
.dgcc-hbs-slide.dgcc-hbs-active {
    opacity: 1;
    z-index: 1;
}

/* ── Transizioni specifiche ──────────────────────────
   Ogni transizione sovrascrive solo le slide che
   stanno entrando (.dgcc-hbs-enter) o uscendo (.dgcc-hbs-leaving).
   Le slide "in attesa" restano opacity:0, nessun transform.
─────────────────────────────────────────────────────── */

/* FADE — identico al default, qui per chiarezza */
.dgcc-hbs-banner[data-transition="fade"] .dgcc-hbs-slide {
    transition: opacity var(--dgcc-hbs-fdur, .9s) ease;
}

/* SLIDE — entra/esce lateralmente, solo le slide coinvolte */
.dgcc-hbs-banner[data-transition="slide"] .dgcc-hbs-slide {
    transition: opacity var(--dgcc-hbs-fdur, .5s) ease,
                transform var(--dgcc-hbs-fdur, .7s) cubic-bezier(.77,0,.18,1);
}
/* Slide che entra (avanti): parte da destra */
.dgcc-hbs-banner[data-transition="slide"] .dgcc-hbs-slide.dgcc-hbs-enter-fwd {
    opacity: 0;
    transform: translateX(100%);
}
/* Slide che entra (indietro): parte da sinistra */
.dgcc-hbs-banner[data-transition="slide"] .dgcc-hbs-slide.dgcc-hbs-enter-bwd {
    opacity: 0;
    transform: translateX(-100%);
}
/* Slide attiva: sempre al centro */
.dgcc-hbs-banner[data-transition="slide"] .dgcc-hbs-slide.dgcc-hbs-active {
    opacity: 1;
    transform: translateX(0);
}
/* Slide che esce (avanti): va a sinistra */
.dgcc-hbs-banner[data-transition="slide"] .dgcc-hbs-slide.dgcc-hbs-leaving-fwd {
    opacity: 0;
    transform: translateX(-100%);
    z-index: 0;
}
/* Slide che esce (indietro): va a destra */
.dgcc-hbs-banner[data-transition="slide"] .dgcc-hbs-slide.dgcc-hbs-leaving-bwd {
    opacity: 0;
    transform: translateX(100%);
    z-index: 0;
}

/* ZOOM */
.dgcc-hbs-banner[data-transition="zoom"] .dgcc-hbs-slide {
    transform: scale(1.06);
    transition: opacity var(--dgcc-hbs-fdur,1s) ease,
                transform var(--dgcc-hbs-fdur,1.2s) ease;
}
.dgcc-hbs-banner[data-transition="zoom"] .dgcc-hbs-slide.dgcc-hbs-active {
    opacity: 1; transform: scale(1);
}
.dgcc-hbs-banner[data-transition="zoom"] .dgcc-hbs-slide.dgcc-hbs-leaving-fwd,
.dgcc-hbs-banner[data-transition="zoom"] .dgcc-hbs-slide.dgcc-hbs-leaving-bwd {
    opacity: 0; transform: scale(.96); z-index: 0;
}

/* FLIP */
.dgcc-hbs-banner[data-transition="flip"] { perspective: 1200px; }
.dgcc-hbs-banner[data-transition="flip"] .dgcc-hbs-slide {
    transform: rotateY(90deg);
    transition: opacity .1s, transform var(--dgcc-hbs-fdur,.7s) ease;
    backface-visibility: hidden;
}
.dgcc-hbs-banner[data-transition="flip"] .dgcc-hbs-slide.dgcc-hbs-active {
    opacity: 1; transform: rotateY(0);
}
.dgcc-hbs-banner[data-transition="flip"] .dgcc-hbs-slide.dgcc-hbs-leaving-fwd,
.dgcc-hbs-banner[data-transition="flip"] .dgcc-hbs-slide.dgcc-hbs-leaving-bwd {
    opacity: 0; transform: rotateY(-90deg); z-index: 0;
}

/* BLUR */
.dgcc-hbs-banner[data-transition="blur"] .dgcc-hbs-slide {
    filter: blur(16px); transform: scale(1.04);
    transition: opacity var(--dgcc-hbs-fdur,1s) ease,
                filter var(--dgcc-hbs-fdur,1s) ease,
                transform var(--dgcc-hbs-fdur,1s) ease;
}
.dgcc-hbs-banner[data-transition="blur"] .dgcc-hbs-slide.dgcc-hbs-active {
    opacity: 1; filter: blur(0); transform: scale(1);
}
.dgcc-hbs-banner[data-transition="blur"] .dgcc-hbs-slide.dgcc-hbs-leaving-fwd,
.dgcc-hbs-banner[data-transition="blur"] .dgcc-hbs-slide.dgcc-hbs-leaving-bwd {
    opacity: 0; z-index: 0;
}

/* Single: nessuna transizione */
.dgcc-hbs-single .dgcc-hbs-slide {
    opacity: 1;
    transition: none;
}

/* ── Frecce ── */
.dgcc-hbs-arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    z-index: 10;
    width: 44px; height: 44px;
    background: rgba(0,0,0,.50);
    border: 1px solid rgba(255,255,255,.22);
    color: #fff;
    border-radius: 50%;
    font-size: 18px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    padding: 0;
    transition: background .2s;
}
.dgcc-hbs-arrow:hover, .dgcc-hbs-arrow:focus-visible {
    background: rgba(0,0,0,.80);
    outline: 2px solid rgba(255,255,255,.7);
    outline-offset: 2px;
}
.dgcc-hbs-prev { left: 16px; }
.dgcc-hbs-next { right: 16px; }

/* ── Dots ── */
.dgcc-hbs-dots {
    position: absolute;
    bottom: 14px; left: 50%; transform: translateX(-50%);
    display: flex; gap: 10px;
    z-index: 10; align-items: center;
}
.dgcc-hbs-dot {
    width: 10px; height: 10px;
    padding: 0; border: none; border-radius: 50%;
    background: rgba(255,255,255,.40);
    cursor: pointer;
    position: relative; flex-shrink: 0;
    transition: background .25s, transform .2s;
}
.dgcc-hbs-dot::before { /* touch target */
    content: ''; position: absolute;
    top: 50%; left: 50%; transform: translate(-50%,-50%);
    width: 44px; height: 44px;
}
.dgcc-hbs-dot.dgcc-hbs-active { background: #fff; transform: scale(1.3); }
.dgcc-hbs-dot:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

/* ══════════════════════════════════════════════════════
   CAPTION
══════════════════════════════════════════════════════ */
.dgcc-hbs-caption-wrap {
    position: absolute; left: 0; right: 0;
    z-index: 5; pointer-events: none;
    /* assicura che il box tocchi il bordo (no overflow nascosto) */
    overflow: visible;
}
.dgcc-hbs-cap-top    { top: 0; }
.dgcc-hbs-cap-center { top: 50%; transform: translateY(-50%); }
/* bottom:0 DEVE toccare il bordo inferiore — nessun padding/margin che crei gap */
.dgcc-hbs-cap-bottom { bottom: 0; top: auto; }

.dgcc-hbs-caption-box {
    display: block;
    max-width: 100%;
    min-height: var(--dgcc-hbs-cap-h, auto);
    display: flex;
    align-items: flex-end;
}
.dgcc-hbs-cap-top .dgcc-hbs-caption-box    { align-items: flex-start; }
.dgcc-hbs-cap-center .dgcc-hbs-caption-box { align-items: center; }

.dgcc-hbs-caption-text {
    /* span reso block per comportarsi come paragrafo ma ignorato da wpautop */
    display: block;
    width: 100%;
    margin: 0;
    padding: var(--dgcc-hbs-cap-py, 12px) var(--dgcc-hbs-cap-px, 20px);
    box-sizing: border-box;
    color: var(--dgcc-hbs-cap-color, #fff);
    font-size: var(--dgcc-hbs-cap-size, clamp(14px, 2.2vw, 22px));
    font-family: var(--dgcc-hbs-cap-font, Georgia, 'Times New Roman', serif);
    font-weight: var(--dgcc-hbs-cap-weight, normal);
    font-style: var(--dgcc-hbs-cap-style, italic);
    letter-spacing: .02em;
    line-height: 1.5;
}

/* ══════════════════════════════════════════════════════
   DAILY
══════════════════════════════════════════════════════ */
.dgcc-hbs-daily .dgcc-hbs-slide { opacity: 1; transition: none; }

.dgcc-hbs-daily-badge {
    position: absolute; z-index: 6;
    padding: 10px 16px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 4px;
    display: flex; flex-direction: column; gap: 3px;
    pointer-events: none;
}
.dgcc-hbs-badge--tr { top: 18px; right: 18px; }
.dgcc-hbs-badge--tl { top: 18px; left: 18px; }
.dgcc-hbs-badge--br { bottom: 18px; right: 18px; }
.dgcc-hbs-badge--bl { bottom: 18px; left: 18px; }
.dgcc-hbs-badge--c  { top: 50%; left: 50%; transform: translate(-50%,-50%); }

.dgcc-hbs-badge-label { display: block; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.75); }
.dgcc-hbs-badge-date  { display: block; font-size: 15px; font-family: Georgia, serif; font-style: italic; color: #fff; }
.dgcc-hbs-badge-cap   { display: block; font-size: 12px; color: rgba(255,255,255,.85); font-style: italic; line-height: 1.4; }

/* ══════════════════════════════════════════════════════
   KEN BURNS
══════════════════════════════════════════════════════ */
.dgcc-hbs-kenburns { position: relative; }

.dgcc-hbs-kb-slide {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    background-size: cover;
    background-position: var(--dgcc-hbs-img-x, 50%) var(--dgcc-hbs-img-y, 50%);
    opacity: 0; z-index: 0;
    will-change: transform, opacity;
    transition: opacity 1.4s ease;
}
.dgcc-hbs-kb-slide.dgcc-hbs-active  { opacity: 1; z-index: 1; }
.dgcc-hbs-kb-slide.dgcc-hbs-leaving { opacity: 0; z-index: 0; }

@keyframes dgcc-hbs-kb-1 { from{transform:scale(1.10) translate( 0%,  0%)} to{transform:scale(1.10) translate(-4%, -3%)} }
@keyframes dgcc-hbs-kb-2 { from{transform:scale(1.10) translate(-4%,  0%)} to{transform:scale(1.10) translate( 4%,  3%)} }
@keyframes dgcc-hbs-kb-3 { from{transform:scale(1.10) translate( 3%,  3%)} to{transform:scale(1.10) translate(-3%, -4%)} }
@keyframes dgcc-hbs-kb-4 { from{transform:scale(1.08) translate( 0%,  4%)} to{transform:scale(1.08) translate( 3%, -3%)} }


/* ── Responsive ── */
@media (max-width: 600px) {
    .dgcc-hbs-caption-box p { font-size: clamp(13px,4vw,18px); padding: 10px 14px; }
    .dgcc-hbs-daily-badge   { padding: 7px 11px; }
    .dgcc-hbs-badge-date    { font-size: 13px; }
    .dgcc-hbs-arrow         { width: 40px; height: 40px; font-size: 16px; }
    .dgcc-hbs-prev          { left: 10px; }
    .dgcc-hbs-next          { right: 10px; }
    .dgcc-hbs-dots          { bottom: 10px; }
}