/* Silver Angel — minimal classy theme (cleaned) */
:root{
  --bg:#f8f6f3;
  --paper:#f0ede9;
  --ink:#2e2a28;
  --muted:#6b6460;
  --gold:#a5835a;
  --line:#d9d4ce;
  --maxw:1100px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family: ui-serif, Georgia, 'Times New Roman', serif}
img{max-width:100%;height:auto;display:block}
a{color:var(--gold);text-decoration:none}
a:hover{text-decoration:underline}

header{background:var(--paper);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}
.header-inner{max-width:var(--maxw);margin:0 auto;padding:20px}
.brand{display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand h1{margin:0;font-size:24px;letter-spacing:1px}
.tagline{margin:6px 0 0 0;color:var(--muted);font-size:14px}
nav{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
nav a{padding:8px 12px;border-radius:999px;border:1px solid transparent;color:#3d3835}
nav a:hover{border-color:var(--line);background:#ffffffaa}

.hero{max-width:var(--maxw);margin:40px auto;padding:0 20px;display:grid;grid-template-columns:1.2fr 1fr;gap:28px}
.hero h2{font-size:36px;margin:0 0 10px}
.hero p{color:var(--muted);line-height:1.6}
.hero .hero-img{border-radius:16px;box-shadow:0 8px 24px rgba(0,0,0,.08)}

main{max-width:var(--maxw);margin:30px auto 60px;padding:0 20px}
.section{margin:40px 0}
.section h2{font-size:28px;margin:0 0 10px}
.section p.lead{color:var(--muted)}

/* === GRID ====================================================== */
/* Compact, responsive grid for cards across pages */
.grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); /* smaller cards */
  gap:18px;
}

/* === CARD BASE ================================================= */
.card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 6px 18px rgba(0,0,0,.06);

  /* equal-height layout + buttons bottom */
  display:flex;
  flex-direction:column;
  height:100%;
}
.card .body{ padding:16px; display:flex; flex-direction:column; flex:1; }
.card h3{ margin:0 0 6px; font-size:18px }
.card p{ margin:0; color:var(--muted); line-height:1.5 }
.card .actions{ display:flex; gap:12px; margin-top:auto }
.btn{ display:inline-block; padding:8px 12px; border-radius:10px; border:1px solid var(--line); background:#fff; color:#3d3835 }
.btn.primary{ background:var(--gold); border-color:var(--gold); color:#fff }
.btn:hover{ filter:brightness(.97) }
button.btn{ font:inherit } /* ensure buttons look like links */

/* === BOOK COVERS (keep title visible) ========================= */
.card > img{
  width:100%;
  aspect-ratio: 9 / 13;
  object-fit: cover;
  object-position: top center;
  border-radius:16px 16px 0 0;
}

/* === COMPACT VARIANT (no big image, small card) ================ */
.card.compact{ border-radius:14px }
.card.compact > img{ display:none }              /* hide big image if present */
.card.compact .body{ padding:12px 14px 14px }    /* tighter */
.card.compact h3{ font-size:17px; margin:0 0 6px }
.card.compact p{
  margin:0 0 8px;
  line-height:1.45;
  display:-webkit-box;
  -webkit-line-clamp:2;         /* shorter descriptions -> smaller card */
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height: calc(1.45em * 2);
}
.card.compact .thumbs{ gap:6px; padding-top:6px }
.card.compact .thumbs img{ width:56px; height:56px; border-radius:8px }
.card.compact .actions .btn{ padding:6px 10px; border-radius:8px; font-size:14px }

/* === GALLERY (Photography page) ================================ */
.gallery{ columns:3 240px; column-gap:18px }
.gallery figure{ break-inside:avoid; margin:0 0 18px; background:#fff; border:1px solid var(--line); border-radius:14px; overflow:hidden; box-shadow:0 6px 18px rgba(0,0,0,.06) }
.gallery figcaption{ padding:10px 12px; color:var(--muted); font-size:14px }

/* === PREVIEW DIALOG (Books/Jewelry) ============================ */
dialog.preview{
  border:none; border-radius:16px; padding:0;
  width:min(840px, 92vw); background:#fff;
  box-shadow:0 20px 60px rgba(0,0,0,.25);
}
dialog.preview::backdrop{ background:rgba(0,0,0,.55) }
dialog.preview .inner{ padding:22px 22px 26px; max-height:min(80vh, 900px); overflow:auto }
dialog.preview h3{ margin:0 0 10px; font-size:22px }
dialog.preview p{ line-height:1.6; color:var(--ink) }
dialog.preview hr{ border:0; border-top:1px solid var(--line); margin:16px 0 }
dialog.preview .close{
  position:absolute; top:8px; right:10px;
  width:36px; height:36px; border:1px solid var(--line);
  border-radius:999px; background:#fff; font-size:20px; line-height:1;
  cursor:pointer;
}
dialog.preview .close:hover{ filter:brightness(.97) }

/* === THUMBS & LIGHTBOX ======================================== */
.thumbs{ display:flex; flex-wrap:wrap; gap:8px; padding:10px 0 0 }
.thumbs img{
  width:64px; height:64px; object-fit:cover; border-radius:8px;
  border:1px solid var(--line); cursor:zoom-in;
}
dialog.lightbox{
  border:none; padding:0; background:#000; width:min(96vw,1100px); border-radius:10px;
}
dialog.lightbox::backdrop{ background:rgba(0,0,0,.65) }
#lightboxImg{ display:block; max-width:100%; max-height:85vh; margin:auto }
.lb-btn{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border-radius:999px; border:1px solid #fff8;
  background:#0008; color:#fff; font-size:22px; line-height:1; cursor:pointer;
}
.lb-btn:hover{ background:#000c }
.lb-btn.prev{ left:10px }
.lb-btn.next{ right:10px }  /* fixed dot */
.lb-btn.close{ top:10px; right:10px; transform:none; width:36px; height:36px; font-size:20px }

/* === FOOTER ==================================================== */
footer{ border-top:1px solid var(--line); background:var(--paper) }
.footer-inner{
  max-width:var(--maxw); margin:0 auto; padding:24px 20px;
  color:var(--muted); display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between;
}
.small{ font-size:13px; color:var(--muted) }

.notice{ padding:12px 14px; border:1px dashed var(--line); border-radius:12px; background:#fff8 }

/* === RESPONSIVE BREAKPOINTS =================================== */
@media (max-width:900px){
  .hero{ grid-template-columns:1fr }
}
@media (max-width:600px){
  nav{ gap:6px }
  .hero h2{ font-size:28px }
}

/* ===== Jewelry: card mai MARE, dar nu pe toată lățimea ===== */
.grid-compact{
  display: grid;
  /* auto-fit "închide" coloanele goale => cardul se lărgește când e singur */
  grid-template-columns: repeat(auto-fit, minmax(360px, 520px));
  gap: 16px;
  justify-content: start;      /* pune cardurile din stânga; folosește center dacă vrei centrat */
}

/* ascunde imaginea mare în această grilă (ai thumbnails) */
.grid-compact .card > img{
  display: none !important;
}

/* card compact, cu butoanele fix jos */
.grid-compact .card{
  border-radius: 12px;
  display: flex;
  flex-direction: column;
}
.grid-compact .card .body{
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.grid-compact .card h3{ font-size: 18px; margin: 0 0 6px; }
.grid-compact .card p{
  margin: 0 0 10px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;           /* descriere până la 3 rânduri */
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(1.5em * 3);
}
.grid-compact .actions{
  margin-top: auto;                /* ► butoanele rămân jos */
  display: flex;
  gap: 12px;
}
.grid-compact .actions .btn{
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 15px;
}

/* Thumbnails: până la 4 pe rând; se înfășoară frumos la 3–4 imagini */
.grid-compact .thumbs{
  display: grid;
  grid-template-columns: repeat(4, 64px);
  gap: 8px;
  padding-top: 6px;
}
.grid-compact .thumbs img{
  width: 64px; height: 64px; object-fit: cover;
  border-radius: 8px; border: 1px solid var(--line);
}

/* Responsive: pe ecrane mici lărgește cardul la toată lățimea */
@media (max-width: 600px){
  .grid-compact{
    grid-template-columns: 1fr;   /* card pe toată lățimea */
    justify-content: stretch;
  }
  .grid-compact .thumbs{
    grid-template-columns: repeat(3, 64px);
  }
}
/* ===== Jewelry compact: fix width + short height ===================== */
/* 1) Grilă cu coloane de lățime FIXĂ (nu se mai întind la 1fr) */
.grid-compact{
  display: grid;
  grid-template-columns: repeat(auto-fit, 420px);  /* ajustează 360–480 după gust */
  gap: 16px;
  justify-content: start;                          /* sau 'center' dacă vrei centrat */
}

/* 2) Fără imagine mare în card (ai thumbnails separate) */
.grid-compact .card > img{ display: none !important; }

/* 3) Card scurt: nu-l forța pe înălțimea rândului */
.grid-compact .card{ height: auto; }

/* 4) Body-ul nu trebuie să umple artificial: */
.grid-compact .card .body{ flex: initial; padding: 12px 14px 14px; }

/* 5) Titlu și descriere compacte (3 rânduri max) */
.grid-compact .card h3{ font-size: 18px; margin: 0 0 6px; }
.grid-compact .card p{
  margin: 0 0 10px; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 6) Thumbnails în „matrice” de 4; se înfășoară frumos dacă pui 3–4 poze */
.grid-compact .thumbs{
  display: grid; grid-template-columns: repeat(4, 64px);
  gap: 8px; padding-top: 6px;
}
.grid-compact .thumbs img{
  width: 64px; height: 64px; object-fit: cover;
  border-radius: 8px; border: 1px solid var(--line);
}

/* 7) Butoane jos, dar mărime normală */
.grid-compact .actions{ margin-top: auto; display: flex; gap: 12px; }
.grid-compact .actions .btn{ padding: 8px 12px; border-radius: 10px; font-size: 15px; }

/* Mobil: card pe toată lățimea */
@media (max-width: 600px){
  .grid-compact{ grid-template-columns: 1fr; justify-content: stretch; }
  .grid-compact .thumbs{ grid-template-columns: repeat(3, 64px); }
}
/* ==== Jewelry: thumbnails + spațiu față de butoane ==================== */
.grid-compact .thumbs{
  display: grid;
  grid-template-columns: repeat(5, 64px);  /* până la 5 poze pe rând */
  gap: 10px;
  padding-top: 8px;
  margin-bottom: 12px;                      /* SPAȚIU înainte de butoane */
}
.grid-compact .thumbs img{
  width: 64px; height: 64px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--line);
}

/* Butoanele rămân jos, dar cu un mic „respiro” față de thumbnails */
.grid-compact .card .actions{
  margin-top: auto;
  padding-top: 4px;
  gap: 12px;
}

/* (opțional) dacă vrei ca butoanele să fie întotdeauna la baza cardului,
   chiar dacă sunt puține poze/text: setează o înălțime minimă a corpului. */
.grid-compact .card .body{
  min-height: 260px;   /* ajustează 240–300 după cum îți place */
}

/* Mobil: thumbnails pe 3 coloane, mai aerisit */
@media (max-width: 600px){
  .grid-compact .thumbs{
    grid-template-columns: repeat(3, 64px);
  }
}
/* ===== Jewelry: same width as book cards ======================= */
.grid-compact{
  --card-w: 250px; /* ajustează 300–340 ca să potrivești EXACT cu Books pe ecranul tău */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--card-w), var(--card-w))); /* coloană fixă */
  gap: 16px;
  justify-content: start; /* pune-l left; schimbă cu 'center' dacă vrei centrat */
}

/* cardul nu se mai întinde */
.grid-compact .card{ width: var(--card-w); height: auto; }
.grid-compact .card > img{ display: none !important; } /* folosești thumbnails */
.grid-compact .card .body{ padding: 12px 14px 14px; display: flex; flex-direction: column; }
.grid-compact .actions{ margin-top: auto; display: flex; gap: 12px; }

/* Thumbnails: 4 pe rând la lățimea asta; vrei 5? setează --card-w: 380px+ */
.grid-compact .thumbs{
  display: grid;
  grid-template-columns: repeat(4, 64px);
  gap: 8px;
  margin: 6px 0 12px;
}
.grid-compact .thumbs img{
  width: 64px; height: 64px; object-fit: cover;
  border-radius: 10px; border: 1px solid var(--line);
}

/* Mobil: 100% lățime și thumbnails pe 3 coloane */
@media (max-width: 700px){
  .grid-compact{
    --card-w: auto;
    grid-template-columns: 1fr;
    justify-content: stretch;
  }
  .grid-compact .thumbs{ grid-template-columns: repeat(3, 64px); }
}

/* ===== Jewelry: titluri/descrieri cu înălțime uniformă ===== */
.grid-compact .card h3{
  font-size: 18px;
  line-height: 1.25;
  margin: 0 0 6px;

  /* ► Varianta A: toate titlurile pe UN SINGUR rând (ellipsis) */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 1.25em;  /* aceeași înălțime pentru toate */
}

.grid-compact .card p{
  margin: 0 0 10px;
  line-height: 1.5;

  /* păstrează EXACT 2 rânduri de descriere */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(1.5em * 2);
}
/* Nav: linkul de pe pagina curentă */
header nav a[aria-current="page"]{
  font-weight: 700;                 /* bold */
  color: var(--gold);               /* auriu */
  border-bottom: 2px solid var(--gold);
  border-radius: 0;                 /* subliniere dreaptă */
}
.justify p{ 
  text-align: justify; 
  text-justify: inter-word; 
  hyphens: auto; 
}
/* ===== PHOTOGRAPHY cards (izolate) ============================= */
.grid-photo{
  --photo-w: 320px; /* ajustează 300–340 ca să semene cu Books */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--photo-w), var(--photo-w)));
  gap: 16px;
  justify-content: start;           /* pune cardurile din stânga; 'center' dacă vrei centrat */
}

.card.photo{
  width: var(--photo-w);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
}
/* ascunde imaginea mare dacă ai doar thumbnails */
.card.photo > img{ display: none; }

.card.photo .body{
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* text mai mare ca la Jewelry */
.card.photo h3{
  font-size: 22px;
  line-height: 1.2;
  margin: 0 0 8px;
}
.card.photo p{
  font-size: 16px;
  line-height: 1.6;
  margin: 0 0 12px;
  display: -webkit-box;
  -webkit-line-clamp: 4;      /* până la 4 rânduri vizibile */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* thumbnails – 5 pe rând, se înfășoară frumos */
.card.photo .thumbs{
  display: grid;
  grid-template-columns: repeat(5, 64px);
  gap: 8px;
  margin: 6px 0 14px;
}
.card.photo .thumbs img{
  width: 64px; height: 64px; object-fit: cover;
  border-radius: 10px; border: 1px solid var(--line); cursor: zoom-in;
}

/* butoane jos */
.card.photo .actions{
  margin-top: auto;
  display: flex;
  gap: 12px;
}

@media (max-width: 700px){
  .grid-photo{
    --photo-w: auto;
    grid-template-columns: 1fr;     /* card full-width pe mobil */
    justify-content: stretch;
  }
  .card.photo{ width: auto; }
  .card.photo .thumbs{ grid-template-columns: repeat(3, 64px); }
}
/* ► PHOTO cards: mai înalte + thumbnails care se așază pe rânduri */
.card.photo{
  /* înălțime minimă; ajustează valorile după gust */
  min-height: clamp(360px, 58vh, 600px);
  display: flex;
  flex-direction: column;
}
.card.photo .body{
  /* corpul ia înălțimea minimă și permite împingerea butoanelor jos */
  min-height: inherit;
  display: flex;
  flex-direction: column;
}

/* Thumbs: 5 pe rând, restul se duc pe rândul următor */
.card.photo .thumbs{
  display: grid;
  grid-template-columns: repeat(5, 64px);
  grid-auto-rows: 64px;   /* rânduri egale */
  gap: 8px;
  margin: 8px 0 14px;
}

/* Butoanele rămân jos indiferent câte thumbs sunt */
.card.photo .actions{
  margin-top: auto;
  display: flex;
  gap: 12px;
}

/* Fine-tuning pe lățimi mari/mici: 6 pe rând wide, 3 pe mobil */
@media (min-width: 1200px){
  .card.photo .thumbs{ grid-template-columns: repeat(4, 64px); }
}
@media (max-width: 700px){
  .card.photo{ min-height: 360px; } /* mai mic pe mobil, dacă vrei */
  .card.photo .thumbs{ grid-template-columns: repeat(3, 64px); }
}
/* --- Thumbs din blocul "More from this walk" toate la aceeași înălțime --- */
.related-grid { 
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem;
}
.related-grid a{ 
  display:block; aspect-ratio: 16 / 10; /* toate cardurile au aceeași „cutie” */
  border-radius:.6rem; overflow:hidden; box-shadow:0 6px 14px rgba(0,0,0,.08);
}
.related-grid img{
  width:100%; height:100%; object-fit:cover; /* taie artistic, fără deformare */
  display:block;
}
@media (max-width:780px){ .related-grid{ grid-template-columns:1fr 1fr; } }

/* === Force equal thumbs in "More from this walk" === */
body.photo-page .related-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:.9rem;
}

body.photo-page .related-grid a{
  position:relative;
  display:block;
  aspect-ratio: 16 / 10;            /* toate cardurile aceeași proporție */
  border-radius:.65rem;
  overflow:hidden;
  box-shadow:0 6px 14px rgba(0,0,0,.08);
}

body.photo-page .related-grid a > img{
  position:absolute;
  inset:0;
  width:100% !important;
  height:100% !important;            /* bate orice img{height:auto} */
  object-fit:cover !important;        /* umple fără deformare */
  display:block;
}
@media (max-width: 780px){
  body.photo-page .related-grid{ grid-template-columns:1fr 1fr; }
}
/* --- Anchor offset so sticky header doesn't cover target sections --- */
:root {
  /* adjust this to your header height + a little breathing room */
  --anchor-offset: 112px; /* try 96–128px to taste */
}

/* Any element that can be a jump target should get a scroll margin */
.guide-main [id],
.guide-content [id],
main [id] {
  scroll-margin-top: var(--anchor-offset);
}

/* Smooth scrolling is nice, optional */
html {
  scroll-behavior: smooth;
}

/* Fallback for old browsers that don't support scroll-margin-top */
@supports not (scroll-margin-top: 1px) {
  .guide-main [id]::before,
  .guide-content [id]::before,
  main [id]::before {
    content: "";
    display: block;
    height: var(--anchor-offset);
    margin-top: calc(-1 * var(--anchor-offset));
    visibility: hidden;
  }
}
/* ---- Anchor / in-page link offset for sticky header ---- */
:root {
  /* tweak these until it feels perfect on your site */
  --anchor-offset: 150px;           /* desktop default */
}

/* Make ALL anchor jumps stop earlier by this amount */
html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--anchor-offset);
}

/* Older browsers fallback (rarely needed now) */
@supports not (scroll-padding-top: 1px) {
  [id]::before {
    content: "";
    display: block;
    height: var(--anchor-offset);
    margin-top: calc(-1 * var(--anchor-offset));
    visibility: hidden;
  }
}

/* If your nav wraps and gets taller on smaller screens, add a bit more */
@media (max-width: 1200px) {
  :root { --anchor-offset: 164px; }
}
@media (max-width: 960px) {
  :root { --anchor-offset: 176px; }
}
@media (max-width: 720px) {
  :root { --anchor-offset: 188px; }
}
/* Highlight the current item in the left list */
#guide-toc a[aria-current="true"],
#guide-toc a.is-active {
  color: var(--brand-900);
  font-weight: 600;
}
/* TOC highlight on click/hash */
#guide-toc a[aria-current="true"],
#guide-toc a.active {
  background: var(--soft);
  font-weight: 600;
}

/* ====== minimalist, nu-ți atinge stilurile existente ====== */
.ai-card{
  width: 420px; max-width: 100%;
  border-radius: 16px; background: #fff;
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
  overflow: hidden; transition: transform .2s ease, box-shadow .2s ease;
}
.ai-card:hover{ transform: translateY(-4px); box-shadow: 0 14px 30px rgba(0,0,0,.12); }
.ai-card__link{ display:block; color:inherit; text-decoration:none; }
.ai-card__cover{ position:relative; height: 220px; background:#0e3b5e; }
.ai-card__svg{ width:100%; height:100%; display:block; }
.ai-card__badge{
  position:absolute; top:12px; left:12px;
  background:#f59e0b; color:#fff; font: 600 12px/1 system-ui, ui-sans-serif, -apple-system;
  padding:4px 8px; border-radius:999px; letter-spacing:.3px;
}
.ai-card__body{ padding:18px 18px 16px; }
.ai-card__title{
  font: 700 20px/1.25 "Georgia", "Times New Roman", serif; color:#1f2937; margin:0 0 8px;
}
.ai-card__text{ color:#4b5563; margin:0 0 14px; }
.ai-card__actions{ display:flex; gap:10px; align-items:center; }

.ai-btn{
  display:inline-block; padding:8px 14px; border-radius:999px;
  border:1px solid #d1d5db; color:#374151; background:#fff;
}
.ai-btn--primary{
  background:#0e3b5e; border-color:#0e3b5e; color:#fff;
}
.ai-btn:hover{ filter:brightness(0.97); }
/* Video lightbox — compact, fără scroll */
.video-lightbox{
  border:0; padding:0;
  background: rgba(0,0,0,.72);
  width:100vw; height:100dvh; max-width:none;
  overflow:hidden;                    /* ← elimină barele de scroll ale dialogului */
}
.video-lightbox::backdrop{ background: rgba(0,0,0,.55); }

/* cadru centrat, cu margini elastice */
.video-lightbox .video-frame{
  position:absolute;
  inset: 0;
  display:grid; place-items:center;
  padding: clamp(12px, 4vh, 32px) clamp(16px, 5vw, 40px);
}

/* video mai mic: maxim 900px lățime sau 72vh înălțime */
.video-lightbox video{
  display:block;
  width:auto; height:auto;
  max-width: min(900px, 92vw);
  max-height: min(72vh, 720px);
  object-fit: contain;                /* nu mai “taie” imaginea */
  border-radius:10px; background:#000;
  box-shadow:0 10px 30px rgba(0,0,0,.4);
}

/* titlul rămâne în interior, sub video */
.video-lightbox .video-title{
  position:absolute; left:50%; transform:translateX(-50%);
  bottom: clamp(32px, 6vh, 72px);
  color:#fff; font-weight:600; text-shadow:0 1px 2px rgba(0,0,0,.6);
}

/* butoane */
.vlb-btn{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border-radius:999px; border:0;
  background:rgba(255,255,255,.12); color:#fff; font-size:28px;
  display:grid; place-items:center; cursor:pointer; backdrop-filter:blur(2px);
}
.vlb-btn:hover{ background:rgba(255,255,255,.2); }
.vlb-btn.prev{ left: 1.2rem; }
.vlb-btn.next{ right: 1.2rem; }
.vlb-btn.close{ top:1rem; right:1rem; transform:none; width:40px; height:40px; font-size:26px; }

/* și mai compact pe mobile */
@media (max-width: 700px){
  .video-lightbox video{
    max-width: 94vw;
    max-height: 60vh;
  }
}
/* asigură-te că butoanele stau "deasupra" tuturor */
.video-lightbox { position: fixed; }            /* stabil, pe tot ecranul */
.vlb-btn { z-index: 20; pointer-events: auto; } /* captează click-urile ferm */
.vlb-btn.close { top: 0.75rem; right: 0.75rem; }/* un pic mai aproape de colț */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
/* Brand title în header (înlocuiește fostul .brand h1) */
.brand .brand-title{
  display:block;
  font-family: inherit;
  font-weight: 800;
  font-size: clamp(26px, 3.2vw, 36px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0;
  color: inherit;
}

/* Tagline sub brand */
.brand .brand-title + .tagline{
  margin-top: 2px;
  display: block;
  font-size: clamp(12px, 1.3vw, 14px);
  color: #6b6460;
}

/* Opțional: link pe brand fără subliniere */
.brand .brand-title a{
  text-decoration: none;
  color: inherit;
}

/* Dacă nu o ai deja: H1 ascuns pentru SEO */
.visually-hidden{
  position:absolute; width:1px; height:1px;
  margin:-1px; padding:0; overflow:hidden;
  clip: rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ===== Blog list (index) ===== */
.blog-list{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  align-items: stretch;
}

.card.blog{
  background:#fff;
  padding:1.25rem 1.5rem;
  border-radius:1.25rem;
  box-shadow:0 8px 30px rgba(0,0,0,.06);
}

.card.blog h2{
  margin:0 0 .5rem 0;
  line-height:1.2;
  font-size: clamp(22px, 2.6vw, 30px);
}

.card.blog h2 a{
  text-decoration:none;
  color:inherit;
}

.card.blog p{
  margin:.25rem 0 1rem 0;
}

/* ===== Article page (prose) ===== */
.prose{
  max-width: 68ch;
  margin: 2rem auto 3rem auto;
  font-size:1.05rem;
  line-height:1.7;
}

.prose h1{
  font-size: clamp(28px, 4vw, 40px);
  line-height:1.2;
  margin: .5rem 0 1rem;
}

.prose h2{
  font-size: clamp(20px, 3vw, 26px);
  margin: 1.5rem 0 .5rem;
  line-height:1.25;
}

.prose figure{
  margin: 1.25rem 0;
  text-align:center;
}

.prose figure img{
  display:block;
  max-width:100%;
  height:auto;
  border-radius:.75rem;
  box-shadow:0 6px 24px rgba(0,0,0,.06);
  margin: 0 auto;
}

.prose figure figcaption{
  font-size:.9rem;
  color:#6b6460;
  margin-top:.5rem;
}

/* Buton din card să nu iasă din container */
.card.blog .btn{
  display:inline-block;
  margin-top:.25rem;
}

/* Blog list: când ai puține articole, ține cardurile mai înguste și centrate */
.blog-list.tight{
  grid-template-columns: repeat(auto-fit, minmax(320px, 560px));
  justify-content: center; /* centrează cardul în container */
}

/* Titlul din card – un pic mai mic ca să nu „țipe” */
.card.blog h2{
  font-size: clamp(20px, 2.2vw, 28px);
}
/* === BLOG CARD: thumb + lățime controlată ===================== */
.blog-list.tight{
  /* păstrează un card între 320–560px și centrează-l */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 560px));
  gap: 2rem;
  justify-content: center;
}

.card.blog{
  background:#fff;
  padding:1.25rem 1.5rem;
  border-radius:1.25rem;
  box-shadow:0 8px 30px rgba(0,0,0,.06);
  max-width: 560px;         /* forțează lățimea cardului */
  margin: 0 auto;           /* sigur centrat dacă e singur */
}

.card.blog > img{
  width:100%;
  aspect-ratio: 16 / 9;     /* thumb frumos, nu “întins” */
  object-fit: cover;
  border-radius:.75rem;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
  margin-bottom:.75rem;
}

.card.blog h2{
  margin:0 0 .5rem 0;
  line-height:1.2;
  font-size: clamp(20px, 2.2vw, 28px); /* puțin mai domol */
}

.card.blog h2 a{ text-decoration:none; color:inherit; }
.card.blog p{ margin:.25rem 0 1rem 0; }
.card.blog .btn{ display:inline-block; margin-top:.25rem; }

/* === ARTICLE LAYOUT: asigură coloana îngustă =================== */
.prose{
  max-width: 68ch;
  margin: 2rem auto 3rem auto;
  font-size:1.05rem;
  line-height:1.7;
}

.prose figure{
  margin: 1.25rem 0;
  text-align:center;
}

.prose figure img{
  display:block;
  max-width:100%;
  height:auto;
  border-radius:.75rem;
  box-shadow:0 6px 24px rgba(0,0,0,.06);
  margin: 0 auto;
}