/* =============================================================================
   Sageti pentru carusele orizontale — partajate intre pagina furnizorului
   (echipa, galerie, zone), pagina activitatii (galerie), prima pagina
   (categorii) si pagina de categorie (subcategorii).

   Fisier separat pentru ca provider-page.css are reset-uri globale (*, body,
   h1..h6, p) si nu poate fi incarcat pe celelalte pagini.

   Perechea JS este assets/public/js/org-carousel.js.

   ASEZARE
   Sagetile stau sub lista, aliniate la dreapta, intr-un rand `.carousel-controls`.
   Au stat o vreme suprapuse peste carduri, la mijloc pe verticala, dar acolo
   acopereau continutul si taiau umbrele cardurilor.

   Bara de contact a furnizorului isi pastreaza asezarea ei (sagetile in flux,
   in interiorul barei) prin reguli proprii in provider-page.css.
   ========================================================================== */


/* Randul cu sageti, sub lista */
.carousel-controls{

display:flex;

justify-content:flex-end;

gap:10px;

margin-top:18px;

}


/* Cand tot continutul incape, JS nu pune `has-nav` si butoanele sunt `hidden`.
   Fara asta ar ramane un rand gol. */
.org-carousel:not(.has-nav) .carousel-controls{

display:none;

}


.org-carousel{

position:relative;

}


.org-carousel-nav{

width:44px;

height:44px;

display:flex;

align-items:center;

justify-content:center;

border:1px solid rgba(15,23,42,.1);

border-radius:50%;

background:#fff;

color:#0066AB;

font-size:17px;

line-height:1;

cursor:pointer;

box-shadow:0 2px 6px rgba(15,23,42,.08);

transition:background .25s, color .25s, opacity .25s;

}


.org-carousel-nav:hover:not(:disabled){

background:#0066AB;

border-color:#0066AB;

color:#fff;

}


.org-carousel-nav:disabled{

opacity:.35;

cursor:default;

}


/* display:flex de mai sus bate regula implicita a browserului pentru [hidden],
   deci ascunderea trebuie declarata explicit. */
.org-carousel-nav[hidden]{

display:none;

}


/* =============================================================================
   SECTIUNILE DE ACTIVITATI SI DE ORGANIZATORI, PE TELEFON

   Cele doua grile (`.v6-offers-grid`, `.v6-organizer-grid`) au `--row-cols:3`
   la orice latime. Pe telefon iesea un rand de trei carti de vreo 80px fiecare:
   titlul, locul si pretul se taiau, iar a treia carte pica pe langa ecran.

   Sub 600px grila devine o pista derulabila cu o singura carte in fata.
   Derularea e nativa — swipe-ul merge si cu JS oprit —, iar sagetile de
   dedesubt le arata org-carousel.js cand pista chiar are ce derula, deci pe
   desktop, unde grila se aseaza normal pe trei coloane, nu apar deloc.

   Pe latimi mari nu se schimba nimic: regulile de mai jos sunt toate in
   media query.
   ========================================================================== */

@media (max-width: 600px) {

    .v6-offers-carousel .v6-offers-grid,
    .v6-organizer-carousel .v6-organizer-grid {
        flex-wrap: nowrap;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        /* `center` ar tine cartea la mijloc si ar rupe alinierea la marginea
           din stanga a continutului */
        justify-content: flex-start;

        /* Bara de derulare nu-si are rostul: sunt sagetile dedesubt */
        scrollbar-width: none;
        -ms-overflow-style: none;

        /* Pista iese pana la marginile ecranului — exact cat are sectiunea
           padding (20px), nici un pixel mai mult, altfel ar aparea derulare
           orizontala pe toata pagina. Paddingul pus inapoi inauntru lasa loc
           umbrei cartilor si tine cartea aliniata cu titlul de deasupra. */
        --sec-bleed: 20px;
        padding: 14px var(--sec-bleed) 26px;
        margin-inline: calc(var(--sec-bleed) * -1);
        scroll-padding-inline: var(--sec-bleed);
        /* Marginea de sus a fost mancata de padding, deci o dam inapoi */
        margin-top: -14px;
    }

    .v6-offers-carousel .v6-offers-grid::-webkit-scrollbar,
    .v6-organizer-carousel .v6-organizer-grid::-webkit-scrollbar { display: none; }

    /* O singura carte in fata. `max-width` bate limita de 360px pe care si-o
       pun cartile vechi de sectiune, ca ele sa nu ramana mai inguste decat
       pista pe ecranele mai late. */
    .v6-offers-carousel .v6-offers-grid > *,
    .v6-organizer-carousel .v6-organizer-grid > * {
        flex: 0 0 100%;
        max-width: 100%;
        scroll-snap-align: start;
    }

    /* Sagetile sunt cele comune: aceeasi forma, aceeasi marime si aceeasi
       asezare la dreapta ca la subcategorii, la categoriile de pe prima pagina
       si la caruselele din pagina furnizorului. Singurul adaos e marginea
       negativa, care le urca in spatiul lasat umbrei ca sa nu para rupte de
       lista — exact ca la `.subcategories-carousel`. */
    .v6-offers-carousel .carousel-controls,
    .v6-organizer-carousel .carousel-controls {
        margin-top: -8px;
    }

}