/* ============================================================================
   eag-ploce.css — scroll-vođene dionice naslovnice Event AI Group
   ----------------------------------------------------------------------------
   Tri sloja u jednom fajlu:
     1. DEVICE sloj — mehanizam koji /scrollcraft.js očekuje da postoji
        (pribodena pozornica, scrub video i njegov poster, scrim, cue, pan).
     2. TJEDAN (.tj-*) — priča stranice, na PAPIRU. Jedino svijetlo mjesto na
        cijeloj stranici i jedino sa serifom. Namjerno se ne uklapa u ostatak:
        crna ploha od vrha do dna je razlog zašto se priča nije čitala.
     3. TRAKA i KNJIGA (.eag-*) — divizije i projekti, u postojećem "DALA"
        jeziku stranice: crno, bez kartica i sjena, jedna ljubičasta akcija,
        šafran kao naglasak, Inter, radijus 24px.

   OVAJ FAJL SE UČITAVA POSLIJE glavnog <style> bloka. To nije slučajno: na
   kraju tog bloka (r. 653-676) stoji override koji sitni tekst spušta na
   weight 300 i --silver, pa bi svaki stil učitan ranije bio tiho pregažen.

   Zauzeti slojevi na stranici (ne dirati): #ambient 0 · .section/.wrap 1 ·
   header.nav 50 · .scroll-progress 80 · .consent 190 · #atlas 200 · modal 300.
   Pozornica zato ide na 2 — iznad ambijentalnog platna, duboko ispod
   navigacije.
   ========================================================================== */

:root {
  /* Scrim nije crn nego --void s plavim podtonom, isti kao .hero-bg::after
     (r. 176-179). Čisto crni scrim bi na ovoj stranici izgledao mrtvo. */
  --sc-canvas: #010205;
  --sc-ink: #ffffff;
  --sc-accent: #8052ff;
  --sc-gutter: clamp(20px, 5vw, 30px);
  --sc-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --sc-z-stage: 2;
  --sc-z-copy: 20;
  /* Serif stoji na :root, ne na `.tj`: prijelazna dionica je SESTRA dionice
     „Tjedan", pa bi joj varijabla deklarirana na `.tj` bila nedostupna i
     rečenica bi tiho pala natrag na Inter. */
  --tj-serif: 'Newsreader', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
}

/* ================================================================ MEHANIZAM */

.sc-act--pinned { position: relative; }

.sc-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: clip;
  z-index: var(--sc-z-stage);
  background: var(--sc-canvas);
}

.sc-stage :is(video[data-sc-scrub], .sc-stage__poster) {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

video[data-sc-scrub] { opacity: 0; transition: opacity 380ms var(--sc-ease-out); }
.sc-has-clip video[data-sc-scrub] { opacity: 1; }
video[data-sc-scrub].sc-has-clip { opacity: 1; }
.sc-stage__poster { z-index: 0; transition: opacity 380ms var(--sc-ease-out); }
.sc-has-clip .sc-stage__poster { opacity: 0; }

.sc-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(
    var(--sc-scrim-angle, 180deg),
    color-mix(in oklab, var(--sc-canvas) var(--sc-scrim-a, 78%), transparent) 0%,
    color-mix(in oklab, var(--sc-canvas) 30%, transparent) 42%,
    transparent 68%);
}
.sc-scrim--lead {
  background: linear-gradient(to top right,
    color-mix(in oklab, var(--sc-canvas) 95%, transparent) 0%,
    color-mix(in oklab, var(--sc-canvas) 78%, transparent) 32%,
    color-mix(in oklab, var(--sc-canvas) 34%, transparent) 54%,
    transparent 74%);
}
.sc-scrim--trail {
  background: linear-gradient(to top left,
    color-mix(in oklab, var(--sc-canvas) 95%, transparent) 0%,
    color-mix(in oklab, var(--sc-canvas) 78%, transparent) 32%,
    color-mix(in oklab, var(--sc-canvas) 34%, transparent) 54%,
    transparent 74%);
}
.sc-scrim--band {
  background: linear-gradient(to top,
    color-mix(in oklab, var(--sc-canvas) 95%, transparent) 0%,
    color-mix(in oklab, var(--sc-canvas) 76%, transparent) 24%,
    color-mix(in oklab, var(--sc-canvas) 32%, transparent) 44%,
    transparent 60%);
}

.sc-copy {
  position: absolute;
  z-index: var(--sc-z-copy);
  inset-inline: var(--sc-gutter);
  max-width: min(46rem, 78vw);
  will-change: opacity, transform;
}
.sc-copy--lead { left: var(--sc-gutter); bottom: clamp(72px, 14vh, 132px); }
.sc-copy--center {
  inset-inline: auto;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  text-align: center;
}

[data-sc-cue] { opacity: 0; will-change: opacity, transform; }
.sc-ready [data-sc-cue] { transition: none; }

/* `opacity: 0` NE vadi element iz tab reda, a engine gasi samo `pointer-events`
   — što tipkovnicu ne pokriva. Bez ovoga tabom dođeš na gumb koji se ne vidi,
   a engineov „focus rescue" te odveze točno na p=0, gdje je cue još na nuli:
   fokus stoji na nevidljivom gumbu, usred crnog kadra, bez prstena.
   `!important` je nužan jer engine piše opacity inline svaki kadar. */
[data-sc-cue]:focus-within { opacity: 1 !important; transform: none !important; }

/* Stranica nema nijedno :focus pravilo za .btn — oslanja se na UA prsten, koji
   se na prozirnom elementu ne vidi. Unutar naših dionica to popravljamo
   lokalno; širi sajt namjerno ne diramo. */
.tj a:focus-visible,
.tj button:focus-visible,
.tj-prijelaz a:focus-visible,
.tj-prijelaz button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
  border-radius: var(--r, 24px);
}
/* Na crnom prijelaznom kadru prsten mora biti šafran, na papiru tinta —
   `currentColor` to riješi sam, osim na ispunjenoj pilili gdje je tekst bijel. */
.tj .btn.primary:focus-visible { outline-color: #14161b; }

.sc-split { display: inline-block; overflow: hidden; vertical-align: top; }
.sc-split--line { display: block; padding-bottom: 0.14em; margin-bottom: -0.14em; }
.sc-split__i { display: inline-block; will-change: transform, opacity; }
.sc-is-split { opacity: 1 !important; }

[data-sc-pan] { display: flex; will-change: transform; }
[data-sc-parallax] { will-change: transform; }

/* ============================================================== TJEDAN ==== */
/* Priča stranice živi na PAPIRU, ne na crnom.
   To nije ukras. Cijela je stranica jedna crna ploha od vrha do dna, pa se
   dionica koja traži da je se ČITA morala fizički odvojiti od nje — inače je
   oko pročita kao još jedan blok i preskoči ga. Papir usporava.
   Crno se vraća na kraju, i to bez šava: prijelazni kadar (tj-more) kreće u
   bijelom plićaku i završi u dubokoj vodi, pa se crni dio stranice nastavlja
   iz zadnjeg kadra videa.

   Dionica je namjerno JEDINO mjesto na stranici sa serifom i jedino mjesto
   bez kartica — ima samo margina, vlas i tekst. */

.tj {
  --tj-papir: #f2efe6;
  --tj-papir-2: #e7e3d7;
  --tj-tinta: #14161b;
  --tj-tinta-2: #4a4d55;
  /* #7c8089 bi bio ljepši, ali na papiru pada na ~3.6:1 i sitni tekst više ne
     prolazi AA. Ovo je najsvjetlije što smije. */
  --tj-tinta-3: #5f636b;
  --tj-crta: rgba(20, 22, 27, 0.15);

  position: relative;
  z-index: 1;
  background-color: var(--tj-papir);
  color: var(--tj-tinta);
  padding-block: clamp(5rem, 12vh, 8.5rem) clamp(3rem, 7vh, 5rem);
  /* Zrno papira: pločica 140×140 koju preglednik rasterizira jednom pa ponavlja.
     Bez nje ovo je samo svijetla ploha; s njom čita kao materijal. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.86' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}

/* Doslovno ista mjera kao domaćinov `.wrap` (index.html r. 97 i 633), ne
   vlastita. Prva verzija je bila `min(100% - 2*--sc-gutter, 1180px)` i time
   pomicala CIJELU dionicu 20px udesno na 1440px, 13px na 1280px i 10px na
   600px — a prijelazna rečenica ispod nje poravnata je na `.wrap`, pa se na
   rezu papir→crno vidjela stepenica. Izmjereno na devet širina. */
.tj-wrap {
  max-width: var(--maxw, 1280px);
  margin-inline: auto;
  padding-inline: 30px;
}
@media (max-width: 640px) {
  .tj-wrap { padding-inline: 20px; }
}

/* ---- uvod ---- */
.tj-uvod { max-width: 42rem; margin-bottom: clamp(3.5rem, 9vh, 6rem); }

.tj-oko {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tj-tinta-3);
  margin-bottom: 22px;
}

.tj-naslov {
  font-family: var(--tj-serif);
  font-size: clamp(32px, 4.4vw, 58px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 400;
  margin: 0;
  color: var(--tj-tinta);
  text-wrap: balance;
}

.tj-lead {
  margin: 26px 0 0;
  font-size: 18px;
  font-weight: 300;
  line-height: 1.55;
  color: var(--tj-tinta-2);
  max-width: 46ch;
}

/* ---- dan ---- */
/* Dva stupca: uska margina s oznakom dana i široki stupac teksta. Oznaka je
   `sticky`, pa stoji uz tekst dok se dan čita i tek je sljedeći dan istisne.
   To je jedini „mehanizam" ove dionice — nema ni jednog pribodenog ekrana. */
.tj-dan {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr);
  gap: 0 clamp(2rem, 4vw, 4rem);
  padding-block: clamp(3rem, 7vh, 5.5rem);
  border-top: 1px solid var(--tj-crta);
}
.tj-dan:first-of-type { border-top: 0; padding-top: 0; }

.tj-oznaka {
  grid-column: 1;
  position: sticky;
  top: clamp(96px, 13vh, 132px);
  align-self: start;
  display: grid;
  gap: 5px;
  justify-items: start;
}
.tj-oznaka b {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tj-tinta);
}
.tj-oznaka span {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--tj-tinta-3);
  font-variant-numeric: tabular-nums;
}
.tj-oznaka i {
  display: block;
  width: 30px;
  height: 1px;
  margin-top: 12px;
  background: var(--tj-tinta);
  opacity: 0.45;
}

.tj-telo { grid-column: 2; }

/* Rečenica dana. Serif, veliko, kratko — dva retka najviše. */
.tj-recenica {
  font-family: var(--tj-serif);
  font-size: clamp(23px, 2.7vw, 38px);
  line-height: 1.26;
  letter-spacing: -0.015em;
  font-weight: 400;
  margin: 0;
  color: var(--tj-tinta);
  max-width: 26ch;
  text-wrap: balance;
}
/* Naglasak je potez markerom, ne druga boja teksta.
   `color` se MORA vratiti na tintu: stranica ima globalno `em{color:var(--saffron)}`
   (index.html r. 110), pisano za crnu podlogu, pa bi ovdje ispalo narančasto
   slovo na narančastom markeru — oko 1,3:1. S tintom je ~12:1. */
.tj-recenica em {
  font-style: normal;
  color: var(--tj-tinta);
  background: linear-gradient(transparent 62%, rgba(255, 184, 41, 0.55) 62%);
}

.tj-napomena {
  margin: clamp(18px, 2.2vw, 26px) 0 0;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--tj-tinta-2);
  max-width: 44ch;
}

/* ---- prozor s kadrom ---- */
/* Video je PROZOR u tekstu, ne pozadina — nikad ne ide ispod slova i nikad ne
   zauzme ekran. Zato je i act `flow`, a ne `scrub`: kadar se premota dok
   dionica prolazi, ali se ništa ne pribada. */
.tj-figura {
  position: relative;
  margin-top: clamp(26px, 3.6vw, 40px);
  aspect-ratio: 2 / 1;
  overflow: clip;
  border-radius: 4px;
  background: var(--tj-papir-2);
}
.tj-figura :is(video[data-sc-scrub], .tj-figura__poster) {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tj-figura__poster { z-index: 0; transition: opacity 380ms var(--sc-ease-out); }
.sc-has-clip .tj-figura__poster { opacity: 0; }

.tj-potpis {
  margin: 12px 0 0;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--tj-tinta-3);
}

/* Redci koji ulaze jedan po jedan. `data-sc-in` puca jednom, preko
   IntersectionObservera — sadržaj koji se pri skrolu gore ponovno sakrije je
   kvar, ne efekt. */
/* Skriva se SAMO ako je JS živ. `sc-js` postavlja jedan red u <head>, prije
   prvog iscrtavanja — pa nema ni bljeska ni rizika da priča ostane nevidljiva
   ako skripta ne dođe. Gatenje na `sc-ready` (koji engine postavi tek na kraju
   mount()-a) ne bi valjalo: sadržaj bi se najprije vidio, pa nestao. */
html.sc-js :is(.tj-telo, .tj-uvod) > * {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s var(--sc-ease-out), transform .6s var(--sc-ease-out);
}
html.sc-js :is(.tj-telo, .tj-uvod) > *.sc-in { opacity: 1; transform: none; }
/* `opacity: 0` ne vadi gumb iz tab reda. Blok s CTA-ovima čeka
   IntersectionObserver, a tipkovnica ga može doseći kadar prije njega — pa
   fokus otvara blok sam, bez čekanja. */
html.sc-js :is(.tj-telo, .tj-uvod) > *:focus-within { opacity: 1; transform: none; }

/* SIGURNOSNA KOČNICA. `sc-js` dokazuje samo da inline skripta u <head> radi, a
   klasu `sc-in` piše scrollcraft.js — druga skripta, koja može ne doći.
   Bez ovoga bi pad enginea ostavio 4000+ px praznog papira i nevidljivu
   zaključnu rečenicu prijelaza. `sc-pao` postavlja `onerror` na <script> i
   tajmer od 4 s ako `sc-ready` nikad ne stigne. */
html.sc-pao :is(.tj-telo, .tj-uvod) > * { opacity: 1 !important; transform: none !important; }
html.sc-pao [data-sc-cue] { opacity: 1 !important; transform: none !important; }

/* ---- obrat ---- */
/* Jedina debela crta na stranici. Tu se priča okreće s „ovako je" na
   „ovdje ulazimo mi", pa rez mora biti čujan. */
.tj-obrat {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr);
  gap: 0 clamp(2rem, 4vw, 4rem);
  margin-top: clamp(3rem, 7vh, 5rem);
  padding-top: clamp(2.5rem, 6vh, 4rem);
  border-top: 2px solid var(--tj-tinta);
}
.tj-obrat .tj-oznaka { position: static; }
.tj-obrat .tj-recenica { font-size: clamp(26px, 3.3vw, 46px); max-width: 22ch; }

.tj-akcije {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 26px;
  margin-top: clamp(26px, 3vw, 36px);
}
/* Na crnom je `.btn` bijeli ghost link; na papiru bi bio nevidljiv. Ispunjena
   ljubičasta pilula radi na oba i ostaje jedina ispunjena akcija. */
.tj .btn { color: var(--tj-tinta); }
.tj .btn:hover { color: var(--tj-tinta-2); }
.tj .btn.primary { color: #fff; }
.tj .btn.primary:hover { color: #fff; }

/* ---- prijelaz natrag u crno ---- */
/* Jedini pribodeni kadar u ovoj priči, i jedini razlog zašto ga ima: papir i
   crno se moraju spojiti bez ruba. Klip kreće u bijelom plićaku i završava u
   dubokoj vodi, pa `--sc-canvas` (crn) ispod njega postane točan taman u
   trenutku kad kadar ionako potamni. */
.tj-prijelaz { position: relative; }
.tj-prijelaz .sc-stage { background: #f2efe6; }

/* Rečenica mora stajati na istom lijevom rubu kao sav ostali sadržaj stranice.
   `.sc-copy--lead` sam po sebi lijepi tekst na `--sc-gutter` (30px), a `.wrap`
   je centriran na 1280px — pa bi na širokom ekranu rečenica visjela stotinjak
   piksela lijevo od svega ostalog. */
/* `--sc-gutter` je clamp(20px, 5vw, 30px) i između 400 i 600px daje 25-30px,
   dok domaćinov `.wrap` ispod 640px pada na fiksnih 20px — pa je rečenica bila
   uvučena 5-10px više od svega ostalog baš na mobitelu. Zato vlastita mjera
   `--tj-rub`, koja preslikava `.wrap`, a ne `--sc-gutter`. */
.tj-prijelaz .sc-copy--lead {
  --tj-rub: 30px;
  inset-inline: auto;
  left: 50%;
  translate: -50% 0;
  width: min(100% - 2 * var(--tj-rub), var(--maxw, 1280px) - 2 * var(--tj-rub));
  max-width: none;
  bottom: clamp(64px, 12vh, 108px);
}
@media (max-width: 640px) {
  .tj-prijelaz .sc-copy--lead { --tj-rub: 20px; }
}

.tj-prijelaz .tj-recenica {
  font-family: var(--tj-serif);
  color: #fff;
  max-width: 20ch;
  font-size: clamp(26px, 3.4vw, 46px);
}
.tj-prijelaz .tj-recenica em { background: none; color: #ffb829; }

/* Rez sekcije #solutions promaknuo je `.promise` iz trećeg djeteta u PRVO
   dijete nove sekcije, pa se njezin `margin-top: 72px` zbrojio s
   `padding-top` sekcije — 192px praznine na desktopu, 136px na mobitelu.
   Razmak sad nosi naslov sekcije, kao i svugdje drugdje na stranici. */
#slucajevi .promise { margin-top: 0; }

/* ===================================================== TRAKA (divizije) === */
/* Drugi potez, namjerno drukčiji od ploča: ovdje nema videa ni scruba nego
   vodoravno putovanje. Šest divizija prolazi bočno dok stranica stoji — to je
   jedini način da se širina grupe vidi odjednom, a ne kao mreža kartica koju
   oko preskoči.

   `grid-template-columns: minmax(0, 1fr)` je nužan: tračnica je šira od ekrana
   pa bi automatska kolona poprimila NJENU širinu i zaglavlje bi, centrirano u
   njoj, odselilo izvan desnog ruba. */
.eag-traka__stage {
  background: transparent;
  display: grid;
  grid-template-rows: auto auto;
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  gap: clamp(2rem, 6vh, 3.5rem);
  padding-block: clamp(4.5rem, 11vh, 7rem) clamp(2.5rem, 7vh, 4rem);
}

.eag-traka__glava {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: var(--sc-gutter);
}
.eag-traka__glava .lead { margin-top: 24px; }

.eag-traka__rail {
  align-items: start;
  gap: 60px;
  padding-inline: var(--sc-gutter);
  width: max-content;
}
.eag-traka__rail .div { width: min(78vw, 21rem); }

/* Brojka koliko ih je prošlo — jedina oznaka na traci, u istom mikro stilu
   kao oznaka povećanja na pločama. */
.eag-traka__broj {
  position: absolute;
  z-index: var(--sc-z-copy);
  top: calc(78px + clamp(20px, 4vh, 40px));
  right: var(--sc-gutter);
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.025em;
  text-transform: uppercase;
  color: #9a9a9a;
}
.eag-traka__broj b { font-size: 14px; color: #ffb829; font-variant-numeric: tabular-nums; }
.eag-traka__broj i { font-style: normal; width: 44px; height: 1px; background: rgba(255, 255, 255, 0.12); }

/* ==================================================== KNJIGA (projekti) === */
/* Treći potez: ni ploča ni traka nego popis. Osam projekata kao numerirani
   redovi na vlasima, sa stvarnom oznakom zrelosti desno — i zbroj na dnu koji
   naglas kaže koliko ih je zapravo živo. To je najpoštenija stvar na ovoj
   stranici i zaslužuje da se pročita, a ne da se preskoči kao mreža kartica. */
.eag-knjiga__popis {
  display: grid;
  gap: 0;
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
}

.eag-knjiga__red {
  display: grid;
  grid-template-columns: 3.5ch minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 8px 24px;
  padding: 20px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.eag-knjiga__red:last-of-type { border-bottom: 1px solid rgba(255, 255, 255, 0.08); }

.eag-knjiga__br {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.025em;
  color: #8052ff;
  font-variant-numeric: tabular-nums;
}
.eag-knjiga__ime { font-size: 20px; font-weight: 400; letter-spacing: -0.02em; color: #fff; }
.eag-knjiga__opis {
  grid-column: 2;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.5;
  color: #bdbdbd;
  max-width: 62ch;
}
.eag-knjiga__red .badge { grid-row: 1; grid-column: 3; }

/* Zbroj: jedina rečenica na stranici koja broji naglas. */
.eag-knjiga__zbroj {
  margin-top: clamp(2rem, 5vw, 3rem);
  font-size: clamp(20px, 1.2rem + 1vw, 30px);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.35;
  color: #fff;
  max-width: 30ch;
}
.eag-knjiga__zbroj b { font-weight: 400; color: #ffb829; font-variant-numeric: tabular-nums; }
.eag-knjiga__zbroj span {
  display: block;
  margin-top: 14px;
  font-size: 15px;
  font-weight: 300;
  letter-spacing: 0;
  color: #9a9a9a;
  max-width: 52ch;
}

/* ============================================================ PRELOMI ===== */
/* Prekidne točke stranice su 1024 / 920 / 640. Ne uvoditi 768 — između
   navigacije (1024) i mreža (920) inače nastane među-stanje. */

@media (max-width: 1024px) {
  .sc-copy--lead { bottom: clamp(64px, 12vh, 104px); }
  .tj-dan, .tj-obrat { grid-template-columns: 8.5rem minmax(0, 1fr); }
}

@media (max-width: 920px) {
  /* Ispod 920 uska margina više ne stane uz tekst od 26ch. Oznaka dana zato
     ide u redak IZNAD teksta i prestaje biti `sticky` — pribodena oznaka koja
     lebdi nad vlastitim odlomkom na mobitelu izgleda kao kvar, ne kao margina. */
  .tj-dan, .tj-obrat { grid-template-columns: minmax(0, 1fr); }
  .tj-oznaka {
    grid-column: 1;
    position: static;
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 16px;
  }
  .tj-oznaka i { display: none; }
  .tj-telo { grid-column: 1; }
}

@media (max-width: 1024px) {
  /* Traka: naslov i jedna kartica moraju stati u isti ekran. */
  .eag-traka__stage { padding-block: clamp(3.5rem, 9vh, 5rem) clamp(2rem, 5vh, 3rem); gap: 1.75rem; }
  .eag-traka__glava .lead { margin-top: 18px; }
  .eag-traka__rail { gap: 40px; }
  .eag-traka__rail .div { width: 78vw; }
  .eag-traka__broj { top: calc(78px + 16px); font-size: 11px; }
  .eag-traka__broj i { width: 24px; }
}

@media (max-width: 640px) {
  /* Knjiga: oznaka zrelosti ide pod ime, inače stisne naslov u dva retka. */
  .eag-knjiga__red { grid-template-columns: 3.5ch minmax(0, 1fr); padding: 16px 0; }
  .eag-knjiga__red .badge { grid-row: auto; grid-column: 2; justify-self: start; }
  .eag-knjiga__ime { font-size: 18px; }
  .eag-knjiga__opis { font-size: 14px; }

  /* Tjedan na mobitelu: rečenica smije pasti na tri retka, ali napomena ne
     smije prijeći 40ch — inače dan postane odlomak i ritam se izgubi. */
  .tj-recenica { font-size: clamp(22px, 6.4vw, 30px); max-width: 20ch; }
  .tj-obrat .tj-recenica { font-size: clamp(24px, 7vw, 34px); max-width: 18ch; }
  .tj-napomena { font-size: 15px; max-width: 40ch; }
  .tj-akcije { gap: 18px; }
  /* Prozor 2:1 na 390px je visok 175px — pretanak. Na mobitelu ide na 3:2. */
  .tj-figura { aspect-ratio: 3 / 2; }
}

/* Manje pokreta, ne nula: engine uz ovo ni ne dohvaća klipove — poster drži
   kadar, a tekst se i dalje pojavljuje, pa se dionica pročita cijela. */
@media (prefers-reduced-motion: reduce) {
  video[data-sc-scrub] { display: none; }

  /* Stranica već ima svoju konvenciju pod ovim upitom: `.reveal` se u
     index.html (r. 650-654) potpuno neutralizira — `transition:none;
     opacity:1; transform:none`. Otkrivanje redaka „Tjedna" mora se ponašati
     isto, inače je jedino mjesto na stranici koje pod „smanji pokret" i dalje
     kliže 14 px i k tome stupnjevano: engine svakom djetetu bezuvjetno upiše
     inline `transitionDelay` (scrollcraft.js r. 497), pa se 22 retka pale u
     nizu od 70-80 ms. `!important` je zbog tog inline stila. */
  html.sc-js :is(.tj-telo, .tj-uvod) > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    transition-delay: 0s !important;
  }
}