/* pages.css — hero, compozitia editoriala a paginii principale, bara de filtre. */

/* ── Hero ──────────────────────────────────────────────────── */
/* Doua randuri, doua coloane. Wordmarkul sta in randul de sus; portretul
   sta in coloana din dreapta si acopera ambele randuri. Pana la 14.10.2026
   portretul suprapunea ultimele litere, dar suprapunerea depindea de latimea
   ecranului (la 1440 nimic, la 1024/1920 un „e” pe jumatate taiat) si parea
   greseala. Acum marimea wordmarkului se calculeaza din latimea coloanei
   stangi (--hero-fs), deci „Magazine” se opreste mereu inaintea pozei. */
.hero {
  --hero-photo: min(26rem, 34vw);
  /* „Magazine” cursiv = ~3,87em latime cu tracking-ul de mai jos; 4,1em lasa aer. */
  --hero-fs: min(var(--text-mega), calc((100cqi - var(--hero-photo) - var(--space-4) * 2) / 4.1));
  container-type: inline-size;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--hero-photo);
  grid-template-rows: auto auto;
  column-gap: var(--space-4);
  row-gap: var(--space-5);
  align-items: end;
  padding-block: clamp(2rem, 5vw, 5rem) var(--space-6);
  overflow: clip;
}

/* Wordmark supradimensionat, taiat de marginea de jos: prima dovada de
   ierarhie prin scara. Portretul il suprapune — de aici straturile. */
.hero__type {
  grid-column: 1 / -1;
  grid-row: 1;
  align-self: end;
  font-family: var(--display);
  font-size: var(--hero-fs);
  font-weight: 500;
  line-height: 0.78;
  letter-spacing: -0.045em;
  color: var(--ink);
  margin: 0;
  pointer-events: none;
  user-select: none;
}
.hero__type i { font-style: italic; font-weight: 400; }

.hero__figure {
  grid-column: 2;
  grid-row: 1 / span 2;
  justify-self: end;
  align-self: end;
  z-index: 1;
  width: 100%;
  aspect-ratio: 3 / 4;
  position: relative;
  box-shadow: 0 2rem 5rem -1.5rem var(--shade);
}
.hero__figure img { width: 100%; height: 100%; object-fit: cover; }

.hero__caption {
  position: absolute; left: 0; bottom: 0;
  transform: translate(-1.25rem, 1.25rem);
  background: var(--signal); color: var(--signal-ink);
  padding: 0.55rem 0.9rem;
  font-size: var(--text-micro); font-weight: 600;
  letter-spacing: var(--track-label); text-transform: uppercase;
}

.hero__intro {
  grid-column: 1;
  grid-row: 2;
  align-self: start;
  max-width: 30rem;
  /* Coada lui „g” coboara ~0,27em sub linia de baza si iese din caseta
     titlului (line-height 0.78) — fara spatiul asta cadea peste text. */
  margin-top: calc(var(--hero-fs) * 0.22);
  position: relative; z-index: 2;
}

/* Butonul revistei sta pe randul lui, sub cele doua ale hero-ului; spatiul
   de dedesubt tine eticheta „Scroll” (aceeasi celula de grila) libera. */
.hero__issue { margin: var(--space-2) 0 0; }
.hero__intro:has(.hero__issue) { padding-bottom: var(--space-5); }
/* Pe telefon (mobile.css pune pe ultimul <p> din hero o grila de 2 coloane):
   randul cu cele doua butoane pastreaza grila, butonul revistei ia toata latimea. */
@media (max-width: 48rem) {
  .hero .hero__intro p:has(+ .hero__issue) { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
  .hero .hero__intro p:has(+ .hero__issue) .btn { justify-content: center; text-align: center; }
  .hero .hero__intro p.hero__issue { display: block; margin-top: var(--space-2); }
  .hero .hero__issue .btn { width: 100%; justify-content: center; }
  .hero__intro:has(.hero__issue) { padding-bottom: 0; }
}

.hero__scroll {
  grid-column: 1; grid-row: 2; align-self: end; justify-self: start;
  margin: 0;
  font-size: var(--text-micro); letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--ink-faint);
  display: flex; align-items: center; gap: 0.6rem;
}
.hero__scroll::before {
  content: ""; width: 3rem; height: 1px; background: var(--rule-strong);
  transform-origin: left; animation: rule-pulse 2.8s var(--ease-inout) infinite;
}
@keyframes rule-pulse { 0%, 100% { transform: scaleX(0.35); } 50% { transform: scaleX(1); } }

@media (max-width: 52rem) {
  .hero { grid-template-columns: 1fr; row-gap: var(--space-4); }
  .hero__type { grid-column: 1; font-size: clamp(3.5rem, 16vw, 8rem); }
  .hero__figure { grid-column: 1; grid-row: auto; justify-self: stretch; }
  .hero__intro { grid-column: 1; grid-row: auto; max-width: none; margin-top: 0; }
  .hero__scroll { display: none; }
}

/* ── Banda de defilare ─────────────────────────────────────── */
.ticker {
  border-block: 1px solid var(--rule-strong);
  padding-block: var(--space-3);
  overflow: hidden;
  display: flex; gap: var(--space-4);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.ticker__row {
  display: flex; gap: var(--space-4); flex: none; align-items: center;
  animation: ticker 46s linear infinite;
  /* Continutul vine din JavaScript; fara inaltime rezervata banda e plata
     la prima pictura si impinge pagina cand se umple. */
  min-height: calc(clamp(1rem, 2.4vw, 1.75rem) * 1.3);
}
.ticker:hover .ticker__row { animation-play-state: paused; }
.ticker__item {
  font-family: var(--display); font-size: clamp(1rem, 2.4vw, 1.75rem);
  white-space: nowrap; color: var(--ink-soft);
}
.ticker__item i { font-style: italic; color: var(--signal); }
@keyframes ticker { to { transform: translateX(calc(-100% - var(--space-4))); } }

/* ── Grila editoriala: dale de dimensiuni diferite, nu un card grid ── */
.editorial {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-3);
}

.tile {
  position: relative; overflow: hidden;
  text-decoration: none; color: oklch(98% 0 0);
  background: var(--paper-sunk);
  display: block;
}
.tile img { width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--dur-slow) var(--ease); }
.tile:hover img { transform: scale(1.05); }

/* Voalul e calculat pe fotografii de studio deschise: fara el textul alb
   coboara sub 3:1 pe fundalurile luminoase. */
.tile::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(200deg,
    oklch(10% 0 0 / 0) 34%, oklch(10% 0 0 / 0.34) 62%, oklch(8% 0 0 / 0.78) 100%);
  pointer-events: none;
}

.tile__body { position: absolute; inset: auto 0 0; z-index: 1;
  padding: var(--space-4); display: grid; gap: 0.35rem; }
.tile__kicker { font-size: var(--text-micro); font-weight: 600;
  letter-spacing: var(--track-label); text-transform: uppercase;
  color: oklch(100% 0 0 / 0.78); }
.tile__title { font-family: var(--display); font-size: clamp(1.25rem, 2vw, 2.25rem);
  line-height: 1.05; letter-spacing: var(--track-tight); }

.tile--wide  { grid-column: span 8; aspect-ratio: 16 / 10; }
.tile--tall  { grid-column: span 4; aspect-ratio: 3 / 4; }
.tile--third { grid-column: span 4; aspect-ratio: 4 / 5; }
.tile--half  { grid-column: span 6; aspect-ratio: 3 / 2; }

@media (max-width: 60rem) {
  .tile--wide, .tile--half { grid-column: span 12; }
  .tile--tall, .tile--third { grid-column: span 6; }
}
@media (max-width: 34rem) {
  .tile--tall, .tile--third { grid-column: span 12; }
}

/* ── Boardurile de pe prima pagina ─────────────────────────── */
.split { display: grid; gap: var(--space-5); grid-template-columns: repeat(2, 1fr); }
@media (max-width: 48rem) { .split { grid-template-columns: 1fr; } }

.split__panel { display: grid; gap: var(--space-4); align-content: start; }
.split__figure { position: relative; aspect-ratio: 4 / 5; overflow: hidden; }
/* Acelasi motiv ca la numarul de cadru: eticheta „Women"/„Men" are nevoie de
   o baza intunecata, nu doar de un mod de amestec. */
.split__figure::after {
  content: ""; position: absolute; inset: 40% 0 0;
  background: linear-gradient(to top, oklch(8% 0 0 / 0.66), oklch(8% 0 0 / 0));
  pointer-events: none;
}
.split__figure img { width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--dur-slow) var(--ease); }
.split__panel a:hover .split__figure img { transform: scale(1.04); }
.split__label {
  position: absolute; inset: auto var(--space-3) var(--space-3) auto; z-index: 1;
  font-family: var(--display); font-size: clamp(2rem, 5vw, 4.5rem);
  color: oklch(100% 0 0); line-height: 1;
}

/* ── Bara de filtre a boardului ────────────────────────────── */
.filters {
  position: sticky; top: 4.25rem; z-index: 20;
  background: color-mix(in oklab, var(--paper) 92%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rule);
  padding-block: var(--space-3);
}
.filters__row {
  display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-3);
}
.filters__group { display: grid; gap: 0.35rem; }
.filters__group > span { font-size: var(--text-micro); font-weight: 600;
  letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-faint); }

.filters select, .filters input[type="search"] {
  padding: 0.5em 0.7em; background: var(--paper-raised); color: var(--ink);
  border: 1px solid var(--rule-strong); border-radius: 0;
  font-size: var(--text-sm); min-width: 8rem;
}
.filters input[type="search"] { min-width: 12rem; }
.filters select:focus, .filters input:focus { outline: none; border-color: var(--signal); }

.filters__count {
  margin-left: auto; font-size: var(--text-micro); letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--ink-faint); font-variant-numeric: tabular-nums;
  align-self: center;
}
.filters__count b { color: var(--ink); font-weight: 600; }

.filters__reset {
  background: none; border: 0; cursor: pointer; padding: 0.5em 0;
  font-size: var(--text-micro); font-weight: 600; letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--signal);
  text-decoration: underline; text-underline-offset: 0.25em;
}
.filters__reset[hidden] { display: none; }

/* Butonul de panou exista doar pe telefon (css/mobile.css). Pe desktop
   selecturile raman in rand: invelisul lor nu genereaza cutie. */
.filters__toggle { display: none; }
.filters__more { display: contents; }

.board-empty { padding-block: var(--space-6); text-align: center; color: var(--ink-faint); }
.board-empty h3 { font-size: var(--text-h3); color: var(--ink); margin-bottom: var(--space-2); }

/* ── Pagini de text (news, scouted, contact) ───────────────── */
.prose h2 { margin-block: var(--space-5) var(--space-3); }
.prose h3 { margin-block: var(--space-4) var(--space-2); font-size: 1.25rem; }
.prose ul { padding-left: 1.1rem; max-width: var(--measure); color: var(--ink-soft); }
.prose li { margin-bottom: var(--space-2); }

.page-head { padding-block: var(--space-6) var(--space-5); border-bottom: 1px solid var(--rule-strong); }
.page-head h1 { margin-bottom: var(--space-3); }

/* ── Randul de fete noi ────────────────────────────────────── */
/* auto-fill ar aseza 8 carduri ca 5+3 pe ecran lat; aici vrem 4+4. */
#new-faces { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 64rem) { #new-faces { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 46rem) { #new-faces { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Boardul urmeaza imediat dupa bara de filtre — nu are nevoie de spatiul
   dintre doua sectiuni independente. */
.filters + .section { padding-top: var(--space-5); }