/* =========================================================================
   TZ_BLOGGKORT — karuseller med få kort ska inte sträckas (pass 85)

   PROBLEMET, UPPMÄTT PÅ /land/mauritius/
   Bloggsektionen renderas av [zmart_carousel field="land_inlagg"
   theme="pages"]. Komponenten sätter `data-num-visible` till antalet kort
   och låter korten dela hela innehållsbredden. Med ett enda blogginlägg blev
   kortet därför 1 715 px brett — hela innehållsytan — mot 307 px när samma
   komponent visar fem kort på /land/tanzania/.

   Ett kort ska inte växa bara för att det är ensamt.

   VARFÖR EN EGEN FIL OCH INTE style.css
   style.css är 176 KB och har aldrig varit versionshanterad. Regeln bor här
   i stället, där den går att läsa i en diff. Filen köas efter temats
   style.css och vinner därför på laddningsordning vid samma specificitet.

   VARFÖR `:not([tin-slide-break-point="900"])`
   style.css har redan en egen kapning för just de instanserna:

       .zmart-carousel[tin-slide-break-point="900"][data-theme=pages][data-num-visible="1"],
       .zmart-carousel[tin-slide-break-point="900"][data-theme=pages][data-num-visible="3"]
       { max-width: 900px; margin-left: auto; margin-right: auto; }

   De sitter i ett smalare sammanhang och är redan lösta. Att skriva över dem
   här hade gjort tre kort BREDARE än i dag. Den här filen rör därför bara de
   instanser som saknar kapning — i praktiken brytpunkt 1400, som är den
   bloggsektionen på land- och temasidorna använder.

   GENERISKT, INGEN SIDSPECIFIK REGEL. Urvalet är `data-num-visible`, inte
   ett sid-ID. Mauritius är bara det exempel felet upptäcktes på.

   UTÖKAD I PASS 113 (2026-09-30) TILL ÄVEN `theme="cards"`.
   Filnamnet säger bloggkort, men rubriken ovan har alltid beskrivit det
   verkliga ansvaret: *karuseller med få kort ska inte sträckas*. Pass 85
   löste det bara för `theme="pages"`; samma fel fanns kvar i resekortens
   `theme="cards"`. Båda bor nu här, i samma mekanik. Ett filnamnsbyte hade
   krävt att även `inc/tz-bloggkort.php` och dess `require` i tz-header.php
   följde med — mer yta än rättningen är värd.
   ========================================================================= */

:root {
  /* Den etablerade kortstorleken. Uppmätt på /land/tanzania/ där samma
     komponent visar fem kort: 307 px kort och cirka 40 px mellanrum.
     Ändra här om kortstorleken ska ändras — 1, 2 och 3 följer med. */
  --tzbk-kort: 320px;
  --tzbk-gap: 40px;
}

body #page-container .zmart-carousel[data-theme="pages"]:not([tin-slide-break-point="900"])[data-num-visible="1"],
body #page-container .zmart-carousel[data-theme="pages"]:not([tin-slide-break-point="900"])[data-num-visible="2"],
body #page-container .zmart-carousel[data-theme="pages"]:not([tin-slide-break-point="900"])[data-num-visible="3"] {
  margin-left: auto;
  margin-right: auto;
}

body #page-container .zmart-carousel[data-theme="pages"]:not([tin-slide-break-point="900"])[data-num-visible="1"] {
  max-width: var(--tzbk-kort);
}

body #page-container .zmart-carousel[data-theme="pages"]:not([tin-slide-break-point="900"])[data-num-visible="2"] {
  max-width: calc(2 * var(--tzbk-kort) + var(--tzbk-gap));
}

body #page-container .zmart-carousel[data-theme="pages"]:not([tin-slide-break-point="900"])[data-num-visible="3"] {
  max-width: calc(3 * var(--tzbk-kort) + 2 * var(--tzbk-gap));
}

/* INGEN REGEL OM BILDFÖRHÅLLANDE HÄR.
   style.css rad 4495 sätter `aspect-ratio: auto !important` på just
   `.zmart-carousel[data-theme=pages] img`. Det är ett medvetet beslut från
   bildarbetet i pass 62–64: bilderna ska behålla sin egen proportion. En
   regel härifrån hade varit död kod bakom ett !important, och om den ändå
   hade vunnit hade den brutit mot det beslutet. Bredden kapas — proportionen
   rörs inte. */

/* =========================================================================
   AVSLUTANDE LUFT FÖRE SIDFOTEN (pass 88)

   Bloggsektionen är sista sektionen i Theme Builder-kroppen på tema- och
   landsidor. Den har samma 54 px sektionspadding som alla andra sektioner,
   vilket uppmätt ger exakt 54 px mellan kortets underkant och sidfotens
   överkant. Som SISTA sektion läser det som att korten ligger på sidfoten.

   Regeln är generisk: den letar inte efter en sida utan efter en sista
   sektion som innehåller en pages-karusell. `:has()` stöds i alla aktuella
   webbläsare; faller det bort får sidan sin gamla padding, inte ett fel.
   ========================================================================= */
body #page-container .et_pb_section:last-child:has(.zmart-carousel[data-theme="pages"]) {
  padding-bottom: clamp(3.5rem, 2rem + 4vw, 6rem) !important;
}

/* Under den etablerade kortbredden ska kortet få ta den plats som finns.
   Annars blir ett kapat kort smalare än skärmen på en telefon. */
@media (max-width: 420px) {
  body #page-container .zmart-carousel[data-theme="pages"]:not([tin-slide-break-point="900"])[data-num-visible="1"],
  body #page-container .zmart-carousel[data-theme="pages"]:not([tin-slide-break-point="900"])[data-num-visible="2"],
  body #page-container .zmart-carousel[data-theme="pages"]:not([tin-slide-break-point="900"])[data-num-visible="3"] {
    max-width: 100%;
  }
}

/* =========================================================================
   TZ_RESEKORTSKARUSELL — samma fel, samma lösning, för resekorten
   Pass 113, 2026-09-30

   PROBLEMET, UPPMÄTT PÅ /tema/evenemangsresor/
   Temamallens sektion "Resor" renderas av
   [zmart_carousel field="tema_resor" theme="cards"]. Evenemangsresor har en
   enda publicerad resa — ABBA Voyage — och kortet blev då **1 715 px** brett,
   hela innehållsytan, mot **327 px** när samma komponent visar fem kort på
   /tema/cityresor/ och på startsidan.

   Det är exakt samma fel som pass 85 rättade för `theme="pages"`. Den
   rättningen täckte medvetet bara pages; cards lämnades kvar.

   VARFÖR EN MAXBREDD PÅ BEHÅLLAREN OCH INTE PÅ KORTET
   TinSlide räknar kortbredden som `100% / numVisible` av behållaren och
   mäter dessutom sina egna brytpunkter mot BEHÅLLAREN, inte mot fönstret
   (js/script.js: 5 kort vid ≥1400, 4 vid ≥1200, 3 vid ≥600). Kapas
   behållaren faller allt annat ut av sig självt — kortet, mellanrummet och
   antalet synliga. Samma grepp som pages-blocket ovan.

   RÄCKVIDD: `theme="cards"` används på exakt två ställen — temamallen 384836
   (18 temasidor) och startsidan 391115. Inventerat 2026-09-30: ett enda
   levande enkortsfall, evenemangsresor. Kryssningsresor har också en enda
   resa men visar inte sektionen alls (`tema_visa_i_blickfang = 0`).
   Cityresor, weekendresor och startsidan har fem synliga och berörs inte —
   reglerna nedan gäller bara 1, 2 och 3.

   ANDRA KORTSYSTEM ÄR REDAN RÄTT och rörs inte: rutnätet
   `.tz-resekort-grid` använder `auto-fill`, så ett ensamt kort behåller sin
   spårbredd (uppmätt 452 px på /resor/ filtrerat till en träff), och
   landsidornas relationssektion fick sin egen balansering i pass 93
   (uppmätt 327 px på /land/polen/, ett kort, centrerat).
   ========================================================================= */

:root {
  /* Den etablerade kortstorleken för resekortskarusellen. Uppmätt på
     /tema/cityresor/ och startsidan, där samma komponent visar fem kort i en
     1 715 px bred behållare: 327 px kort och 20 px mellanrum — samma 20 px
     som `--tz-card-gap`. Ändra här om kortstorleken ska ändras; 1, 2 och 3
     följer med. */
  --tzrk-kort: 327px;
  --tzrk-gap: 20px;
}

body #page-container .zmart-carousel[data-theme="cards"][data-num-visible="1"],
body #page-container .zmart-carousel[data-theme="cards"][data-num-visible="2"],
body #page-container .zmart-carousel[data-theme="cards"][data-num-visible="3"] {
  margin-left: auto;
  margin-right: auto;
}

body #page-container .zmart-carousel[data-theme="cards"][data-num-visible="1"] {
  max-width: var(--tzrk-kort);
}

body #page-container .zmart-carousel[data-theme="cards"][data-num-visible="2"] {
  max-width: calc(2 * var(--tzrk-kort) + var(--tzrk-gap));
}

body #page-container .zmart-carousel[data-theme="cards"][data-num-visible="3"] {
  max-width: calc(3 * var(--tzrk-kort) + 2 * var(--tzrk-gap));
}

/* Mobilen behöver ingen kapning — där ger karusellen redan ett kort i full
   spaltbredd (uppmätt 247 px vid 390 px fönster, identiskt med
   flerkortsfallet på cityresor). Regeln finns för att kapningen aldrig ska
   göra kortet SMALARE än spalten på en smal skärm. */
@media (max-width: 420px) {
  body #page-container .zmart-carousel[data-theme="cards"][data-num-visible="1"],
  body #page-container .zmart-carousel[data-theme="cards"][data-num-visible="2"],
  body #page-container .zmart-carousel[data-theme="cards"][data-num-visible="3"] {
    max-width: 100%;
  }
}