/* ==========================================================================
   BADASH TINY VILLAGE — design system (varianta a doua)
   --------------------------------------------------------------------------
   Structura: moon.ro (vezi reference/DECISIONS.md, „Refacere” și „Culori”).
   Pagină albă, o singură familie de font (Bricolage Grotesque), titluri bold
   scurte, fără punct, totul în carduri rotunjite și pastile.
   Paleta (cerută de proprietari): verde de pădure și bej/crem. Pagina e
   alb-crem; verdele închis e „cerneala” (titluri, logo, banda „Rezervă acum”,
   footerul); cremul cald e fundalul secțiunilor și al panourilor (--tint,
   --tint-d), deci rămân doar două familii: crem și verde; butoanele „Rezervă” sunt verde închis cu text crem (pe banda
   verde, invers: crem cu text verde). Griurile textului bat ușor în verde.
   Mobile first: stilurile de bază sunt pentru telefon, @media (min-width)
   adaugă pentru ecrane mai mari.

   1. Tokeni        5. Pastile & butoane    9. Carduri căsuțe     13. Pagini interioare
   2. Bază          6. Header & meniu      10. Acordeon           14. Lightbox
   3. Tipografie    7. Hero                11. Galerie & video    15. Bară jos & footer
   4. Layout        8. Secțiuni            12. Recenzii & contact 16. Mișcare redusă
   ========================================================================== */

/* ---------------------------------------------------------------- 1. TOKENI */
:root {
  --ink:     #1F221C;   /* aproape negru, neutru — titluri, text, butoane pline */
  --green:   #687A52;   /* verde mușchi — iconițe, accente */
  --green-d: #3A4A30;   /* verde oliv închis — text pe alb (contrast AA), banda, footerul */
  --cream:   #FFFCF5;   /* alb-crem, aproape alb — textul pe verde (butoanele „Rezervă”) și butonul de pe banda verde */
  /* fundalurile deschise: o singură familie crem, caldă */
  --bg:      #FFFFFF;   /* alb — pagina și cardurile; cremul rămâne doar pe secțiuni și panouri */
  --tint:    #F3EEE3;   /* crem fildeș — fundal de secțiune, panouri pe alb */
  --tint-d:  #E8E1D2;   /* crem închis — pastile, stări active, locul pozelor */
  --text:    #3A403A;   /* text de paragraf în carduri */
  --muted:   #5B6258;   /* gri-verde; contrast AA și pe --tint */
  --line:    rgba(52, 62, 38, .14);
  --shadow:  0 18px 44px -24px rgba(40, 46, 28, .35);

  --font:    'Bricolage Grotesque', 'Segoe UI', system-ui, -apple-system, sans-serif;

  --wrap:    1440px;   /* lat, ca pe prima pagină colajul să încapă în grilă, cu margini egale stânga-dreapta */
  --gut:     clamp(16px, 4vw, 40px);
  --sec:     clamp(56px, 8vw, 104px);
  --r:       24px;        /* carduri mari */
  --r-s:     16px;        /* carduri mici, panouri */
  --ease:    cubic-bezier(.2, .7, .2, 1);
  --top-h:   64px;
  --bar-h:   62px;        /* bara fixă de jos, pe telefon */
}

/* ---------------------------------------------------------------- 2. BAZĂ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--top-h) + 32px); }   /* ancorele (#tiny-houses) nu ajung sub header-ul fix */
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
::selection { background: var(--green); color: #fff; }
:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 6px; }

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 999px;
  text-decoration: none; font-weight: 600; transition: top .2s;
}
.skip:focus { top: 12px; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------------------------------------------------------------- 3. TIPOGRAFIE */
h1, h2, h3, h4 { margin: 0; font-weight: 800; letter-spacing: -.03em; line-height: 1.05; }
h1 { font-size: clamp(36px, 8vw, 68px); }
h2 { font-size: clamp(30px, 5.4vw, 52px); }
h3 { font-size: clamp(20px, 2.6vw, 24px); letter-spacing: -.02em; line-height: 1.2; font-weight: 700; }
h4 { font-size: 17px; letter-spacing: -.01em; font-weight: 700; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
b, strong { font-weight: 700; }

.label { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.lead { font-size: clamp(18px, 2.2vw, 22px); line-height: 1.45; font-weight: 500; }
.muted { color: var(--muted); }
.prose { max-width: 62ch; }
.prose p + p { margin-top: .25em; }
.num { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- 4. LAYOUT */
.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gut)); margin: 0 auto; padding: 0 var(--gut); }
.wrap--narrow { max-width: calc(760px + 2 * var(--gut)); }
.sec { padding: var(--sec) 0; }
.sec--tint { background: var(--tint); }
.sec__head { margin-bottom: clamp(24px, 4vw, 44px); }
.sec__head .label { display: block; margin-bottom: 12px; }
.sec__head p:not(.label) { margin-top: 14px; max-width: 60ch; color: var(--muted); }
.sec__head--row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; }

.split { display: grid; gap: clamp(24px, 4vw, 56px); }
@media (min-width: 880px) {
  .split { grid-template-columns: 1fr 1fr; align-items: start; }
  .split--wide { grid-template-columns: 5fr 7fr; }
  .split--center { align-items: center; }
}
/* titlul deasupra pozelor, iar textul centrat pe înălțimea pozelor (Activități → Ce cazări?) */
@media (min-width: 880px) {
  .split--pics { grid-template-rows: auto auto; row-gap: 0; }
  .split--pics > .sec__head { grid-column: 1; grid-row: 1; }
  .split--pics > .intro__pics { grid-column: 1; grid-row: 2; }
  .split--pics > .prose { grid-column: 2; grid-row: 2; align-self: center; }
}

/* reveal la scroll — dezactivat la prefers-reduced-motion */
[data-rev] { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: var(--d, 0ms); }
[data-rev].is-in { opacity: 1; transform: none; }

/* ---------------------------------------------------------------- 5. PASTILE & BUTOANE */
.ico { width: 22px; height: 22px; flex: none; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 0 22px; border-radius: 999px;
  font-weight: 600; font-size: 15px; text-decoration: none; border: 1.5px solid transparent;
  transition: background .25s, color .25s, border-color .25s, transform .25s var(--ease);
}
.btn .ico { width: 20px; height: 20px; }
.btn--solid { background: var(--ink); color: #fff; }
.btn--solid:hover { background: var(--green-d); }
.btn--book { background: var(--green-d); color: var(--cream); }
.btn--book:hover { background: #4B5D3F; color: var(--cream); }   /* același hover pe toate butoanele „Rezervă”: verde puțin mai deschis */
.btn--line { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn--line:hover { background: var(--ink); color: #fff; }
/* butonul mare, conturat, din hero */
.btn--big { min-height: 60px; padding: 0 30px; font-size: 17px; border-width: 2px; width: 100%; }
@media (min-width: 560px) { .btn--big { width: auto; } }
.btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.btn__arrow { width: 18px; height: 18px; transition: transform .25s var(--ease); }
.btn:hover .btn__arrow { transform: translate(2px, -2px); }

.chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px; border-radius: 999px; background: var(--tint-d); color: var(--ink);
  font-size: 13.5px; font-weight: 600; line-height: 1.2; text-decoration: none; white-space: nowrap;
}
.chip .ico { width: 16px; height: 16px; color: var(--green-d); }
.chip--line { background: transparent; border: 1px solid var(--line); }
.chip--dark { background: var(--ink); color: #fff; }
.chip--dark .ico { color: var(--tint); }
.chip--glass { background: rgba(255,255,255,.92); color: var(--ink); }
.chip--green { background: var(--green-d); color: #fff; }
.chip--green .ico { color: var(--cream); }
/* pe pozele căsuțelor: o umbră ușoară, ca chip-ul să se vadă pe orice fundal */
.house .chip--green { box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .45); }
button.chip { cursor: pointer; }
button.chip:hover, a.chip:hover { background: var(--ink); color: #fff; }
button.chip:hover .ico, a.chip:hover .ico { color: var(--tint); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }

.linkarrow { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; text-decoration: none; border-bottom: 1.5px solid var(--ink); padding-bottom: 2px; }
.linkarrow .ico { width: 16px; height: 16px; transition: transform .25s var(--ease); }
.linkarrow:hover .ico { transform: translate(2px, -2px); }

/* iconițele platformelor (Instagram, Airbnb, Booking, Travelminit) */
.socials { display: flex; gap: 8px; list-style: none; margin: 0; padding: 0; }
.socials a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--bg); transition: background .25s, color .25s; }
.socials a:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.socials .ico { width: 20px; height: 20px; }

/* ---------------------------------------------------------------- 6. HEADER & MENIU */
.top {
  position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .92); backdrop-filter: blur(12px);
  transition: box-shadow .3s;
}
.scrolled .top { box-shadow: 0 1px 0 var(--line); }
.top .wrap { display: flex; align-items: center; gap: 10px; height: var(--top-h); }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; margin-right: auto; }
.brand__mark { width: 40px; height: 30px; color: var(--green-d); }
.brand__txt { display: flex; flex-direction: column; line-height: 1; }
.brand__name { font-weight: 800; font-size: 18px; letter-spacing: -.02em; }
.brand__sub { font-size: 10px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin-top: 4px; }

.menu { display: none; }
@media (min-width: 1000px) {
  .menu { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
  .menu a { display: inline-block; padding: 9px 14px; border-radius: 999px; font-size: 14px; font-weight: 600; text-decoration: none; transition: background .2s; }
  .menu a:hover { background: var(--tint); }
  .menu a[aria-current] { background: var(--tint-d); }   /* „page” = pagina curentă; „location” = secțiunea din pagină (js/main.js) */
}
.top__cta { display: none; }
@media (min-width: 1000px) { .top__cta { display: inline-flex; min-height: 42px; padding: 0 18px; font-size: 14px; } }

/* comutatorul de limbă — pastilă cu steag */
.langsw { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; padding: 3px; }
.langsw button { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; letter-spacing: .04em; color: var(--muted); }
.langsw button[aria-pressed="true"] { background: var(--tint-d); color: var(--ink); }
.langsw__flag { width: 16px; height: 11px; border-radius: 2px; }
.langsw button[aria-pressed="false"] .langsw__flag { opacity: .55; }
.langsw__sep { display: none; }

.burger { width: 44px; height: 44px; display: grid; place-items: center; margin-right: -8px; border-radius: 50%; }
.burger span { display: block; width: 22px; height: 2px; background: currentColor; border-radius: 2px; position: relative; transition: background .2s; }
.burger span::before, .burger span::after { content: ''; position: absolute; left: 0; width: 22px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .3s var(--ease); }
.burger span::before { top: -7px; } .burger span::after { top: 7px; }
.nav-open .burger span { background: transparent; }
.nav-open .burger span::before { transform: translateY(7px) rotate(45deg); }
.nav-open .burger span::after { transform: translateY(-7px) rotate(-45deg); }
@media (min-width: 1000px) { .burger { display: none; } }

/* meniul de telefon: o foaie albă care coboară de sus */
.nav {
  position: fixed; inset: var(--top-h) 0 0 0; z-index: 45; background: var(--bg);
  padding: 16px var(--gut) calc(24px + env(safe-area-inset-bottom)); overflow-y: auto;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .3s, transform .3s var(--ease), visibility 0s .3s;
}
.nav-open .nav { opacity: 1; visibility: visible; transform: none; transition: opacity .3s, transform .3s var(--ease); }
/* meniul de telefon, în stilul site-ului: etichete mici cu majuscule grupează
   linkurile (Tiny Houses / Descoperă), linkurile au stilul titlurilor (bold,
   spațiere strânsă), pagina curentă e verde cu un punct, iar finalul e
   butonul bej ca „Rezervă acum” de pe prima pagină. */
.nav ul { list-style: none; margin: 0; padding: 0; }
.nav:focus { outline: none; }
.nav__label { display: block; margin: 14px 0 2px; }
.nav__list + .nav__label { margin-top: 22px; }
.nav__list .nav__link {
  display: flex; align-items: center; gap: 10px; padding: 11px 0;
  font-size: 21px; font-weight: 600; letter-spacing: -.015em; line-height: 1.2;
  text-decoration: none; border-bottom: 1px solid var(--line);
}
.nav__list .nav__link .ico { width: 18px; height: 18px; margin-left: auto; color: var(--muted); flex: none; transition: transform .25s var(--ease); }
.nav__list .nav__link:active .ico { transform: translateX(3px); }
.nav__list .nav__link[aria-current="page"] { color: var(--green-d); }
.nav__list .nav__link[aria-current="page"]::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--green); flex: none; }
.nav__list .nav__link[aria-current="page"] .ico { color: var(--green-d); }

/* jos, grupat: „Rezervă acum” (WhatsApp) + apel, apoi emailul și locația */
/* meniul e o coloană: linkurile sus, contactul lipit de partea de jos a ecranului */
.nav { display: flex; flex-direction: column; }
.nav__end { margin-top: auto; padding-top: 22px; display: grid; gap: 14px; }
.nav__book { display: flex; gap: 10px; }
.nav__book .btn { flex: 1; min-height: 52px; }
.nav__call { width: 52px; height: 52px; border-radius: 50%; background: var(--tint); color: var(--green-d); display: grid; place-items: center; flex: none; }
.nav__call .ico { width: 20px; height: 20px; }
.nav .nav__contact { display: grid; gap: 8px; padding: 0 2px; font-size: 14px; color: var(--muted); }
.nav .nav__contact a { display: flex; align-items: center; gap: 10px; text-decoration: none; min-width: 0; }
.nav .nav__contact a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav .nav__contact .ico { width: 17px; height: 17px; color: var(--green-d); flex: none; }
/* intrarea pe rând, la deschidere */
@keyframes nav-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.nav-open .nav__label, .nav-open .nav__list li, .nav-open .nav__end { animation: nav-in .45s var(--ease) both; }
.nav-open .nav__list li:nth-child(2) { animation-delay: .04s; }
.nav-open .nav__list li:nth-child(3) { animation-delay: .08s; }
.nav-open .nav__list li:nth-child(4) { animation-delay: .12s; }
.nav-open .nav__list li:nth-child(5) { animation-delay: .16s; }
.nav-open .nav__label + .nav__list ~ .nav__label, .nav-open .nav__label ~ .nav__label + .nav__list li { animation-delay: .1s; }
.nav-open .nav__end { animation-delay: .24s; }
@media (min-width: 1000px) { .nav { display: none; } }

/* ---------------------------------------------------------------- 7. HERO
   Un singur card rotunjit: poza (cu logo-ul și titlul peste ea) + un panou
   crem cu faptele cheie, butonul mare de rezervare și platformele. */
.hero { padding: 8px var(--gut) 0; }
@media (min-width: 880px) { .hero { padding-top: 12px; } }
.hero__card { border-radius: var(--r); overflow: hidden; background: var(--tint); box-shadow: var(--shadow); display: grid; }
@media (min-width: 880px) { .hero__card { grid-template-columns: 1.15fr .85fr; min-height: 620px; } }
.hero__media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; }
@media (min-width: 560px) { .hero__media { aspect-ratio: 4 / 3; } }
@media (min-width: 880px) { .hero__media { aspect-ratio: auto; min-height: 100%; } }
.hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.hero__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(34,39,26,.12) 0%, rgba(34,39,26,0) 35%, rgba(34,39,26,.78) 100%); }
.hero__badge {
  position: absolute; top: 16px; left: 16px; z-index: 1; width: 64px; height: 64px; border-radius: 50%;
  background: var(--tint); display: grid; place-items: center; box-shadow: 0 8px 24px -10px rgba(0,0,0,.5);
}
.hero__badge .brand__mark { width: 42px; height: 32px; color: var(--ink); }
.hero__over { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 20px; color: #fff; }
.hero__over .label { color: rgba(255,255,255,.85); margin-bottom: 8px; display: block; }
.hero__over h1 { color: #fff; }
.hero__tag { font-size: clamp(16px, 2vw, 20px); font-weight: 500; margin-top: 8px; color: rgba(255,255,255,.95); max-width: 28ch; }
@media (min-width: 880px) { .hero__over { padding: 32px; } }

.hero__panel { padding: 20px; display: grid; gap: 18px; align-content: center; }
@media (min-width: 880px) { .hero__panel { padding: 40px 40px; gap: 26px; } }
.facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.facts li { display: flex; align-items: center; gap: 10px; background: var(--bg); border-radius: var(--r-s); padding: 12px 14px; font-weight: 600; font-size: 14px; line-height: 1.25; }
.facts .ico { width: 24px; height: 24px; color: var(--green-d); }
.hero__cta { display: grid; gap: 14px; }
.hero__cta .socials { justify-content: flex-start; }
.hero__cta .socials a { background: transparent; }
.hero__note { font-size: 14px; color: var(--muted); margin: 0; }
.hero__note a { font-weight: 600; text-decoration: none; }

/* hero-ul paginilor interioare: card mai scund */
.hero--page .hero__card { display: block; min-height: 0; }   /* min-height-ul de 620px era pentru hero-ul vechi de pe prima pagină */
.hero--page .hero__media { aspect-ratio: 4 / 5; }
@media (min-width: 560px) { .hero--page .hero__media { aspect-ratio: 16 / 9; } }
@media (min-width: 880px) { .hero--page .hero__media { aspect-ratio: 2 / 1; min-height: 0; } }
/* cadrul are lățimea conținutului (--wrap), ca să se alinieze cu logo-ul și textul;
   varianta de 2400px a pozei acoperă aproape complet ecranele retina */
.hero--page .hero__card { max-width: var(--wrap); margin-inline: auto; }
.hero--page .hero__over p:not(.label) { max-width: 52ch; margin-top: 10px; font-size: 16px; font-weight: 500; color: rgba(255,255,255,.95); }
.crumbs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13px; font-weight: 600; margin-bottom: 10px; color: rgba(255,255,255,.85); }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs span { opacity: .6; }

/* ---------------------------------------------------------------- 8. SECȚIUNI ACASĂ */
.intro__quote { background: var(--tint); border-radius: var(--r-s); padding: 20px 22px; font-weight: 700; font-size: clamp(18px, 2.2vw, 22px); line-height: 1.35; letter-spacing: -.01em; color: var(--green-d); margin-top: 22px; }
/* Tiny Living: titlul sus-stânga; pe același rând dedesubt pozele și textul.
   Textul începe la marginea de sus a pozelor și ultimul link stă pe linia de jos a lor. */
.intro { display: grid; gap: 0 clamp(24px, 4vw, 56px); }
.intro__text { max-width: 62ch; }
.intro__text p + p { margin-top: .25em; }
@media (min-width: 880px) {
  .intro { grid-template-columns: 5fr 7fr; grid-template-areas: "head ." "pics text"; }
  .intro__head { grid-area: head; }
  .intro__pics { grid-area: pics; }
  .intro__pics img, .intro__pics img:first-child { height: 100%; aspect-ratio: auto; min-height: 360px; }   /* pozele iau înălțimea textului */
  .intro__text { grid-area: text; max-width: none; display: flex; flex-direction: column; }
  .intro__text .lead { margin-top: -.3em; }   /* prima linie, nu cutia ei, la nivelul pozelor */
  .intro__text > :last-child { margin-top: auto !important; padding-top: 22px; line-height: 1; }
}
@media (max-width: 879px) { .intro__pics { margin-bottom: 28px; } }
.intro__pics { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.intro__pics img { border-radius: var(--r-s); width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.intro__pics img:first-child { aspect-ratio: 3 / 4; }

.panel { background: var(--tint); border-radius: var(--r); padding: 20px; }
@media (min-width: 880px) { .panel { padding: 28px; } }
.sec--tint .panel { background: var(--bg); }
.panel__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 16px; }
.panel__head .label { display: block; margin-bottom: 6px; }

.photo { border-radius: var(--r); overflow: hidden; position: relative; }
.photo img { width: 100%; height: 100%; object-fit: cover; }

/* ---------------------------------------------------------------- 9. CARDURI CĂSUȚE */
.houses { display: grid; gap: 14px; }
@media (min-width: 700px) { .houses { grid-template-columns: 1fr 1fr; gap: 18px; } }
.house { position: relative; border-radius: var(--r); overflow: hidden; background: var(--ink); color: #fff; aspect-ratio: 4 / 5; isolation: isolate; }
@media (min-width: 700px) { .house { aspect-ratio: 5 / 6; } }
.house__img { position: absolute; inset: 0; z-index: 0; }
.house__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.house:hover .house__img img { transform: scale(1.04); }
.house::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(34,39,26,.55) 0%, rgba(34,39,26,0) 32%, rgba(34,39,26,.1) 55%, rgba(34,39,26,.82) 100%); pointer-events: none; }
.house__top { position: absolute; top: 16px; left: 16px; right: 16px; z-index: 2; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.house__top .label { color: rgba(255,255,255,.9); }
.house__link { position: absolute; inset: 0; z-index: 2; text-decoration: none; color: inherit; }
.house__body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 18px 16px 16px; display: grid; gap: 12px; pointer-events: none; }
.house__body > * { pointer-events: auto; }
.house__name { font-size: clamp(28px, 6vw, 40px); font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.house__sub { font-size: 14px; font-weight: 500; color: rgba(255,255,255,.9); margin: 4px 0 0; }
.house__row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.house__price { margin-left: auto; font-weight: 700; font-size: 14px; }
.house__price b { font-size: 18px; font-weight: 800; }
.house__go { position: absolute; right: 16px; top: 50%; z-index: 2; width: 46px; height: 46px; margin-top: -23px; border-radius: 50%; background: rgba(255,255,255,.18); backdrop-filter: blur(6px); display: grid; place-items: center; color: #fff; pointer-events: none; transition: background .25s; }
.house:hover .house__go { background: var(--green); }

/* specificațiile căsuței: rând de pastile mari */
.specs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; list-style: none; margin: 0; padding: 0; }
@media (min-width: 560px) { .specs { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 880px) { .specs { grid-template-columns: repeat(6, 1fr); } }
.specs li { background: var(--tint); border-radius: var(--r-s); padding: 16px 14px; display: grid; gap: 2px; }
.specs .ico { width: 24px; height: 24px; color: var(--green-d); margin-bottom: 8px; }
.specs b { font-size: 22px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.specs span { font-size: 12.5px; font-weight: 600; color: var(--muted); }

/* tarife: două plăci mari */
.rates { display: grid; gap: 12px; }
@media (min-width: 560px) { .rates { grid-template-columns: 1fr 1fr; } }
.rate { background: var(--bg); border-radius: var(--r); padding: 22px 22px 20px; border: 1px solid var(--line); }
.rate__d { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0; }
.rate__p { font-size: clamp(40px, 7vw, 56px); font-weight: 800; letter-spacing: -.04em; line-height: 1.05; margin: 6px 0 0; }
.rate__u { font-size: 14px; color: var(--muted); margin: 2px 0 0; font-weight: 500; }

.pricetable { width: 100%; border-collapse: collapse; font-size: 15px; }
.pricetable th, .pricetable td { padding: 14px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.pricetable thead th { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.pricetable tbody th { font-weight: 800; font-size: 18px; letter-spacing: -.02em; }
.pricetable tbody th a { text-decoration: none; }
.pricetable tbody th small { display: block; font-size: 13px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.pricetable td.num { font-size: 22px; font-weight: 800; letter-spacing: -.02em; white-space: nowrap; }

/* ---------------------------------------------------------------- 10. ACORDEON */
.acc { display: grid; gap: 8px; overflow-anchor: none; }   /* poziția o păstrează js/main.js (follow), nu browserul */
.acc details { background: var(--bg); border-radius: var(--r-s); border: 1px solid var(--line); }
.sec--tint .acc details, .panel .acc details { background: var(--bg); }
.acc summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 14px; padding: 16px 18px;
  font-weight: 700; font-size: 16px; letter-spacing: -.01em;
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary .ico { width: 24px; height: 24px; color: var(--green-d); }
.acc summary .acc__t { flex: 1; }
.acc summary .acc__sub { display: block; font-size: 13px; font-weight: 500; color: var(--muted); margin-top: 2px; }
.acc__plus { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; flex: none; transition: transform .3s var(--ease), background .2s; }
.acc__plus .ico { width: 14px; height: 14px; color: var(--ink); }
.acc details[open] .acc__plus { transform: rotate(45deg); background: var(--ink); }
.acc details[open] .acc__plus .ico { color: #fff; }
/* în timpul închiderii animate panoul e încă [open]; iconița revine deja la „+” */
.acc details.is-closing .acc__plus { transform: none; background: transparent; }
.acc details.is-closing .acc__plus .ico { color: var(--ink); }
.acc__body { padding: 0 18px 18px 18px; color: var(--text); }
.acc__body ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.acc__body p + ul, .acc__body ul + p { margin-top: 10px; }
.acc--plain details { border: 0; background: transparent; border-bottom: 1px solid var(--line); border-radius: 0; }
.acc--plain summary { padding: 16px 0; }
.acc--plain .acc__body { padding: 0 0 18px; }

/* ---------------------------------------------------------------- 11. GALERIE & VIDEO */
.gal { display: grid; gap: 14px; }
@media (min-width: 880px) { .gal { grid-template-columns: 1fr 1fr; gap: 18px; } }

.vgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (min-width: 700px) { .vgrid { grid-template-columns: repeat(4, 1fr); gap: 14px; } }
.vcard { position: relative; margin: 0; border-radius: var(--r-s); overflow: hidden; background: var(--ink); aspect-ratio: 9 / 16; }
.vcard video { width: 100%; height: 100%; object-fit: cover; }
.vcard__btn { position: absolute; inset: 0; display: grid; place-items: center; }
.vcard__play { width: 54px; height: 54px; border-radius: 50%; background: rgba(255,255,255,.9); color: var(--ink); display: grid; place-items: center; transition: transform .25s var(--ease), opacity .25s; box-shadow: 0 8px 20px -8px rgba(0,0,0,.5); }
.vcard__play .ico { width: 20px; height: 20px; margin-left: 2px; }
.vcard__btn:hover .vcard__play { transform: scale(1.06); }
.vcard.is-playing .vcard__play { opacity: 0; }
.vcard figcaption { position: absolute; left: 10px; right: 10px; bottom: 9px; color: #fff; font-size: 11px; font-weight: 500; letter-spacing: .01em; opacity: .92; text-shadow: 0 1px 8px rgba(0,0,0,.6); pointer-events: none; }

/* ---------------------------------------------------------------- 12. RECENZII & CONTACT */
.revs { display: grid; gap: 12px; }
@media (min-width: 880px) { .revs { grid-template-columns: 1fr 1fr; gap: 16px; } }
.rev { margin: 0; background: var(--bg); border-radius: var(--r); padding: 22px; display: grid; gap: 14px; border: 1px solid var(--line); }
.rev__top { display: flex; align-items: center; gap: 12px; }
/* nota: 5 stele + „5/5”, la fel pentru toate platformele (vezi stele() în js/main.js) */
.rev__top { justify-content: space-between; align-items: flex-start; }
/* cardurile din același rând au aceeași înălțime: citatul stă sub nume, eticheta platformei jos */
.rev { grid-template-rows: auto 1fr auto; }
.rev__rating { display: inline-flex; align-items: center; gap: 8px; flex: none; }
.rev__stars { color: #B08D52; font-size: 17px; letter-spacing: 2px; line-height: 1; font-family: system-ui, sans-serif; }
.rev__off { color: var(--tint-d); }
.rev__rating b { font-size: 14px; font-weight: 700; color: var(--ink); }
.rev__meta { display: grid; gap: 2px; }
.rev__meta b { font-weight: 700; }
.rev__meta span { font-size: 13px; color: var(--muted); }
.rev__q { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--text); }
.rev__src { display: inline-flex; align-self: start; }
.rev__q p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 7; overflow: hidden; }
.rev.is-open .rev__q p { -webkit-line-clamp: unset; overflow: visible; }
.rev figcaption { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rev__more { font-size: 14px; font-weight: 600; color: var(--green-d); text-decoration: underline; text-underline-offset: 3px; padding: 6px 0; }
.rev__more[hidden] { display: none; }
/* caruselul: un singur rând; pista se mută cu transform, nu se derulează */
.revs { display: block; overflow: hidden; margin: -4px; padding: 4px; }
.revs__track { display: flex; gap: 12px; transition: transform .6s var(--ease); will-change: transform; }
.revs__track > .rev { flex: 0 0 100%; }
@media (min-width: 700px)  { .revs__track > .rev { flex-basis: calc((100% - 12px) / 2); } }
@media (min-width: 1000px) { .revs__track > .rev { flex-basis: calc((100% - 24px) / 3); } }
.revs__nav { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 22px; }
.revs__btn { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--line); transition: background .25s, color .25s, opacity .25s; }
.revs__btn:hover:not(:disabled) { background: var(--green-d); color: #fff; }
.revs__btn:disabled { opacity: .35; cursor: default; }
.revs__btn .ico { width: 18px; height: 18px; }
.revs__dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: 60%; }
.revs__dot { width: 8px; height: 8px; border-radius: 999px; background: var(--tint-d); transition: width .3s var(--ease), background .3s; }
.revs__dot[aria-current="true"] { width: 22px; background: var(--green-d); }
.revs__count { font-size: 14px; font-weight: 700; color: var(--muted); min-width: 56px; text-align: center; }
/* notele de pe platforme, lângă titlul secțiunii */
.rev-scores { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.rev-scores li { display: inline-flex; align-items: baseline; gap: 6px; padding: 8px 14px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); font-size: 14px; }
.rev-scores b { font-size: 16px; font-weight: 800; color: var(--green-d); }
.rev-scores span { color: var(--muted); }
@media (max-width: 699px) {
  .rev-scores { gap: 6px; }
  .rev-scores li { padding: 6px 11px; font-size: 12.5px; gap: 4px; }
  .rev-scores b { font-size: 14px; }
}
.rev--todo { border-style: dashed; border-color: rgba(34,39,26,.3); color: var(--muted); }

.contact { display: grid; gap: 24px; }
@media (min-width: 880px) { .contact { grid-template-columns: 1.2fr 1fr 1fr; gap: 40px; } }
.contact h3 { font-size: 15px; font-weight: 700; margin-bottom: 12px; }
.contact ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.contact a { text-decoration: none; display: inline-flex; align-items: center; gap: 10px; font-weight: 500; }
.contact a:hover { text-decoration: underline; }
.contact .ico { width: 18px; height: 18px; color: var(--green-d); }
.contact__big { font-size: clamp(20px, 3vw, 26px); font-weight: 800; letter-spacing: -.02em; }

/* ---------------------------------------------------------------- 13. PAGINI INTERIOARE */
.story { font-size: 17px; line-height: 1.7; }
.story p { margin-bottom: 1.1em; }
.story .lead { font-size: clamp(20px, 2.6vw, 26px); line-height: 1.4; font-weight: 700; letter-spacing: -.02em; margin-bottom: 1.2em; }
.story__pic { margin: 32px 0; }
.story__pic img { border-radius: var(--r); width: 100%; }
.story__pics { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 32px 0; }
.story__pics img { border-radius: var(--r-s); aspect-ratio: 3 / 4; object-fit: cover; width: 100%; }
.story__end { font-size: clamp(24px, 3.6vw, 34px); font-weight: 800; letter-spacing: -.03em; line-height: 1.2; color: var(--green-d); margin-top: 32px; }

.subnav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.subnav .chip { background: rgba(255,255,255,.92); }
.grp { margin-top: clamp(32px, 5vw, 56px); }
.grp:first-child { margin-top: 0; }
.grp__h { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.grp__h .ico { width: 28px; height: 28px; color: var(--green-d); }
.place .acc__body p { color: var(--text); }
.place .chips { margin-top: 12px; }

.eat { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.eat li { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-s); padding: 14px 16px; display: grid; gap: 2px; }
.eat b { font-weight: 700; }
.eat span { color: var(--muted); font-size: 14.5px; }

.todo { border: 1.5px dashed rgba(34,39,26,.3); border-radius: 12px; padding: 12px 14px; color: var(--muted); font-size: 14.5px; }
.rule__n { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--tint-d); font-size: 13px; font-weight: 800; flex: none; }
.rule__n--none { visibility: hidden; }   /* punct fără număr în brief (al doilea caz de anulare): păstrează alinierea */

/* ---------------------------------------------------------------- 14. LIGHTBOX */
.lb { position: fixed; inset: 0; z-index: 300; background: rgba(34,39,26,.96); color: #fff; display: grid; grid-template-rows: auto 1fr; opacity: 0; transition: opacity .25s; }
.lb.is-open { opacity: 1; }
.lb[hidden] { display: none; }
.lb__bar { display: flex; justify-content: space-between; align-items: center; padding: 12px var(--gut); }
.lb__count { font-size: 13px; font-weight: 700; letter-spacing: .08em; }
.lb__close { width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.12); display: grid; place-items: center; margin-right: -6px; }
.lb__fig { margin: 0; display: grid; grid-template-rows: 1fr auto; place-items: center; padding: 0 var(--gut) 24px; min-height: 0; }
.lb__fig img { max-height: calc(100svh - 150px); max-width: 100%; width: auto; object-fit: contain; border-radius: 14px; }
.lb__fig video { max-height: calc(100svh - 150px); max-width: 100%; width: auto; border-radius: 14px; background: #000; }
.lb__fig [hidden] { display: none; }
/* indicator discret când poza următoare încă se încarcă (rețea lentă) */
@keyframes lb-spin { to { transform: rotate(360deg); } }
.lb.is-loading::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px;
  border-radius: 50%; border: 2px solid rgba(255, 255, 255, .25); border-top-color: #fff; animation: lb-spin .8s linear infinite;
}
.lb__fig figcaption { font-size: 14px; font-weight: 500; margin-top: 14px; text-align: center; opacity: .9; }
.lb__nav { position: absolute; top: 50%; width: 48px; height: 48px; margin-top: -24px; border-radius: 50%; background: rgba(255,255,255,.14); display: grid; place-items: center; }
.lb__nav:hover { background: rgba(255,255,255,.28); }
.lb__nav--prev { left: 12px; } .lb__nav--next { right: 12px; }
@media (max-width: 699px) { .lb__nav { top: auto; bottom: 16px; margin: 0; } }

/* ---------------------------------------------------------------- 15. BARĂ JOS (telefon) & FOOTER */
/* pe telefon: o pastilă „Rezervă acum” (WhatsApp) și un buton rotund de apel, plutind
   deasupra paginii. Apare doar după ce butonul mare din hero iese din ecran și se
   ascunde cât timp se vede alt buton mare de rezervare (js/main.js, barJos). */
.bar {
  position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 40;
  display: flex; gap: 10px; pointer-events: none;
  opacity: 0; visibility: hidden; transform: translateY(calc(100% + 24px));
  transition: opacity .3s, transform .45s var(--ease), visibility 0s .45s;   /* ascunsă de tot, nu doar transparentă */
}
.bar.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .3s, transform .45s var(--ease), visibility 0s; }
.bar.is-on a { pointer-events: auto; }
.bar a { display: flex; align-items: center; justify-content: center; gap: 10px; height: 52px; border-radius: 999px; text-decoration: none; box-shadow: 0 6px 16px -8px rgba(20, 30, 18, .35); }
.bar__call { width: 52px; flex: none; background: var(--bg); color: var(--green-d); box-shadow: inset 0 0 0 1px var(--line), 0 6px 16px -8px rgba(20, 30, 18, .3) !important; }
.bar__book { flex: 1; background: var(--green-d); color: var(--cream); font-size: 15px; font-weight: 700; }
.bar .ico { width: 20px; height: 20px; }
.bar a[aria-disabled="true"] { opacity: .5; }
.nav-open .bar { display: none; }
@media (prefers-reduced-motion: reduce) { .bar { transition: none; } }
@media (min-width: 900px) { .bar { display: none; } }

/* footer subțire, pe un singur rând pe ecran lat: logo cu anul dedesubt și linkurile paginilor.
   Contactul, platformele și programul sunt deja în banda „Rezervă acum” și în
   bara de jos de pe telefon, de aceea nu se repetă aici. */
.ftr { border-top: 1px solid var(--line); padding: 22px 0; font-size: 14px; color: var(--muted); }
.ftr__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 32px; }
.ftr__brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.ftr__brand .brand__mark { width: 34px; height: 26px; }
.ftr__brand b { font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.ftr__links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 22px; }
.ftr__links a { text-decoration: none; color: var(--ink); font-weight: 500; white-space: nowrap; }
.ftr__links a:hover, .ftr__links a[aria-current="page"] { text-decoration: underline; text-underline-offset: 4px; }
.ftr__copy { font-size: 13px; white-space: nowrap; }
/* logo cu anul dedesubt, la stânga; linkurile paginilor la dreapta */
.ftr__id { display: grid; gap: 4px; }
.ftr__id .ftr__copy { padding-left: 44px; }   /* aliniat cu numele, nu cu sigla */
@media (max-width: 699px) {
  .ftr__row { flex-direction: column; align-items: flex-start; }
  .ftr__links { gap: 8px 18px; }
}

/* ---------------------------------------------------------------- 16. MIȘCARE REDUSĂ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; transition-delay: 0ms !important; }
  [data-rev] { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------- AJUSTĂRI DUPĂ VERIFICAREA VIZUALĂ */
/* pe telefon poza din hero e pătrată, ca butonul și platformele să încapă pe primul ecran */
@media (max-width: 559px) {
  .hero__media { aspect-ratio: 1 / 1; }
  .hero__panel { padding: 16px; gap: 14px; }
  .hero__cta { gap: 12px; }
}
@media (min-width: 880px) {
  .facts li { padding: 16px 18px; font-size: 15px; }
}
.house__top .label { text-transform: none; letter-spacing: .02em; font-size: 13px; font-weight: 700; }
.hero__over .label { text-transform: uppercase; }
.chip { white-space: normal; text-align: left; }
.chip .ico { align-self: flex-start; margin-top: 1px; }
/* cardul „Vezi și cealaltă căsuță” de pe paginile căsuțelor, pe ecran lat */
@media (min-width: 880px) {
  .house--wide { aspect-ratio: 4 / 3; }
}
/* chip-urile din acordeon rămân în linie, nu se întind */
.acc__body .chips { display: flex; flex-wrap: wrap; gap: 8px; padding-left: 0; margin-top: 12px; }
.acc__body ul + .chips { margin-top: 12px; }

/* ---------------------------------------------------------------- BANDA VERDE
   Secțiunea „Rezervă acum” de pe prima pagină: tokenii se inversează local,
   ca textul, iconițele și butonul conturat să devină albe. */
.sec--green {
  background: #3A4A30; color: #fff;   /* verde închis (--green-d), scris direct: aici --green-d e redefinit mai jos */
  --ink: #fff; --muted: rgba(255, 255, 255, .85); --green-d: var(--cream); --line: rgba(255, 255, 255, .3);
}
.sec--green .btn--line:hover { background: #fff; color: #3A4A30; }
/* pe banda verde butonul „Rezervă” se inversează: crem, cu text verde */
.sec--green .btn--book { background: var(--cream); color: #3A4A30; }
.sec--green .btn--book:hover { background: #4B5D3F; color: var(--cream); }   /* și pe banda verde, ca peste tot */
.sec--green :focus-visible { outline-color: #fff; }

/* poză lângă text (Experiența în aer liber): pe ecran lat, js/main.js îi dă
   pozei înălțimea coloanei de text din starea inițială, o singură dată (și la
   redimensionare), ca marginile să se alinieze fără ca poza să se miște când se
   deschide alt panou. Fără JS rămâne 4:5. */
.split--photo .photo { aspect-ratio: 4 / 5; }
.split--photo .photo img { position: absolute; inset: 0; }

/* meniul pe o singură linie: Bricolage e mai lat decât fontul vechi */
.menu a, .top__cta { white-space: nowrap; }
@media (min-width: 1000px) and (max-width: 1199px) {
  .menu { gap: 0; }
  .menu a { padding: 9px 9px; font-size: 13.5px; }
  .brand__sub { display: none; }
}

/* ---------------------------------------------------------------- ANIMAȚII HERO — COMUNE */
@keyframes hero-zoom   { from { transform: scale(1.12); } to { transform: scale(1); } }   /* poza „respiră” */
@keyframes hero-rise   { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes hero-unveil { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0); } }
@keyframes word-up     { from { transform: translateY(110%); } to { transform: none; } }
@keyframes badge-in    { from { opacity: 0; transform: rotate(-120deg) scale(.5); } to { opacity: 1; transform: none; } }
@keyframes fade-in     { from { opacity: 0; } to { opacity: 1; } }
@keyframes spin        { to { transform: rotate(360deg); } }
@keyframes shine       { from { transform: translateX(-120%) skewX(-20deg); } to { transform: translateX(260%) skewX(-20deg); } }
/* aceleași cadre sub alt nume, ca animația să pornească din nou la hover */

/* hero-ul paginilor interioare (.hero--page): poza se dezvelește de jos în sus,
   textul de pe ea urcă pe rând. Fără zoom și fără paralaxă: pozele sunt verticale
   într-un cadru lat, deci sunt deja mărite ca să-l umple; orice mărire în plus le
   strică claritatea. */
.hero__media { background: var(--tint-d); }
.hero__media img { animation: hero-unveil 1.2s cubic-bezier(.7, 0, .2, 1) both; }
.hero__media::after { animation: fade-in 1s ease .5s both; }
.hero__over > * { animation: hero-rise .9s var(--ease) both; }
.hero__over > :nth-child(1) { animation-delay: .15s; }
.hero__over > :nth-child(2) { animation-delay: .28s; }
.hero__over > :nth-child(3) { animation-delay: .41s; }

/* ---------------------------------------------------------------- HERO — COLAJ EDITORIAL (prima pagină)
   Stânga: titlul mare pe trei rânduri (urcă cuvânt cu cuvânt), tagline,
   rezervare, faptele. Dreapta: trei poze suprapuse, poziționate în procente,
   care intră pe rând din direcții diferite și „respiră” fiecare în ritmul ei;
   la scroll pe desktop urcă cu viteze diferite ([data-par], js/main.js).
   Ecusonul rotund cu text care se rotește stă unde se întâlnesc pozele. */
.hero-b { padding: clamp(24px, 4vw, 56px) 0 clamp(16px, 3vw, 32px); }
.hero-b__grid { display: grid; gap: 40px; align-items: center; }
/* pozele sunt vedeta: coloana colajului e mai lată; colajul rămâne în grila
   paginii, deci marginile din stânga și din dreapta sunt egale */
@media (min-width: 900px) {
  .hero-b__grid { grid-template-columns: .85fr 1.35fr; gap: 48px; }
}
.hero-b__text { display: grid; gap: 22px; justify-items: start; }
.hero-b__title { font-size: clamp(56px, 8.8vw, 132px); font-weight: 800; letter-spacing: -.045em; line-height: .92; }
/* masca fiecărui cuvânt taie doar dedesubt (de acolo urcă litera); lateral și sus
   e deschisă, altfel ultima literă (h, e), care iese puțin din cutie din cauza
   spațierii strânse, apărea tăiată drept */
.hero-b__title .w { display: inline-block; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; clip-path: inset(-.5em -.5em 0 -.5em); }
.hero-b__title .w > span { display: inline-block; animation: word-up 1.1s var(--ease) both; animation-delay: calc(.2s + var(--i) * .12s); }
.hero-b__tag { font-size: clamp(18px, 1.9vw, 22px); font-weight: 500; line-height: 1.4; margin: 0; max-width: 26ch; }
.hero-b__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; }
.hero-b__facts .chip { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(52, 62, 38, .3); }   /* conturate, ca cercurile platformelor de lângă ele */
/* faptele pe două rânduri egale (2×2), nu 3 + 1 rămas singur */
.hero-b__facts { display: grid; grid-template-columns: repeat(2, max-content); gap: 8px; }
.hero-b__facts .chip { white-space: nowrap; }
.hero-b__facts .chip .ico { color: var(--green-d); }
.hero-b__text > :not(h1) { animation: hero-rise .9s var(--ease) both; }
.hero-b__text > .label { animation-delay: .1s; }
.hero-b__text > .hero-b__tag { animation-delay: .6s; }
.hero-b__text > .hero-b__cta { animation-delay: .72s; }
.hero-b__text > .hero-b__facts { animation-delay: .84s; }

/* lumina de pe butonul de rezervare: o singură dată, la încărcare (hover-ul e cel obișnuit) */
.hero-b__cta .btn { position: relative; overflow: hidden; isolation: isolate; }
.hero-b__cta .btn::after {
  content: ''; position: absolute; inset: 0; width: 40%; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.28), rgba(255,255,255,0));
  transform: translateX(-120%) skewX(-20deg);
  animation: shine 1.1s cubic-bezier(.4, 0, .2, 1) 2s both;
}

.hero-b__collage { position: relative; height: clamp(460px, 132vw, 640px); }
@media (min-width: 900px) { .hero-b__collage { height: clamp(560px, calc(100svh - 120px), 820px); } }
.hero-b__ph { position: absolute; margin: 0; overflow: hidden; border-radius: clamp(18px, 2.2vw, 28px); background: var(--tint-d); box-shadow: 0 24px 50px -30px rgba(40, 46, 28, .55); }
.hero-b__ph img { width: 100%; height: 100%; object-fit: cover; }
.hero-b__ph--1 { left: 0; top: 0; width: 62%; height: 90%; }
/* a doua se suprapune puțin peste prima (fără spațiu între ele), ca a treia mai jos */
.hero-b__ph--2 { right: 0; top: 7%; width: 42%; height: 42%; z-index: 1; }
.hero-b__ph--3 { right: 6%; bottom: 0; width: 46%; height: 44%; z-index: 1; }
.hero-b__ph--1 img { object-position: 50% 60%; }

/* intrarea: fiecare poză se dezvelește din altă direcție; masca finală e mai
   mare decât poza, ca umbra și colțurile rotunjite să rămână vizibile */
@keyframes ph-in-up   { from { clip-path: inset(100% 0 0 0 round 28px); transform: translateY(40px); } to { clip-path: inset(-90px round 0); transform: none; } }
@keyframes ph-in-down { from { clip-path: inset(0 0 100% 0 round 28px); transform: translateY(-40px); } to { clip-path: inset(-90px round 0); transform: none; } }
@keyframes ph-in-left { from { clip-path: inset(0 0 0 100% round 28px); transform: translateX(40px); } to { clip-path: inset(-90px round 0); transform: none; } }
.hero-b__ph--1 { animation: ph-in-up 1.3s cubic-bezier(.7, 0, .2, 1) .25s both; }
.hero-b__ph--2 { animation: ph-in-down 1.3s cubic-bezier(.7, 0, .2, 1) .5s both; }
.hero-b__ph--3 { animation: ph-in-left 1.3s cubic-bezier(.7, 0, .2, 1) .75s both; }
.hero-b__ph--1 img { animation: hero-zoom 18s ease-in-out infinite alternate; }
.hero-b__ph--2 img { animation: hero-zoom 14s ease-in-out -4s infinite alternate; }
.hero-b__ph--3 img { animation: hero-zoom 16s ease-in-out -9s infinite alternate; }

/* ecusonul rotund: centrat exact în punctul unde marginea de jos a pozei mari
   (top 90%) întâlnește marginea stângă a pozei cu focul (left 48%). Are aceeași
   viteză de paralaxă ca poza mare (data-par=".1"), ca să rămână pe marginea ei
   la scroll; pe orizontală pozele nu se mișcă. Centrarea e cu calc, nu cu
   `translate`, pentru că `translate` e folosit de paralaxă. */
.hero-seal {
  --s: clamp(88px, 10vw, 136px);
  position: absolute; left: calc(48% - var(--s) / 2); top: calc(90% - var(--s) / 2); z-index: 3;
  width: var(--s); aspect-ratio: 1; border-radius: 50%; background: var(--bg);
  display: grid; place-items: center; box-shadow: 0 14px 34px -16px rgba(40, 46, 28, .45);
  animation: badge-in 1s var(--ease) 1.5s both;
}
.hero-seal__ring { position: absolute; inset: 7%; width: 86%; height: 86%; animation: spin 30s linear infinite; }
.hero-seal__ring text { font-family: var(--font); font-size: 10px; font-weight: 700; letter-spacing: .08em; fill: var(--ink); }
.hero-seal .brand__mark { width: 42%; height: auto; color: var(--green); }

/* animațiile infinite trebuie oprite explicit: regula generală din secțiunea 16
   doar le scurtează, iar o animație infinită scurtă ar pâlpâi */
@media (prefers-reduced-motion: reduce) {
  .hero__media img { animation: none; }
  .hero__media::after, .hero__over > *,
  .hero-b__title .w > span, .hero-b__text > *, .hero-b__cta .btn::after,
  .hero-b__ph, .hero-b__ph img, .hero-seal, .hero-seal__ring { animation: none; }
}

/* ---------------------------------------------------------------- GALERIA DE PE PRIMA PAGINĂ
   Filtre-pastilă pe categorii și o grilă cu pozele vizibile direct: plăci
   înalte și late (data-shape, setat în js/main.js), cel mult ~12, cu rândurile
   pline. Plusul din colț arată că poza se
   poate mări; ultima placă arată câte mai sunt. */
.gal__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-bottom: clamp(18px, 2.5vw, 26px); }
.gal__head h2 { font-size: clamp(26px, 3.6vw, 40px); }
.gal__all { font-size: 14.5px; padding: 10px 16px; }
.gal__filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: clamp(18px, 2.5vw, 26px); }
.gal__f {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px;
  background: var(--tint); font-size: 14.5px; font-weight: 600; line-height: 1.2;
  transition: background .25s, color .25s;
}
.gal__f:hover { background: var(--tint-d); }
.gal__f[aria-pressed="true"] { background: var(--ink); color: #fff; }

.gal__grid { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 160px; grid-auto-flow: dense; gap: 8px; }
@media (min-width: 700px)  { .gal__grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 190px; gap: 12px; } }
@media (min-width: 1000px) { .gal__grid { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 220px; gap: 14px; } }
.gal__item { position: relative; overflow: hidden; border-radius: var(--r-s); background: var(--tint-d); display: block; width: 100%; height: 100%; }
.gal__item[hidden] { display: none; }
.gal__item[data-shape="tall"] { grid-row: span 2; }
.gal__item[data-shape="wide"] { grid-column: span 2; }
.gal__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.gal__item:hover img { transform: scale(1.05); }
.gal__zoom {
  position: absolute; right: 10px; bottom: 10px; width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255, 255, 255, .92); color: var(--ink); display: grid; place-items: center;
  opacity: 0; transform: translateY(4px); transition: opacity .25s, transform .25s var(--ease);
}
.gal__zoom .ico { width: 16px; height: 16px; }
.gal__item:hover .gal__zoom, .gal__item:focus-visible .gal__zoom { opacity: 1; transform: none; }
@media (hover: none) { .gal__zoom { opacity: .9; transform: none; width: 28px; height: 28px; right: 8px; bottom: 8px; } }
.gal__item:focus-visible { outline-offset: -4px; outline-color: #fff; }
/* plăcile video (paginile căsuțelor): rulează singure, fără sunet; semnul de play
   din colț arată că e un videoclip, iar clicul îl deschide mare în lightbox */
.gal__item video { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s var(--ease); }
.gal__item:hover video { transform: scale(1.05); }
.gal__vid {
  position: absolute; left: 10px; top: 10px; width: 30px; height: 30px; border-radius: 50%;
  background: rgba(255, 255, 255, .92); color: var(--ink); display: grid; place-items: center; pointer-events: none;
}
.gal__vid .ico { width: 13px; height: 13px; margin-left: 2px; }

/* la schimbarea filtrului pozele apar pe rând */
@keyframes gal-in { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
.gal__grid.is-anim .gal__item:not([hidden]) { animation: gal-in .55s var(--ease) both; animation-delay: calc(var(--k, 0) * 35ms); }

/* ultima placă: „+N fotografii” peste poză, deschide toată categoria în lightbox */
.gal__plus {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 2px;
  background: rgba(34, 39, 26, .55); color: #fff; transition: background .3s;
}
.gal__plus b { font-size: clamp(30px, 3.4vw, 44px); font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.gal__plus span { font-size: 14px; font-weight: 600; }
.gal__item--more:hover .gal__plus { background: rgba(58, 74, 48, .78); }
/* plăci late pe 4 coloane și pe telefon (2 coloane = toată lățimea); pe 3 ar lăsa goluri */
@media (min-width: 700px) and (max-width: 999px) { .gal__item[data-shape="wide"] { grid-column: auto; } }

/* ---------------------------------------------------------------- FOOTER VERDE
   Footerul are aceeași culoare ca banda „Rezervă acum”, ca pe prima pagină
   banda și footerul să se citească drept un singur final (înainte, banda
   colorată urmată de un footer alb părea sfârșitul paginii). Tokenii se
   inversează local, ca la .sec--green; o linie subțire desparte cele două. */
.ftr {
  background: #3A4A30; color: rgba(255, 255, 255, .85);
  --ink: #fff; --muted: rgba(255, 255, 255, .8); --green: var(--cream); --green-d: var(--cream); --line: rgba(255, 255, 255, .2);
}
.ftr a:focus-visible { outline-color: #fff; }
/* pe prima pagină banda are deja spațiu mare jos; footerul urcă puțin mai aproape */
main:has(> .sec--green:last-child) + .ftr { padding-top: 22px; }
main:has(> .sec--green:last-child) > .sec--green { padding-bottom: clamp(48px, 6vw, 72px); }

/* banda „Rezervă acum”: coloana de contact primește mai mult loc, ca programul
   (check-in / check-out) să stea pe un singur rând */
/* între 880 și 1199px nu încap textul și cele trei coloane unul lângă altul:
   textul stă deasupra, contactul dedesubt, pe toată lățimea */
@media (min-width: 880px) and (max-width: 1199px) {
  .sec--green .split--wide { grid-template-columns: 1fr; }
  .sec--green .contact { grid-template-columns: auto auto auto; justify-content: start; gap: 56px; }
  .sec--green .contact li { white-space: nowrap; }
}
@media (min-width: 1200px) {
  .sec--green .split--wide { grid-template-columns: 4fr 8fr; }
  .sec--green .contact { grid-template-columns: auto auto auto; justify-content: space-between; gap: 32px; }
  .sec--green .contact li { white-space: nowrap; }
}

/* ---------------------------------------------------------------- HERO PE TELEFON
   Pe telefon pozele intră în primul ecran: eticheta, titlul pe trei rânduri,
   imediat colajul, apoi tagline-ul, butonul și faptele. .hero-b__text devine
   „transparent” (display: contents), ca elementele lui să se poată ordona
   împreună cu colajul. Platformele lipsesc aici (sunt în banda „Rezervă acum”),
   butonul ia toată lățimea, iar faptele stau într-o grilă 2×2 cu plăci
   egale, ca blocul de sub colaj să aibă aceleași margini peste tot. */
@media (max-width: 899px) {
  .hero-b { padding-top: 18px; }
  .hero-b__grid { gap: 0; }
  .hero-b__text { display: contents; }
  .hero-b__text > .label { order: 1; margin-bottom: 10px; }
  .hero-b__title { order: 2; font-size: clamp(56px, 20vw, 96px); line-height: .9; }
  .hero-b__title .w { display: block; }
  .hero-b__collage { order: 3; height: clamp(360px, 104vw, 540px); margin: 22px 0 24px; }
  .hero-b__tag { order: 4; margin-bottom: 18px; max-width: none; }
  .hero-b__cta { order: 5; margin-bottom: 18px; }
  .hero-b__facts { order: 6; }

  .hero-b__cta .socials { display: none; }
  .hero-b__cta { width: 100%; }
  .hero-b__cta .btn--big { width: 100%; min-height: 54px; font-size: 16px; }

  /* faptele: grilă 2×2 cu plăci egale, aliniate cu marginile butonului */
  .hero-b__facts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
  .hero-b__facts .chip { white-space: nowrap; padding: 10px 14px; font-size: 13.5px; }   /* aceeași formă de pastilă ca pe desktop */
}
/* pe telefon ecusonul stă în dreapta titlului, în golul de lângă „Tiny” / „Village”
   (pe colaj era pe jumătate ascuns). E încă în colaj, dar urcat cu top negativ:
   L = un rând de titlu, centrul ecusonului e între rândurile „Tiny” și „Village”. Fără paralaxă aici. */
@media (max-width: 899px) {
  .hero-seal {
    --L: min(18vw, 86.4px); --s: min(30vw, 140px);
    left: auto; right: 0; top: calc(-22px - 1 * var(--L) - var(--s) / 2);
    translate: none !important;
  }
}

/* Experiența în aer liber, pe telefon: titlul întâi, apoi poza (mai scundă), apoi
   lista — secțiunea nu mai începe direct cu o poză. Coloana de text devine
   „transparentă”, ca titlul și lista să se poată ordona în jurul pozei. */
@media (max-width: 879px) {
  .split--photo { gap: 0; }
  .split--photo > [data-rev]:not(.photo) { display: contents; }
  .split--photo .sec__head { order: 1; }
  .split--photo .photo { order: 2; aspect-ratio: 4 / 3; margin-bottom: 20px; }
  .split--photo .acc { order: 3; }
}
/* ecrane scunde (ex. iPhone SE): meniul încape fără derulare */
@media (max-height: 780px) and (max-width: 999px) {
  .nav { padding-top: 8px; }
  .nav__list .nav__link { padding: 8px 0; font-size: 19px; }
  .nav__list + .nav__label { margin-top: 14px; }
  .nav__end { padding-top: 14px; gap: 10px; }
}

/* videoclipuri pe telefon: doar primele 4 (două rânduri); a 4-a are „+N videoclipuri”
   și deschide lightbox-ul, unde se pot vedea toate. Pe desktop toate 8 încap pe două rânduri. */
.vcard__more { display: none; }
@media (max-width: 699px) {
  .vgrid .vcard:nth-child(n + 5) { display: none; }
  .vcard__more {
    position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 2px;
    background: rgba(34, 39, 26, .55); color: #fff; pointer-events: none;
  }
  .vcard__more b { font-size: 34px; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
  .vcard__more span { font-size: 14px; font-weight: 600; }
  .vgrid .vcard:nth-child(4) .vcard__play, .vgrid .vcard:nth-child(4) figcaption { display: none; }
}