/* Varianta RTL (dreapta–stânga) generată automat din blog.css — nu se editează manual. */
/* ═══ BLOG: listă, filtre, articol ═══════════════════════════════════
   Folosește exclusiv variabilele din main.css. Nicio mărime scrisă
   direct, ca blogul să rămână în aceeași scară tipografică cu restul
   site-ului chiar dacă scara se schimbă cândva. */

.blog-section { padding:64px 0 88px; }
.blog-gol     { text-align:center; color:var(--muted-2); padding:60px 0; }

/* ─── Unelte: filtre și căutare ───────────────────────────────── */

.blog-unelte {
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; flex-wrap:wrap; margin-bottom:36px;
  padding-bottom:24px; border-bottom:1px solid var(--border);
}
.blog-unelte[hidden] { display:none; }

.blog-filtre { display:flex; gap:8px; flex-wrap:wrap; min-width:0; }

.blog-filtru {
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 16px; background:transparent;
  border:1px solid var(--border); color:var(--muted);
  font-family:var(--sans); font-size:var(--fs-small); font-weight:600;
  cursor:pointer; transition:border-color 0.2s, color 0.2s, background 0.2s;
}
.blog-filtru:hover { border-color:var(--green); color:var(--green); }
.blog-filtru.activ { background:var(--green); border-color:var(--green); color:#fff; }
.blog-filtru:focus-visible { outline:2px solid var(--green); outline-offset:2px; }

.blog-nr {
  font-size:var(--fs-micro); opacity:0.7;
  font-variant-numeric:tabular-nums;
}

.blog-dreapta { display:flex; align-items:center; gap:10px; flex:0 1 340px; min-width:200px; }
.blog-cauta { position:relative; flex:1 1 auto; min-width:0; }

/* Butonul de intrare în redacție: discret, dar la locul lui. */
.blog-login {
  flex:0 0 auto; width:42px; height:42px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--border); background:#fff;
  color:var(--muted); font-size:1.05rem;
  transition:color 0.2s, border-color 0.2s, background 0.2s;
}
.blog-login:hover, .blog-login:focus-visible {
  color:#fff; background:var(--green); border-color:var(--green);
}
.blog-cauta .ti {
  position:absolute; right:13px; top:50%; transform:translateY(-50%);
  color:var(--muted-2); font-size:1.05rem; pointer-events:none;
}
.blog-cauta input {
  width:100%; padding:11px 40px 11px 14px;
  border:1px solid var(--border); background:#fff;
  font-family:var(--sans); font-size:var(--fs-small); color:var(--text);
}
.blog-cauta input:focus { outline:none; border-color:var(--green); }

.blog-rezultate {
  font-size:var(--fs-small); color:var(--muted-2); margin:-18px 0 26px;
}
.blog-rezultate[hidden] { display:none; }

.blog-nimic {
  text-align:center; color:var(--muted-2); padding:56px 20px;
  font-size:var(--fs-body);
}
.blog-nimic[hidden] { display:none; }
.blog-reset {
  background:none; border:0; padding:0; cursor:pointer;
  color:var(--green); font:inherit; text-decoration:underline;
  text-underline-offset:3px;
}

/* ─── Grila de articole ───────────────────────────────────────── */

.blog-grid {
  display:grid; grid-template-columns:repeat(3, 1fr); gap:32px 28px;
}
.blog-grid > * { min-width:0; }

/* Tot cardul e o legătură, nu doar titlul: cine dă clic pe fotografie
   sau pe descriere se așteaptă să ajungă în articol, nu să nu se
   întâmple nimic. Suprafața o dă titlul, printr-un strat întins peste
   card, ca să rămână un singur link pentru cititoarele de ecran. */
.blog-card {
  position:relative;
  display:flex; flex-direction:column; background:#fff;
  border:1px solid var(--border);
  transition:border-color 0.25s, transform 0.25s;
}
.blog-card h2 a::after,
.blog-card h3 a::after {
  content:''; position:absolute; inset:0; z-index:1;
}
.blog-card h2 a, .blog-card h3 a { position:static; }
.blog-card:hover { border-color:var(--gold); transform:translateY(-3px); }
.blog-card[hidden] { display:none; }

.blog-card-img {
  display:block; aspect-ratio:3 / 2; overflow:hidden;
  background:var(--cream-2);
}
.blog-card-img img {
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform 0.5s var(--ease, ease);
}
.blog-card:hover .blog-card-img img { transform:scale(1.04); }

.blog-card-corp {
  display:flex; flex-direction:column; flex:1; padding:24px 24px 26px;
}

.blog-card-meta {
  display:flex; align-items:center; gap:7px; flex-wrap:wrap;
  font-size:var(--fs-micro); color:var(--muted-2); margin-bottom:12px;
}
.blog-categorie {
  color:var(--green); font-weight:700;
  text-transform:uppercase; letter-spacing:0.1em;
}
.blog-punct { opacity:0.5; }

.blog-card h2, .blog-card h3 {
  font-family:var(--serif); font-size:var(--fs-h3); font-weight:600;
  line-height:var(--lh-head); margin:0 0 10px; text-wrap:balance;
}
.blog-card h2 a, .blog-card h3 a { color:var(--text); text-decoration:none; }
.blog-card h2 a:hover, .blog-card h3 a:hover { color:var(--green); }

.blog-card p {
  font-size:var(--fs-small); color:var(--muted); line-height:var(--lh-body);
  margin:0 0 18px;
}

.blog-card-link {
  margin-top:auto; display:inline-flex; align-items:center; gap:7px;
  font-size:var(--fs-micro); font-weight:700; color:var(--green);
  text-transform:uppercase; letter-spacing:0.1em;
}
.blog-card:hover .blog-card-link i { transform:translateX(-3px); }
.blog-card-link i { transition:transform 0.25s; }

/* Primul articol ocupă două coloane: e cel mai nou, deci cel care
   trebuie citit. Doar pe ecrane late, unde are loc. */
@media (min-width: 1025px) {
  .blog-card-mare { grid-column:span 2; flex-direction:row; }
  .blog-card-mare .blog-card-img { flex:0 0 52%; aspect-ratio:auto; }
  .blog-card-mare .blog-card-corp { padding:34px 34px 36px; justify-content:center; }
  .blog-card-mare h2 { font-size:calc(var(--fs-h3) * 1.22); }
  .blog-card-mare p { font-size:var(--fs-body); }
}

@media (max-width: 1024px) { .blog-grid { grid-template-columns:repeat(2, 1fr); } }
@media (max-width: 700px)  { .blog-grid { grid-template-columns:1fr; gap:24px; } }

/* ─── Articolul ───────────────────────────────────────────────── */

.wrap-ingust { max-width:780px; }

/* Capul articolului: aceeași bandă verde ca la celelalte pagini, cu
   totul centrat, ca articolul să nu iasă din rândul site-ului.
   Contextul (Blog, categoria, data) stă pe un singur rând deasupra
   titlului: sunt trei informații mărunte, nu merită trei locuri. */
.articol-cap {
  background:var(--green-dk); color:#fff;
  padding:64px 0 40px; text-align:center;
}
.articol-drum {
  display:flex; align-items:center; justify-content:center;
  gap:9px; flex-wrap:wrap; margin:0 0 20px;
  font-size:var(--fs-micro); color:rgba(255,255,255,0.62);
  text-transform:uppercase; letter-spacing:0.12em; font-weight:700;
}
.articol-drum a { color:var(--gold-sr); text-decoration:none; }
.articol-drum a:hover { text-decoration:underline; text-underline-offset:3px; }
.articol-drum span[aria-hidden] { opacity:0.45; }

/* Antetul are lățimea lui, mai mare decât coloana de text a
   articolului. Titlul e cel mai lung rând din pagină și, strâns în
   lățimea textului, se rupea în trei. Corpul articolului rămâne
   îngust, fiindcă acolo contează lungimea rândului la citit. */
.articol-cap .wrap { max-width:940px; }

.articol-cap h1 {
  font-family:var(--serif); font-size:var(--fs-h1); font-weight:500;
  line-height:1.16; margin:0 auto 20px; color:#fff;
  text-wrap:balance; max-width:30ch;
}
.articol-lede {
  font-size:var(--fs-lead); color:rgba(255,255,255,0.82);
  line-height:var(--lh-body); margin:0 auto; max-width:66ch;
}

/* Coperta stă imediat sub bandă, iar în spatele primilor ei pixeli
   se vede tot verdele: fotografia pare pusă peste bandă, dar fără
   margini negative, care ar fi urcat peste text.

   Măsura e fixă, nu procentuală: la o fotografie înaltă, procentul ar
   fi împins verdele oriunde. */
.articol-coperta {
  background:linear-gradient(to bottom, var(--green-dk) 80px, #fff 80px);
  padding-bottom:44px;
}
/* Fotografia nu stă lipită de pagină: are umbra ei și chenarul auriu
   subțire dinăuntru, același semn pe care îl poartă și fotografiile din
   secțiunile cu text de pe restul site-ului. Umbra e în două straturi,
   unul apropiat și unul larg: așa cade lumina pe ceva așezat pe o masă,
   nu ca un contur desenat. */
.coperta-rama {
  position:relative; margin:0; line-height:0;
  box-shadow:0 2px 6px rgba(14,24,18,0.10),
              0 18px 44px rgba(14,24,18,0.26);
}
.coperta-rama::after {
  content:''; position:absolute; inset:12px;
  border:1px solid var(--gold); pointer-events:none;
}
.articol-coperta img {
  width:100%; height:auto; display:block;
  max-height:460px; object-fit:cover;
}

/* Fotografiile din text primesc același tratament, mai discret.
   Regulile vin înaintea stilurilor articolului, deci un autor care
   își desenează singur fotografiile le poate suprascrie. */
.articol-continut figure img,
.articol-continut > img {
  box-shadow:0 1px 4px rgba(14,24,18,0.08),
              0 10px 28px rgba(14,24,18,0.14);
}

@media (max-width: 700px) {
  .articol-cap { padding:40px 0 30px; }
  .articol-cap h1 { max-width:none; }
  .articol-cap .wrap { max-width:none; }
  .articol-coperta {
    background:linear-gradient(to bottom, var(--green-dk) 40px, #fff 40px);
    padding-bottom:28px;
  }
  .articol-coperta img { max-height:260px; }
  .coperta-rama::after { inset:8px; }
  .coperta-rama { box-shadow:0 2px 5px rgba(14,24,18,0.10), 0 10px 26px rgba(14,24,18,0.22); }
}

/* ─── Conținutul, scris de autor ──────────────────────────────
   Aici intră HTML-ul articolului, cu CSS-ul lui deja restrâns la
   acest container de către motor. Regulile de mai jos sunt doar
   tipografia de bază, ca un articol fără stiluri proprii să arate
   totuși bine. Autorul le poate suprascrie pe toate. */

.articol-continut {
  background:#fff; padding-bottom:72px;
  font-size:var(--fs-body); line-height:var(--lh-body); color:var(--muted);
}
.articol-continut > *:first-child { margin-top:0; }

.articol-continut h2 {
  font-family:var(--serif); font-size:var(--fs-h2); font-weight:600;
  line-height:var(--lh-head); color:var(--text);
  margin:48px 0 16px; text-wrap:balance;
}
.articol-continut h3 {
  font-family:var(--serif); font-size:var(--fs-h3); font-weight:600;
  color:var(--text); margin:34px 0 12px;
}
.articol-continut h4 {
  font-size:var(--fs-h4); font-weight:700; color:var(--text); margin:26px 0 10px;
}
.articol-continut p { margin:0 0 18px; }
.articol-continut strong { color:var(--text); font-weight:700; }

.articol-continut a {
  color:var(--green); text-decoration:underline;
  text-decoration-color:var(--gold); text-underline-offset:3px;
}
.articol-continut a:hover { text-decoration-color:var(--green); }

.articol-continut ul, .articol-continut ol { margin:0 0 20px; padding-right:22px; }
.articol-continut ul { list-style:disc; }
.articol-continut ol { list-style:decimal; }
.articol-continut li { margin-bottom:8px; }

.articol-continut img { max-width:100%; height:auto; display:block; }
.articol-continut figure { margin:32px 0; }
.articol-continut figcaption {
  font-size:var(--fs-small); color:var(--muted-2);
  margin-top:10px; text-align:center;
}

.articol-continut blockquote {
  margin:30px 0; padding:4px 22px 4px 0;
  border-right:3px solid var(--green); color:var(--text);
  font-family:var(--serif); font-size:1.2rem; line-height:1.55;
}

/* Tabelele pot fi mai late decât textul: se derulează în containerul
   lor, nu împing pagina. */
.articol-continut table {
  width:100%; border-collapse:collapse;
  font-size:var(--fs-small); margin:0 0 22px;
}
.articol-continut th, .articol-continut td {
  padding:11px 13px; border:1px solid var(--border);
  text-align:right; vertical-align:top;
}
.articol-continut th { background:var(--cream); font-weight:700; color:var(--text); }
.articol-continut .table-wrap,
.articol-continut .tabel { overflow-x:auto; margin:0 0 22px; }

.articol-inrudite { padding-top:64px; }
.articol-inrudite .blog-grid { grid-template-columns:repeat(3, 1fr); }
@media (max-width: 1024px) { .articol-inrudite .blog-grid { grid-template-columns:repeat(2, 1fr); } }
@media (max-width: 700px)  { .articol-inrudite .blog-grid { grid-template-columns:1fr; } }

/* Banda de rezervare de la finalul paginilor de blog. Fundalul e
   fotografia de hero de pe prima pagină; voalul de sus în jos e al ei,
   iar pata din mijloc vine din regula comună pentru `.fullbleed`. */
.blog-rezerva {
  min-height:460px;
  background:linear-gradient(to bottom, rgba(10,18,14,0.52) 0%, rgba(10,18,14,0.74) 100%),
    url('/assets/img/hero-bucegi-iarna-desktop.webp') center/cover no-repeat;
}
.blog-rezerva .eyebrow { display:block; margin-bottom:16px; }
.blog-rezerva h2 { margin-bottom:18px; text-wrap:balance; }
.blog-rezerva p  { max-width:56ch; margin-inline:auto; margin-bottom:34px; }

@media (max-width: 900px) {
  .blog-rezerva {
    min-height:400px;
    background:linear-gradient(to bottom, rgba(10,18,14,0.52) 0%, rgba(10,18,14,0.74) 100%),
      url('/assets/img/hero-bucegi-iarna-mobile.webp') center/cover no-repeat;
  }
  .cta-br { display:none; }
}

@media (max-width: 700px) {
  .blog-section { padding:44px 0 64px; }
  .articol-cap  { padding:36px 0 24px; }
  .articol-continut { padding-bottom:52px; }
  .articol-continut h2 { margin-top:36px; }
  .blog-unelte { gap:16px; }
  .blog-dreapta { flex:1 1 100%; }
}

/* ─── Ultimele articole, pe homepage ──────────────────────────── */

.acasa-blog { padding:84px 0 92px; }
.acasa-blog .blog-grid { grid-template-columns:repeat(3, 1fr); }
@media (max-width: 1024px) { .acasa-blog .blog-grid { grid-template-columns:repeat(2, 1fr); } }
@media (max-width: 700px)  { .acasa-blog .blog-grid { grid-template-columns:1fr; } }

/* Îndemnul de sub grilă, centrat.
   `.cta-block` e `inline-flex`, adică lat cât conținutul lui: se
   centrează din părinte, nu din el însuși. Fără rândurile astea
   rămâne lipit de marginea din stânga. */
.acasa-blog .cta-block,
.articol-inrudite .cta-block,
.blog-cta .cta-block {
  display:flex; align-items:center; width:100%; margin-inline:0;
}
.acasa-blog .cta-pair,
.articol-inrudite .cta-pair,
.blog-cta .cta-pair { justify-content:center; width:100%; }