/* =========================================================================
   TZ_RELATERADE_RESOR — moderna resekort i en relationssektion
   Pass 93, 2026-09-27

   BAKGRUND
   Landsidornas sektion "Resor" renderade fram till pass 93 en egen, äldre
   kortkomponent: kvadratiska bakgrundsbilder, Marcellus och Montserrat,
   VERSALER och en orange knapp (#E64E0A med #B10000-ram). Den var en hel
   designgeneration efter resekorten på /resor/.

   Fixen är inte en ny komponent utan en shortcode mindre:

     före   [zmart_resor resor="land_resor"]
     efter  [tz_resekort_grid field="land_resor" visa_filter="0" antal="12"]

   `tz_resekort_grid` kunde redan läsa ett ACF-relationsfält på den aktuella
   posten, behålla den manuellt valda ordningen, utesluta den egna posten
   och bara ta publicerade resor. Relationslogiken är alltså oförändrad —
   bara presentationen är ny.

   VARFÖR DEN HÄR FILEN BEHÖVS ÄNDÅ
   Samma rutnät används på /resor/, och där bär det arkivsidans egna
   utsmyckning: en vit fullbreddsremsa (`box-shadow: 0 0 0 100vw #fff`),
   36 px topp- och 72 px bottenpadding, och en `:has()`-regel i style.css
   rad 4090 som nollar sektionens bottenpadding. Uppmätt på Riga innan den
   här filen fanns: vit remsa tvärs över sidan och `padding-bottom: 0` på
   sektionen.

   Den utsmyckningen hör hemma på arkivet, inte i en relationssektion.
   Markupen får därför ett eget fäste — `.tz-relaterade-resor` sätts i
   layouten runt shortcoden — och reglerna nedan tar bort arkivchromet just
   där. Inget på /resor/ berörs.
   ========================================================================= */

/* -- 1. Av med arkivets utsmyckning ------------------------------------ */

body #page-container .tz-relaterade-resor .tz-resekort-grid {
  background: none;
  box-shadow: none;
  clip-path: none;
  padding: 0;
}

/* style.css rad 4090 nollar sektionens bottenpadding så att arkivets vita
   remsa ska sluta exakt vid sista kortraden. I en relationssektion finns
   ingen remsa, och då blev sektionen klistrad mot nästa. En klass till i
   kedjan vinner över den regeln. */
body #page-container .et_pb_section:has(.tz-relaterade-resor) {
  padding-bottom: 54px !important;
}

/* -- 2. Få resor ska inte sträckas ut ---------------------------------- */
/* Rutnätet använder `auto-fill`, så ETT kort behåller redan sin normala
   bredd i stället för att fylla raden — uppmätt 327 px på Riga. Det som
   saknas är balansen: rubriken "Resor" är centrerad, och ett ensamt kort
   längst till vänster under den ser oavsiktligt ut.

   Vid ett, två eller tre kort får rutnätet därför exakt så många spår som
   det finns kort, och gruppen centreras. Fyra eller fler får `auto-fill`
   sköta sitt precis som på /resor/.

   `:has(> :last-child:nth-child(N))` betyder "sista barnet är också det
   N:te" — alltså exakt N barn. Samma räknesätt som bloggkorten i pass 85. */

body #page-container .tz-relaterade-resor .tz-resekort-grid:has(> :last-child:nth-child(1)),
body #page-container .tz-relaterade-resor .tz-resekort-grid:has(> :last-child:nth-child(2)),
body #page-container .tz-relaterade-resor .tz-resekort-grid:has(> :last-child:nth-child(3)) {
  justify-content: center;
}

body #page-container .tz-relaterade-resor .tz-resekort-grid:has(> :last-child:nth-child(1)) {
  grid-template-columns: minmax(270px, 327px);
}

body #page-container .tz-relaterade-resor .tz-resekort-grid:has(> :last-child:nth-child(2)) {
  grid-template-columns: repeat(2, minmax(270px, 327px));
}

body #page-container .tz-relaterade-resor .tz-resekort-grid:has(> :last-child:nth-child(3)) {
  grid-template-columns: repeat(3, minmax(270px, 327px));
}

/* Under 1080 px får korten ta den plats som finns — annars blir tre
   kapade spår smalare än skärmen. */
@media (max-width: 1080px) {
  body #page-container .tz-relaterade-resor .tz-resekort-grid:has(> :last-child:nth-child(3)) {
    grid-template-columns: repeat(2, minmax(270px, 1fr));
  }
}

@media (max-width: 760px) {
  body #page-container .tz-relaterade-resor .tz-resekort-grid:has(> :last-child:nth-child(2)),
  body #page-container .tz-relaterade-resor .tz-resekort-grid:has(> :last-child:nth-child(3)) {
    grid-template-columns: minmax(0, 1fr);
  }

  body #page-container .tz-relaterade-resor .tz-resekort-grid:has(> :last-child:nth-child(1)) {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* -- 3. Inga publicerade resor - ingen sektion (pass 100) ---------------- */
/* `tz_resekort_grid` returnerar en tom sträng när relationsfältet bara pekar
   på arkiverade eller dolda resor. Omslaget ovan ligger i layouten, så kvar
   blev en tom `.tz-relaterade-resor` och rubriken "Resor" utan kort under -
   uppmätt 207 px på Italien och USA. TZ_TOMMA_SEKTIONER i style.css fångar
   inte fallet, eftersom den bara reagerar på `.zmart-resor-tom`.

   Regeln utgår från innehållet, inte från fälten: sektionen syns så länge
   minst ett resekort faktiskt renderats. Vilka resor som kvalificerar avgörs
   som förut av griden. */
body #page-container .et_pb_section:has(.tz-relaterade-resor):not(:has(.tz-resekort-grid__cell)) {
  display: none !important;
}