/* =========================================================================
   TZ_DAGPROGRAM — dagprogrammets desktoplayout
   Pass 135, 2026-10-08. Godkänd som prototyp (v1.2.0) på arbetskopia 394230.

   Laddas av inc/tz-dagprogram.php, efter css/resa-ny-mall.css, och bara på
   enskilda resor. Grundreglerna för dagraden (flex, tidslinje, kräm-platta,
   bildens absoluta fyllning av sin kolumn, staplingen under 981 px) ligger
   kvar i resa-ny-mall.css och rörs inte. Den här filen lägger den godkända
   designen ovanpå: samma höjd på bild och platta, kvadratisk bild, flytande
   kolumnbredder och rubrik → text-avstånd i introblocken.

   PRINCIP
     bild      kvadrat S = clamp(300px, 29vw, 408px)
                 1920 → 408   1440 → 408   1280 → 371   1024 → 300
     tidslinje M = clamp(176px, 15.5vw, 232px)
                 1920 → 232   1440 → 223   1280 → 198   1024 → 176
     platta    resten av raden, exakt S hög, scrollar invändigt om texten
               ändå inte ryms
     spalt     2,5 % av raden (oförändrat från resa-ny-mall.css)

   VARFÖR PLATTAN FÅR VÄXA UNDER 1200 PX
   Alla 69 dagtexter på de publicerade resorna mättes 2026-10-08 i plattans
   egen typografi vid 300–700 px textbredd. Vid 1440 px och uppåt ryms
   samtliga i 408 px (den längsta, Kenya dag 2–3 med 557 tecken, behöver
   399 px vid 591 px bredd). Vid 1280 px ryms alla utom de två–tre längsta.
   Vid 1024 px är raden 922 px: en kvadrat och en platta av samma höjd ger
   bara plats för texter under ~300 tecken, så hälften av de normala
   texterna hade scrollat. Därför gäller fast höjd + scroll från 1200 px,
   och under det får plattan växa med texten (bilden förblir en kvadrat,
   toppad i raden). Det är ett medvetet undantag, inte ett specialfall per
   bredd.

   Under 981 px (Divis stapling) gäller resa-ny-mall.css oförändrad.
   ========================================================================= */

@media (min-width: 981px) {

  body.single-resa {
    --tz-dag-bild: clamp(300px, 29vw, 408px);
    /* Pass 137: +16 px mot pass 135 (176/15.5vw/232) — exakt det
       andrum som padding-right nedan lägger till, så rubrikcellen
       (kolumn − 4 − 52 − 14 − 16) är lika bred som förut. */
    --tz-dag-marker: clamp(192px, 16.5vw, 248px);
    --tz-dag-andrum: 16px;
  }

  /* Tidslinjen: fast bredd, minst lika hög som bilden så att den vertikala
     linjen (marker:after) når nästa rad. Andrummet till höger (pass 137,
     2026-10-08) ger dagrubriken luft mot bildkolumnen utöver radens spalt:
     33 + 16 = 49 px vid 1320 px radbredd. */
  body.single-resa #page-container .tzr-dag-row > .tzr-dag-marker {
    flex: 0 0 var(--tz-dag-marker);
    width: var(--tz-dag-marker);
    max-width: var(--tz-dag-marker);
    min-height: var(--tz-dag-bild);
    padding-right: var(--tz-dag-andrum);
  }

  /* Rubrikcellen är ett 1fr-spår; ett ord som är bredare än cellen (Riga:
     "Frihetsmonumentet" 197 px, "Centralmarknaden" 189 px, mot 162 px cell)
     tvingade spåret att växa så att rubriken stack ut över spalten och, på
     smalare desktop, in över bilden. Avstavning (sv-SE) ger ordet en
     brytpunkt i stället; bara ord på minst 12 tecken, minst 6 på var sida.
     Ord som ryms påverkas inte. 67 av 69 rubriker har inget ord över 134 px. */
  body.single-resa #page-container .tzr-dag-title h3 {
    -webkit-hyphens: auto;
    hyphens: auto;
    hyphenate-limit-chars: 12 6 6;
  }

  /* Bilden: kolumnen är S × S. Bildmodulen, dess wrapper-span och img fyller
     kolumnen absolut (resa-ny-mall.css), så bilden blir kvadratisk och
     beskärs med object-fit: cover. Explicit höjd gör att raden inte kan
     sträcka den när plattan är högre. */
  body.single-resa #page-container .tzr-dag-row > .tzr-dag-img {
    flex: 0 0 var(--tz-dag-bild);
    width: var(--tz-dag-bild);
    max-width: var(--tz-dag-bild);
    height: var(--tz-dag-bild);
    align-self: flex-start;
  }

  /* Plattan: exakt bildens höjd, padding inräknad. Texten centreras med
     auto-marginaler på modulen — inte justify-content: center, som gör
     toppen av en för lång text onåbar vid scroll. */
  body.single-resa #page-container .tzr-dag-row > .tzr-dag-text {
    flex: 1 1 auto;
    width: auto;
    max-width: none;
    min-width: 0;
    box-sizing: border-box;
    height: var(--tz-dag-bild);
    justify-content: flex-start;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(65, 83, 33, 0.35) transparent;
  }

  body.single-resa #page-container .tzr-dag-row > .tzr-dag-text > .et_pb_module {
    flex: 0 0 auto;
    min-height: 0;
    height: auto;
    margin-top: auto;
    margin-bottom: auto;
  }

  body.single-resa #page-container .tzr-dag-row > .tzr-dag-text::-webkit-scrollbar {
    width: 6px;
  }

  body.single-resa #page-container .tzr-dag-row > .tzr-dag-text::-webkit-scrollbar-thumb {
    background: rgba(65, 83, 33, 0.35);
    border-radius: 3px;
  }

  /* Rubrik → text, 19 px, i båda introblocken. Uppmätt före: 24 px i den
     övre ingressen (rubrikmodulens marginal) och 38 px under "Exempel på
     dagsprogram" (14 px rubrikmarginal − 6 px textmarginal + 30 px
     radavstånd). Rubrikerna är h2 med samma typografi och bottenpadding, så
     måtten är direkt jämförbara. */
  body.single-resa #page-container .tzr-intro-col .tzr-intro-h2 {
    margin-bottom: 19px;
  }

  body.single-resa #page-container .tzr-dag-forklaring {
    margin-top: -25px;
  }
}

/* 981–1199 px: plattan får växa med texten i stället för att scrolla. */
@media (min-width: 981px) and (max-width: 1199px) {

  body.single-resa #page-container .tzr-dag-row > .tzr-dag-text {
    height: auto;
    min-height: var(--tz-dag-bild);
    overflow-y: visible;
  }
}