/* ==========================================================================
   HAMMAMCHISINAU.COM — completări peste șablonul TerraLux (style.css)
   Doar ce nu există deja în style.css. Nimic din el nu se rescrie.
   ========================================================================== */

/* --- PAGE HERO (identic cu paginile interioare de pe terralux.md) --- */
.page-hero{position:relative;min-height:420px;height:56vh;display:flex;align-items:flex-end;overflow:hidden;background:#241a12}
.page-hero img,.page-hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.page-hero .ph-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;background:
    linear-gradient(180deg, rgba(20,13,8,.82) 0%, rgba(20,13,8,.4) 42%, rgba(20,13,8,.5) 70%, rgba(20,13,8,.82) 100%),
    linear-gradient(102deg, rgba(20,13,8,.58) 0%, rgba(20,13,8,.2) 55%, transparent 82%)}
.page-hero .ph-inner{position:relative;z-index:2;max-width:1180px;margin:0 auto;padding:0 34px 54px;width:100%}
.page-hero .kicker{color:#e7d3a4}
.page-hero .kicker:before{background:#e7d3a4;opacity:.9}
.page-hero h1{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:clamp(38px,6vw,66px);color:#fbf3ea;margin-top:16px;text-shadow:0 2px 30px rgba(16,10,6,.55)}
.page-hero .ph-sub{margin-top:10px;font-family:'Cormorant Garamond',serif;font-style:italic;
  font-size:clamp(18px,2.1vw,25px);color:#e4c68e;text-shadow:0 1px 22px rgba(16,10,6,.5)}
.page-hero .lead{margin-top:16px;max-width:56ch;font-size:clamp(15px,1.5vw,17.5px);font-weight:300;color:rgba(251,243,234,.9);text-shadow:0 1px 22px rgba(16,10,6,.5)}
.page-hero .hero-cta{margin-top:28px}

/* --- meniu cu majuscule: 3 intrări, conform brief-ului clientului --- */
.nav-links a:not(.lang):not(.nav-cta){text-transform:uppercase;letter-spacing:.15em;font-size:12px}
@media(max-width:900px){ .nav-links a:not(.lang):not(.nav-cta){font-size:13px;letter-spacing:.11em} }

/* --- imagine de fundal în heroul mare (în locul videoului de pe terralux.md) --- */
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;background:#241a12}
.hero .hero-lead + .hero-lead{margin-top:18px}

/* --- titluri: limitele în „ch" de pe terralux sunt calibrate pe română,
       titlurile englezești ale clientului se rup în prea multe rânduri --- */
.about h2{max-width:19ch}
.ritual h2{max-width:20ch}

/* --- coloană centrată (înlocuiește stilurile inline de pe terralux.md) --- */
.center-col{text-align:center;max-width:770px;margin:0 auto}
.center-col .band,.center-col .band-note{margin-left:auto;margin-right:auto}

/* --- subtitlu italic sub un h2 (ca .sig .sub) --- */
.sec-sub{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:clamp(19px,2vw,23px);
  color:var(--terra);margin-top:8px}

/* --- bandă informativă cu majuscule (KESE & FOAM AFTER 22:00 · …) --- */
.band{display:inline-flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 12px;margin-top:30px;
  font-size:11.5px;letter-spacing:.19em;text-transform:uppercase;color:var(--terra-d);font-weight:500;line-height:1.7;
  border:1px solid var(--line-t);border-radius:34px;padding:13px 26px;text-align:center;background:rgba(177,147,90,.07)}
.band-note{margin-top:13px;font-family:'Cormorant Garamond',serif;font-style:italic;font-size:17px;color:var(--ink-soft)}

/* --- etapele ritualului (numerotate, fără titluri inventate) --- */
.steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 40px;margin-top:48px}
.step{display:flex;gap:20px;align-items:flex-start}
.step .n{flex:0 0 auto;width:48px;height:48px;border-radius:50%;border:1px solid var(--line-t);
  display:flex;align-items:center;justify-content:center;color:var(--terra);
  font-family:'Cormorant Garamond',serif;font-size:21px;letter-spacing:.06em}
.step p{margin:0;color:var(--ink-soft);font-weight:400;font-size:16.5px}
@media(max-width:820px){.steps{grid-template-columns:1fr;gap:26px}}

/* --- secțiune întunecată „după 22:00" --- */
.night{position:relative;background:#1a140e;overflow:hidden;isolation:isolate}
.night>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:.38}
.night:before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(16,11,7,.72) 0%,rgba(16,11,7,.5) 45%,rgba(16,11,7,.8) 100%)}
.night .wrap{position:relative;z-index:2}
.night h2{font-size:clamp(30px,4.2vw,50px);color:#fbf3ea;margin-top:14px}
.night .sec-sub{color:#e4c68e}
.night p{margin-top:18px;color:rgba(245,240,232,.88);font-weight:400;font-size:17.5px}
.night .kicker{color:#e7d3a4}
.night .kicker:before{background:#e7d3a4;opacity:.9}
.night .band{color:#e7d3a4;border-color:rgba(230,208,154,.36);background:rgba(230,208,154,.08)}
.night .band-note{color:rgba(245,240,232,.8)}
.night .step .n{color:#e7d3a4;border-color:rgba(230,208,154,.34)}
.night .step p{color:rgba(245,240,232,.86)}
.night .btn-out{border-color:rgba(251,243,234,.55);color:#fbf3ea}
.night .btn-out:hover{background:#fbf3ea;color:#1a140e}

/* --- bandă foto lată între secțiuni --- */
.strip{position:relative;height:clamp(240px,38vw,420px);overflow:hidden;background:#241a12}
.strip img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.strip:after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(20,13,8,.34) 0%,rgba(20,13,8,.06) 50%,rgba(20,13,8,.34) 100%)}

/* --- figura din secțiunea „about" (aceeași ramă aurie ca pe terralux.md) --- */
.about-fig{position:relative;margin-right:16px;margin-bottom:16px}
.about-fig:before{content:"";position:absolute;inset:0;transform:translate(16px,16px);z-index:0;
  border:1.5px solid var(--terra);border-radius:12px;pointer-events:none}
.about-fig .ph{position:relative;z-index:1;box-shadow:0 34px 68px -34px rgba(58,44,32,.5)}
@media(max-width:900px){
  .about-fig{margin-right:11px;margin-bottom:11px}
  .about-fig:before{transform:translate(11px,11px)}
}

/* --- reguli care pe terralux.md stau într-un <style> din <head>, nu în style.css.
       Fără ele .flegal/.fsep/.about-body rămân clase moarte. Copiate identic. --- */
.flegal{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center;margin-top:18px;font-size:13.5px}
.flegal a{opacity:.85}
.flegal a:hover{opacity:1}
.fsep{opacity:.4}
.about-body{position:relative;margin-top:22px;padding-left:26px}
.about-body > p{margin-top:16px}
.about-body > p:first-child{margin-top:0}
.about-body::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:2px;border-radius:2px;
  background:linear-gradient(180deg,var(--terra) 0%,rgba(177,147,90,.12) 94%)}
@media(max-width:900px){ .about-body{padding-left:20px;margin-top:18px} }

/* --- cuvintele-cheie din subsolul SEO --- */
.seo-tags{margin-top:16px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(230,208,154,.72);line-height:2}
.seo-hours{margin-top:14px;font-size:12.5px;letter-spacing:.15em;text-transform:uppercase;color:#e7d3a4;line-height:2}

/* ==========================================================================
   TELEFON
   Șablonul terralux e calibrat pe română și pe desktop. Pe ecran de telefon,
   cu titluri englezești lungi, ieșeau trei probleme: bara de sus se rupea
   dezordonat, fotografiile din antet deveneau o bandă maro turtită, iar între
   secțiuni rămâneau goluri de 152 px. Corecturile de mai jos sunt doar pentru
   telefon — pe calculator nu se schimbă nimic.
   ========================================================================== */
@media(max-width:700px){

  /* bara de sus: fundal plin și două rânduri clar despărțite, nu îngrămădite */
  nav, nav.solid{background:rgba(28,24,20,.96);backdrop-filter:blur(10px);
    padding:8px 14px 0;row-gap:0;box-shadow:0 1px 0 rgba(0,0,0,.3)}
  .brand img.logo, nav.solid .brand img.logo{height:34px}
  nav .brand img.logo{filter:brightness(0) invert(1)}
  .nav-right{gap:0}
  .nav-right .nav-cta{font-size:10px;padding:8px 14px;letter-spacing:.1em}
  .nav-links{margin-top:7px;padding:9px 0;gap:0 15px;
    border-top:1px solid rgba(230,208,154,.16)}
  .nav-links a:not(.lang):not(.nav-cta){font-size:11px;letter-spacing:.13em;
    color:rgba(251,243,234,.9)}

  /* heroul mare: fotografia rămâne fotografie, dar textul se citește peste ea */
  .hero{min-height:100vh;min-height:100svh}
  .hero-inner{padding:132px 22px 58px}
  .hero h1{font-size:clamp(33px,9.6vw,46px);max-width:none}
  .hero-img{object-position:60% 40%}
  .hero-scrim{background:
    linear-gradient(180deg, rgba(20,13,8,.72) 0%, rgba(20,13,8,.54) 26%, rgba(20,13,8,.66) 60%, rgba(20,13,8,.92) 100%)}
  .hero-tag{margin-top:14px}
  .hero .hero-lead{margin-top:20px}

  /* heroul paginilor interioare: era o bandă de 466 px în care poza nu se vedea */
  .page-hero{height:auto;min-height:72vh;min-height:72svh;padding-top:0}
  .page-hero .ph-inner{padding:0 22px 44px}
  .page-hero h1{font-size:clamp(29px,8.4vw,42px)}
  .page-hero .ph-scrim{background:
    linear-gradient(180deg, rgba(20,13,8,.52) 0%, rgba(20,13,8,.3) 32%, rgba(20,13,8,.6) 68%, rgba(20,13,8,.93) 100%)}

  /* două secțiuni lipite făceau un gol de 76+76 px */
  section{padding:60px 0}
  .page-hero + section{padding-top:46px}

  /* elemente mici, recalibrate */
  .band{font-size:10px;letter-spacing:.14em;padding:12px 19px}
  .band-note{font-size:15.5px}
  .sec-sub{font-size:19px}
  .step .n{width:42px;height:42px;font-size:19px}
  .steps{margin-top:34px}
  .intl-photo{margin-top:30px}
}

/* ═══ ECHILIBRAREA POZELOR (18 aug 2026) ═══════════════════════════════════
   Masurat pe 1440×900: heroul de pe Acasa avea 969px — mai INALT decat ecranul,
   deci prima poza umplea tot si nimic nu se vedea sub ea. Heroul paginilor 2 si 3
   avea doar 504px, jumatate cat celalalt: acelasi site, doua masuri.
   Aici le apropii — Acasa coboara, interioarele urca — si dau mai multa latime
   pozelor din continut, care stateau la ~500px intr-un rand de 1180.
   Totul scapa telefonul (max-width:700px are blocul lui, mai sus).            */
@media(min-width:701px){
  .hero{min-height:82vh}
  .hero-inner{padding:96px 34px 68px}
  .hero h1{font-size:clamp(44px,5.4vw,66px)}
  .hero-lead{font-size:clamp(15.5px,1.35vw,17px);max-width:52ch}

  .page-hero{height:auto;min-height:66vh}

  /* pozele din continut: coloana lor primeste mai mult decat textul */
  .wrap,.show-band,.hero-inner,.page-hero .ph-inner{max-width:1272px}
  .about .grid{grid-template-columns:1fr 1.12fr;gap:58px}
  .ritual .grid{grid-template-columns:1.12fr 1fr;gap:58px}
  .sig .grid{grid-template-columns:1fr 1.12fr;gap:58px}
}

/* Titlurile nu mai rup un singur cuvant pe randul de jos, iar paragrafele nu mai
   lasa cuvinte orfane. Doua randuri, se vede la fiecare titlu lung. */
h1,h2,h3,.sec-title,.ph-sub{text-wrap:balance}
p,.hero-lead,.lead{text-wrap:pretty}

/* Hero-poster: imaginea vine gata cu text (Foto N1 de la client) — se arată întreagă, fără scrim și fără text peste */
.page-hero.ph-art{height:auto;min-height:0;aspect-ratio:1270/916;background:#0b0705}
.page-hero.ph-art picture{display:block;width:100%;height:100%}
.page-hero.ph-art img{position:static;object-fit:cover}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media (max-width:700px){
  /* pe telefon meniul are doua randuri si acoperea coroana din poza -> banda intunecata deasupra */
  .page-hero.ph-art{aspect-ratio:auto;padding-top:92px;background:#0b0705}
  .page-hero.ph-art picture{height:auto}
  .page-hero.ph-art img{height:auto}
}
/* Kese & Foam: poza e 4:3, într-o bandă lată se pierde — hero mai înalt ca să se vadă normal */
@media (min-width:701px){ .page-hero.ph-tall{height:min(80svh,56vw);min-height:520px} }

/* ── Prima pagină: fotografia din hero era înecată în întuneric, nu se vedea camera.
   Voalul rămâne doar cât să țină textul lizibil. ─────────────────────────────── */
.hero .hero-scrim{background:
  linear-gradient(180deg, rgba(24,16,10,.30) 0%, rgba(24,16,10,.04) 26%, rgba(24,16,10,.10) 58%, rgba(24,16,10,.42) 100%),
  linear-gradient(102deg, rgba(24,16,10,.70) 0%, rgba(24,16,10,.34) 42%, rgba(24,16,10,.06) 72%, transparent 88%)}

/* ── Galerie: fotografiile alăturate, la aceeași înălțime, cu un fir de aur ──── */
.gal{padding:96px 0 104px;background:var(--sand)}
.gal .wrap{max-width:1180px;margin:0 auto;padding:0 34px}
.gal-head{text-align:center;max-width:60ch;margin:0 auto 46px}
.gal-head h2{margin-top:16px;color:var(--ink)}
.gal-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.gal-grid.trei{grid-template-columns:repeat(2,1fr)}
/* patrat: pozele vin si pe lat si pe inalt, patratul le taie pe toate cel mai putin */
.gal-grid figure{position:relative;margin:0;overflow:hidden;border-radius:4px;background:#241a12;aspect-ratio:4/3}
.gal-grid.trei figure{aspect-ratio:3/2}
.gal-grid img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.1s cubic-bezier(.22,.61,.36,1);will-change:transform}
.gal-grid figure:hover img{transform:scale(1.045)}
.gal-grid figure:after{content:"";position:absolute;inset:10px;border:1px solid rgba(230,208,154,.30);
  border-radius:2px;pointer-events:none}
@media (max-width:900px){
  .gal-grid,.gal-grid.trei{grid-template-columns:repeat(2,1fr);gap:12px}
  .gal-grid figure,.gal-grid.trei figure{aspect-ratio:1/1}
  .gal{padding:66px 0 72px}
  .gal .wrap{padding:0 22px}
}
/* galerie cu o singură fotografie, pe lățime mai mică — arată intenționat, nu ciuntit */
.gal-grid.unu{grid-template-columns:1fr;max-width:900px;margin:0 auto}
.gal-grid.unu figure{aspect-ratio:3/2}

/* ── Secțiunea „Kese & Foam" de pe prima pagină ────────────────────────────────
   Butoanele au ieșit din coloana de text ca să se poată așeza altfel pe telefon.
   Pe calculator rămâne exact ca înainte: poza stânga, textul dreapta, butoanele
   sub text. Pe telefon clientul a cerut: întâi textul, apoi poza, apoi butoanele. */
@media(min-width:701px){
  #kese-foam .grid{align-items:start}
  #kese-foam .grid > .ph{grid-column:1;grid-row:1 / span 2;align-self:center}
  #kese-foam .grid > .txt-col{grid-column:2;grid-row:1}
  #kese-foam .grid > .chips{grid-column:2;grid-row:2;margin-top:28px}
}
@media(max-width:700px){
  #kese-foam .grid{display:flex;flex-direction:column;gap:26px}
  #kese-foam .grid > .txt-col{order:1}
  /* fara latime/inaltime explicite, .ph se turteste la 0 intr-un container flex */
  #kese-foam .grid > .ph{order:2;flex:0 0 auto;width:100%;aspect-ratio:1/1}
  #kese-foam .grid > .chips{order:3;margin-top:0}
}

/* ── Hero fără fotografie (cerut de client): fundal deschis, text închis ──────
   Voalul întunecat era calculat pentru o fotografie în spate; fără ea, textul
   alb ar fi invizibil pe nisipiu. Revenim la varianta deschisă din style.css. */
.hero.gol{min-height:auto;padding:132px 0 84px;background:var(--sand)}
.hero.gol .hero-scrim{background:
  linear-gradient(105deg, rgba(246,239,228,.5) 0%, rgba(246,239,228,.2) 46%, transparent 100%),
  radial-gradient(820px 520px at 78% 26%, rgba(192,106,68,.10), transparent 62%)}
.hero.gol h1{color:var(--ink);text-shadow:none}
.hero.gol h1 .em{color:var(--terra)}
.hero.gol .hero-tag{color:var(--terra);text-shadow:none}
.hero.gol .hero-lead{color:var(--ink-soft);text-shadow:none}
.hero.gol .hero-lead strong{color:var(--ink)}
.hero.gol .hero-inner{padding-top:0;padding-bottom:0}
@media(max-width:700px){ .hero.gol{padding:118px 0 66px} }
/* fotografia din hero: coloana dreapta, ramă aurie ca la restul secțiunilor */
.hero.gol .hero-grid{display:grid;grid-template-columns:1.05fr .82fr;gap:60px;align-items:center}
.hero.gol .hero-fig{position:relative;margin-left:16px;margin-top:16px}
.hero.gol .hero-fig:before{content:"";position:absolute;inset:0;transform:translate(-16px,-16px);
  border:1.5px solid var(--terra);border-radius:12px;pointer-events:none}
.hero.gol .hero-fig img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:10px;display:block;
  box-shadow:0 34px 68px -34px rgba(58,44,32,.5)}
@media(max-width:900px){
  .hero.gol .hero-grid{grid-template-columns:1fr;gap:36px}
  .hero.gol .hero-fig{margin-left:11px;margin-top:11px}
  .hero.gol .hero-fig:before{transform:translate(-11px,-11px)}
  .hero.gol .hero-fig img{aspect-ratio:4/3}
}
/* pe telefon rămâneau ~120px de alb între secțiuni, chiar sub o fotografie */
@media(max-width:700px){
  section.about,section.ritual,section.sig,section.intl,section.why,section.book{padding-top:40px;padding-bottom:40px}
  .about-fig{margin-bottom:6px}
}
/* pe telefon, la „What Is a Traditional Turkish Foam Massage?": întâi textul, apoi fotografia */
@media(max-width:700px){
  #what-is-foam .grid{display:flex;flex-direction:column;gap:26px}
  #what-is-foam .grid > .ph{order:2;flex:0 0 auto;width:100%;aspect-ratio:1/1}
  #what-is-foam .grid > div:not(.ph){order:1}
}