/* ============================================================
   SISAS TECHTRONIC VETRINA 1.7.0
   Layout visuale a piena immagine + pagina automatica pulita.
   Le variabili possono essere sovrascritte dal CSS del tema.
   ============================================================ */

.stv-vetrina{
    --stv-navy:var(--tt-navy,#071f33);
    --stv-orange:var(--tt-orange,#ff7a18);

    /* Dimensioni facilmente personalizzabili dal tema */
    --stv-label-size:.72rem;
    --stv-title-size:clamp(.90rem,1.05vw,1.02rem);
    --stv-text-size:clamp(.70rem,.78vw,.78rem);
    --stv-cta-size:.70rem;

    position:relative;
    width:100%;
    min-width:0;
    box-sizing:border-box;
    font-family:inherit;
}

.stv-vetrina,
.stv-vetrina *{
    box-sizing:border-box;
}

.stv-label{
    margin:0 0 10px;
    color:var(--stv-orange);
    font-family:inherit;
    font-size:var(--stv-label-size);
    font-weight:700;
    line-height:1.2;
    letter-spacing:.13em;
    text-transform:uppercase;
}

.stv-stage{
    position:relative;
    width:100%;
    aspect-ratio:16/9;
    overflow:hidden;
    background:#fff;
    border:1px solid rgba(255,255,255,.16);
    border-radius:14px;
}

.stv-slide{
    position:absolute;
    inset:0;
    display:block;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(3px);
    transition:opacity .28s ease,transform .28s ease,visibility .28s ease;
}

.stv-slide.is-active{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:none;
}

.stv-card-link{
    position:absolute;
    inset:0;
    display:block;
    color:inherit;
    text-decoration:none;
}

.stv-media{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    height:100%;
    padding:0;
    overflow:hidden;
    background:#fff;
}

.stv-image{
    display:block;
    width:100%;
    height:100%;
    max-width:none;
    max-height:none;
    object-fit:cover;
    object-position:center center;
    transition:transform .25s ease;
}

.stv-fit-contain .stv-image{object-fit:contain}
.stv-fit-cover .stv-image{object-fit:cover}

/* Punto dell'immagine da preservare quando cover ritaglia i bordi. */
.stv-pos-center .stv-image{object-position:center center}
.stv-pos-top .stv-image{object-position:center top}
.stv-pos-bottom .stv-image{object-position:center bottom}
.stv-pos-left .stv-image{object-position:left center}
.stv-pos-right .stv-image{object-position:right center}

/* Ombreggiatura soltanto dove serve per leggere i testi. */
.stv-slide:has(.stv-content)::after{
    content:"";
    position:absolute;
    z-index:1;
    left:0;
    right:0;
    bottom:0;
    height:35%;
    pointer-events:none;
    background:linear-gradient(
        to top,
        rgba(3,16,27,.78) 0%,
        rgba(3,16,27,.42) 55%,
        rgba(3,16,27,0) 100%
    );
}

.stv-content{
    position:absolute;
    z-index:2;
    left:18px;
    right:18px;
    bottom:15px;
    min-width:0;
    padding:0 82px 0 0;
    color:#fff;
    background:transparent;
    font-family:inherit;
}

.stv-subtitle{
    margin:0 0 3px;
    color:var(--stv-orange);
    font-family:inherit;
    font-size:.66rem;
    font-weight:700;
    line-height:1.2;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.stv-title{
    margin:0;
    color:#fff;
    font-family:inherit;
    font-size:var(--stv-title-size);
    font-weight:650;
    line-height:1.2;
    letter-spacing:-.01em;
    text-shadow:0 1px 2px rgba(0,0,0,.22);
}

.stv-text{
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    overflow:hidden;
    max-width:82%;
    margin:4px 0 0;
    color:rgba(255,255,255,.92);
    font-family:inherit;
    font-size:var(--stv-text-size);
    font-weight:400;
    line-height:1.35;
    text-shadow:0 1px 2px rgba(0,0,0,.22);
}

/* CTA discreta, sulla destra e senza elementi grafici aggiuntivi. */
.stv-cta{
    position:absolute;
    right:0;
    bottom:1px;
    display:inline-flex;
    align-items:center;
    gap:5px;
    margin:0;
    padding:0;
    border:0;
    background:none;
    color:#fff;
    font-family:inherit;
    font-size:var(--stv-cta-size);
    font-weight:600;
    line-height:1.2;
    white-space:nowrap;
    text-decoration:none;
}

.stv-cta span{
    color:var(--stv-orange);
    font-family:inherit;
    font-size:1em;
    font-weight:600;
}

.stv-slide:not(:has(.stv-content))::after{
    display:none;
}

.stv-dots{
    display:flex;
    justify-content:flex-end;
    gap:7px;
    margin-top:9px;
}

.stv-dot{
    width:8px;
    height:8px;
    padding:0;
    border:0;
    border-radius:99px;
    background:rgba(255,255,255,.35);
    cursor:pointer;
    transition:width .2s ease,background-color .2s ease;
}

.stv-dot.is-active{
    width:22px;
    background:var(--stv-orange);
}

.stv-empty{
    padding:18px;
    border:1px dashed #c6d0d8;
    border-radius:10px;
    background:#fff;
    color:#647480;
    font-family:inherit;
    font-size:.86rem;
}

/* ============================================================
   PAGINA DI APPROFONDIMENTO GENERATA
   Il titolo H1 è quello nativo del template WordPress.
   ============================================================ */

.stv-detail-page{
    width:100%;
    margin:0;
    padding:8px 0 56px;
    background:#fff;
    font-family:inherit;
}

.stv-detail-inner{
    width:100%;
    margin:0;
}

.stv-detail-hero{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    width:100%;
    max-width:900px;
    max-height:520px;
    margin:0 0 30px;
    padding:0;
    overflow:hidden;
    background:transparent;
    border-radius:0;
}

.stv-detail-image{
    display:block;
    width:auto;
    height:auto;
    max-width:100%;
    max-height:500px;
    object-fit:contain;
    object-position:left center;
}

.stv-detail-content{
    width:100%;
    max-width:900px;
    color:#253746;
    font-family:inherit;
    font-size:.98rem;
    font-weight:400;
    line-height:1.65;
}

.stv-detail-content p{
    margin:0 0 16px;
}

.stv-detail-content h2{
    margin:32px 0 12px;
    color:var(--tt-navy,#071f33);
    font-family:inherit;
    font-size:1.38rem;
    font-weight:650;
    line-height:1.22;
}

.stv-detail-content h3{
    margin:25px 0 10px;
    color:var(--tt-navy,#071f33);
    font-family:inherit;
    font-size:1.12rem;
    font-weight:650;
    line-height:1.25;
}

.stv-detail-content ul,
.stv-detail-content ol{
    margin:0 0 20px;
    padding-left:1.25rem;
}

.stv-detail-content li{
    margin-bottom:6px;
}

@media(hover:hover) and (pointer:fine){
    .stv-stage{
        transition:transform .20s ease,box-shadow .20s ease,border-color .20s ease;
    }

    .stv-vetrina:hover .stv-stage{
        transform:translateY(-2px);
        box-shadow:0 12px 28px rgba(7,31,51,.13);
        border-color:rgba(255,122,24,.30);
    }

    .stv-vetrina:hover .stv-image{
        transform:scale(1.012);
    }

    .stv-card-link:focus-visible{
        outline:3px solid var(--stv-orange);
        outline-offset:-3px;
    }
}

@media(max-width:700px){
    .stv-vetrina{
        --stv-title-size:.94rem;
        --stv-text-size:.73rem;
        --stv-cta-size:.72rem;
    }

    .stv-stage{
        aspect-ratio:4/3;
        touch-action:pan-y;
    }

    .stv-content{
        left:14px;
        right:14px;
        bottom:13px;
        padding-right:78px;
    }

    .stv-text{
        max-width:100%;
        -webkit-line-clamp:2;
    }

    .stv-slide:has(.stv-content)::after{
        height:40%;
    }

    .stv-detail-page{
        padding-bottom:42px;
    }

    .stv-detail-hero{
        margin-bottom:22px;
    }

    .stv-detail-content{
        font-size:.94rem;
        line-height:1.6;
    }
}

@media(prefers-reduced-motion:reduce){
    .stv-slide,
    .stv-image,
    .stv-stage,
    .stv-dot{
        transition:none!important;
        transform:none!important;
    }
}