/* =========================================================================
   TZ_BILDHERO — ETT gemensamt bildhero för sajtens övergripande sidtyper
   Pass 88, 2026-09-27

   DESIGNFACIT ÄR PREMIUMRESOR. Uppmätt på /premiumresor/ innan något
   ändrades:

     behållare   min-height min(60vh, 560px)  → 513 px vid 855 px viewport
     bild        <img>, position absolute, object-fit: cover
     slöja       linear-gradient 0 → rgba(20,24,16,.72) från 35 %
     inner       max-width 1200 px, padding 64/48 px, text-align center
     h1          var(--tz-h1) = 52 px, #fff
     p           var(--tz-body) = 19,2 px, max-width 680 px, #fff 92 %

   VARFÖR INTE KLASSEN .tz-hero
   `.tz-hero` är UPPTAGEN. Den är startsidans hero — ljus slöja från
   vänster, mörk text, min-height 76vh, egen knapp- och rubriklogik i
   style.css rad 679–993. Att återanvända det namnet hade byggt om
   startsidan. Därför ett eget namn: tz-bildhero.

   TRE MARKUP-FORMER, EN DESIGN
   Sidorna bär bilden på olika sätt, och det är inte värt att skriva om
   fungerande markup för att ensa det:

     Premiumresor  <div class="tz-bildhero"><img>…<div class="__inner">
     Resor         <section class="tz-resor-hero tz-bildhero"
                     style="background-image:url(…)"> + __innehall
     Temasidor     Divi-sektion med dynamisk bakgrundsbild + .et_pb_row

   Reglerna nedan tar därför alla tre inre behållarna i samma selektorlista.
   Det är EN implementation — inte tre.

   VARIABLER FRAMFÖR HÅRDA VÄRDEN
   Höjd, radie och slöja ligger i :root. Vill ägaren ha en annan höjd eller
   kvadratiska hörn är det en rad att ändra, på ett ställe, för alla sidor.

   OM RUNDADE HÖRN
   Premiumresor hade border-radius: 0 när passet började. Resor hade
   rundade hörn. Ägarens beskrivning av facit räknar upp "rundade hörn",
   så systemet rundar. Ska det bort: sätt --tz-bildhero-radie: 0.
   ========================================================================= */

:root {
  /* "Generös men kontrollerad höjd" — Premiumresors uppmätta värde. */
  --tz-bildhero-hojd: min(60vh, 560px);

  /* Samma radie som resten av sajtens stora ytor (--tz-radius-lg = 16px). */
  --tz-bildhero-radie: 16px;

  /* Slöjan finns för läsbarheten, inte för effekten: vit text på en ljus
     strandbild är annars omöjlig att läsa. Identisk med den Premiumresor
     och Resor redan använde. */
  --tz-bildhero-sloja: linear-gradient(180deg, rgba(20, 24, 16, 0) 35%, rgba(20, 24, 16, 0.72) 100%);

  --tz-bildhero-inner: 1200px;
  --tz-bildhero-ingress: 680px;

  /* AVSTÅNDET TILL HEADERN — normaliserat i pass 91.
     Uppmätt före normaliseringen, vid 1440 px:

       Premiumresor   54 px   (Divi-sektionens standardpadding)
       Resor         118 px   (54 + 64 från resor-oversikt.css rad 1344)
       Temasidor       0 px   (sektionen ÄR heron och har padding 0)

     Premiumresor är den visuella referensen, så dess 54 px blir normen.
     Värdet står här och bara här — ändras det följer alla sidtyper med. */
  --tz-bildhero-over:  54px;
  --tz-bildhero-under: 54px;
}

/* -- Behållaren ------------------------------------------------------- */
body #page-container .tz-bildhero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: var(--tz-bildhero-hojd);
  overflow: hidden;
  border-radius: var(--tz-bildhero-radie);

  /* För de två varianter som bär bilden som bakgrund. */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Premiumresors riktiga <img>. En riktig bild ger äkta alt-text och
   lazy-hantering — därför behålls den formen där den finns. */
body #page-container .tz-bildhero > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body #page-container .tz-bildhero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--tz-bildhero-sloja);
  pointer-events: none;
}

/* -- Innehållet ------------------------------------------------------- */
body #page-container .tz-bildhero__inner,
body #page-container .tz-bildhero .tz-resor-hero__innehall,
body #page-container .tz-bildhero > .et_pb_row {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--tz-bildhero-inner) !important;
  margin: 0 auto !important;
  padding: clamp(2rem, 1rem + 4vw, 4rem) clamp(1.25rem, 0.5rem + 3vw, 3rem) !important;
  text-align: center;
}

body #page-container .tz-bildhero__inner h1,
body #page-container .tz-bildhero .tz-resor-hero__rubrik,
body #page-container .tz-bildhero > .et_pb_row h1 {
  font-family: var(--tz-font-heading);
  font-size: var(--tz-h1) !important;
  line-height: var(--tz-leading-tight) !important;
  font-weight: 700;
  color: #ffffff !important;
  text-align: center !important;
  margin: 0 0 0.5rem !important;
  max-width: none;

  /* Textskuggan kommer från Resor-heron. Den skadar inte en mörk slöja och
     räddar läsbarheten när en bild är ljus i nederkant. */
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
}

body #page-container .tz-bildhero__inner p,
body #page-container .tz-bildhero .tz-resor-hero__ingress,
body #page-container .tz-bildhero > .et_pb_row p {
  font-family: var(--tz-font-body);
  font-size: var(--tz-body) !important;
  line-height: var(--tz-leading-body);
  color: rgba(255, 255, 255, 0.92) !important;
  text-align: center !important;
  max-width: var(--tz-bildhero-ingress) !important;
  margin: 0 auto !important;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}

/* -- Överrubrik (pass 109, kontaktsidan) ------------------------------ */
/* En liten versalrad ovanför H1, t.ex. "KONTAKTA OSS". Textmodulen får
   klassen tz-bildhero__over. Stycket ovan tvingar alla <p> i heron till
   ingressens storlek med !important, så överrubriken behöver en längre
   kedja (1,3,2 mot 1,2,2) och egen !important för att bli liten. */
body #page-container .tz-bildhero > .et_pb_row .tz-bildhero__over p {
  font-family: var(--tz-font-heading);
  font-size: 0.8125rem !important;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin: 0 auto 0.75rem !important;
}

/* -- Varianten dar Divi-sektionen SJALV ar heron ----------------------- */
/* Anvands av TVA Theme Builder-layouter: temamallen 384836 (18 temasidor)
   och landmallen 379508 (140 landsidor). I bada ar bakgrundsbilden satt pa
   sjalva sektionen, till skillnad fran Premiumresor och Resor dar heron ar
   ett element INUTI en sektion. Darav den egna modifieraren.

   Divi-sektionen gar fullbredd och har padding-top: 57vh satt i modulen,
   vilket ar det som gjorde det hoga bildblocket med rubriken under. Bada
   maste bort for att sektionen ska bli samma hero som de andra tva.
   !important kravs mot Divis genererade modul-CSS - se style.css rad 671. */
body #page-container .tz-bildhero--sektion {
  width: var(--tz-container-width, 90%);
  max-width: var(--tz-container-max, 2400px);
  margin-inline: auto !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* SPECIFICITETEN ÄR MÄTT, INTE GISSAD.
   Divi skriver ut sina modulvärden inline som

     .et-db #et-boc .et-l .et_pb_row_0_tb_body { max-width: 1800px !important }

   alltså 0,4,0 MED !important. En vanlig `body #page-container .tz-bildhero
   > .et_pb_row` (0,3,1) förlorar mot den även med !important. Genom att
   skriva ut BÅDA klasserna på behållaren blir kedjan 0,4,1 och vinner.
   Samma sak gäller modulens egen max-width och marginal. */
body #page-container .tz-bildhero.tz-bildhero--sektion > .et_pb_row {
  max-width: var(--tz-bildhero-inner) !important;
  width: 100% !important;
  margin-inline: auto !important;
}

/* Rubrikmodulen har max-width 900px och ligger vänsterställd i kolumnen.
   Den ska centreras, inte breddas — 900 px är en rimlig radlängd. */
body #page-container .tz-bildhero.tz-bildhero--sektion .et_pb_module {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Temarubrikerna är versaliserade i temamallen. Facit på Premiumresor är
   gemener, och hero-systemet ska se likadant ut på alla sidtyper. */
body #page-container .tz-bildhero.tz-bildhero--sektion h1 {
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* Divis kolumn inuti raden ska inte lägga på egen bredd eller padding. */
body #page-container .tz-bildhero > .et_pb_row > .et_pb_column {
  width: 100% !important;
  padding: 0 !important;
}

/* -- Avståndet till headern (pass 91) ---------------------------------- */
/* Tre sidtyper hade tre olika glapp under huvudmenyn: 54, 118 och 0 px.
   Orsaken är att heron sitter olika djupt i markupen. Normaliseringen tar
   därför två vägar till samma resultat, och värdet står på ett ställe.

   1. Sektionen SJÄLV är heron (tema- och landmallen) → marginal ovanför.
      Padding hade i stället knuffat ned bilden inuti heron. */
body #page-container .tz-bildhero.tz-bildhero--sektion {
  margin-top: var(--tz-bildhero-over) !important;
  margin-bottom: var(--tz-bildhero-under) !important;
}

/* 2. Heron ligger INUTI en sektion (Premiumresor, Resor) → sektionen bär
      toppavståndet och heron nollar sina egna marginaler. `:has()` gör
      regeln generisk: den letar efter en sektion som innehåller ett hero,
      inte efter en viss sida. */
body #page-container .et_pb_section:has(.tz-bildhero:not(.tz-bildhero--sektion)) {
  padding-top: var(--tz-bildhero-over) !important;
  padding-bottom: 0 !important;
}

body #page-container .tz-bildhero:not(.tz-bildhero--sektion) {
  margin-top: 0 !important;
  margin-bottom: var(--tz-bildhero-under) !important;
}

/* -- Radbrytning i ingressen ------------------------------------------ */
/* Premiumresors ingress har en <br> som styr brytningen på desktop. På
   smal skärm ger den för korta rader — samma princip som style.css rad 693
   redan använder för startsidans hero. */
@media (max-width: 599px) {
  body #page-container .tz-bildhero p br { display: none; }
}

/* -- Mobil ------------------------------------------------------------- */
@media (max-width: 767px) {
  :root {
    --tz-bildhero-hojd: min(52vh, 420px);
    --tz-bildhero-radie: 12px;
  }

  body #page-container .tz-bildhero__inner,
  body #page-container .tz-bildhero .tz-resor-hero__innehall,
  body #page-container .tz-bildhero > .et_pb_row {
    padding: 1.5rem 1.25rem !important;
  }
}