/* ---------- Reset de bază ----------
   Designul portat își aducea propriul reset, pe care nu l-am adus odată cu
   markup-ul. Fără el se aplicau marginile implicite ale browserului:
   h2 primea 48px sus și jos, h3 primea 21px — de aici toate golurile
   neregulate dintre eyebrow, titlu, paragraf și pastile. */
h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd{margin:0}
ul,ol{margin:0;padding:0}

/* Completări pentru home-ul portat din design (restul stilurilor sunt inline). */
body { margin:0; background:#F4F2ED; color:#17130F; font-family:'Instrument Sans',system-ui,sans-serif;
       font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
*,*::before,*::after { box-sizing:border-box; }
img,video { max-width:100%; display:block; }
a { text-decoration:none; color:inherit; }
:focus-visible { outline:2px solid #AF3E24; outline-offset:3px; }

/* dropdown meniu */
.ch-hasSub .ch-sub { opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .2s ease, transform .2s ease, visibility .2s ease; }
.ch-hasSub:hover .ch-sub, .ch-hasSub:focus-within .ch-sub { opacity:1; visibility:visible; transform:translateY(0); }
.ch-sub a:hover { background:#F4F2ED; }

@media (max-width:1000px){
  #ch-navlinks, #ch-phone { display:none !important; }
  #ch-burger { display:flex !important; }   /* altfel navigația devine inaccesibilă */
}
@media (prefers-reduced-motion: reduce){ *{animation-duration:.01ms!important;transition-duration:.01ms!important} }

/* Harta zonei: sursa are 768px — nu o lăsăm scalată în sus (ar apărea moale). */
img[src*="harta"] { max-width: 768px; margin-inline: auto; }

/* ---------- Carusel "Ce primești": defilare infinită, lentă ---------- */
.ch-marq{
  --marq-gap:16px;
  overflow:hidden;
  /* iese din containerul de 1280px si ocupa toata latimea ecranului */
  width:100vw;max-width:100vw;margin-inline:calc(50% - 50vw);
  padding-inline:clamp(20px,5vw,60px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.ch-marq-track{
  display:flex;
  gap:var(--marq-gap);
  width:max-content;
  animation:ch-marq 68s linear infinite;
  will-change:transform;
}
.ch-marq:hover .ch-marq-track,
.ch-marq:focus-within .ch-marq-track{animation-play-state:paused}
.ch-marq-track > *{flex:0 0 320px}
@keyframes ch-marq{
  from{transform:translateX(0)}
  to{transform:translateX(calc(-50% - var(--marq-gap) / 2))}
}
/* fără animație: redevine o listă normală, derulabilă cu degetul */
@media (prefers-reduced-motion:reduce){
  .ch-marq{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
  .ch-marq-track{animation:none}
}

/* ---------- Oferta lunii ---------- */
.ch-oferta-grid{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:clamp(28px,4vw,56px);
  align-items:end;
}
@media (max-width:900px){
  .ch-oferta-grid{grid-template-columns:1fr;align-items:start}
}

/* ---------- Header: nimic nu se rupe pe două rânduri ---------- */
#ch-navlinks{flex-wrap:nowrap}
#ch-navlinks > *{white-space:nowrap}
#ch-phone span{white-space:nowrap}
/* sub 1180px meniul devine prea înghesuit lângă telefon + CTA */
@media (max-width:1180px){
  #ch-phone{display:none !important}
}

/* ---------- Bara fixă de jos: pe telefon ocupa 163px (textul se strângea
     pe 8 rânduri). Rămân doar cele două acțiuni. ---------- */
@media (max-width:720px){
  #ch-bar > div{gap:8px !important}
  #ch-bar #ch-bar-text{display:none !important}
  #ch-bar a{flex:1 1 0;min-width:0;padding-inline:14px !important;
            font-size:14px !important;text-align:center;white-space:nowrap}
}

/* ---------- Zone de atins suficient de mari pe ecrane tactile ---------- */
@media (max-width:900px){
  footer a{padding-block:7px}
  #ch-bar a{min-height:48px}
}

/* ---------- Intro secțiunea Apartamente ----------
   Sub 900px cele două coloane se suprapun prost: paragraful trece sub titlu. */
@media (max-width:900px){
  #apartamente [data-rv]{grid-template-columns:1fr !important;align-items:start !important}
}
/* contorul „N configurații afișate" trece pe rând propriu când chipurile umplu rândul */
@media (max-width:640px){
  #apartamente [data-chip]{flex:0 0 auto}
  #apartamente [data-chip] ~ span{margin-left:0 !important;padding-left:0 !important;
    flex-basis:100%;margin-top:4px}
}

/* full-bleed-ul caruselului nu trebuie să producă bară de derulare orizontală */
html{overflow-x:clip}

/* ---------- Header: transparent peste hero, opac în rest ----------
   Culorile vin din variabile, ca stilurile inline ale designului să poată fi
   comutate fără !important. Paginile fără hero întunecat pornesc direct opace. */
#ch-hdr{
  --hdr-ink:rgba(255,255,255,.86);
  --hdr-strong:#fff;
  --hdr-logo:brightness(0) invert(1);
  --hdr-chip:rgba(255,255,255,.12);
}
#ch-hdr[data-stuck],
body[data-hdr="solid"] #ch-hdr{
  --hdr-ink:#6E675F;
  --hdr-strong:#17130F;
  --hdr-logo:none;
  --hdr-chip:rgba(23,19,15,.06);
  background:rgba(244,242,237,.88);
  backdrop-filter:blur(16px);
  box-shadow:0 1px 0 rgba(23,19,15,.07);
}
#ch-hdr a:hover{color:var(--hdr-strong)}
/* paginile interioare încep sub header, care e fix */
body[data-hdr="solid"] main{padding-top:84px}