/* ==========================================================================
   Se încarcă ultimul, după salon-decor.css și salon-editorial.css.
   1. Footerul verde devine sticlă lichidă, cu planta vizibilă prin el.
   2. Scade spațiul dintre secțiunea „despre" și recenzii.
   ========================================================================== */

/* --- 1. Panoul verde din footer ---------------------------------------- */

/* Regula anterioară a schimbat doar `background-image`, dar a lăsat
   `background-size: 32px 32px` moștenit de la `.glass.surface` (unde e acolo
   pentru granulația de 32px). Așa se repeta gradientul verde la fiecare 32px
   și apărea textura în carouri pe tot footerul. Granulația revine ca strat
   separat, iar gradientele primesc propria dimensiune. */
html .footer-bento > .footer-glass.glass {
 background-color:rgba(34,53,43,.66);
 background-image:
   var(--surface-noise),
   radial-gradient(ellipse at 0 0,rgba(124,142,118,.6),transparent 60%),
   linear-gradient(130deg,rgba(62,79,60,.4),rgba(28,46,37,.58));
 background-size:32px 32px,auto,auto;
 background-repeat:repeat,no-repeat,no-repeat;
 -webkit-backdrop-filter:blur(7px) saturate(135%);
 backdrop-filter:blur(7px) saturate(135%);
 box-shadow:inset 1px 2px 2px #ffffff4d,inset -1px -2px 3px #b8d4bc44,0 24px 60px -34px #1d2a2199;
}

/* Pe Chromium intră și lentila de refracție, ca la restul sticlei de pe site. */
html.surface-refraction .footer-bento > .footer-glass.glass.surface-visible {
 -webkit-backdrop-filter:var(--surface-lens) blur(6px) saturate(135%);
 backdrop-filter:var(--surface-lens) blur(6px) saturate(135%);
}

/* Planta stă în spatele sticlei (z-index -2 față de -1). O aduc în cadru și o
   fac mai mare, ca silueta ei să se citească prin verde. */
.footer-bento > .salon-footer-palm {
 width:480px; right:-70px; top:10%; opacity:1;
}

@media(max-width:760px) {
 html .footer-bento > .footer-glass.glass {
  -webkit-backdrop-filter:blur(5px) saturate(130%);
  backdrop-filter:blur(5px) saturate(130%);
 }
 .footer-bento > .salon-footer-palm { width:250px; right:-60px; top:8%; }
}

/* --- 2. Spațiul dintre „despre" și recenzii ---------------------------- */

/* Era 235px + 100px = 335px, cel mai mare gol dintre două secțiuni de pe
   pagină. Celelalte sunt între 245 și 300. Pensula atârnă sub colajul de
   poze, deci padding-ul de jos rămâne generos, dar nu exagerat. */
.home-bento #despre.about-bento { padding-bottom:190px; }
#recenzii.reviews-polish { padding-top:60px; }

@media(max-width:760px) {
 .home-bento #despre.about-bento { padding-bottom:150px; }
 #recenzii.reviews-polish { padding-top:48px; }
}

/* --- 3. Cardurile din jurnal ------------------------------------------- */

/* Gabi a dat zoom out la 67% și abia așa i-au plăcut proporțiile, apoi a cerut
   un sfert înapoi. Cutiile sunt la 84% din dimensiunea inițială, iar textul e
   recalculat din lățimea cardului cu aceleași rapoarte ca la început
   (titlu 0,08 × lățime, citat 0,125 × lățime), ca proporția din interiorul
   cardului să rămână cea gândită. Eticheta stă la 10px, care e podeaua ei de
   lizibilitate. Doar pe pagina principală — grila din blog.html rămâne cum e. */
.journal-home .journal-rows,
.journal-home .journal-row { gap:15px; }

.journal-home .journal-card {
 width:250px; min-height:210px; padding:10px; border-radius:24px;
}
.journal-home .journal-card img { height:132px; border-radius:16px; }
.journal-home .journal-card-copy { padding:10px 9px 5px; }
.journal-home .journal-card h3 { font-size:20px; line-height:1.14; margin:6px 0 12px; }
.journal-home .journal-meta { font-size:10px; }
.journal-home .journal-card-bottom { font-size:10px; }
.journal-home .journal-card-bottom b { font-size:17px; }

.journal-home .journal-card.wide { width:320px; }
.journal-home .journal-card.quote { width:212px; padding:23px; }
.journal-home .journal-card.quote h3 { font-size:27px; line-height:1.15; }
.journal-home .journal-card.quote .quote-no { font-size:43px; }

/* Pe telefon cardurile rămân cât erau — micșorarea a fost cerută pentru
   vederea de pe desktop, unde intrau prea puține pe lățime. */
@media(max-width:760px) {
 .journal-home .journal-rows,
 .journal-home .journal-row { gap:14px; }
 .journal-home .journal-card { width:300px; min-height:256px; padding:12px; border-radius:28px; }
 .journal-home .journal-card img { height:160px; border-radius:19px; }
 .journal-home .journal-card-copy { padding:12px 10px 6px; }
 .journal-home .journal-card h3 { font-size:24px; margin:7px 0 14px; }
 .journal-home .journal-meta { font-size:10px; }
 .journal-home .journal-card-bottom { font-size:11px; }
 .journal-home .journal-card-bottom b { font-size:21px; }
 .journal-home .journal-card.wide { width:380px; }
 .journal-home .journal-card.quote { width:255px; padding:28px; }
 .journal-home .journal-card.quote h3 { font-size:32px; line-height:1.14; }
 .journal-home .journal-card.quote .quote-no { font-size:52px; }
}

/* --- 4. Frunza din stânga footerului ----------------------------------- */

/* A doua plantă, pe partea opusă palmierului. Monstera, nu cea țepoasă.
   Stă pe același strat ca palmierul (z-index -2), deci tot în spatele
   sticlei, și e la fel de neclară prin ea. */
.footer.footer-bento::after {
 content:""; position:absolute; z-index:-2; pointer-events:none;
 left:-165px; bottom:-22px; width:365px; height:365px;
 background:url(../assets/img/hero-leaf.webp) center/contain no-repeat;
 transform:rotate(-14deg);
}

@media(max-width:760px) {
 .footer.footer-bento::after { left:-115px; bottom:-40px; width:230px; height:230px; }
}

/* --- 5. Frunza din dreapta din hero, întoarsă ------------------------- */

/* Era la 115°, cu vârful spre interiorul pozei. Plus 180° o duce cu vârful
   spre marginea ecranului. Rotația e în jurul centrului, deci nu se mișcă
   din loc. */
.bento-hero .leaf-right { transform:rotate(295deg); }

/* --- 6. Pensula, mutată peste recenzii -------------------------------- */

/* Coboară din dreptul colajului de poze până deasupra cardului lui Florin D.
   și se întoarce cu perii în jos, ca și cum ar peria cardul. Cutia ei de
   poziționare e `.about-bento-collage`, de aceea offset-urile sunt raportate
   la ea; 209° = cele 180 de răsturnare plus înclinarea de 29 a mânerului. */
#despre .about-bento-brush {
 top:calc(100% + 262px);
 left:calc(50% + 161px);
 transform:rotate(209deg);
}

/* Pe telefon recenziile sunt una sub alta, iar mutarea de mai sus ar scoate
   pensula în afara ecranului. Acolo rămâne unde era, sub colajul de poze. */
@media(max-width:760px) {
 #despre .about-bento-brush {
  top:calc(100% + 20px);
  left:calc(50% - 20px);
  transform:rotate(-22deg);
 }
}

/* --- 7. Pata albastră din fundal, aceeași proporție ca pe telefon ------ */

/* Blobul e dimensionat în vw, dar blurul era fix la 90px. Pe 390px asta
   înseamnă blur cât raza (1,10), deci o ceață lată care ajunge la 55% din
   lățimea ecranului. Pe 1600px raportul cade la 0,27, deci un disc definit
   care ține doar 38% din lățime — de acolo senzația că pe desktop e mai
   puțin albastru. Aici blurul scalează și el cu lățimea, iar opacitatea
   scade cât să compenseze discul mai concentrat.
   Doar peste 760px — pe telefon rămâne exact cum e. */
@media(min-width:761px) {
 .a-blue {
  width:72vw; height:72vw; top:-25vw; right:-19vw;
  filter:blur(14vw); opacity:.47;
 }
}

/* --- 8. A doua bară de derulare ---------------------------------------- */

/* `style.css` pune `body { overflow-x: hidden }`. Conform specificației, când
   o axă nu e `visible`, cealaltă devine `auto` — deci body-ul se transformă în
   container derulabil și își cere propria bară de îndată ce ceva depășește pe
   verticală, fie și cu 20 de pixeli. Decorurile care ies din cadru (frunze,
   palmier, marquee) fac exact asta.
   `clip` taie la fel pe orizontală, dar NU creează container derulabil, deci
   bara dublă dispare. Pe motoarele care nu cunosc `clip`, declarația e
   ignorată și rămâne `hidden` de dinainte. */
body { overflow-x: clip; }

/* --- 9. Bara gri din hero, scoasă de pe telefon ------------------------ */

/* Pe sub 760px `.hero-header` se transforma într-o bară gri cu bulină, logo și
   burger, peste hero. Rămâne doar headerul normal, `.home-nav-wrap`, care are
   deja propriul buton de meniu pe telefon. Bara e `position:absolute`, deci
   scoaterea ei nu mișcă nimic din layout. */
@media(max-width:760px) {
 .hero-header { display:none; }
}

/* --- 10. Pe telefon headerul stă sus tot timpul ------------------------ */

/* `.home-nav-wrap` e ascuns până când JS-ul îi pune clasa `is-in`, adică după
   ce treci de banda cu branduri. Acum că bara gri din hero a dispărut, pe
   telefon nu mai avea rost să lipsească tocmai în capul paginii. Forțez starea
   vizibilă indiferent de clasă; JS-ul poate să o pună și să o scoată în
   continuare, nu mai are efect aici. Pe desktop rămâne exact cum era.
   Preloaderul e pe z-index 200, deci tot îl acoperă cât timp se încarcă. */
@media(max-width:760px) {
 .home-nav-wrap {
  transform:none;
  visibility:visible;
  pointer-events:auto;
 }
}

/* --- 11. Cardul „Frumusețea începe cu tine", lat cât headerul ---------- */

/* Era 70% din lățime, cu text pe trei rânduri și înălțime impusă de 112px.
   Lățit la cât ține headerul, textul încape pe mai puține rânduri, deci
   ocupă mai puțin pe verticală. Înălțimea o dictează acum conținutul;
   podeaua reală rămâne săgeata de 40px plus paddingul. */
@media(max-width:760px) {
 .bento-invite { width:100%; max-width:none; min-height:0; }
}
@media(max-width:359px) {
 .bento-invite { width:100%; }
}

/* --- 12. Categoria activă rămâne verde și sub cursor ------------------- */

/* `.services-picker a[aria-current="true"]` și `.services-picker a:hover` au
   exact aceeași specificitate, iar regula de hover e scrisă mai jos în
   services-orbit.css, deci câștigă. După un click cursorul rămâne pe butonul
   apăsat, așa că verdele era acoperit de highlight și părea că nu s-a aplicat.
   Aici starea activă e repetată împreună cu hover, ca să treacă înaintea lui. */
.services-picker a[aria-current="true"],
.services-picker a[aria-current="true"]:hover,
.services-picker a[aria-current="true"]:focus-visible {
 background:#435744;
 color:#fffaf3;
 box-shadow:inset 0 1px 1px #ffffff40,0 3px 7px #344a3e26;
}

/* --- 13. Fără evidențierea browserului la click/atingere --------------- */

/* Pe telefon, la atingere, browserul pune peste element un dreptunghi
   albastru: `rgba(51,181,229,.4)`, implicitul Android. Îl scoatem peste tot.
   Proprietatea se moștenește, dar o punem universal ca să prindem și
   elementele care și-ar seta-o singure. */
* { -webkit-tap-highlight-color: transparent; }

/* Contur doar când focusul vine de la tastatură. La click browserul nu mai
   lasă nimic în urmă, dar inelul de navigare cu Tab rămâne, altfel site-ul
   devine imposibil de folosit fără mouse. */
:focus:not(:focus-visible) { outline: none; }

/* --- 14. Golul dintre recenzii, la fel peste tot ----------------------- */

/* Cardul de deasupra foarfecii avea `margin-bottom:100px`, rezervat ca să
   încapă foarfeca dedesubt. Așa ieșea un gol de 117px acolo, față de 18px
   între toate celelalte recenzii. Foarfeca e oricum `position:absolute`,
   deci poate sta peste carduri fără spațiu rezervat. */
@media(max-width:700px) {
 #recenzii .review-cut-scene { margin-bottom:0; }
}

/* --- 15. Hero-ul pe telefon, cu fundalul restului site-ului ------------ */

/* Sub 760px `.bento-hero` primea `background: var(--hero-paper)`, adică
   #fff8f1 opac. Acoperea stratul `.aurora`, care e `position:fixed` în spatele
   paginii, deci hero-ul ieșea mai deschis și mai cald decât restul. Scos,
   ca să se vadă același fundal peste tot. */
@media(max-width:760px) {
 .bento-hero { background:transparent; }
}

/* --- 16. Poziția benzii de blog, ținută într-o variabilă --------------- */

/* `blog.js` face `row.style.transform = ''` la fiecare eveniment de scroll,
   pentru rândurile de pe telefon. Dacă poziția benzii ar sta în stilul inline,
   ar fi ștearsă de fiecare dată și banda ar sări înapoi la aceeași poziție.
   O ținem într-o variabilă CSS, pe care el nu o atinge. */
@media(max-width:760px) {
 .journal-home .journal-row.journal-drag-on {
  transform:translateX(var(--journal-x, 0px));
 }
}

/* --- 17. Butoanele din meniul mobil, centrate -------------------------- */

/* `.booking-options` e un rând flex fără `justify-content`, deci pornea din
   stânga. Cele două butoane nu încap unul lângă altul pe telefon și trec pe
   rânduri separate, iar fiecare rămânea lipit de margine. */
.hero-menu-panel .booking-options { justify-content:center; }

/* --- 18. Planta de lângă hartă, pe dreapta pe telefon ------------------ */

/* Era ancorată la stânga, cu `scaleX(-1) rotate(8deg)`. Pe telefon o trec în
   dreapta și o oglindesc înapoi, ca să se sprijine de cadru în aceeași
   manieră. Pe desktop rămâne neatinsă. */
@media(max-width:760px) {
 /* regulile existente sunt `#contact .salon-map-palm`, deci am nevoie de
    aceeasi specificitate ca sa le trec inainte */
 #contact .salon-map-palm {
  left:auto;
  right:-75px;
  transform:rotate(-8deg);
 }
}

/* --- 19. Pensula pe telefon, peste colajul de poze --------------------- */

/* Ca și pe desktop: pensula stătea sub colaj, în spațiul dintre secțiuni, și
   făcea golul să pară gol degeaba. O ridic peste poza din dreapta jos și o
   întorc cu perii spre ea (209° = 180 de răsturnare plus înclinarea
   mânerului). Cum nu mai are nevoie de loc dedesubt, scade și padding-ul. */
@media(max-width:760px) {
 /* valori reglate de Gabi direct in DevTools */
 #despre .about-bento-brush {
  left:auto;
  right:-18px;
  top:calc(100% - 36px);
  transform:rotate(226deg);
 }
 .home-bento #despre.about-bento { padding-bottom:90px; }
}