/* LA FAIM — REGIE 02.10 (album, presă, 404).
   Fișier separat de lafaim.css cu bună știință: lafaim.css îl încarcă și generatorul
   (cu ?v=2709, pe care nu-l ating), deci orice regulă de aici nu poate schimba nimic
   pe pagina generatorului. Folosește doar tokenurile din lafaim.css. */

/* =========================================================================
   ALBUM — „PATRU NUME" DEVINE PERETELE DE IDENTIFICARE
   Înainte: patru fotografii de 270px într-o coloană de 608px, în mijlocul unui
   ecran de 1440 — o pagină de telefon pe monitor. Acum, pe ecran lat, cardul iese
   din coloană și cei patru stau umăr la umăr, ca la un line-up. Sub fiecare: cadrul
   lui din intro (ce a făcut în noaptea operațiunii), care duce direct la secunda lui
   din probă. Fotografia de dosar rămâne alb-negru; culoarea vine din film.
   ========================================================================= */
@media (min-width: 1100px) {
  .pg-about .card-patru {
    --w: min(1180px, calc(100vw - 96px));
    width: var(--w); max-width: none;
    margin-inline: calc((100% - var(--w)) / 2);
    padding: var(--space-8) var(--space-8) var(--space-6);
  }
  .pg-about .card-patru > p { max-width: 62ch; }
  .pg-about .card-patru .dosare-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px 22px; margin-top: 30px; }
  /* Aceeași înălțime de cadru pe tot rândul: fețele stau pe aceeași linie, ca la un
     line-up adevărat (nu patru poze care plutesc la înălțimi diferite). */
  .pg-about .card-patru .dosar-foto { aspect-ratio: 3 / 4.2; }
  .pg-about .card-patru .dosar-card { display: flex; flex-direction: column; }
  .pg-about .card-patru .dosar-cadru { margin-top: auto; }
  .pg-about .card-patru .dosar-linie { margin-bottom: 16px; }
}
/* Numărul de pe perete, sub fiecare dosar: 01–04, ca pe banda de la line-up. */
.pg-about .dosare-grid { counter-reset: lf-dosar; }
.pg-about .dosar-card { counter-increment: lf-dosar; position: relative; display: flex; flex-direction: column; }
.pg-about .dosar-card .dosar-cadru { margin-top: auto; padding-top: 12px; }
.pg-about .dosar-card .dosar-linie { margin-bottom: 4px; }
.pg-about .dosar-foto::after {
  content: "0" counter(lf-dosar); position: absolute; top: 8px; left: 8px; z-index: 2;
  padding: 2px 6px; font: 700 10px/1.4 var(--font-mono); letter-spacing: .12em;
  color: var(--color-void); background: var(--color-orange);
}
/* 09.10: fotografiile de dosar nu mai au bandă peste ele (banda acoperea plăcuța). Portretul
   reconstituit cu IA al lui Piciente e semnalat de asteriscul de lângă nume și de nota de sub
   perete. Nota e lângă imagine, dar nu peste ea (AI Act art. 50(4), operă artistică).
   Selectorul are trei clase ca să treacă peste `.card p` (14px). */
.dosar-nota-ref { margin-left: 2px; color: var(--color-orange); }
.pg-about .card-patru .dosar-nota { margin: 18px 0 0; max-width: 62ch; font-size: 12px; line-height: 1.6; color: var(--color-text-sub); }
.pg-about .card-patru .dosar-nota .dosar-nota-ref { margin: 0 2px 0 0; }

/* Cadrul din intro. Un link întreg (imagine + etichetă), nu o imagine cu un link mic
   dedesubt: ținta de atingere e mare, iar pe telefon e evident ce face. */
.dosar-cadru { display: block; margin-top: 12px; color: var(--color-text); text-decoration: none; }
.dosar-cadru-img { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid var(--color-border); background: #000; }
.dosar-cadru-img img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-4, .6s) var(--ease-settle, ease), filter var(--dur-3, .4s) var(--ease-glide, ease); filter: saturate(.9) contrast(1.04); }
/* Bandă de scotch: cadrul e lipit în dosar, nu așezat într-o grilă. */
.dosar-cadru-img::before { content: ""; position: absolute; top: -6px; left: 50%; z-index: 3; width: 58px; height: 14px; margin-left: -29px; background: rgba(233,238,242,.16); transform: rotate(-3deg); }
.dosar-card:nth-child(even) .dosar-cadru-img::before { transform: rotate(2.4deg); margin-left: -18px; }
/* Marcajul IA stă PE imagine (AI Act art. 50), în stilul portretului-robot al lui
   Piciente. E pus exact peste marcajul ars în fișier (dreapta-jos): pe pagină se vede
   unul singur, lizibil; dacă imaginea pleacă din pagină, îl ia pe cel ars cu ea. */
/* A7 (02.10): 12 px, nu 8,5 / 7 px — pe telefon trece pe două rânduri, pe toată lățimea cadrului. */
.dosar-cadru-img .dosar-ia { top: auto; bottom: 6px; right: 6px; left: auto; padding: 3px 6px; font-size: 12px; }
.dosar-cadru-lbl { display: flex; justify-content: space-between; gap: 8px; padding: 8px 2px 0; font: 700 10px/1.4 var(--font-mono); letter-spacing: var(--tracking-max); text-transform: uppercase; color: var(--color-text-sub); border-top: 1px dashed transparent; transition: color var(--dur-2) var(--ease-glide); }
.dosar-cadru-lbl span:last-child { color: var(--color-orange); }
.dosar-cadru:hover .dosar-cadru-img img, .dosar-cadru:focus-visible .dosar-cadru-img img { transform: scale(1.045); filter: saturate(1.05) contrast(1.06); }
.dosar-cadru:hover .dosar-cadru-lbl, .dosar-cadru:focus-visible .dosar-cadru-lbl { color: var(--color-text); }
.dosar-cadru:focus-visible { outline: 2px solid var(--color-orange); outline-offset: 4px; }

.dosar-proba-cta {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px;
  margin-top: 28px; padding: 16px 18px; border: 1px solid var(--color-orange); background: var(--color-orange-dim);
  font: 700 13px/1.3 var(--font-mono); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-text); text-decoration: none;
  transition: background var(--dur-2) var(--ease-glide);
}
.dosar-proba-cta span { font-size: 10px; letter-spacing: var(--tracking-max); color: var(--color-orange); }
.dosar-proba-cta:hover { background: rgba(255,77,0,.16); }
@media (min-width: 1100px) { .dosar-proba-cta { max-width: 460px; margin-left: auto; } }
@media (max-width: 640px) {
  .dosar-cadru-lbl { font-size: 9px; letter-spacing: .14em; }
  .dosar-cadru-img .dosar-ia { font-size: 12px; line-height: 1.1; letter-spacing: 0; padding: 2px 4px; left: 4px; right: 4px; bottom: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .dosar-cadru-img img { transition: none; }
  .dosar-cadru:hover .dosar-cadru-img img { transform: none; }
}

/* =========================================================================
   PRESĂ — PLANȘELE
   Un jurnalist alege o imagine uitându-se la ea, nu citind „STILL INTEROGATORIU
   (.JPG)". Planșele arată fiecare material, cu formatul și marcajul lui; butoanele
   text rămân dedesubt pentru pachetul complet și fișierele fără previzualizare.
   ========================================================================= */
.planse { list-style: none; margin: var(--space-5) 0 var(--space-4); padding: 0; display: grid; }
.plansa { position: relative; margin: 0; }
.plansa a { display: block; color: var(--color-text); text-decoration: none; }
.plansa .img { position: relative; display: block; overflow: hidden; border: 1px solid var(--color-border); background: #000; }
.plansa img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-4, .6s) var(--ease-settle, ease); }
.plansa a:hover img, .plansa a:focus-visible img { transform: scale(1.04); }
.plansa a:focus-visible { outline: 2px solid var(--color-orange); outline-offset: 3px; }
.plansa .cap { display: flex; justify-content: space-between; gap: 8px; padding: 7px 1px 0; font: 700 9.5px/1.4 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--color-text-sub); }
.plansa .cap span:last-child { color: var(--color-orange); white-space: nowrap; }
.plansa .dosar-ia { right: 6px; left: auto; bottom: 6px; padding: 3px 6px; font-size: 12px; }
@media (max-width: 640px) { .plansa .dosar-ia { left: 4px; right: 4px; bottom: 4px; padding: 2px 4px; line-height: 1.1; letter-spacing: 0; } }
.plansa .nr { position: absolute; top: 6px; left: 6px; z-index: 2; padding: 1px 5px; font: 700 9px/1.4 var(--font-mono); letter-spacing: .1em; color: var(--color-void); background: var(--color-orange); }
/* Compoziția: mugshot-ul oficial lat + cele două verticale pe ACEEAȘI înălțime (grilă de
   16: 10 + 3 + 3; verticalele se taie puțin pe laterale, nu se micșorează), apoi cei
   patru din intro pe un rând de 16:9. */
.planse { grid-template-columns: repeat(16, minmax(0, 1fr)); gap: 16px 12px; }
.plansa.is-wide { grid-column: span 10; } .plansa.is-wide .img { aspect-ratio: 16 / 9; }
.plansa.is-tall { grid-column: span 3; } .plansa.is-tall .img { aspect-ratio: auto; height: calc(100% - 26px); min-height: 160px; }
.plansa.is-tall a { height: 100%; display: flex; flex-direction: column; }
.plansa.is-tall .cap { flex-wrap: wrap; }
.plansa.is-still { grid-column: span 4; } .plansa.is-still .img { aspect-ratio: 16 / 9; }
.plansa .cap { flex-wrap: wrap; row-gap: 0; }
@media (max-width: 640px) {
  .planse { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; }
  .plansa.is-wide { grid-column: 1 / -1; }
  .plansa.is-tall, .plansa.is-still { grid-column: span 1; }
  .plansa.is-tall .img { height: auto; aspect-ratio: 9 / 16; }
}
@media (prefers-reduced-motion: reduce) { .plansa img { transition: none; } .plansa a:hover img { transform: none; } }