/**
 * Bloc Custom Suite - Bloc Card Orizzontali (App Style)
 * Foglio di stile per frontend ed editor Elementor
 */

/* ==========================================================================
   Contenitore Scroller & Base
   ========================================================================== */

.bloc-horizontal-cards-wrapper {
    position: relative;
    width: 100%;
    user-select: none;
    font-family: 'Geist-600', 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    box-sizing: border-box;
}

/* Compatibilità specifica con i wrapper dell'editor di Elementor */
.elementor-widget-bloc_horizontal_cards,
.elementor-widget-bloc_horizontal_cards .elementor-widget-container {
    width: 100% !important;
    max-width: 100% !important;
    position: relative;
    box-sizing: border-box;
}

/* Traccia di Scorrimento Orizzontale */
.bloc-horizontal-cards-wrapper .bloc-cards-scroll-track {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
    cursor: grab;
    outline: none;
    box-sizing: border-box;
    width: 100%;
}

.bloc-horizontal-cards-wrapper .bloc-cards-scroll-track:active {
    cursor: grabbing;
}

.bloc-horizontal-cards-wrapper .bloc-cards-scroll-track::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

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

.bloc-horizontal-cards-wrapper .bloc-card-item {
    flex: 0 0 auto !important;
    position: relative !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    text-decoration: none !important;
    isolation: isolate;
    box-shadow: none !important;
    transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.35s ease;
}

/* Layer Immagine di Sfondo (Garantisce altezza e visibilità 100%) */
.bloc-horizontal-cards-wrapper .bloc-card-bg-layer {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    z-index: 1 !important;
    transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
    pointer-events: none;
}

/* Effetto Hover Zoom */
.bloc-horizontal-cards-wrapper.has-hover-zoom .bloc-card-item:hover .bloc-card-bg-layer {
    transform: scale(1.06);
}

.bloc-horizontal-cards-wrapper.has-hover-zoom .bloc-card-item:hover {
    transform: translateY(-4px);
}

/* Layer Overlay Gradiente per massima leggibilità */
.bloc-horizontal-cards-wrapper .bloc-card-overlay {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.88) 0%,
        rgba(0, 0, 0, 0.45) 45%,
        rgba(0, 0, 0, 0.05) 80%,
        transparent 100%
    ) !important;
    z-index: 2 !important;
    pointer-events: none !important;
}

/* ==========================================================================
   Badge / Tag Opzionale
   ========================================================================== */

.bloc-horizontal-cards-wrapper .bloc-card-badge {
    position: absolute !important;
    top: 18px !important;
    left: 18px !important;
    z-index: 3 !important;
    padding: 6px 14px !important;
    border-radius: 20px !important;
    font-family: 'Geist-Mono-600', 'Geist Mono', 'Geist-600', 'Geist', monospace, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    line-height: 1;
    pointer-events: none;
    box-shadow: none !important;
}

/* ==========================================================================
   Contenuto Testo Card (Titolo & Sottotitolo)
   ========================================================================== */

.bloc-horizontal-cards-wrapper .bloc-card-content {
    position: relative !important;
    z-index: 3 !important;
    padding: 24px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    box-sizing: border-box !important;
    pointer-events: none;
}

.bloc-horizontal-cards-wrapper .bloc-card-subtitle {
    font-family: 'Geist-Mono-600', 'Geist Mono', 'Geist-600', 'Geist', monospace, sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    line-height: 1.2;
    display: block;
}

.bloc-horizontal-cards-wrapper .bloc-card-title {
    margin: 0;
    padding: 0;
    font-family: 'Geist-600', 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -0.5px;
    line-height: 1.1;
    text-transform: uppercase;
    display: block;
}