/* _hero.css */

/* ==========================================================================
   Stiluri Mobile-First pentru secțiunea Hero
   ========================================================================== */

/* Containerul principal al secțiunii Hero */
.split-section-container {
    background-color: #000;
}

#above-the-fold {
    display: grid;
    min-height: 100vh;
    align-items: start;
    justify-items: center;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    padding-top: 71px; /* Adaugă spațiu pentru header-ul fix */
    padding-bottom: 20px;
    box-sizing: border-box;
    position: relative; /* Corect: Părintele este 'relative' */
}

/* Pentru iPhone 15/16 */
@media only screen and (min-width: 390px) and (max-width: 400px) {
    #above-the-fold {
        padding-top: 63px; /* 37px shipping bar + 26px înălțime */
    }
}

/* Containerul pentru imagine (poziționat absolut) */
.split-grid {
    position: absolute; /* Corect: Copilul este 'absolute' */
    bottom: 230px;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: hidden;
}

.grid-image-wrapper {
    width: 100%;
    height: 100%;
}

    .grid-image-wrapper img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center bottom;
    }

/* Containerul de text */
.hero-text-container {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
    z-index: 2; /* Asigură că textul este deasupra imaginii */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* Justify-content în loc de align-items pentru centrarea verticală în flex-column */
    width: 95%;
    max-width: 650px;
    border-radius: 12px;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.25);
    margin-top: 5px;
    gap: 12px; /* ===== MODIFICARE: Adaugă un spațiu fix și redus între elemente ===== */
    transform: scale(0.90) translateY(-10px) !important;
}

.hero-title-nowrap {
    width: 100%;
    color: #FFFFFF;
    font-family: 'Black Ops One', sans-serif;
    font-size: clamp(1.7rem, 0.5vw, 4rem);
    line-height: 1.3;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.7);
    margin: 0; /* ===== MODIFICARE: Resetează marginile pentru a folosi gap-ul containerului ===== */
    padding-top: 10px; /* Adaugă puțin spațiu în partea de sus a containerului */
}

.hero-subtitle {
    width: 100%;
    color: #F0F0F0;
    font-family: var(--font-corp);
    font-size: clamp(1.1rem, 2.5vw, 1.1rem);
    font-weight: 600;
    line-height: 1.4;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
    text-align: center;
    width: 85%; /* Mărit puțin pentru a se întinde mai bine */
    margin: 0; /* ===== MODIFICARE: Resetează marginile pentru a folosi gap-ul containerului ===== */
}

/* ===== REGULĂ NOUĂ: Resetează marginile secțiunii de recenzii când e în hero ===== */
.hero-text-container .social-proof-section {
    margin: 0;
}

/* ==========================================================================
   Stiluri pentru Beneficii (Icoană + Text) - Neschimbat
   ========================================================================== */
.hero-benefits-list {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 5px;
    width: 100%;
    max-width: 520px;
    text-align: center;
}

.benefit-line {
    display: flex;
    align-items: center;
    gap: 14px;
}

.icon-container {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

    .icon-container svg {
        width: 22px;
        height: 22px;
        display: block;
        fill: white;
    }

.text-container {
    font-size: 0.85rem;
    line-height: 1.4;
    color: #E0E0E0;
    text-align: left;
}

/* ==========================================================================
   Evidențiere Beneficiu Principal - Neschimbat
   ========================================================================== */
.benefit--highlight {
    background-color: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    padding: 4px;
    transform: scale(1.05);
    gap: 8px; /* NOU: Reduce spațiul de la 14px la 8px */
}

    .benefit--highlight .icon-container {
        margin-left: 2px; /* Împinge containerul iconului spre dreapta */
    }

        /* Mărește iconul din beneficiul evidențiat */
        .benefit--highlight .icon-container svg {
            width: 28px; /* Mărește lățimea iconului (de la 22px) */
            height: 28px; /* Mărește înălțimea iconului (de la 22px) */
        }



@media (min-width: 768px) {
    /* Textul hero redus pentru tablet */
    .hero-text-container .hero-title-nowrap {
        font-size: 1.35rem;
        line-height: 1.2;
    }

    .hero-text-container .hero-subtitle {
        font-size: 1rem;
        line-height: 1.3;
    }

    .hero-text-container .stat-number {
        font-size: 1.1rem;
    }

    .hero-text-container .stat-label,
    .hero-text-container .platform-badge {
        font-size: 0.8rem;
    }

    .hero-text-container .trust-platforms span {
        font-size: 0.7rem !important;
    }

    /* Poziționarea containerului imaginii pentru tablet */
    .split-grid {
        bottom: 200px;
    }
    .grid-image-wrapper img {

         object-position: center 20% !important; 
         object-position: center 30% !important; 
    }

}






@media (max-width: 430px) {

    /* Reducem titlul principal */
    .hero-text-container .hero-title-nowrap {
        font-size: 1.35rem; /* Original ~1.7rem */
        line-height: 1.2;
    }

    /* Reducem subtitlul */
    .hero-text-container .hero-subtitle {
        font-size: 1rem; /* Original 1.1rem */
        line-height: 1.3;
    }

    /* Reducem si elementele din sectiunea "social proof" */
    .hero-text-container .stat-number {
        font-size: 1.1rem;
    }

    .hero-text-container .stat-label,
    .hero-text-container .platform-badge {
        font-size: 0.8rem;
    }

    /* Aici suprascriem stilul pus direct in HTML ("Verificat pe:") */
    .hero-text-container .trust-platforms span {
        font-size: 0.7rem !important; /* Original 0.85rem. !important este necesar. */
    }

    .split-grid {
        bottom: 200px; /* Original era 230px, l-am coborât cu 10px */
    }


}




@media (max-width: 414px) {

    /* Reducem titlul principal */
    .hero-text-container .hero-title-nowrap {
        font-size: 1.35rem; /* Original ~1.7rem */
        line-height: 1.2;
    }

    /* Reducem subtitlul */
    .hero-text-container .hero-subtitle {
        font-size: 1rem; /* Original 1.1rem */
        line-height: 1.3;
    }

    /* Reducem si elementele din sectiunea "social proof" */
    .hero-text-container .stat-number {
        font-size: 1.1rem;
    }

    .hero-text-container .stat-label,
    .hero-text-container .platform-badge {
        font-size: 0.8rem;
    }

    /* Aici suprascriem stilul pus direct in HTML ("Verificat pe:") */
    .hero-text-container .trust-platforms span {
        font-size: 0.7rem !important; /* Original 0.85rem. !important este necesar. */
    }

    .split-grid {
        bottom: 210px; /* Original era 230px, l-am coborât cu 10px */
    }
}


@media only screen and (min-width: 390px) and (max-width: 400px) {
    .hero-text-container {
        transform: scale(0.9) translateY(-23px);
        position: relative !important;
        z-index: 2 !important;
    }

    .split-grid {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        z-index: 0 !important;
    }

    .grid-image-wrapper {
        width: 100vw !important;
        height: 100vh !important;
        overflow: hidden !important;
    }

        .grid-image-wrapper img {
            width: 100vw !important;
            height: 100vh !important; /* ✅ MODIFICAT: Înălțime egală cu ecranul */
            object-fit: cover !important;
            /* ✅ MODIFICAT: Aici controlezi poziția verticală */
            object-position: center 88% !important;
            /* ❌ ELIMINAT: Nu mai este necesar */
            /* transform: translateY(-10vh) !important; */

            margin: 0 !important;
            padding: 0 !important;
            display: block !important;
        }
}





/* ===== AJUSTARE FONT HERO PENTRU ECRANE MICI (reducere totala ~32%) ===== */
@media (max-width: 393px) {

    /* Reducem titlul principal */
    .hero-text-container .hero-title-nowrap {
        font-size: 1.35rem; /* Original ~1.7rem */
        line-height: 1.2;
    }

    /* Reducem subtitlul */
    .hero-text-container .hero-subtitle {
        font-size: 0.85rem; /* Original 1.1rem */
        line-height: 1.3;
    }

    /* Reducem si elementele din sectiunea "social proof" */
    .hero-text-container .stat-number {
        font-size: 1.1rem;
    }

    .hero-text-container .stat-label,
    .hero-text-container .platform-badge {
        font-size: 0.8rem;
    }

    /* Aici suprascriem stilul pus direct in HTML ("Verificat pe:") */
    .hero-text-container .trust-platforms span {
        font-size: 0.7rem !important; /* Original 0.85rem. !important este necesar. */
    }

    .split-grid {
        bottom: 220px; /* Original era 230px, l-am coborât cu 10px */
    }
}


@media (max-width: 375px) {

    /* Reducem titlul principal */
    .hero-text-container .hero-title-nowrap {
        font-size: 1.35rem; /* Original ~1.7rem */
        line-height: 1.2;
    }

    /* Reducem subtitlul */
    .hero-text-container .hero-subtitle {
        font-size: 0.85rem; /* Original 1.1rem */
        line-height: 1.3;
    }

    /* Reducem si elementele din sectiunea "social proof" */
    .hero-text-container .stat-number {
        font-size: 1.1rem;
    }

    .hero-text-container .stat-label,
    .hero-text-container .platform-badge {
        font-size: 0.8rem;
    }

    /* Aici suprascriem stilul pus direct in HTML ("Verificat pe:") */
    .hero-text-container .trust-platforms span {
        font-size: 0.7rem !important; /* Original 0.85rem. !important este necesar. */
    }

    .split-grid {
        bottom: 210px; /* Original era 230px, l-am coborât cu 10px */
    }
}



/* ===== AJUSTARE FONT HERO PENTRU ECRANE MICI (reducere totala ~32%) ===== */
@media (max-width: 360px) {

    /* Reducem titlul principal */
    .hero-text-container .hero-title-nowrap {
        font-size: 1.15rem; /* Original ~1.7rem */
        line-height: 1.2;
    }

    /* Reducem subtitlul */
    .hero-text-container .hero-subtitle {
        font-size: 0.75rem; /* Original 1.1rem */
        line-height: 1.3;
    }

    /* Reducem si elementele din sectiunea "social proof" */
    .hero-text-container .stat-number {
        font-size: 1rem;
    }

    .hero-text-container .stat-label,
    .hero-text-container .platform-badge {
        font-size: 0.7rem;
    }

    /* Aici suprascriem stilul pus direct in HTML ("Verificat pe:") */
    .hero-text-container .trust-platforms span {
        font-size: 0.6rem !important; /* Original 0.85rem. !important este necesar. */
    }

    .split-grid {
        bottom: 220px; /* Original era 230px, l-am coborât cu 10px */
    }
}
/* ===== CAZ SPECIAL: SAMSUNG GALAXY S25 ULTRA (CORRECTAT + DEBUG COLORS) ===== */
/* ===== CAZ SPECIAL: SAMSUNG GALAXY S25 ULTRA (AJUSTAT) ===== */
@media only screen and (min-width: 380px) and (max-width: 390px) {

    #above-the-fold {
        padding-top: 54px !important;
    }

    .hero-text-container {
        /* * MODIFICAREA 1: Containerul de text a fost coborât cu 25px.
         * Am schimbat `translateY(-25px)` în `translateY(0px)`.
         * Valoarea de -25px îl urca; 0px îl aduce înapoi la poziția de bază,
         * ceea ce reprezintă o coborâre de 25px față de starea anterioară.
        */
        transform: scale(0.82) translateY(28px) !important;
        margin-top: -20px !important;
        gap: 8px !important;
        max-width: 580px !important;
    }

    /* * MODIFICAREA 2: Conținutul imaginii este acum poziționat mai sus.
     * Am adăugat această regulă nouă pentru imaginea din hero.
     * O valoare procentuală mai mică (ex: 40%) pentru `object-position` 
     * "împinge" imaginea în sus în cadrul ei, făcând vizibilă o parte 
     * mai de jos a imaginii. Acest lucru face ca focusul vizual 
     * să pară mai ridicat pe ecran. Poți ajusta valoarea de 40% dacă dorești.
    */
    .grid-image-wrapper img {
        object-position: center 151% !important;
    }

    .split-grid {
        bottom: 160px !important;
        transform: translateY(30px) !important;
    }

    /* Am eliminat culorile de debug (black) de pe titlu și subtitlu */
    .hero-text-container .hero-title-nowrap {
        font-size: 1.15rem !important;
    }

    .hero-text-container .hero-subtitle {
        font-size: 0.8rem !important;
    }
}

/* Blocare download/save pentru imagini hero */
.grid-image-wrapper img {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
    pointer-events: none;
    /* Păstrează proprietățile existente */
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center bottom;
}

/* Overlay transparent pentru protecție suplimentară */
.grid-image-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

    .grid-image-wrapper::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: transparent;
        z-index: 1;
        pointer-events: all;
    }