/*
 * Premium Blocks — Frontend CSS v25.1
 * La larghezza e il layout sono gestiti da:
 * - style.css: padding di .site-main e regole .entry-content.is-layout-constrained
 * - block.json: layout:false per evitare is-layout-constrained automatico
 * Questo file gestisce solo gli stili specifici dei blocchi.
 */

/* ══════════════════════════════════════════════════════════════════
   ACCORDION
   ══════════════════════════════════════════════════════════════════ */
.tema-accordion { width: 100%; }
.tema-acc-header { cursor: pointer; width: 100%; text-align: left; }
.tema-acc-header:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }

/* ══════════════════════════════════════════════════════════════════
   TABS
   ══════════════════════════════════════════════════════════════════ */
.tema-tab-btn:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }

/* ══════════════════════════════════════════════════════════════════
   TIMELINE ALTERNATA — responsive
   ══════════════════════════════════════════════════════════════════ */
.tema-tl-alternate { overflow: visible; }

@media (max-width: 640px) {
    .tema-tl-alternate > div {
        flex-direction: column !important;
    }
    .tema-tl-alternate > div > div:first-child,
    .tema-tl-alternate > div > div:last-child {
        flex: none !important;
        padding-left: 1.5rem !important;
        padding-right: 0 !important;
        text-align: left !important;
        visibility: visible !important;
    }
}

/* ══════════════════════════════════════════════════════════════════
   BEFORE/AFTER
   ══════════════════════════════════════════════════════════════════ */
.tema-before-after { touch-action: none; user-select: none; }

/* ══════════════════════════════════════════════════════════════════
   VIDEO BG
   ══════════════════════════════════════════════════════════════════ */
.tema-vbg-iframe-wrap iframe {
    min-width: 100%;
    min-height: 100%;
}

/* ══════════════════════════════════════════════════════════════════
   RESET BOTTONI — evita stili del customizer sui bottoni interni
   ══════════════════════════════════════════════════════════════════ */
.tema-acc-header,
.tema-tab-btn,
.tema-ba-handle,
[class*="wp-block-tema-"] button:not(.wp-block-button__link):not(.wp-element-button) {
    all: revert;
    box-sizing: border-box;
}

/* ══════════════════════════════════════════════════════════════════
   HOVER (generati inline dal PHP per istanza)
   ══════════════════════════════════════════════════════════════════ */
[class*="tema-hover-"] {
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease;
}

/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE GRIDS
   ══════════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
    .tema-testimonials > div { grid-template-columns: repeat(2, 1fr) !important; }
    .tema-team > div { grid-template-columns: repeat(2, 1fr) !important; }
    .tema-logo-grid > div { grid-template-columns: repeat(3, 1fr) !important; }
    .tema-pricing > div { grid-template-columns: 1fr !important; }
    .tema-pricing > div > div { transform: none !important; }
}

@media (max-width: 768px) {
    .tema-counter-block > div,
    .tema-icon-boxes > div,
    .tema-testimonials > div,
    .tema-team > div { grid-template-columns: 1fr !important; }
    .tema-pricing > div { grid-template-columns: 1fr !important; }
    .tema-pricing > div > div { transform: none !important; }
    .tema-hero-block { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
}

@media (max-width: 480px) {
    .tema-icon-boxes > div > div { flex-direction: column !important; align-items: center !important; text-align: center !important; }
    .tema-tl-alternate > div { flex-direction: column !important; }
    .tema-tl-alternate > div > div { flex: none !important; width: 100% !important; padding-left: 1.5rem !important; padding-right: 0 !important; text-align: left !important; visibility: visible !important; }
    .tema-tl-alternate > div > div:nth-child(2) { order: -1 !important; }
}

/* ── Cover Slideshow ────────────────────────────────── */
.tema-cover-slideshow { user-select: none; }
.tema-cover-slideshow .cs-prev:hover,
.tema-cover-slideshow .cs-next:hover {
    background: rgba(255,255,255,0.35) !important;
}
.tema-cover-slideshow .cs-dot:hover { opacity: .85; }
/* Video sfondo: assicura cover completo */
.tema-cover-slideshow video {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; z-index: 0;
}
/* Iframe YouTube/Vimeo: tecnica zoom-out per coprire */
.tema-cover-slideshow .cs-slide > div iframe {
    pointer-events: none;
}

/* ── Copertina Slideshow: immagini multiple che ruotano ───── */
.tema-cover-slideshow .cs-bg-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    will-change: opacity;
}
.tema-cover-slideshow .cs-prev:hover,
.tema-cover-slideshow .cs-next:hover {
    background: rgba(255,255,255,0.35) !important;
}