/* TASK Carousel (2026-07-31) - [crd_estate_carousel]. Container-responsive (NU doar viewport-responsive -
   cerinta explicita, sectiunea 3): numarul de carduri vizibile e controlat prin `container-type:
   inline-size` + `@container`, cu fallback pe `@media` (viewport) pentru browsere fara suport de container
   queries. Cardul in sine reutilizeaza STRICT stilurile din public.css (.crd-estate-public-card) - acest
   fisier stiliza DOAR structura carousel-ului (track/sageti/puncte/titlu), nu reimplementeaza cardul. */

.crd-estate-carousel {
    container-type: inline-size;
    container-name: crd-estate-carousel;
    display: block;
    box-sizing: border-box;
    max-width: 100%;
    margin: 0 0 var(--crd-card-margin-bottom, 24px);
    /* Valori implicite - suprascrise per-instanta prin `style` inline (vezi
       class-crd-property-public-carousel.php, sectiunea "Imagine/Layout/Stil" din profil). */
    --crd-slides-desktop: 4;
    --crd-slides-tablet: 2;
    --crd-slides-mobile: 1;
    --crd-gap: 16px;
    --crd-slides: var(--crd-slides-mobile);
}

.crd-estate-carousel * {
    box-sizing: border-box;
}

.crd-estate-carousel-title {
    margin: 0 0 14px;
    color: #09233f;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.25;
}

/* TASK Administrare completa Carousel (2026-07-31) - "Titlu > Aliniere" din profil. */
.crd-estate-carousel--title-center .crd-estate-carousel-title {
    text-align: center;
}

.crd-estate-carousel--title-right .crd-estate-carousel-title {
    text-align: right;
}

/* "Sectiunea Stil" din profil - stiliza cardul REUTILIZAT (.crd-estate-public-card din public.css) DOAR
   in interiorul carousel-ului, prin custom properties inline - gridul din afara carousel-ului nu e
   afectat deloc (selectorii sunt scopati la `.crd-estate-carousel .crd-estate-public-card`). */
/* TASK 38 - fallback aliniat la Design System-ul unic (public.css: card = 10px, nu 8px) - un profil de
   carousel nepersonalizat trebuie sa arate IDENTIC cu gridul, nu doar "asemanator". Admin-ul poate in
   continuare sa personalizeze `--crd-card-radius` per profil (setare reala, `border_radius`), dar
   valoarea IMPLICITA (fara personalizare) se aliniaza acum la grid. */
.crd-estate-carousel .crd-estate-public-card {
    min-height: var(--crd-card-min-height, auto);
    border-radius: var(--crd-card-radius, 10px);
    box-shadow: var(--crd-card-shadow, 0 12px 28px rgba(9, 35, 63, .08));
    background: var(--crd-card-bg, #fff);
}

/* TASK 38 fix - padding-ul de profil (`--crd-card-padding`) se aplica DOAR pe verticala. Aplicat pe toate
   cele 4 laturi (cum era inainte), se aduna cu padding-ul orizontal propriu al cardului (14px, din
   public.css) - continutul carousel-ului ajungea inset cu 32px fata de cele 14px din grid, o diferenta
   vizibila de "identitate" intre cele doua contexte. Spatierea orizontala trebuie sa vina STRICT din
   cardul insusi (Design System unic), nu dintr-o a doua sursa configurabila per profil. */
.crd-estate-carousel .crd-estate-public-body {
    padding: var(--crd-card-padding, 18px) 0;
}

/* "Sectiunea Imagine" din profil - raport (aspect-ratio), inaltime fixa (are prioritate cand e setata -
   `--crd-image-height` e OMIS din `style` inline cand nu e configurata, deci `var()` cade pe fallback-ul
   `auto`), object-fit (cover/contain) si pozitie (echivalentul CSS al lui object-position, aplicat pe
   fundal, pentru ca imaginea ramane un `background-image` pe `<div>`, nu un `<img>`, la fel ca gridul). */
.crd-estate-carousel .crd-estate-public-image {
    min-height: 0;
    aspect-ratio: var(--crd-image-ratio, 4 / 3);
    height: var(--crd-image-height, auto);
    background-size: var(--crd-image-fit, cover);
    background-position: var(--crd-image-position, center);
}

.crd-estate-carousel-viewport {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 6px;
}

.crd-estate-carousel-track {
    flex: 1 1 auto;
    display: flex;
    gap: var(--crd-gap);
    margin: 0;
    padding: 4px 4px 10px;
    list-style: none;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    min-width: 0;
}

.crd-estate-carousel-track:focus-visible {
    outline: 2px solid #00a98d;
    outline-offset: 2px;
}

.crd-estate-carousel-slide {
    flex: 0 0 auto;
    width: calc((100% - (var(--crd-gap) * (var(--crd-slides) - 1))) / var(--crd-slides));
    min-width: 220px;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

.crd-estate-carousel-slide .crd-estate-public-card {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.crd-estate-carousel-slide .crd-estate-public-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

.crd-estate-carousel-slide .crd-estate-public-link {
    margin-top: auto;
}

/* ------------------------------------------------------------------ */
/* Sageti - vizibile, cu etichete ARIA (in markup), navigabile cu tastatura (butoane reale, nu div-uri). */
/* ------------------------------------------------------------------ */

.crd-estate-carousel-arrow {
    flex: 0 0 auto;
    align-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(10, 181, 154, .35);
    border-radius: 999px;
    background: #fff;
    color: #09233f;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    z-index: 1;
}

.crd-estate-carousel-arrow:hover {
    background: #eafaf6;
}

.crd-estate-carousel-arrow:focus-visible {
    outline: 2px solid #00a98d;
    outline-offset: 2px;
}

.crd-estate-carousel-arrow[disabled] {
    opacity: .35;
    cursor: default;
}

/* ------------------------------------------------------------------ */
/* Puncte de navigare. */
/* ------------------------------------------------------------------ */

.crd-estate-carousel-dots {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
}

.crd-estate-carousel-dot {
    width: 10px;
    height: 10px;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: rgba(9, 35, 63, .2);
    cursor: pointer;
}

.crd-estate-carousel-dot.is-active {
    background: #00a98d;
}

.crd-estate-carousel-dot:focus-visible {
    outline: 2px solid #00a98d;
    outline-offset: 2px;
}

/* ------------------------------------------------------------------ */
/* Breakpoint-uri pe CONTAINER (nu viewport) - functioneaza corect intr-o coloana Elementor ingusta pe
   un ecran lat, sau intr-un sidebar de ~300px chiar pe un monitor mare (cerinta explicita, sectiunea 3:
   "nu presupune ca sidebarul apare numai la un anumit viewport"). */
/* ------------------------------------------------------------------ */

@container crd-estate-carousel (min-width: 700px) {
    .crd-estate-carousel:not(.crd-estate-carousel--layout-sidebar) {
        --crd-slides: var(--crd-slides-tablet);
    }
}

@container crd-estate-carousel (min-width: 1100px) {
    .crd-estate-carousel:not(.crd-estate-carousel--layout-sidebar) {
        --crd-slides: var(--crd-slides-desktop);
    }
}

/* Fallback pe viewport pentru browsere fara suport de container queries (verificare de suport real,
   nu doar o presupunere - cerinta explicita, sectiunea 3). */
@supports not (container-type: inline-size) {
    @media (min-width: 700px) {
        .crd-estate-carousel:not(.crd-estate-carousel--layout-sidebar) {
            --crd-slides: var(--crd-slides-tablet);
        }
    }
    @media (min-width: 1100px) {
        .crd-estate-carousel:not(.crd-estate-carousel--layout-sidebar) {
            --crd-slides: var(--crd-slides-desktop);
        }
    }
}

/* Layout "sidebar" - un singur card vizibil, indiferent de latimea containerului (fortat si server-side,
   in PHP - regula CSS de mai jos e o plasa de siguranta suplimentara). Card mai compact (text redus). */
.crd-estate-carousel--layout-sidebar {
    --crd-slides: 1;
}

.crd-estate-carousel--layout-sidebar .crd-estate-carousel-slide {
    min-width: 0;
}

.crd-estate-carousel--layout-sidebar .crd-estate-public-card h3 {
    font-size: 16px;
}

.crd-estate-carousel--layout-sidebar .crd-estate-public-image {
    min-height: 120px;
}

.crd-estate-carousel--layout-sidebar .crd-estate-public-price {
    font-size: 18px;
}

/*
 * BUGFIX TASK 38.1 - regula anterioara (scopata pe `--layout-sidebar`/`--layout-compact`) NU se aplica in
 * productie: carousel-ul real, plasat intr-o coloana ingusta, foloseste profilul `auto` (sau `standard`) -
 * numele profilului nu reflecta locul unde e amplasat fizic pe pagina. Regula corecta se bazeaza pe
 * LATIMEA REALA a containerului carousel-ului (`@container crd-estate-carousel`, deja definit mai sus
 * pentru breakpoint-urile de numar de sloturi), NU pe eticheta aleasa in admin - un carousel "auto" intr-un
 * sidebar de 280px ajunge la fel de ingust ca unul marcat explicit "sidebar", si invers, un profil marcat
 * "sidebar" dar plasat intr-o coloana lata nu trebuie sa piarda badge-urile degeaba. Pastram si regula pe
 * clasele de layout ca strat suplimentar (nu strica, acopera si cazul rar in care admin-ul alege explicit
 * Sidebar/Compact intr-un container care nu ajunge sub prag).
 */
.crd-estate-carousel--layout-sidebar .crd-estate-public-badges,
.crd-estate-carousel--layout-compact .crd-estate-public-badges {
    display: none;
}

@container crd-estate-carousel (max-width: 380px) {
    .crd-estate-carousel .crd-estate-public-badges {
        display: none;
    }
}

@supports not (container-type: inline-size) {
    @media (max-width: 380px) {
        .crd-estate-carousel .crd-estate-public-badges {
            display: none;
        }
    }
}

/* Container foarte ingust (sub ~260px) - daca feature-urile tot nu incap pe 2 randuri, se ascunde STRICT
   cea cu prioritatea cea mai mica (vizualizarile, mereu ultimul chip randat de render_card() - vezi
   card_features()/`$views` in class-crd-property-public-shortcodes.php), niciodata suprafata/camere/
   bai/etaj. Bazat tot pe latimea reala a containerului, nu pe numele profilului. */
@container crd-estate-carousel (max-width: 260px) {
    .crd-estate-carousel .crd-estate-public-feature:nth-child(n + 5) {
        display: none;
    }
}

@supports not (container-type: inline-size) {
    @media (max-width: 260px) {
        .crd-estate-carousel .crd-estate-public-feature:nth-child(n + 5) {
            display: none;
        }
    }
}

/* Container foarte ingust (sub ~360px, ex. un widget de footer stramt) - elimina sagetile din flux ca sa
   nu impinga cardul si sa produca overflow orizontal al paginii (cerinta: "fara scroll orizontal al
   paginii"). */
@container crd-estate-carousel (max-width: 340px) {
    .crd-estate-carousel-arrow {
        display: none;
    }
}

@supports not (container-type: inline-size) {
    @media (max-width: 360px) {
        .crd-estate-carousel-arrow {
            display: none;
        }
    }
}

/* ------------------------------------------------------------------ */
/* Accesibilitate - prefers-reduced-motion (sectiunea 16/23): scroll instant, nu animat, si semnalul vizual
   de "reduced motion" e comunicat catre carousel.js prin acelasi media query, care opreste autoplay-ul. */
/* ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
    .crd-estate-carousel-track {
        scroll-behavior: auto;
    }
}

@media not (prefers-reduced-motion: reduce) {
    .crd-estate-carousel-track {
        scroll-behavior: smooth;
    }
}

.crd-estate-carousel-reduced-motion-note {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ==========================================================================
   DARK MODE - comutatorul real de pe site e `body.dark-mode` (evimo-toggle.js, tema astra-child), nu
   prefers-color-scheme (regula permanenta a acestui plugin - vezi CHANGELOG.md 2026-07-30). */

body.dark-mode .crd-estate-carousel-title {
    color: #f1f7ff;
}

body.dark-mode .crd-estate-carousel-arrow {
    background: #0d2340;
    border-color: rgba(0, 207, 166, .35);
    color: #f1f7ff;
}

body.dark-mode .crd-estate-carousel-arrow:hover {
    background: rgba(0, 207, 166, .18);
}

body.dark-mode .crd-estate-carousel-dot {
    background: rgba(241, 247, 255, .25);
}

body.dark-mode .crd-estate-carousel-dot.is-active {
    background: #00cfa6;
}