/* Stilul paginii „Galerii private".
   ---------------------------------------------------------------------------
   Pagina e separată de index.html, deci are nevoie de propriile reguli. Am
   păstrat aceleași variabile de culoare și aceleași fonturi ca restul site-ului,
   ca să nu se simtă ruptura când vizitatorul trece dintr-o parte în alta.

   Dacă schimbi vreodată paleta, ea e definită în două locuri: aici și în
   <style> din index.html. */

:root{
  --bg:#f6f4fb;
  --bg-alt:#ece8f7;
  --ink:#221f2a;
  --ink-soft:#56505f;
  --line:#d7d2e8;
  --accent:#a98f6b;
  --accent-soft:#eee4d3;
  --white:#ffffff;
  --maxw:1180px;
}

*{ box-sizing:border-box; margin:0; padding:0; }

body{
  font-family:'Montserrat', sans-serif;
  background:var(--bg);
  color:var(--ink);
  font-weight:300;
  line-height:1.8;
  font-size:15px;
  -webkit-font-smoothing:antialiased;
}

a{ color:inherit; }
/* Text prezent în pagină, dar invizibil: îl citesc cititoarele de ecran și
   Google. Îl folosim pentru titlul H1, scos din design. */
.doar-citit{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}
img{ max-width:100%; display:block; }

.container{ max-width:var(--maxw); margin:0 auto; padding:0 50px; }

/* ===== ANTET ===== */
.antet{
  background:var(--white); border-bottom:1px solid var(--line);
  padding:18px 0; position:sticky; top:0; z-index:100;
}
.antet .container{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
/* Logo-ul original, pe două rânduri. Regulile lui stau în marca.css, comun
   tuturor paginilor; aici stabilim doar cât de mare e în bara asta.
   „Photography" e rândul de jos, mic — sub ~56px devine o dungă. */
.marca{ --marca-inaltime:62px; }
/* Aceeași cutie ca butonul „Galerii private" din meniul paginii principale:
   aceeași înălțime, aceeași lățime minimă, același text centrat. Așa, când
   treci dintr-o pagină în alta, butonul rămâne pe loc în loc să sară.
   Dacă schimbi ceva aici, schimbă și .btn-galerii din index.html. */
.inapoi{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-width:198px; height:39px; box-sizing:border-box;
  /* Scris caligrafic, ca perechea lui din meniul paginii principale — și la
     aceeași mărime (21px), ca butonul să arate identic când treci dintr-o
     pagină în alta. */
  font-family:'Great Vibes', 'Cormorant Garamond', cursive;
  font-size:21px; letter-spacing:0; text-transform:none; line-height:1;
  text-decoration:none;
  color:var(--ink-soft); border:1px solid var(--line); padding:0 17px;
  transition:border-color .2s ease, color .2s ease;
}
.inapoi:hover{ border-color:var(--accent); color:var(--accent); }

/* ===== TITLU ===== */
/* Fără titlul mare, blocul are mai puțin de spus — deci și mai puțin aer
   deasupra, altfel pagina pare că începe cu o pauză. */
.pagina-antet{ text-align:center; padding:58px 0 42px; }
/* Supratitlul, scris caligrafic ca pe prima pagină. Aceeași regulă și același
   font (vezi --font-scris din index.html): majusculele și spațierea dintre
   litere pleacă odată cu el, iar mărimea urcă, fiindcă literele mici ale unui
   scris caligrafic sunt mai scunde. */
.eyebrow{
  display:block; font-family:'Great Vibes', 'Cormorant Garamond', cursive;
  font-size:25px; letter-spacing:0; text-transform:none; line-height:1.2;
  color:var(--accent); margin-bottom:12px;
}
.pagina-antet h1{
  font-family:'Cormorant Garamond', serif; font-weight:500;
  font-size:clamp(31px, 5vw, 45px); line-height:1.2; margin-bottom:18px;
}
/* Fiecare frază pe rândul ei: sunt propoziții scurte, nu un paragraf. */
.pagina-antet p{ color:var(--ink-soft); font-size:15.5px; }
.pagina-antet p + p{ margin-top:4px; }

/* ===== GRILA DE GALERII ===== */
/* Cinci pe rând. „auto-fit" cu lățime limitată, plus centrare: un rând
   incomplet — ultimul, de obicei — stă centrat, nu lipit la stânga cu goluri
   în dreapta. */
.galerii-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 196px));
  justify-content:center; gap:26px 20px;
  max-width:1080px; margin:0 auto 46px;
}
.galerie-tile{ display:block; text-decoration:none; color:var(--ink); }
/* Rotunjirea o punem CHIAR AICI, nu doar în colturi.css: pagina asta e un fișier
   .html, pe care browserul îl ține în memorie mai mult decât o pagină PHP. Dacă
   se deschide din memorie, legătura nouă către colturi.css nici nu e încă în ea
   — și pozele ar rămâne drepte. Aici e în fișierul pe care oricum îl încarcă. */
.galerie-tile-img{ position:relative; overflow:hidden; aspect-ratio:4/5; background:var(--bg-alt); border-radius:8px; }
.galerie-tile-img img{ width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.galerie-tile:hover .galerie-tile-img img{ transform:scale(1.05); }
.lock-overlay{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(28,25,34,0.32); transition:background .3s ease;
}
.galerie-tile:hover .lock-overlay{ background:rgba(28,25,34,0.45); }
.lock-icon{ width:26px; height:26px; fill:none; stroke:var(--white); stroke-width:1.5; opacity:.92; }
/* Numele galeriei — auriu și cursiv, ca înăuntru. E numele evenimentului
   cuiva, nu o etichetă de sistem; scris așa arată ca un nume, nu ca un titlu. */
.galerie-tile-nume{
  display:flex; flex-direction:column; align-items:center; line-height:1.25;
  margin-top:13px; text-align:center;
  font-family:'Cormorant Garamond', serif; font-style:italic; font-size:18px;
  letter-spacing:.3px; color:var(--accent);
  transition:color .25s ease;
}
/* Liniuța dintre nume și dată stă pe rândul ei, la mijloc. Scrisă în șir, se
   rupea unde se nimerea și rămânea atârnată la capătul primului rând, ca o
   greșeală de tipar. Vezi functii-nume.php pentru ce anume se taie. */
.galerie-tile-nume .nume-liniuta{ opacity:.5; font-size:.7em; line-height:.85; }
.galerie-tile:hover .galerie-tile-nume{ color:var(--ink); }
.galerii-gol{
  grid-column:1 / -1; text-align:center; color:var(--ink-soft);
  font-size:14.5px; padding:40px 0;
}

/* ===== CĂUTAREA GALERIEI =====
   Pentru cine a pierdut linkul primit și își caută galeria după nume. Stă
   deasupra grilei, îngustă și centrată: e o unealtă, nu subiectul paginii. */
.cautare-galerii{ max-width:640px; margin:0 auto 40px; }
.cautare-camp{ position:relative; display:flex; align-items:center; }
.cautare-camp .icon-lupa{
  position:absolute; left:20px; width:19px; height:19px; pointer-events:none;
  fill:none; stroke:var(--accent); stroke-width:1.7; stroke-linecap:round;
}
.cautare-camp input{
  width:100%; padding:17px 48px 17px 52px;
  border:1px solid var(--line); border-radius:8px; background:var(--white);
  font-family:inherit; font-size:15px; color:var(--ink); text-align:center;
}
/* Textul scris de om stă centrat, ca tot blocul. Când începe să scrie, îl
   mutăm la stânga: un cuvânt care sare din centru la fiecare literă e greu
   de urmărit cu ochiul. */
.cautare-camp input:not(:placeholder-shown){ text-align:left; }
.cautare-camp input::placeholder{ color:#a5a1ac; }
.cautare-camp input:focus{ outline:none; border-color:var(--accent); }
/* Browserele desenează singure un „×" la input[type=search]. Îl scoatem ca să
   rămână doar al nostru, care are și stare: apare abia când ai ce șterge. */
.cautare-camp input::-webkit-search-cancel-button{ -webkit-appearance:none; appearance:none; }
.cautare-sterge{
  position:absolute; right:12px; width:30px; height:30px; padding:0;
  display:flex; align-items:center; justify-content:center;
  background:transparent; border:none; border-radius:50%; cursor:pointer;
  font-size:20px; line-height:1; color:var(--ink-soft);
  transition:background .2s ease, color .2s ease;
}
.cautare-sterge:hover{ background:#f0eef8; color:var(--ink); }
/* „display:flex" de mai sus bate regula implicită a browserului pentru
   [hidden], deci butonul ar rămâne vizibil și când n-are ce șterge. Îi spunem
   limpede să dispară. */
.cautare-sterge[hidden]{ display:none; }
.cautare-stare{
  text-align:center; font-size:12.5px; color:var(--ink-soft);
  margin-top:11px; letter-spacing:.3px;
}

/* ===== PAGINARE =====
   Schimbă doar conținutul grilei, fără să reîncarce pagina. */
.paginare{
  display:flex; justify-content:center; align-items:center; gap:7px;
  flex-wrap:wrap; margin:0 auto 64px;
}
.paginare button{
  min-width:38px; height:38px; padding:0 11px;
  background:transparent; border:1px solid var(--line); color:var(--ink-soft);
  font-family:inherit; font-size:13px; font-variant-numeric:tabular-nums;
  cursor:pointer; transition:border-color .2s ease, color .2s ease, background .2s ease;
}
.paginare button:hover:not(:disabled):not(.activa){ border-color:var(--accent); color:var(--accent); }
.paginare button:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.paginare button.activa{
  background:var(--accent); border-color:var(--accent); color:var(--white); cursor:default;
}
.paginare button:disabled{ opacity:.3; cursor:default; }
.paginare .puncte{ color:var(--ink-soft); padding:0 3px; user-select:none; }
.paginare-info{
  text-align:center; font-size:12.5px; color:var(--ink-soft);
  margin:-30px auto 30px; letter-spacing:.4px;
}
/* Aceleași butoane și deasupra grilei, ca să nu derulezi până jos de fiecare
   dată. Sus e mai discretă: linie de despărțire, fără spațiu mare. */
.paginare-sus{
  margin:0 auto 30px; padding-bottom:22px; border-bottom:1px solid var(--line);
}

/* ===== TRANZIȚIA DINTRE PAGINI =====
   Lista veche se stinge scurt, cea nouă intră placă după placă. Mișcarea e
   mică — câțiva pixeli — pentru că pe o grilă de 20 de imagini orice deplasare
   mai mare devine agitație. */
.galerii-grid{ transition:opacity .16s ease; }
.galerii-grid.se-stinge{ opacity:0; }

@keyframes intraPlaca{
  from{ opacity:0; transform:translateY(9px); }
  to  { opacity:1; transform:none; }
}
.galerie-tile.intra{
  animation:intraPlaca .34s cubic-bezier(.22,.61,.36,1) both;
}

/* Cine are pornită setarea de sistem „mai puțină mișcare" nu vede nimic
   animându-se — nici stingerea, nici intrarea plăcilor. */
@media (prefers-reduced-motion: reduce){
  .galerii-grid{ transition:none; }
  .galerii-grid.se-stinge{ opacity:1; }
  .galerie-tile.intra{ animation:none; }
  html{ scroll-behavior:auto; }
}

/* ===== CASETA DE EXPLICAȚII ===== */
.acces-box{
  max-width:620px; margin:0 auto 90px; background:var(--white);
  border:1px solid var(--line); padding:50px 44px; text-align:center;
}
.acces-box p{ color:var(--ink-soft); font-size:15px; }
.acces-box p + p{ margin-top:6px; }
/* Adresa stă pe rândul ei: împreună cu întrebarea ar fi depășit lățimea casetei
   și s-ar fi rupt în trei rânduri, exact ce voiam să evităm. */
.acces-nota{ font-size:13.5px; margin-top:28px !important; padding-top:26px; border-top:1px solid var(--line); }
.acces-mail{ margin-top:8px !important; }
.acces-mail a{
  color:var(--accent); border-bottom:1px solid var(--accent); text-decoration:none;
  font-size:14.5px; white-space:nowrap;
}
.acces-mail a:hover{ color:var(--ink); border-bottom-color:var(--ink); }

/* ===== SUBSOL ===== */
footer{
  background:#1a1820; color:#86818f; padding:40px 0; text-align:center;
  font-size:12px; letter-spacing:1px;
}
footer a{ color:#c4c0cb; text-decoration:none; }
footer a:hover{ color:#fff; }
.footer-legal{
  display:flex; gap:8px; justify-content:center; flex-wrap:wrap;
  margin-bottom:14px; letter-spacing:.6px;
}
.footer-legal span{ opacity:.4; }

/* Rândul de pagini, deasupra celui legal. Aceleași reguli ca în stil.css, scrise
   încă o dată aici fiindcă pagina asta NU încarcă stil.css — are foaia ei. E o
   dublare, și se vede; alternativa era să car toată foaia cea mare (80 KB) într-o
   pagină care n-are nevoie de ea, pentru douăzeci de rânduri.
   Puțin mai deschis la culoare decât rândul legal și cu un pic de aer sub el:
   sunt paginile site-ului, nu mărunțișul juridic de dedesubt. */
.subsol-pagini{
  display:flex; gap:10px; justify-content:center; flex-wrap:wrap;
  margin-bottom:16px; letter-spacing:.6px;
}
.subsol-pagini a{ color:#e6e3ec; border-bottom:1px solid transparent; }
.subsol-pagini a:hover{ color:#fff; border-bottom-color:var(--accent); }
.subsol-pagini span{ opacity:.3; }
/* Pagina pe care ești deja nu se mai oferă ca drum. */
.subsol-pagini a[aria-current="page"]{ color:#86818f; border-bottom-color:transparent; cursor:default; }


@media (max-width:1080px){
  .galerii-grid{ max-width:860px; }
}
@media (max-width:640px){
  .container{ padding:0 24px; }
  .pagina-antet{ padding:52px 0 34px; }
  /* 48px, nu mai mult: la 50px logo-ul plus butonul „Înapoi la site" (lat de
     198px) nu mai încap pe un rând la 390px lățime — cel mai des întâlnit
     ecran de telefon — și butonul sare dedesubt. */
  .marca{ --marca-inaltime:48px; }
  .galerii-grid{ grid-template-columns:repeat(auto-fit, minmax(130px, 1fr)); gap:20px 14px; }
  .acces-box{ padding:36px 26px; margin-bottom:64px; }
  .paginare button{ min-width:34px; height:34px; font-size:12.5px; }
}