/* =========================================================================
   TZ_KAMPANJ — den generiska kampanjytan (pass 90, 2026-09-27)

   Markup: inc/tz-kampanj.php, utskriven via [tz_kampanjer yta="..."]
   Data:   Zrp_Kampanj i motorn. Ingen datumlogik finns i CSS eller markup.

   TONLÄGE: UTVALT ERBJUDANDE, INTE REA
   Kortet ska läsa som en redaktionell rekommendation. Det betyder lugn
   yta, gott om luft, en enda accentfärg och inga utropstecken. Den enda
   färgstarka detaljen är etiketten på bilden — och den är guld, inte röd.

   FORMSPRÅKET ÄR HEADERNS OCH SIDFOTENS
   Samma tokens som css/tz-header.css rad 25–47 och css/tz-footer.css:
   #1a1a1a text, #415321 grön, #8c6a38 guld, Poppins 600 för rubriker,
   Roboto för brödtext, radie 16, easing cubic-bezier(.22, 1, .36, 1).

   TVÅ PRESENTATIONER, SAMMA DATA (pass 101)
   visning="kort"   liggande kort, ett per kampanj — Kryssningsresor
   visning="teaser" en kompakt yta för alla kampanjer — startsidan och
                    Premiumresor, med länk till korten på Kryssningsresor
   ========================================================================= */

:root {
  --tzkmp-bg:        #f7f3ec;
  --tzkmp-panel:     #ffffff;
  --tzkmp-text:      #1a1a1a;
  --tzkmp-svag:      rgba(26, 26, 26, 0.72);
  --tzkmp-svagare:   rgba(26, 26, 26, 0.55);
  --tzkmp-linje:     rgba(26, 26, 26, 0.10);
  --tzkmp-gron:      #415321;
  --tzkmp-ljusgron:  #dbe6da;
  --tzkmp-guld:      #8c6a38;
  --tzkmp-guld-hov:  #75592f;
  --tzkmp-radie:     16px;
  --tzkmp-ease:      cubic-bezier(0.22, 1, 0.36, 1);
  --tzkmp-tap:       44px;
}

/* text-align: left är uttryckligt sedan pass 98. På Kryssningsresor ligger
   ytan i en Divi-textmodul som centrerar sitt innehåll, och kortets text
   ärvde det — villkoren och ingressen blev centrerade medan pris och knapp
   stod till vänster. På startsidan och Premiumresor är det en no-op. */
body #page-container .tzkmp {
  font-family: 'Roboto', Arial, sans-serif;
  color: var(--tzkmp-text);
  margin: clamp(2rem, 1rem + 2vw, 3.5rem) 0;
  text-align: left;
}

/* Ikonerna ritas som mask i textfärgen — se tz_kampanj_ikon() för varför
   inte inline-SVG. Banorna är desamma som de tidigare SVG:erna. */
body #page-container .tzkmp__ikon {
  display: inline-block;
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  vertical-align: -3px;
  background-color: currentColor;
  -webkit-mask: var(--tzkmp-ikon) center / contain no-repeat;
  mask: var(--tzkmp-ikon) center / contain no-repeat;
}

body #page-container .tzkmp__ikon--stjarna {
  --tzkmp-ikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3.5 2.6 5.3 5.9.9-4.3 4.1 1 5.8-5.2-2.7-5.2 2.7 1-5.8-4.3-4.1 5.9-.9Z'/%3E%3C/svg%3E");
}

body #page-container .tzkmp__ikon--pil {
  --tzkmp-ikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13'/%3E%3Cpath d='m12.5 6.5 5.5 5.5-5.5 5.5'/%3E%3C/svg%3E");
}

body #page-container .tzkmp__ikon--klocka {
  --tzkmp-ikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5V12l3 1.8'/%3E%3C/svg%3E");
}

body #page-container .tzkmp__sektionsrubrik {
  font-family: 'Poppins', Arial, sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tzkmp-svagare);
  margin: 0 0 16px;
}

/* -------------------------------------------------------------------------
   Korten — visning="kort" (Kryssningsresor), liggande sedan pass 101

   Fram till pass 101 var korten stående: 16:10-bild överst, all text under,
   villkoren öppna. På Kryssningsresor blev det två kort på 1 168 px höjd i
   en 1 200 px smal textkolumn. Nu:

   - Sektionen bryter ut till samma bredd som sidans breda rader (90 % av
     fönstret, högst 1 800 px). Den ligger i ett dynamiskt textfält i en
     smalare rad, så utbrytningen görs med negativ marginal räknad från
     radens mitt — ingen transform, inget 100vw-spill.
   - Varje kort är liggande: bild till vänster, innehåll till höger.
   - Pris och knapp delar rad; villkoren är utfällbara.

   Brytpunkter: två kort i bredd från 1100 px, ett per rad (fortfarande
   liggande) ned till 700 px, därunder staplat med bilden överst.
   ---------------------------------------------------------------------- */

body #page-container .tzkmp--kort {
  --tzkmp-bredd: min(1800px, 90vw);
  width: var(--tzkmp-bredd);
  max-width: none;
  margin-left: calc((100% - var(--tzkmp-bredd)) / 2);
  margin-right: 0;
  position: relative;
}

/* Ankaret #erbjudanden (se tz-kampanj.php). Headern är 122 px och 89 px
   klistrad; 130 px ovanför gör att sektionen landar fritt under den. */
body #page-container .tzkmp__ankare {
  position: absolute;
  top: -130px;
  left: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

body #page-container .tzkmp__rutnat {
  display: grid;
  gap: clamp(20px, 2vw, 32px);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 1100px) {
  body #page-container .tzkmp--kort:not(.tzkmp--antal-1) .tzkmp__rutnat {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* -- Kortet ------------------------------------------------------------ */

body #page-container .tzkmp__kort {
  background: var(--tzkmp-panel);
  border: 1px solid var(--tzkmp-linje);
  border-radius: var(--tzkmp-radie);
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

/* Pass 122 B — samma vilande skugga som resekorten (`--tz-card-shadow`,
   style.css). Vit kortyta mot sidans nästan vita bakgrund gav otydliga
   ytterkanter på Kryssningsresor. Bara korten (visning="kort"): teasern och
   rutan på resans sida är orörda. Reservvärdet är variabelns exakta värde. */
body #page-container .tzkmp--kort .tzkmp__kort {
  box-shadow: var(--tz-card-shadow, 0 1px 2px rgba(26, 26, 26, 0.06), 0 6px 20px rgba(26, 26, 26, 0.08));
}

body #page-container .tzkmp__bild {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

body #page-container .tzkmp__bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (min-width: 700px) {
  body #page-container .tzkmp__kort {
    grid-template-columns: minmax(0, 38%) minmax(0, 1fr);
  }

  body #page-container .tzkmp__bild {
    aspect-ratio: auto;
    height: 100%;
    min-height: 240px;
  }
}

/* Etiketten är den enda färgstarka detaljen. Guld, inte rött: det här är
   ett utvalt erbjudande, inte en utförsäljning. */
body #page-container .tzkmp__badge {
  position: absolute;
  top: 14px;
  left: 14px;
  background: var(--tzkmp-guld);
  color: #ffffff;
  font-family: 'Poppins', Arial, sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.04em;
  padding: 6px 12px;
  border-radius: 999px;
}

body #page-container .tzkmp__kropp {
  padding: clamp(20px, 1.6vw, 28px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
  min-width: 0;
}

/* -- Märkning och leverantör: sekundärt, på en rad ---------------------- */

body #page-container .tzkmp__topp {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
}

body #page-container .tzkmp__utvald {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  font-family: 'Poppins', Arial, sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--tzkmp-gron);
  background: rgba(65, 83, 33, 0.10);
  padding: 5px 12px 5px 9px;
  border-radius: 999px;
}

body #page-container .tzkmp__utvald .tzkmp__ikon { flex: 0 0 auto; }

body #page-container .tzkmp__leverantor {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tzkmp-svagare);
}

/* -- Rubrik och text ----------------------------------------------------- */

body #page-container .tzkmp__rubrik {
  font-family: 'Poppins', Arial, sans-serif;
  font-weight: 600;
  font-size: clamp(1.125rem, 1rem + 0.45vw, 1.4rem);
  line-height: 1.25;
  margin: 0;
  padding: 0;
  color: var(--tzkmp-text);
}

/* !important: temats oversionerade style.css har p { font-size: 1.2em
   !important }. På Kryssningsresor ligger korten i en textmodul där den
   regeln annars ger 19,2 px brödtext. Avgränsat till korten. */
body #page-container .tzkmp--kort .tzkmp__text {
  margin: 0;
  padding: 0;
  color: var(--tzkmp-svag);
  font-size: 15px !important;
  line-height: 1.55 !important;
}

/* -- Pris och knapp ------------------------------------------------------ */

body #page-container .tzkmp__affar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 20px;
  width: 100%;
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid var(--tzkmp-linje);
}

body #page-container .tzkmp__pris {
  margin: 4px 0 0;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
}

body #page-container .tzkmp__affar .tzkmp__pris {
  margin: 0;
  padding: 0;
  flex: 1 1 220px;
  min-width: 0;
}

body #page-container .tzkmp__pris-fran {
  font-size: 13px;
  color: var(--tzkmp-svagare);
}

body #page-container .tzkmp__pris-nu {
  font-family: 'Poppins', Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.6rem);
  color: var(--tzkmp-text);
}

body #page-container .tzkmp__pris-ord {
  color: var(--tzkmp-svagare);
  font-size: 15px;
}

body #page-container .tzkmp__pris-text {
  color: var(--tzkmp-svagare);
  font-size: 13px;
  line-height: 1.4;
}

body #page-container .tzkmp__affar .tzkmp__pris-text {
  flex: 1 0 100%;
}

body #page-container .tzkmp__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--tzkmp-tap);
  margin-top: 6px;
  padding: 11px 22px;
  border-radius: 10px;
  background: var(--tzkmp-guld);
  border: 1px solid var(--tzkmp-guld);
  color: #ffffff;
  font-family: 'Poppins', Arial, sans-serif;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  transition: background 160ms var(--tzkmp-ease), gap 160ms var(--tzkmp-ease);
}

body #page-container .tzkmp__affar .tzkmp__cta {
  margin-top: 0;
  flex: 0 0 auto;
}

/* -- Knappraden i kortet (pass 111) -------------------------------------

   Knappen satt tidigare pa prisraden. Agarbeslut 2026-09-30: den ska sta
   nere i hogra hornet av kortets innehallsyta, utan pil.

   `margin-top: auto` ar hela poangen med en egen rad. `.tzkmp__kropp` ar
   redan en flexkolumn, och korten i `.tzkmp__rutnat` strackes till samma
   hojd - utan den hade knappen i det kortare kortet hangt kvar mitt i
   kortet i stallet for att motas pa samma linje som grannens.

   Bara i kortet. Rutan pa resans egen sida (`.tzkmp-resa`) anvander samma
   `.tzkmp__cta` men har varken den har raden eller det har lagets krav -
   dar star knappen kvar dar den stod, med sin pil.                       */

body #page-container .tzkmp--kort .tzkmp__cta-rad {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  margin-top: auto;
  padding-top: 4px;
}

body #page-container .tzkmp--kort .tzkmp__cta-rad .tzkmp__cta {
  margin-top: 0;
}

body #page-container .tzkmp__cta:hover,
body #page-container .tzkmp__cta:focus-visible {
  background: var(--tzkmp-guld-hov);
  border-color: var(--tzkmp-guld-hov);
  color: #ffffff;
  gap: 12px;
}

body #page-container .tzkmp__cta:focus-visible {
  outline: 2px solid var(--tzkmp-gron);
  outline-offset: 3px;
}

/* -- Perioden och det finstilta ----------------------------------------- */

body #page-container .tzkmp__period {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--tzkmp-svagare);
}

body #page-container .tzkmp--kort .tzkmp__period {
  margin: 0;
  padding: 0;
  font-size: 13px !important;
  line-height: 1.4 !important;
}

body #page-container .tzkmp__villkor {
  width: 100%;
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--tzkmp-svagare);
}

body #page-container .tzkmp__villkor summary {
  cursor: pointer;
  width: fit-content;
  font-size: 13px;
  font-weight: 500;
  color: var(--tzkmp-svag);
}

body #page-container .tzkmp__villkor summary:focus-visible {
  outline: 2px solid var(--tzkmp-gron);
  outline-offset: 3px;
  border-radius: 4px;
}

body #page-container .tzkmp--kort .tzkmp__villkor p {
  margin: 8px 0 0;
  padding: 0;
  font-size: 13px !important;
  line-height: 1.55 !important;
}

/* -- Mobil -------------------------------------------------------------- */

@media (max-width: 600px) {
  body #page-container .tzkmp__cta {
    width: 100%;
    justify-content: center;
  }
}

/* -------------------------------------------------------------------------
   Teasern — visning="teaser" (startsidan, Premiumresor), pass 101

   Samma visuella familj som startsidans premiumbanner (`.tz-premium-banner`
   i style.css): sandfärgad yta #f6efe4, radie 16, liten versal överrubrik i
   accentfärg, rubrik i primärfärg och samma pillerknapp — klassen
   `tz-premium-knapp` återanvänds rakt av. Skillnaden: bilden till vänster
   och ungefär halva höjden, så att ytan läser som en redaktionell notis och
   inte som en annonsbanner.

   Hela ytan är klickbar: knappens ::after spänns över kortet. Det finns
   fortfarande bara EN länk, med begriplig text, i tabbordningen.
   ---------------------------------------------------------------------- */

body #page-container .tzkmp-teaser {
  margin: clamp(1.25rem, 0.75rem + 1.5vw, 2.5rem) 0;
}

/* Står komponenten ensam i sin Divi-modul sköter sektionens egen padding
   rytmen, och komponentens marginal blir dubbel spacing (pass 102).

   Uppmätt på startsidan före rättelsen: sektionerna har 54 px padding upptill
   och nedtill, så radernas avstånd är 108 px överallt. Teaserns egna 40 px i
   var ände låg inuti raden som tom luft och gjorde det SYNLIGA avståndet
   148 px — mot 108 px mellan sidans övriga sektioner.

   `:only-child` är villkoret som skiljer fallen åt: ligger kampanjytan
   inbäddad bland annan text (kortkoden i temasidans ingressfält) behöver den
   fortfarande sin egen marginal mot texten omkring. Ligger den ensam i en
   kod- eller textmodul gör sektionen jobbet. */
body #page-container .et_pb_code_inner > .tzkmp:only-child,
body #page-container .et_pb_text_inner > .tzkmp:only-child {
  margin-block: 0;
}

/* Ytan är sajtens ljusgröna (pass 103), samma värde som toppraden och
   sidfoten — `#DBE6DA`, fastställt i pass 89 och 92. Teasern låg tidigare i
   premiumbannerns sandfärgade familj.

   Sidfoten har exakt samma bakgrund och är därför facit för texten på den:
   rubriker i `#415321`, brödtext i `rgba(26,26,26,.72)`. Uppmätta kontraster
   mot ytan — rubrik 6,58:1, ingress 6,07:1, knappens vita text 8,45:1 och
   knappytan mot bakgrunden 6,58:1. Samtliga klarar AA med marginal. */
body #page-container .tzkmp-teaser__yta {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  overflow: hidden;
  border-radius: 16px;
  background: var(--tzkmp-ljusgron);
  transition: box-shadow 200ms var(--tzkmp-ease);
}

body #page-container .tzkmp-teaser__yta:hover {
  box-shadow: 0 10px 30px rgba(26, 26, 26, 0.08);
}

body #page-container .tzkmp-teaser__yta:has(.tzkmp-teaser__cta:focus-visible) {
  outline: 2px solid var(--tzkmp-gron);
  outline-offset: 3px;
}

body #page-container .tzkmp-teaser__bild {
  overflow: hidden;
  line-height: 0;
}

body #page-container .tzkmp-teaser__bild img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform 600ms var(--tzkmp-ease);
}

body #page-container .tzkmp-teaser__yta:hover .tzkmp-teaser__bild img {
  transform: scale(1.03);
}

body #page-container .tzkmp-teaser__text {
  padding: clamp(1.25rem, 0.75rem + 1.5vw, 2.25rem);
  align-self: center;
}

/* Överrubriken bär sajtens primärgröna i stället för accentorangen (pass 103).
   Orangen `#ce5c1f` gav 3,16:1 mot den ljusgröna ytan — och klarade inte
   kravet på den gamla beigea heller (3,55:1 mot AA:s 4,5:1 för text i den
   här storleken). Grönt ger 6,58:1.

   Hierarkin mot rubriken bärs av storlek, versalisering och spärrning, inte
   av färg. Det är samma grepp som sidfoten använder på samma bakgrund, där
   "UTFORSKA" står som liten spärrad versal över sina länkar. */
body #page-container .tzkmp-teaser__over {
  margin: 0 0 0.5rem;
  padding: 0;
  font-family: var(--tz-font-body, 'Roboto', Arial, sans-serif);
  font-size: 0.8rem !important;
  line-height: 1.3 !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tz-color-primary, var(--tzkmp-gron));
}

body #page-container .tzkmp-teaser__rubrik {
  margin: 0 0 0.5rem;
  padding: 0;
  font-family: var(--tz-font-heading, 'Poppins', Arial, sans-serif);
  font-weight: 600;
  font-size: clamp(1.35rem, 1rem + 1vw, 2rem);
  line-height: 1.2;
  color: var(--tz-color-primary, var(--tzkmp-gron));
}

body #page-container .tzkmp-teaser__ingress {
  margin: 0 0 1.1rem;
  padding: 0;
  max-width: 60ch;
  font-size: 16px !important;
  line-height: 1.55 !important;
  color: var(--tzkmp-svag);
}

body #page-container a.tzkmp-teaser__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

body #page-container a.tzkmp-teaser__cta::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 16px;
}

body #page-container a.tzkmp-teaser__cta:focus-visible {
  outline: none;
}

/* Från 700 px ligger bilden till vänster. Den är absolut positionerad så att
   det är TEXTEN som bestämmer höjden — annars drar bildens egna proportioner
   upp ytan till premiumbannerns höjd (uppmätt 450 px vid 1920 i första
   versionen). Nu blir ytan ungefär hälften så hög som premiumbannern. */
@media (min-width: 700px) {
  body #page-container .tzkmp-teaser__yta {
    grid-template-columns: minmax(0, 40%) minmax(0, 1fr);
  }

  body #page-container .tzkmp-teaser__bild {
    position: relative;
    min-height: 220px;
  }

  body #page-container .tzkmp-teaser__bild img {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
  }

  body #page-container .tzkmp-teaser__text {
    padding: clamp(1.25rem, 0.5rem + 1.2vw, 2rem) clamp(1.5rem, 0.5rem + 2vw, 3rem);
  }
}

/* -------------------------------------------------------------------------
   Pass 121 — startsidans bilddrivna teaser (`.tzkmp-teaser--bild`)

   Före: 40 % bild och en 1 037 px bred textyta vid 1920, där innehållet
   använde ungefär hälften och resten var tom grön yta. Nu får bilden den
   visuella vikten och innehållet ligger i en smal spalt till höger:

     från 1200 px   2/3 bild + 1/3 innehåll
     900–1199 px    3/5 bild + 2/5 — rubriken behöver plats
     700–899 px     hälften var
     under 700 px   staplat: bild, innehåll, knapp

   Höjden bestäms fortfarande av texten (bilden är absolut positionerad från
   700 px, se ovan), så bannern blir inte högre av att bilden blir bredare.
   Rubriken är något mindre än i den breda varianten så att den ryms på en
   rad i den smala spalten vid 1920.

   Bara startsidan: klassen sätts i tz_kampanj_teaser() när yta="startsida".
   Premiumresors teaser är orörd.
   ---------------------------------------------------------------------- */

body #page-container .tzkmp-teaser--bild .tzkmp-teaser__bild {
  position: relative;
}

/* Den breda spalten beskär bilden panoramiskt. Med standardcentrering föll
   fartyget — motivets fokuspunkt — ur bild vid 1440 och 1920. */
body #page-container .tzkmp-teaser--bild .tzkmp-teaser__bild img {
  object-position: 50% 62%;
}

body #page-container .tzkmp-teaser--bild .tzkmp-teaser__rubrik {
  font-size: clamp(1.35rem, 0.9rem + 0.8vw, 1.65rem);
}

body #page-container .tzkmp-teaser--bild .tzkmp-teaser__ingress {
  margin-bottom: 1rem;
  font-size: 15px !important;
}

@media (min-width: 700px) {
  body #page-container .tzkmp-teaser--bild .tzkmp-teaser__yta {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  body #page-container .tzkmp-teaser--bild .tzkmp-teaser__bild {
    min-height: 240px;
  }

  body #page-container .tzkmp-teaser--bild .tzkmp-teaser__text {
    padding: clamp(1.25rem, 0.5rem + 1.2vw, 2rem) clamp(1.25rem, 0.5rem + 1.4vw, 2.5rem);
  }
}

@media (min-width: 900px) {
  body #page-container .tzkmp-teaser--bild .tzkmp-teaser__yta {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  }
}

@media (min-width: 1200px) {
  body #page-container .tzkmp-teaser--bild .tzkmp-teaser__yta {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  }

  body #page-container .tzkmp-teaser--bild .tzkmp-teaser__bild {
    min-height: 260px;
  }
}

@media (min-width: 1440px) {
  body #page-container .tzkmp-teaser--bild .tzkmp-teaser__bild {
    min-height: 280px;
  }
}

/* Markeringen på bilden. Samma familj som resekortens etikett
   (`.tz-card__etikett` i style.css): mörk, lätt genomskinlig platta, liten
   spärrad versal, radie 5 px. Något större här eftersom bilden är det, och
   med klockikonen som perioden redan använder. Uppe till vänster, där
   motivet är himmel och fjäll — fartyget och fjorden ligger nere i mitten.

   Ingen nedräkning. Slutdatumet står i ingressen; "X dagar kvar" kräver
   ett eget beslut (se pass 121, avsnitt om framtida nedräkning). */
body #page-container .tzkmp-teaser__markering {
  position: absolute;
  top: clamp(12px, 0.5rem + 0.5vw, 20px);
  left: clamp(12px, 0.5rem + 0.5vw, 20px);
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px 8px 10px;
  border-radius: 5px;
  background: rgba(38, 33, 28, 0.88);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  color: #ffffff;
  font-family: var(--tz-font-body, 'Roboto', Arial, sans-serif);
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  pointer-events: none;
}

body #page-container .tzkmp-teaser__markering .tzkmp__ikon {
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  vertical-align: 0;
}

/* -------------------------------------------------------------------------
   Pass 99 — kampanjen på resans egen sida

   Ligger sist i mallens "Resan i korthet"-kolumn, som är ett rutnät med
   ikonspår och textspår — rutan spänner över båda. Samma tokens som korten
   på ytorna, men lugnare: ingen bild som standard (hjälten har redan en),
   en tunn guldram i stället för skugga, villkoren utfällbara.
   ---------------------------------------------------------------------- */

body #page-container .tzkmp-resa {
  grid-column: 1 / -1;
  margin: 10px 0 0;
  padding: 22px 22px 20px;
  background: var(--tzkmp-panel);
  border: 1px solid rgba(140, 106, 56, 0.35);
  border-radius: 14px;
}

body #page-container .tzkmp-resa__bild {
  margin: -22px -22px 18px;
  line-height: 0;
  border-radius: 14px 14px 0 0;
  overflow: hidden;
}

body #page-container .tzkmp-resa__bild img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

body #page-container .tzkmp-resa__etiketter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
}

body #page-container .tzkmp-resa .tzkmp__utvald { margin: 0; }

body #page-container .tzkmp-resa__badge {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--tzkmp-guld);
  color: #fff;
  font-family: 'Poppins', Arial, sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
}

body #page-container .tzkmp-resa__rubrik {
  margin: 0 0 10px;
  padding: 0;
  font-family: 'Poppins', Arial, sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--tzkmp-text);
}

body #page-container .tzkmp-resa .tzkmp__pris { margin: 0 0 6px; }

body #page-container .tzkmp-resa .tzkmp__period { margin: 0 0 12px; }

body #page-container .tzkmp-resa__villkor {
  margin: 0 0 16px;
  padding: 10px 0 0;
  border-top: 1px solid var(--tzkmp-linje);
  font-size: 14px;
  line-height: 1.55;
  color: var(--tzkmp-svag);
}

body #page-container .tzkmp-resa__villkor summary {
  cursor: pointer;
  font-weight: 500;
  color: var(--tzkmp-text);
}

body #page-container .tzkmp-resa__villkor summary:focus-visible {
  outline: 2px solid var(--tzkmp-gron);
  outline-offset: 3px;
  border-radius: 4px;
}

body #page-container .tzkmp-resa__villkor p {
  margin: 8px 0 0;
  padding: 0;
}

/* I rutan ska perioden och villkoren vara finstilta. !important krävs: temats
   oversionerade style.css har en global regel p { font-size: 1.2em !important },
   som annars ger 19,2 px här. Avgränsat till rutan. */
body #page-container .tzkmp-resa .tzkmp__period,
body #page-container .tzkmp-resa__villkor p {
  font-size: 14px !important;
  line-height: 1.45 !important;
}