/**
 * Bloc Fest Pro - Bloc Card Impilate (Stacking Cards)
 * Foglio di stile per frontend ed editor Elementor
 * Versione: 4.26.0
 */

/* ==========================================================================
   Contenitore Principale & Wrapper
   ========================================================================== */

.bloc-stacking-cards-wrapper {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    font-family: 'Geist-600', 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    isolation: isolate;
    overflow: visible !important;
}

/* Compatibilità con i contenitori Elementor e Divi */
.elementor-widget-bloc_stacking_cards,
.elementor-widget-bloc_stacking_cards .elementor-widget-container {
    width: 100% !important;
    max-width: 100% !important;
    position: relative;
    box-sizing: border-box;
    overflow: visible !important;
}

/* Sblocco Overflow Antenati per garantire il funzionamento universale di position: sticky */
html:has(.bloc-stacking-cards-wrapper),
body:has(.bloc-stacking-cards-wrapper) {
    overflow-x: clip !important;
}

#page-container:has(.bloc-stacking-cards-wrapper),
#et-main-area:has(.bloc-stacking-cards-wrapper),
#main-content:has(.bloc-stacking-cards-wrapper),
.elementor-section:has(.bloc-stacking-cards-wrapper),
.elementor-column:has(.bloc-stacking-cards-wrapper),
.elementor-widget-wrap:has(.bloc-stacking-cards-wrapper),
.e-con:has(.bloc-stacking-cards-wrapper),
.e-con-inner:has(.bloc-stacking-cards-wrapper) {
    overflow: visible !important;
}

/* Lista / Sequenza Card */
.bloc-stacking-cards-list {
    display: block !important;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    box-sizing: border-box;
    overflow: visible !important;
}

/* ==========================================================================
   Singola Card Impilata (Sticky Item)
   ========================================================================== */

.bloc-stacking-card-item {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: var(--bloc-sticky-top, 15px) !important;
    width: 100% !important;
    max-width: var(--bloc-card-max-width, 100%);
    margin-left: auto;
    margin-right: auto;
    min-height: var(--bloc-card-min-height, 80vh);
    margin-bottom: var(--bloc-card-gap, 40px);
    box-sizing: border-box !important;
    border-radius: var(--bloc-card-radius, 24px) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: var(--bloc-content-v-align, flex-end) !important;
    text-decoration: none !important;
    transform-origin: center top;
    will-change: transform, filter;
    transition: box-shadow 0.35s ease;
    box-shadow: none !important;
}

/* L'ultima card non ha bisogno di margine inferiore aggiuntivo */
.bloc-stacking-card-item:last-child {
    margin-bottom: 0 !important;
}

/* Link Wrapper a tutta superficie */
.bloc-stacking-card-item.has-link {
    cursor: pointer;
}

/* ==========================================================================
   Layer della Card (Sfondo, Gradienti, Dimming)
   ========================================================================== */

/* Strato 1: Immagine di Sfondo */
.bloc-stacking-card-bg {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-size: var(--bloc-bg-size, cover) !important;
    background-position: var(--bloc-bg-position, center center) !important;
    background-repeat: var(--bloc-bg-repeat, no-repeat) !important;
    z-index: 1 !important;
    transition: transform var(--bloc-hover-zoom-duration, 0.6s) cubic-bezier(0.2, 0.8, 0.2, 1);
    pointer-events: none;
}

/* Effetto Hover Zoom opzionale */
.bloc-stacking-cards-wrapper.has-hover-zoom .bloc-stacking-card-item:hover .bloc-stacking-card-bg {
    transform: scale(var(--bloc-hover-zoom-scale, 1.04));
}

/* Strato 2: Overlay Gradiente Base (Garantisce Leggibilità Dark Brutalist) */
.bloc-stacking-card-overlay {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.92) 0%,
        rgba(0, 0, 0, 0.55) 45%,
        rgba(0, 0, 0, 0.15) 75%,
        transparent 100%
    ) !important;
    z-index: 2 !important;
    pointer-events: none !important;
}

/* Strato 3: Dimming / Oscuramento Dinamico durante lo Stacking */
.bloc-stacking-card-dim {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: #000000;
    opacity: 0;
    z-index: 3 !important;
    pointer-events: none !important;
    transition: opacity 0.05s linear;
}

/* ==========================================================================
   Badge / Tag Frosted Glass con Posizionamento Flessibile
   ========================================================================== */

.bloc-stacking-card-badge {
    position: absolute !important;
    z-index: 4 !important;
    padding: var(--bloc-badge-padding, 7px 16px) !important;
    border-radius: var(--bloc-badge-radius, 20px) !important;
    background: rgba(255, 255, 255, 0.12) !important;
    backdrop-filter: blur(var(--bloc-badge-blur, 8px)) !important;
    -webkit-backdrop-filter: blur(var(--bloc-badge-blur, 8px)) !important;
    border: var(--bloc-badge-border-width, 1px) solid rgba(255, 255, 255, 0.25) !important;
    color: #FFFFFF;
    font-family: 'Geist-Mono-600', 'Geist Mono', monospace, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    line-height: 1;
    pointer-events: none;
    box-shadow: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Posizioni assolute configurabili */
.bloc-stacking-cards-wrapper.badge-pos-top-left .bloc-stacking-card-badge {
    top: var(--bloc-badge-offset-y, 24px) !important;
    left: var(--bloc-badge-offset-x, 24px) !important;
    right: auto !important;
    bottom: auto !important;
}

.bloc-stacking-cards-wrapper.badge-pos-top-right .bloc-stacking-card-badge {
    top: var(--bloc-badge-offset-y, 24px) !important;
    right: var(--bloc-badge-offset-x, 24px) !important;
    left: auto !important;
    bottom: auto !important;
}

.bloc-stacking-cards-wrapper.badge-pos-bottom-left .bloc-stacking-card-badge {
    bottom: var(--bloc-badge-offset-y, 24px) !important;
    left: var(--bloc-badge-offset-x, 24px) !important;
    top: auto !important;
    right: auto !important;
}

.bloc-stacking-cards-wrapper.badge-pos-bottom-right .bloc-stacking-card-badge {
    bottom: var(--bloc-badge-offset-y, 24px) !important;
    right: var(--bloc-badge-offset-x, 24px) !important;
    top: auto !important;
    left: auto !important;
}

/* Badge Inline (Posizionato dentro al blocco testi sopra al titolo/sottotitolo) */
.bloc-stacking-cards-wrapper.badge-pos-inline .bloc-stacking-card-badge {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    margin-bottom: var(--bloc-badge-margin-bottom, 12px);
    align-self: var(--bloc-badge-self-align, flex-start);
}

/* ==========================================================================
   Contenuto Testuale (Titolo, Sottotitolo, Descrizione & CTA)
   ========================================================================== */

.bloc-stacking-card-content {
    position: relative !important;
    z-index: 4 !important;
    padding: var(--bloc-card-padding, clamp(24px, 4vw, 48px)) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: var(--bloc-content-gap, 8px) !important;
    box-sizing: border-box !important;
    pointer-events: none;
    text-align: var(--bloc-content-text-align, left) !important;
    align-items: var(--bloc-content-items-align, flex-start) !important;
}

/* Configurazione Ordine Elementi (Flex Order Dinamico con CSS Variables) */
.bloc-stacking-card-content .bloc-stacking-card-badge {
    order: var(--bloc-order-badge, 0) !important;
}

.bloc-stacking-card-header {
    order: var(--bloc-order-sub, 1) !important;
}

.bloc-stacking-card-title {
    order: var(--bloc-order-title, 2) !important;
}

.bloc-stacking-card-desc {
    order: var(--bloc-order-desc, 3) !important;
}

.bloc-stacking-card-footer {
    order: var(--bloc-order-cta, 4) !important;
}

/* Header Riga Superiore Contenuto */
.bloc-stacking-card-header {
    display: flex;
    align-items: center;
    justify-content: var(--bloc-header-justify, flex-start);
    gap: 16px;
    width: 100%;
    margin-bottom: var(--bloc-subtitle-margin-bottom, 0px);
}

.bloc-stacking-card-subtitle {
    font-family: 'Geist-Mono-600', 'Geist Mono', 'Geist-600', 'Geist', monospace, sans-serif;
    font-size: clamp(13px, 1.5vw, 16px);
    font-weight: 600;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    line-height: 1.2;
    color: rgba(255, 255, 255, 0.85);
    display: inline-block;
}

.bloc-stacking-card-title {
    margin: 0;
    padding: 0;
    margin-bottom: var(--bloc-title-margin-bottom, 0px);
    font-family: 'Geist-600', 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: clamp(32px, 5.5vw, 64px);
    font-weight: 600;
    letter-spacing: -0.5px;
    line-height: 1.02;
    text-transform: uppercase;
    color: #FFFFFF;
    display: block;
    width: 100%;
}

/* Descrizione o Dettagli Opzionali */
.bloc-stacking-card-desc {
    margin: 0;
    margin-bottom: var(--bloc-desc-margin-bottom, 0px);
    font-family: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.75);
    max-width: var(--bloc-desc-max-width, 680px);
    width: 100%;
}

/* Barra Azione / CTA Inferiore */
.bloc-stacking-card-footer {
    margin-top: var(--bloc-cta-margin-top, 12px);
    display: flex;
    align-items: center;
    justify-content: var(--bloc-cta-justify, flex-start);
    width: 100%;
}

.bloc-stacking-card-cta {
    display: inline-flex;
    align-items: center;
    gap: var(--bloc-cta-arrow-gap, 8px);
    padding: var(--bloc-cta-padding, 8px 18px);
    border-radius: var(--bloc-cta-radius, 20px);
    background: #FFFFFF;
    color: #000000;
    font-family: 'Geist-600', 'Geist', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    text-decoration: none;
    transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
    box-sizing: border-box;
}

.bloc-stacking-card-item:hover .bloc-stacking-card-cta {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(255, 255, 255, 0.3);
}

.bloc-stacking-card-cta-arrow {
    display: inline-block;
    transition: transform 0.25s ease;
}

.bloc-stacking-card-item:hover .bloc-stacking-card-cta-arrow {
    transform: translateX(4px);
}

/* ==========================================================================
   Ottimizzazioni Responsive (Tablet & Mobile)
   ========================================================================== */

@media (max-width: 767px) {
    .bloc-stacking-card-item {
        border-radius: var(--bloc-card-radius-mobile, var(--bloc-card-radius, 18px)) !important;
        margin-bottom: var(--bloc-card-gap, var(--bloc-card-gap-mobile, 45px)) !important;
        min-height: var(--bloc-card-min-height, 65vh) !important;
    }
    
    .bloc-stacking-card-content {
        padding: var(--bloc-card-padding, clamp(18px, 4vw, 32px)) !important;
    }
}