/* Jurnalul atelierului: lista de insemnari si pagina unei insemnari.
   Acelasi material ca restul site-ului — cutii cu chenar de un pixel pe fond
   brun — dar aici cutia are si o imagine, fiindca o insemnare se alege dupa
   subiect, nu dupa numele publicatiei. */

/* ---------- lista ---------- */
.lista-jurnal{
  list-style:none;margin:56px 0 0;padding:0;
  display:grid;gap:20px;
  grid-template-columns:repeat(3,minmax(0,1fr));
}
@media(max-width:1100px){ .lista-jurnal{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(max-width:620px){ .lista-jurnal{grid-template-columns:1fr;gap:14px;margin-top:40px} }

.insemnare{
  display:flex;flex-direction:column;height:100%;
  background:var(--brun);border:1px solid var(--linie);
  text-decoration:none;color:inherit;
  transition:border-color var(--t),transform 420ms cubic-bezier(.22,.61,.36,1);
}
@media (hover:hover){ .insemnare:hover{border-color:var(--aur);transform:translateY(-3px)} }

.insemnare .cadru{aspect-ratio:3/2;overflow:hidden;background:var(--negru)}
.insemnare .cadru img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 700ms cubic-bezier(.22,.61,.36,1)}
@media (hover:hover){ .insemnare:hover .cadru img{transform:scale(1.04)} }

.insemnare .text{display:flex;flex-direction:column;flex:1 1 auto;padding:22px 22px 24px}
.insemnare .fel{
  font:500 10px var(--f);letter-spacing:.2em;text-transform:uppercase;color:var(--aur);
}
.insemnare .titlu-insemnare{
  text-transform:none;margin:12px 0 0;
  font-weight:300;font-size:21px;line-height:1.28;letter-spacing:.01em;color:var(--alb);
  transition:color 240ms;
}
@media (hover:hover){ .insemnare:hover .titlu-insemnare{color:var(--aur)} }
.insemnare .rezumat{margin:10px 0 0;flex:1 1 auto;color:var(--fum);font-size:15px;line-height:1.7}
.insemnare .rand-jos{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin-top:20px;padding-top:14px;border-top:1px solid var(--fir);
  font:400 12px var(--ft);color:var(--fum);letter-spacing:.04em;
}

/* fisa de incheiere: ultimul rand nu ramane niciodata cu locuri goale */
.insemnare.incheiere{background:transparent;border-color:var(--aur);justify-content:center}
@media (hover:hover){ .insemnare.incheiere:hover{background:rgba(187,157,123,.05);transform:none} }
.insemnare.incheiere .text{padding:30px 26px}
.insemnare.incheiere .titlu-insemnare{font-weight:200;font-size:24px;margin-top:10px}
.insemnare.incheiere .semn{
  margin-top:20px;font:500 10px var(--f);letter-spacing:.22em;text-transform:uppercase;color:var(--aur);
  display:inline-flex;align-items:center;gap:10px;
}
.insemnare.incheiere .semn::after{content:"";width:18px;height:1px;background:var(--aur)}

/* ---------- pagina unei insemnari ---------- */
.insemnare-pagina{padding:48px 0 0}
.insemnare-pagina .antet-insemnare{max-width:68ch;margin:0 auto}
.insemnare-pagina .rand-sus{
  display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;
  font:400 12px var(--ft);color:var(--fum);letter-spacing:.06em;
}
.insemnare-pagina .rand-sus .fel{
  font:500 10px var(--f);letter-spacing:.2em;text-transform:uppercase;color:var(--aur);
}
.insemnare-pagina h1{
  text-transform:none;font-weight:200;
  font-size:clamp(30px,4.2vw,52px);line-height:1.12;letter-spacing:.01em;
  margin:20px 0 0;
}
.insemnare-pagina .rezumat-mare{
  margin:24px 0 0;color:var(--fum);font-size:19px;line-height:1.75;
}
.insemnare-pagina .imagine-mare{margin:56px 0 0}
.insemnare-pagina .imagine-mare img{width:100%;height:auto;display:block;border:1px solid var(--linie)}

.corp-insemnare{max-width:68ch;margin:56px auto 0}
.corp-insemnare p{margin:0 0 22px;font-size:18px;line-height:1.85;color:var(--alb)}
.corp-insemnare h2{
  text-transform:none;font-weight:300;font-size:clamp(22px,2.4vw,28px);
  letter-spacing:.01em;margin:48px 0 18px;
}
.corp-insemnare blockquote{
  margin:36px 0;padding:0 0 0 26px;border-left:1px solid var(--aur);
}
.corp-insemnare blockquote p{font-size:20px;font-weight:200;line-height:1.7;color:var(--fum);margin:0}
.corp-insemnare a{color:var(--aur);text-decoration:none;border-bottom:1px solid var(--fir)}
.corp-insemnare a:hover{border-bottom-color:var(--aur)}
.corp-insemnare .surse{
  margin:48px 0 0;padding-top:24px;border-top:1px solid var(--linie);
  font-size:15px;line-height:1.8;color:var(--fum);
}

/* Notele de subsol (F4, 19.10): cifra aurie din text duce la nota de jos, iar săgeata de lângă notă duce înapoi.
   Antetul e fix, deci ținta se oprește sub el. */
.corp-insemnare .nota-ref{font:500 .68em/0 var(--ft);vertical-align:super;margin-left:.06em}
.corp-insemnare .nota-ref a{border-bottom:0;padding:0 .16em;color:var(--aur)}
.corp-insemnare .nota-ref a:hover,.corp-insemnare .nota-ref a:target{color:var(--alb)}
.corp-insemnare .note{margin:56px 0 0;padding-top:24px;border-top:1px solid var(--linie)}
.corp-insemnare .note h2{font:500 11px var(--f);letter-spacing:.18em;text-transform:uppercase;color:var(--aur);margin:0 0 18px}
.corp-insemnare .note ol{margin:0;padding:0 0 0 1.8em;font-size:15px;line-height:1.8;color:var(--fum)}
.corp-insemnare .note li{margin:0 0 10px;padding-left:.4em;overflow-wrap:anywhere;transition:color var(--t)}
.corp-insemnare .note li::marker{font:400 13px var(--ft);color:var(--aur)}
.corp-insemnare .note li:target{color:var(--alb)}
.corp-insemnare .note a{color:var(--fum);border-bottom-color:var(--linie)}
.corp-insemnare .note a:hover{color:var(--aur);border-bottom-color:var(--aur)}
.corp-insemnare .note .nota-inapoi{border-bottom:0;padding:0 .3em;color:var(--aur)}
.corp-insemnare [id^="nota-"],.corp-insemnare [id^="ref-nota-"]{scroll-margin-top:120px}
.corp-insemnare .note + .surse{margin-top:28px;padding-top:0;border-top:0}

@media(max-width:620px){
  .insemnare-pagina{padding-top:32px}
  .insemnare-pagina .imagine-mare{margin-top:36px}
  .corp-insemnare{margin-top:40px}
  .corp-insemnare p{font-size:17px;line-height:1.8}
  /* pe telefon cifra notei e țintă de deget: umplutura nu mișcă rândul */
  .corp-insemnare .nota-ref a{padding:12px .4em}
  .corp-insemnare .note .nota-inapoi{padding:11px .6em}
  .insemnare .text{padding:18px 18px 20px}
  .insemnare .titlu-insemnare{font-size:20px}
}