/* =============================================================================
   PRIMA PAGINA — sectiunea hero
   ============================================================================= */

/* Inaltimea headerului (bara de sus + randul cu logo). Hero-ul incepe SUB el:
   headerul e sticky, deci sta in flux si nu acopera continutul. */
:root { --bt-header-h: 146px; }

.bt-hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: calc(100vh - var(--bt-header-h));
    padding: 64px 0 72px;
    overflow: hidden;
    /* fundalul de rezerva, cand nu exista nicio imagine */
    background: linear-gradient(135deg, #0d2818, #14532d 45%, #0f766e);
    isolation: isolate;
}

/* ---------- Fundalul care se schimba ---------- */
.bt-hero-bg { position: absolute; inset: 0; z-index: -2; }

.bt-hero-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transform: scale(1.04);
    will-change: opacity, transform;
}
/* O singura imagine: fara rotatie, doar afisata */
.bt-hero-slide.is-static { opacity: 1; transform: none; }
/* Prima imagine e vizibila si inainte sa porneasca animatia, ca sa nu apara
   un cadru gol la incarcare */
.bt-hero-slide:first-child { opacity: 1; }

.bt-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(0, 0, 0, .30), rgba(0, 0, 0, .72));
}

/* ---------- Continut ---------- */
.bt-hero-inner {
    position: relative;
    width: 100%;
    color: #fff;
}

.bt-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 26px;
    padding: 11px 20px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .22);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    color: #fff;
    font-size: 14px;
    font-weight: 500;
}
.bt-hero-badge i { color: #ffb066; }

.bt-hero-title {
    margin: 0;
    max-width: 20ch;
    font-size: clamp(38px, 5.4vw, 70px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -.02em;
    color: #fff;
    text-shadow: 0 2px 24px rgba(0, 0, 0, .28);
}
.bt-hero-accent { color: #ff9a3c; }

.bt-hero-subtitle {
    max-width: 62ch;
    margin: 22px 0 0;
    font-size: clamp(16px, 1.4vw, 20px);
    line-height: 1.6;
    color: rgba(255, 255, 255, .84);
}

.bt-hero .bt-search {
    max-width: 1080px;
    margin-top: 40px;
}

/* ---------- Responsive ---------- */
@media (max-width: 992px) {
    :root { --bt-header-h: 122px; } /* bara de sus 48 + randul principal 74 */
    .bt-hero { padding: 48px 0 56px; }
    .bt-hero-title { max-width: none; }
}
@media (max-width: 600px) {
    .bt-hero { min-height: 0; padding: 36px 0 44px; }
    .bt-hero-badge { font-size: 13px; padding: 9px 16px; margin-bottom: 20px; }
    .bt-hero-subtitle { margin-top: 16px; }
    .bt-hero .bt-search { margin-top: 28px; }
}

/* Cine a cerut mai putina miscare primeste doar prima imagine, fixa. */
@media (prefers-reduced-motion: reduce) {
    .bt-hero-slide { animation: none !important; transform: none; }
    .bt-hero-slide:first-child { opacity: 1; }
    .bt-hero-slide:not(:first-child) { opacity: 0; }
}

/* =============================================================================
   ULTIMELE ACTIVITATI + URMATOARELE EVENIMENTE

   Doua piste derulabile, pe acelasi tipar ca `.home-categories-grid` din
   public.css: flex fara infasurare, `scroll-snap`, si o masca laterala care
   stinge paddingul in care ar aparea jumatate din cardul urmator.

   Latimea unui card e cea de la cautare — `minmax(260px, 1fr)` acolo, deci
   aici 280px fix: pista nu se intinde, cardurile raman de aceeasi marime
   indiferent cate sunt.
   ========================================================================== */

.home-slider-track {
    display: flex;
    flex-wrap: nowrap;
    gap: 24px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    /* Umbra cardului se desenează in paddingul de jos: `overflow-x: auto` face
       si `overflow-y` sa taie, iar umbrele nu intra in zona derulabila — ce
       iese din caseta de padding dispare. Cardul are `0 10px 28px` in repaus
       (38px sub el) si `0 18px 40px` la trecerea cu mausul (58px).

       Paddingul vertical e scris SEPARAT de cel orizontal dinadins: cel
       orizontal depinde de `--track-bleed`, iar daca variabila nu se rezolva,
       o scurtatura `padding` cu ea inauntru devine invalida CU TOTUL si cade
       la zero — adica exact umbra taiata. Asa, verticalul nu depinde de nimic.
       Variabila are si o valoare de rezerva, pentru acelasi motiv. */
    padding-block: 24px 60px;
    padding-inline: var(--track-bleed, 24px);
    margin-block: -24px 0;
    margin-inline: calc(var(--track-bleed, 24px) * -1);
    scroll-padding-inline: var(--track-bleed, 24px);
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* Cat timp incap, stau centrate; `safe` fereste de capcana containerului
       centrat care porneste derulat la mijloc cand depaseste latimea. */
    justify-content: safe center;

    /* MUCHIA LATERALA
       Pista taie tot ce iese din caseta ei de padding. Paddingul lateral e de
       24px si nu poate fi mai mare: el e pus inapoi exact cat se trage pista in
       afara containerului, iar mai mult ar impinge-o in afara ecranului si ar
       aparea derulare orizontala pe toata pagina.

       Umbra cardului are insa 28px de difuzie, deci umbra primului si a
       ultimului card e taiata cu cativa pixeli, drept. In timpul derularii,
       cardurile care intra in zona de padding sunt si ele taiate la fel.

       Masca de mai jos stinge DOAR ultimii 12px, cat sa dispara muchia. Prima
       varianta estompa pe toti cei 24px de padding si se vedea ca un val alb
       peste card — de aceea fusese scoasa. */
    --edge-fade: 12px;
    -webkit-mask-image: linear-gradient(to right,
        transparent 0, #000 var(--edge-fade),
        #000 calc(100% - var(--edge-fade)), transparent 100%);
    mask-image: linear-gradient(to right,
        transparent 0, #000 var(--edge-fade),
        #000 calc(100% - var(--edge-fade)), transparent 100%);
}
.home-slider-track::-webkit-scrollbar { display: none; }

.home-slider-item {
    /* Exact patru pe un ecran mare, calculate din container — ca la pista de
       categorii. Cu o latime fixa de 280px ieseau 1192px intr-un container de
       1152, deci al patrulea card era taiat la margine.
       Rezultatul (~270px) e in acelasi interval ca la cautare, unde grila e
       `minmax(260px, 1fr)`. */
    flex: 0 0 calc((100% - 3 * 24px) / 4);
    scroll-snap-align: start;
    display: flex;
}
/* Cardul umple elementul de pista, ca toate sa aiba aceeasi inaltime. */
.home-slider-item > * { width: 100%; }

/* Cutiile de eveniment n-au imagine, deci textul are nevoie de latime: trei pe
   un ecran mare, nu patru. Latimea e calculata din container, ca la categorii,
   deci se potrivesc exact trei fara rest. */
.home-slider--wide .home-slider-item {
    flex: 0 0 calc((100% - 2 * 24px) / 3);
}
/* Legatura catre lista intreaga: text in dreapta, deasupra pistei. Era un
   buton sub lista, dar `.home-cta-button` e gandit pentru carduri si se
   intindea pe toata latimea. */
.home-slider-link {
    display: flex;
    justify-content: flex-end;
    margin: 0 0 14px;
}
.home-slider-link a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Manrope', var(--font-body);
    font-size: 15px;
    font-weight: 700;
    color: #00991a;
    text-decoration: none;
}
.home-slider-link a:hover { text-decoration: underline; }
/* Sageata se duce putin la dreapta la trecerea cu mausul. */
.home-slider-link a span {
    transition: transform .18s ease;
}
.home-slider-link a:hover span { transform: translateX(4px); }

/* ---------------------------------------------------------------- eveniment */

.home-event-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e8eef0;
    border-radius: 18px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 10px 30px rgba(22, 37, 43, .06);
    transition: transform .18s ease, box-shadow .18s ease;
}
.home-event-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(22, 37, 43, .12);
}

.home-event-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 18px 20px;
    flex: 1;
}

.home-event-when,
.home-event-where {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .8125rem;
    color: #667085;
}
.home-event-when i,
.home-event-where i { font-size: .75rem; }

.home-event-title {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 700;
    color: #16252b;
    /* Cel mult doua randuri, ca titlurile lungi sa nu impinga cardul. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.home-event-text {
    margin: 0;
    font-size: .875rem;
    line-height: 1.5;
    color: #596570;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* -------------------------------------------------- latimi pe ecrane mici

   Aceleasi praguri ca la caruselul de categorii din public.css
   (`.home-categories-grid > .home-category-card`): 1100 → trei, 860 → doua,
   600 → unul pe toata latimea.

   Prima varianta avea praguri proprii (900, 640) si `86%` pe telefon, ca sa se
   vada o felie din cardul urmator. Dar caruselul de categorii, care arata bine
   la orice latime, merge pe `100%`: un card pe ecran, fara felie. Nu are rost
   sa am doua purtari diferite pe aceeasi pagina. */

@media (max-width: 1100px) {
    .home-slider-item,
    .home-slider--wide .home-slider-item { flex: 0 0 calc((100% - 2 * 24px) / 3); }
}

@media (max-width: 860px) {
    .home-slider-item,
    .home-slider--wide .home-slider-item { flex: 0 0 calc((100% - 24px) / 2); }
}

@media (max-width: 600px) {
    .home-slider-item,
    .home-slider--wide .home-slider-item { flex: 0 0 100%; }
}