/* Povești Ortodoxe — site public. Viewer: pagină orizontală 16:9, cadru full-bleed,
   text integral peste imagine. Paletă navy + auriu (ton platformă). */
:root{
  --ground:#141b22; --ground-2:#1c2733; --edge:#2c3a49; --ink:#e8edf2;
  --ink-soft:#b9c4d0; --gold:#d8a657; --muted:#94886f; --yt:#e23b2e;
  --serif:'Spectral',Georgia,serif; --display:'Cormorant Garamond',Georgia,serif;
}
*{box-sizing:border-box}
html,body{margin:0}
body{color:var(--ink);font-family:var(--serif);min-height:100vh;
  background:radial-gradient(120% 90% at 50% -10%, #1e2c3a 0%, var(--ground) 62%)}
a{color:inherit}
.wrap{max-width:1120px;margin:0 auto;padding:24px 18px 48px}

/* brand + căutare */
.brand{display:flex;align-items:center;gap:12px;margin:4px 0 20px}
.home-link{display:flex;align-items:center;gap:10px;text-decoration:none}
.home-link .cross{color:var(--gold);display:inline-flex;align-items:center}
.home-link .cross svg{height:25px;width:auto;display:block}
.home-link b{font-family:var(--display);font-weight:600;font-size:21px;letter-spacing:.02em}
.brand .sp{flex:1}
.search{font-family:var(--serif);font-size:15px;color:var(--ink);background:var(--ground-2);
  border:1px solid var(--edge);border-radius:100px;padding:9px 16px;width:min(260px,42vw);
  outline:none;transition:.15s}
.search::placeholder{color:var(--muted)}
.search:focus{border-color:var(--gold);width:min(300px,50vw)}

/* HOME: grila de povești */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px}
.card{display:block;text-decoration:none;border:1px solid var(--edge);border-radius:10px;
  overflow:hidden;background:var(--ground-2);transition:.18s;position:relative}
.card:hover{transform:translateY(-3px);border-color:var(--gold);box-shadow:0 18px 40px -22px #000}
.card .thumb{aspect-ratio:2752/1536;width:100%;object-fit:cover;display:block;background:#0c131b}
.card .body{padding:12px 14px 14px}
.card .nr{font-family:var(--display);color:var(--gold);font-size:12px;letter-spacing:.12em}
.card .t{font-family:var(--display);font-weight:600;font-size:19px;line-height:1.15;margin-top:2px;text-wrap:balance}
.card .desc{color:var(--ink-soft);font-size:13.5px;line-height:1.45;margin-top:6px}
.card .play{position:absolute;top:10px;right:10px;width:32px;height:32px;border-radius:50%;
  display:grid;place-items:center;background:rgba(226,59,46,.92);color:#fff;font-size:13px;border:1.5px solid #ffffffcc}
.status{color:var(--muted);font-size:15px;padding:40px 0}

/* footer */
.foot{margin-top:48px;padding-top:20px;border-top:1px solid var(--edge);
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px}
.foot-links{display:flex;flex-wrap:wrap;gap:8px 18px}
.foot-links a{color:var(--muted);text-decoration:none;font-size:14px}
.foot-links a:hover{color:var(--gold)}
.foot-copy{color:var(--muted);font-size:13px;margin-left:auto}

/* pagini statice (Despre / Termeni / Confidențialitate) */
.page{max-width:70ch}
.page .back{display:inline-flex;color:var(--muted);text-decoration:none;font-size:14px}
.page .back:hover{color:var(--ink)}
.page h1{font-family:var(--display);font-weight:600;color:var(--ink);
  font-size:clamp(28px,4vw,40px);margin:10px 0 18px;text-wrap:balance}
.page p{color:var(--ink-soft);font-size:16px;line-height:1.65;margin:0 0 14px}
.page a{color:var(--gold)}

/* paginare */
.pager{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:26px}
.pager button{font-family:var(--serif);font-size:15px;color:var(--ink);background:var(--ground-2);
  border:1px solid var(--edge);padding:9px 16px;border-radius:8px;cursor:pointer;transition:.15s}
.pager button:hover:not([disabled]){border-color:var(--gold)}
.pager button[disabled]{opacity:.4;cursor:default}
.pinfo{color:var(--muted);font-size:14px;font-variant-numeric:tabular-nums}

/* VIEWER: pagina poveștii */
.vhead{margin-bottom:12px}
.viewer .back{display:inline-flex;align-items:center;gap:7px;color:var(--muted);
  text-decoration:none;font-size:14px}
.viewer .back:hover{color:var(--ink)}
.vtitle{font-family:var(--display);font-weight:600;color:var(--ink);
  font-size:clamp(22px,3vw,30px);line-height:1.1;margin:6px 0 0;text-wrap:balance}
.stage{position:relative;border:1px solid var(--edge);border-radius:8px;overflow:hidden;
  aspect-ratio:2752/1536;background:#0c131b;box-shadow:0 30px 70px -30px #000,0 0 0 1px #0006}
.imgbox{position:absolute;inset:0}
.stage img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.scrim{position:absolute;inset:0;pointer-events:none}
.scrim.cadru{background:linear-gradient(0deg, rgba(9,13,19,.93) 0%, rgba(9,13,19,.80) 24%, rgba(9,13,19,.30) 48%, rgba(9,13,19,0) 68%)}
.scrim.title{background:radial-gradient(120% 100% at 50% 40%, rgba(9,13,19,.15), rgba(9,13,19,.72) 78%),
  linear-gradient(0deg, rgba(9,13,19,.90) 0%, rgba(9,13,19,.55) 30%, rgba(9,13,19,.15) 60%)}

/* săgeți pe lateralele imaginii */
.nav{position:absolute;top:50%;transform:translateY(-50%);z-index:6;
  width:clamp(40px,5vw,54px);height:clamp(40px,5vw,54px);border-radius:50%;
  display:grid;place-items:center;cursor:pointer;background:rgba(9,13,19,.5);
  border:1px solid #ffffff2e;color:var(--ink);font-size:clamp(20px,2.4vw,26px);
  line-height:1;backdrop-filter:blur(4px);transition:.15s}
.nav:hover{background:rgba(9,13,19,.8);border-color:var(--gold);color:#fff}
.nav:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.nav.l{left:clamp(10px,1.6vw,18px)} .nav.r{right:clamp(10px,1.6vw,18px)}

/* cerculețe de progres pe poză, dreapta-jos */
.dots{position:absolute;right:clamp(12px,1.8vw,20px);bottom:clamp(12px,1.8vw,18px);z-index:6;
  display:flex;gap:6px;padding:7px 9px;border-radius:100px;background:rgba(9,13,19,.42);backdrop-filter:blur(4px)}
.dot{width:7px;height:7px;border-radius:50%;background:#ffffff5c;border:none;padding:0;cursor:pointer;transition:.15s}
.dot[aria-current="true"]{background:var(--gold);transform:scale(1.25)}

/* buton YouTube persistent — pe toate paginile, sus-dreapta pe imagine */
.ytbtn{position:absolute;top:clamp(12px,1.8vw,18px);right:clamp(12px,1.8vw,18px);z-index:7;
  display:inline-flex;align-items:center;gap:9px;text-decoration:none;color:#fff;
  background:var(--yt);border:1.5px solid #ffffffcc;border-radius:100px;
  padding:7px 14px 7px 8px;box-shadow:0 8px 22px -8px #000;transition:.15s}
.ytbtn:hover{filter:brightness(1.08);transform:translateY(-1px)}
.ytbtn:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.ytbtn .tri{width:22px;height:22px;border-radius:50%;background:#ffffff2e;display:grid;
  place-items:center;font-size:11px;line-height:1;padding-left:2px}
.ytbtn .lbl{font-family:var(--display);font-weight:600;font-size:15px;letter-spacing:.01em;white-space:nowrap}

/* text cadru — umple spațiul dintre săgeți, centrat */
.copy{position:absolute;left:0;right:0;bottom:0;z-index:3;
  padding:clamp(20px,3.6vw,44px) clamp(80px,9vw,124px)}
.story{max-width:none;margin:0 auto}
.story p{margin:0 0 .45em;font-size:clamp(15px,2.15vw,23px);line-height:1.5;text-shadow:0 1px 14px rgba(0,0,0,.85)}
.story p.d{color:var(--ink-soft);font-style:italic}

/* pagina de titlu */
.titlebox{position:absolute;left:0;right:0;bottom:0;z-index:3;
  padding:clamp(22px,4vw,52px) clamp(80px,9vw,124px)}
.titlebox .eyebrow{font-family:var(--display);color:var(--gold);font-weight:600;
  letter-spacing:.28em;text-transform:uppercase;font-size:clamp(11px,1.5vw,13px);margin-bottom:10px}
.titlebox h1{font-family:var(--display);font-weight:600;margin:0 0 12px;
  font-size:clamp(30px,5.2vw,60px);line-height:1.02;text-wrap:balance;
  text-shadow:0 2px 20px rgba(0,0,0,.6);max-width:20ch}
.titlebox .meta{color:var(--ink-soft);font-size:clamp(13px,1.7vw,17px);line-height:1.55;
  font-style:italic;text-shadow:0 1px 10px rgba(0,0,0,.8)}

.hint{margin-top:12px;color:var(--muted);font-size:12.5px;text-align:center}
kbd{font-family:var(--serif);background:var(--ground-2);border:1px solid var(--edge);
  border-bottom-width:2px;border-radius:4px;padding:1px 6px;font-size:11.5px;color:var(--ink-soft)}
[hidden]{display:none!important}

/* MOBIL: textul coboară SUB poză (imaginea 16:9 e prea scurtă pt. overlay) */
@media (max-width:760px){
  .stage{position:static;aspect-ratio:auto;display:block}
  .imgbox{position:relative;inset:auto;aspect-ratio:2752/1536}
  .scrim{display:none}
  .copy,.titlebox{position:static;padding:16px 16px 20px}
  .story{margin:0}
  .story p{text-shadow:none;font-size:clamp(16px,4.4vw,20px)}
  .titlebox h1{max-width:none;text-shadow:none;font-size:clamp(26px,7vw,40px)}
  .titlebox .meta{text-shadow:none}
  .hint{display:none}
  /* butonul YouTube coboară sub imagine, cu text complet (peste imaginea scurtă de mobil ar acoperi săgețile) */
  .ytbtn{position:static;margin:14px 16px 0;align-self:flex-start;box-shadow:0 6px 18px -8px #000}
  .stage{display:flex;flex-direction:column}
}