/* Om oss — historien om Mari Deli. Bygger direkte oppå /v2/v2.css
   (samme horisontale reise-rammeverk, samme fonter og motion-språk) —
   denne fila legger bare til det som er spesifikt for sitatene her. */

/* Swarsh Daisy (sitatene her, .j-num, .j-mega .accent): @font-face-
   importene og selve sitatstilen (--font-quote/--font-quote-italic) er
   flyttet til tokens.css — én definert stil, delt med det sorte feltet
   på /mat. Titlene (.j-mega/.j-title) er urørt og bruker fortsatt samme
   headerfont som /v2 (Gaglio-Bold/Medium, satt i v2.css). */

/* Kapittelnumrene (.j-num, definert i v2.css og delt med /v2) — kun her
   overstyres de til Swarsh Daisy Italic i stedet for Fraunces italic.
   Skjer i om.css, ikke v2.css, så /v2 selv er upåvirket. */
.j-num {
  font-family: var(--font-quote-italic); /* tokens.css */
  font-style: normal;
  /* Scrubbes (xPercent) hele tiden panelet er synlig — eget lag så den
     enorme glyf-flaten ikke repaintes per frame. */
  will-change: transform;
}

/* Test: aksentordet i omslagstittelen («Italia») i serif-fonten, kursiv,
   i stedet for Gaglio Bold. */
.j-mega .accent { font-family: var(--font-quote-italic); } /* Swarsh Daisy — kursiven bakt inn i fonten */

/* Sitat-pusterom: enkel, sentrert blokk — IKKE .j-word (den er laget for
   ett-to ord i full skjermstørrelse; et helt sitat måtte få bryte linje,
   så egen stil i stedet for å tøye .j-word utenfor det den er designet
   for). */
.j-quote {
  position: relative;
  z-index: 2;
  margin: 0 auto;
  /* Smal spalte, ikke en bred bolk: sitatet skal bryte på få ord per
     linje og lese som en kolonne oppå bildet — 980px lot lange sitat
     strekke seg nesten tvers over skjermen. */
  /* px, ikke ch: Swarsh Daisy har en svært smal «0», så 15ch ble ~155px
     — to tegn per linje. */
  max-width: min(86vw, 620px);
  text-align: center;
  color: var(--on-dark);
  /* Eget kompositor-lag: sitatet scrubbes (y/opacity) mens track-en
     flytter seg — uten laget re-rastreres den store tekst-skyggen
     under for hver flis idet panelet glir inn, som var lag-spiken
     akkurat ved sitat-panelene. */
  will-change: transform, opacity;
}
.j-quote p {
  margin: 0;
  font-family: var(--font-quote); /* sitatstilen, tokens.css */
  font-weight: 400;
  font-style: normal;
  /* 30 % ned fra clamp(2.6rem, 7vw, 5.4rem) */
  font-size: clamp(1.8rem, 4.9vw, 3.8rem);
  line-height: 1.02;
  /* Blur 34px, ikke 60: nesten samme glød, under halve raster-kostnaden
     — skyggen dekker nesten hele viewporten når sitatet står på. */
  text-shadow: 0 10px 34px rgba(1, 42, 32, 0.6);
  will-change: opacity;
}
.j-quote p em {
  font-family: var(--font-quote-italic); /* sitatstilen, tokens.css */
  font-style: normal;
}
.j-quote cite {
  display: block;
  margin-top: 22px;
  font-style: normal;
  font-family: var(--font-nav);
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  text-transform: none;
  color: var(--on-dark-soft);
}

/* Sitatet på finalen: mindre og venstrejustert, del av den vanlige
   tekstspalten der (ikke et eget fullskjerm-pusterom). */
.j-finale-quote {
  margin: 22px 0;
  padding-left: 20px;
  border-left: 2px solid var(--line-dark);
  font-family: var(--font-quote); /* sitatstilen, tokens.css (egen mindre skala her) */
  font-weight: 400;
  font-style: normal;
  /* 30 % ned fra clamp(1.1rem, 2vw, 1.5rem) */
  font-size: clamp(0.8rem, 1.4vw, 1.05rem);
  line-height: 1.4;
  color: var(--on-dark);
}
/* Finalen her har en 3D-figur (Patrick) på høyre side — speiler /v2s
   omslag: tekst venstrejustert i stedet for sentrert, så figuren og
   teksten ikke kolliderer. */
.j-finale { justify-content: flex-start; text-align: left; }
.j-finale-inner { padding-left: clamp(12px, 6vw, 120px); max-width: 620px; }

.j-finale-quote cite {
  display: block;
  margin-top: 8px;
  font-style: normal;
  font-family: var(--font-nav);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: none;
  color: var(--on-dark-soft);
}

/* ---------- Solopaca: kart 50 % + grønn fortellerflate 50 % ----------
   Eget panel i reisen (om/index.html): venstre halvdel er kartet over
   Italia, høyre en flate i logo-grønn med historien om byen Patrick
   kommer fra. Grid-en overstyrer .j-panel sin flex-innmat (panelet er
   fortsatt et flex-BARN av tracken — flex: none arves fra rail-regelen,
   bredden settes her). */
.j-solopaca {
  display: grid;
  /* Litt mer til body-halvparten enn kartet (var 1fr 1fr): body skal
     romme BÅDE teksten og to bilder, kartet er bare ett fotografi — se
     .j-solopaca-body for hvorfor selv dette ikke er nok alene. */
  grid-template-columns: 0.86fr 1.14fr;
  width: 100vw;
  padding: 0; /* halvdelene eier sin egen luft */
  gap: 0;
  background: var(--green, #076046);
  /* Overstyrer .j-panel sin overflow: hidden (v2.css): bildene til høyre
     for teksten (.j-solopaca-photos) skal få lov til å bleede forbi
     panelets egen høyrekant og inn i neste bilde i railen — se der. */
  overflow: visible;
}
.j-solopaca-map {
  position: relative;
  overflow: hidden;
  /* Kart-PNG-en har lys papirbunn — samme familie som --cream, så en
     eventuell letterbox aldri blir en hard kant. */
  background: var(--cream);
}
.j-solopaca-map img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* kolonnen (~50vw × 100svh) er nær bildets format — minimal beskjæring */
  display: block;
}
.j-solopaca-body {
  display: flex;
  /* Kolonne, IKKE rad, på desktop: teksten (.j-solopaca-copy) over
     bildene (.j-solopaca-photos). Var opprinnelig side om side, men
     body-sporet er halve panelbredden (100vw / 2, se .j-solopaca) — selv
     med et lesbart tekstbrudd og to bilder ved siden av hverandre er det
     regnestykket umulig å få til å gå opp på vanlige skrivebordsbredder
     (901–1600px): 360px tekst + 2×110px bilder + mellomrom blir fort
     over 600px, mens den faktiske bredden som er igjen etter padding kan
     være under 400px. Resultatet var at bilde nummer to bleedet HELT
     forbi høyrekanten av selve viewporten (usynlig, ikke bare forbi
     panel-boksen) — det var «her mangler det bilder»-bugen. Kolonne
     løser det: bildene konkurrerer da bare om HØYDE mot resten av
     rekka, ikke bredde mot teksten, og hele bodyen har all sin egen
     halvpart av panelbredden å bruke i bredden. */
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  /* Mer luft enn før (24-52px → 40-80px) — modulen leste som trang med
     bildene presset rett inntil teksten. */
  gap: clamp(28px, 4vh, 52px);
  /* Romsligere ramme rundt hele innholdet, samme grunn. */
  padding: clamp(48px, 7vh, 100px) clamp(40px, 6vw, 110px);
  color: var(--on-dark);
  /* min-width: 0 på selve GRID-CELLEN (body er det andre av de to
     sporene i .j-solopaca): uten denne regner CSS Grid det automatiske
     minstemålet for et grid-spor fra INNHOLDETS naturlige
     minimumsbredde, og kart-kolonnen kunne bli klemt ned mot 0px bredde
     av et bredt, u-krympet barn. Med min-width: 0 holder Grid seg til de
     faktiske sporbreddene. */
  min-width: 0;
}
.j-solopaca-copy { max-width: 46em; }
.j-solopaca-body .j-title { color: var(--on-dark); }
.j-solopaca-body .j-text { color: rgba(246, 238, 222, 0.85); max-width: 52ch; }
.j-solopaca-body .j-text strong { color: var(--on-dark); }
.j-solopaca-kicker {
  margin: 0 0 14px;
  font-family: var(--font-nav);
  font-weight: 400;
  font-size: 0.78rem;
  letter-spacing: 0.28em;
  text-transform: none;
  color: rgba(246, 238, 222, 0.62);
}

/* Patricks bilder fra byen — to rammer i lett scrapbook-forskyvning,
   under teksten (se .j-solopaca-body). .j-media (v2.css) gir
   radius/skygge/overflow, og bevegelseslagene gir parallax i rammen.

   Nå som raden ligger UNDER teksten i stedet for ved siden av den
   (kolonne-fiksen over) har den hele bodyens bredde for seg selv —
   krymping/min-width-gulv er fortsatt satt som et sikkerhetsnett for
   de smaleste rail-breddene (901px), men trigges normalt ikke lenger. */
.j-solopaca-photos {
  display: flex;
  align-items: flex-start;
  gap: clamp(16px, 2vw, 32px);
  min-width: 0;
}
/* 3/4, ikke 4/3: solopaca-1/2.webp er STÅENDE (1200×1600 = 3:4) —
   satt til feil (liggende) format tidligere tvang object-fit: cover til
   å klippe bort mesteparten av bildebredden. Alltid bildets eget
   format som utgangspunkt, se v2/index.html og om/index.html sine
   per-bilde aspect-ratio-overstyringer for samme prinsipp. */
.j-solopaca-photo { margin: 0; aspect-ratio: 3 / 4; min-width: 90px; }
.j-solopaca-photo-a { width: clamp(170px, 17vw, 260px); transform: rotate(-1.2deg); }
.j-solopaca-photo-b {
  width: clamp(150px, 15vw, 220px);
  margin-top: clamp(24px, 4vh, 46px);
  transform: rotate(1.4deg);
}

/* Lav skjermhøyde på desktop (samme intervall som v2.css sin generelle
   låvhøyde-blokk): kolonnen over (kicker+tittel+3 avsnitt+bilderad) er
   skrevet for rikelig høyde og klippes av railens 100svh-panel på en
   670kort laptop. Strammer luften og teksten vertikalt — bildene er det
   minst kritiske innholdet her (kartet + teksten ER historien), så de
   krymper mest. Samme innstramming trengs også nær railens smaleste
   bredde (901px) — der er ikke selve HØYDEN nødvendigvis knapp, men
   body-kolonnen er smalere, teksten bryter til flere linjer, og
   summen blir like høy som ved lav vh. Derfor to vilkår, ikke ett. */
@media (min-width: 901px) and (max-height: 760px), (min-width: 901px) and (max-width: 1100px) {
  .j-solopaca-body {
    gap: clamp(10px, 1.8vh, 22px);
    padding-block: clamp(20px, 4vh, 48px);
  }
  .j-solopaca-kicker { margin-bottom: 6px; }
  .j-solopaca-body .j-text {
    font-size: 0.92rem;
    line-height: 1.42;
    margin-bottom: 6px;
  }
  /* Bare bredde/luft krymper — aspect-ratio (3/4, matcher bildenes eget
     format) rører vi ikke, høyden følger automatisk av den smalere
     bredden. Trangere tak enn før: en KORREKT 3/4-ramme er høyere enn
     den forrige (feilaktige) 16/10-en var ved samme bredde, så bredden
     må ned tilsvarende for å holde samme høydebudsjett. */
  .j-solopaca-photo-a { width: clamp(85px, 7.5vw, 125px); }
  .j-solopaca-photo-b { width: clamp(70px, 6.5vw, 105px); margin-top: clamp(10px, 2vh, 22px); }
}

/* Svært lav skjerm (~550–620 px): teksten tar hele høyden i body-kolonnen,
   så bildene flyttes ut som et lite collage nederst over KARTET (venstre
   halvdel har luft), i stedet for å bli klippet under kanten. */
@media (min-width: 901px) and (max-height: 620px) {
  .j-solopaca-photos {
    position: absolute;
    z-index: 3;
    left: clamp(16px, 2.5vw, 40px);
    bottom: clamp(14px, 3.5vh, 32px);
  }
  .j-solopaca-photo-a { width: clamp(90px, 9vw, 130px); }
  .j-solopaca-photo-b { width: clamp(76px, 7.5vw, 110px); }

  /* Finalen: tittelen bredere og lavere, så tekst, sitat og knapp får plass */
  .j-finale-inner { max-width: 760px; }
  .j-finale-inner .j-mega-small { font-size: clamp(2.2rem, min(5vw, 9vh), 4rem); }
  .j-finale-quote { margin: 12px 0; }
}

/* Mobil (vertikal reise): stablet — kartet øverst i fast høyde, teksten
   på grønt under. Panelenes generelle padding-block (v2.css) nulles ut
   her også; flatene skal møtes kant i kant. Ingen bleed-behov på mobil
   (ett kolonne-oppsett, ikke en horisontal rail) — overflow er derfor
   irrelevant der, men skader ikke å la den stå. */
@media (max-width: 900px) {
  .j-solopaca { grid-template-columns: 1fr; padding: 0; }
  .j-solopaca-body { flex-direction: column; justify-content: center; padding: clamp(44px, 9vh, 80px) var(--gutter, 22px); }
  .j-solopaca-map { height: 58svh; }
  /* Bildene stables med vekslende side — de ankommer da også naturlig
     etter hverandre (hver ramme har sin egen reveal-trigger i
     vertical-journey.js, og forskyvningen gir dem ulik scrollposisjon). */
  .j-solopaca-photos { flex-direction: column; gap: 18px; margin-top: clamp(22px, 3.5vh, 40px); }
  .j-solopaca-photo-a { width: 80%; align-self: flex-start; }
  .j-solopaca-photo-b { width: 68%; align-self: flex-end; margin-top: 0; }
}

/* ---------- Filmpaneler ----------
   To korte klipp (om.js sin initFilmPanels() spiller/pauser dem etter
   synlighet) satt inn som egne pusterom i reisen — samme fullbredde-idé
   som .j-breather sitt .j-layer (v2.css), bare video i stedet for bilde,
   og uten sitat oppå. Videoen får en lodrett scroll-parallax + lett
   zoom (om.js), samme oppskrift som resten av reisens bilder — klippes
   trygt av .j-panel sin overflow: hidden. Panelene FØR og ETTER
   (kapittel/sitat) beholder sin vanlige scroll-parallax uendret.

   Klippene er STÅENDE (1080×1920, 9:16) — på mobil fyller de hele
   skjermen fint (portrett mot portrett, full-bleed under). */
.j-video-panel { padding: 0; background: var(--ink-deep); }
.j-video-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: var(--ink-deep); /* samme bunnfarge til posteret/videoen har lastet */
}

/* Widescreen: IKKE et 100vw fullskjerm-steg (det var forkastet — et
   9:16-klipp midt i en bred landskapsflate ga enten beskjæring eller
   (forrige forsøk) en liten sentrert boks med mye dødt rom på sidene).
   I stedet en INNHOLDSSTØRRELSE modul, samme prinsipp som .j-chapter:
   videoen er 100 % av panelhøyden, bredden følger klippets eget 9:16-
   forhold (width: auto), og selve PANELET krymper til akkurat den
   bredden (width: max-content). Resultat: videoen står som en smal,
   full høyde film-strimmel i railen — kapittel-/sitatpanelene før og
   etter er delvis synlige ved siden av den samtidig, og glir forbi med
   sin egen parallax akkurat som resten av reisen, i stedet for at
   filmen tar et helt, isolert fullskjerm-steg for seg selv. */
.j-viewport.is-rail .j-video-panel {
  width: max-content;
}
.j-viewport.is-rail .j-video-media {
  position: static;
  width: auto;
  height: 100%;
  aspect-ratio: 9 / 16; /* riktig bredde beregnes FØR videoen har lastet metadata */
  object-fit: cover;
  box-shadow: var(--shadow-deep);
}