/* ==========================================================================
   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: dark #2D3133 și terracotta #AC6249 din brief; toate fundalurile
   deschise sunt o singură familie caldă, nisip (--bg, --tint, --tint-d), iar
   griurile textului sunt calde (--text, --muted), ca să se lege cu terracotta.
   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:     #2D3133;   /* matte dark — text, butoane pline */
  --terra:   #AC6249;   /* terracotta — accent */
  --terra-d: #8F4E39;   /* terracotta pentru text pe alb (contrast AA) */
  /* o singură familie caldă, nisip: toate fundalurile deschise vin de aici */
  --bg:      #FFFDFA;   /* alb cald — pagina și cardurile */
  --tint:    #EDDFD1;   /* nisip — fundal de secțiune, panouri pe alb */
  --tint-d:  #E2CDB8;   /* nisip închis — pastile, stări active, locul pozelor */
  --text:    #433B35;   /* text de paragraf în carduri */
  --muted:   #675C53;   /* gri cald; contrast AA și pe --tint */
  --line:    rgba(80, 60, 45, .14);
  --shadow:  0 18px 44px -24px rgba(70, 50, 35, .35);

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

  --wrap:    1200px;
  --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;
  padding-bottom: calc(var(--bar-h) + env(safe-area-inset-bottom));   /* loc pentru bara de jos */
}
@media (min-width: 900px) { body { padding-bottom: 0; } }
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(--terra); color: #fff; }
:focus-visible { outline: 2px solid var(--terra); 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; }
}

/* 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: #1d2022; }
.btn--terra { background: var(--terra); color: #fff; }
.btn--terra:hover { background: var(--terra-d); }
.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(--terra-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--terra { background: var(--terra); color: #fff; }
.chip--terra .ico { color: #fff; }
/* pe pozele căsuțelor: o umbră ușoară, ca chip-ul să se vadă pe orice fundal */
.house .chip--terra { 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,253,250,.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(--terra); }
.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 { filter: grayscale(1); opacity: .7; }
.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) 40px; 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); }
.nav ul { list-style: none; margin: 0; padding: 0; }
.nav__link { display: block; padding: 14px 0; font-size: clamp(26px, 7vw, 36px); font-weight: 800; letter-spacing: -.03em; text-decoration: none; border-bottom: 1px solid var(--line); }
.nav__link[aria-current="page"] { color: var(--terra-d); }
.nav__foot { margin-top: 22px; display: grid; gap: 14px; }
.nav__contact { display: grid; gap: 8px; }
.nav__contact a { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 500; }
.nav__contact .ico { width: 18px; height: 18px; color: var(--terra-d); }
@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(45,49,51,.12) 0%, rgba(45,49,51,0) 35%, rgba(45,49,51,.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(--terra-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 nu e mai lat decât conținutul (1200px), ca varianta de 2400px a pozei
   să ajungă pentru 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(--terra-d); margin-top: 22px; }
.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(45,49,51,.55) 0%, rgba(45,49,51,0) 32%, rgba(45,49,51,.1) 55%, rgba(45,49,51,.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(--terra); }

/* 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(--terra-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; }
.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(--terra-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; } }
.gcard { background: var(--tint); border-radius: var(--r); padding: 14px; }
.gcard__head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 4px 6px 12px; flex-wrap: wrap; }
.gcard__head h3 { font-size: 20px; }
.gcard__head p { font-size: 13.5px; color: var(--muted); margin: 2px 0 0; }
.collage { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 8px; aspect-ratio: 4 / 3; }
.collage button { border-radius: var(--r-s); overflow: hidden; background: var(--tint-d); display: block; width: 100%; height: 100%; }
.collage button:first-child { grid-row: 1 / 3; }
.collage img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.collage button:hover img { transform: scale(1.04); }

.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: 10px; color: #fff; font-size: 12.5px; font-weight: 600; 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: var(--terra); 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--todo { border-style: dashed; border-color: rgba(45,49,51,.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(--terra-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(--terra-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(--terra-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(45,49,51,.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; }

/* ---------------------------------------------------------------- 14. LIGHTBOX */
.lb { position: fixed; inset: 0; z-index: 300; background: rgba(45,49,51,.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; }
.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 */
.bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; height: calc(var(--bar-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom); background: var(--bg); border-top: 1px solid var(--line);
  display: grid; grid-template-columns: 1fr 1fr 1.3fr;
}
.bar a { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 14px; font-weight: 700; text-decoration: none; border-right: 1px solid var(--line); }
.bar a:last-child { border-right: 0; background: var(--terra); color: #fff; }
.bar .ico { width: 20px; height: 20px; color: var(--terra-d); }
.bar a:last-child .ico { color: #fff; }
.bar a[aria-disabled="true"] { opacity: .5; }
.nav-open .bar { display: 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; }
/* colajul de pe pagina căsuței: pe ecran lat, trei poze pe un rând */
@media (min-width: 880px) {
  .collage--wide { grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr; aspect-ratio: 3 / 1.15; }
  .collage--wide button:first-child { grid-row: auto; }
  .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 TERRACOTTA
   Secțiunea „Rezervă acum” de pe prima pagină: tokenii se inversează local,
   ca textul, iconițele și butonul conturat să devină albe. */
.sec--terra {
  background: #8F4E39; color: #fff;   /* terracotta închis (--terra-d), scris direct: aici --terra-d e redefinit mai jos */
  --ink: #fff; --muted: rgba(255, 255, 255, .9); --terra-d: var(--tint); --line: rgba(255, 255, 255, .35);
}
.sec--terra .btn--line:hover { background: #fff; color: #8F4E39; }
.sec--terra :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 */
@keyframes shine-hover { from { transform: translateX(-120%) skewX(-20deg); } to { transform: translateX(260%) skewX(-20deg); } }

/* 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ă și, pe ecran lat, colajul
   iese din grila paginii spre dreapta, până la 40px de margine; textul rămâne
   aliniat cu logo-ul din header */
@media (min-width: 900px) {
  .hero-b__grid { grid-template-columns: .85fr 1.35fr; gap: 48px; }
  .hero-b__collage { margin-right: calc(-1 * max(0px, (100vw - var(--wrap)) / 2 - 40px)); }
}
.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: var(--tint); }
.hero-b__facts .chip .ico { color: var(--terra-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 dată la încărcare, apoi la hover */
.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__cta .btn:hover::after { animation: shine-hover .9s cubic-bezier(.4, 0, .2, 1) 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(70, 50, 35, .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(70, 50, 35, .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(--terra); }

/* 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__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__n { font-size: 12px; font-weight: 700; opacity: .6; }

.gal__grid { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; 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, 253, 250, .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; }

/* 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(45, 49, 51, .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(143, 78, 57, .72); }
/* plăci late doar pe 4 coloane (pe mai puține ar lăsa goluri) */
@media (max-width: 999px) { .gal__item[data-shape="wide"] { grid-column: auto; } }

/* ---------------------------------------------------------------- FOOTER PE TERRACOTTA
   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
   terracotta urmată de un footer alb părea sfârșitul paginii). Tokenii se
   inversează local, ca la .sec--terra; o linie subțire desparte cele două. */
.ftr {
  background: #8F4E39; color: rgba(255, 255, 255, .85);
  --ink: #fff; --muted: rgba(255, 255, 255, .85); --terra: var(--tint); --terra-d: var(--tint); --line: rgba(255, 255, 255, .25);
}
.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--terra:last-child) + .ftr { padding-top: 22px; }
main:has(> .sec--terra:last-child) > .sec--terra { 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--terra .split--wide { grid-template-columns: 1fr; }
  .sec--terra .contact { grid-template-columns: auto auto auto; justify-content: start; gap: 56px; }
  .sec--terra .contact li { white-space: nowrap; }
}
@media (min-width: 1200px) {
  .sec--terra .split--wide { grid-template-columns: 4fr 8fr; }
  .sec--terra .contact { grid-template-columns: auto auto auto; justify-content: space-between; gap: 32px; }
  .sec--terra .contact li { white-space: nowrap; }
}