/* =====================================================================
   smbpanorama.ro — stiluri publice
   ---------------------------------------------------------------------
   Paleta vine din interioare: pereți crem, parchet cald, lumină
   naturală multă, textile gri-bej. De acolo baza — crem, nisip,
   bej-auriu — pe care stau două accente: lemnul parchetului și
   bleumarinul băilor. Secțiunile închise repetă fotografiile de
   noapte ale Oradiei: albastru profund cu lumini calde.

   Verdele a rămas accent secundar, folosit rar. Nicio suprafață mare
   nu mai este rece: pe fond crem, un gri-albastru arată murdar.

   Mobile-first. Fără framework, fără build, fără bibliotecă JS.
   Zero pictograme: tot efectul vine din tipografie, spațiere, fotografie
   și culoare.

   Cuprins
     1. Simboluri
     2. Bază și tipografie
     3. Utilitare de așezare
     4. Animație la derulare
     5. Butoane
     6. Antet și navigare
     7. Zona principală (hero)
     8. Secțiuni
     9. Carduri de cameră
    10. Galerie și lightbox
    11. Pagina camerei
    12. Împrejurimi
    13. Contact
    14. Condiții de rezervare
    15. Modal de rezervare
    16. Banner cookie
    17. Subsol
    18. Tipărire
   ===================================================================== */


/* ---------------------------------------------------------------------
   1. SIMBOLURI
   --------------------------------------------------------------------- */

:root {
    color-scheme: light;

    /* --- Hârtia: fundalul dominant --------------------------------
       Camerele au pereți crem, parchet cald și multă lumină naturală.
       Trei trepte de cald, de la aproape alb la bej-auriu, sunt de
       ajuns pentru tot ritmul paginii. Nuanțele sunt joase în saturație
       intenționat: bej-auriul se citește ca material, nu ca galben. */
    --crem:          #fdfbf7;
    --nisip:         #f6f1e8;
    --nisip-inchis:  #ebe3d5;
    --bej:           #e0d5c1;

    /* --- Lemn: accentul cald principal ----------------------------
       Scos din parchet. Ține locul unui accent auriu, dar cu partea
       roșie a stejarului, nu cu galbenul alamei. */
    --lemn:          #b08050;
    --lemn-inchis:   #8d6238;
    --lemn-deschis:  #cfa578;
    --lemn-palid:    #f4e9db;

    /* --- Bleumarin: accentul rece ---------------------------------
       Din accentele băilor și din cerul fotografiilor de noapte.
       Culoarea comenzilor și a suprafețelor închise. */
    --bleu:          #24405f;
    --bleu-inchis:   #182e46;
    --bleu-palid:    #e3e9f0;

    /* --- Noapte: Oradea după apus ---------------------------------
       Albastru profund cu lumini calde: exact fotografiile care dau
       tonul secțiunilor închise. */
    --noapte:        #0e1b2b;
    --noapte-medie:  #17293d;

    /* --- Verde: accent secundar, rar ------------------------------
       Rămâne pentru variație — marchează pașii deja parcurși în modalul
       de rezervare — dar nu mai poartă nicio suprafață mare. */
    --verde:         #4c6a5c;

    /* --- Cerneală: caldă, nu neutră -------------------------------
       Un text gri-rece pe fond crem arată murdar. Grisurile de aici au
       aceeași bază caldă ca hârtia. Treapta cea mai deschisă poartă
       etichete mici, deci este ținută la peste 4.5:1 pe toate cele trei
       fundaluri, nu doar pe crem. */
    --cerneala:      #2b2621;
    --cerneala-med:  #5f564b;
    --cerneala-slab: #726859;

    --linie:         #e6ddcd;
    --linie-tare:    #d2c6b1;
    --alarma:        #9a3527;

    /* Fără fonturi de pe web: font-src este 'self', iar directorul de
       fonturi e gol. Rafinamentul vine din alegerea stivei, nu dintr-o
       cerere către alt domeniu. Serifele vechi de tip Palatino/Iowan dau
       titlurilor aerul unei broșuri tipărite; Georgia rămâne plasa de
       siguranță, prezentă peste tot. */
    --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
            "Helvetica Neue", Arial, sans-serif;
    --font-titlu: "Iowan Old Style", "Palatino Linotype", Palatino,
                  "Book Antiqua", ui-serif, Georgia, serif;

    --lat-continut: 78rem;
    --lat-text:     42rem;   /* ~68 de semne pe rând: măsura confortabilă */

    /* Scară de spațiere cu pași mari la capătul de sus: aerul dintre
       secțiuni este cel care face pagina să pară îngrijită. */
    --sp-1: .25rem;  --sp-2: .5rem;   --sp-3: .75rem;  --sp-4: 1rem;
    --sp-5: 1.5rem;  --sp-6: 2.25rem;
    /* Treptele mari sunt fluide: pe telefon aerul de pe desktop ar
       impinge continutul sub linia de plutire fara sa castige nimic. */
    --sp-7: clamp(2.25rem, 5vw,  3.5rem);
    --sp-8: clamp(3.25rem, 8vw,  5.5rem);
    --sp-9: clamp(4.5rem, 11vw,  8.5rem);

    --raza: 2px;
    --raza-mare: 4px;

    --umbra-mica:  0 1px 2px rgba(43, 38, 33, .05);
    --umbra:       0 2px 6px rgba(43, 38, 33, .06), 0 12px 32px rgba(43, 38, 33, .07);
    --umbra-mare:  0 8px 20px rgba(43, 38, 33, .10), 0 32px 64px rgba(43, 38, 33, .12);

    --lent:   520ms cubic-bezier(.22, .61, .36, 1);
    --mediu:  300ms cubic-bezier(.22, .61, .36, 1);
    --rapid:  160ms ease;
}


/* ---------------------------------------------------------------------
   2. BAZĂ ȘI TIPOGRAFIE
   --------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 5rem;
}

body {
    margin: 0;
    font-family: var(--font);
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--cerneala);
    background: var(--crem);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-kerning: normal;
    overflow-x: hidden;
}

h1, h2, h3, h4 {
    font-family: var(--font-titlu);
    font-weight: 400;
    line-height: 1.12;
    letter-spacing: -0.018em;
    margin: 0 0 var(--sp-4);
    text-wrap: balance;

    /* Un cuvânt mai lat decât coloana se rupe, în loc să iasă din ea.
       Se aplică numai când chiar nu încape, deci în română, engleză,
       poloneză, franceză și italiană nu schimbă nimic: măsurat la 360 px,
       niciun titlu din ele nu depășește. Germana depășește: pe ecran de
       360 px, „Geschäftsbedingungen” cerea 368 px într-o coloană de 313,
       iar body-ul are overflow-x: hidden, deci ultima literă se tăia. */
    overflow-wrap: break-word;
}

/* Ruptura germană se face cu cratimă, la despărțire corectă în silabe,
   nu oriunde. Regula este legată de lang="de" ca să nu schimbe modul în
   care se rup rândurile în celelalte limbi. */
html[lang="de"] h1,
html[lang="de"] h2,
html[lang="de"] h3,
html[lang="de"] h4 {
    hyphens: auto;
}

/* Titlurile mari se strâng, cele mici se relaxează: la corp mare
   spațierea implicită arată dezlânată, la corp mic arată înghesuită. */
h1 { font-size: clamp(2.4rem, 6.2vw, 4.25rem); letter-spacing: -0.028em; }
h2 { font-size: clamp(1.8rem, 3.9vw, 2.75rem); letter-spacing: -0.022em; }
h3 { font-size: clamp(1.25rem, 2.2vw, 1.55rem); letter-spacing: -0.012em; }
h4 { font-size: 1.1rem; letter-spacing: -0.008em; }

p { margin: 0 0 var(--sp-4); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

/* Cifrele din tabele și din specificații se aliniază pe coloană. */
table, .specificatii dd, .lista-contact dd, .erou__adresa {
    font-variant-numeric: tabular-nums;
}

a { color: var(--bleu); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { color: var(--lemn-inchis); }

img { max-width: 100%; height: auto; display: block; }
ul, ol { margin: 0 0 var(--sp-4); padding-left: 1.2rem; }

:focus-visible {
    outline: 2px solid var(--lemn);
    outline-offset: 3px;
    border-radius: 1px;
}

/* Eticheta mică, versală, folosită ca supratitlu de secțiune. */
.supratitlu {
    display: block;
    font-family: var(--font);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--lemn-inchis);
    margin-bottom: var(--sp-4);
}
.supratitlu--pe-inchis { color: var(--lemn-deschis); }

/* Linie fină de alamă, sub titlurile de secțiune. */
.rigla {
    display: block;
    width: 2.5rem;
    height: 1px;
    background: var(--lemn);
    margin: var(--sp-4) 0 0;
}
.rigla--centrat { margin-inline: auto; }

.sari-continut {
    position: absolute; left: -9999px; top: 0; z-index: 300;
    padding: var(--sp-3) var(--sp-4);
    background: var(--noapte); color: #fff; text-decoration: none;
}
.sari-continut:focus { left: var(--sp-4); top: var(--sp-4); color: #fff; }

/* Creditul unei fotografii preluate: autor, licență, sursă. Se
   randează numai când imaginea chiar are câmpurile completate, deci
   nu apare niciodată sub o fotografie proprie. */
.credit-foto {
    margin: var(--sp-2) 0 0;
    font-size: .72rem; line-height: 1.45;
    color: var(--cerneala-slab);
}
.credit-foto a { color: inherit; text-decoration: underline; text-underline-offset: .15em; }
.credit-foto a:hover { color: var(--lemn-inchis); }

/* Pe fundal închis și peste fotografie, aceleași dimensiuni, alt ton. */
.sectiune--inchisa .credit-foto,
.masonry__element .credit-foto { color: rgba(255, 255, 255, .55); }
.sectiune--inchisa .credit-foto a:hover { color: var(--lemn-deschis); }

/* --- Lista de recomandari ------------------------------------------- */
.lista-recomandari {
    list-style: none; margin: 0; padding: 0;
    display: grid; gap: var(--sp-5); grid-template-columns: 1fr;
}
@media (min-width: 44rem) { .lista-recomandari { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 68rem) { .lista-recomandari { grid-template-columns: repeat(3, 1fr); } }

.recomandare {
    display: flex; flex-direction: column;
    background: var(--crem); border: 1px solid var(--linie);
    border-radius: var(--raza-mare); padding: var(--sp-5);
    transition: box-shadow var(--lent), transform var(--lent);
}
.recomandare:hover { box-shadow: var(--umbra); transform: translateY(-3px); }

/* Recomandarea principala ocupa toata latimea si are o rama de lemn. */
@media (min-width: 44rem) {
    .recomandare--principala { grid-column: 1 / -1; }
}
.recomandare--principala { border-color: var(--lemn); background: var(--lemn-palid); }

.recomandare__media {
    aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--raza);
    background: var(--nisip-inchis); margin-bottom: var(--sp-4);
}
.recomandare__media img { width: 100%; height: 100%; object-fit: cover; }
.recomandare__corp { display: flex; flex-direction: column; flex: 1; }
.recomandare__nume { font-size: 1.25rem; margin-bottom: var(--sp-2); }
.recomandare__meta {
    margin: 0 0 var(--sp-3); font-size: .78rem; letter-spacing: .1em;
    text-transform: uppercase; color: var(--lemn-inchis);
}
.recomandare__descriere { font-size: .96rem; color: var(--cerneala-med); }
.recomandare__link { margin: var(--sp-4) 0 0; }

/* --- Ecranul de autentificare -------------------------------------
   Foloseste aceleasi simboluri ca restul site-ului. Fotografia stă
   dedesubt, estompată, ca panoul să rămână lizibil. */
.autentificare {
    position: relative; min-height: 100svh;
    display: flex; align-items: center; justify-content: center;
    padding: var(--sp-6) var(--sp-4);
    background: var(--nisip);
}
.autentificare__fundal { position: absolute; inset: 0; overflow: hidden; }
.autentificare__fundal img { width: 100%; height: 100%; object-fit: cover; }
.autentificare__fundal::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(to bottom, rgba(14,27,43,.72), rgba(14,27,43,.86));
}
.autentificare__panou {
    position: relative; z-index: 2;
    width: 100%; max-width: 26rem;
    background: var(--crem); border-radius: var(--raza-mare);
    padding: var(--sp-7) var(--sp-6);
    box-shadow: var(--umbra-mare);
}
.autentificare__marca { display: block; margin-bottom: var(--sp-6); text-decoration: none; }
.autentificare__marca img { height: 2.6rem; width: auto; }
.autentificare__titlu { font-size: clamp(1.6rem, 4vw, 2rem); margin-bottom: 0; }
.autentificare__panou .rigla { margin-bottom: var(--sp-6); }
.autentificare__panou .formular__actiuni { margin-top: var(--sp-6); }
.autentificare__nota {
    font-size: .9rem; color: var(--cerneala-med);
    background: var(--lemn-palid); padding: var(--sp-4);
    border-radius: var(--raza); margin-bottom: var(--sp-5);
}
.autentificare__inapoi {
    margin: var(--sp-6) 0 0; text-align: center; font-size: .88rem;
}
.camp__control--scurt { max-width: 7rem; }
.camp__ajutor { margin: var(--sp-2) 0 0; font-size: .8rem; color: var(--cerneala-slab); }

/* Lista de credite de la finalul paginii legale desemnate. */
.credite-lista { list-style: none; margin: var(--sp-6) 0 0; padding: 0; }
.credite-lista__element {
    display: flex; gap: var(--sp-4); align-items: flex-start;
    padding: var(--sp-4) 0; border-bottom: 1px solid var(--linie);
}
.credite-lista__imagine {
    flex: 0 0 5rem; width: 5rem; height: 3.5rem;
    object-fit: cover; border-radius: var(--raza);
}
.credite-lista__nume { margin: 0; font-size: .95rem; }
.credite-lista .credit-foto { margin-top: 2px; }

/* În lightbox creditul stă sub legendă. */
.lightbox__credit {
    margin: var(--sp-2) 0 0; font-size: .72rem;
    color: rgba(255, 255, 255, .55); text-align: center;
}
.lightbox__credit a { color: rgba(255, 255, 255, .75); }
.lightbox__credit:empty { display: none; }

/* Text pentru cititorul de ecran, invizibil pe pagina. Numele unității
   stă aici când marca este o imagine. */
.doar-citit {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap; border: 0;
}

.capcana {
    position: absolute !important; left: -9999px !important;
    width: 1px; height: 1px; overflow: hidden;
}


/* ---------------------------------------------------------------------
   3. UTILITARE DE AȘEZARE
   --------------------------------------------------------------------- */

.container {
    width: 100%;
    max-width: var(--lat-continut);
    margin-inline: auto;
    padding-inline: var(--sp-4);
}
.container--text { max-width: var(--lat-text); }
.container--larg { max-width: 92rem; }

@media (min-width: 40rem) { .container { padding-inline: var(--sp-6); } }
@media (min-width: 64rem) { .container { padding-inline: var(--sp-7); } }

.proza { max-width: var(--lat-text); color: var(--cerneala-med); font-size: 1.08rem; }
.proza p + p { margin-top: var(--sp-4); }
.proza--mare { font-size: 1.2rem; line-height: 1.72; color: var(--cerneala); }
.proza--document { max-width: none; color: var(--cerneala); }
.proza--document h2 {
    margin-top: var(--sp-7); font-size: 1.5rem;
    padding-top: var(--sp-5); border-top: 1px solid var(--linie);
}
.proza--document h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.proza--document h3 { margin-top: var(--sp-5); font-size: 1.15rem; }
.proza--document li { margin-bottom: var(--sp-2); }
.proza--document table {
    width: 100%; border-collapse: collapse; margin-bottom: var(--sp-4); font-size: .95rem;
}
.proza--document th, .proza--document td {
    border: 1px solid var(--linie); padding: var(--sp-2) var(--sp-3); text-align: left;
}
.proza--document th { background: var(--nisip); font-weight: 600; }

.tabel-invelis { overflow-x: auto; }


/* --- Antetul unei pagini interioare --- */

.pagina-antet { padding-block: var(--sp-7) var(--sp-6); }
.pagina-titlu { margin-bottom: var(--sp-3); }
.pagina-subtitlu {
    font-size: 1.15rem; color: var(--cerneala-med);
    max-width: var(--lat-text); margin: 0;
}
.pagina-meta {
    font-size: .85rem; color: var(--cerneala-slab);
    display: flex; gap: var(--sp-4); margin: var(--sp-3) 0 0;
}

.firimituri { padding-top: var(--sp-5); font-size: .8rem; letter-spacing: .02em; }
.firimituri__lista {
    list-style: none; display: flex; flex-wrap: wrap; gap: var(--sp-2);
    margin: 0; padding: 0; color: var(--cerneala-slab);
}
.firimituri__lista li + li::before {
    content: "—"; margin-right: var(--sp-2); color: var(--linie-tare);
}
.firimituri__lista a { color: var(--cerneala-slab); text-decoration: none; }
.firimituri__lista a:hover { color: var(--lemn-inchis); }


/* ---------------------------------------------------------------------
   4. ANIMAȚIE LA DERULARE
   Elementele intră ușor de jos, o singură dată. JavaScript adaugă clasa
   .vizibil; fără JavaScript totul rămâne vizibil de la început.
   --------------------------------------------------------------------- */

.apare {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity var(--lent), transform var(--lent);
    will-change: opacity, transform;
}
.apare.vizibil { opacity: 1; transform: none; }

/* Întârzieri în cascadă, pentru elementele dintr-o grilă. */
.apare[data-intarziere="1"] { transition-delay: 90ms; }
.apare[data-intarziere="2"] { transition-delay: 180ms; }
.apare[data-intarziere="3"] { transition-delay: 270ms; }
.apare[data-intarziere="4"] { transition-delay: 360ms; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .apare { opacity: 1; transform: none; transition: none; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}


/* ---------------------------------------------------------------------
   5. BUTOANE
   --------------------------------------------------------------------- */

.buton {
    display: inline-block; position: relative;
    font: inherit; font-size: .9rem; font-weight: 600;
    letter-spacing: .04em; line-height: 1.2;
    padding: .95rem 2rem;
    text-align: center; text-decoration: none; cursor: pointer;
    border: 1px solid transparent; border-radius: var(--raza);
    transition: background var(--mediu), color var(--mediu),
                border-color var(--mediu), transform var(--rapid),
                box-shadow var(--mediu);
}
.buton:hover { transform: translateY(-2px); }
.buton:active { transform: translateY(0); }

.buton--primar {
    background: var(--lemn); color: var(--noapte); border-color: var(--lemn);
    box-shadow: 0 2px 10px rgba(141, 98, 56, .28);
}
.buton--primar:hover {
    background: var(--lemn-deschis); border-color: var(--lemn-deschis);
    color: var(--noapte); box-shadow: 0 8px 22px rgba(141, 98, 56, .36);
}

.buton--bleu { background: var(--bleu); color: #fff; border-color: var(--bleu); }
.buton--bleu:hover { background: var(--bleu-inchis); border-color: var(--bleu-inchis); color: #fff; }

.buton--fantoma { background: transparent; color: var(--cerneala); border-color: var(--linie-tare); }
.buton--fantoma:hover { background: var(--cerneala); border-color: var(--cerneala); color: var(--crem); }

.buton--pe-inchis { background: transparent; color: #fff; border-color: rgba(255,255,255,.45); }
.buton--pe-inchis:hover { background: #fff; color: var(--noapte); border-color: #fff; }

.buton--text {
    background: none; border: 0; padding: .5rem 0;
    color: var(--cerneala-med); text-decoration: underline;
}
.buton--text:hover { color: var(--lemn-inchis); transform: none; }

.buton--mic { padding: .55rem 1.1rem; font-size: .82rem; }
.buton--larg { display: block; width: 100%; }

.buton[disabled], .buton[aria-disabled="true"] { opacity: .5; pointer-events: none; }

/* Legătură discretă cu subliniere care se desenează la hover. */
.legatura-mai-mult {
    display: inline-block; position: relative;
    font-size: .8rem; font-weight: 600; letter-spacing: .12em;
    text-transform: uppercase; text-decoration: none;
    color: var(--bleu); padding-bottom: 4px;
}
.legatura-mai-mult::after {
    content: ""; position: absolute; left: 0; bottom: 0;
    width: 100%; height: 1px; background: var(--lemn);
    transform: scaleX(.35); transform-origin: left;
    transition: transform var(--mediu);
}
.legatura-mai-mult:hover { color: var(--lemn-inchis); }
.legatura-mai-mult:hover::after { transform: scaleX(1); }


/* ---------------------------------------------------------------------
   6. ANTET ȘI NAVIGARE
   Peste zona principală antetul este transparent, cu text alb. Când
   pagina se derulează, capătă fundal și devine închis la culoare.
   --------------------------------------------------------------------- */

.sit-antet {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    transition: background var(--mediu), box-shadow var(--mediu),
                border-color var(--mediu), padding var(--mediu);
    border-bottom: 1px solid transparent;
    padding-block: var(--sp-3);
}

.sit-antet__interior {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--sp-4); flex-wrap: wrap; min-height: 3rem;
}

/* Starea transparentă există doar pe paginile cu zonă principală, adică
   acolo unde head.php a pus clasa `are-erou` pe <body>. */
.are-erou .sit-antet--sus {
    background: linear-gradient(to bottom, rgba(14, 27, 43, .55), rgba(14, 27, 43, 0));
    padding-block: var(--sp-5);
}
.are-erou .sit-antet--sus .marca__nume,
.are-erou .sit-antet--sus .nav__link,
.are-erou .sit-antet--sus .lang__buton,
.are-erou .sit-antet--sus .nav-comutator { color: #fff; }
.are-erou .sit-antet--sus .lang__buton { border-color: rgba(255, 255, 255, .4); }
.are-erou .sit-antet--sus .lang__buton:hover { color: #fff; border-color: rgba(255, 255, 255, .8); }
.are-erou .sit-antet--sus .marca__eticheta { color: rgba(255,255,255,.7); }
.are-erou .sit-antet--sus .nav-comutator { border-color: rgba(255,255,255,.4); }

.sit-antet--fixat {
    background: rgba(251, 248, 243, .96);
    backdrop-filter: saturate(1.6) blur(10px);
    border-bottom-color: var(--linie);
    box-shadow: var(--umbra-mica);
}

.marca { text-decoration: none; color: var(--cerneala); display: flex; flex-direction: column; }
.marca--logo { flex-direction: row; align-items: center; }

/* Înălțimea o dă antetul, lățimea urmează proporția. Cele două variante
   ocupă același loc: una este ascunsă, nu mutată, ca schimbarea stării
   să nu miște nimic în jur. */
.marca__logo {
    display: block; height: 2.3rem; width: auto;
    transition: height var(--mediu);
}
@media (min-width: 48rem) { .marca__logo { height: 2.8rem; } }

.marca__logo--pe-inchis { display: none; }
.are-erou .sit-antet--sus .marca__logo--pe-deschis { display: none; }
.are-erou .sit-antet--sus .marca__logo--pe-inchis { display: block; }

/* Peste fotografie logoul este mai mare: acolo antetul are aer. */
@media (min-width: 48rem) {
    .are-erou .sit-antet--sus .marca__logo { height: 3.4rem; }
}
.marca__nume {
    font-family: var(--font-titlu); font-size: 1.25rem;
    letter-spacing: .01em; line-height: 1.1; transition: color var(--mediu);
}
.marca__eticheta {
    font-size: .64rem; letter-spacing: .22em; text-transform: uppercase;
    color: var(--cerneala-slab); margin-top: 3px; transition: color var(--mediu);
}

.nav-comutator {
    font: inherit; font-size: .78rem; font-weight: 600;
    letter-spacing: .1em; text-transform: uppercase;
    padding: .5rem 1rem; background: transparent; color: var(--cerneala);
    border: 1px solid var(--linie-tare); border-radius: var(--raza); cursor: pointer;
    transition: color var(--mediu), border-color var(--mediu);
}

/* Butonul apare numai sub pragul la care navigarea se pliaza. Peste el
   lista este oricum vizibila, deci butonul nu are ce sa deschida. Fara
   regula asta ramanea vizibil pe desktop, pentru ca site.js ii scoate
   atributul hidden imediat ce se incarca. */
@media (min-width: 64rem) { .nav-comutator { display: none; } }

.nav { display: flex; align-items: center; gap: var(--sp-6); flex-wrap: wrap; }
.nav__lista {
    list-style: none; display: flex; align-items: center;
    gap: var(--sp-5); margin: 0; padding: 0; flex-wrap: wrap;
}

.nav__link {
    position: relative; display: inline-block; padding: .3rem 0;
    font-size: .84rem; font-weight: 500; letter-spacing: .08em;
    text-transform: uppercase; color: var(--cerneala-med); text-decoration: none;
    transition: color var(--mediu);
}
.nav__link::after {
    content: ""; position: absolute; left: 0; bottom: 0;
    width: 100%; height: 1px; background: currentColor;
    transform: scaleX(0); transform-origin: right;
    transition: transform var(--mediu);
}
.nav__link:hover::after, .nav__link--activ::after { transform: scaleX(1); transform-origin: left; }
.nav__link:hover { color: var(--cerneala); }
.nav__link--activ { color: var(--lemn-inchis); }
.are-erou .sit-antet--sus .nav__link--activ { color: var(--lemn-deschis); }

/* Uneltele din bara de sus: comutatorul de limbă, butonul de rezervare
   și butonul de meniu. Stau în afara <nav>, ca pe telefon comutatorul să
   fie vizibil fără să deschizi meniul. */
.sit-antet__unelte { display: flex; align-items: center; gap: var(--sp-4); }

/* Pe ecran mare uneltele stăteau până acum înăuntrul navigării, lipite
   de ea. Acum sunt element separat, deci alinierea se reface explicit:
   navigarea se împinge la dreapta, iar între ea și unelte rămâne exact
   distanța dinainte — `gap`-ul containerului plus diferența până la
   var(--sp-6), cât era distanța din interiorul lui <nav>. */
@media (min-width: 64rem) {
    .sit-antet__interior { justify-content: flex-start; }
    .nav { margin-left: auto; }
    .sit-antet__unelte { margin-left: calc(var(--sp-6) - var(--sp-4)); }
}

/* --- Comutatorul de limbă ---------------------------------------------
   <details>/<summary>: se deschide și se închide fără JavaScript, iar
   tastatura îl operează nativ. site.js adaugă doar închiderea la clic în
   afară și la Esc.

   Steagul poartă un contur subțire, altfel jumătatea albă a Poloniei
   dispare în fundal. */

.steaguri-def { position: absolute; width: 0; height: 0; overflow: hidden; }

.steag {
    flex: 0 0 auto; width: 1.3rem; height: .87rem; display: block;
    border: 1px solid rgba(0, 0, 0, .18); border-radius: 1px;
}

.lang { position: relative; }

.lang__buton {
    display: flex; align-items: center; gap: var(--sp-2);
    padding: .35rem .5rem; cursor: pointer; list-style: none;
    font-size: .82rem; font-weight: 600; color: var(--cerneala-slab);
    border: 1px solid var(--linie); border-radius: var(--raza);
    transition: color var(--mediu), border-color var(--mediu);
}
.lang__buton::-webkit-details-marker { display: none; }
.lang__buton:hover { color: var(--lemn-inchis); border-color: var(--lemn-deschis); }
.lang__buton:focus-visible { outline: 2px solid var(--lemn-inchis); outline-offset: 2px; }

.lang__nume { white-space: nowrap; }

.lang__sageata {
    width: 0; height: 0; margin-left: .1rem;
    border-left: .26rem solid transparent; border-right: .26rem solid transparent;
    border-top: .3rem solid currentColor;
    transition: transform var(--mediu);
}
.lang[open] .lang__sageata { transform: rotate(180deg); }

.lang__lista {
    position: absolute; top: calc(100% + .35rem); right: 0; z-index: 60;
    min-width: 100%; margin: 0; padding: .25rem; list-style: none;
    background: var(--crem); border: 1px solid var(--linie);
    border-radius: var(--raza); box-shadow: 0 6px 24px rgba(14, 27, 43, .12);
}

.lang__optiune {
    display: flex; align-items: center; gap: var(--sp-2);
    padding: .45rem .6rem; text-decoration: none; white-space: nowrap;
    font-size: .85rem; color: var(--cerneala); border-radius: var(--raza);
}
.lang__optiune:hover { background: var(--nisip); color: var(--lemn-inchis); }
.lang__optiune:focus-visible { outline: 2px solid var(--lemn-inchis); outline-offset: -2px; }

/* Limba curentă rămâne în listă, marcată: comutatorul arată unde ești,
   nu doar unde poți merge. */
.lang__optiune--curenta { font-weight: 700; color: var(--lemn-inchis); }
.lang__optiune--curenta::after {
    content: "✓"; margin-left: auto; padding-left: var(--sp-3);
    font-weight: 400; opacity: .75;
}

@media (max-width: 63.999rem) {
    .nav-comutator[hidden] { display: none; }
    .nav {
        display: none; flex-basis: 100%; flex-direction: column;
        align-items: stretch; gap: 0; padding-bottom: var(--sp-3);
    }
    .nav--deschis { display: flex; }
    .nav__lista { flex-direction: column; align-items: stretch; gap: 0; }
    .nav__element { border-top: 1px solid var(--linie); }
    .nav__link { display: block; padding: var(--sp-4) 0; font-size: .95rem; }
    .nav__link::after { display: none; }

    /* Navigarea se pliază sub bara de sus; uneltele rămân în ea, pe
       primul rând. În DOM vin după <nav>, ca pe ecran mare ordinea de
       tabulare să urmeze ordinea vizuală; aici le urcăm înaintea ei. */
    .nav { order: 3; }

    /* Butonul de rezervare din antet dispare: pe telefon îl înlocuiește
       bara fixă de jos, care are și Sună. Așa rămâne loc pentru steag
       și pentru butonul de meniu chiar și la 320 px. */
    .sit-antet__actiune { display: none; }

    /* Comutatorul se strânge la steag plus săgeată. Denumirea limbii nu
       se scoate din marcaj, ci doar din văz: butonul își păstrează
       numele accesibil complet, „Limbă: Deutsch”, pentru cititorul de
       ecran și pentru comanda vocală. */
    .lang__buton { padding: .4rem .45rem; gap: var(--sp-1); }
    .lang__buton .lang__nume {
        position: absolute; width: 1px; height: 1px;
        padding: 0; margin: -1px; overflow: hidden;
        clip-path: inset(50%); white-space: nowrap; border: 0;
    }
    .lang__buton .steag { width: 1.55rem; height: 1.03rem; }

    /* Lista se deschide aliniată la dreapta, sub buton: butonul stă în
       colțul din dreapta al barei, iar la stânga ar ieși din ecran. */
    .lang__lista { right: 0; left: auto; }
    .lang__optiune { padding: .6rem .6rem; font-size: .9rem; }

    /* Peste hero, meniul mobil are fundal închis: lista trebuie să
       rămână pe hârtie, ca opțiunile să se citească. */
    .are-erou .sit-antet--sus .lang__lista { color: var(--cerneala); }
    /* Meniul deschis peste hero are nevoie de fundal, altfel devine ilizibil. */
    .are-erou .sit-antet--sus:has(.nav--deschis) {
        background: rgba(14, 27, 43, .96);
    }
    .are-erou .sit-antet--sus .nav__element { border-top-color: rgba(255,255,255,.15); }
}

/* Paginile fără zonă principală au nevoie de spațiu sub antetul fix. */
.sit-continut { padding-top: 5rem; }
.are-erou .sit-continut { padding-top: 0; }


/* ---------------------------------------------------------------------
   7. ZONA PRINCIPALĂ (HERO)
   Slideshow cu efect Ken Burns: fiecare fotografie intră în fondu și
   se apropie lent. Fără JavaScript rămâne vizibilă prima fotografie.
   --------------------------------------------------------------------- */

.erou {
    position: relative;
    min-height: 100svh;
    display: flex; align-items: flex-end;
    background: var(--noapte);
    overflow: hidden;
}
/* Pe telefon banda de deschidere se opreste la ceva peste jumatate de
   ecran: altfel primul rand de continut ajunge sub doua derulari. */
.erou--scurt { min-height: 56svh; }
@media (min-width: 48rem) { .erou--scurt { min-height: 68svh; } }
@media (min-width: 64rem) { .erou--scurt { min-height: 72svh; } }

.erou__scena { position: absolute; inset: 0; }

.erou__cadru {
    position: absolute; inset: 0;
    opacity: 0;
    transition: opacity 1600ms ease-in-out;
}
.erou__cadru--activ { opacity: 1; }
.erou__cadru:first-child { opacity: 1; }
.erou__cadru--activ ~ .erou__cadru:first-child { opacity: 0; }

.erou__cadru img {
    width: 100%; height: 100%; object-fit: cover;
    transform: scale(1.06);
}
/* Ken Burns: apropiere lentă cât timp cadrul este activ. */
.erou__cadru--activ img { animation: ken-burns 12s ease-out forwards; }

@keyframes ken-burns {
    from { transform: scale(1.02) translate3d(0, 0, 0); }
    to   { transform: scale(1.13) translate3d(-1.5%, -1.2%, 0); }
}

.erou::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background:
        linear-gradient(to top, rgba(14, 27, 43, .88) 0%,
                                rgba(14, 27, 43, .55) 32%,
                                rgba(14, 27, 43, .18) 62%,
                                rgba(14, 27, 43, .42) 100%);
}

.erou__continut {
    position: relative; z-index: 2;
    width: 100%; color: #fff;
    padding-block: var(--sp-8) var(--sp-7);
}

.erou__titlu {
    color: #fff; margin-bottom: var(--sp-4);
    max-width: 18ch;
    text-shadow: 0 2px 30px rgba(0, 0, 0, .35);
}
.erou__slogan {
    font-size: clamp(1.05rem, 2.1vw, 1.35rem);
    color: rgba(255, 255, 255, .92);
    max-width: 44ch; margin-bottom: var(--sp-5);
    text-shadow: 0 1px 20px rgba(0, 0, 0, .4);
}
.erou__adresa {
    font-size: .82rem; letter-spacing: .16em; text-transform: uppercase;
    color: rgba(255, 255, 255, .78); margin-bottom: var(--sp-6);
}
.erou__actiuni { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin: 0; }


/* Indicatori de slide: liniuțe, nu puncte. */
.erou__indicatori {
    position: absolute; z-index: 3; right: var(--sp-4); bottom: var(--sp-6);
    display: flex; gap: var(--sp-2);
}
.erou__indicator {
    width: 2rem; height: 2px; padding: 0; border: 0; cursor: pointer;
    background: rgba(255, 255, 255, .35); transition: background var(--mediu);
}
.erou__indicator--activ { background: var(--lemn); }
.erou__indicator:hover { background: rgba(255, 255, 255, .7); }

@media (min-width: 48rem) {
    .erou__indicatori { right: var(--sp-6); }
}
@media (min-width: 64rem) {
    .erou__indicatori { right: var(--sp-7); bottom: var(--sp-7); }
    .erou__continut { padding-block: var(--sp-9) var(--sp-8); }
}


/* ---------------------------------------------------------------------
   8. SECȚIUNI
   --------------------------------------------------------------------- */

.sectiune { padding-block: var(--sp-8); position: relative; }
.sectiune--fara-sus { padding-top: 0; }
.sectiune--ingusta > .container { max-width: var(--lat-text); }
.sectiune--nisip { background: var(--nisip); }
.sectiune--crem  { background: var(--crem); }
.sectiune--bej   { background: var(--bej); }
.sectiune--bej .lista-facilitati__element { border-bottom-color: rgba(43, 38, 33, .14); }
.sectiune--bej .sectiune__intro { color: var(--cerneala-med); }
.sectiune--centrata { text-align: center; padding-block: var(--sp-9); }

/* Secțiune închisă la culoare: rupe ritmul și scoate fotografiile în față. */
.sectiune--inchisa {
    background: var(--noapte-medie); color: rgba(255, 255, 255, .82);
}
.sectiune--inchisa h2, .sectiune--inchisa h3 { color: #fff; }
.sectiune--inchisa .proza { color: rgba(255, 255, 255, .78); }
.sectiune--inchisa a { color: var(--lemn-deschis); }

@media (min-width: 64rem) { .sectiune { padding-block: var(--sp-9); } }

.sectiune__antet {
    display: flex; flex-wrap: wrap; align-items: flex-end;
    justify-content: space-between; gap: var(--sp-4);
    margin-bottom: var(--sp-7);
}
/* Un element flex nu coboară sub lățimea lui minimă de conținut cât
   timp are min-width: auto, iar overflow-wrap nu schimbă acea lățime.
   Fără regula asta, un titlu dintr-un singur cuvânt lung împinge
   antetul în afara containerului: la 320 px, „Klassifizierungszertifikat”
   cerea 303 px într-o coloană de 273. Se aplică numai când cuvântul
   chiar nu încape. */
.sectiune__antet > * { min-width: 0; }
.sectiune__titlu { margin: 0; }
.sectiune__intro { max-width: 52ch; margin-top: var(--sp-3); color: var(--cerneala-med); }
.sectiune--inchisa .sectiune__intro { color: rgba(255, 255, 255, .75); }
.sectiune__actiuni { margin-top: var(--sp-6); }

/* Listă de facilități pe trei coloane, cu liniuță de alamă. */
.lista-facilitati {
    list-style: none; margin: 0; padding: 0;
    display: grid; gap: var(--sp-2) var(--sp-6); grid-template-columns: 1fr;
}
@media (min-width: 34rem) { .lista-facilitati { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 60rem) { .lista-facilitati { grid-template-columns: repeat(3, 1fr); } }

.lista-facilitati__element {
    position: relative; padding: var(--sp-3) 0 var(--sp-3) var(--sp-5);
    border-bottom: 1px solid var(--linie); font-size: .96rem;
}
.lista-facilitati__element::before {
    content: ""; position: absolute; left: 0; top: 1.35em;
    width: 10px; height: 1px; background: var(--lemn);
}
.sectiune--inchisa .lista-facilitati__element { border-bottom-color: rgba(255,255,255,.14); }

.facilitati-grup + .facilitati-grup { margin-top: var(--sp-6); }
.facilitati-grup__titlu {
    font-family: var(--font); font-size: .74rem; font-weight: 700;
    letter-spacing: .16em; text-transform: uppercase;
    color: var(--lemn-inchis); margin-bottom: var(--sp-3);
}


/* ---------------------------------------------------------------------
   9. CARDURI DE CAMERĂ
   Fotografia ocupă tot cardul; informația stă peste ea, pe un gradient.
   La hover fotografia se apropie și apar detaliile suplimentare.
   --------------------------------------------------------------------- */

.grila-camere {
    list-style: none; margin: 0; padding: 0;
    display: grid; gap: var(--sp-4); grid-template-columns: 1fr;
}
@media (min-width: 46rem) { .grila-camere { grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); } }
@media (min-width: 72rem) {
    .grila-camere--trei { grid-template-columns: repeat(3, 1fr); }
}

/* Toate cardurile au aceeasi marime. Prima camera a fost o vreme un cadru
   lat de deschidere, dar cu patru tipuri iesea unul mare sus, doua alaturi
   si unul singur jos - dezechilibrat si strain de restul paginilor, care
   folosesc peste tot carduri egale. */

.card { display: flex; }

.card__legatura {
    position: relative; display: block; width: 100%;
    aspect-ratio: 4 / 5;
    overflow: hidden; border-radius: var(--raza-mare);
    text-decoration: none; color: #fff;
    background: var(--noapte-medie);
    box-shadow: var(--umbra-mica);
    transition: box-shadow var(--lent), transform var(--lent);
}
@media (min-width: 46rem) { .card__legatura { aspect-ratio: 3 / 4; } }
@media (min-width: 72rem) { .card__legatura { aspect-ratio: 4 / 5; } }

.card__legatura:hover { box-shadow: var(--umbra-mare); transform: translateY(-4px); color: #fff; }

.card__media { position: absolute; inset: 0; }
.card__media img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 900ms cubic-bezier(.22,.61,.36,1), filter var(--lent);
}
.card__legatura:hover .card__media img { transform: scale(1.07); }

.card__legatura::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(to top,
        rgba(14, 27, 43, .92) 0%,
        rgba(14, 27, 43, .62) 26%,
        rgba(14, 27, 43, .12) 58%,
        rgba(14, 27, 43, .05) 100%);
    transition: opacity var(--lent);
}
.card__legatura:hover::after { opacity: .96; }

/* Fără fotografie, cardul rămâne un bloc verde lizibil. */
.card__legatura--fara-foto { background: var(--bleu-inchis); }

.card__corp {
    position: absolute; z-index: 2; left: 0; right: 0; bottom: 0;
    padding: var(--sp-5);
    display: flex; flex-direction: column; gap: var(--sp-2);
}
@media (min-width: 46rem) { .card__corp { padding: var(--sp-6); } }

.card__titlu {
    margin: 0; color: #fff; font-size: clamp(1.4rem, 2.4vw, 1.8rem);
}
.card__meta {
    margin: 0; font-size: .78rem; letter-spacing: .1em;
    text-transform: uppercase; color: rgba(255, 255, 255, .75);
}

/* Detaliile suplimentare apar la hover, pe desktop. */
.card__extra {
    margin: 0; color: rgba(255, 255, 255, .88); font-size: .95rem;
    max-width: 46ch;
}
.card__actiune {
    display: inline-block; margin-top: var(--sp-2);
    font-size: .76rem; font-weight: 600; letter-spacing: .14em;
    text-transform: uppercase; color: var(--lemn-deschis);
}

@media (min-width: 46rem) and (prefers-reduced-motion: no-preference) {
    .card__extra, .card__actiune {
        opacity: 0; max-height: 0; overflow: hidden;
        transform: translateY(10px);
        transition: opacity var(--lent), transform var(--lent), max-height var(--lent);
    }
    .card__legatura:hover .card__extra,
    .card__legatura:focus-visible .card__extra,
    .card__legatura:hover .card__actiune,
    .card__legatura:focus-visible .card__actiune {
        opacity: 1; max-height: 12rem; transform: none;
    }
}


/* ---------------------------------------------------------------------
   10. GALERIE ȘI LIGHTBOX
   --------------------------------------------------------------------- */

.grila-galerie {
    list-style: none; margin: 0; padding: 0;
    display: grid; gap: var(--sp-3); grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 44rem) { .grila-galerie { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 70rem) { .grila-galerie { grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); } }

/* Mozaic: unele imagini ocupă două celule, ca să rupă grila. */
@media (min-width: 44rem) {
    .grila-galerie--mozaic > .grila-galerie__element:nth-child(7n+1) {
        grid-column: span 2; grid-row: span 2;
    }
}

.grila-galerie__element {
    position: relative; aspect-ratio: 1 / 1; overflow: hidden;
    border-radius: var(--raza-mare); background: var(--nisip-inchis);
}
.grila-galerie--previzualizare { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 44rem) { .grila-galerie--previzualizare { grid-template-columns: repeat(4, 1fr); } }

.grila-galerie__legatura { display: block; width: 100%; height: 100%; position: relative; }
.grila-galerie__element img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 800ms cubic-bezier(.22,.61,.36,1);
}
.grila-galerie__legatura::after {
    content: ""; position: absolute; inset: 0;
    background: rgba(14, 27, 43, 0); transition: background var(--mediu);
}
.grila-galerie__legatura:hover img { transform: scale(1.06); }
.grila-galerie__legatura:hover::after { background: rgba(14, 27, 43, .22); }

/* --- Lightbox --- */

.lightbox {
    position: fixed; inset: 0; z-index: 200;
    display: flex; flex-direction: column;
    background: rgba(10, 18, 16, .97);
    padding: var(--sp-4);
    animation: lb-intra 260ms ease-out;
}
.lightbox[hidden] { display: none; }
@keyframes lb-intra { from { opacity: 0; } to { opacity: 1; } }

.lightbox__bara {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--sp-4); color: rgba(255, 255, 255, .7);
    font-size: .78rem; letter-spacing: .12em; text-transform: uppercase;
    padding-bottom: var(--sp-3);
}
/* Contorul "3 din 12" din bara: il construieste site.js, deci nu apare
   in sursa paginii. Mosteneste tipografia barei, ii trebuie doar
   garantia ca nu se rupe pe doua randuri. */
.lightbox__contor { white-space: nowrap; }

.lightbox__scena {
    flex: 1; display: flex; align-items: center; justify-content: center; min-height: 0;
}
.lightbox__imagine {
    max-width: 100%; max-height: 100%; object-fit: contain;
    border-radius: var(--raza); box-shadow: 0 20px 60px rgba(0,0,0,.5);
    animation: lb-imagine 320ms cubic-bezier(.22,.61,.36,1);
}
@keyframes lb-imagine { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }

.lightbox__legenda {
    text-align: center; color: rgba(255, 255, 255, .7);
    font-size: .9rem; padding-top: var(--sp-3); min-height: 1.5rem;
}
.lightbox__navigare { display: flex; justify-content: center; gap: var(--sp-3); padding-top: var(--sp-3); }
.lightbox__buton[hidden] { display: none; }
/* Glisarea orizontala e a lightbox-ului; verticala ramane a paginii. */
.lightbox__scena { touch-action: pan-y; }
.lightbox__imagine { user-select: none; -webkit-user-drag: none; }
.lightbox__buton {
    font: inherit; font-size: .78rem; font-weight: 600;
    letter-spacing: .12em; text-transform: uppercase;
    padding: .6rem 1.3rem; background: transparent; color: #fff;
    border: 1px solid rgba(255, 255, 255, .3); border-radius: var(--raza);
    cursor: pointer; transition: all var(--mediu);
}
.lightbox__buton:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.6); }
.lightbox__buton[disabled] { opacity: .3; cursor: default; }


/* --- File de galerie ---------------------------------------------
   Bara de file stă pe o linie subțire, nu pe butoane pline: la șase
   file, șase dreptunghiuri colorate ar concura cu fotografiile. */

.file {
    display: flex; flex-wrap: wrap; gap: var(--sp-5) var(--sp-6);
    margin-bottom: var(--sp-7);
    border-bottom: 1px solid var(--linie);
    padding-bottom: var(--sp-4);
}

.fila {
    position: relative;
    display: inline-flex; align-items: baseline; gap: var(--sp-2);
    padding: var(--sp-3) 0;
    min-height: 2.75rem;   /* 44px: tinta minima de atingere */
    font-size: .82rem; font-weight: 600;
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--cerneala-med); text-decoration: none;
    transition: color var(--mediu);
}
.fila::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
    height: 2px; background: var(--lemn);
    transform: scaleX(0); transform-origin: left;
    transition: transform var(--mediu);
}
.fila:hover { color: var(--lemn-inchis); }
.fila:hover::after { transform: scaleX(1); }

.fila--activa { color: var(--cerneala); }
.fila--activa::after { transform: scaleX(1); }

.fila__numar {
    font-size: .7rem; font-weight: 400; letter-spacing: .04em;
    color: var(--cerneala-slab);
}
.fila--activa .fila__numar { color: var(--lemn-inchis); }


/* --- Grilă masonry -------------------------------------------------
   Fără JavaScript rămâne o grilă obișnuită, cu fotografii de înălțimi
   diferite pe rânduri egale — corectă, doar mai puțin strânsă. Cu
   JavaScript, fiecare element primește un număr de rânduri calculat din
   proporția lui, iar coloanele se împletesc.

   Proporția vine din HTML (`--proportie`), nu din imaginea încărcată:
   altfel grila ar sălta la fiecare fotografie sosită. */

.masonry {
    list-style: none; margin: 0; padding: 0;
    display: grid; gap: var(--sp-3);
    grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 46rem) { .masonry { grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); } }
@media (min-width: 68rem) { .masonry { grid-template-columns: repeat(4, 1fr); } }

.masonry__element { position: relative; }
.masonry__element[hidden] { display: none; }

/* Fără JavaScript: fiecare fotografie își păstrează proporția reală. */
.masonry__legatura {
    display: block; position: relative; overflow: hidden;
    border-radius: var(--raza-mare);
    background: var(--nisip-inchis);
    aspect-ratio: 1 / var(--proportie, .75);
    box-shadow: var(--umbra-mica);
    transition: box-shadow var(--lent), transform var(--lent);
}
.masonry__legatura::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(to top, rgba(14, 27, 43, .35), rgba(14, 27, 43, 0) 55%);
    opacity: 0; transition: opacity var(--lent);
}
.masonry__legatura:hover { box-shadow: var(--umbra); transform: translateY(-3px); }
.masonry__legatura:hover::after { opacity: 1; }

.masonry__element img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 900ms cubic-bezier(.22, .61, .36, 1);
}
.masonry__legatura:hover img { transform: scale(1.06); }

/* Cu JavaScript: rânduri fine, iar înălțimea vine din numărul de rânduri
   ocupate. Proporția se mută de pe legătură pe element, ca grila să o
   poată controla. */
.masonry--activ { grid-auto-rows: 4px; row-gap: 0; align-items: start; }
.masonry--activ .masonry__element {
    grid-row-end: span var(--randuri, 60);
    margin-bottom: var(--sp-3);
}
@media (min-width: 46rem) {
    .masonry--activ .masonry__element { margin-bottom: var(--sp-4); }
}
.masonry--activ .masonry__legatura { aspect-ratio: auto; height: 100%; }

.masonry__gol {
    margin: var(--sp-8) 0; text-align: center; color: var(--cerneala-med);
}
.masonry__gol[hidden] { display: none; }

/* ---------------------------------------------------------------------
   11. PAGINA CAMEREI
   --------------------------------------------------------------------- */

.galerie-camera {
    list-style: none; margin: 0; padding: 0;
    display: grid; gap: var(--sp-3); grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 44rem) {
    .galerie-camera { grid-template-columns: repeat(4, 1fr); }
    .galerie-camera__element--mare { grid-column: span 2; grid-row: span 2; }
}
.galerie-camera__element {
    position: relative; aspect-ratio: 4 / 3; overflow: hidden;
    border-radius: var(--raza-mare); background: var(--nisip-inchis);
}
.galerie-camera__legatura { display: block; width: 100%; height: 100%; }
.galerie-camera__element img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 800ms cubic-bezier(.22,.61,.36,1);
}
.galerie-camera__legatura:hover img { transform: scale(1.05); }

.coloane { display: grid; gap: var(--sp-7); grid-template-columns: 1fr; }
@media (min-width: 64rem) {
    .coloane { grid-template-columns: minmax(0, 1fr) 22rem; gap: var(--sp-8); align-items: start; }
    .coloane__lateral { position: sticky; top: 6rem; }
}

.bloc { margin-top: var(--sp-7); }
.bloc__titlu {
    font-size: 1.4rem; margin-bottom: var(--sp-4);
    padding-bottom: var(--sp-3); border-bottom: 1px solid var(--linie);
}

.specificatii { margin: 0 0 var(--sp-6); padding: 0; }
.specificatii__rand {
    display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5);
    padding: var(--sp-4) 0; border-bottom: 1px solid var(--linie);
}
.specificatii__rand:first-child { border-top: 1px solid var(--linie); }
.specificatii dt {
    flex: 0 0 9rem; font-size: .74rem; letter-spacing: .14em;
    text-transform: uppercase; color: var(--cerneala-slab);
}
.specificatii dd { margin: 0; flex: 1 1 12rem; font-size: 1.02rem; }

/* Panoul de rezervare din coloana laterală. */
.panou-rezervare {
    background: var(--noapte-medie); color: #fff;
    border-radius: var(--raza-mare); padding: var(--sp-6);
    box-shadow: var(--umbra);
}
.panou-rezervare__titlu {
    font-size: 1.2rem; color: #fff; margin-bottom: var(--sp-2);
}
.panou-rezervare__text {
    font-size: .92rem; color: rgba(255,255,255,.75); margin-bottom: var(--sp-5);
}
.panou-rezervare__telefon {
    margin: var(--sp-4) 0 0; font-size: .88rem; text-align: center;
    color: rgba(255,255,255,.65);
}
.panou-rezervare__telefon a { color: var(--lemn-deschis); }


/* ---------------------------------------------------------------------
   12. ÎMPREJURIMI
   --------------------------------------------------------------------- */

.lista-obiective {
    list-style: none; margin: 0; padding: 0;
    display: grid; gap: var(--sp-5); grid-template-columns: 1fr;
}
@media (min-width: 40rem) { .lista-obiective { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .lista-obiective { grid-template-columns: repeat(3, 1fr); } }

/* Cardul unui obiectiv.

   Mai putin de jumatate din obiective au fotografie. Cand cardul era doar
   text pe fundalul sectiunii, cel fara poza lasa in grila un gol cat
   imaginea vecinului - se vedea limpede pe randul cu Parcul Traian, unde
   o coloana avea imagine si celelalte doua ramaneau albe.

   Doua masuri, impreuna: cardul are suprafata proprie si se intinde pe
   toata inaltimea randului, deci un card scurt arata intentionat, nu
   gaurit; iar obiectivele cu fotografie sunt sortate primele in
   obiective_cu_foto(), asa ca randurile ies omogene. */
.obiectiv {
    display: flex; flex-direction: column;
    background: var(--crem); border: 1px solid var(--linie);
    border-radius: var(--raza-mare); padding: var(--sp-5);
    height: 100%;
    transition: box-shadow var(--lent), transform var(--lent);
}
.obiectiv:hover { box-shadow: var(--umbra); transform: translateY(-3px); }

.sectiune--nisip .obiectiv { background: var(--crem); }
.sectiune--crem  .obiectiv { background: var(--nisip); border-color: var(--nisip-inchis); }
.sectiune--inchisa .obiectiv {
    background: var(--noapte-medie); border-color: rgba(255, 255, 255, .12);
}

.obiectiv__nume { font-size: 1.15rem; margin-bottom: var(--sp-2); }
.obiectiv__distanta {
    font-size: .76rem; letter-spacing: .12em; text-transform: uppercase;
    color: var(--lemn-inchis); margin-bottom: var(--sp-2);
}
.sectiune--inchisa .obiectiv__distanta { color: var(--lemn-deschis); }
.obiectiv__descriere { font-size: .96rem; color: var(--cerneala-med); }
.obiectiv__link { margin-top: var(--sp-3); font-size: .88rem; }

/* Corpul creste, ca linkul si creditul sa cada la baza cardului
   indiferent cat text are fiecare obiectiv. */
.obiectiv__corp { display: flex; flex-direction: column; flex: 1; }

.obiectiv__media {
    aspect-ratio: 3 / 2; overflow: hidden;
    border-radius: var(--raza); background: var(--nisip-inchis);
    margin-bottom: var(--sp-4);
}
.obiectiv__media img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 800ms cubic-bezier(.22,.61,.36,1);
}
.obiectiv:hover .obiectiv__media img { transform: scale(1.05); }

.grup-obiective + .grup-obiective { margin-top: var(--sp-8); }
.grup-obiective__titlu { margin-bottom: var(--sp-5); }


/* ---------------------------------------------------------------------
   13. CONTACT
   --------------------------------------------------------------------- */

.lista-contact { margin: 0; padding: 0; }
.lista-contact__rand {
    display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5);
    padding: var(--sp-4) 0; border-bottom: 1px solid var(--linie);
}
.lista-contact__rand:first-child { border-top: 1px solid var(--linie); }
.lista-contact dt {
    flex: 0 0 8rem; font-size: .74rem; letter-spacing: .14em;
    text-transform: uppercase; color: var(--cerneala-slab);
}
.lista-contact dd { margin: 0; flex: 1 1 14rem; font-size: 1.02rem; }
.lista-contact--mare dt { flex-basis: 10rem; }

.harta {
    aspect-ratio: 16 / 9; border-radius: var(--raza-mare);
    overflow: hidden; background: var(--nisip-inchis); box-shadow: var(--umbra-mica);
}
.harta__cadru { width: 100%; height: 100%; border: 0; display: block; }

/* Fațada: ce se vede pana la apasare. Fara pictograma si fara o
   imagine falsa de harta - doar un camp de nisip cu adresa scrisa. */
.harta__fatada {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: var(--sp-3); width: 100%; height: 100%;
    padding: var(--sp-6); text-align: center; text-decoration: none;
    background:
        repeating-linear-gradient(45deg,
            rgba(176, 128, 80, .05) 0 12px, transparent 12px 24px),
        var(--nisip);
    color: var(--cerneala);
    transition: background-color var(--mediu);
}
.harta__fatada:hover { background-color: var(--nisip-inchis); color: var(--cerneala); }
.harta__eticheta {
    font-size: .78rem; font-weight: 600; letter-spacing: .18em;
    text-transform: uppercase; color: var(--lemn-inchis);
}
.harta__adresa { font-family: var(--font-titlu); font-size: 1.3rem; }
.harta__nota { font-size: .82rem; color: var(--cerneala-slab); max-width: 34ch; }

/* Harta activa: Leaflet primeste inaltimea de la container, iar
   fatada dispare in momentul in care harta se construieste. */
.harta--activa { cursor: grab; }
.harta--activa:active { cursor: grabbing; }
.harta .leaflet-container { width: 100%; height: 100%; font: inherit; background: var(--nisip-inchis); }
.harta .leaflet-control-attribution {
    font-size: 11px; background: rgba(253, 251, 247, .88); color: var(--cerneala-med);
}
.harta .leaflet-control-attribution a { color: var(--bleu); }
.harta__popup { display: flex; flex-direction: column; gap: 2px; font-size: .9rem; }
.harta__popup strong { font-family: var(--font-titlu); font-size: 1.05rem; font-weight: 400; }

/* Atribuirea OpenStreetMap, ceruta de licenta ODbL. Sta sub harta,
   in afara ei, ca sa fie vizibila chiar daca placile nu se incarca. */
.harta__atribuire {
    margin: var(--sp-3) 0 0; font-size: .78rem; color: var(--cerneala-slab);
}
.harta__atribuire a { color: inherit; text-decoration: underline; text-underline-offset: .15em; }

.harta-blocata {
    border: 1px dashed var(--linie-tare); border-radius: var(--raza-mare);
    padding: var(--sp-8) var(--sp-5); text-align: center; background: var(--lemn-palid);
}
.harta-blocata__text { color: var(--cerneala-med); max-width: 34rem; margin-inline: auto; }
.harta-blocata__link { margin-top: var(--sp-4); font-size: .92rem; }

.linkuri-utile { margin-top: var(--sp-7); }
.linkuri-utile__lista {
    list-style: none; display: flex; flex-wrap: wrap; justify-content: center;
    gap: var(--sp-5); margin: 0; padding: 0; font-size: .92rem;
}


/* ---------------------------------------------------------------------
   14. CONDIȚII DE REZERVARE
   Bandă distinctă, pe bleumarin, ca informația despre plată să nu se
   piardă printre celelalte secțiuni.
   --------------------------------------------------------------------- */

.conditii {
    background: var(--bleu); color: rgba(255, 255, 255, .9);
    padding-block: var(--sp-8);
}
.conditii__grila {
    display: grid; gap: var(--sp-6); grid-template-columns: 1fr; align-items: start;
}
@media (min-width: 56rem) {
    .conditii__grila { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); gap: var(--sp-8); }
}
.conditii__titlu { color: #fff; margin: 0; }
.conditii__text { font-size: 1.02rem; }
.conditii__text p { margin-bottom: var(--sp-3); }
.conditii__lista { list-style: none; margin: 0; padding: 0; }
.conditii__lista li {
    position: relative; padding: var(--sp-3) 0 var(--sp-3) var(--sp-5);
    border-bottom: 1px solid rgba(255, 255, 255, .16);
}
.conditii__lista li::before {
    content: ""; position: absolute; left: 0; top: 1.35em;
    width: 10px; height: 1px; background: var(--lemn-deschis);
}
.conditii__nota {
    margin-top: var(--sp-4); font-size: .88rem; color: rgba(255, 255, 255, .68);
}
.conditii__nota a { color: var(--lemn-deschis); }


/* ---------------------------------------------------------------------
   15. MODAL DE REZERVARE
   Două panouri: fotografia tipului ales în stânga, pașii în dreapta.
   Fără JavaScript, toți pașii sunt vizibili unul sub altul.
   --------------------------------------------------------------------- */

.modal {
    position: fixed; inset: 0; z-index: 250;
    display: none; align-items: center; justify-content: center;
    padding: var(--sp-3); overflow-y: auto;
}
.modal:target, .modal--deschis { display: flex; }

.modal__fundal {
    position: fixed; inset: 0;
    background: rgba(10, 18, 16, .78);
    backdrop-filter: blur(3px);
    animation: lb-intra 240ms ease-out;
}

.modal__panou {
    position: relative; width: 100%; max-width: 62rem; margin: auto;
    background: var(--crem); border-radius: var(--raza-mare);
    box-shadow: var(--umbra-mare); overflow: hidden;
    display: grid; grid-template-columns: 1fr;
    animation: modal-intra 340ms cubic-bezier(.22,.61,.36,1);
}
@keyframes modal-intra {
    from { opacity: 0; transform: translateY(24px) scale(.985); }
    to   { opacity: 1; transform: none; }
}

@media (min-width: 60rem) {
    .modal__panou { grid-template-columns: 20rem minmax(0, 1fr); }
}

/* Coloana cu fotografia tipului selectat. */
.modal__vizual {
    position: relative; display: none;
    background: var(--noapte-medie); min-height: 100%;
}
@media (min-width: 60rem) { .modal__vizual { display: block; } }

.modal__vizual img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; opacity: 0; transition: opacity var(--lent);
}
.modal__vizual img.vizibil { opacity: 1; }
.modal__vizual::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(14, 27, 43,.9), rgba(14, 27, 43,.25));
}
.modal__vizual-text {
    position: absolute; z-index: 2; left: 0; right: 0; bottom: 0;
    padding: var(--sp-5); color: #fff;
}
.modal__vizual-titlu { font-size: 1.3rem; color: #fff; margin: 0 0 var(--sp-2); }
.modal__vizual-meta {
    font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
    color: rgba(255,255,255,.7); margin: 0;
}

.modal__corp { display: flex; flex-direction: column; min-width: 0; }

.modal__antet {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: var(--sp-4); padding: var(--sp-5) var(--sp-5) 0;
}
.modal__titlu { margin: 0; font-size: 1.5rem; }
.modal__inchide {
    flex: 0 0 auto; font-size: .74rem; font-weight: 600;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--cerneala-slab); text-decoration: none;
    padding: .4rem .6rem; border: 1px solid var(--linie); border-radius: var(--raza);
    transition: all var(--mediu);
}
.modal__inchide:hover { border-color: var(--cerneala); color: var(--cerneala); }

/* Indicatorul de pași. */
.pasi {
    display: flex; gap: var(--sp-2); padding: var(--sp-4) var(--sp-5) 0;
    list-style: none; margin: 0;
}
.pasi[hidden] { display: none; }
.pas {
    flex: 1; font-size: .68rem; font-weight: 600; letter-spacing: .1em;
    text-transform: uppercase; color: var(--cerneala-slab);
    padding-top: var(--sp-2); border-top: 2px solid var(--linie);
    transition: color var(--mediu), border-color var(--mediu);
}
.pas--activ { color: var(--lemn-inchis); border-top-color: var(--lemn); }
.pas--gata { color: var(--verde); border-top-color: var(--verde); }

.formular { padding: var(--sp-5); }
.formular__rand { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; }
@media (min-width: 34rem) { .formular__rand { grid-template-columns: repeat(2, 1fr); } }

/* Un pas ascuns rămâne în DOM: fără JavaScript toate sunt vizibile. */
.formular__pas { display: block; }
.formular__pas--ascuns { display: none; }

.camp { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.camp--complet { grid-column: 1 / -1; }

.camp__eticheta {
    font-size: .72rem; font-weight: 700; letter-spacing: .12em;
    text-transform: uppercase; color: var(--cerneala-slab);
}

.camp__control {
    font: inherit; font-size: 1rem; width: 100%;
    padding: .8rem .9rem; color: var(--cerneala); background: #fff;
    border: 1px solid var(--linie-tare); border-radius: var(--raza);
    transition: border-color var(--mediu), box-shadow var(--mediu);
}
.camp__control:focus {
    outline: none; border-color: var(--bleu);
    box-shadow: 0 0 0 3px var(--bleu-palid);
}
.camp__control[aria-invalid="true"] { border-color: var(--alarma); }
.camp__control--zona { resize: vertical; min-height: 5.5rem; }

.camp__eroare { margin: 0; font-size: .85rem; color: var(--alarma); }
.camp__contor { margin: 0; font-size: .78rem; color: var(--cerneala-slab); text-align: right; }

.camp--acord { margin-top: var(--sp-3); }
.acord {
    display: flex; gap: var(--sp-3); align-items: flex-start; cursor: pointer;
    padding: var(--sp-4); background: var(--nisip); border-radius: var(--raza);
}
.acord input { margin-top: .25rem; flex: 0 0 auto; width: 1.05rem; height: 1.05rem; accent-color: var(--bleu); }
.acord__text { font-size: .84rem; line-height: 1.55; color: var(--cerneala-med); }

.formular__nopti {
    margin: 0 0 var(--sp-4); padding: var(--sp-3) var(--sp-4);
    background: var(--bleu-palid); border-radius: var(--raza);
    font-size: .9rem; font-weight: 600; color: var(--bleu-inchis);
}
.formular__nopti[hidden] { display: none; }

.formular__actiuni {
    display: flex; flex-wrap: wrap; gap: var(--sp-3);
    margin-top: var(--sp-5); padding-top: var(--sp-5);
    border-top: 1px solid var(--linie);
}
.formular__actiuni .buton { flex: 1 1 10rem; }

.formular__nota { margin: var(--sp-4) 0 0; font-size: .8rem; line-height: 1.55; color: var(--cerneala-slab); }
.formular__alternativa { margin: var(--sp-3) 0 0; font-size: .88rem; text-align: center; color: var(--cerneala-slab); }

.formular__eroare-generala {
    margin: 0 0 var(--sp-4); padding: var(--sp-4);
    font-size: .92rem; color: var(--alarma);
    background: #fdf1ef; border-left: 3px solid var(--alarma); border-radius: var(--raza);
}

/* Rezumatul din ultimul pas. */
.rezumat {
    margin: 0 0 var(--sp-5); padding: var(--sp-4);
    background: var(--nisip); border-radius: var(--raza);
}
.rezumat[hidden] { display: none; }
.rezumat__rand {
    display: flex; justify-content: space-between; gap: var(--sp-4);
    padding: var(--sp-2) 0; border-bottom: 1px solid var(--linie);
    font-size: .92rem;
}
.rezumat__rand:last-child { border-bottom: 0; }
.rezumat__eticheta { color: var(--cerneala-slab); }
.rezumat__valoare { font-weight: 600; text-align: right; }

.modal__confirmare { padding: var(--sp-8) var(--sp-6); text-align: center; }
.modal__confirmare[hidden] { display: none; }
.confirmare__referinta {
    font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
    color: var(--lemn-inchis); margin-bottom: var(--sp-4);
}
.confirmare__text { color: var(--cerneala-med); }
.confirmare__text--mic { font-size: .88rem; color: var(--cerneala-slab); }


/* ---------------------------------------------------------------------
   16. BANNER COOKIE
   --------------------------------------------------------------------- */

.cookie {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 240;
    background: var(--noapte-medie); color: rgba(255,255,255,.85);
    box-shadow: 0 -8px 40px rgba(9, 17, 27, .38);
    animation: cookie-intra 420ms cubic-bezier(.22,.61,.36,1) 600ms both;
    /* Pagina se întinde sub bara de gesturi de pe iPhone, de când
       viewport-ul are viewport-fit=cover. Butoanele bannerului nu au voie
       să ajungă acolo. */
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
.cookie[hidden] { display: none; }
/* Butonul din subsol este o ancora catre #cookie-banner. Fara
   JavaScript, asta e singurul fel in care bannerul ascuns poate fi
   readus: `:target` invinge `[hidden]` prin specificitate. */
.cookie[hidden]:target { display: block; }
@keyframes cookie-intra { from { transform: translateY(100%); } to { transform: none; } }

.cookie__interior { padding-block: var(--sp-5); }

.cookie__principal {
    display: grid; gap: var(--sp-5); grid-template-columns: 1fr; align-items: center;
}
@media (min-width: 60rem) {
    .cookie__principal { grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-7); }
}

.cookie__titlu {
    font-family: var(--font); font-size: .74rem; font-weight: 700;
    letter-spacing: .16em; text-transform: uppercase;
    color: var(--lemn-deschis); margin-bottom: var(--sp-2);
}
.cookie__text { font-size: .92rem; margin: 0; max-width: 62ch; color: rgba(255,255,255,.78); }
.cookie__text a { color: var(--lemn-deschis); }
.cookie__nota {
    margin: var(--sp-2) 0 0; font-size: .8rem;
    color: rgba(255, 255, 255, .55);
}

.cookie__actiuni { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
@media (max-width: 59.999rem) { .cookie__actiuni .buton { flex: 1 1 8rem; } }

/* Panoul de setări pe categorii. */
.cookie__setari {
    margin-top: var(--sp-5); padding-top: var(--sp-5);
    border-top: 1px solid rgba(255,255,255,.16);
}
.cookie__setari[hidden] { display: none; }

.cookie__categorii {
    list-style: none; margin: 0 0 var(--sp-5); padding: 0;
    display: grid; gap: var(--sp-3); grid-template-columns: 1fr;
}
@media (min-width: 48rem) { .cookie__categorii { grid-template-columns: repeat(3, 1fr); } }

.cookie__categorie {
    padding: var(--sp-4); background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.12); border-radius: var(--raza);
}
.cookie__eticheta { display: flex; gap: var(--sp-3); align-items: flex-start; cursor: pointer; }
.cookie__eticheta input { margin-top: .2rem; accent-color: var(--lemn); width: 1rem; height: 1rem; }
.cookie__eticheta input[disabled] { opacity: .6; }
.cookie__nume { display: block; font-weight: 600; color: #fff; font-size: .92rem; }
.cookie__descriere { display: block; font-size: .82rem; color: rgba(255,255,255,.62); margin-top: 3px; }


/* ---------------------------------------------------------------------
   16bis. BARA FIXĂ DE ACȚIUNI, PE TELEFON
   ---------------------------------------------------------------------
   Două acțiuni, sub degetul mare: sunatul și cererea de rezervare.
   Există numai sub pragul la care navigarea se pliază — același prag ca
   butonul de meniu, ca telefonul și tableta să se comporte la fel.

   Amândouă sunt ancore, deci merg fără JavaScript. Înălțimea utilă a
   fiecărui buton este de cel puțin 44 px, ținta minimă recomandată
   pentru atingere.
   --------------------------------------------------------------------- */

.bara-mobila {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 230;
    display: flex; gap: 1px;
    background: var(--linie);
    border-top: 1px solid var(--linie);
    box-shadow: 0 -4px 20px rgba(14, 27, 43, .14);
    /* Marginea de siguranță de pe iPhone intră sub butoane, nu peste
       ele: culoarea barei coboară până la marginea ecranului, textul
       rămâne deasupra barei de gesturi. */
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

.bara-mobila__buton {
    flex: 1 1 0; min-width: 0;
    display: flex; align-items: center; justify-content: center;
    min-height: 3rem; padding: .8rem var(--sp-3);
    font: inherit; font-size: .84rem; font-weight: 600;
    letter-spacing: .1em; text-transform: uppercase;
    text-align: center; text-decoration: none;
    background: var(--crem); color: var(--cerneala);
    transition: background var(--mediu), color var(--mediu);
}
.bara-mobila__buton:hover { background: var(--nisip); color: var(--lemn-inchis); }
.bara-mobila__buton:active { background: var(--nisip-inchis); }
.bara-mobila__buton:focus-visible { outline: 2px solid var(--lemn-inchis); outline-offset: -3px; }

.bara-mobila__buton--primar {
    background: var(--lemn); color: var(--noapte);
}
.bara-mobila__buton--primar:hover { background: var(--lemn-deschis); color: var(--noapte); }
.bara-mobila__buton--primar:active { background: var(--lemn-inchis); color: #fff; }

/* Pe ecran mare nu apare deloc. */
@media (min-width: 64rem) { .bara-mobila { display: none; } }

/* Bara nu stă niciodată peste bannerul de cookie-uri și nici peste
   modalul de rezervare: amândouă ocupă aceeași margine de jos, iar două
   suprafețe suprapuse acolo ar fi ilizibile. Bannerul apare o singură
   dată, iar modalul se închide, deci bara revine imediat.

   `:has()` este deja folosit în fișier, pentru meniul deschis peste
   fotografie. Unde lipsește, bara rămâne vizibilă sub banner: z-index-ul
   ei este mai mic, deci bannerul o acoperă oricum. */
body:has(#cookie-banner:not([hidden])) .bara-mobila,
body:has(#cookie-banner:target) .bara-mobila,
body:has(.modal:target) .bara-mobila,
body:has(.modal--deschis) .bara-mobila { display: none; }


/* ---------------------------------------------------------------------
   17. SUBSOL
   --------------------------------------------------------------------- */

.sit-subsol {
    padding-block: var(--sp-8) var(--sp-5);
    background: var(--noapte); color: rgba(255, 255, 255, .68);
    font-size: .92rem;
}

/* Sub bara fixă de acțiuni, subsolul primește dedesubt exact înălțimea
   ei, ca ultimul rând să nu rămână acoperit. Se calculează, nu se
   ghicește: spațiul obișnuit, plus 3rem butonul, plus chenarul de sus,
   plus marginea de siguranță de pe iPhone.

   Regula stă aici, după declarația de mai sus, nu lângă restul barei:
   `padding-block` este prescurtare și scrie și `padding-bottom`, deci
   dintr-un loc anterior din fișier ar fi fost suprascrisă. */
@media (max-width: 63.999rem) {
    .sit-subsol {
        padding-bottom: calc(var(--sp-5) + 3rem + 1px + env(safe-area-inset-bottom, 0px));
    }
}

.subsol__grila {
    display: grid; gap: var(--sp-6); grid-template-columns: 1fr;
    padding-bottom: var(--sp-7);
}
@media (min-width: 38rem) { .subsol__grila { grid-template-columns: repeat(2, 1fr); } }
/* Cinci coloane cand exista si recomandarile. La patru sau mai putine,
   auto-fit le distribuie singur, fara reguli separate. */
@media (min-width: 64rem) {
    .subsol__grila { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: var(--sp-7); }
}

.subsol__titlu {
    font-family: var(--font); font-size: .7rem; font-weight: 700;
    letter-spacing: .18em; text-transform: uppercase;
    color: var(--lemn); margin-bottom: var(--sp-4);
}

.subsol__adresa { font-style: normal; display: flex; flex-direction: column; gap: var(--sp-2); }
.subsol__unitate { color: #fff; font-family: var(--font-titlu); font-size: 1.1rem; }
.subsol__logo {
    display: block; width: auto; height: 3.2rem;
    margin-bottom: var(--sp-4);
}

.subsol__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }

.sit-subsol a { color: rgba(255, 255, 255, .78); text-decoration: none; transition: color var(--mediu); }
.sit-subsol a:hover { color: var(--lemn-deschis); }

/* Plachetele ANPC. Se afiseaza la latimea lor naturala sau sub ea - sunt
   fisiere oficiale, publicate de ANPC la 201 si 250 px, si nu se maresc:
   marite ar iesi neclare. */
.subsol__placute {
    display: flex; flex-wrap: wrap; gap: var(--sp-4);
    align-items: center;
    padding-top: var(--sp-6);
    margin-top: var(--sp-6);
    border-top: 1px solid rgba(255, 255, 255, .12);
}
.subsol__placuta { display: inline-flex; border-radius: var(--raza); }
.subsol__placuta img {
    display: block; width: auto; height: 2.6rem;
    transition: opacity var(--mediu);
}
.subsol__placuta:hover img { opacity: .82; }

.subsol__final {
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-3);
    padding-top: var(--sp-5); border-top: 1px solid rgba(255, 255, 255, .12);
    font-size: .8rem; color: rgba(255, 255, 255, .5);
}
.subsol__drepturi, .subsol__autor, .subsol__certificat { margin: 0; }
.subsol__certificat a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.25); }
.subsol__certificat a:hover { color: var(--lemn-deschis); border-bottom-color: var(--lemn-deschis); }


/* Preferintele de cookie-uri, accesibile de pe orice pagina. Are
   contur, ca sa se citeasca drept comanda, nu drept inca un link din
   randul de jos. */
.subsol__preferinte {
    display: inline-block; padding: var(--sp-2) var(--sp-4);
    border: 1px solid rgba(255, 255, 255, .22); border-radius: var(--raza);
    font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
    color: rgba(255, 255, 255, .7); text-decoration: none;
    transition: border-color var(--mediu), color var(--mediu);
}
.subsol__preferinte:hover {
    border-color: var(--lemn); color: var(--lemn-deschis);
}

/* ---------------------------------------------------------------------
   18. COMPLETĂRI PENTRU PAGINILE INTERIOARE
   Clase folosite de camera.php, imprejurimi.php, contact.php și
   pagina-legala.php, grupate aici ca să nu se piardă printre secțiunile
   paginii de start.
   --------------------------------------------------------------------- */

/* Firimituri peste fotografie: aceleași proporții, alte culori. */
.firimituri--pe-inchis { padding-top: 0; margin-bottom: var(--sp-4); }
.firimituri--pe-inchis .firimituri__lista { color: rgba(255, 255, 255, .7); }
.firimituri--pe-inchis .firimituri__lista a { color: rgba(255, 255, 255, .82); }
.firimituri--pe-inchis .firimituri__lista a:hover { color: var(--lemn-deschis); }
.firimituri--pe-inchis .firimituri__lista li + li::before { color: rgba(255, 255, 255, .45); }

/* Antetul paginilor de document, pe fond de nisip. */
.banda-document {
    background: var(--nisip);
    border-bottom: 1px solid var(--linie);
}
.banda-document .pagina-antet { padding-bottom: var(--sp-7); }

/* --- Certificatul de clasificare ------------------------------------
   Datele in stanga, imaginea in dreapta. Cand imaginea lipseste, lista
   de date ocupa singura latimea si nu ramane o coloana goala. */
.certificat {
    display: grid; gap: var(--sp-6); grid-template-columns: 1fr;
    align-items: start;
}
@media (min-width: 60rem) {
    .certificat:has(.certificat__imagine) { grid-template-columns: minmax(0, 1fr) 22rem; }
}

.certificat__date {
    margin: 0;
    background: var(--crem); border: 1px solid var(--linie);
    border-radius: var(--raza-mare); padding: var(--sp-5) var(--sp-6);
}
.certificat__rand {
    display: grid; gap: var(--sp-1) var(--sp-4); grid-template-columns: 1fr;
    padding: var(--sp-3) 0; border-bottom: 1px solid var(--linie);
}
.certificat__rand:last-child { border-bottom: 0; padding-bottom: 0; }
.certificat__rand:first-child { padding-top: 0; }
@media (min-width: 34rem) { .certificat__rand { grid-template-columns: 11rem minmax(0, 1fr); } }

.certificat__rand dt {
    margin: 0; font-size: .76rem; letter-spacing: .12em;
    text-transform: uppercase; color: var(--cerneala-slab);
}
.certificat__rand dd { margin: 0; color: var(--cerneala); }

.certificat__imagine { margin: 0; }
.certificat__imagine a {
    display: block; overflow: hidden;
    border: 1px solid var(--linie); border-radius: var(--raza-mare);
    background: var(--crem); padding: var(--sp-3);
    transition: box-shadow var(--lent), transform var(--lent);
}
.certificat__imagine a:hover { box-shadow: var(--umbra); transform: translateY(-3px); }
.certificat__imagine img { display: block; width: 100%; height: auto; border-radius: var(--raza); }
.certificat__legenda {
    margin-top: var(--sp-3); text-align: center;
    font-size: .8rem; color: var(--cerneala-slab);
}

/* --- Pagina de document, cu bara laterala ---------------------------
   Documentele legale se citesc unul dupa altul: cine deschide termenii
   vrea de obicei si politica de confidentialitate. Bara le tine pe
   toate la vedere.

   Un singur marcaj pentru amandoua asezarile. Pe telefon bara este un
   bloc strans deasupra textului; de la 64rem trece in stanga si ramane
   lipita la derulare. Comutarea o face exclusiv CSS-ul, deci nu depinde
   de JavaScript si nu are stare de tinut minte.

   Cadrul este mai ingust decat containerul: cu bara pe stanga, coloana
   de text ramane la o masura citibila in loc sa se intinda pe toata
   latimea. */
/* Antetul paginii si grila de dedesubt impart aceeasi latime, ca titlul
   sa inceapa exact deasupra barei laterale, nu mai la stanga de ea. */
.doc-latime { max-width: 64rem; margin-inline: auto; }

.doc-cadru {
    display: grid; gap: var(--sp-6); grid-template-columns: 1fr;
}

.doc-lateral {
    background: var(--nisip); border: 1px solid var(--linie);
    border-radius: var(--raza-mare); padding: var(--sp-4) var(--sp-5);
}
.doc-lateral__titlu {
    font-family: var(--font);
    font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
    color: var(--cerneala-slab); margin: 0 0 var(--sp-3);
}
.doc-lateral__lista { list-style: none; margin: 0; padding: 0; }
.doc-lateral__link {
    display: block; padding: var(--sp-2) 0;
    font-size: .95rem; line-height: 1.4;
    color: var(--cerneala-med); text-decoration: none;
    transition: color var(--mediu);
}
.doc-lateral__link:hover { color: var(--lemn-inchis); }

/* Documentul curent: lemn, plus greutate. Culoarea singura nu ajunge ca
   marcaj - de aceea si aria-current in marcaj, si conturul din stanga
   pe desktop. */
.doc-lateral__link--activ { color: var(--lemn-inchis); font-weight: 600; }

.doc-corp { min-width: 0; }

/* Creditele foto, cand pagina desemnata le are, stau in coloana de text,
   nu pe toata latimea: fac parte din document. */
.doc-credite {
    margin-top: var(--sp-8);
    padding-top: var(--sp-6);
    border-top: 1px solid var(--linie);
}
.doc-credite__titlu { font-size: 1.5rem; margin-bottom: 0; }
.doc-credite .rigla { margin-bottom: 0; }

@media (min-width: 64rem) {
    .doc-cadru {
        grid-template-columns: 15rem minmax(0, 1fr);
        gap: var(--sp-8); align-items: start;
    }
    .doc-lateral {
        position: sticky; top: 6rem;
        background: none; border: 0; border-left: 1px solid var(--linie);
        border-radius: 0; padding: var(--sp-2) 0 var(--sp-2) var(--sp-5);
    }
    .doc-lateral__link {
        padding: var(--sp-2) 0 var(--sp-2) var(--sp-4);
        margin-left: calc(-1 * var(--sp-5) - 1px);
        border-left: 2px solid transparent;
    }
    .doc-lateral__link--activ { border-left-color: var(--lemn); }
}

/* Tabelul de tarife. Se randează numai când există tarife în bază; până
   atunci regulile de aici nu au pe ce să se aplice. */
.tabel-tarife { width: 100%; border-collapse: collapse; font-size: .98rem; }
.tabel-tarife th, .tabel-tarife td {
    text-align: left; padding: var(--sp-4) var(--sp-3);
    border-bottom: 1px solid var(--linie); vertical-align: top;
}
.tabel-tarife thead th {
    font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
    color: var(--cerneala-slab); font-weight: 600;
    border-bottom-color: var(--linie-tare);
}
.tabel-tarife tbody th { font-weight: 600; }
.tabel-tarife__sezon { display: block; }
.tabel-tarife__interval {
    display: block; margin-top: 2px; font-weight: 400;
    font-size: .82rem; color: var(--cerneala-slab);
}
.tabel-tarife__pret { font-family: var(--font-titlu); font-size: 1.15rem; }
.tabel-tarife__unitate { font-size: .82rem; color: var(--cerneala-slab); }
.tabel-tarife__minim {
    display: block; margin-top: 2px;
    font-size: .8rem; color: var(--lemn-inchis);
}

/* Prețul din panoul lateral. Apare doar cu tarife în bază. */
.panou-rezervare__pret {
    margin: 0 0 var(--sp-5); padding-bottom: var(--sp-5);
    border-bottom: 1px solid rgba(255, 255, 255, .15);
}
.panou-rezervare__eticheta {
    display: block; font-size: .7rem; letter-spacing: .16em;
    text-transform: uppercase; color: rgba(255, 255, 255, .6);
}
.panou-rezervare__valoare {
    font-family: var(--font-titlu); font-size: 2rem; color: #fff;
}
.panou-rezervare__unitate { font-size: .86rem; color: rgba(255, 255, 255, .65); }

/* Copiii de grid au implicit min-width:auto, deci o linie lunga sau un
   tabel lat ar largi coloana peste latimea containerului. */
.coloane__principal, .subsol__coloana { min-width: 0; }

/* Obiectivele detaliate: fotografie deasupra, text dedesubt. */
.sectiune--inchisa .obiectiv__descriere { color: rgba(255, 255, 255, .78); }
.sectiune--inchisa .obiectiv__nume { color: #fff; }

/* Titlul de grup, când stă în antetul de secțiune, nu mai are marginea
   proprie: o are deja `.sectiune__antet`. */
.sectiune__antet .grup-obiective__titlu { margin-bottom: 0; }


/* ---------------------------------------------------------------------
   19. TIPĂRIRE
   --------------------------------------------------------------------- */

@media print {
    .sit-antet, .sit-subsol, .cookie, .modal, .lightbox, .erou__indicatori,
    .sari-continut, .buton, .file, .sectiune__actiuni,
    .subsol__preferinte { display: none !important; }

    body { background: #fff; color: #000; font-size: 11pt; }
    .sit-continut { padding-top: 0; }
    .container { max-width: none; padding: 0; }
    .erou { min-height: auto; background: none; color: #000; }
    .erou::after { display: none; }
    .erou__titlu, .erou__slogan, .erou__adresa { color: #000; text-shadow: none; }
    .sectiune--inchisa, .conditii { background: none; color: #000; }
    .sectiune--inchisa h2, .conditii__titlu { color: #000; }
    a { color: #000; text-decoration: underline; }
    a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #444; }
    img { max-height: 8cm; }
    .apare { opacity: 1; transform: none; }
    .marca__logo--pe-inchis, .subsol__logo { display: none !important; }
    .marca__logo--pe-deschis { display: block !important; }
}