/*
Theme Name: GO! Enköping
Template: Divi
Author: Zmart Webb & Reklam
Version: 5.12.3
Updated: 2026-09-14 05:00:00

*/

/* ==========================================================================
   GO! ENKÖPING DESIGN SYSTEM
   Ett centralt, återanvändbart designsystem byggt ovanpå Divi.
   Divi används som innehållsredigerare — layout, typografi, komponenter
   och färger styrs härifrån, inte via enskilda modulinställningar.

   ENHETSPRINCIP (uppdaterad):
   - Typografi anges i REM, aldrig px — respekterar användarens
     webbläsarinställningar och skalar korrekt vid textförstoring.
   - Storlekar som ska skära flytande mellan mobil och desktop anges med
     CLAMP() istället för fasta värden + många mediaqueries.
   - Mediaqueries används bara där clamp() inte räcker (grid-kolumner,
     innehållsbredd i procent) — aldrig för typografi eller spacing.
   - Fasta, små detaljer (börder på 1px, ikonstorlekar) får vara px
     då de är visuella detaljer, inte läsbarhet/layout-kritiska.

   Struktur i denna fil:
   1. VARIABLER      – färger, typsnitt (rem/clamp), spacing, breakpoints
   2. LAYOUT          – .go-section / .go-row / .go-container
   3. TYPOGRAFI       – .go-heading (h1–h4), .go-text
   4. KNAPPAR         – .go-button + varianter
   5. KORT            – .go-card, .go-icon-box, .go-interview, .go-partner
   6. GRID            – .go-grid, .go-columns
   7. RESPONSIVITET   – endast där clamp() inte räcker

   Uppdaterad: 2026-07-07
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. VARIABLER
   Alias mot Divis globala färger (gcid-*) så vi har ett stabilt eget API.
   Ändra ETT ställe här (eller i Divis Global Colors) för att ändra hela sajten.
   -------------------------------------------------------------------------- */
:root {
  /* Färger */
  --go-color-primary:    var(--gcid-primary-color, #0D3B77);   /* Mörkblå – huvudfärg */
  --go-color-secondary:  var(--gcid-secondary-color, #D9971E); /* Guld/orange – sparsam accent */
  --go-color-secondary-text: #8A5E00;
  --go-color-heading:    var(--gcid-heading-color, #0A2A57);
  /* Fargregel: brödtext ska ALDRIG använda Divis default-grå (#5A5A5A
     eller liknande ljusgrå). Standard är nästan-svart (#1A1A1A) om inte
     designreferensen uttryckligen visar en annan färg. Ändra via
     gcid-body-color (Divi Global Colors) — aldrig hårdkodat per modul. */
  --go-color-body:       var(--gcid-body-color, #1A1A1A);
  --go-color-link:       var(--gcid-link-color, #0D3B77);
  --go-color-bg-light:   #F4F7FB;
  --go-color-bg-white:   #FFFFFF;
  --go-color-hero-bg: #f9fafb;           /* hero-bakgrundsf\u00e4rg (gemensam f\u00f6r alla hero-sektioner) */
  --go-color-border:     #E7EAF0;
  --go-color-footer-bg:  #0B2C5A;
  --go-footer-heading-size: 1rem;        /* 16px \u2014 footer-kolumnrubrik (medvetet kompaktare \u00e4n H4-token) */
  --go-footer-text-size: 0.9375rem;      /* 15px \u2014 footer-br\u00f6dtext */
  --go-color-footer-text: #FFFFFF;       /* footer-text p\u00e5 m\u00f6rk bakgrund */
  --go-color-footer-muted: #B9C3D4;      /* d\u00e4mpad footer-text (copyright etc) */

  /* Typografi – REM som bas, CLAMP() för flytande skalning (16px = 1rem) */
  --go-font-heading: 'Poppins', sans-serif;
  --go-font-body:    'Inter', sans-serif;

  --go-h1-size: clamp(1.875rem, 1.4rem + 2vw, 2.75rem);     /* 30px → 44px */
  --go-h2-size: clamp(1.5rem, 1.25rem + 1.2vw, 1.875rem);   /* 24px → 30px */
  --go-h3-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.375rem);   /* 20px → 22px */
  --go-h4-size: clamp(1.0625rem, 1rem + 0.3vw, 1.125rem);   /* 17px → 18px */
  --go-card-title-size: 1.375rem; /* 22px - videokorttitel Hem (var 30px, minskad 2026-07-18) */
  --go-card-title-compact-size: 1.375rem; /* 22px \u2014 intervjukort i 4-kol rutn\u00e4t (smalare \u00e4n Hems videokort) */
  --go-card-label-size: 1.125rem; /* 18px - kortetikett, medvetet mindre an --h3 */
  --go-body-size: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem);  /* 16px → 17px */
  --go-body-line-height: 1.7em;

  --go-text-intro-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); /* 17px → 19px */
  --go-text-small-size: clamp(0.8125rem, 0.8rem + 0.1vw, 0.875rem); /* 13px → 14px */

  /* Layout */
  --go-content-width: 90%;   /* Kärnprincip: allt innehåll = 90% av viewport */
  --go-content-max-width: none; /* Ingen 1080px-spärr, någonsin */

  --go-section-padding-y: clamp(2.25rem, 1.5rem + 2.5vw, 3.75rem);          /* 48px → 90px */
  --go-section-padding-y-compact: clamp(1.5rem, 1.2rem + 1.2vw, 2.5rem); /* 36px → 60px */
  --go-row-gap: clamp(1.5rem, 1rem + 2vw, 2.5rem);                    /* 24px → 40px */
  --go-card-padding: clamp(1.375rem, 1.1rem + 1.2vw, 1.875rem);
  /* CTA-panel (.gorow-om-cta) \u2014 egen padding, medvetet rymligare an kort.
     Flytande sa panelen skalar mellan mobil och desktop utan mediafraga. */
  --go-cta-panel-padding-y: clamp(2rem, 1.5rem + 1.5vw, 3rem);      /* 32 \u2192 48px */
  --go-cta-panel-padding-x: clamp(1.375rem, 1rem + 1.5vw, 2.5rem);  /* 22 \u2192 40px */       /* 22px → 30px */

  --go-card-radius: 0.625rem;      /* 10px – visuell detalj, ok som rem ändå */
  --go-card-border: 1px solid var(--go-color-border); /* 1px = enhetens minsta enhet, aldrig rem */

  --go-icon-sm: 2.75rem;  /* 44px */
  --go-icon-md: 3.5rem;   /* 56px */
  --go-icon-lg: 4rem;     /* 64px */

  /* Brytpunkter (matchar Divis egna: tablet ≤980px, mobil ≤767px).
     Används numera ENDAST för saker clamp() inte klarar: grid-kolumner
     och innehållsbredds-procent. Typografi och spacing rör aldrig dessa. */
  --go-bp-tablet: 61.25rem; /* 980px */
  --go-bp-phone: 47.9375rem;
  /* Kort-effekter (Steg 1: tokeniserade från tidigare engångsvärden) */
  --go-card-shadow: 0 0.75rem 1.75rem rgba(13, 59, 119, 0.10);
  --go-transition-card: box-shadow 0.25s ease, transform 0.25s ease;
  --go-transition-base: all 0.25s ease;
  --go-card-lift: translateY(-0.125rem); /* 767px */
}

/* --------------------------------------------------------------------------
   2. LAYOUT — .go-section / .go-row / .go-container
   Kärnregeln som ersätter alla individuella width/max-width-inställningar.
   -------------------------------------------------------------------------- */

/* Sektion: styr vertikal rytm och bakgrund. Bredd hanteras av .go-row inuti. */
.go-section {
  padding-top: var(--go-section-padding-y);
  padding-bottom: var(--go-section-padding-y);
  box-sizing: border-box;
  width: 100%;
  position: relative;
}

/* Divi 5 laddar en dynamisk .et_pb_section{padding:4% 0} EFTER temats CSS, med samma specificitet \u2014 den vann d\u00e4rf\u00f6r \u00f6ver .go-section och gjorde att --go-section-padding-y aldrig syntes. H\u00f6jer specificiteten (body #page-container, samma m\u00f6nster som \u00f6vriga Divi-overrides i denna fil) s\u00e5 sektionsrytmen styrs av v\u00e5r token igen. */
body #page-container .go-section:not(.gosec-hero):not(.gosec-event-hero):not(.gosec-artikel-hero) {
  padding-top: var(--go-section-padding-y) !important;
  padding-bottom: var(--go-section-padding-y) !important;
}
.go-section--compact {
  padding-top: var(--go-section-padding-y-compact);
  padding-bottom: var(--go-section-padding-y-compact);
}
.go-section--light  { background-color: var(--go-color-bg-light) !important; }
.go-section--footer { background-color: var(--go-color-footer-bg) !important; }

/* Footer-typografi \u2014 egna rollklasser med footer-specifik storlek/f\u00e4rg
   (medvetet kompaktare + ljus text p\u00e5 m\u00f6rk footer-bakgrund). */
.go-footer-heading .et_pb_module_header {
  font-size: var(--go-footer-heading-size);
  font-weight: 700;
  color: var(--go-color-footer-text);
}
.go-footer-text {
  font-size: var(--go-footer-text-size);
  line-height: 1.5em;
  color: var(--go-color-footer-text);
}
.go-footer-text--muted {
  color: var(--go-color-footer-muted);
}

/* Rad: den centrala bredd-regeln. 90% av viewport, ingen maxbredd, centrerad. */
.go-row,
.go-container,
.go-row--contained {
  width: var(--go-content-width) !important;
  max-width: var(--go-content-max-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box;
}

/* Divi lägger en dold generisk standardpadding (27px topp/botten) på ALLA
   ".et_block_row"-element vid brett viewport (@media min-width:1350px),
   oavsett vad sektionen eller raden själv har satt. Detta är källan till
   återkommande "oförklarlig" extra luft ovan/under innehåll på breda
   skärmar. Rader ska enligt designsystemet ENDAST styra bredd — all
   vertikal spacing hör hemma i .go-section. Nollställer därför Divis
   dolda radpadding globalt, för alla brytpunkter, inte bara 1350px. */
.go-row,
.go-container,
.go-row--contained {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
@media (min-width: 1350px) {
  .go-row,
  .go-container {
    padding: 0 !important;
  }
}

/* --------------------------------------------------------------------------
   3. TYPOGRAFI — .go-heading / .go-text
   Konsekvent rubrikhierarki genom hela sajten. Allt i REM + CLAMP().
   -------------------------------------------------------------------------- */
.go-heading {
  font-family: var(--go-font-heading);
  color: var(--go-color-heading);
  font-weight: 700;
  line-height: 1.2em;
  margin: 0;
}
.go-heading--h1 { font-size: var(--go-h1-size); line-height: 1.15em; }
.go-heading--h2 { font-size: var(--go-h2-size); }
.go-heading--h3 { font-size: var(--go-h3-size); }
.go-heading--h4 { font-size: var(--go-h4-size); font-weight: 600; }

/* --------------------------------------------------------------------------
   3b. TYPOGRAFI — KLASSEN MÅSTE TRÄFFA DEN INRE RUBRIKTAGGEN (Divi 5)
   Divi 5 renderar en rubrikmodul som:
     <div class="... go-heading go-heading--hX">           (wrapper = klassen)
       <div class="et_pb_heading_container">
         <hN class="et_pb_module_header"> ... </hN>       (den riktiga taggen)
   Klasserna .go-heading--hX ovan sitter på WRAPPERN, så de styr inte
   själva rubriktaggen deterministiskt (Divis egen per-modul-CSS mot
   .et_pb_module_header vinner). Följande descendant-selektorer riktar
   typografin mot den inre taggen så klassystemet kan styra centralt och
   inline-typografi kan tas bort modul för modul. Bunden till Divis stabila
   klass .et_pb_module_header (inte h1..h6, inte instabila et_pb_heading_N-ID).
   Tillagt 2026-07-17 (steg 0, additivt — ändrar inget visuellt ännu).
   -------------------------------------------------------------------------- */
.go-heading .et_pb_module_header {
  font-family: var(--go-font-heading);
  color: var(--go-color-heading);
  font-weight: 700;
  line-height: 1.2em;
}
.go-heading--h1 .et_pb_module_header { font-size: var(--go-h1-size); line-height: 1.15em; }
.go-heading--h2 .et_pb_module_header { font-size: var(--go-h2-size); }
.go-heading--h3 .et_pb_module_header { font-size: var(--go-h3-size); }
.go-heading--h4 .et_pb_module_header { font-size: var(--go-h4-size); font-weight: 600; }

/* === KORTRUBRIK (rollklass) ===
   Rubriker inuti kort \u00e4r semantiskt H3 (de sitter under en H2-sektionsrubrik),
   men ska visuellt vara diskreta som den gamla H4-skalan. Semantiken styr
   HTML-taggen; denna klass styr utseendet. Anv\u00e4nds p\u00e5 kortrubriker i
   ikon-/kontakt-/social-/feature-kort. Token: --go-h4-size. Tillagd 2026-07-18. */
.go-heading--card .et_pb_module_header {
  font-size: var(--go-h4-size);
  font-weight: 600;
}

/* Korttitel — rollbaserad klass för titlar i kort (t.ex. intervju-/video-kort).
   Beskriver KOMPONENTENS ROLL, inte storleken. Används tillsammans med
   go-heading på en rubrikmodul; storleken är medvetet större än --h3 för att
   ge korttiteln visuell tyngd. Token: --go-card-title-size. Tillagt 2026-07-17. */
.go-card-title .et_pb_module_header {
  font-size: var(--go-card-title-size);
  line-height: 1.3em;
}

/* Kompakt korttitel \u2014 intervjukort i 4-kolumners rutn\u00e4t (Intervjuer). Egen storlek
   d\u00e5 dessa kort \u00e4r smalare \u00e4n Hems breda videokort. */
.go-card-title--compact .et_pb_module_header {
  font-size: var(--go-card-title-compact-size);
  line-height: 1.35em;
}

/* Intervjukort \u2014 kategori + datum (BEM-familj zmart-intervju-kort__*).
   Typografin flyttad hit fr\u00e5n inline s\u00e5 korten styrs centralt. */
.zmart-intervju-kort__kategori .et_pb_text_inner {
  font-size: var(--go-text-small-size);
  font-weight: 700;
  letter-spacing: 0.0625rem;
  text-transform: uppercase;
  color: var(--go-color-secondary-text);
}
.zmart-intervju-kort__datum .et_pb_text_inner {
  font-size: var(--go-text-small-size);
  color: #5A6B82;
}

/* Kortetikett - rollbaserad klass for mindre rubriker i ikon-/innehallskort
   (t.ex. 'Vart varfor'- och 'Det vi gor'-korten pa Om GO!). Beskriver KOMPONENTENS
   ROLL, inte storleken. Medvetet mindre an --h3 for att fungera som etikett i kort.
   Token: --go-card-label-size. Tillagt 2026-07-17. */
.go-card-label .et_pb_module_header {
  font-size: var(--go-card-label-size);
  font-weight: 600;
}

.go-text {
  font-family: var(--go-font-body);
  color: var(--go-color-body);
  font-size: var(--go-body-size);
  line-height: var(--go-body-line-height);
}
.go-text--small  { font-size: var(--go-text-small-size); line-height: 1.5em; }
.go-text--eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.03125rem; /* 0.5px */
  font-size: var(--go-text-small-size);
  font-weight: 600;
  color: var(--go-color-secondary-text);
}

/* --------------------------------------------------------------------------
   4. KNAPPAR — .go-button
   Speglar Divis globala knapp-presets så systemen aldrig kan divergera.
   -------------------------------------------------------------------------- */
.go-button {
  display: inline-block;
  font-family: var(--go-font-body);
  font-weight: 600;
  font-size: 0.9375rem; /* 15px */
  padding: 0.75rem 1.75rem; /* 12px 28px */
  border-radius: 0.375rem; /* 6px */
  text-decoration: none;
  transition: var(--go-transition-base);
  cursor: pointer;
}
.go-button--primary {
  background-color: var(--go-color-primary) !important;
  color: #FFFFFF !important;
  border: 2px solid var(--go-color-primary);
  border-color: var(--go-color-primary) !important;
  box-sizing: border-box;
}
.go-button--primary:hover {
  background-color: #FFFFFF !important;
  color: var(--go-color-primary) !important;
  border-color: var(--go-color-primary) !important;
}
/* "Bli partner"-knappen inverterad på uttrycklig önskan: grundläge är nu
   fyllt (orange bakgrund, vit text), hover blir vitt med orange text —
   motsatsen till standard-upplägget för övriga knappar. Samma transition
   som övriga knappar på sajten (0.25s ease, redan satt på basklassen
   .go-button). */
.go-button--secondary {
  background-color: var(--go-color-secondary) !important;
  color: var(--go-color-heading) !important;
  border: 2px solid var(--go-color-secondary);
  border-color: var(--go-color-secondary) !important;
  box-sizing: border-box;
}
.go-button--secondary:hover {
  background-color: #FFFFFF !important;
  color: var(--go-color-secondary-text) !important;
  border-color: var(--go-color-secondary) !important;
}
/* Divis preset (64aeb972) sätter transparent bakgrund på grundläget med
   hög specificitet (samma mönster som orsakat flera tidigare buggar i
   sessionen) — överträffar den här för både grundläge och hover, samt
   låser padding så samma dolda hover-skift-bugg som drabbat andra
   knappar inte kan uppstå här heller. */
body #page-container .et_pb_section .go-button--secondary {
  background-color: var(--go-color-secondary) !important;
  color: var(--go-color-heading) !important;
  border-color: var(--go-color-secondary) !important;
}
body #page-container .et_pb_section .go-button--secondary:hover {
  background-color: #FFFFFF !important;
  color: var(--go-color-secondary-text) !important;
  border-color: var(--go-color-secondary) !important;
  padding: 1rem 2.125rem !important;
}

/* --------------------------------------------------------------------------
   15. UNDERSIDA "Om GO! Enköping" — återanvänder homepage-klasser
   (.go-section/.go-row/.go-heading/.go-text/.go-card/.go-icon-box/
   .go-button/.gorow-hero-ctas/.gorow-card-header) rakt av. Endast några
   få nya, sidspecifika klasser behövs för saker som inte redan fanns:
   bildgrid och jämnt fördelade kort/funktionsrader.
   -------------------------------------------------------------------------- */
.goimg-om-hero {
  display: block;
  width: 100%;
  height: auto;
}
.gogrid-om-varfor img {
  display: block;
  width: 100%;
  height: 240px;
  object-fit: cover;
  border-radius: 8px;
}
.gorow-feature-item {
  display: flex !important;
  gap: 1rem;
}
.gorow-om-gor-cards {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 1rem !important;
  margin-top: 14px !important; /* samma värde som rubrik→text-avståndet i .gorow-om-varfor, för konsekvent vertikal rytm */
  align-items: stretch !important;
}
.gocard-om-gor {
  min-width: 0;
  text-align: center;
  margin-right: 0 !important; /* Divis inbyggda standard-CSS för 5-kolumnsrader (.et_block_row_5col > .et_pb_column_1_5) sätter margin-right:5.5% på udda kort (1,3,5) som en del av sin egen 2-per-rad-brytningsdesign. Kort 5 (sista) behöll därför ett osynligt "fantomutrymme" efter sig, vilket var den faktiska orsaken till att högerkanten inte linjerade — inte kortens bredd eller radens container. */
  background-color: var(--go-color-bg-light) !important;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
  padding: 24px 18px !important;   /* Om GO!-kort padding (egen, skiljer fr\u00e5n Partner-kort) */
}
.et_block_row_5col > .et_pb_column.gocard-om-gor {
  margin-right: 0 !important;
  width: 100% !important; /* fyller grid-cellen helt; nollställer Divis egen width:47.25% som annars får kortet att inte fylla sin cell */
  max-width: 100% !important;
  float: none !important;
}
.gocard-om-gor .go-icon-box {
  margin-left: auto !important;
  margin-right: auto !important;
  background-color: #FFFFFF !important;
}
/* Rubrik → text-avstånd: lagrade värden är identiska mellan alla fem
   korten, men genererades inkonsekvent av Divi (samma återkommande
   enkelsidig-marginal-bugg som setts på flera andra ställen). Låser
   därför explicit i CSS så samtliga fem garanterat blir identiska. */
body #page-container .et_pb_section .gocard-om-gor .go-heading--h3 {
  margin-top: 14px !important;
  margin-bottom: 0 !important;
}
body #page-container .et_pb_section .gocard-om-gor .go-text--small {
  margin-top: 8px !important;
}

/* CTA-sektionen "Vill du vara med och göra skillnad?": samma rubrik→text-
   avstånd (14px) som resten av sajtens standardkomponent, garanterat via
   klass eftersom Divi ibland inte genererar CSS för enkelsidiga
   marginalvärden (samma mönster som setts på flera andra ställen). */
body #page-container .et_pb_section .gorow-om-cta .go-heading--h2 {
  margin-bottom: 0 !important;
}
body #page-container .et_pb_section .gorow-om-cta .go-text--small {
  margin-top: 14px !important;
}

/* Knappgruppen i CTA-panelen ("Vill du också bli partner?" m.fl.):
   högerkolumnen är en Divi-flexkolumn, men Divis kolumner använder
   flex-direction:column som standard — samma återkommande mönster som
   redan lösts för header-CTA:n ovan. Det innebär att kolumnens egen
   justifyContent:flex-end (satt i Divi-modulen) styr den VERTIKALA axeln,
   inte den horisontella — det är i stället align-items som styr sidled,
   och den är satt till center. Därför hamnade knapparna centrerade i
   stället för högerställda. margin-left:auto på själva knapprads-
   wrappern är samma beprövade fix som för header-CTA:n: den konsumerar
   allt lediga utrymme i sidled och trycker knapparna till kolumnens
   högerkant (= panelens egen 40px-padding, alltså samma inre högerlinje
   som resten av panelens innehåll), utan att röra rubrik, brödtext,
   knappstorlek eller mellanrummet mellan knapparna. */
.gorow-om-cta 
/* Brödtexten i CTA-panelen: kolumnbredden (3_5) är densamma på båda
   sidorna, men utan en uttrycklig maxbredd flyter texten ända ut till
   kolumnens fulla bredd — vilket på "Om GO! Enköping" råkade se smalare
   ut bara för att just den texten hade en manuell radbrytning, inte för
   att kolumnen faktiskt var smalare. Låser en gemensam läsbar maxbredd
   här så båda sidor garanterat radbryter likadant, oavsett textlängd
   eller manuella radbrytningar i innehållet. */
.gorow-om-cta .go-text--small {
  max-width: 72ch; /* 60ch + 20% */
}

/* Startsidans hero: reserverar exakt samma vertikala utrymme som
   underrubriken "OM GO! ENKÖPING" tar på undersidan "Om GO! Enköping",
   utan att visa någon text — så att huvudrubriken (H1) hamnar på exakt
   samma vertikala position på båda sidorna. Samma header-komponent
   återanvänds rakt av, ingen speciallösning för startsidan. */
.go-text--eyebrow-spacer {
  visibility: hidden;
}

/* --------------------------------------------------------------------------
   18. HERO/HEADER-SEKTION — gemensam standardhöjd för hela sajten
   Alla sidor som återanvänder .gosec-hero (startsida, "Om GO! Enköping",
   och framtida undersidor) får automatiskt samma höjd via denna EN regel
   — ingen sidspecifik lösning. min-height (inte height) så längre
   innehåll fortfarande får plats utan att layouten går sönder.
   HISTORIK (2026-08-05): Divi-modulen satte tidigare ett per-instans
   minHeight på 560px per sektion, och CSS här beskrevs som en
   överstyrning av det. Det värdet finns inte längre på NÅGON av de sju
   sidor som använder .gosec-hero — det försvann när hero-strukturen
   klonades från Om GO! som master. Höjden styrs alltså numera ENBART
   härifrån. */
/* ROTORSAK (bekräftad via mätning): min-height tillåter sektionen att
   VÄXA förbi 70vh när innehållet behöver mer plats — och det gör det på
   startsidan, eftersom dess ingress medvetet har större typsnitt än på
   "Om GO! Enköping". Därför renderades sidorna med olika höjd (659px vs
   644px) trots identisk komponent. Lösning: strikt height (inte bara
   min-height) på desktop, så höjden är en ren viewport-beräkning helt
   oberoende av innehållsmängd. min-height behålls som fallback. */
/* ==========================================================================
   HERO-KOMPONENT — gemensam för Hem, Om GO! Enköping och Partner.

   Alla tre sidorna använder nu EXAKT samma Divi-struktur (klonad från
   Om GO! Enköping som master): samma sektion, rad, kolumner, modulordning
   och samma modulmarginaler (H1: 15px, brödtext: 16px, knapprad: 26px).
   Endast textinnehållet skiljer.

   Därför behövs bara TVÅ saker här:
     1. gemensam höjd (min-height)
     2. knappförankring mot nederkanten (flex + margin-top:auto)

   All övrig spacing kommer från den delade Divi-strukturen — inga
   sidunika CSS-korrigeringar behövs.
   ========================================================================== */
.gosec-hero {
  background-color: var(--go-color-hero-bg);
  /* Gemensam höjd för alla sju hero-sidor: innehållet (eyebrow/H1/brödtext)
     ligger upptill och knappraden förankras mot botten via margin-top:auto i
     innehållskolumnen. Sex av sju sidor har kortare innehåll än de 509px som
     ryms här och blir därför exakt 780px — knappraden hamnar på samma
     vertikala position när man klickar sig mellan dem.

     MIN-HEIGHT OCH INTE HEIGHT (2026-08-05). height är både golv OCH TAK.
     Taket gjorde att Om GO! — som har 346 tecken hero-text mot 275 för
     näst längsta sidan — späckade ut knappraden nedanför sektionen och
     överlappade nästa sektion i intervallet 1024–1280px, där kolumnen är
     smal och texten radbryter kraftigt. Brytpunkten där taket släpptes låg
     på 64rem och täckte alltså inte det intervallet.

     Med min-height kan sektionen ALDRIG överflöda, på någon bredd. Priset
     är att Om GO! växer förbi 780px i smala vyer och därmed tappar
     linjeringen mot övriga sidor — en medveten avvägning: överflöd är ett
     fel, olinjerade knappar är en estetisk avvikelse på en enda sida.
     Återinför ALDRIG height här utan att först mäta Om GO! vid 1024px. */
  min-height: 780px !important;
  display: flex !important;
  align-items: stretch !important;
  padding-top: 215px !important;   /* kompenserar för fixed header + luft ovanför eyebrow. 185 -> 215 (2026-07-27): eyebrowen låg för nära sektionens överkant på desktop. */
  /* Luft under knappraden. 1.75rem (28px) var för knäppt — knappen låg
     nästan dikt mot sektionens nederkant, tydligast på sidor med två
     staplade knappar. Höjd till 3.5rem (56px) 2026-08-05.
     Desktop-höjden höjdes samtidigt 750 -> 780px, exakt de 28px som
     paddingen växte. Med box-sizing:border-box äter padding annars av
     innehållsytan inom den fasta höjden, och sidan med längst hero-text
     hade kunnat börja flöda över. Innehållsytan är nu 509px mot 507px
     tidigare — alltså oförändrad i praktiken.
     I tablet/mobil (height:auto) adderar paddingen bara höjd. */
  padding-bottom: 3.5rem !important;
  box-sizing: border-box !important; /* padding ska ingå i den strikta höjden, inte adderas till den */
}

/* Partner-sektioners bakgrunder \u2014 centraliserade till klass (token-styrda). */
.gosec-partners-huvud { background-color: var(--go-color-bg-light); }
.gosec-partners { background-color: var(--go-color-bg-white); }
.gosec-samarbete { background-color: var(--go-color-bg-light); }
.gosec-varfor-partner { background-color: var(--go-color-bg-white); }
.gosec-om-cta { background-color: var(--go-color-bg-white); }

/* Om GO!-sektioners bakgrunder \u2014 centraliserade till klass. */
.gosec-om-varfor { background-color: var(--go-color-bg-light); }
.gosec-om-gor { background-color: var(--go-color-bg-white); }
.gorow-hero {
  align-items: stretch !important;   /* överskriver Divis alignItems:center — kolumnen ska fylla höjden, inte centreras */
  /* VERKLIG ROTORSAK (2026-08-25, bekräftad i riktig webbläsarmotor — Chromium
     via Playwright, inte bara statisk CSS-analys): Divis EGEN basregel för
     klassiska (icke-flex) rader sätter margin:auto på alla fyra sidor
     (selektor: .et_pb_row:not([class*=et_flex_column]) ).
     Detta är avsett för horisontell centrering av raden i sektionen, men
     eftersom .gosec-hero nu är en flex-container (display:flex satt av oss)
     blir även margin-top/margin-bottom auto, och en flex-items
     AUTO-MARGINALER absorberar ALL ledig korsaxel-yta FÖRE
     align-items/align-self ens tillämpas — detta är inte en
     specificitetsfråga och även !important på align-items kan aldrig vinna
     mot motstående auto-marginaler. Det är därför både align-items:stretch
     här OVAN och align-self:stretch på kolumnen (se nedan) verifierat INTE
     räckte — raden centrerades vertikalt i sektionen med marginalerna som
     ventil, och mer innehåll (kortare marginal) fick radens topp att
     vandra uppåt — exakt mönstret som uppmättes i skärmdumparna.
     Åtgärd: nollställ de vertikala marginalerna explicit. Horisontell
     centrering påverkas inte — margin-left/right rörs inte här. */
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
/* Innehållskolumnen: flex-kolumn — förutsättning för att margin-top:auto på
   knappraden ska ha överskottshöjd att konsumera.
   HISTORIK (2026-08-25): 'height:100%' togs bort härifrån OCH från .gorow-hero
   ovan (2026-08-25). Båda var procentuella höjder mot en förfader vars EGEN
   höjd blir indefinit så fort en sidas hero-text överstiger min-height (se
   ROTORSAK-kommentaren i .gosec-hero) — då räknas 'height:100%' om till
   'auto' och kolumnen tappar sin sträckta höjd, vilket i sin tur gjorde att
   justify-content:flex-start saknade överskottsyta att förankra mot och
   hela innehållsblocket (eyebrow→knapprad) i praktiken centrerades i
   stället för att börja i toppen — bekräftat på Partner och Om GO!
   Enköping, vars hero-text är längst. Lösningen är TVÅDELAD:
     1. Kolumnen sträcks nu ENBART via native flex align-items:stretch
        (sätts på .gorow-hero ovan) i stället för en procentuell height —
        flexboxens egen sträckningsalgoritm ger ett definitivt värde för
        barnens procentberäkningar, till skillnad från en explicit
        height:100%-deklaration mot en indefinit förfader.
     2. Hero-kolumnen breddades (se avsnitt 16 nedan) så att ingen av de
        sju hero-sidornas text längre får sektionen att växa förbi
        min-height — då uppstår aldrig den indefinita höjden. Punkt 1 är
        kvarvarande skyddsnät om en framtida textändring ändå överskrider
        budgeten. */
.gorow-hero > .et_pb_column:first-child {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;   /* innehållet börjar alltid i toppen */
  align-self: stretch !important;   /* UPPFÖLJNING 2026-08-25: mätning av sex färska skärmdumpar visade att kolumnen ändå centrerades i .gorow-hero (identiskt topp- och bottenmellanrum krympande i takt med innehållsmängden) trots align-items:stretch på .gorow-hero — explicit align-self på kolumnen själv är den robusta åtgärden: den vinner alltid över ärvt align-items oavsett källa, så orsaken behöver inte vara fullt identifierad för att fixen ska vara korrekt. */
}
/* Knappraden förankras mot botten — identisk position på alla tre sidor,
   oavsett hur lång rubriken eller brödtexten är. */
.gorow-hero .gorow-hero-ctas {
  margin-top: auto !important;
}

/* Divi ger row-inner en PROCENTBASERAD padding:
     .et_pb_column_1_2 .et_pb_row_inner{padding:5.82% 0}  (0,2,0) i divi-dynamic
   Procent raknas pa elementets BREDD, inte hojd -> ~29,5px over OCH under
   knappraden vid ~507px bredd, och vardet skalar med fonsterbredden sa
   avstandet blir oforutsagbart mellan skarmstorlekar. Nollstalls har sa att
   .gosec-hero:s egen padding-bottom blir den ENDA kallan till avstandet
   under knapparna. Selektorn ar (0,3,0) och vinner pa specificitet --
   inget !important behovs. */
.gorow-hero .gorow-hero-ctas.et_pb_row_inner {
  padding-top: 0;
  padding-bottom: 0;
}

@media (max-width: 64rem) { /* tablet + iPad-landsk. (1024px): innehållet styr höjden */
  .gosec-hero {
    height: auto !important;
    /* GOLV, inte tak. height:auto ovan släpper det fasta desktop-taket så
       att innehållet får växa — det var fixen för 1024px-överflödet och
       ska vara kvar. min-height ger tillbaka ett golv, så att sektionen
       aldrig kollapsar när hero-texten är kort. Kritiskt eftersom
       hero-bilden är en BAKGRUNDSBILD (cover, right_center) och därmed
       saknar egen höjd — den ärver sektionens och beskars hårt vertikalt
       när sektionen blev bred och låg.
       Ersätter min-height:0, som skrevs för att neutralisera Divi-golvet
       ovan och därmed neutraliserade ingenting alls.
       Fluid: 480px på smala vyer, ~532px vid 1024px, tak 560px. */
    min-height: clamp(30rem, 52vw, 35rem) !important;
    padding-top: 150px !important;
  }
  .gorow-hero,
  .gorow-hero > .et_pb_column:first-child {
    height: auto !important;
  }
  .gorow-hero > .et_pb_column:first-child {
    display: block !important;
  }
  .gorow-hero .gorow-hero-ctas.et_pb_row_inner {
    padding-top: 1.5rem !important; /* aterinfor toppluft nar layouten staplas */
    padding-bottom: 0;
  }
}
@media (max-width: 47.9375rem) { /* mobil */
  .gosec-hero {
    height: auto !important;
    /* Samma golvprincip som tablet ovan. Lägre värden: kolumnerna staplas
       här, så innehållet överstiger oftast golvet ändå — golvet behövs
       för de sidor som har kort hero-text. */
    min-height: clamp(26rem, 60vw, 30rem) !important;
    padding-top: 135px !important;
  }
  .gorow-hero,
  .gorow-hero > .et_pb_column:first-child {
    height: auto !important;
  }
  .gorow-hero > .et_pb_column:first-child {
    display: block !important;
  }
  .gorow-hero .gorow-hero-ctas.et_pb_row_inner {
    padding-top: 1.5rem !important; /* aterinfor toppluft nar layouten staplas */
    padding-bottom: 0;
  }
}

/* --------------------------------------------------------------------------
   20. FIXED HEADER — grid-konsekvens mot scrollbaren
   När headern blev position:fixed (Divis sticky-lösning) började den
   mäta sin bredd mot HELA viewporten, medan övriga sektioner (normalt
   flöde) mäter mot innehållsytan (viewport minus scrollbar). Det gjorde
   att headerns 90%-centrerade rad hamnade några pixlar för långt åt
   höger jämfört med resten av sidans grid — inte ett fel i själva
   raden/kolumnfördelningen. scrollbar-gutter:stable reserverar
   scrollbar-utrymmet konsekvent för ALLT innehåll (både fixed och
   normalt flödande), så hela sajten återuppfår samma referensbredd. */
html {
  scrollbar-gutter: stable;
}

/* CTA-kolumnen i headern: Divis kolumner använder flex-direction:column
   som standard (byggda för att stapla moduler vertikalt), vilket innebär
   att align-items — inte justify-content — styr HORISONTELL positionering
   här. Säkerhetsregel utanför Divis egen generering: margin-left:auto på
   både knappens wrapper-div (den faktiska flex-barnet, samma mönster som
   upptäcktes för "Följ GO!"-pilarna tidigare) och länken själv, för
   garanterad högerjustering oavsett vilket element som är flex-barnet. */
.et_pb_column_1_tb_header .et_pb_button_module_wrapper,
.gomeny-header-cta {
  margin-left: auto !important;
}

/* Avstånd meny → CTA-knapp: att bredda menykolumnens Divi-data (3_4→5_6)
   fick oavsiktligt hela menygruppen att flytta åt vänster. Löser därför
   rent visuellt via flex-basis på raden: CTA-kolumnen krymper till exakt
   vad knappen behöver, menykolumnen får automatiskt övrigt utrymme.
   Divis lagrade kolumndata (3_4/1_4) rörs INTE. */
.et_pb_row_0_tb_header {
  display: flex !important;
}
.et_pb_row_0_tb_header > .et_pb_column_0_tb_header {
  flex: 1 1 auto !important;
  width: auto !important;
  max-width: none !important;
}
.et_pb_row_0_tb_header > .et_pb_column_1_tb_header {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
}

/* --------------------------------------------------------------------------
   19. STICKY HEADER — Divis inbyggda Sticky Options (Theme Builder),
   INTE egen JS. Konfigurerat direkt i Divi enligt Elegant Themes officiella
   metod (sektionens Scroll Effects-flik + sticky-läge på respektive
   modul). Divi hanterar både scroll-detektering och klasstoggling
   (.et_pb_sticky) helt självt:
   - Sektion: module.decoration.sticky (position:top, offset:0, transition:on)
   - Sektion: module.decoration.spacing sticky-läge (mindre padding)
   - Menymodul: logo.decoration.sizing sticky-läge (maxHeight 90px→72px,
     ≈ 20% mindre) — genererar Divis egen native CSS-regel automatiskt.
   Endast det Divi inte erbjuder nativt (mjuk skugga för djup) läggs till
   här som komplement. */
.et-l--header {
  transition: padding 0.3s ease, box-shadow 0.3s ease;
}
.et_pb_sticky.et_pb_section {
  box-shadow: 0 2px 12px rgba(13, 59, 119, 0.08);
}
/* (borttagen — ersätts av Grid-lösningen i hero-komponenten ovan) */
@media (max-width: 61.25rem) {
  .gorow-om-gor-cards { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .gogrid-om-varfor { flex-wrap: wrap; }
}
@media (max-width: 47.9375rem) {
  .gorow-om-gor-cards { grid-template-columns: 1fr !important; }
  .gorow-feature-item { flex-direction: column; }
  .gorow-om-cta,
  .gorow-om-cta.go-row,
  .gorow-om-cta.go-row--contained {
    /* Endast stapling pa mobil. Paddingen ar tokeniserad med clamp() pa
       toppniva och skalar redan flytande \u2014 ingen mobilspecifik padding behovs. */
    flex-direction: column;
    align-items: flex-start !important;
    gap: 1.5rem;
  }
}

/* --------------------------------------------------------------------------
   16. HERO-KOLUMNBREDD — delad mellan alla hero-sidor.
   Vänsterkolumnen (text) 50%, högerkolumnen (bara tonad gradient — ingen bild
   längre) 50%.
   HISTORIK (2026-08-25): breddad från 40/60 (tablet: 55/45) till 50/50
   (tablet: 62/38). Den ursprungliga 40/60-uppdelningen fanns för att låta en
   bakgrundsBILD synas i högerkolumnen — headern använder numera enbart en
   tonad färggradient där, så den kompositionella anledningen att hålla
   textkolumnen smal finns inte längre. Breddningen är också den huvudsakliga
   åtgärden mot ROTORSAKEN i avsnitt 18: vid 1024–1280px bröt Om GO!
   Enköpings text (längst av de sju sidorna) igenom min-height-golvet i den
   smala 40%/55%-kolumnen, vilket även flyttade eyebrow/rubrik uppåt (se
   förklaringen i avsnitt 18). Uppmätt vid 1024px br. med Om GO!s text: H1
   ~72 tecken får plats på 3 rader (tidigare 5) och ingressen på 5 rader
   (tidigare 7) i den nya 62%-kolumnen — totalt innehåll ~427px mot 509px
   tillgänglig höjd, dvs återigen inom min-height-golvet på samtliga sju
   sidor och breddpunkter. Ändras texten avsevärt längre i framtiden, mät om
   vid 1024px br. innan vidare justering.
   OBS: sätt INTE display:flex/grid på kolumnen här — den är redan
   display:flex (avsnitt 18 ovan). Endast BREDDEN styrs här; flex-basis
   fungerar ändå eftersom .gorow-hero är radens flex-container.
   -------------------------------------------------------------------------- */
.gorow-hero {
  display: flex !important;
}
.gorow-hero > .et_pb_column:first-child {
  flex: 0 0 50% !important;
  max-width: 50% !important;
}
.gorow-hero > .et_pb_column:last-child {
  flex: 0 0 50% !important;
  max-width: 50% !important;
}
@media (max-width: 64rem) { /* tablet + iPad-landsk. (1024px): mer utrymme för texten igen, bakgrunden bär fortfarande */
  .gorow-hero > .et_pb_column:first-child {
    flex: 0 0 62% !important;
    max-width: 62% !important;
  }
  .gorow-hero > .et_pb_column:last-child {
    flex: 0 0 38% !important;
    max-width: 38% !important;
  }
}
@media (max-width: 47.9375rem) { /* mobil: full bredd, staplat */
  .gorow-hero {
    flex-wrap: wrap;
  }
  .gorow-hero > .et_pb_column:first-child,
  .gorow-hero > .et_pb_column:last-child {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

/* --------------------------------------------------------------------------
   17. "Vårt varför" (Om GO! Enköping) — bildgalleri, kolumnbredd, avdelare
   -------------------------------------------------------------------------- */
.gorow-om-varfor {
  display: flex !important;
  gap: 2.5rem;
  align-items: center !important;
}
.gorow-om-varfor > .et_pb_column:first-child {
  flex: 0 0 46% !important;
  max-width: 46% !important;
}
.gorow-om-varfor > .et_pb_column:last-child {
  flex: 1 1 auto !important;
  max-width: none !important;
}
/* Tätare, sammanhållet bildgalleri — CSS Grid istället för flexbox+calc().
   Grid garanterar identiskt gap horisontellt och vertikalt utan
   avrundningsrisk, vilket flexbox+calc() visade sig vara känsligt för.
   Nollställer även all padding/margin på kolumn OCH bildmodul explicit,
   eftersom en dold källa till extra utrymme fortfarande syntes trots att
   ingen av dem hittades i den genererade CSS:en vid statisk granskning
   — säkrast att nollställa båda helt oavsett. */
.gogrid-om-varfor {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  row-gap: 0.5rem !important;
  column-gap: 0.75rem !important; /* något större än tidigare (0.5rem) för att visuellt matcha det vertikala avståndet mellan bildraderna, som upplevdes större */
  padding: 0 !important;
}
@media (min-width: 84.375rem) { /* 1350px — Divis dolda .et_block_row{padding:27px 0}-standard träffar även här */
  .gogrid-om-varfor {
    padding: 0 !important;
  }
}
.gogrid-om-varfor > .et_pb_column_inner {
  flex: none !important;
  max-width: none !important;
  width: auto !important;
  padding: 0 !important;
  margin: 0 !important;
}
.gogrid-om-varfor .et_pb_image {
  padding: 0 !important;
  margin: 0 !important;
}
.gogrid-om-varfor .et_pb_image_wrap {
  padding: 0 !important;
  margin: 0 !important;
  display: block !important;
}
.gogrid-om-varfor + .gogrid-om-varfor {
  margin-top: 0.75rem !important; /* matchar column-gap (0.75rem) för symmetriskt 2×2-grid */
}
.gogrid-om-varfor img {
  border-radius: 0.5rem !important;
}

/* "Vårt varför" — videothumbnails i stället för statiska bilder (2026-08-25).
   De fyra bilderna byttes mot riktiga YouTube-förhandsvisningar (samma fyra
   intervjuer som toppar /intervjuer/), länkade direkt till YouTube — precis
   som alla andra intervjulänkar på sajten (se go_intervju_content_card() i
   zmart-redaktion-bridge.php: "Intervjukorten pekar mot YouTube i stället
   för mot intervjuns egen sida", beslut med Pelle 2026-07-26). Ingen ny
   uppspelningslösning byggs alltså — samma mönster återanvänds.
   Ren CSS, ingen JS: play-ikonen är ett ::after på Divis egna
   .et_pb_image_wrap-omslag och kräver därför ingen egen wrapper-div.
   pointer-events:none på ikonen så hela klicket alltid når länken under.
   SVG-ikonen ("M8 5v14l11-7z") är samma play-triangel som redan används i
   zmart_redaktion_classes-filtret i zmart-redaktion-bridge.php. */
.govarfor-video-thumb .et_pb_image_wrap {
  position: relative;
  overflow: hidden;
}
.govarfor-video-thumb .et_pb_image_wrap::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background-color: var(--go-color-primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z' fill='white'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 55% 50%;
  background-size: 16px 18px;
  box-shadow: 0 2px 10px rgba(10, 42, 87, 0.35);
  pointer-events: none; /* klicket ska alltid nå länken, inte ikonen */
  transition: transform 0.15s ease;
}
.govarfor-video-thumb:hover .et_pb_image_wrap::after,
.govarfor-video-thumb:focus-within .et_pb_image_wrap::after {
  transform: translate(-50%, -50%) scale(1.08);
}
@media (max-width: 47.9375rem) {
  .govarfor-video-thumb .et_pb_image_wrap::after {
    width: 36px;
    height: 36px;
    background-size: 13px 15px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .govarfor-video-thumb .et_pb_image_wrap::after {
    transition: none;
  }
}

/* Rubrik → text-avstånd i vänsterkolumnen, samma princip som används på
   resten av sajten (se även "Vad är GO! Enköping?"-fixen på startsidan). */
.gorow-om-varfor .go-heading--h2 {
  margin-bottom: 0 !important;
}
.gorow-om-varfor > .et_pb_column:first-child > .go-text {
  margin-top: 14px !important;
}

/* Diskreta avdelare mellan funktionsrader höger kolumn — sista raden
   får ingen linje under sig för ett rent avslut. */
.gorow-feature-item {
  padding-bottom: 1.5rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--go-color-border);
  margin-top: 0 !important;
  gap: 0.5rem;
}
.gorow-feature-item > .et_pb_column_inner:first-child {
  flex: 0 0 auto !important;
  max-width: none !important;
  width: auto !important;
}
.gorow-feature-item > .et_pb_column_inner:last-child {
  flex: 1 1 auto !important;
  max-width: none !important;
  width: auto !important;
}
.gorow-feature-item .go-text--small {
  margin-top: 4px !important;
  max-width: 80%;
}
body #page-container .et_pb_section .gorow-feature-item .go-heading--card {
  margin-bottom: 0 !important;
}
body #page-container .et_pb_section .gorow-feature-item .go-text--small {
  margin-top: 4px !important;
}
.gorow-feature-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}

@media (max-width: 61.25rem) {
  .gorow-om-varfor {
    flex-wrap: wrap;
    gap: 2rem;
      align-items: stretch;
  }
  .gorow-om-varfor > .et_pb_column:first-child,
  .gorow-om-varfor > .et_pb_column:last-child {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}
.go-button--text {
  background: none;
  border: none;
  padding: 0;
  color: var(--go-color-primary) !important;
  font-weight: 600;
}
.go-button--text:hover { color: var(--go-color-secondary-text) !important; }

/* --------------------------------------------------------------------------
   5. KORT & KOMPONENTER
   -------------------------------------------------------------------------- */

/* Generellt kort (används av t.ex. "Var med i innehållet") */
.go-card {
  background-color: var(--go-color-bg-white);
  border: var(--go-card-border);
  border-radius: var(--go-card-radius);
  padding: var(--go-card-padding);
  box-sizing: border-box;
  transition: var(--go-transition-card);
}
.go-card:hover {
  box-shadow: var(--go-card-shadow);
  transform: var(--go-card-lift);
}

/* Ikon i cirkel/ruta – används av alla ikonmoduler på sajten */
.go-icon-box {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
.go-icon-box--white { background-color: var(--go-color-bg-white); }
.go-icon-box--square { border-radius: 0.5rem; } /* 8px */
.go-icon-box--sm { width: var(--go-icon-sm); height: var(--go-icon-sm); }
.go-icon-box--md { width: var(--go-icon-md); height: var(--go-icon-md); }
.go-icon-box--lg { width: var(--go-icon-lg); height: var(--go-icon-lg); }

/* Intervju-kort: badgen ("Intervju") ska ligga OVANPÅ bilden, inte ovanför
   den i dokumentflödet. Kolumnen blir positioneringsreferens; badgen tas
   ur flödet med position:absolute så bilden flyttar upp och fyller
   utrymmet, och badgen hamnar som en banderoll i bildens övre vänstra
   hjörn. Påverkar aldrig bildens egen höjd eller layout. */
.gocol-video-card {
  position: relative;
}
.gocol-video-card .golabel-badge {
  position: absolute !important;
  top: 18px;
  left: 18px;
  z-index: 2;
  margin: 0 !important;
  border-radius: 0.375rem !important; /* 6px — mjukare hörn */
  font-size: var(--go-text-small-size);
  font-weight: 600;
  color: #FFFFFF;
  text-align: center;
  padding: 6px 14px;
  background-color: var(--go-color-primary);
  width: 90px;
  box-sizing: border-box;
}
/* OBS: klassen "goimg-video-thumb" som tidigare skulle sitta på bilden
   gick förlorad i en tidigare redigering och renderas aldrig i HTML:en.
   Använder därför Divis egen garanterat närvarande wrapper-klass
   (.et_pb_image_wrap) för att rundade hörn + clipping alltid träffar rätt
   element, oavsett om en anpassad klass försvinner i framtida redigeringar. */
.gocol-video-card .et_pb_image_wrap {
  display: block;
  border-radius: var(--go-card-radius); /* 10px */
  overflow: hidden;
}
.gocol-video-card .et_pb_image_wrap img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--go-card-radius);
}
/* Divi har en global standardregel (.et_pb_module{margin-bottom:X%},
   procentbaserad och olika per brytpunkt) som läggs på ALLA moduler som
   inte uttryckligen nollställt den. Bildmodulen i intervjukorten hade
   aldrig fått den nollställd — det var den verkliga källan till det stora
   avståndet till titeln, inte bara row-inner-marginalen. */
.gocol-video-card > .et_pb_image {
  margin-bottom: 0 !important;
}

/* Titel + pil på samma rad ("Aktuellt just nu"). row-inner tvingas till
   flex med space-between så titeln får allt tillgängligt utrymme och
   pilen hamnar längst till höger, vertikalt centrerad mot texten. */
.gorow-video-title-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100%;
}

/* Ovre avstandet mellan videobilden och titeln.
   Divi satter padding pa row-inner fran TVA hall:
     .et_block_row {padding:27px 0}                              (0,1,0) i et-core-unified
     .et_pb_column .et_block_row.et_pb_row_inner {padding:30px 0} (0,3,0) i divi-dynamic
   Kolumnselektorn nedan ger 0,4,0 och vinner over bada pa ren
   specificitet - inget !important behovs. Endast padding-top nollstalls;
   padding-bottom (avstandet ned mot pilen) lamnas orort. */
.gocol-video-card .gorow-video-title-row.et_block_row.et_pb_row_inner {
  padding-top: 0.75rem; /* 12px */
}
.gorow-video-title-row > div:first-child {
  flex: 0 0 66% !important;
  max-width: 66% !important;
}
.gorow-video-title-row > div:last-child {
  flex: 0 0 auto !important;
  max-width: none !important;
  width: auto !important;
}

/* Hela titeln är nu länkad (inte bara pilen). Länken ska bete sig som ren
   text — ärvd färg, ingen understrykning, bara en subtil färgton vid hover.
   INGEN rörelse/animation, matchar principen för pilen intill. */
.gohl-video-title a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}
.gohl-video-title a:hover {
  color: var(--go-color-primary);
  text-decoration: none;
}

/* Pilen: något längre utan att rita om ikonen — skalar bara horisontellt.
   INGEN hover-effekt av något slag: varken rörelse, skalning, färg eller
   opacitet. Pilen ska bete sig som ett statiskt designelement. Basklassen
   .go-button--text ändrar färg på hover — överstyr därför explicit här
   så färgen är 100% identisk i båda lägena. transition:none
   förhindrar även en overksam färgövergång från att synas. */
.golink-video-arrow {
  display: inline-block;
  transform: scaleX(1.35);
  transition: none !important;
  color: var(--go-color-heading) !important;
}
.golink-video-arrow:hover {
  transform: scaleX(1.35) !important;
  color: var(--go-color-heading) !important;
  opacity: 1 !important;
}

/* --------------------------------------------------------------------------
   6. GRID
   -------------------------------------------------------------------------- */
.go-grid {
  display: grid;
  gap: var(--go-row-gap);
}
.go-columns--2 { grid-template-columns: repeat(2, 1fr); }
.go-columns--3 { grid-template-columns: repeat(3, 1fr); }
.go-columns--4 { grid-template-columns: repeat(4, 1fr); }

/* --------------------------------------------------------------------------
   7. RESPONSIVITET
   Typografi och spacing behöver INGA mediaqueries längre — clamp() sköter
   det flytande. Här hanteras bara det clamp() inte kan: grid-kolumner som
   måste byta antal, och innehållsbreddens procentsats.
   -------------------------------------------------------------------------- */
@media (max-width: 61.25rem) { /* 980px – tablet */
  :root {
    --go-content-width: 92%;
  }
  .go-columns--4 { grid-template-columns: repeat(2, 1fr); }
  .go-columns--3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 47.9375rem) { /* 767px – mobil */
  :root {
    --go-content-width: 94%;
  }
  .go-columns--4,
  .go-columns--3,
  .go-columns--2 { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   8. SEKTION "VAD ÄR GO! ENKÖPING?" — 5-kolumnsrad (rubrik + 4 ikonpunkter)
   Divi 5:s inbyggda "1_5" ger fem LIKA breda kolumner. Designen kräver att
   rubrikkolumnen är bredare än de fyra ikonkolumnerna, vilket Divis Färdiga
   kolumnstrukturer inte stöder — därför än minimal, riktad CSS-override här.
   Sektionens bakgrund är redan 100% bred via .go-section (ingen ändring
   behövs där) — detta gäller alltså bara kolumnbredderna INUTI .go-row.
   -------------------------------------------------------------------------- */
.gorow-vad-ar-icons,
.gorow-vad-ar {
  display: flex !important;
  flex-wrap: nowrap !important; /* absolut spärr — får ALDRIG radbrytas på desktop */
  gap: 0.75rem;
  /* Vertikal centrering av HELA punktblocket mot rubrikkolumnens innehåll.
     Samma princip som .gorow-om-varfor på Om GO! Enköping: raden har två
     flexbarn (rubrikkolumn + punktkolumn) som centreras mot varandra.
     Punkterna flyttas som ETT block — inte individuellt. */
  align-items: center !important;
}
.gocol-vad-ar-heading {
  flex: 0 0 32% !important;
  max-width: 32% !important;
  padding-right: 1.5rem;
  box-sizing: border-box;
}
/* Högerkolumnen: höljet runt de fyra punkterna. Tar resterande bredd. */
.gocol-vad-ar-items-wrap {
  flex: 1 1 auto !important;
  max-width: none !important;
  min-width: 0;
  box-sizing: border-box;
}
/* Punktraden inuti högerkolumnen — fyra jämnbreda celler.
   align-items:start låter punkterna linjera i TOPPEN mot varandra även om
   en av dem får färre textrader; det är blocket som helhet som centreras
   mot vänsterkolumnen, via .gorow-vad-ar ovan. */
.gorow-vad-ar-items {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 0.75rem !important;
  align-items: start !important;
  width: 100% !important;
  padding: 0 !important; /* nollställer Divis .et_block_row 27px */
}
.gocol-vad-ar-item {
  min-width: 0;
  width: 100% !important;
  max-width: 100% !important;
  margin-right: 0 !important; /* Divis 4-kolumnsrad sätter margin-right på udda kolumner */
  box-sizing: border-box;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important; /* Balanserar luft ovanför/under ikon+rubrik inom varje kort.
     Utan denna packas innehållet mot flex-start (standard), vilket lämnade
     osynligt tomrum under texten när .gorow-vad-ar-items align-items:start
     ger korten mer höjd än deras eget innehåll behöver (2026-07-25). */
  text-align: center;
}
.gocol-vad-ar-item .go-text--small {
  font-size: 17px !important;
  font-weight: 600 !important;
  text-align: center !important;
}
/* Ikon→rubrik-avstånd: Divis inbyggda .et_pb_column .et_pb_module
   { margin-bottom: 30px } slår igenom här eftersom kortets container
   bär Divis egen .et_pb_column-klass (inte .et_flex_column, som är
   det enda undantag Divi själv respekterar). Halverar till 15px enligt
   önskad kompaktering (2026-07-25). */
body #page-container .gocol-vad-ar-item .go-icon-box {
  margin-bottom: 15px !important;
}

/* "Var med i innehållet": ikon till vänster om rubriken (Blurb-layout)
   istället för staplat ovanpå. Flex garanterar vertikal centrering mellan
   ikon och rubrik oavsett radhöjd. */
.gorow-card-header {
  display: flex !important;
  align-items: center !important;
  gap: 1rem;
  margin-bottom: 0.5rem !important;
  padding: 0 !important;
}
.gorow-card-header > div:first-child {
  flex: 0 0 auto !important;
  width: auto !important;
}
.gorow-card-header > div:last-child {
  flex: 1 1 auto !important;
  width: auto !important;
  max-width: none !important;
}
.gorow-card-header .go-heading--card {
  margin: 0;
}

/* Länkarna inuti korten ("Läs mer...", "Tipsa om en gäst...", "Se partner-
   nivåer...") ska INTE ha egen hover-animation — bara kortet som helhet
   ska röra sig. Överstyr basklassens färgbyte på hover, låser transition
   till none. Länkarna förblir klickbara, bara visuellt stilla. */
.gocard-var-med .go-button--text,
.gocard-var-med .go-button--text:hover {
  color: var(--go-color-primary) !important;
  transition: none !important;
  text-decoration: none !important;
}

/* Samma dolda Divi-bugg som löstes för .go-button--lg tidigare finns även
   på "Textlänk"-presetet (653f66b2): en :hover-regel som lägger
   padding-right/left:1em, vilket fick texten att skifta i sidled vid hover
   — detta är den verkliga källan till rörelsen som synts kvar trots föregåående
   fix. Gäller ALLA .go-button--text-länkar på sajten (pilar i "Aktuellt
   just nu", "Följ GO!" m.fl.), inte bara den här sektionen — därför
   generell selector, samma mönster som för knapparna.
   OBS: första försöket hade EXAKT samma specificitet som Divis regel
   (1 ID + 3 klasser vardera) — vid oavgjort vinner senast laddade fil
   (Divis), inte vår. Lägger till klassen .go-button som en fjärde
   kvalificerare för att garanterat överträffa, inte bara matcha. */
body #page-container .et_pb_section .go-button.go-button--text,
body #page-container .et_pb_section .go-button.go-button--text:hover {
  padding: 0 !important;
}

.gocol-partner-logo {
  flex: 1 1 20% !important;
  max-width: 20% !important;
  padding: 1.75rem 1.25rem;
  box-sizing: border-box;
  display: flex !important;
  align-items: center;
  justify-content: center;
  border-right: 1px solid var(--go-color-border);
}
.gocol-partner-logo:last-child {
  border-right: none;
}

/* Legendraden ("⭐ Huvudpartner...") ska ligga centrerad under panelen.
   ROTORSAK (verifierad genom att inspektera hela DOM-kedjan Row → Column →
   Text → .et_pb_text_inner → p): text-align:center räckte inte eftersom
   själva textmodul-boxen är "shrink-wrapped" till sitt innehåll (Divi 5:s
   blockmoduler får ingen egen full-bredd-regel i den sidspecifika CSS:en
   — bredden styrs av innehållet, inte kolumnen). text-align på en box som
   redan bara är lika bred som sitt innehåll gör ingenting synligt.
   Lösning: tvinga modul-wrappern till full bredd + Flexbox för att
   centrera INNEHÅLLET som en enhet, oavsett boxens egen krympbeteende. */
.golegend-partners {
  display: flex !important;
  justify-content: center !important;
  width: 100% !important;
  margin-top: 1.25rem !important;
}
.golegend-partners .et_pb_text_inner,
.golegend-partners p {
  text-align: center !important;
  margin: 0;
}
/* Säkerhetsnät: om .et_pb_text_inner redan är full bredd (100%) fyller den
   upp hela flex-behållaren och justify-content:center får då inget
   utrymme att centrera inom (boxen är redan lika bred som föräldern).
   Tvingar den att krympa till sitt innehåll så flex-centreringen
   garanterat har något att faktiskt centrera. */
.golegend-partners .et_pb_text_inner {
  display: inline-block !important;
  width: auto !important;
  max-width: 100%;
}

/* Bekräftat via manuell test i Divi: display:flex satt DIREKT på själva
   modulen (inte bara via extern CSS-override) löser centreringen korrekt
   — satt nu både via Divis egen modulinställning (module.decoration.
   layout) OCH som redundant CSS-klass här, enligt önskat förslag. */
.partner-legend {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  font-size: var(--go-text-small-size);
  color: var(--go-color-body);
  text-align: center;
}

/* Rotorsak identifierad genom manuell test i Divi: det är RADEN (inte
   textmodulen) som behöver Layoutstil = Flex för att dess innehåll ska
   centreras. Satt nu både direkt på radmodulen i Divi (module.decoration.
   layout) OCH här som klass, enligt önskat tillvägagångssätt. */
.partner-logos-row {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

/* "Följ GO! Enköping"-korten: ikon till vänster om rubrik+text (samma
   mönster som "Var med i innehållet"), och pilen placerad nere till höger
   i kortet istället för ensam till vänster under texten. Kortet blir
   positioneringsreferens; pilen tas ur flödet så den inte påverkar
   kortets övriga höjd/layout, och matchar kortets egen padding
   (22px sido-padding, 24px botten-padding) för perfekt visuell marginal. */
.gocard-folj {
  position: relative;
  padding-bottom: 24px !important; /* extra rum så pilen aldrig överlappar texten */
}
/* ROTORSAK till att pilen inte hamnat rätt: Divi lägger in en EXTRA
   wrapper-div (.et_pb_button_module_wrapper) mellan själva <a>-länken och
   kortet. När position:absolute sättes på <a> positionerades den relativt
   den lilla wrappern (som sitter kvar i sitt ursprungliga flöde), inte
   relativt kortet — därför hamnade pilen för högt upp trots korrekt CSS.
   Lösning: positionera WRAPPERN (den faktiska direkta barnet till kortet)
   istället för länken själv. */
.gocard-folj .et_pb_button_module_wrapper {
  position: absolute !important;
  right: 1.5rem !important;  /* 24px */
  bottom: 1.5rem !important; /* 24px */
  left: auto !important;
  top: auto !important;
  margin: 0 !important;
}
.golink-social-arrow {
  position: static !important;
  align-self: flex-end !important;
  margin: 0 !important;
  margin-top: 1rem !important;
  font-size: 18px;
  font-weight: 700;
  color: var(--go-color-heading) !important;
  line-height: 1;
}
body #page-container .et_pb_section .gocard-folj .golink-social-arrow {
  position: static !important;
}

/* Pilarna ska INTE ha någon egen hover-effekt — bara kortet (lyft + skugga)
   ska animera. Låser färg och transition identiskt i båda lägena, samma
   överordnade specificitet som använts för motsvarande fix i "Var med i
   innehållet"-sektionen (den globala .go-button--text-paddingfixen gäller
   redan här automatiskt eftersom klassen är delad). */
.gocard-folj .go-button--text,
.gocard-folj .go-button--text:hover {
  color: var(--go-color-heading) !important;
  transition: none !important;
  text-decoration: none !important;
  padding: 0 !important;
}
body #page-container .et_pb_section .gocard-folj .go-button.go-button--text,
body #page-container .et_pb_section .gocard-folj .go-button.go-button--text:hover {
  padding: 0 !important;
}

/* Rubrik/text i "Följ GO!"-korten låg fortfarande för långt ifrån varandra
   trots nollställd margin — kvarvarande luft kom från rubrikens
   standard-line-height (extra utrymme under själva textglyfen även med
   margin:0). Strämmar åt line-height och drar ihop ytterligare. */
.gocard-folj .gorow-card-header .go-heading--card {
  line-height: 1.1em !important;
  margin-bottom: -0.25rem !important;
}

/* Lika höjd på alla kort i samma rad, oavsett innehållsmängd. Ingen fast
   höjd — raden blir en flex-container där align-items:stretch gör att
   alla kort på samma "rad-linje" automatiskt matchar det högsta kortet.
   Fungerar även när korten radbryts till 2 eller 1 kolumn på mindre
   skärmar, eftersom stretch tillämpas per flex-radlinje. */
.gorow-podd-cards,
.gorow-var-med-cards,
.gorow-folj-cards {
  display: flex !important;
  align-items: stretch !important;
  flex-wrap: wrap;
}
.gocard-podd,
.gocard-var-med,
.gocard-folj {
  display: flex !important;
  flex-direction: column !important;
  height: auto;
}
/* "Var med i innehållet": länken är inte absolutpositionerad (till skillnad
   från "Följ GO!"-pilarna) — margin-top:auto knuffar den till kortets
   nederkant så alla länkar hamnar i linje även när korten blir olika höga. */
.gocard-var-med .go-button--text {
  margin-top: auto !important;
}

/* "Vad är GO! Enköping?": Divis egen CSS-generator hoppade av någon
   anledning över att skriva ut margin-regeln när bara EN sida (t.ex.
   bara margin-top eller bara margin-bottom) angavs på modulen, trots att
   värdet sparades korrekt i innehållet. Samma mönster observerades även
   för "Var med i innehållet"-textens margin-top (aldrig genererad, men
   där kompenserar annan spacing så det inte syns). Löst här genom att
   sätta värdena direkt i stilmallen, oberoende av Divis pipeline. */
.gocol-vad-ar-heading .go-heading--h2 {
  margin-bottom: 0 !important;
}
.gocol-vad-ar-heading .go-text {
  margin-top: 14px !important;
}

/* Footer: tightare avstånd mellan menylänkarna under Snabblänkar/Partner/
   Kontakt. ROTORSAK: Divi wrapprar varje länk i en egen
   .et_pb_button_module_wrapper-div, och det är DEN som bär Divis dolda
   standard-marginal (.et_pb_module{margin-bottom:X%}) — inte själva <a>-
   länken. Att sätta margin på länken (som gjordes tidigare) hade därför
   ingen synlig effekt. Träffar wrappern direkt istället. */
.gorow-footer-columns .et_pb_button_module_wrapper {
  margin-top: 0 !important;
  margin-bottom: 4px !important;
}
/* KLASSFIX 2026-08-27: regeln riktade tidigare mot .go-heading--h4, men
   footerns rubrikmoduler bär rollklassen .go-footer-heading (inte en
   --h4-storleksklass) — selektorn träffade därför aldrig, och rubrikerna
   ärvde istället Divis dolda standardmarginal (.et_pb_module{margin-bottom:
   30px}) rakt av. Det är den 30px-marginalen som skapade det stora
   luftrummet under "Snabblänkar"/"Partners"/"Kontakt". Rättar selektorn
   till den klass som faktiskt sitter på elementet. */
.gorow-footer-columns .go-footer-heading {
  margin-bottom: 10px !important;
}

/* Kontaktkolumnen: e-post + sociala ikoner grupperade tätare */
.gorow-footer-columns .et_pb_social_media_follow {
  margin-top: 6px !important;
}

/* Alla fyra footerkolumner ska börja på samma höjd */
.gorow-footer-columns {
  align-items: flex-start !important;
}

/* Logo + payoff-raden: Divis kolumnbredd-klasser blev fel igen (samma
   återkommande bugg som på flera andra ställen i sessionen — kolumnerna
   fick "4_4" istället för sida-vid-sida-bredder). Tvingar fram flex +
   auto-bredd direkt via CSS, oberoende av Divis interna klassnamn. */
.gorow-footer-brand {
  display: flex !important;
  align-items: center !important;
  gap: 1rem;
}
.gorow-footer-brand > div:first-child {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
}
.gorow-footer-brand > div:last-child {
  flex: 1 1 auto !important;
  width: auto !important;
  max-width: none !important;
}

/* Sidfotens logotyp (2026-08-28): bytt mot en högupplöst kvadratisk källbild
   (GO-favicon-kvadrat.png, 1013x1013 px, tidigare partner-go-logo.png var
   bara 86x90 px). Divis egen bildmodul-installning "Sizing > Width" (satt
   till 70px, nu skulle motsvara 140px) renderar av okänd anledning ingen
   CSS alls för den här specifika Theme Builder-modulen — verifierat på
   servern att ingen stilmall (varken de dynamiska Divi-cachefilerna eller
   style.css) innehåller någon width-regel för .et_pb_image_0_tb_footer.
   Utan denna klass skulle den nya källbilden visas i sin fulla naturliga
   storlek (1013px) och slå sönder sidfoten. Klassen go-footer-logo är satt
   i bildmodulens Advanced > CSS ID & Classes. height:auto + kvadratisk
   källbild = proportionerna kan aldrig bli förvrängda; max-width:100% är en
   ren säkerhetsspärr mot extremt smala skärmar. Ersätter/kompletterar inte
   någon tidigare regel (fanns ingen). */
.go-footer-logo img {
  display: block;
  width: 140px;
  height: auto;
  max-width: 100%;
}

/* Copyright: mer luft ovanför, tydligt avskild från innehållet ovan */
.gorow-footer-bottom {
  margin-top: 3rem !important;
  padding-top: 1.75rem !important;
}

/* Copyright-raden: samma "shrink-wrapped modul-box"-problem som löstes för
   partnerlegenden — flex + full bredd på själva modulen krävs för att
   text-align:center ska ha något att centrera inom. */
.gorow-footer-bottom .et_pb_text {
  display: flex !important;
  justify-content: center !important;
  width: 100% !important;
}
.gorow-footer-bottom .et_pb_text_inner,
.gorow-footer-bottom p {
  text-align: center !important;
}

@media (max-width: 61.25rem) { /* tablet: rubrik full bredd, 4 punkter i 2 kolumner */
  .gorow-vad-ar {
    flex-wrap: wrap !important; /* återställer radbrytning — desktopens nowrap gäller inte här */
    align-items: flex-start !important; /* rubriken staplas ovanför punktblocket —
       ingen vertikal centrering behövs när de ligger på varsin rad */
  }
  .gocol-vad-ar-heading,
  .gocol-vad-ar-items-wrap {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    padding-right: 0;
  }
  .gocol-vad-ar-heading {
    margin-bottom: 2rem;
  }
  .gorow-vad-ar-items {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    row-gap: 2rem !important;
  }
}

@media (max-width: 47.9375rem) { /* mobil: allt staplat, en kolumn */
  .gocol-vad-ar-heading,
  .gocol-vad-ar-items-wrap {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    text-align: center;
  }
  .gocol-vad-ar-heading { margin-bottom: 1.75rem; }
  /* Två kolumner och två rader på mobil i stället för en lång kolumn.
     Halverar sektionens höjd. Vid 390px viewport blir varje ruta cirka
     180px, vilket rymmer den längsta etiketten (Bygger relationer över
     tid) på två rader utan att bli trångt. Beslut av Pelle 2026-07-26.

     minmax(0, 1fr) och inte 1fr: utan minmax kan en lång etikett tvinga
     kolumnen bredare än sin andel och spränga rutnätet.

     column-gap mindre än row-gap: rutorna behöver mer luft mellan raderna
     — där möter text ikon — än mellan kolumnerna, där bara text möter text. */
  .gorow-vad-ar-items {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 1rem !important;
    row-gap: 1.75rem !important;
  }
  .gocol-vad-ar-item { margin-bottom: 0 !important; }
}

/* --------------------------------------------------------------------------
   9. THEME BUILDER BODY-WRAPPER
   .gosec-body-content sitter på Section-nivå i Theme Builders globala
   Body-layout (används av ALLA sidor via divi/post-content-modulen).
   Explicit 100% här för tydlighet — Divi-sektioner är visserligen 100%
   som standard, men vi låser fast det så det aldrig kan brytas av
   framtida modul-inställningar eller Divi-uppdateringar.
   -------------------------------------------------------------------------- */
.gosec-body-content {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Samma dolda Divi-standardpadding (27px topp/botten på rader vid
   @media min-width:1350px) som löstes globalt för .go-row träffar även
   raden inuti Theme Builders body-wrapper (et_pb_row_0_tb_body) — den
   raden använder inte .go-row-klassen, så den generella fixen missade
   den. Radens egna explicita padding:0 (satt i Divi-modulen) förlorar
   mot Divis dolda mediaquery-regel på breda skärmar eftersom Divis regel
   laddas senare. Åtgärdar här, vid källan, istället för i header eller hero. */
.et_pb_row_0_tb_body,
.et_pb_section_0_tb_body:not(.gosec-event-body):not(.gosec-body-content) {
  padding: 0 !important;
}

/* VIKTIGT: :not(.gosec-event-body) ovan. Divi numrerar layouter PER MALL, sa
   aven eventmallens body-layout (1169) far klassen .et_pb_section_0_tb_body.
   Utan undantaget traffade den har regeln - skriven for standardmallens
   wrapper - aven eventsidan och nollstallde dess padding-top med !important,
   vilket lade H1 under den fixerade headern (uppmatt i webblasaren:
   computed padding-top 0px, h1 rectTop 0, header 153px hog). */

/* --------------------------------------------------------------------------
   10. KNAPPSTORLEK — .go-button--lg (endast hero-CTA:erna)
   OBS: .go-button är en DELAD basklass för alla knappar på sajten
   (footerlänkar, kort-CTA:er, pil-länkar m.fl.). För att inte påverka
   dem ändras INTE basklassen här — istället en riktad storleksmodifierare,
   samma mönster som --primary/--secondary/--text.
   Används tillsammans med go-button + go-button--primary/--secondary.
   -------------------------------------------------------------------------- */
.go-button--lg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 12.5rem;      /* 200px, inom 190–210px */
  min-height: 3.5rem;      /* 56px */
  padding: 1rem 2.125rem;  /* 16px 34px — horisontellt inom 32–38px */
  border-radius: 0.375rem; /* 6px */
  line-height: 1;
  box-sizing: border-box;
}

/* Divi genererar internt en :hover-regel (padding-right/left: 1em !important)
   på knappar som saknar explicit hover-padding, kopplat till dess interna
   ikon-hover-utrymme — detta ändrar knappens bredd vid hover, vilket inte
   är tillåtet. Divis regel använder selektorn
   "body #page-container .et_pb_section .et_pb_button_X:hover" (1 ID + 3
   klasser). För att garanterat vinna över den måste vår override matcha
   samma mönster med ännu högre specificitet — enkel !important räcker
   inte här eftersom Divis regel redan har !important OCH högre
   specificitet (ID-selektor). */
body #page-container .et_pb_section .go-button--lg,
body #page-container .et_pb_section .go-button--lg:hover {
  padding: 1rem 2.125rem !important;
  min-width: 12.5rem !important;
  min-height: 3.5rem !important;
}

/* Samma specificitetsproblem gäller textfärgen: Divis preset sätter
   color:#FFFFFF!important på själva knappen (inte bara :hover), med
   ID-baserad specificitet — den vinner därför även under hover över
   vår lägre specificitets-regel. Samma överordnade selector krävs.
   Gäller ALLA .go-button--primary-knappar på sajten (hero + header-CTA
   + framtida instanser), inte bara hero-raden — därför generell selector. */
body #page-container .et_pb_section .go-button--primary:hover {
  color: var(--go-color-primary) !important;
  background-color: #FFFFFF !important;
  border-color: var(--go-color-primary) !important;
}

/* Radbehållaren för hero-CTA:erna: garanterar exakt, konsekvent avstånd
   mellan knapparna oavsett kolumnbredd, samt att knapparna inte sträcks
   ut till full kolumnbredd. */
.gorow-hero-ctas {
  display: flex !important;
  flex-wrap: wrap;
  gap: 1.375rem; /* ~22px, inom 20–24px */
}
.gorow-hero-ctas > .et_pb_column_inner,
.gorow-hero-ctas > div {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
}

@media (max-width: 47.9375rem) { /* mobil: fulla bredd, staplade */
  .gorow-hero-ctas > .et_pb_column_inner,
  .gorow-hero-ctas > div {
    flex: 0 0 100% !important;
  }
.gorow-hero-ctas .go-button--lg {
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
   11. HEADER-MENY — .gomeny-header-menu
   Divi 5:s menymodul använder en CSS Grid-baserad layoutmotor internt för
   logo+meny-uppdelningen, vilket gav oförutsägbart avstånd mellan logo och
   menyobjekt. Vi tvingar fram tydlig, förutsägbar flexbox-styrning istället
   — samma princip som övriga overrides i denna fil (matcha/överträffa
   Divis specificitet med !important där Divi redan använder det).
   -------------------------------------------------------------------------- */
.gomeny-header-menu .et_pb_menu_inner_container {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100%;
}
.gomeny-header-menu .et_pb_menu__logo-wrap {
  flex: 0 0 auto !important;
}
.gomeny-header-menu .et_pb_menu__wrap {
  flex: 0 1 auto !important;
  justify-content: flex-end !important;
}

/* Avstånd mellan menyobjekten — matchar designreferensen */
.gomeny-header-menu .et-menu > li {
  padding-left: 18px !important;
  padding-right: 18px !important;
}
.gomeny-header-menu .et-menu > li:last-child {
  padding-right: 0 !important;
}

/* Divi ger varje navlänk en inbyggd padding på 31px topp/botten
   (.et_pb_menu--with-logo .et_pb_menu__menu>nav>ul>li>a{padding:31px 0}),
   vilket gjorde menyns egen box mycket högre än både CTA-knappen (56px)
   och logotypen, och skapade obalanserat utrymme ovan/under navigationen.
   Minskar till en kompaktare, mer balanserad padding. */
.gomeny-header-menu .et_pb_menu__menu > nav > ul > li > a {
  padding: 14px 0 !important;
}

/* Aktiv sida: guld understrykning via box-shadow — INTE border-bottom eller
   padding-bottom, eftersom de ändrar länkens boxhöjd och därmed försköt
   texten nedanför övriga menyobjekt (både krävde extra vertikalt utrymme).
   box-shadow ritas rent visuellt UTANFÖR boxens flow och påverkar aldrig
   layout, så alla menyobjekt förblir perfekt baslinjejusterade. */
/* Guld understrykning — förankrad till <li> (som Divi redan garanterat
   positionerar via position:relative i sin egen grundstil), INTE <a>.
   Detta eliminerar osäkerheten om vår egen position:relative på <a>
   verkligen vann över Divis regler. Tvingar även align-items:center
   (istället för Divis stretch) på <li> så boxhöjden blir exakt lika med
   <a>-innehållets egen höjd — annars kunde <li> sträckas till radens
   fulla höjd och få "bottom"-positioneringen att hamna mitt i texten. */
.gomeny-header-menu .et_pb_menu__menu > nav > ul > li {
  align-items: center !important;
}
.gomeny-header-menu .et-menu > li.current-menu-item > a,
.gomeny-header-menu .et-menu > li.current-menu-ancestor > a {
  color: #000000 !important;
}
.gomeny-header-menu .et-menu > li.current-menu-item::after,
.gomeny-header-menu .et-menu > li.current-menu-ancestor::after {
  content: '';
  position: absolute;
  left: 15%;
  right: 15%;
  bottom: 4px;
  height: 2px;
  background-color: var(--go-color-secondary);
  pointer-events: none;
}

/* Tydligt utrymme mellan sista menyobjektet och CTA-knappen */
.gomeny-header-menu {
  margin-right: 2rem;
}

/* MOBILMENY TIDIGARE AN DIVIS STANDARD.

   Divi vaxlar till hamburgaren forst vid 980px. Menyn har sju punkter a 16px
   med 18px padding pa varje sida, vilket ger ca 718px, plus logotypen
   (clamp 60-90px) och marginalen till CTA-knappen. Menykolumnen ar 3/4 av
   raden, sa raden behover drygt 1100px for att det ska rymmas -- vid 90%
   radbredd motsvarar det en viewport kring 1230px. Under det trangs
   punkterna ihop och menyn radbryter till tva rader.

   80rem (1280px) vaxlar darfor strax innan det blir trangt. VARDET AR EN
   BERAKNING, inte en matning i webblasare: andras antalet menypunkter eller
   deras langd flyttas gransen, och da ska talet har justeras.

   Bada hallen sats explicit. Divis egen regel ligger kvar och skulle annars
   visa navigeringen igen mellan 980 och 1280px. */
@media (max-width: 80rem) {
	.gomeny-header-menu .et_pb_menu__menu {
		display: none !important;
	}
	.gomeny-header-menu .et_mobile_nav_menu {
		display: block !important;
	}
}

/* "Aktuellt just nu": guldlinjen (border-left) sitter direkt på själva
   <h2>-elementet (Divi-genererad regel: .et_pb_heading_16 .et_pb_heading_
   container h2{border-left-width:4px...}). Padding på modulens YTTRE
   wrapper flyttar linje+text som EN enhet istället för att skapa mellanrum
   mellan dem — padding måste sitta på h2 själv, INUNDER början. */

/* --------------------------------------------------------------------------
   12. HEADER-LOGOTYP — .go-header-logo
   Storleken styrs HELT via CSS, inte via Divi-modulens egna width/height-
   inställningar (dessa är medvetet borttagna ur modulen). Flytande storlek
   med clamp() behåller proportionerna (aspect-ratio via height:auto),
   ingen sträckning/förvrängning möjlig.

   OBS: Divis divi/menu-modul stöder inte tillförlitligt en egen CSS-klass
   riktad specifikt mot <img>-elementet för logotypen (till skillnad från
   alt/title-attribut, som fungerar via targetElement). Därför används
   Divis egen stabila, bekräftat existerande DOM-struktur
   (.et_pb_menu__logo img) scopad till vår header-klass — funktionellt
   identiskt med en dedikerad klass, utan att behöva lita på en
   oppålitlig Divi-mekanism. .go-header-logo finns ändå som alias här
   för framtida bruk om Divi-mekaniken åtgärdas i en senare version. */
.go-header-logo img,
.gomeny-header-menu .et_pb_menu__logo img {
  width: clamp(60px, 5vw, 90px);
  height: auto !important;
  max-height: none !important;
  display: block;
}

@media (max-width: 47.9375rem) { /* mobil: lite mindre för att inte tränga menyn */
  .go-header-logo img,
  .gomeny-header-menu .et_pb_menu__logo img {
    width: clamp(48px, 12vw, 60px);
  }
}

/* --------------------------------------------------------------------------
   13. HEADER-RAD — vertikal centrering mellan meny-kolumn och CTA-kolumn
   Divis "alignItems" på radnivå genererade ingen CSS alls här, troligen
   eftersom raden står i "block"-läge (alignItems gäller bara flex/grid-
   containers). Tvingar fram flex + centrering direkt på Divis egna,
   stabila per-mall-klass för headerraden. Ändrar bara denna specifika
   rad, inte rader på andra sidor. */
.et_pb_row_0_tb_header {
  display: flex !important;
  align-items: center !important;
}

/* PARTNER-SIDAN */
.gotxt-section-intro { margin-top: 14px !important; max-width: 65ch; }
.gogrid-partners { display: grid !important; grid-template-columns: repeat(5, minmax(0,1fr)) !important; gap: 1rem !important; align-items: stretch !important; margin-top: 1.75rem !important; padding: 0 !important; }
@media (min-width: 84.375rem) { .gogrid-partners { padding: 0 !important; } }
.gocard-partner {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-right: 0 !important;
  padding: 1.75rem 1.25rem !important;
}
.gocard-partner:hover { box-shadow: var(--go-card-shadow); transform: var(--go-card-lift); }
.gocard-partner .et_pb_image, .gocard-partner .et_pb_image_wrap { margin: 0 !important; padding: 0 !important; width: 100%; display: block !important; }
.gocard-partner img { display: block; width: 100%; max-height: 42px; object-fit: contain; margin: 0 auto; }
.gogrid-partners--huvud .gocard-partner { padding: 2.5rem 1rem !important; }
.gogrid-partners--huvud .gocard-partner img { max-height: 117px; }
.gorow-partner-link { margin-top: 1.25rem !important; }
.gorow-partner-link .go-button--text, .gorow-partner-link .go-button--text:hover { color: var(--go-color-primary) !important; transition: none !important; padding: 0 !important; }
.gogrid-varfor-partner { display: grid !important; grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 1rem !important; align-items: stretch !important; margin-top: 1.75rem !important; padding: 0 !important; }
@media (max-width: 30rem) { .gogrid-varfor-partner { grid-template-columns: 1fr !important; } }
.gocard-varfor-partner { display: flex !important; flex-direction: column !important; width: 100% !important; max-width: 100% !important; margin-right: 0 !important; text-align: center; background-color: var(--go-color-bg-light) !important; box-sizing: border-box !important;   padding: 28px 22px !important;   /* asymmetrisk kort-padding (avviker medvetet fr\u00e5n go-card-token) */
}
.gocard-varfor-partner .go-icon-box { margin-left: auto !important; margin-right: auto !important; background-color: #FFFFFF !important; }
body #page-container .et_pb_section .gocard-varfor-partner .go-heading--h4 { margin-top: 14px !important; margin-bottom: 0 !important; }
body #page-container .et_pb_section .gocard-varfor-partner .go-text--small { margin-top: 8px !important; }
@media (max-width: 61.25rem) { .gogrid-partners { grid-template-columns: repeat(3, minmax(0,1fr)) !important; } }
@media (max-width: 47.9375rem) { .gogrid-partners { grid-template-columns: repeat(2, minmax(0,1fr)) !important; } .gogrid-partners--huvud .gocard-partner { padding: 1.75rem 1.25rem !important; } .gogrid-partners--huvud .gocard-partner img { max-height: 83px; } }

/* Huvudpartners-loggor (Partners-sidan + startsidan): CSS Grid med
   auto-fit så antalet kolumner följer automatiskt antalet AKTIVA
   huvudpartners – ingen kodändring krävs här när Sparbanken återaktiveras
   eller ytterligare huvudpartners tillkommer. Just nu ger detta fyra
   jämnstora kolumner (Enköpings kommun, Företagarna Enköping, SH, Almi).
   Sparbanken i Enköping är dold i modulträdet men sparad i Divi-biblioteket
   ("Huvudpartner – Sparbanken i Enköping", id 2387 Partners-sidan / 2389
   startsidan) och kan läggas tillbaka i raden med
   novamira/divi-apply-library-item utan att denna CSS behöver justeras –
   auto-fit expanderar automatiskt till fem kolumner. Skalar ned mjukt mot
   mindre skärmar utan extra brytpunkter; en enda brytpunkt på mobil
   garanterar minst två kolumner, i linje med sajtens övriga partnergrids.
   Kortens egen storlek (padding, logotypernas max-height) styrs oförändrat
   av .gocard-partner / .gogrid-partners--huvud ovan – proportionerna
   påverkas inte. */
.gogrid-partners--huvud { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)) !important; }
@media (max-width: 47.9375rem) { .gogrid-partners--huvud { grid-template-columns: repeat(auto-fit, minmax(40%, 1fr)) !important; } }

/* Kontaktkorten på Kontakt (15): två kort (Telefon, E-post) sida vid sida i
   den smala vänsterkolumnen. Grid låst till 2 kolumner – tidigare 2x2 för
   fyra kort (Besöksadress/Öppettider togs bort 2026-08-27), nu en enda rad.
   Egen klass i stället för .gogrid-varfor-partner (Partner-sidan, 14), som
   sedan 2026-08-31 själv ligger 2x2 (se .gogrid-varfor-partner ovan) i en
   tvådelad sektion likt Kontakt/Bli medlem. */
.gogrid-kontakt { display: grid !important; grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 1rem !important; align-items: stretch !important; margin-top: 1.5rem !important; padding: 0 !important; }
@media (max-width: 30rem) { .gogrid-kontakt { grid-template-columns: 1fr !important; } }

/* ============================================================
   Intervjuer – filterknappar: återanvänder go-button--primary--lg
   (identiskt med "Se intervjuerna"). GO-klasserna sköter inaktiv
   (blå/vit) + hover-invertering (vit/blå). Enda tillägget: aktiv
   knapp ska FÖRBLI blå/vit även vid hover (inte invertera).
   Kategori-knappar: gemensam kompakt bredd (åsidosätter --lg:s
   min-width 12.5rem + width 100% som är gjort för stora hero-CTA).
   ============================================================ */
body #page-container .et_pb_section a.zmart-filter__knapp--aktiv.go-button--primary,
body #page-container .et_pb_section a.zmart-filter__knapp--aktiv.go-button--primary:hover,
body #page-container .et_pb_section a.zmart-filter__knapp--aktiv.go-button--primary:focus,
body #page-container .et_pb_section a.zmart-filter__knapp--aktiv.go-button--primary:active {
  background-color: var(--go-color-primary) !important;
  color: #FFFFFF !important;
  border-color: var(--go-color-primary) !important;
}

body #page-container .et_pb_section a.zmart-filter__knapp.go-button--lg {
  min-width: 10rem !important;
  width: 10rem !important;
  min-height: 3rem !important;
  padding: 0 1.25rem !important;
}
body #page-container .et_pb_section a.zmart-sortering__knapp.go-button--lg {
  min-width: 0 !important;
  width: auto !important;
  min-height: 3rem !important;
  padding: 0 1.5rem !important;
}

/* Intervjukort – platt i grundläge (ram, ingen skugga), lyft + skugga vid hover (= .go-card) */
.zmart-intervju-kort { transition: var(--go-transition-card); }
body #page-container .et_pb_section .zmart-intervju-kort:hover {
  box-shadow: var(--go-card-shadow) !important;
  transform: var(--go-card-lift) !important;
}

/* ============================================================
   Kontaktsida – WPForms-fälten (återanvänder go-tokens).
   Formulärpanelens platta (.zmart-kontakt-panel) definieras
   tillsammans med CTA-panelen i avsnitt 21 längre ned, så att
   de två aldrig kan glida isär.
   ============================================================ */
.zmart-kontaktformular .wpforms-field-label {
  font-family: var(--go-font-body);
  font-weight: 600;
  color: var(--go-color-heading);
  font-size: 0.9375rem;
  margin-bottom: 0.375rem;
}
.zmart-kontaktformular input[type="text"],
.zmart-kontaktformular input[type="email"],
.zmart-kontaktformular input[type="tel"],
.zmart-kontaktformular textarea {
  font-family: var(--go-font-body) !important;
  font-size: 1rem !important;
  color: var(--go-color-body) !important;
  border: 1px solid var(--go-color-border) !important;
  border-radius: 0.375rem !important;
  padding: 0.75rem 1rem !important;
  background-color: #FFFFFF !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
  box-sizing: border-box !important;
}

/* WPForms Divi-integration satter max-width:100% men ALDRIG width. max-width
   ar ett TAK, inte en bredd: utan width faller falten tillbaka pa webblasarens
   standard (size=20, ca 250px) och kapas bara om containern ar smalare. Pa
   desktop ar panelen smal nog att det inte syns, pa mobil tar den hela
   skarmen och falten star kvar pa 250px. Darav den tomma ytan. */
.zmart-kontaktformular input[type="text"],
.zmart-kontaktformular input[type="email"],
.zmart-kontaktformular input[type="tel"],
.zmart-kontaktformular textarea,
.zmart-kontaktformular select,
.zmart-kontaktformular .choices,
.zmart-kontaktformular .wpforms-field-row {
	width: 100% !important;
	max-width: 100% !important;
}

/* FORMULARETS LAYOUT-FALT. WPForms lagger Namn/E-post/Telefon i en 50%-
   kolumn och Jag vill/Meddelande i en annan. Pa smal skarm blir tva
   halvkolumner obrukbara - falten ar da 100% av 50%, vilket ser ut som
   ett smalt formular med tom yta bredvid.

   WPForms egen regel (layout-screen-small, max-width 600px) satter
   kolumnerna till 100%, men den raddar inte mellanbredderna dar
   kolumnerna kan radbryta och anda behalla 50%. Vi gar darfor over till
   en kolumn redan vid 900px. */
@media (max-width: 56.25rem) {
	.zmart-kontaktformular .wpforms-field-layout-columns,
	.zmart-kontaktformular .wpforms-layout-row {
		flex-direction: column !important;
	}
	.zmart-kontaktformular .wpforms-field-layout .wpforms-layout-column,
	.zmart-kontaktformular .wpforms-field-layout-columns .wpforms-layout-column {
		width: 100% !important;
		max-width: 100% !important;
		padding-right: 0 !important;
	}
}
.zmart-kontaktformular input:focus,
.zmart-kontaktformular textarea:focus {
  border-color: var(--go-color-primary) !important;
  box-shadow: 0 0 0 3px rgba(13,59,119,0.12) !important;
  outline: none !important;
}
body #page-container .et_pb_section .zmart-kontaktformular button[type="submit"],
.zmart-kontaktformular button.wpforms-submit {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: var(--go-color-primary) !important;
  color: #FFFFFF !important;
  border: 2px solid var(--go-color-primary) !important;
  border-radius: 0.375rem !important;
  font-family: var(--go-font-body) !important;
  font-weight: 600 !important;
  font-size: 0.9375rem !important;
  padding: 0.75rem 2rem !important;
  cursor: pointer !important;
  transition: background-color 0.25s ease, color 0.25s ease !important;
}
body #page-container .et_pb_section .zmart-kontaktformular button[type="submit"]:hover,
.zmart-kontaktformular button.wpforms-submit:hover {
  background-color: #FFFFFF !important;
  color: var(--go-color-primary) !important;
}

/* Kontaktkort – återanvänder go-card. Vänsterställt enligt skiss 2026-07-27:
   ikon, rubrik och värde ligger i vänsterkant. Det är det som gör att fyra
   kort får plats 2×2 i en 40 procent bred kolumn utan att texten bryts sönder. */
body #page-container .et_pb_section .gocard-kontakt {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-right: 0 !important;
  text-align: left !important;
}
body #page-container .et_pb_section .gocard-kontakt .et_pb_icon,
body #page-container .et_pb_section .gocard-kontakt .goicon-circle {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* ============================================================
   GO-knapp: dölj Divis hover-pil globalt + lås hover-storlek
   (Divi ritar .et_pb_button::after content:"5" pil-glyf och
   ändrar padding vid hover; GO-knappen ska bara byta färg.)
   ============================================================ */
body #page-container .go-button::after,
body #page-container .go-button::before,
body #page-container .go-button:hover::after,
body #page-container .go-button:hover::before {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  width: 0 !important;
  margin: 0 !important;
}
body #page-container .go-button:hover {
  padding: 0.75rem 1.75rem !important;
}
body #page-container .go-button--lg:hover {
  padding: 1rem 2.125rem !important;
}

/* ============================================================
   Lokala SVG-ikoner (Font Awesome Free) i go-icon-box
   currentColor ärver färg; centrering + ingen layout shift.
   ============================================================ */
body #page-container .go-icon-box .et_pb_text_inner {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  color: var(--go-color-primary);
}
body #page-container .go-svg-icon {
  display: block;
  flex: 0 0 auto;
  color: inherit;
}

/* Sociala brand-ikoner: vit ikon pa brand-bakgrund (ej primar bla) */
body #page-container [class*="goicon-social"] .et_pb_text_inner {
  color: #FFFFFF;
}

/* Ikon-box ljusbla variant: mjuk ljusbla fylld cirkel bakom blaa ikon */
/* (for ikon-boxar pa VIT bakgrund dar --white blir osynlig) */
body #page-container .go-icon-box--light,
body #page-container .go-icon-box.go-icon-box--light {
  background-color: var(--go-color-bg-light) !important;
}


/* Ankar-landning: scroll-margin måste klara den FIXERADE headern.

   BEROENDE — LÄS DETTA INNAN DU RÖR NÅGOT: den här regeln fungerar BARA
   tillsammans med js/go-anchor-scroll.js. Tar du bort skriptet slutar
   samtliga ankare nedan att landa rätt, utan att något syns som fel i CSS:en.

   Divi kopplar en egen hanterare till fragmentlänkar och scrollar via
   window.et_pb_smooth_scroll(). Den kör ÄVEN när Theme Options "Smooth
   Scrolling" är av — då sätts bara varaktigheten till 0, så det ser ut som
   ett vanligt hopp. Funktionen räknar fram sitt mål ur offset().top minus en
   kompensation som hämtas från Divis klassiska #main-header, som inte finns
   när headern byggs i Theme Builder. scroll-margin-top respekteras bara av
   webbläsarens EGEN fragmentnavigering, aldrig av ett skript som sätter
   scrollTop — så regeln var helt verkningslös fram till 2026-07-27, oavsett
   vilket värde som stod här. Skriptet tar tillbaka klicket och låter
   scrollIntoView() göra jobbet, vilket ger CSS:en genomslag igen.

   HEADERNS HÖJD ÄR FLYTANDE. Den är .go-section--compact med padding
   clamp(1.5rem, 1.2rem + 1.2vw, 2.5rem) uppe och nere, plus logotypen
   clamp(60px, 5vw, 90px). På smal desktop ger det ca 117px, men vid full
   bredd slår båda clamp-värdena i taket och headern blir ca 160px.

   190px klarar 160px-headern med marginal och är verifierat i webbläsare på
   mobil 2026-07-27. Samma värde på alla brytpunkter: mobilens header är lägre
   än desktopens vid full bredd. Behöver värdet ändras räcker det att ändra
   det här — skriptet läser den beräknade scroll-margin-top och rättar sig
   efter den. Det är också villkoret för att skriptet ska bry sig om en länk
   över huvud taget: mål UTAN scroll-margin-top lämnas till Divi. */
body #page-container #kontaktformular,
body #page-container #folj-oss,
body #page-container #zmart-cancel,
body #page-container #zmart-event-anmalan,
body #page-container #zmart-intervju-grid,
body #page-container #bli-partner-formular {
  scroll-margin-top: 190px;
}

/* ===== HEM (11) layout \u2014 centraliserad till klasser ===== */
/* Inneh\u00e5llsrad-bredd (ers\u00e4tter inline width:90% p\u00e5 rader). */
:root { --go-row-contained-width: 90%; }
:root { --go-card-row-gap: 1.125rem; }   /* avst\u00e5nd mellan sektionsrubrik och kort-rad */
.go-row--cards { margin-top: var(--go-card-row-gap) !important; }

/* Divi laddar .et_pb_row{margin-top:40px!important} i unified-CSS EFTER temat — samma !important men senare, så den vann över .go-row--cards. Höjer specificiteten (body #page-container) så kort-radens avstånd styrs av --go-card-row-gap igen. */
body #page-container .go-row--cards {
  margin-top: var(--go-card-row-gap) !important;
}
.go-row--contained { width: var(--go-row-contained-width) !important; max-width: 100% !important; }
/* Textbredds-begr\u00e4nsning (ers\u00e4tter inline max-width p\u00e5 rubriker/texter). */
.go-constrain-md { max-width: 70%; }
.go-constrain-sm { max-width: 80%; }

/* === SEKTIONSRUBRIK-BREDD (\u00e5teranv\u00e4ndbar komponent) ===
   Prim\u00e4ra sektionsrubriker ska ha en harmonisk l\u00e4sbredd i st\u00e4llet f\u00f6r att
   str\u00e4cka sig \u00f6ver hela 90%-containern. Referens \u00e4r hero-H1, som f\u00e5r sin
   goda radbrytning av att ligga i en halv rad (1_2 av 90vw \u2248 45vw) \u2014 inte
   av n\u00e5gon max-width. Denna klass \u00e5terskapar samma visuella l\u00e4sbredd f\u00f6r
   rubriker som ligger i en FULLBRED rad.
   R\u00f6r ENDAST max-width \u2014 aldrig font-size, line-height eller typsnitt.
   ch-enheten b\u00e4r radbrytningen och \u00e4r det som normalt binder;
   procentsp\u00e4rren \u00e4r bara ett skydd mot extremt breda sk\u00e4rmar.
   VIKTIGT: procenten r\u00e4knas p\u00e5 KOLUMNEN rubriken ligger i, inte p\u00e5 raden.
   Ett l\u00e5gt procentv\u00e4rde (tidigare 52%) band d\u00e4rf\u00f6r h\u00e5rt i smala kolumner
   och tvingade korta rubriker till tre rader. 90% l\u00e5ter ch-v\u00e4rdet st\u00e5
   f\u00f6r radbrytningen som avsett. */
.go-heading--measure {
  max-width: min(38ch, 100%);
}

/* Divi placerar klassen p\u00e5 modulens YTTRE wrapper, men texten radbryter
   efter .et_pb_heading_container / sj\u00e4lva rubriktaggen. En max-width enbart
   p\u00e5 wrappern styr d\u00e4rf\u00f6r INTE radbrytningen \u2014 den m\u00e5ste n\u00e5 det inre
   elementet. Bind mot den stabila .et_pb_module_header (inte hN, inte det
   instabila et_pb_heading_N). Endast max-width \u2014 aldrig font/line-height. */
.go-heading--measure .et_pb_heading_container,
.go-heading--measure .et_pb_module_header {
  max-width: min(38ch, 100%);
}

/* Tablet/mobil: sl\u00e4pp procentsp\u00e4rren s\u00e5 rubriken f\u00e5r anv\u00e4nda full radbredd
   \u2014 p\u00e5 smala sk\u00e4rmar radbryter texten \u00e4nd\u00e5 naturligt. */
@media (max-width: 61.25rem) {
  .go-heading--measure { max-width: 100%; }
}
.gosec-aktuellt { background-color: var(--go-color-bg-white); }
.gosec-vad-ar { background-color: var(--go-color-bg-light); }
.gosec-var-med { background-color: var(--go-color-bg-light); }
/* Intervjuer-sidan: "Var med i innehållet" ska vara VIT här för att
   skilja sig från den ljusa "Se mer"-sektionen ovanför (2026-07-25). */
body #page-container .gosec-var-med.gosec-var-med--white { background-color: var(--go-color-bg-white); }
.gosec-folj { background-color: var(--go-color-bg-light); }
.gocard-var-med { padding: 30px 26px !important; }
.gocard-folj { padding-top: 24px !important; padding-left: 22px !important; padding-right: 22px !important; background-color: var(--go-color-bg-white) !important; }
.goimg-partner-logo img { height: 60px; width: 140px; object-fit: contain; }
.goicon-social-youtube { background-color: #FF0000 !important; }
.goicon-social-facebook { background-color: #1877F2 !important; }
.goicon-social-instagram { background-color: #C1358E !important; }
.goicon-social-linkedin { background-color: #0A66C2 !important; }
.goicon-social-tiktok { background-color: #000000 !important; }

/* ===== INTERVJUER (12) layout \u2014 centraliserad ===== */
.zmart-intervjuer-arkiv { background-color: var(--go-color-bg-light); }
.zmart-arkiv__rubrik-rad { margin-bottom: clamp(12px, 2vw, 20px) !important; }
.zmart-sortering__knapp { margin-left: auto !important; }
.zmart-intervju-grid__rad { margin-top: clamp(20px, 3vw, 36px) !important; }
.zmart-visa-fler__rad { margin-top: clamp(28px, 4vw, 48px) !important; }
.zmart-intervju-kort__kategori { margin: 12px 20px 0 !important; }
.zmart-intervju-kort__titel { margin: 0 20px !important; }
.zmart-intervju-kort__datum { margin: 0 20px !important; }
.zmart-intervju-kort__langd { margin: 0 20px 20px !important; }

/* Poddsektion ("Lyssna på GO! Enköping som podd") — mellan "Våra filmklipp"
   och "Var med i innehållet". Återanvänder .go-card/.go-icon-box/.go-heading/
   .go-text rakt av (samma komponenter som "Var med i innehållet"); bara
   sektions-/rad-/kortwrapparna är nya. Tillagd 2026-09-09,
   omdesignad 2026-09-09 (kompakt horisontell layout ikon+text). */
.gosec-podd { background-color: var(--go-color-bg-light); }
/* Poddingressens maxbredd matchad mot "Var med i innehållet"s ingress.
   Föregående försök (via radens 90%-bredd) gav ingen synlig effekt live,
   så detta låser i stället EN FAST maxbredd direkt på själva textcontainern
   — oberoende av rad-/kolumnbredd. Värdet är uppmätt mot "Var med i
   innehållet"s ingress på en skarp desktopgranskning (≈710px → 44rem vid
   16px rot-typsnitt), inte teoretiskt härlett. .go-constrain-md-klassen
   sitter kvar på elementet (återanvänd, orörd överallt annars på sajten)
   — denna regel höjer bara specificiteten för just denna sektion.
   Påverkar inte rubriken, kortraden eller "Var med i innehållet".
   Tillagd 2026-09-09. */
.gorow-podd-rubrik .go-constrain-md {
  max-width: 44rem !important;
}

.gocard-podd { padding: 28px 26px !important; }

/* 50/50-bredd: Divi 5 tilldelade i praktiken samma helbredds-klass
   (et_flex_column_24_24) åt denna handskrivna 1_2-rad som åt Var-med-
   radens kort trots identisk columnStructure/type — fungerar troligen
   via Divi 5:s klientsidiga layoutberäkning som en ren serverhämtning
   (wp_remote_get, ingen JS) inte kan verifiera. Låser därför bredden
   explicit här, med samma gap-formel som Divis egna .et_flex_column_12_24
   så mellanrummet matchar övriga två-kolumnsrader på sajten. */
body #page-container .gorow-podd-cards > .gocard-podd {
  width: calc(50% - var(--horizontal-gap-parent, 5.5%) * 1 / 2) !important;
  max-width: calc(50% - var(--horizontal-gap-parent, 5.5%) * 1 / 2) !important;
  flex: 0 0 auto !important;
}
@media (max-width: 47.9375rem) {
  body #page-container .gorow-podd-cards > .gocard-podd {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Hela kortet är en <a> i en Code-modul (kringgår wpautop som annars
   bryter upp länken); se till att den fyller kortets fulla höjd, inte bara
   innehållets egen höjd, så hela ytan är klickbar även vid ojämnt innehåll. */
.gocard-podd .et_pb_module { flex: 1; display: flex; }
.gocard-podd .et_pb_code_inner { display: flex; width: 100%; }

/* Kortlayout: ikon till vänster, text till höger — vänsterställd, samma
   formspråk som "Var med i innehållet" (.go-card/.go-icon-box) men
   horisontell i stället för vertikalt centrerad. */
.zmart-podd-card {
  display: flex;
  align-items: flex-start;
  text-align: left;
  gap: 1.125rem;
  width: 100%;
  height: 100%;
  color: inherit;
  text-decoration: none;
  box-sizing: border-box;
}
.zmart-podd-card__icon {
  flex: 0 0 auto;
}
.zmart-podd-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}
.zmart-podd-card__title,
.zmart-podd-card__desc {
  margin: 0;
}
.zmart-podd-card__cta {
  margin-top: 0.25rem;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.zmart-podd-card:hover .zmart-podd-card__title,
.zmart-podd-card:focus-visible .zmart-podd-card__title {
  color: var(--go-color-primary);
}
.zmart-podd-card:hover .zmart-podd-card__cta,
.zmart-podd-card:focus-visible .zmart-podd-card__cta {
  color: var(--go-color-secondary-text) !important;
}
.zmart-podd-card:focus-visible {
  outline: 3px solid var(--go-color-primary);
  outline-offset: 3px;
  border-radius: var(--go-card-radius);
}

/* Osynlig hjälptext för skärmläsare (temat laddar inte WP:s egen
   .screen-reader-text) — generell, återanvändbar klass. */
.go-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ===== KONTAKT (15) layout \u2014 centraliserad ===== */
/* Sektionen är vit så den ljusa formulärplattan (.zmart-kontakt-panel) syns.
   Deklareras explicit i stället för att ärvas från sidbakgrunden. */
.gosec-kontakt { background-color: var(--go-color-bg-white); }
.gocard-kontakt { padding: 20px 18px !important; }


/* F\u00f6lj-kort hover \u2014 subtil lyft + skugga (klickbara kort). */
.gocard-folj { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.gocard-folj:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(11,44,90,0.12); }
.gocard-folj:hover .golink-social-arrow { transform: translateX(4px); }
.golink-social-arrow { transition: transform 0.2s ease; }

.gocard-folj { cursor: pointer; }

/* === SEKUNDÄRRUBRIK-KOMPONENT (återanvändbar) ===
   Gult vänsterstreck + indrag för sektionsrubriker under hero ("Aktuellt just nu", "Vårt varför", "Huvudpartners" osv). Ersätter den tidigare sidunika Divi-modul-bordern som bara fanns på Hem. Applicera .go-heading--barred på heading-modulen. Strecket ligger på själva rubriktexten (h2..h6) så det följer texthöjden. */
.go-heading--barred .et_pb_heading_container h1,
.go-heading--barred .et_pb_heading_container h2,
.go-heading--barred .et_pb_heading_container h3,
.go-heading--barred .et_pb_heading_container h4,
.go-heading--barred h1,
.go-heading--barred h2,
.go-heading--barred h3,
.go-heading--barred h4 {
  border-left: 4px solid var(--go-color-secondary) !important;
  padding-left: 24px !important;
}

/* --------------------------------------------------------------------------
   20. FOOTER \u2014 KASKADFIX (tillagd 2026-07-18)

   ROTORSAK: footer-reglerna (.go-footer-heading / .go-footer-text) star
   tidigare i filen an de generella .go-heading / .go-text. Vid SAMMA
   specificitet vinner den regel som kommer SIST \u2014 darfor sattes
   morkbla rubrikfarg (#0A2A57, 1,03:1) och nastan svart brodtext
   (#1A1A1A, 1,26:1) mot den morkbla footerbakgrunden. I praktiken
   osynlig text, och det Lighthouse flaggade som kontrastfel.

   LOSNING: samma regler igen, sist i filen och med hojd specificitet
   enligt husets selektorrecept (body #page-container), sa att de vinner
   oavsett framtida tillagg hogre upp. Ingen av de tidigare reglerna har
   tagits bort \u2014 detta ar additivt.

   Kontrast mot --go-color-footer-bg (#0B2C5A): vit = 13,8:1.
   -------------------------------------------------------------------------- */

body #page-container .go-footer-heading .et_pb_module_header,
body #page-container .go-footer-heading h1.et_pb_module_header,
body #page-container .go-footer-heading h2.et_pb_module_header,
body #page-container .go-footer-heading h3.et_pb_module_header,
body #page-container .go-footer-heading h4.et_pb_module_header {
  font-size: var(--go-footer-heading-size);
  font-weight: 700;
  color: var(--go-color-footer-text) !important;
}

body #page-container .go-footer-text,
body #page-container .go-footer-text .et_pb_text_inner,
body #page-container .go-footer-text .et_pb_text_inner p {
  font-size: var(--go-footer-text-size);
  line-height: 1.5em;
  color: var(--go-color-footer-text) !important;
}

/* Lankar i footern arver den ljusa texten och behaller understrykning
   for att inte bryta WCAG 1.4.1 (farg som enda sarskiljare). */
body #page-container .go-footer-text a,
body #page-container .go-footer-heading a {
  color: var(--go-color-footer-text) !important;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* Copyright-raden: pa uttryckligt onskemal vit (13,8:1) i stallet for
   den dampade tonen. --go-color-footer-muted behalls som token for
   framtida bruk men anvands inte langre har. */
body #page-container .go-footer-text--muted,
body #page-container .go-footer-text--muted .et_pb_text_inner,
body #page-container .go-footer-text--muted .et_pb_text_inner p {
  color: var(--go-color-footer-text) !important;
}

/* --------------------------------------------------------------------------
   21. CTA-PANEL (.gorow-om-cta) \u2014 BAKGRUND PA ALLA BREAKPOINTS

   ROTORSAK: panelens bakgrund, radie och padding lag inuti
   @media (max-width: 47.9375rem) och gallde darfor BARA pa mobil. Pa
   desktop och tablet renderades CTA:n helt utan ljusbla platta.

   Bakgrunden sitter medvetet pa RADEN (.gorow-om-cta), inte pa sektionen
   (.gosec-om-cta som ar vit) \u2014 darfor foljer plattan satsytan och blir
   aldrig fullbredd kant till kant.

   Aterianvands av: Om GO! Enkoping (13), Partner (14), Kontakt (15).
   -------------------------------------------------------------------------- */

body #page-container .et_pb_section .gorow-om-cta,
body #page-container .et_pb_section .gorow-om-cta.go-row,
body #page-container .et_pb_section .gorow-om-cta.go-row--contained,
body #page-container .et_pb_section .zmart-kontakt-panel,
body #page-container .et_pb_section .zmart-medlem-panel,
body #page-container .et_pb_section .zmart-partner-panel {
  background-color: var(--go-color-bg-light);
  border-radius: 12px;
  /* !important kravs: den globala nollstallningen (.go-row, .go-container,
     .go-row--contained { padding-top/bottom: 0 !important }) traffar aven
     denna rad, eftersom den bar bade gorow-om-cta OCH go-row. */
  padding-top: var(--go-cta-panel-padding-y) !important;
  padding-bottom: var(--go-cta-panel-padding-y) !important;
  padding-left: var(--go-cta-panel-padding-x) !important;
  padding-right: var(--go-cta-panel-padding-x) !important;
  box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   22. COMPACT-SEKTIONER \u2014 SPECIFICITETSFIX (tillagd 2026-07-18)

   ROTORSAK: `.go-section--compact` deklareras utan !important och forlorar
   darfor mot `body #page-container .go-section:not(.gosec-hero)` som har
   BADE hogre specificitet och !important. Compact-klassen har alltsa varit
   verkningslos \u2014 alla compact-sektioner har renderat med full
   --go-section-padding-y (upp till 45px) i stallet for compact-tokenens
   18\u201330px.

   Verifierat i DevTools pa header-sektionen: berakningen gav 44,18px, vilket
   ar --go-section-padding-y i sitt ovre spann, inte compact-tokenen.

   LOSNING: samma selektormonster som den vinnande regeln, plus !important.
   Hero undantas har ocksa \u2014 den har egen fast hojd och padding (avsnitt 4)
   och ska aldrig rors av sektionspadding.

   Paverkar: header-sektionen pa alla sidor, gosec-partners (Hem),
   gosec-om-cta (Om GO!, Partner).
   -------------------------------------------------------------------------- */

body #page-container .go-section--compact:not(.gosec-hero):not(.gosec-event-hero):not(.gosec-artikel-hero) {
  padding-top: var(--go-section-padding-y-compact) !important;
  padding-bottom: var(--go-section-padding-y-compact) !important;
}

/* --------------------------------------------------------------------------
   HEADERNS EGEN (ÄNNU TAJTARE) PADDING (tillagd 2026-09-14)

   Flyttad hit från go-herofilm-bridge.v12.css efter godkännande av att
   startsidans headerhöjd blir global standard på hela sajten. Header-
   sektionen bär .go-section--compact liksom övriga kompakta sektioner ovan,
   men ska vara ännu tajtare än dem: halva --go-section-padding-y-compact.
   Egen variabel så att värdet går att justera utan att påverka övriga
   .go-section--compact-sektioner (t.ex. gosec-partners, gosec-om-cta).

   Selektorn måste slå regeln ovan, som bär !important med samma
   specificitet (1 id, 4 klasser, 1 element) — därför två extra klasser
   här (1, 6, 1), oberoende av laddningsordning.

   .gosec-herofilm (filmsektionen på startsidan) behåller en egen kopia av
   --go-header-padding-y i go-herofilm-bridge.v12.css — den är inte en
   avkomling av headern i DOM:en och kan därför inte ärva variabeln härifrån.
   -------------------------------------------------------------------------- */

body #page-container .et-l--header .et_pb_section.go-section--compact {
  --go-header-padding-y: clamp(0.75rem, 0.6rem + 0.6vw, 1.25rem);
}

body
  #page-container
  .et-l--header
  .et_pb_section.go-section--compact:not(.gosec-hero):not(.gosec-event-hero):not(.gosec-artikel-hero) {
  padding-top: var(--go-header-padding-y) !important;
  padding-bottom: var(--go-header-padding-y) !important;
}

/* ==========================================================================
   PROGRAM-SIDAN (event)
   Pluginet zmart-events levererar struktur; all design hämtas härifrån via
   klassbryggan i inc/zmart-events-bridge.php.
   ========================================================================== */

/* Bakgrundsväxling enligt sajtens mönster: intro ljus, grid vit, hur ljus. */
body #page-container .gosec-program-intro { background-color: var(--go-color-bg-light); }
body #page-container .gosec-artiklar-intro { background-color: var(--go-color-bg-light); }
body #page-container .gosec-amne { background-color: var(--go-color-bg-light); }
body #page-container .gosec-program-grid { background-color: #FFFFFF; }
body #page-container .gosec-program-hur { background-color: var(--go-color-bg-light); }

/* Divis radpadding nollställs på shortcode-raden (se Divi-lardomar: .et_block_row 27px). */
body #page-container .zmart-program-shortcode { padding: 0 !important; }

/* Linjering med övriga sektioner. Plugin-raderna (.zmart-event-controls och
   .zmart-event-grid) bär .go-row för kort-radens spacing, men de sitter redan
   inuti en centrerad Divi-rad + kolumn. Den centrala .go-row-regeln
   (width: 90%; margin: auto) skulle då spärra bredden EN GÅNG TILL — 90% av
   redan 90% ≈ 81% av viewporten, centrerat — så innehållet drogs in ~4,5% på
   varje sida jämfört med intro-rubriken och "Så här fungerar det"-korten.
   Här fyller raderna i stället sin kolumn helt, så vänster- OCH högerkant följer
   exakt samma container (--go-content-width) som resten av sidan. Generellt via
   arkiv-wrappern, inga fasta pixelmarginaler. */
body #page-container .zmart-event-archive .go-row,
body #page-container .zmart-artikel-archive .go-row {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Filterknapparna: återanvander Intervjuer-monstret — lika breda, kompakta. */
body #page-container a.zmart-event-filter-button.go-button--lg,
body #page-container button.zmart-event-filter-button.go-button--lg {
  min-width: 10rem;
  width: 10rem;
  height: 3rem;
  padding: 0 1.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Aktiv filterknapp inverterar INTE vid hover. */
body #page-container .zmart-event-filter-button.is-active.go-button--primary,
body #page-container .zmart-event-filter-button.is-active.go-button--primary:hover {
  background-color: var(--go-color-primary) !important;
  color: #FFFFFF !important;
}

/* ==========================================================================
   FILTERCHIPSEN I .zmart-toolbar — storlek och overflow
   --------------------------------------------------------------------------
   Chipsen far klasserna go-button go-button--primary go-button--lg fran
   bryggan. Storleksmodifieraren --lg ar enligt sin egen kommentar avsedd
   ENDAST for hero-CTA:erna: min-width 12.5rem (200px) och, i mobilens
   media query, width 100%.

   Pa mobil ar chipsraden medvetet flex-wrap: nowrap + overflow-x: auto,
   alltsa en scrollbar rad. Ett chip med width: 100% racknar da 100% mot
   behallaren, behallaren vaxer efter sitt innehall, och sidan blir flera
   ganger bredare an viewporten. Med sex till sju chips a 200px min-width
   raknade det upp till flera tusen pixlar. Det var grundorsaken till den
   horisontella scrollen pa Naringslivet, Intervjuer och Program.

   Regeln ar skriven mot KOMPONENTEN, inte mot enskilda posttyper, sa den
   galler alla arkiv som anvander .zmart-toolbar — aven framtida, och
   oavsett hur manga kategorier som tillkommer.
   ========================================================================== */
body #page-container .zmart-toolbar__chips .go-button--lg,
body #page-container .zmart-toolbar__chips a.go-button--lg,
body #page-container .zmart-toolbar__chips button.go-button--lg {
	width: auto !important;
	min-width: 0 !important;
	max-width: 100% !important;
	height: 3rem;
	padding: 0 1.25rem;
	flex: 0 0 auto;
}

/* Eventkort: samma hover som ovriga kort (flat i vila, skugga vid hover). */
/* Eventkort och artikelkort delar samma kortlayout -- se aven meta/rytm/knapp-
   reglerna nedan. Bilden ska fylla kortets hela bredd, darfor padding:0 pa
   sjalva kortet; allt innehåll far sin inre luft via card-body-paddingen. */
body #page-container .zmart-event-card,
body #page-container .zmart-artikel-card { padding: 0; overflow: hidden; }
body #page-container .zmart-event-card-body,
body #page-container .zmart-artikel-card-body { padding: 1.25rem 1.5rem 1.5rem; }

/* Gemensam meta-stil for kort (datum/tid-rad + ikoner) -- eventkort och artikelkort
   delar samma visuella uttryck via denna regel istallet for dubblerad CSS. Ikonerna
   arver storlek (1em) och farg (currentColor) automatiskt fran denna regel. */
body #page-container .zmart-event-card-meta,
body #page-container .zmart-artikel-card-meta { color: var(--go-color-text-muted, #5A6B82); font-size: 0.875rem; margin-bottom: 0.75rem; }

/* Vertikal rytm i artikelkortet -- speglar eventkortets explicita margin-
   kedja (satt i zmart-events.css) istallet for artikelpluginets platta
   gap:0.5rem. Vi rortem inte i nagondera pluginets egen CSS-fil (bada
   dokumenterar sig sjalva som "strukturell layout, presentationen agas av
   temat") -- hela rytmen sker darfor har, med samma varden som eventkortet
   for att de tva komponentfamiljerna ska kannas identiska. */
body #page-container .zmart-artikel-card-body { gap: 0; }
body #page-container .zmart-artikel-card-body > * { margin: 0; }
body #page-container .zmart-event-card-title,
body #page-container .zmart-artikel-card-title { margin-bottom: 0.625rem; }
body #page-container .zmart-event-card-excerpt,
body #page-container .zmart-artikel-card-excerpt { margin-bottom: 1.125rem; }
/* Golv mot knappen aven om ingressen saknas -- samma nth-last-child-teknik
   som eventkortets egen CSS anvander for platsraden. */
body #page-container .zmart-artikel-card-body > *:nth-last-child(2) { margin-bottom: 1.5rem; }

/* Knappplacering: eventkortets "Las mer & anmal dig" ar centrerad. Speglar
   det har sa artikelkortets "Las mer" far samma placering. Sjalva knappens
   utseende ar redan identiskt via den delade .go-button/.go-button--primary-
   basklassen -- bara justeringen skiljde sig. */
body #page-container .zmart-artikel-card .zmart-artikel-button {
  /* margin-top:auto maste upprepas har -- var> *-reseten ovan har hogre
     specificitet (body #page-container-prefix) an pluginets .zmart-artikel-
     button-regel och skulle annars nollstalla den, sa knappen slutade tryckas
     till kortets nederkant. */
  margin-top: auto;
  align-self: center;
  text-align: center;
}
body #page-container .zmart-event-badge {
  background-color: var(--go-color-primary);
  color: #FFFFFF;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
}

/* Artikelkort (Naringslivet + startsideteaser): samma badge-stil som eventkorten.
   Strukturen (position:absolute) ligger redan i zmart-redaktion.css -- detta ar bara
   presentationen, som pluginet medvetet inte agar. */
body #page-container .zmart-artikel-badge {
  background-color: var(--go-color-primary);
  color: #FFFFFF;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
}

/* Stegkorten i "Så här fungerar det". */
body #page-container .gocard-program-hur { padding: 1.75rem 1.5rem; }

/* Eventets faktablock på enskild eventsida. */
body #page-container .zmart-event-details { margin-bottom: 2rem; }
body #page-container .zmart-event-facts__item dt { font-weight: 700; margin-bottom: 0.25rem; }


/* ==========================================================================
   EVENTSIDA (zmart_event) - egen Theme Builder-mall
   Mall 1170 + body-layout 1169 galler ENDAST enskilda event. Ovriga sidor
   anvander standardmallen (16 / body 74) och ar helt opaverkade.

   Varfor en egen mall: standardmallens .gosec-body-content har padding:0 och
   en hardkodad hero-bakgrundsbild. Ovriga sidor kompenserar med sin egen hero
   (padding-top 185px), men eventsidan har ingen - darfor hamnade innehallet
   under den fixerade headern och arvde fel bakgrundsbild.
   ========================================================================== */

/* SPECIFICITET: Divi satter padding pa sektionen via
   `.et-db #et-boc .et-l .et_pb_section_0_tb_body.et_pb_section` = 0,4,1 och
   levererar den i et-core-unified som laddas EFTER style.css. En regel pa
   `body #page-container ...` (1,2,1) forlorar darfor bade pa
   specificitet OCH laddningsordning. Vi matchar Divis egna sektionsklasser
   istallet for att ta till !important: Divis kedja .et-db #et-boc .et-l plus
   var egen klass ger (1,4,1) mot Divis (1,4,0) - vinner pa elementet. */
.et-db #et-boc .et-l .et_pb_section.gosec-event-body {
  /* !important kravs: Divis regel ligger i et-core-unified som laddas EFTER
     style.css, sa lika specificitet racker inte. */
  padding-top: 215px !important;
  padding-bottom: var(--go-section-padding-y) !important;
  background-color: var(--go-color-bg-white);
}

@media (max-width: 61.25rem) {
  .et-db #et-boc .et-l .et_pb_section.gosec-event-body { padding-top: 150px !important; }
}

@media (max-width: 47.9375rem) {
  .et-db #et-boc .et-l .et_pb_section.gosec-event-body { padding-top: 135px !important; }
}

/* Eventinnehallet halls inom sajtens standardbredd (90%, centrerat) - samma
   princip som .go-row pa ovriga sidor. */
body #page-container .gosec-event-body .zmart-event-details,
body #page-container .gosec-event-body .et_pb_post_content > p,
body #page-container .gosec-event-body .et_pb_post_content > h2,
body #page-container .gosec-event-body .et_pb_post_content > h3,
body #page-container .gosec-event-body .et_pb_post_content > ul,
body #page-container .gosec-event-body .et_pb_post_content > ol {
  width: var(--go-content-width);
  max-width: var(--go-content-max-width);
  margin-left: auto;
  margin-right: auto;
}

/* ==========================================================================
   ENSKILD EVENTSIDA - hero, fakta, fordelar
   Renderas av pluginet zmart-events via the_content pa zmart_event.
   Klasserna mappas i inc/zmart-events-bridge.php. Alla komponenter
   (go-card, go-button, go-icon-box, go-heading) ateranvands - endast
   layout och eventspecifika detaljer definieras har.
   ========================================================================== */

/* --- Hero: tva kolumner, innehall + bild --- */
/* --- HERO-BAKGRUND (eventsida) --------------------------------------------
   Ovriga sidors hero (Hem, Om GO!, Partner, Kontakt, Program) har INGEN
   CSS-gradient och ingen overlay - fadet ligger i SJALVA BILDEN, som ar
   ljusgra (#F2F2F2) over vanstra ~45% och sedan overgar i fotot till hoger.
   Uppmatt i bildfilen. Divi satter den som sektionsbakgrund med
   background-size: cover + no-repeat.

   Eventheron ar ren HTML fran pluginet och har ingen Divi-modul att satta
   bakgrunden i, sa samma bild och samma parametrar sätts har i stallet.
   Eventets EGEN bild ligger kvar i hogerkolumnen och ror vi inte.

   VAL: bakgrundsBILDEN anvands INTE har (anvandarens beslut) - i stallet en
   ren CSS-gradient som foljer bildens egen tonkurva (#F2F2F2 -> ljusare mot
   hoger). Ger samma visuella avbrott mot den vita menysektionen utan extra
   bildnedladdning, och utan att konkurrera med eventets egen bild.

   position: right center - samma som Divi-modulerna anvander, sa den ljusgra
   delen hamnar till vanster dar texten star.

   Utbrytningen (calc) behovs eftersom pluginet renderar inuti post-content
   som ar begransad till satsytan - utan den skulle bakgrunden sluta vid
   90%-kanten i stallet for att ga kant till kant som pa ovriga sidor.
   -------------------------------------------------------------------------- */
body #page-container .gosec-event-hero {
  background-color: var(--go-color-hero-bg);
  /* Ingen egen padding-top: body-wrappern (.gosec-event-body) har redan
     185px som kompenserar for den fixerade headern - samma varde som
     referenssidornas hero har internt. Utan detta blev kompensationen
     dubbel och innehallet lag 71px lagre an pa ovriga sidor (uppmatt).
     SAMMA HOJD SOM .gosec-hero (uppmatt pa Partner: 750px, padding-bottom
     1.75rem). Referenssidornas hero bar sjalv de 185px; har ligger de pa
     body-wrappern i stallet. Nettot blir identiskt. */
  /* HOJDEN: Partners hero ar 750px INKLUSIVE sina egna 185px padding-top
     (uppmatt). Eventheron har de 185px pa body-wrappern i stallet, sa dess
     EGEN hojd ska vara 750 - 185 = 565px for att sektionen ska sluta pa
     samma absoluta hojd. Med 750px svammade den over 185px och nasta
     sektion borjade pa 967 i stallet for 782 (uppmatt). */
  /* min-height, INTE height: en fast hojd klipper inte innehallet - den
     later det svamma over, sa CTA-raden hamnade utanfor sektionen sa fort
     eventet hade manga faktafalt. Med min-height behalls samma hojd som
     ovriga sidors hero i normalfallet (den tvarsidiga linjen bevaras), men
     sektionen vaxer nar innehallet kraver det. */
  min-height: 535px;
   /* 185 -> 215 (2026-07-27): samma nedflytt av eyebrow som .gosec-hero fick.
      Heroens min-height sanks 565 -> 535 sa sektionens underkant hamnar pa
      exakt samma tvarsidiga linje som forut (215 + 535 = 750). */
  box-sizing: border-box;
  display: flex;
  align-items: stretch;
  padding-top: 0;
  padding-bottom: 1.75rem;
  background-image:
    linear-gradient(
      to bottom,
      rgba(255, 255, 255, 1) 0%,
      rgba(255, 255, 255, 0.92) 12%,
      rgba(255, 255, 255, 0.62) 34%,
      rgba(255, 255, 255, 0.28) 60%,
      rgba(255, 255, 255, 0) 88%
    ),
    linear-gradient(
      100deg,
      #EDEEF0 0%,
      #EFF0F2 40%,
      #F4F5F6 68%,
      var(--go-color-hero-bg) 100%
    );
  /* Utbrytning till viewportbredd. INGEN padding-left/right har: regeln
     `body #page-container .go-section:not(.gosec-hero)` satter padding med
     !important och skulle anda vinna. Innehallets position styrs i stallet
     av raden inuti (.gorow-event-hero, 90% centrerad) - samma mekanik som
     pa ovriga sidors hero, dar sektionen ocksa saknar horisontell padding. */
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}


/* Kolumnfordelning kopierad fran Partner-heron: vansterkolumnen 686px av
   1715px = 40%. Uppmatt, inte gissat. align-items: stretch (INTE center)
   sa vansterkolumnen fyller hojden och kan forankra CTA-raden mot botten
   - samma mekanik som .gosec-hero. */
body #page-container .gorow-event-hero {
  width: var(--go-content-width);
  max-width: var(--go-content-max-width);
  height: 100%;
  margin-left: auto;
  margin-right: auto;
  display: grid;
  /* 45/55 (var 40/60): bilden ar nedskalad till 2/3, sa textkolumnen far
     mer utrymme och faktarutnatet plats att lagga sig i tva kolumner. */
  grid-template-columns: 45% minmax(0, 1fr);
  gap: var(--go-row-gap);
  align-items: stretch;
}

/* Vansterkolumnen: innehallet uppifran, CTA-raden forankrad mot botten via
   margin-top:auto - exakt samma monster som .gosec-hero anvander. */
body #page-container .gocol-event-hero-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

body #page-container .gocol-event-hero-content .zmart-event-hero-ctas {
  margin-top: auto;
}

/* Bilden centreras BADE vertikalt och horisontellt i sin kolumn.
   justify-content var flex-end, vilket tryckte bilden mot hogerkanten -
   tydligt nu nar den ar smalare an kolumnen (480px i en ca 690px bred
   kolumn vid 1440px). center ger jamn luft pa bada sidor. */
body #page-container .gocol-event-hero-media {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  min-width: 0;
}

/* Uppmatt fore: 837x471 = 394 000 px2. Med 40/60-kolumnerna blir bredden
   ca 989px, och max-height 24rem (384px) haller hojden nere. Resulterande
   yta ligger ca en tredjedel under utgangslaget. object-fit: cover sa
   beskarningen blir jamn oavsett vilket format redaktoren laddar upp. */
/* BILDENS PROPORTION (uppmatt, inte gissad):
   Ursprunget vid 1440px var 754x384 (1.96:1). Att bara sanka max-height
   gjorde den 691x256 = 2.7:1, alltsa en BRED OCH LAG remsa - fel hall.
   Nu 480x320 (3:2) vid samma viewport: 64% av ursprungets bredd, 83% av
   hojden, drygt halva ytan. Smalare och nagot hogre, precis som onskat.
   max-width later bilden krympa pa smala skarmar; aspect-ratio haller
   formatet konstant oavsett vad redaktoren laddar upp. */
body #page-container .gocol-event-hero-media img {
  display: block;
  width: 100%;
  max-width: clamp(30rem, 50vw, 62.5rem);
  height: auto;
  aspect-ratio: 25 / 12;
  object-fit: cover;
  /* Beskarningen ska alltid utga fran bildens overkant, aldrig kapa
     toppen - viktigt for portrattbilder dar motivets huvud annars klipps. */
  object-position: center top;
  border-radius: var(--go-card-radius);
}

/* Eyebrow + H1 sitter tatt ihop - samma rytm som ovriga heroer */
body #page-container .gocol-event-hero-content .go-heading--h1 { margin-top: 0.9375rem; }
body #page-container .gocol-event-hero-content .gotxt-section-intro { margin-top: 1rem; }

/* Knappraden: .gorow-hero-ctas har bara flex+gap som delad komponent -
   avstandet uppat satts normalt av Divi-radens egen padding, som inte
   finns har (pluginet renderar ren HTML, inte Divi-moduler). */
body #page-container .gocol-event-hero-content .gorow-hero-ctas {
  margin-top: 2rem;
}

/* --- Faktalista: ikon + varde per rad --- */
/*
 * Faktalistan lag tidigare i EN kolumn, sa varje nytt falt gjorde heron
 * hogre. Nu ALLTID TVA kolumner (anvandarens beslut).
 *
 * auto-fit provades men gav TRE smala kolumner pa breda skarmar, vilket
 * blev rorigt. Tva fasta kolumner ar lugnare och mer lattlasta: falten
 * fylls uppifran och ner i vansterkolumnen forst (grid-auto-flow: column
 * med ett rakt radantal), sa datum/tid/plats hamnar till vanster och
 * deltagare/pris till hoger.
 *
 * grid-auto-flow: row (standard) hade fyllt RADVIS - datum, tid pa forsta
 * raden - vilket inte ar den grupperingen anvandaren bad om.
 */
body #page-container .golist-event-facts {
  list-style: none;
  margin: 1.75rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.875rem 1.5rem;
  align-items: start;
  width: 100%;
}

body #page-container .zmart-event-facts__item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin: 0;
  font-family: var(--go-font-body);
  font-size: var(--go-body-size);
  color: var(--go-color-body);
}

/* Ikonen far accentfargen - samma sparsamma guldanvandning som ovrigt */
body #page-container .zmart-event-facts__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--go-color-secondary-text);
}

body #page-container .zmart-event-facts__body { flex: 1 1 auto; }

body #page-container .zmart-event-facts__note {
  display: block;
  font-size: var(--go-text-small-size);
  color: var(--go-color-body);
  opacity: 0.8;
}

/* --- Status (installt/fullbokat/passerat) --- */
body #page-container .gotxt-event-status {
  margin-top: 0.75rem;
  color: var(--go-color-secondary-text);
}

/* --- Fordelar: rubrik + fyra kort --- */
body #page-container .gosec-event-body .zmart-event-benefits-heading {
  margin: 0 0 1.75rem;
}

body #page-container .gorow-event-benefits {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem;
}

/* Ikonrutan: .go-icon-box satter bara display:flex + border-radius.
   Storleken ligger i separata modifierare (--sm/--md/--lg). Utan nagon
   av dem blir flexboxen full kortbredd = avlanga streck i stallet for
   cirklar. Vi satter --md-storleken har i stallet for att lagga till
   modifieraren i bryggan, sa pluginet slipper kanna till temats
   storleksskala. */
body #page-container .gocard-event-benefit .go-icon-box {
  flex: 0 0 auto;
  width: var(--go-icon-md);
  height: var(--go-icon-md);
}

body #page-container .gocard-event-benefit {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

body #page-container .gocard-event-benefit .go-heading--h3 { margin: 0; }
body #page-container .gocard-event-benefit .go-text { margin: 0; }

/* --- Betalningsnot --- */
body #page-container .gotxt-event-payment {
  width: var(--go-content-width);
  margin: 1.5rem auto 0;
  font-size: var(--go-text-small-size);
}

/* --- Smalare desktop/laptop: hero blir enkolumn, bilden under innehallet ---
   Egen brytpunkt 1440px (90rem), medvetet BREDARE an standardbrytpunkten
   980px (--go-bp-tablet): pa smalare desktop/laptop blev vansterkolumnen
   for trang for text, eventfakta och knappar i tvakolumnslaget. Under 90rem
   staplas i stallet allt i en kolumn. Bilden ligger sist i naturlig
   dokumentordning (ingen order-egenskap langre pa mediekolumnen), sa
   text + knappar alltid kommer forst och bilden sist - aven pa surfplatta
   och mobil, som ärver samma enkolumnslage nedat i kaskaden. */
@media (max-width: 89.9375rem) {
  /* Samma princip som .gosec-hero: under brytpunkten styr innehallet
     hojden. min-height MASTE nollstallas explicit - height: auto upphaver
     INTE min-height, sa 565px-golvet hade foljt med ner och gett en
     onodigt hog hero med tomrum under innehallet. */
  body #page-container .gosec-event-hero { min-height: 0; height: auto; display: block; padding-top: var(--go-section-padding-y); }
  body #page-container .gorow-event-hero { height: auto; grid-template-columns: 1fr; }
  body #page-container .gocol-event-hero-content .zmart-event-hero-ctas { margin-top: 2rem; }
  /* Bilden hamnar under text och knappar i naturlig dokumentordning.
     Fortfarande horisontellt centrerad over hela radens bredd. */
  body #page-container .gocol-event-hero-media { justify-content: center; }
  /* Fullbredd i enkolumnslaget: tvakolumnslagets max-width/vw-baserade
     clamp() ska INTE folja med hit - annars blir bilden liten och centrerad
     med tomrum pa sidorna i stallet for att fylla raden. 16:9 ger en
     rimlig hojd for en bild som nu spanner hela innehallsbredden, i stallet
     for det smalare 25:12-formatet som var avstamt mot den bredare men
     lagre tvakolumnsbilden. object-position (overkant) arvs oforandrad. */
  body #page-container .gocol-event-hero-media img { max-width: none; aspect-ratio: 16 / 9; }
}

/* --- Mobil: allt i en kolumn --- */
@media (max-width: 47.9375rem) {
  body #page-container .golist-event-facts { margin-top: 1.25rem; }
}

/* --- Agenda / tidslinje --------------------------------------------------
   Tidslinjen ar en <ol> dar varje punkt har tid + rubrik + text.
   Linjen ritas med ett ::before pa listan och prickarna med ::before pa
   varje li - inga extra element i markup. Tiden ar valfri per rad, sa
   layouten far inte kollapsa nar den saknas.
   -------------------------------------------------------------------------- */
body #page-container .gosec-event-body .zmart-event-agenda-heading,
body #page-container .gosec-event-body .zmart-event-speakers-heading {
  margin: 0;
}

body #page-container .golist-event-agenda {
  position: relative;
  width: 100%;
  margin: 1.75rem 0 0;
  padding: 0 0 0 2rem;
  list-style: none;
}

/* Den vertikala linjen. Slutar vid sista prickens mitt i stallet for att
   fortsatta ut i tomma intet - darav bottom-varde i stallet for height. */
body #page-container .golist-event-agenda::before {
  content: "";
  position: absolute;
  left: 0.3125rem;
  top: 0.5rem;
  bottom: 1.5rem;
  width: 2px;
  background-color: var(--go-color-border);
}

body #page-container .goitem-event-agenda {
  position: relative;
  display: grid;
  grid-template-columns: 6rem 1fr;
  gap: 0.25rem 1.25rem;
  padding-bottom: 1.75rem;
}

body #page-container .goitem-event-agenda:last-child { padding-bottom: 0; }

/* Pricken pa linjen */
body #page-container .goitem-event-agenda::before {
  content: "";
  position: absolute;
  left: -2rem;
  top: 0.4375rem;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background-color: var(--go-color-secondary);
}

body #page-container .gotxt-agenda-time {
  font-family: var(--go-font-heading);
  font-weight: 600;
  font-size: var(--go-body-size);
  color: var(--go-color-secondary-text);
  font-variant-numeric: tabular-nums;
}

body #page-container .zmart-event-agenda__body {
  display: block;
  grid-column: 2;
}

/* Nar tiden saknas ska texten anda ligga over hela bredden */
body #page-container .goitem-event-agenda > .zmart-event-agenda__body:first-child {
  grid-column: 1 / -1;
}

body #page-container .gotxt-agenda-title {
  display: block;
  font-family: var(--go-font-heading);
  font-weight: 600;
  font-size: var(--go-h4-size);
  color: var(--go-color-heading);
  line-height: 1.4em;
}

body #page-container .gotxt-agenda-text {
  display: block;
  margin-top: 0.25rem;
}

/* Mobil: tiden hamnar over rubriken i stallet for bredvid */
@media (max-width: 47.9375rem) {
  body #page-container .goitem-event-agenda { grid-template-columns: 1fr; }
  body #page-container .zmart-event-agenda__body { grid-column: 1; }
}

/* --- BRODTEXTENS AVSTAND fran pluginets sektioner ------------------------
   Pluginet renderar hero/fordelar/agenda via the_content-filtret och
   Divi skriver ut eventets egen brodtext DIREKT efter, som syskon utan
   wrapper. Breddregeln ovan satter bara horisontell marginal, sa forsta
   stycket hamnade tatt mot sista agendapunkten. Marginalen laggs pa
   FORSTA barnet i post-content sa den galler oavsett vilken sektion som
   rakar komma sist (agenda, fordelar eller betalningsnot).
   -------------------------------------------------------------------------- */
body #page-container .gosec-event-body .zmart-event-hero ~ p:first-of-type,
body #page-container .gosec-event-body .zmart-event-benefits-section ~ p:first-of-type,
body #page-container .gosec-event-body .zmart-event-agenda ~ p:first-of-type,
body #page-container .gosec-event-body .zmart-event-payment-note ~ p:first-of-type {
  margin-top: var(--go-section-padding-y);
}

/* Styckesrytm i brodtexten - Divi nollstaller p-marginaler */
body #page-container .gosec-event-body .et_pb_post_content > p + p {
  margin-top: 1rem;
}

/* --- Talare / medverkande ------------------------------------------------
   Samma kortrutnat som fordelarna (4 -> 2 -> 1 kolumner). Portrattet ar
   kvadratiskt och beskars med object-fit sa olika bildformat inte ger
   ojamna kort. Infoboxen anvands for t.ex. "Fler talare tillkommer".
   -------------------------------------------------------------------------- */


body #page-container .gorow-event-speakers {
  display: grid;
  gap: 1.25rem;
  width: 100%;
  margin: 1.75rem 0 0;
}

body #page-container .gocard-event-speaker {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

body #page-container .gomedia-event-speaker {
  margin-bottom: 0.5rem;
}

/* Kvadratiskt portratt - olika kallbilder ska inte ge olika hoga kort */
body #page-container .zmart-event-speaker__image {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 0.5rem;
}

body #page-container .gotxt-speaker-role {
  font-family: var(--go-font-heading);
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--go-color-secondary-text);
  margin: 0;
}

body #page-container .gotxt-speaker-bio {
  margin: 0;
}

/* Infobox under talarna */
body #page-container .gonote-event-speakers {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  width: 100%;
  margin: 1.25rem 0 0;
  padding: 1.125rem 1.375rem;
  border-radius: 0.5rem;
  background-color: var(--go-color-bg-light);
  border-left: 4px solid var(--go-color-secondary);
}

body #page-container .zmart-event-speakers-note__icon {
  display: inline-flex;
  flex: 0 0 auto;
  color: var(--go-color-secondary-text);
  margin-top: 0.125rem;
}

body #page-container .zmart-event-speakers-note__icon svg {
  width: 1.25rem;
  height: 1.25rem;
}





/* --- Programsektion: agenda + medverkande sida vid sida -------------------
   Tva oberoende kolumner. Vanster vaxer med antalet programpunkter,
   hoger med antalet talare - inga fasta hojder nagonstans.

   data-columns styr om sektionen ar tva- eller enkolumnig, sa en ensam
   agenda (eller ensamma talare) tar hela bredden i stallet for att lamna
   ett tomrum bredvid sig.

   align-items: start hindrar kolumnerna fran att stracka sig till samma
   hojd - en kort agenda ska inte tvinga fram luft under talarkorten.
   -------------------------------------------------------------------------- */
body #page-container .gorow-event-program {
  display: grid;
  align-items: start;
  gap: 2.5rem;
  width: var(--go-content-width);
  margin: var(--go-section-padding-y) auto 0;
}

body #page-container .gorow-event-program[data-columns="two"] {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

body #page-container .gorow-event-program[data-columns="one"] {
  grid-template-columns: minmax(0, 1fr);
}

/* minmax(0,1fr) i stallet for 1fr: annars kan ett langt ord i en bio tvinga
   kolumnen bredare an sin andel och krossa den andra kolumnen. */
body #page-container .gocol-event-program {
  min-width: 0;
}

/* --- Talarkort: layouten foljer antalet ---------------------------------- */

/* 1-3 talare: breda kort med portrattet till vanster om texten.
   Kortet blir lagt och kolumnen matchar agendans hojd battre. */
body #page-container .gorow-event-speakers[data-layout="wide"] {
  grid-template-columns: minmax(0, 1fr);
}

body #page-container .gorow-event-speakers[data-layout="wide"] .gocard-event-speaker {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
}

/* 4+ talare: kompakt rutnat, tva kort per rad, portrattet ovanfor texten.
   Utan detta blir kolumnen orimligt hog vid manga talare. */
body #page-container .gorow-event-speakers[data-layout="compact"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

body #page-container .gorow-event-speakers[data-layout="compact"] .gocard-event-speaker {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

body #page-container .gorow-event-speakers[data-layout="compact"] .gotxt-speaker-bio {
  font-size: 0.9375rem;
}

body #page-container .zmart-event-speaker__body {
  min-width: 0;
}

/* --- Brytpunkter ---------------------------------------------------------
   980px: programsektionen gar till EN kolumn - agendan forst, sedan talarna.
   767px: portrattet hamnar over texten aven i breda kort.
   -------------------------------------------------------------------------- */
@media (max-width: 61.25rem) {
  body #page-container .gorow-event-program[data-columns="two"] {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--go-section-padding-y);
  }
}

@media (max-width: 47.9375rem) {
  body #page-container .gorow-event-speakers[data-layout="wide"] .gocard-event-speaker {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  body #page-container .gorow-event-speakers[data-layout="compact"] {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --- Fordelssektion med fullbreddsbakgrund --------------------------------
   Ovriga undersidor inleder med en ljusbla sektion vars bakgrund gar kant
   till kant (.gosec-program-intro, .gosec-partners-huvud, .gosec-om-varfor).
   Pa eventsidan renderar pluginet inuti Divis post-content, som ar begransad
   till satsytan - darfor racker det inte att satta en bakgrundsfarg, den
   maste ocksa BRYTA UT ur containern.

   Metod: negativ marginal ut till viewportkanten med matchande padding
   tillbaka. Fungerar oavsett containerns bredd och kraver ingen kannedom
   om satsytans procentsats.
   -------------------------------------------------------------------------- */
body #page-container .gosec-event-benefits {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: calc(50vw - 50%);
  padding-right: calc(50vw - 50%);
}

/* Innehallet halls inom samma satsyta som resten av sidan. */
body #page-container .gorow-event-benefits-inner {
  width: var(--go-content-width);
  max-width: var(--go-content-max-width);
  margin-left: auto;
  margin-right: auto;
}

/* --- Avslutande sektion: praktisk info + anmalan ---------------------------
   Tvakolumn nara sidans slut. Bada korten stracks till samma hojd via
   align-items: stretch pa rutnatet - darfor far anmalningsblocket samma
   hojd som den langre praktiska listan.
   -------------------------------------------------------------------------- */
body #page-container .gorow-event-closing-inner {
  width: var(--go-content-width);
  max-width: var(--go-content-max-width);
  margin-left: auto;
  margin-right: auto;
}

body #page-container .gorow-event-closing {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--go-row-gap);
  align-items: stretch;
}

/* Saknas en av delarna tar den andra hela bredden. */
body #page-container .gorow-event-closing[data-columns="one"] {
  grid-template-columns: minmax(0, 1fr);
}

/* --- Praktisk information (vanster kort) --- */
body #page-container .gocard-event-practical {
  display: flex;
  flex-direction: column;
  padding: 2.25rem;
}

body #page-container .gocard-event-practical .go-heading--h2 {
  margin-top: 0;
  margin-bottom: 1.75rem;
}

body #page-container .golist-event-practical {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Ikon till vanster om texten. align-items: flex-start haller ikonen i linje
   med rubrikens forsta rad aven nar brodtexten ar lang. */
body #page-container .goitem-event-practical {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

/* flex-shrink: 0 - utan den kryper ikonen ihop nar texten ar lang. */
body #page-container .goicon-event-practical {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  color: var(--go-color-secondary-text);
  margin-top: 0.15rem;
}

body #page-container .gobody-event-practical {
  min-width: 0;
}

/* Guldfargad, liten rubrik - inte samma vikt som ovriga H3 pa sidan. */
body #page-container .goitem-event-practical .go-heading--gold {
  color: var(--go-color-secondary-text);
  font-size: 1rem;
  margin-top: 0;
  margin-bottom: 0.25rem;
}

body #page-container .goitem-event-practical .go-text {
  margin-bottom: 0;
  font-size: 0.95rem;
}

/* --- Anmalningsblocket (hoger kort) ---------------------------------------
   Navyblatt kort. Egen komponent eftersom sajten inte har nagot morkt kort
   sedan tidigare. Falten ar avstangda i detta steg - funktionaliteten
   kopplas i fas 2.
   -------------------------------------------------------------------------- */
body #page-container .gocard-event-signup {
  display: flex;
  flex-direction: column;
  background-color: var(--go-color-primary);
  color: #FFFFFF;
  border-radius: 0.5rem;
  padding: 2.25rem;
}

body #page-container .gorow-event-signup-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

body #page-container .gocard-event-signup .go-heading--h2 {
  color: #FFFFFF;
  margin-top: 0;
  margin-bottom: 0;
}

body #page-container .gobadge-event-signup {
  font-size: 0.85rem;
  color: var(--go-color-secondary);
  white-space: nowrap;
}

body #page-container .gotext-event-signup {
  margin-top: 0.75rem;
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.85);
}

/* Informationsmeddelande - ikon plus text, guldton mot navybakgrunden. */
body #page-container .gonotice-event-signup {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  margin-top: 1.25rem;
  margin-bottom: 0;
  padding: 0.85rem 1rem;
  border-radius: 0.375rem;
  background-color: rgba(255, 255, 255, 0.08);
  color: #FFFFFF;
  font-size: 0.95rem;
}

body #page-container .zmart-event-signup-notice__icon {
  flex-shrink: 0;
  display: inline-flex;
  width: 1.25rem;
  color: var(--go-color-secondary);
  margin-top: 0.1rem;
}

/* Faltrutnat: namn och e-post sida vid sida, foretag over hela bredden. */
body #page-container .gorow-event-signup-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}

body #page-container .zmart-event-signup-field--wide {
  grid-column: 1 / -1;
}

body #page-container .gofield-event-signup {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

body #page-container .golabel-event-signup {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.9);
}

body #page-container .zmart-event-signup-required {
  color: var(--go-color-secondary);
}

body #page-container .goinput-event-signup {
  width: 100%;
  padding: 0.65rem 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 0.25rem;
  background-color: #FFFFFF;
  color: var(--go-color-heading);
  font-family: inherit;
  font-size: 1rem;
}

/* Knappen bottenforankras sa bada korten far samma hojd utan tomrum. */
body #page-container .gorow-event-signup-actions {
  margin-top: 1.5rem;
  margin-bottom: 0;
}

body #page-container .gobtn-event-signup {
  display: inline-block;
  padding: 0.75rem 1.75rem;
  border-radius: 0.25rem;
  background-color: var(--go-color-secondary);
  color: var(--go-color-heading);
  font-weight: 600;
  text-decoration: none;
}

body #page-container .gotext-event-signup-consent {
  margin-top: 1.25rem;
  margin-bottom: 0;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.7);
}

/* En kolumn under 980px - samma brytpunkt som ovriga eventsektioner. */
@media (max-width: 61.25rem) {
  body #page-container .gorow-event-closing {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 47.9375rem) {
  body #page-container .gorow-event-signup-fields {
    grid-template-columns: minmax(0, 1fr);
  }
  body #page-container .gocard-event-practical,
  body #page-container .gocard-event-signup {
    padding: 1.5rem;
  }
  body #page-container .gowrap-event-outro[data-divider="yes"] {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
  }
}

/* Meddelandefaltet: textarea plus hjalptext under. Fyller hela bredden. */
body #page-container .zmart-event-signup-input--textarea {
  resize: vertical;
  min-height: 5.5rem;
  line-height: 1.5;
}

body #page-container .gohelp-event-signup {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.7);
}

/* --- Program: kontrollrad (filter + sortering) -----------------------------
   Filterknapparna till vanster, sorteringen till hoger. flex-wrap gor att
   sorteringen hamnar under filtren nar de inte far plats pa samma rad,
   i stallet for att knapparna klams ihop.
   -------------------------------------------------------------------------- */
body #page-container .gorow-event-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

/* Filtergruppen tar tillgangligt utrymme; knapparna radbryter internt. */
body #page-container .gogroup-event-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  flex: 1 1 auto;
  min-width: 0;
}

/* Sorteringen krymper aldrig - flex-shrink: 0 haller select lasbar. */
body #page-container .gowrap-event-sort {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 0 0 auto;
  margin-left: auto;
}

body #page-container .golabel-event-sort {
  font-size: 0.9rem;
  color: var(--go-color-heading);
  white-space: nowrap;
}

body #page-container .goselect-event-sort {
  padding: 0.6rem 2rem 0.6rem 0.85rem;
  border: 1px solid var(--go-color-border);
  border-radius: 0.25rem;
  background-color: var(--go-color-bg-white);
  color: var(--go-color-heading);
  font-family: inherit;
  font-size: 0.95rem;
  line-height: 1.4;
  cursor: pointer;
  max-width: 100%;
}

body #page-container .goselect-event-sort:focus-visible {
  outline: 2px solid var(--go-color-primary);
  outline-offset: 2px;
}

/* Under 767px hamnar sorteringen pa egen rad och far full bredd. */
@media (max-width: 47.9375rem) {
  body #page-container .gowrap-event-sort {
    margin-left: 0;
    width: 100%;
  }
  body #page-container .goselect-event-sort {
    flex: 1 1 auto;
  }
}

/* --- Programsektion: staplat lage vid manga talare -------------------------
   Mallen satter data-stacked=yes fran och med 5 talare (filtrerbart via
   zmart_events_speakers_stacked_from). Da tar agendan hela bredden och
   medverkande hamnar under den i ett brett rutnat, i stallet for att
   hogerkolumnen blir dubbelt sa hog som agendan.
   data-columns ar redan "one" i det laget, sa griden behover ingen
   extra regel - men talarrutnatet far ett eget layoutvarde.
   -------------------------------------------------------------------------- */
/*
 * auto-fit i stallet for fast kolumnantal: rutnatet packar in sa manga kort
 * som ryms med minbredden, utan brytpunkter att underhalla. Vid bred skarm
 * ryms sex eller fler pa en rad; pa laptop faller det till fem eller fyra av
 * sig sjalvt i stallet for att klamma ihop namn och roll.
 *
 * 11.875rem (190px) ar golvet. Uppmatt mot langsta rollraden
 * ("Redovisningskonsult, Almqvist Ekonomi", 37 tecken vid 15px fet):
 * under ~190px bryts den till tva rader, vilket ar acceptabelt, men
 * smalare an sa blir kortet rorigt. Ger sex kort pa en rad ner till
 * 1440px och aldrig smalare kort an 185px.
 */
body #page-container .gorow-event-speakers[data-layout="grid"] {
  grid-template-columns: repeat(auto-fit, minmax(11.875rem, 1fr));
  gap: 1.5rem;
}

/*
 * Portrattet ar inte langre lika brett som kortet. Bilden hade width:100%,
 * sa den vaxte med kortbredden - darfor kandes den for stor i staplat lage.
 * 10rem (160px) ligger mellan wide-lagets 7.5rem och full kortbredd.
 */
body #page-container .gorow-event-speakers[data-layout="grid"] .gomedia-event-speaker {
  width: 100%;
  max-width: 10rem;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0.75rem;
}

/* Texten centreras med bilden sa kortet halls samman. */
body #page-container .gorow-event-speakers[data-layout="grid"] .gocard-event-speaker {
  text-align: center;
}

body #page-container .gorow-event-speakers[data-layout="grid"] .gocard-event-speaker {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Bion far samma nedskalning som i kompakt lage - korten ar lika smala. */
body #page-container .gorow-event-speakers[data-layout="grid"] .gotxt-speaker-bio {
  font-size: 0.9375rem;
}

/* Rubriken over det staplade talarrutnatet behover luft fran agendan. */
body #page-container .gorow-event-program[data-stacked="yes"] .zmart-event-program-col--speakers {
  margin-top: 1rem;
}


/* --- Fordelskort: responsiv typografi + tidigare kolumnbyte ---------------
   Korten vaxlade 4 -> 2 kolumner forst vid 980px, vilket gjorde dem bara
   212px breda vid 1024px - dar bor rubriker som "Omvarldskoll" nara
   kortkanten. Samma matning som styrde eventkortens brytpunkter (1240px)
   galler har: fyra texttunga kort behover ca 260px for att andas.

   Typografin kan inte losas med clamp() eftersom clamp skalar pa VIEWPORT
   men problemet ar KORTBREDDEN - vid 1024px ar viewporten bred nog for
   clamp att ge maxvardet 22px, samtidigt som kortet ar som smalast.
   Darfor mediafragor med explicita varden i just detta intervall.
   -------------------------------------------------------------------------- */
@media (max-width: 77.5rem) {
  body #page-container .gorow-event-benefits {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body #page-container .gocard-event-benefit .go-heading--h3 {
    font-size: 1.1875rem;
    line-height: 1.3em;
  }

  body #page-container .gocard-event-benefit .go-text {
    font-size: 0.9375rem;
    line-height: 1.6em;
  }

  /* Tatare mellan ikon, rubrik och text nar kortet ar smalare. */
  body #page-container .gocard-event-benefit {
    gap: 0.625rem;
  }
}

/* En kolumn: korten blir breda igen, sa typografin far ga tillbaka
   till sina normala tokenvarden. */
@media (max-width: 40rem) {
  body #page-container .gorow-event-benefits {
    grid-template-columns: minmax(0, 1fr);
  }

  body #page-container .gocard-event-benefit .go-heading--h3 {
    font-size: var(--go-h3-size);
  }

  body #page-container .gocard-event-benefit .go-text {
    font-size: var(--go-body-size);
    line-height: var(--go-body-line-height);
  }

  body #page-container .gocard-event-benefit {
    gap: 0.75rem;
  }
}

/* KOLUMNVIS FYLLNING: falten ska lasas uppifran och ner i vanster kolumn
   forst (datum, tid, plats) och sedan hoger (deltagare, pris) - inte
   radvis som ar grid-standard. grid-auto-flow: column kraver ett explicit
   radantal, och det beror pa hur manga falt eventet har. Mallen skickar
   antalet som data-count, sa radantalet = ceil(antal / 2).

   Utan en traff pa data-count faller listan tillbaka pa radvis fyllning,
   vilket ar ett acceptabelt utseende - inte ett trasigt. */
/* 1-3 falt: EN kolumn. Tva kolumner med bara tre falt ger en obalanserad
   uppdelning (2+1) och en halvtom hogerkolumn - en enda kolumn ar lugnare
   och lases snabbare. Fran 4 falt lonar sig tva kolumner. */
body #page-container .golist-event-facts[data-count="1"],
body #page-container .golist-event-facts[data-count="2"],
body #page-container .golist-event-facts[data-count="3"] {
  grid-template-columns: minmax(0, 1fr);
  grid-auto-flow: row;
  grid-template-rows: none;
}

/* Fast uppdelning: de första TRE fakta ligger alltid i vänsterkolumnen,
   resten flyter över till höger. grid-auto-flow: column fyller uppifrån
   och ner; med exakt 3 rader tvingas fjärde fältet till höger kolumn.
   INGEN balansering (tidigare ceil(antal/2) gav 4 -> 2+2). Nu: 4 -> 3+1,
   5 -> 3+2, 6 -> 3+3. Regeln uttrycks EN gång så ett framtida sjätte fält
   hamnar rätt utan kodändring. 1-3 fält = en kolumn (regeln ovan). */
body #page-container .golist-event-facts[data-count="4"],
body #page-container .golist-event-facts[data-count="5"],
body #page-container .golist-event-facts[data-count="6"] {
  grid-auto-flow: column;
  grid-template-rows: repeat(3, auto);
}

/* Smal textkolumn: en kolumn ar lattare an tva hoptryckta. Aterstaller
   radvis flode sa faltordningen forblir den i markupen. */
@media (max-width: 61.25rem) {
  body #page-container .golist-event-facts,
  body #page-container .golist-event-facts[data-count] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: row;
    grid-template-rows: none;
  }
}

@media (max-width: 47.9375rem) {
  body #page-container .golist-event-facts,
  body #page-container .golist-event-facts[data-count] {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-flow: row;
    grid-template-rows: none;
  }
}

/* --- "Bra att veta": eventbeskrivningen som underrubrik i Praktisk
   information-kortet. Tidigare en egen ljusbla sektion langst ned pa
   sidan - flyttad hit 2026-08-27 pa kundens begaran, sa sidan far ett
   tydligare avslut och kortet i vansterkolumnen balanserar battre mot
   anmalningsblocket. [data-divider="yes"] visas bara nar "Bra att veta"
   foljer pa egna praktiska punkter - ar den den enda delen av kortet
   behovs ingen avskiljare. Speglar delarmonstret fran .zmart-artikel-share. */
body #page-container .gowrap-event-outro[data-divider="yes"] {
  margin-top: 1.75rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--go-color-border);
}

body #page-container .gowrap-event-outro .go-heading {
  margin: 0 0 1rem;
}

body #page-container .gotext-event-outro > *:first-child { margin-top: 0; }
body #page-container .gotext-event-outro > *:last-child { margin-bottom: 0; }
body #page-container .gotext-event-outro p {
  margin: 0 0 1rem;
  font-family: var(--go-font-body);
  font-size: var(--go-body-size);
  line-height: 1.6em;
  color: var(--go-color-body);
}

/* --- Anmälningsformulär Fas 2: grupper, deltagare, knappar --- */
body #page-container .goform-event-signup { margin: 0; }
body #page-container .gogroup-event-signup {
  border: none;
  margin: 0 0 1.75rem;
  padding: 0;
  min-width: 0;
}
body #page-container .goleg-event-signup {
  padding: 0;
  margin: 0 0 0.75rem;
  color: var(--go-color-footer-text, #fff);
  font-size: 1.0625rem;
}
body #page-container .goatt-event-signup {
  position: relative;
  padding: 1.25rem;
  margin-bottom: 1rem;
  border-radius: var(--go-card-radius, 0.625rem);
  background: rgba(255, 255, 255, 0.06);
}
body #page-container .goatt-event-signup .gorow-event-signup-fields { margin-top: 0; }
body #page-container .goatt-remove-event-signup {
  margin-top: 0.75rem;
  background: none;
  border: none;
  color: var(--go-color-footer-muted, #B9C3D4);
  font-size: 0.9375rem;
  text-decoration: underline;
  cursor: pointer;
  padding: 0.25rem 0;
}
body #page-container .goatt-remove-event-signup:hover { color: var(--go-color-footer-text, #fff); }
body #page-container .goadd-event-signup {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: none;
  border: 1px dashed rgba(255, 255, 255, 0.35);
  border-radius: var(--go-card-radius, 0.625rem);
  color: var(--go-color-footer-text, #fff);
  padding: 0.6rem 1rem;
  font: inherit;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}
body #page-container .goadd-event-signup:hover {
  border-color: var(--go-color-secondary, #D9971E);
  background: rgba(255, 255, 255, 0.05);
}
body #page-container .goadd-event-signup svg { width: 1.1em; height: 1.1em; }

/* --- Deltagarkortets rubrikrad -------------------------------------------
   "Deltagare 1 — kontaktperson för anmälan". Rubriken behövs sedan
   kontaktpersonen och deltagare 1 slöts ihop: utan den går det inte att se
   var ett deltagarkort börjar när flera ligger under varandra.

   Rollen sätts på egen rad i stället för inline — den är en förklaring, inte
   en del av rubriken, och skulle konkurrera med "Deltagare 1" om samma rad. */
body #page-container .zmart-event-signup-attendee-title {
  margin: 0 0 1rem;
  color: var(--go-color-footer-text, #fff);
  font-family: var(--go-font-heading);
  font-size: 1.0625rem;
  font-weight: 600;
}

body #page-container .zmart-event-signup-attendee-role {
  display: block;
  margin-top: 0.15rem;
  color: var(--go-color-secondary, #D9971E);
  font-family: var(--go-font-body);
  font-size: 0.85rem;
  font-weight: 400;
}

/* Kontaktpersonens kort lyfts fram: det är raden som styr bekräftelsemejl
   och avbokningslänk, och skiljer sig därför från övriga deltagare. */
body #page-container .zmart-event-signup-attendee--primary {
  background: rgba(255, 255, 255, 0.09);
  border-left: 3px solid var(--go-color-secondary, #D9971E);
}
/* Honeypot: helt dolt för människor, nåbart för bottar. */
body #page-container .zmart-event-signup-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- Intervjukort: klock-ikon före längden (återanvändbart, alla kort) --- */
.zmart-intervju-kort__langd .et_pb_text_inner p {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
}
.zmart-intervju-kort__langd .et_pb_text_inner p::before {
  content: "";
  flex: 0 0 auto;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  position: relative;
  top: 0.1em;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20512%20512'%3E%3Cpath%20d='M256%200a256%20256%200%201%201%200%20512A256%20256%200%201%201%20256%200zM232%20120l0%20136c0%208%204%2015.5%2010.7%2020l96%2064c11%207.4%2025.9%204.4%2033.3-6.7s4.4-25.9-6.7-33.3L280%20243.2%20280%20120c0-13.3-10.7-24-24-24s-24%2010.7-24%2024z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20512%20512'%3E%3Cpath%20d='M256%200a256%20256%200%201%201%200%20512A256%20256%200%201%201%20256%200zM232%20120l0%20136c0%208%204%2015.5%2010.7%2020l96%2064c11%207.4%2025.9%204.4%2033.3-6.7s4.4-25.9-6.7-33.3L280%20243.2%20280%20120c0-13.3-10.7-24-24-24s-24%2010.7-24%2024z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ==========================================================================
   ENSKILD ARTIKELSIDA (artikel) v3 - hero, tvakolumn med redaktionell sidebar
   Renderas av zmart-redaktion via the_content. Klasser mappas i bridge.php.
   ========================================================================== */

/* SPECIFICITET: Divi sätter bakgrundsbilden på samma element via
   .et-db #et-boc .et-l .et_pb_section_0_tb_body med !important, alltså 1 id
   och tre klasser. Utan .et-l nedan har den här regeln bara 1 id och två
   klasser och FöRLORAR trots !important — bilden syns då som en remsa i
   sektionens 185px toppadding. Använd INTE Divis genererade
   .et_pb_section_0_tb_body som hook: numret ändras när sektioner flyttas. */
/* SPECIFICITET, andra omgangen. Divis regel
   .et_pb_section_0_tb_body:not(.gosec-event-body) { padding: 0 !important }
   undantog BARA eventets wrapper, så artikelns fick padding noll och de
   185px som kompenserar för den fixerade headern uteblev. Undantaget är
   nu utökat ovan, och selektorn här följer samma mönster som
   .gosec-event-body redan använder: et-db ligger på body, så kedjan ger
   1 id och 5 klasser mot Divis 1 id och 4. body.single-artikel behålls
   eftersom .gosec-body-content används även av standardmallen. */
body.single-artikel.et-db #et-boc .et-l .et_pb_section.gosec-body-content {
  background-image: none !important;
  background-color: var(--go-color-bg-white) !important;
  padding-top: 215px !important;
}
@media (max-width: 61.25rem) { body.single-artikel.et-db #et-boc .et-l .et_pb_section.gosec-body-content { padding-top: 150px !important; } }
@media (max-width: 47.9375rem) { body.single-artikel.et-db #et-boc .et-l .et_pb_section.gosec-body-content { padding-top: 135px !important; } }

body #page-container .gosec-artikel-hero {
  background-color: var(--go-color-hero-bg);
  box-sizing: border-box;
  /* SAMMA PRINCIP SOM .gosec-event-hero (se den regeln for uppmatningen):
     body-wrappern bar de 185px som kompenserar for den fixerade headern,
     sa heron har padding-top 0. min-height 565px = referenssidornas 750px
     minus de 185px som ligger pa wrappern, vilket ger samma tvarsidiga
     linje som ovriga heroer. min-height och INTE height: innehallet ska
     kunna vaxa utan att svamma over. */
  min-height: 535px;
   /* 185 -> 215 (2026-07-27): samma nedflytt av eyebrow som .gosec-hero fick.
      Heroens min-height sanks 565 -> 535 sa sektionens underkant hamnar pa
      exakt samma tvarsidiga linje som forut (215 + 535 = 750). */
  display: flex;
  align-items: stretch;
  padding-top: 0 !important;
  padding-bottom: 1.75rem;
  background-image: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,0.9) 14%, rgba(255,255,255,0.55) 38%, rgba(255,255,255,0.2) 66%, rgba(255,255,255,0) 90%), linear-gradient(100deg, #EDEEF0 0%, #EFF0F2 42%, #F4F5F6 70%, var(--go-color-hero-bg) 100%);
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
@media (max-width: 61.25rem) { body #page-container .gosec-artikel-hero { padding-top: var(--go-section-padding-y) !important; } }

body #page-container .gorow-artikel-hero {
  width: var(--go-content-width);
  max-width: var(--go-content-max-width);
  margin: 0 auto;
  display: grid;
  /* IDENTISK med .gorow-event-hero: 45% text, resten bild, samma radgap.
     Artikeln hade tidigare 58/42 med eget clamp-gap, vilket gjorde att de
     två mallarna inte läste som samma familj. */
  grid-template-columns: 45% minmax(0, 1fr);
  gap: var(--go-row-gap);
  height: 100%;
  /* stretch, INTE center: med center vertikalcentrerades textkolumnen mot
     den hogre bildkolumnen, vilket tryckte ned brodsmulor och rubrik
     langt under menyn. Samma val som .gorow-event-hero. */
  align-items: stretch;
}
body #page-container .gocol-artikel-hero-content { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }

body #page-container .zmart-artikel-breadcrumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem;
  font-size: var(--go-text-small-size); color: var(--go-color-body);
  margin-bottom: 1.25rem;
}
body #page-container .zmart-artikel-breadcrumbs a { color: var(--go-color-link); text-decoration: none; }
body #page-container .zmart-artikel-breadcrumbs a:hover { text-decoration: underline; }
body #page-container .zmart-artikel-breadcrumbs__sep { color: var(--go-color-border); }
body #page-container .zmart-artikel-breadcrumbs__current { color: var(--go-color-body); opacity: 0.7; }

body #page-container .gocol-artikel-hero-content .go-text--eyebrow { margin: 0; }
body #page-container .zmart-artikel-eyebrow__amne { color: var(--go-color-secondary-text); font-weight: 600; text-decoration: none; text-transform: uppercase; letter-spacing: 0.03125rem; }
body #page-container a.zmart-artikel-eyebrow__amne:hover { text-decoration: underline; }

body #page-container .gocol-artikel-hero-content .go-heading--h1 { margin-top: 0.85rem; line-height: 1.12em; }
body #page-container .gocol-artikel-hero-content .gotxt-section-intro { margin-top: 1.125rem; max-width: 46ch; font-size: var(--go-text-intro-size); color: var(--go-color-body); }

body #page-container .gotxt-artikel-meta { margin-top: 1.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; font-size: var(--go-text-small-size); color: var(--go-color-secondary-text); }
body #page-container .zmart-artikel-meta__item { display: inline-flex; align-items: center; gap: 0.4375rem; }
body #page-container .zmart-artikel-meta__item svg { width: 1rem; height: 1rem; flex-shrink: 0; }

body #page-container figure.gocol-artikel-hero-media { display: flex; align-items: center; justify-content: center; align-self: center; min-width: 0; margin: 0; }
/* Samma behandling som eventbilden: gemensam hornradie-variabel och ingen
   skugga. Skuggan var en artikelspecifik variant som gjorde att de två
   heroerna inte upplevdes som samma komponent. */
body #page-container .gocol-artikel-hero-media img { display: block; width: 100%; max-width: clamp(30rem, 50vw, 62.5rem); height: auto; aspect-ratio: 25 / 12; object-fit: cover; border-radius: var(--go-card-radius); }

/* --- TVAKOLUMNS BODY-GRID: brodtext + redaktionell sidebar --- */
body #page-container .gosec-artikel-body { background-color: var(--go-color-bg-white); padding-top: var(--go-section-padding-y); padding-bottom: var(--go-section-padding-y); }
body #page-container .gorow-artikel-body {
  width: var(--go-content-width); max-width: var(--go-content-max-width); margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
  gap: clamp(2rem, 1.5rem + 3vw, 4rem);
  align-items: start;
}
/* Huvudkolumnens bredd harleds fran samma geometri som hero-bilden ovanfor,
   sa artikeltextens hogerkant linjerar med bildens vansterkant:
   45% (heroens textkolumn) + heroradens gap, plus eventuellt utrymme som
   bildkolumnen har kvar UTOVER bildens egen 30rem/480px-tak (bilden
   centreras da i sin kolumn - figure har justify-content:center).
   90vw speglar --go-content-width (90%) uttryckt i viewport-enhet, eftersom
   ett custom property-varde i procent inte kan ateranvandas over tva olika
   grid-sammanhang (kolumnens % skulle annars resolva mot fel bas). Andras
   --go-content-width eller heroens 45%/30rem nagonsin maste denna formel
   uppdateras i takt - de ar medvetet parallella, inte automatiskt lankade. */
body #page-container .gocol-artikel-body-main {
  min-width: 0;
  max-width: calc(
    (90vw * 0.45) + var(--go-row-gap) +
    max((90vw * 0.55 - var(--go-row-gap) - 30rem) / 2, 0px)
  );
}

/* Brodtextens typografi - lasbar spalt, sajtens fonter */
/* Ingen egen max-width har - kolumnens bredd (se .gocol-artikel-body-main
   ovan) ar redan den enda breddspar ren for lasytan. En separat ch-baserad
   takregel skulle bara skapa tva konkurrerande max-width-varden. */

body.single-artikel #page-container .gocol-artikel-body-main > p { font-family: var(--go-font-body); font-size: var(--go-text-intro-size); line-height: 1.75em; color: var(--go-color-body); margin: 0 0 1.375rem; }
body.single-artikel #page-container .gocol-artikel-body-main > h2 { font-family: var(--go-font-heading); font-size: var(--go-h2-size); color: var(--go-color-heading); line-height: 1.25em; font-weight: 700; margin: 2.5rem 0 1rem; }
body.single-artikel #page-container .gocol-artikel-body-main > h3 { font-family: var(--go-font-heading); font-size: var(--go-h3-size); color: var(--go-color-heading); line-height: 1.3em; font-weight: 600; margin: 2rem 0 0.75rem; }
body.single-artikel #page-container .gocol-artikel-body-main > h4 { font-family: var(--go-font-heading); font-size: var(--go-h4-size); color: var(--go-color-heading); font-weight: 600; margin: 1.75rem 0 0.625rem; }

body.single-artikel #page-container .gocol-artikel-body-main > p a, body.single-artikel #page-container .gocol-artikel-body-main > ul a, body.single-artikel #page-container .gocol-artikel-body-main > ol a { color: var(--go-color-link); text-decoration: underline; text-underline-offset: 0.15em; transition: color 0.2s ease; }
body.single-artikel #page-container .gocol-artikel-body-main > p a:hover { color: var(--go-color-secondary-text); }

body.single-artikel #page-container .gocol-artikel-body-main > ul, body.single-artikel #page-container .gocol-artikel-body-main > ol { font-family: var(--go-font-body); font-size: var(--go-text-intro-size); line-height: 1.7em; color: var(--go-color-body); margin: 0 0 1.5rem; padding-left: 1.5rem; }
body.single-artikel #page-container .gocol-artikel-body-main > ul { list-style: disc; }
body.single-artikel #page-container .gocol-artikel-body-main > ol { list-style: decimal; }
body.single-artikel #page-container .gocol-artikel-body-main li { margin-bottom: 0.5rem; }
body.single-artikel #page-container .gocol-artikel-body-main li::marker { color: var(--go-color-secondary); }

body.single-artikel #page-container .gocol-artikel-body-main > blockquote { border-left: 4px solid var(--go-color-secondary); background-color: var(--go-color-bg-light); padding: 1.25rem 1.75rem; margin: 2rem 0; border-radius: 0 8px 8px 0; }
body.single-artikel #page-container .gocol-artikel-body-main > blockquote p { font-family: var(--go-font-heading); font-size: var(--go-h3-size); line-height: 1.5em; color: var(--go-color-heading); font-weight: 500; margin: 0; }
body.single-artikel #page-container .gocol-artikel-body-main > blockquote cite { display: block; margin-top: 0.75rem; font-family: var(--go-font-body); font-size: var(--go-text-small-size); font-style: normal; color: var(--go-color-secondary-text); font-weight: 600; }

body.single-artikel #page-container .gocol-artikel-body-main img { border-radius: 10px; height: auto; }
body.single-artikel #page-container .gocol-artikel-body-main > figure, body.single-artikel #page-container .gocol-artikel-body-main > .wp-block-image { margin: 2rem 0; }
body.single-artikel #page-container .gocol-artikel-body-main figure figcaption { margin-top: 0.625rem; font-size: var(--go-text-small-size); color: var(--go-color-secondary-text); }
body.single-artikel #page-container .gocol-artikel-body-main > hr { border: none; border-top: 1px solid var(--go-color-border); margin: 2.5rem 0; }

/* --- KÄLLSEKTION (zmart-redaktion) --- */
/* Källorna är ett eget avsnitt efter brödtexten, inte en fortsättning
   på den. Avståndet är därför större än mellan två stycken. Första barnet
   nollställs så att footerns margin ensam styr luften ovanför överst — annars
   adderas rubrikens egen marginal ovanpå. */
body #page-container .zmart-artikel-kallor { margin-top: 3.5rem; }
body #page-container .zmart-artikel-kallor > *:first-child { margin-top: 0; }
body #page-container .zmart-artikel-kallor__rubrik { margin-bottom: 0.75rem; }

body #page-container .zmart-artikel-share { display: flex; align-items: center; flex-wrap: wrap; gap: 0.75rem; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--go-color-border); }
body #page-container .zmart-artikel-share__label { font-family: var(--go-font-heading); font-weight: 600; color: var(--go-color-heading); font-size: var(--go-text-small-size); margin-right: 0.25rem; }
body #page-container .zmart-artikel-share__link { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background-color: var(--go-color-bg-light); color: var(--go-color-primary); transition: background-color 0.2s ease, color 0.2s ease; }
body #page-container .zmart-artikel-share__link:hover { background-color: var(--go-color-primary); color: #FFFFFF; }
body #page-container .zmart-artikel-share__link svg { width: 1.125rem; height: 1.125rem; }

/* --- SIDEBAR + WIDGETS --- */
body #page-container .gocol-artikel-sidebar { min-width: 0; position: sticky; top: 120px; display: flex; flex-direction: column; gap: 2rem; }
body #page-container .zmart-artikel-widget { background-color: var(--go-color-bg-white); border: 1px solid var(--go-color-border); border-radius: 12px; padding: 1.5rem; }
body #page-container .zmart-artikel-widget .go-heading--h3 { margin: 0 0 1.125rem; padding-bottom: 0.75rem; border-bottom: 2px solid var(--go-color-secondary); display: inline-block; }

body #page-container .zmart-artikel-widget__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; }

body #page-container .zmart-artikel-relrow__link { display: flex; gap: 0.875rem; align-items: flex-start; text-decoration: none; color: inherit; }
body #page-container .zmart-artikel-relrow__media { position: relative; flex-shrink: 0; width: 5rem; height: 5rem; border-radius: 8px; overflow: hidden; display: block; }
body #page-container .zmart-artikel-relrow__image { width: 100%; height: 100%; object-fit: cover; display: block; }
body #page-container .zmart-artikel-relrow__body { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
body #page-container .zmart-artikel-relrow__title { font-family: var(--go-font-heading); font-size: 0.9375rem; font-weight: 600; line-height: 1.3em; color: var(--go-color-heading); transition: color 0.2s ease; }
body #page-container .zmart-artikel-relrow__link:hover .zmart-artikel-relrow__title { color: var(--go-color-primary); }
body #page-container .zmart-artikel-relrow__meta { font-size: var(--go-text-small-size); color: var(--go-color-secondary-text); }

body #page-container .zmart-artikel-relrow__play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: #FFFFFF; background-color: rgba(11, 44, 90, 0.35); transition: background-color 0.2s ease; }
body #page-container .zmart-artikel-relrow__link:hover .zmart-artikel-relrow__play { background-color: rgba(11, 44, 90, 0.55); }
body #page-container .zmart-artikel-relrow__duration { position: absolute; right: 0.25rem; bottom: 0.25rem; background-color: rgba(10, 42, 87, 0.9); color: #FFFFFF; font-size: 0.625rem; font-weight: 600; padding: 0.0625rem 0.3125rem; border-radius: 0.25rem; line-height: 1.4; }

body #page-container .zmart-artikel-widget__more { display: inline-block; margin-top: 1.125rem; font-family: var(--go-font-heading); font-weight: 600; font-size: var(--go-text-small-size); color: var(--go-color-link); text-decoration: none; }
body #page-container .zmart-artikel-widget__more:hover { text-decoration: underline; }

/* nyhetsbrev-widget */
body #page-container .zmart-artikel-widget--newsletter { background-color: var(--go-color-bg-light); border-color: transparent; }
body #page-container .zmart-artikel-widget__text { font-size: var(--go-text-small-size); color: var(--go-color-body); line-height: 1.6em; margin: 0 0 1rem; }

/* --- CTA: Vill du synas i GO! Enkoping --- */
body #page-container .gosec-artikel-cta { background-color: var(--go-color-bg-white); padding-bottom: var(--go-section-padding-y); }
body #page-container .gocard-artikel-cta { width: var(--go-content-width); max-width: var(--go-content-max-width); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; background-color: var(--go-color-footer-bg); border-radius: 16px; padding: clamp(1.75rem, 1.2rem + 2.5vw, 3rem) clamp(1.75rem, 1.2rem + 2.5vw, 3.25rem); box-sizing: border-box; }
body #page-container .zmart-artikel-cta__body { flex: 1 1 24rem; min-width: 0; }
body #page-container .gosec-artikel-cta .go-heading { color: #FFFFFF; margin: 0; }
body #page-container .zmart-artikel-cta__sub { margin: 0.5rem 0 0; color: rgba(255,255,255,0.78); font-size: var(--go-body-size); line-height: 1.55em; }
body #page-container .zmart-artikel-cta__actions { display: flex; gap: 0.875rem; flex-wrap: wrap; flex-shrink: 0; }

@media (max-width: 61.25rem) {
  body #page-container .gorow-artikel-hero { grid-template-columns: 1fr; }
  body #page-container figure.gocol-artikel-hero-media { order: -1; margin-bottom: 1.5rem; }
  body #page-container .gocol-artikel-hero-media img { aspect-ratio: 16 / 9; max-width: none; }
  body #page-container .gorow-artikel-body { grid-template-columns: 1fr; }
  body #page-container .gocol-artikel-sidebar { position: static; }
  body #page-container .gocol-artikel-body-main { max-width: none; }
}
@media (max-width: 47.9375rem) {
  body #page-container .gocard-artikel-cta { flex-direction: column; align-items: flex-start; gap: 1.5rem; }
  body #page-container .zmart-artikel-cta__actions { width: 100%; }
  body #page-container .zmart-artikel-cta__actions a { flex: 1 1 auto; text-align: center; }
}

/* Startsida – Populära klipp: 3-upp videokort, lika höga + luft mellan (scoped). */
body #page-container .gosec-aktuellt .goimg-video-thumb img,
body #page-container .gosec-aktuellt .gocol-video-card .et_pb_image_wrap img { aspect-ratio: 3 / 2; object-fit: cover; height: auto; width: 100%; }
body #page-container .gosec-aktuellt .gorow-video-cards { column-gap: 2rem; }
/* Sektionshuvudet för Populära klipp använder den delade komponenten
   .go-section-header (definierad längst ned i filen, avsnitt SEKTIONSHUVUD).
   De tidigare .gosec-aktuellt-scopade reglerna är borttagna 2026-07-25 — de
   hade högre specificitet än komponenten och hade därför hindrat sektionen
   från att följa den. */

/* Startsida – förädling mot designförslag (luftigare, konservativt). Scoped, reversibelt. */
body #page-container .gosec-var-med .gocard-var-med { padding: 2.25rem 2rem; }
body #page-container .gosec-var-med .gorow-var-med-cards { column-gap: 1.75rem; row-gap: 1.75rem; }
body #page-container .gosec-partners .gocard-partner { padding: 1.5rem 1.25rem; }
body #page-container .gosec-naringsliv .go-row--cards { gap: 1.75rem; }

/* Punktjusteringar 2026-07-23 (startsida): tunnare hero-strip, se-alla-länk höger, visa-fler-luft, Var med 3-upp. Scoped. */
/* borttagen 2026-07-25: föråldrad * 0.5-regel utan !important, ersatt av * 0.25 !important-regeln nedan */
body #page-container .gosec-naringsliv .zmart-artikel-more { margin-top: 2.5rem; }
body #page-container .gosec-var-med .gorow-var-med-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; align-items: stretch; }
body #page-container .gosec-var-med .gocard-var-med { height: 100%; }
@media (max-width: 61.25rem) { body #page-container .gosec-var-med .gorow-var-med-cards { grid-template-columns: 1fr; } }

/* Korrigering 2026-07-23: temat använder !important överallt – tvinga igenom överstyrningarna. */
body #page-container .go-section.gosec-vad-ar:not(.gosec-hero):not(.gosec-event-hero):not(.gosec-artikel-hero) { padding-top: calc(calc(var(--go-section-padding-y) * 0.25) + 10px) !important; padding-bottom: calc(var(--go-section-padding-y) * 0.25) !important; }
body #page-container .gosec-var-med .gorow-var-med-cards { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 1.5rem !important; align-items: stretch !important; }
@media (max-width: 61.25rem) { body #page-container .gosec-var-med .gorow-var-med-cards { grid-template-columns: 1fr !important; } }

/* ==========================================================================
   AVBOKNING (zmart-events)
   ==========================================================================
   Visas i stället för anmälningsblocket när besökaren kommer via
   avbokningslänken i sitt mejl. Samma plats på sidan, samma kortformat —
   men ljus bakgrund i stället för navy, eftersom det är ett annat slags
   moment: en bekräftelse på att ta bort något, inte en inbjudan.

   Klasserna kommer från ZmartEvents\Frontend\Cancel_Handler::render().
   ========================================================================== */

body #page-container .zmart-cancel {
  padding: var(--go-card-padding);
  border: var(--go-card-border);
  border-radius: var(--go-card-radius);
  background-color: var(--go-color-bg-white);
  box-shadow: var(--go-card-shadow);
}

body #page-container .zmart-cancel__heading {
  margin: 0 0 1rem;
  font-family: var(--go-font-heading);
  font-size: var(--go-h3-size);
  color: var(--go-color-heading);
}

/* Felmeddelande vid misslyckat försök. role="alert" i markupen. */
body #page-container .zmart-cancel__error {
  margin: 0 0 1.25rem;
  padding: 0.85rem 1rem;
  border-radius: 0.375rem;
  background-color: #FDECEA;
  color: #8A1F11;
  font-size: 0.95rem;
}

/* Sammanfattning: etikett över värde, en rad per uppgift. Grid i stället
   för dl-standard så dt/dd kan kollapsa till en kolumn på mobil. */
body #page-container .zmart-cancel__summary {
  display: grid;
  grid-template-columns: minmax(8rem, max-content) 1fr;
  gap: 0.5rem 1.5rem;
  margin: 0 0 1.5rem;
  padding: 1.25rem;
  border-radius: 0.375rem;
  background-color: var(--go-color-bg-light);
}

body #page-container .zmart-cancel__summary dt {
  margin: 0;
  font-size: var(--go-card-label-size);
  font-weight: 600;
  color: var(--go-color-body);
}

body #page-container .zmart-cancel__summary dd {
  margin: 0;
  color: var(--go-color-heading);
}

body #page-container .zmart-cancel__note {
  margin: 0 0 1.5rem;
  font-size: var(--go-text-small-size);
  color: var(--go-color-body);
}

/* Åtgärder. Knappen är röd, inte guld som anmälningsknappen: färgen ska
   signalera att något tas bort. Avbryt-länken ligger BREDVID som text, inte
   som knapp — två likvärdiga knappar gör valet svårare än det är, och att
   behålla sin anmälan ska vara det lätta alternativet. */
body #page-container .zmart-cancel__form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin: 0;
}

body #page-container .zmart-cancel .zmart-button--danger {
  display: inline-block;
  padding: 0.75rem 1.75rem;
  border: 0;
  border-radius: 0.25rem;
  background-color: #B32D2E;
  color: #FFFFFF;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--go-transition-base);
}

body #page-container .zmart-cancel .zmart-button--danger:hover,
body #page-container .zmart-cancel .zmart-button--danger:focus-visible {
  background-color: #8A1F11;
}

body #page-container .zmart-cancel__abort {
  color: var(--go-color-link);
  text-decoration: underline;
}

/* Kvitto och felvyer. Vänsterkant i accentfärg i stället för hel
   bakgrundsfärg: rutan står ensam på sidan och skulle bli tung som
   färgblock, men behöver ändå läsas som "det här är utfallet". */
body #page-container .zmart-cancel--success {
  border-left: 4px solid #1E7B34;
}

body #page-container .zmart-cancel--error {
  border-left: 4px solid #B32D2E;
}

body #page-container .zmart-cancel--success p,
body #page-container .zmart-cancel--error p {
  margin: 0;
  color: var(--go-color-body);
}

/* Mobil: samma brytpunkt som övriga eventsektioner. */
@media (max-width: 47.9375rem) {
  body #page-container .zmart-cancel {
    padding: 1.5rem;
  }

  body #page-container .zmart-cancel__summary {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.25rem;
    padding: 1rem;
  }

  /* Etikett och värde blir varandras rader — luft mellan paren, inte inom. */
  body #page-container .zmart-cancel__summary dd + dt {
    margin-top: 0.75rem;
  }

  body #page-container .zmart-cancel__form {
    align-items: flex-start;
    flex-direction: column;
  }

  body #page-container .zmart-cancel .zmart-button--danger {
    width: 100%;
    text-align: center;
  }
}

/* --------------------------------------------------------------------------
   10. NÄRINGSLIVET — ÄMNEN VI BEVAKAR (kompakt navigationsrad)
   Sex ämnesceller: ikon + klickbar rubrik + kort text, INGEN kortkänsla
   (ingen bakgrund, kant eller skugga — go-card används medvetet INTE här).
   Divi fastnätar radens columnStructure vid enstaka kolumn-additioner, så
   layouten är medvetet byggd som flex med explicit bredd i CSS istället
   för att lita på Divis grid-kolumner för nedbrytningen (2026-07-25).
   -------------------------------------------------------------------------- */
body #page-container .gorow-amne-compact {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr) !important;
  gap: 1.5rem 1rem !important;
  align-items: flex-start !important;
}
body #page-container .gorow-amne-compact .gocell-amne {
  width: auto !important;
  max-width: none !important;
  margin: 0 !important; /* nollställer Divis .et_pb_column margin-right:5.5% — grid hanterar avstånd via gap */
  flex-shrink: 0 !important;
  padding: 0 !important; /* nollställer Divis kolumn-padding — kompakt, ingen kortkänsla */
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
@media (max-width: 61.25rem) { /* tablet: 3 per rad */
  body #page-container .gorow-amne-compact {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}
@media (max-width: 47.9375rem) { /* mobil: 2 per rad */
  body #page-container .gorow-amne-compact {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
body #page-container .gocell-amne .go-icon-box--sm {
  width: 2.25rem; /* något mindre än standard --go-icon-sm (44px) för kompakt känsla */
  height: 2.25rem;
}
body #page-container .gocell-amne .go-heading--card {
  font-size: var(--go-text-small-size) !important; /* mindre än vanlig kortrubrik — navigation, inte innehåll */
  font-weight: 700 !important;
  margin-bottom: 0 !important;
}
body #page-container .gocell-amne .go-heading--card a {
  color: inherit;
  text-decoration: none;
}
body #page-container .gocell-amne .go-heading--card a:hover {
  color: var(--gcid-primary-color);
  text-decoration: underline;
}
body #page-container .gocell-amne .go-text--small {
  line-height: 1.4em;
}
@media (max-width: 61.25rem) { /* tablet: 3 per rad */
  body #page-container .gorow-amne-compact .gocell-amne,
  body #page-container .gorow-amne-compact [class*="et_flex_column"].gocell-amne {
    width: calc((100% - 2rem) / 3) !important;
    max-width: calc((100% - 2rem) / 3) !important;
  }
}
@media (max-width: 47.9375rem) { /* mobil: 2 per rad */
  body #page-container .gorow-amne-compact .gocell-amne,
  body #page-container .gorow-amne-compact [class*="et_flex_column"].gocell-amne {
    width: calc((100% - 1rem) / 2) !important;
    max-width: calc((100% - 1rem) / 2) !important;
  }
}

/* Avstånd mellan artikelrutnätet och "Visa fler artiklar"-knappen (zmart-redaktion).
   Utan detta ligger knappen för nära sista kortraden (2026-07-25). */
body #page-container .zmart-artikel-load-more { margin-top: 2rem; }
body #page-container .zmart-event-load-more { margin-top: 2rem; }

/* ==========================================================================
   SEKTIONSHUVUD  —  .go-section-header
   ==========================================================================
   Rubrik till vänster, "Se alla …"-textlänk till höger, på samma baslinje.
   Klassen läggs på den RAD som innehåller rubriken och länken:

     Row     .go-section-header .go-row--contained
     └── Column (1_1)
         ├── Heading  .go-heading .go-heading--h2
         └── Button   .golink-se-alla .go-button .go-button--text

   Används av startsidans tre sektioner (Populära klipp, Senaste från
   näringslivet, Partner) och är avsedd att återanvändas på fler sektioner
   och fler sajter. Ersätter de tidigare .gosec-aktuellt-scopade
   engångsreglerna (2026-07-25).

   Divi sätter display:block på både rad och kolumn via sina egna genererade
   regler och laddar dem efter temats style.css — därför !important på
   display och width, enligt samma mönster som resten av filen.

   Typografi och hover kommer från .go-button--text, inte härifrån, så alla
   tre länkarna följer samma stil automatiskt.

   Under 61.25rem (tablet portrait och mindre) läggs länken på egen rad
   under rubriken, vänsterställd. Det behövs för långa rubriker — t.ex.
   "Tillsammans med företag som vill vara med och driva Enköping framåt" —
   som annars trycker länken ensam ut till högerkanten och tappar den
   visuella kopplingen till rubriken.
   ========================================================================== */

body #page-container .go-section-header > .et_pb_column {
  display: flex !important;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  width: 100% !important;
}

/* Låt rubriken krympa i stället för att tvinga länken ut ur raden. */
body #page-container .go-section-header > .et_pb_column > .et_pb_heading { min-width: 0; }

/* Divi wrappar knappmodulen i en egen div — det är den som är flex-item, och
   det är också DEN som bär Divis dolda .et_pb_module{margin-bottom:X%}
   (samma rotorsak som dokumenteras vid .gorow-footer-columns ovan). Den
   procentmarginalen växer med containerbredden och skulle annars lägga
   ojämn luft under sektionshuvudet — därför nollställs den här, medan
   auto-marginalen till vänster är det som skjuter länken åt höger. */
body #page-container .go-section-header .et_pb_button_module_wrapper {
  margin: 0 0 0 auto !important;
  flex-shrink: 0;
}

body #page-container .go-section-header .golink-se-alla { white-space: nowrap; }

@media (max-width: 61.25rem) {
  body #page-container .go-section-header > .et_pb_column {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  body #page-container .go-section-header .et_pb_button_module_wrapper { margin: 0 !important; }
}

/* ==========================================================================
   MOBIL: Populara klipp som kompakt lista (beslut av Pelle 2026-07-26)
   --------------------------------------------------------------------------
   Tre kort i bredd var det första förslaget men avvisades på mätning: vid
   390px viewport blir varje kort cirka 103px, alltså en miniatyr på 103x69px
   med en titel som radbryts till sju rader. Under rimlig träffyta och
   oigenkännlig bild.

   I stället: miniatyr till vänster på 7rem, titel och pil till höger, tre
   rader staplade. Cirka 240px totalt mot ungefär 900 tidigare, och alla tre
   klippen syns samtidigt utan scroll.

   Basreglerna kring rad 860-950 är INTE i någon media query — de gäller
   överallt. Reglerna nedan ligger därför sist i filen och bär id-prefix, så
   att de vinner både på specificitet och kaskadordning.
   ========================================================================== */
@media (max-width: 47.9375rem) {

	/* Från tre kolumner till staplade rader. column-gap nollställs eftersom
	   regeln ovan sätter 2rem för trekolumnsläget. */
	body #page-container .gosec-aktuellt .gorow-video-cards {
		display: flex !important;
		flex-direction: column !important;
		row-gap: 1.25rem !important;
		column-gap: 0 !important;
	}

	/* Varje kort blir en rad. minmax(0, 1fr) så en lång titel inte kan
	   tvinga sin kolumn bredare än utrymmet. */
	body #page-container .gosec-aktuellt .gocol-video-card {
		display: grid !important;
		grid-template-columns: 7rem minmax(0, 1fr);
		column-gap: 0.875rem;
		align-items: center;
		width: 100% !important;
		max-width: 100% !important;
		margin-bottom: 0 !important; /* Divi lägger margin på staplade kolumner */
	}

	/* Badgen döljs. Vid 7rem täcker den 90px breda banderollen nästan hela
	   miniatyren, och i en sektion som heter Populara klipp bär ordet
	   Intervju ingen information. */
	body #page-container .gosec-aktuellt .gocol-video-card .golabel-badge {
		display: none !important;
	}

	body #page-container .gosec-aktuellt .gocol-video-card > .et_pb_image {
		grid-column: 1;
		width: 100%;
		margin: 0 !important;
	}

	/* Titelraden vid sidan av bilden. Basregeln sätter padding-top för det
	   staplade läget — här ligger titeln bredvid, inte under. */
	body #page-container .gosec-aktuellt .gocol-video-card .gorow-video-title-row {
		grid-column: 2;
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}

	/* Titeln får all tillgänglig bredd. Basregeln låser den till 66 procent,
	   vilket var rätt när kortet var en kolumn men slösar bredd i listläget. */
	body #page-container .gosec-aktuellt .gorow-video-title-row > div:first-child {
		flex: 1 1 auto !important;
		max-width: none !important;
	}

}

/* ==========================================================================
   MOBIL: hero-principen (beslut av Pelle 2026-07-26)
   --------------------------------------------------------------------------
   Gäller .gosec-hero och därmed SAMTLIGA sju sidor: Hem, Intervjuer,
   Om GO!, Partner, Kontakt, Program och Näringslivet, plus sidmallen.

   ROTORSAK till att texten låg ofördelaktigt mot bilden: textkolumnen
   fick aldrig full bredd på mobil. Kedjan var 40 procent i basläget,
   55 procent vid 64rem, och vid 47.9375rem sattes BARA sista kolumnen till
   100. Eftersom båda media queries matchar vid 390px stod textkolumnen
   kvar på 55 procent. Det var en saknad överstyrning, inte ett designval.

   Reglerna ligger sist i filen med id-prefix, så de vinner både på
   specificitet och kaskadordning mot basreglerna kring rad 490-700.
   ========================================================================== */
@media (max-width: 47.9375rem) {

	/* 1. Textkolumnen till full bredd — den saknade överstyrningen. */
	body #page-container .gorow-hero > .et_pb_column:first-child {
		flex: 0 0 100% !important;
		max-width: 100% !important;
	}

	/* 2. Läsbarhetsskikt över bakgrundsbilden.
	   Pseudoelement och INTE en gradient i background-image: Divi sätter
	   bilden med !important, och background-image är en enda egenskap — att
	   lägga till en gradient hade krävt att hela deklarationen ersättes och
	   därmed en specificitetsstrid mot regler vi inte äger.

	   pointer-events: none är INTE kosmetiskt — utan den lägger sig skiktet
	   över knapparna och gör hela heron oklickbar. */
	body #page-container .gosec-hero {
		position: relative;
	}

	body #page-container .gosec-hero::before {
		content: '';
		position: absolute;
		inset: 0;
		z-index: 0;
		pointer-events: none;
		background: linear-gradient(to bottom,
			rgba(255, 255, 255, 0.94) 0%,
			rgba(255, 255, 255, 0.88) 50%,
			rgba(255, 255, 255, 0.35) 100%);
	}

	/* Innehållet ovanför skiktet. Behövs eftersom ett positionerat
	   pseudoelement med z-index 0 annars målar OVANPÅ icke-positionerat
	   innehåll i samma stackningskontext. */
	body #page-container .gosec-hero > .et_pb_row,
	body #page-container .gosec-hero .gorow-hero {
		position: relative;
		z-index: 1;
	}

	/* 3. Knapparna sida vid sida i stället för två band.
	   min-width 12.5rem (200px) i basläget gjorde det fysiskt omöjligt att
	   få två knappar på samma rad inom 326px innnehållsbredd. Släpps här
	   så bredden följer innehållet. min-height behålls — den är träffytan. */
	body #page-container .gorow-hero-ctas {
		gap: 0.75rem !important;
	}

	body #page-container .gorow-hero-ctas > div {
		flex: 0 0 auto !important;
		width: auto !important;
		max-width: none !important;
	}

	body #page-container .et_pb_section.gosec-hero .go-button--lg,
	body #page-container .et_pb_section.gosec-hero .go-button--lg:hover {
		width: auto !important;
		min-width: 0 !important;
		padding-left: 1.25rem !important;
		padding-right: 1.25rem !important;
	}

}














/* --------------------------------------------------------------------------
   24. ZMART NAV OVERLAY — projektkonfiguration

   Komponenten själv är kundoberoende och ligger i
   assets/zmart/zmart-nav-overlay/. Endast mappningen mot GO!:s egna
   variabler hör hemma här — kopiera INTE detta block till nästa kund.

   Panelbredd: fullskärm på telefon, högerpanel från 48rem. Över 80rem
   döljs komponenten helt (temats desktopmeny tar över — se rad 1606).
   -------------------------------------------------------------------------- */
:root {
	--zmart-nav-bg: var(--go-color-footer-bg);
	--zmart-nav-accent: var(--go-color-secondary);
	--zmart-nav-cta-text: var(--go-color-heading);
	--zmart-nav-font: var(--go-font-heading);
	--zmart-nav-panel-width: 100%;
}

@media (min-width: 48rem) {
	:root {
		--zmart-nav-panel-width: 28rem;
	}
}

/* ==========================================================================
   FILTERCHIPSEN — GEOMETRIN LÅST ÄVEN VID HOVER
   --------------------------------------------------------------------------
   Problem: chipsen växte i bredd och höjd när muspekaren passerade, så att
   raden hoppade och intilliggande chips förflyttades.

   Orsak: chipsen bär go-button--lg från bryggan. Hero-CTA-regeln

     body #page-container .et_pb_section .go-button--lg:hover
     { padding: 1rem 2.125rem; min-width: 12.5rem; min-height: 3.5rem; }

   har specificitet (0,1,3,1) medan vilo-regeln för chipsen ligger på
   (0,1,2,1). I vila vinner chips-regeln på källordning, men vid hover tar
   hero-regeln över och tvingar på chipsen 200px minimibredd, större padding
   och 0.5rem högre höjd.

   Det är samma grundproblem som löstes för viloläget när den horisontella
   scrollen åtgärdades — men :hover-varianten täcktes aldrig.

   VIKTIGT: vilo-regeln på rad ~2255 sätter height och padding UTAN
   !important, medan hero-regeln har !important på båda. !important slår
   alltid icke-!important oavsett specificitet och källordning, så i vila
   vann hero-regelns padding 2.125rem och min-width 12.5rem ändå.
   Chipsen var därför breda i vila och krympte vid hover.

   Lösning: samma geometri i ALLA tillstånd inklusive vila, allt med
   !important, och element i selektorn (button./a.) för att överstiga
   hero-regelns specificitet.
   Hover-feedback sker enbart via färg och skugga — aldrig geometri.

   Skriven mot KOMPONENTEN .zmart-toolbar, så den gäller Intervjuer,
   Näringslivet, Program och varje framtida arkiv som använder samma toolbar.
   ========================================================================== */
body #page-container .zmart-toolbar__chips button.go-button--lg,
body #page-container .zmart-toolbar__chips a.go-button--lg,
body #page-container .zmart-toolbar__chips .go-button--lg:hover,
body #page-container .zmart-toolbar__chips .go-button--lg:focus,
body #page-container .zmart-toolbar__chips .go-button--lg:focus-visible,
body #page-container .zmart-toolbar__chips .go-button--lg:active,
body #page-container .zmart-toolbar__chips a.go-button--lg:hover,
body #page-container .zmart-toolbar__chips a.go-button--lg:focus,
body #page-container .zmart-toolbar__chips a.go-button--lg:active,
body #page-container .zmart-toolbar__chips button.go-button--lg:hover,
body #page-container .zmart-toolbar__chips button.go-button--lg:focus,
body #page-container .zmart-toolbar__chips button.go-button--lg:active {
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 3rem !important;
  min-height: 3rem !important;
  padding: 0 1.25rem !important;
  flex: 0 0 auto !important;
}

/* Stabil hover-feedback: bara färg och en diskret skugga. Skuggan ligger
   utanför layoutflödet och kan aldrig förskjuta något. Transitionen listar
   enbart färgegenskaper, så att en framtida geometriändring inte kan
   animeras fram av misstag. */
body #page-container .zmart-toolbar__chips .go-button--lg {
  transition: background-color 0.2s ease,
              color 0.2s ease,
              border-color 0.2s ease,
              box-shadow 0.2s ease !important;
}
body #page-container .zmart-toolbar__chips button.go-button--lg:hover,
body #page-container .zmart-toolbar__chips a.go-button--lg:hover {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.14) !important;
}

/* Tangentbordsfokus ska synas tydligt utan att påverka geometrin.
   outline ritas utanför boxen och ingår inte i layouten. */
body #page-container .zmart-toolbar__chips button.go-button--lg:focus-visible {
  outline: 3px solid var(--go-color-secondary) !important;
  outline-offset: 2px !important;
}

/* --------------------------------------------------------------------------
   HEADER — KOMPAKT LÄGE FRÅN OCH MED HAMBURGERMENYN
   Hamburgermenyn längst till höger, CTA-knappen mindre och till vänster
   om den.

   BRYTPUNKT: 80rem (1280px) — exakt samma värde som sektion 11
   (HEADER-MENY) använder för att släcka desktopmenyn och tända
   hamburgaren. Blocket låg tidigare på 47.9375rem (767px), vilket gav
   ett glapp mellan 768 och 1280px där hamburgaren visades men
   CTA-knappen fortfarande hade desktopens placering och storlek.
   Ändras värdet i sektion 11 måste det ändras här i samma veva — de
   två hör ihop och beskriver samma övergång.

   Desktop (>1280px) är oförändrat — se sektion 11 (HEADER-MENY) och
   HEADER-RAD ovan för den layouten.

   PROBLEM: divi/menu-modulen buntar ihop logotyp OCH hamburgarmeny i en
   och samma modul/flexbehållare (.et_pb_menu_inner_container). CTA-
   knappen sitter i en helt separat kolumn EFTER menymodulen i DOM:et.
   Det gör det omöjligt att placera CTA-knappen visuellt MELLAN logotyp
   och hamburgare med enbart Divi-inställningar — logotyp och hamburgare
   kan aldrig separeras, de sitter i samma modul-box, och Divis kolumner
   saknar en "order"-inställning att luta sig mot.

   LÖSNING: platta ut menykolumnens tre mellanled (kolumn → modul-wrapper
   → inre containern) med display:contents, så att logotyp-wrappen och
   hamburgar-wrappen blir direkta flex-barn i SAMMA rad som CTA-kolumnen.
   display:contents tar bort en boxs EGEN layout-ruta men lämnar dess barn
   kvar i dokumentet — inga element flyttas i DOM:et, inget script krävs,
   och inget innehåll döljs för skärmläsare. Kolumnen har fått en egen
   CSS-klass (gomeny-header-menu-col) i Divi-modulen för detta ändamål.

   KÄND AVVÄGNING (tillgänglighet): CSS `order` ändrar bara den VISUELLA
   ordningen, inte DOM-ordningen — tangentbordets fokusordning blir därför
   Logotyp → Hamburgare → CTA-knapp, medan det visuella flödet är Logotyp
   → CTA-knapp → Hamburgare. Detta är en inneboende begränsning i Divis
   menymodul (logotyp+hamburgare kan inte separeras strukturellt) och
   samma typ av avvägning som förekommer på många produktionswebbplatser
   vid liknande omflaggning av 2–3 header-element. En helt fokusordning-
   korrekt lösning kräver att logotypen bryts ut till en egen modul och
   menymodulen begränsas till enbart navigering — en större strukturell
   ändring som riskerar att påverka desktop/tablet och därför ligger
   utanför detta uppdrag (endast mobilläget skulle ändras). Flagga till
   kund/uppdragsgivare om fullständig fokusordning krävs. */
@media (max-width: 80rem) {

  .et_pb_row_0_tb_header > .gomeny-header-menu-col,
  .et_pb_row_0_tb_header > .gomeny-header-menu-col > .gomeny-header-menu,
  .et_pb_row_0_tb_header > .gomeny-header-menu-col > .gomeny-header-menu > .et_pb_menu_inner_container {
    display: contents !important;
  }

  /* Ordning i den platta flexraden: logotyp (1) – CTA-knapp (2) – hamburgare (3). */
  .gomeny-header-menu .et_pb_menu__logo-wrap {
    order: 1 !important;
  }
  .et_pb_row_0_tb_header > .gomeny-header-cta {
    order: 2 !important;
  }
  .gomeny-header-menu .et_pb_menu__wrap {
    order: 3 !important;
  }

  /* CTA-kolumnen: häver "krymp + högerjustera"-reglerna (satta för desktop/
     tablet ovan) på mobil. Kolumnen växer i stället i utrymmet mellan
     logotyp och hamburgare och centrerar knappen där — Divis egen
     "justifyContent: center", satt i Builder på kolumnen, kan äntligen
     synas eftersom margin-left:auto var det enda som tvingade knappen
     hela vägen åt höger. */
  .et_pb_row_0_tb_header > .gomeny-header-cta {
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: none !important;
    margin-left: 0 !important;
    display: flex !important;
    justify-content: center !important;
  }
  .et_pb_row_0_tb_header .gomeny-header-cta .et_pb_button_module_wrapper {
    margin-left: 0 !important;
  }

  /* Knappen: ca 50% smalare än ordinarie storlek (.go-button--lg), med
     proportionellt mindre padding och min-bredd. Färg, typsnitt och
     rundade hörn ärvs oförändrat från .go-button/.go-button--primary/
     .go-button--lg — endast storlek/bredd ändras. min-width (inte width)
     så knappen växer automatiskt om texten skulle behöva mer plats,
     ingen risk för radbrytning. */
  /* HÖGRE SPECIFICITET KRÄVS: sektion 10 ("KNAPPSTORLEK—.go-button--lg") satte
     redan tidigare i filen padding/min-width/min-height via selektorn
     "body #page-container .et_pb_section .go-button--lg" (1 ID + 2 klasser
     + 1 element = högre specificitet än en ren klasselektor). Båda reglerna
     använder !important — då avgör specificiteten, INTE filordningen, så
     en enkel ".gomeny-header-cta .go-button--lg"-regel förlorade tyst mot
     den, trots !important och senare position i filen (se
     divi5-css-troubleshooting-principen: matcha/överträffa Divis/den
     tidigare regelns mönster, räkna aldrig bara på !important). */
  body #page-container .et_pb_section .gomeny-header-cta .go-button--lg,
  body #page-container .et_pb_section .gomeny-header-cta .go-button--lg:hover {
    min-width: 6.25rem !important;      /* 100px – exakt hälften av 12.5rem */
    min-height: 1.75rem !important;     /* 28px – exakt hälften av 3.5rem (56px). Över WCAG 2.5.8:s
                                            minimigräns på 24×24px för touch-ytor. */
    padding: 0.5rem 1.0625rem !important; /* 8px 17px – exakt hälften av 16px/34px */
    font-size: 0.75rem !important;      /* 12px – minskad proportionellt, fortfarande läsbar
                                            (halverat från 15px hade gett ~7.5px, oförsvarbart) */
    line-height: 1 !important;
  }
}

/* Extra säkerhetsmarginal på mycket smala mobilskärmar (≤360px): knappens
   text och hamburgaren ska aldrig riskera att krocka. Minskar knappens
   sidopadding och min-bredd ytterligare en aning. */
@media (max-width: 22.5rem) { /* 360px */
  body #page-container .et_pb_section .gomeny-header-cta .go-button--lg,
  body #page-container .et_pb_section .gomeny-header-cta .go-button--lg:hover {
    min-width: 5rem !important;
    min-height: 1.625rem !important;
    padding: 0.4375rem 0.625rem !important;
    font-size: 0.6875rem !important;
  }
}

/* --------------------------------------------------------------------------
   HEADER SURFPLATTA (768–1280px) — mellanläge mellan telefon och desktop.
   Blocket ovan gäller hela spannet från hamburgermenyns brytpunkt och nedåt.
   Här justeras bara två saker för de bredare skärmarna i det spannet:
   knappen får en storlek mellan telefonens kompakta och desktopens
   .go-button--lg, och den flyttas något åt vänster genom att CTA-kolumnen
   får padding åt höger — Divis egen centrering behålls och räknas då mot en
   smalare box. Större padding-right = knappen längre åt vänster; det är den
   enda ratten för placeringen.
   Knappselektorn är identisk med den i blocket ovan (samma specificitet) och
   ligger senare i filen — därför vinner den inom detta spann.
   -------------------------------------------------------------------------- */
@media (min-width: 48rem) and (max-width: 80rem) {
  .et_pb_row_0_tb_header > .gomeny-header-cta {
    padding-right: clamp(2rem, 8vw, 6rem) !important;
  }
  body #page-container .et_pb_section .gomeny-header-cta .go-button--lg,
  body #page-container .et_pb_section .gomeny-header-cta .go-button--lg:hover {
    min-width: 8.75rem !important;        /* 140px – mellan 100px och 200px */
    min-height: 2.25rem !important;       /* 36px – mellan 28px och 56px */
    padding: 0.625rem 1.25rem !important; /* 10px 20px */
    font-size: 0.875rem !important;       /* 14px */
    line-height: 1 !important;
  }
}


/* ==========================================================================
   BLI MEDLEM (sida 2197) – sidan speglar nu Kontaktsidans (15) tvåkolumns-
   layout direkt under hero: samma rad/kolumn-bredder (2_5/3_5), samma
   kortkomponent och samma formulärplatta som .gosec-kontakt/.gorow-kontakt/
   .gogrid-kontakt/.gocard-kontakt/.zmart-kontakt-panel, återanvända rakt av
   i stället för egna speciallösningar. Tidigare fristone fullbredds-kort +
   stor blå banner + separat formulärsektion är borttagna.
   ========================================================================== */
.gosec-medlem { background-color: var(--go-color-bg-white); }

/* Fyrfältaren: EXAKT samma CSS Grid-mönster som Kontaktsidans .gogrid-kontakt
   (2 kolumner × 2 rader, samma gap, samma brytpunkt) — det fjärde kortet är
   nu det tidigare avslutande budskapet ("Tillsammans..."), så den separata
   highlight-raden/plattan är borttagen helt. */
.gogrid-medlem {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  gap: 1rem !important;
  align-items: stretch !important;
  margin-top: 1.5rem !important;
  padding: 0 !important;
}
@media (max-width: 30rem) { .gogrid-medlem { grid-template-columns: 1fr !important; } }

/* Kortet: identiskt med .gocard-kontakt — samma padding (ärvd från .go-card,
   ingen egen override längre), samma vänsterställning, samma komponent
   återanvänd rakt av. */
body #page-container .et_pb_section .gocard-medlem {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-right: 0 !important;
  text-align: left !important;
}
body #page-container .et_pb_section .gocard-medlem .et_pb_icon,
body #page-container .et_pb_section .gocard-medlem .goicon-circle {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Formulärpanelen ("Bli medlem") återanvänder .zmart-kontakt-panel-regeln
   rakt av — se den utökade selektorlistan där (sök "zmart-medlem-panel")
   i stället för en dubblerad regel här, så de två aldrig kan glida isär. */

/* ========================================================================
   GO_INTERVJU_FILTER — 2026-08-25 (Zmart Projektstatus #1855 / #1856 steg 4)
   ========================================================================
   Kompakt, flervalsbar dropdown med kryssrutor för ämnesfiltrering på
   /intervjuer/. Ersätter den tidigare (dolda) knappraden av kategorier.
   Samma arkitekturprincip som travel.zmartkund.se/resor/, GO!-egna
   färg-/typografitokens (--go-*) — Travel Zmarts --tz-*-palett återanvänds
   INTE här, per uttrycklig instruktion.

   Markup: wp-content/themes/GO/zmart-redaktion/archive.php
   JS:     wp-content/themes/GO/js/zmart-intervjuer-filter.js

   Struktur:
     .go-intervju-filter                 wrapper (i normalt dokumentflöde)
       .go-intervju-filter__bar          knapp + "Rensa filter" + antal-text
       .go-intervju-filter__chips        valda ämnen som borttagningsbara chips
       .go-intervju-filter__panels       dolt lager, JS flyttar innehållet
       .go-intervju-filter__popover      desktop/tablet, position:fixed
       .go-intervju-filter-drawer        mobil, bottom sheet
       .go-intervju-filter-scrim         bakgrund för bägge ovan

   .go-intervju-filter__popover/-drawer/-scrim FLYTTAS av JS till
   #page-container (se zmart-intervjuer-filter.js) för att undvika att en
   Divi-sektions overflow/transform klipper en position:fixed-popover.
   Selektorerna nedan är därför avsiktligt skrivna mot #page-container,
   INTE mot någon specifik Divi-sektion.
   ======================================================================== */

:root {
  --go-if-radius: 0.625rem;      /* matchar --go-card-radius */
  --go-if-border: var(--go-color-border);
  --go-if-panel-w: 20rem;        /* 320px popover-bredd på desktop/tablet */
  --go-if-z: 950;                /* under ev. cookie-banner, över Divi-innehåll */
}

/* [hidden] måste vinna över Divis egna display-regler med högre
   specificitet — samma dokumenterade fix som Travel Zmarts filter behövde
   (TZ_FILTER_HIDDEN, 2026-08-17) för sina motsvarande lager. */
body #page-container .go-intervju-filter [hidden],
body #page-container .go-intervju-filter__popover[hidden],
body #page-container .go-intervju-filter-drawer[hidden],
body #page-container .go-intervju-filter-scrim[hidden] {
  display: none !important;
}

body #page-container .go-intervju-filter {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: clamp(1.25rem, 1rem + 1vw, 2rem);
}

body #page-container .go-intervju-filter__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
}

/* ---- Knappen "Kategori" ---- */

body #page-container .go-intervju-filter__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--go-font-body);
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1;
  padding: 0.6875rem 1.125rem;
  background-color: var(--go-color-bg-white);
  color: var(--go-color-heading);
  border: 1px solid var(--go-if-border);
  border-radius: var(--go-if-radius);
  cursor: pointer;
  transition: var(--go-transition-base);
}

body #page-container .go-intervju-filter__btn:hover {
  border-color: var(--go-color-primary);
  color: var(--go-color-primary);
}

body #page-container .go-intervju-filter__btn[aria-expanded="true"] {
  background-color: var(--go-color-primary);
  border-color: var(--go-color-primary);
  color: #FFFFFF;
}

body #page-container .go-intervju-filter__btn-icon {
  flex: none;
  width: 0.9em;
  height: 0.9em;
}

body #page-container .go-intervju-filter__btn-chevron {
  flex: none;
  transition: transform 0.2s ease;
}

body #page-container .go-intervju-filter__btn[aria-expanded="true"] .go-intervju-filter__btn-chevron {
  transform: rotate(180deg);
}

body #page-container .go-intervju-filter__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.3125rem;
  border-radius: 999px;
  background-color: var(--go-color-secondary);
  color: var(--go-color-heading);
  font-size: 0.75rem;
  font-weight: 700;
}

body #page-container .go-intervju-filter__btn[aria-expanded="true"] .go-intervju-filter__badge {
  background-color: #FFFFFF;
}

body #page-container .go-intervju-filter__clear {
  font-family: var(--go-font-body);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--go-color-primary);
  background: none;
  border: none;
  padding: 0.25rem 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

body #page-container .go-intervju-filter__clear:hover {
  color: var(--go-color-secondary-text);
}

body #page-container .go-intervju-filter__summary {
  margin: 0 0 0 auto;
  font-family: var(--go-font-body);
  font-size: var(--go-text-small-size);
  color: var(--go-color-body);
  opacity: 0.75;
}

/* ---- Chips (valda ämnen) ---- */

body #page-container .go-intervju-filter__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

body #page-container .go-intervju-filter__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-family: var(--go-font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--go-color-heading);
  background-color: var(--go-color-bg-light);
  border: 1px solid var(--go-if-border);
  border-radius: 999px;
  padding: 0.3125rem 0.5rem 0.3125rem 0.75rem;
  cursor: pointer;
  transition: var(--go-transition-base);
}

body #page-container .go-intervju-filter__chip:hover {
  background-color: #E9EEF6;
  border-color: var(--go-color-primary);
}

body #page-container .go-intervju-filter__chip span[aria-hidden="true"] {
  font-size: 1rem;
  line-height: 1;
  opacity: 0.6;
}

/* ---- Popover (desktop/tablet) ---- */

body #page-container .go-intervju-filter__popover {
  position: fixed;
  width: var(--go-if-panel-w);
  max-width: calc(100vw - 1rem);
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  background-color: var(--go-color-bg-white);
  border: 1px solid var(--go-if-border);
  border-radius: var(--go-if-radius);
  box-shadow: var(--go-card-shadow);
  z-index: var(--go-if-z);
  opacity: 0;
  transform: translateY(-0.375rem);
  transition: opacity 0.18s ease, transform 0.18s ease;
  pointer-events: none;
}

body #page-container .go-intervju-filter__popover.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* ---- Bottom sheet (mobil) ---- */

body #page-container .go-intervju-filter-drawer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: min(80vh, 34rem);
  display: flex;
  flex-direction: column;
  background-color: var(--go-color-bg-white);
  border-radius: 1.125rem 1.125rem 0 0;
  box-shadow: var(--go-card-shadow);
  z-index: var(--go-if-z);
  transform: translateY(100%);
  transition: transform 0.24s ease;
}

body #page-container .go-intervju-filter-drawer.is-open {
  transform: translateY(0);
}

body #page-container .go-intervju-filter-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--go-if-border);
  flex: none;
}

body #page-container .go-intervju-filter-drawer__title {
  font-family: var(--go-font-heading);
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--go-color-heading);
}

body #page-container .go-intervju-filter-drawer__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  background: var(--go-color-bg-light);
  border: none;
  border-radius: 999px;
  color: var(--go-color-heading);
  cursor: pointer;
}

body #page-container .go-intervju-filter-drawer__body {
  overflow-y: auto;
  flex: 1 1 auto;
}

/*
 * Scrimmen (bakgrundsskuggan) delas av popover och drawer i markupen, men
 * ska bara SYNAS bakom mobildraget — på desktop/tablet räcker klick-
 * utanför för att stänga popovern (samma UX-princip som Travel Zmarts
 * .tz-popover). JS sätter/tar bort [hidden] på scrimmen i samma andetag
 * som på drawer, så den är korrekt kopplad utan extra JS-logik: den syns
 * aldrig samtidigt som popovern eftersom öppna-funktionen bara visar
 * scrimmen i mobilgrenen (se zmart-intervjuer-filter.js, openPanel()).
 */
body #page-container .go-intervju-filter-scrim {
  position: fixed;
  inset: 0;
  background-color: rgba(10, 42, 87, 0.45);
  z-index: calc(var(--go-if-z) - 1);
}

body.go-intervju-filter-scroll-lock {
  overflow: hidden;
}

/* ---- Panel: kryssrutor ---- */

body #page-container .go-intervju-filter__panel {
  display: flex;
  flex-direction: column;
}

body #page-container .go-intervju-filter__fieldset {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  margin: 0;
  padding: 0.5rem;
  border: none;
}

body #page-container .go-intervju-filter__check {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0.75rem;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

body #page-container .go-intervju-filter__check:hover {
  background-color: var(--go-color-bg-light);
}

body #page-container .go-intervju-filter__check-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

body #page-container .go-intervju-filter__check-box {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid var(--go-if-border);
  border-radius: 0.3125rem;
  background-color: var(--go-color-bg-white);
  position: relative;
  transition: var(--go-transition-base);
}

body #page-container .go-intervju-filter__check-input:checked + .go-intervju-filter__check-box {
  background-color: var(--go-color-primary);
  border-color: var(--go-color-primary);
}

body #page-container .go-intervju-filter__check-input:checked + .go-intervju-filter__check-box::after {
  content: "";
  position: absolute;
  left: 0.3125rem;
  top: 0.125rem;
  width: 0.3125rem;
  height: 0.625rem;
  border: solid #FFFFFF;
  border-width: 0 0.1875rem 0.1875rem 0;
  transform: rotate(45deg);
}

body #page-container .go-intervju-filter__check-input:focus-visible + .go-intervju-filter__check-box {
  outline: 2px solid var(--go-color-primary);
  outline-offset: 2px;
}

body #page-container .go-intervju-filter__check-label {
  flex: 1 1 auto;
  font-family: var(--go-font-body);
  font-size: 0.9375rem;
  color: var(--go-color-body);
}

body #page-container .go-intervju-filter__check-count {
  flex: none;
  font-family: var(--go-font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--go-color-body);
  opacity: 0.55;
  min-width: 1.25rem;
  text-align: right;
}

body #page-container .go-intervju-filter__panel-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.875rem 1rem;
  border-top: 1px solid var(--go-if-border);
}

body #page-container .go-intervju-filter__reset {
  font-family: var(--go-font-body);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--go-color-primary);
  background: none;
  border: none;
  padding: 0.5rem 0.25rem;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

body #page-container .go-intervju-filter__apply {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  font-family: var(--go-font-body);
  font-weight: 600;
  font-size: 0.875rem;
  padding: 0.625rem 1.125rem;
  border-radius: 0.375rem;
  border: 2px solid var(--go-color-primary);
  background-color: var(--go-color-primary);
  color: #FFFFFF;
  cursor: pointer;
  transition: var(--go-transition-base);
}

body #page-container .go-intervju-filter__apply:hover {
  background-color: var(--go-color-heading);
  border-color: var(--go-color-heading);
}

/* ---- Reduced motion ---- */

@media (prefers-reduced-motion: reduce) {
  body #page-container .go-intervju-filter__popover,
  body #page-container .go-intervju-filter-drawer,
  body #page-container .go-intervju-filter-scrim,
  body #page-container .go-intervju-filter__btn-chevron {
    transition: none !important;
  }
}

/* ---- Mobil (< 767px, matchar --go-bp-phone): draget tar över popovern ---- */

@media (max-width: 47.9375rem) {
  body #page-container .go-intervju-filter__summary {
    margin-left: 0;
    flex-basis: 100%;
  }
}


/* ===============================================
   GO_INTERVJU_FILTER_V2 — 2026-08-25 (Zmart Projektstatus #1857)
   Två uppföljande justeringar av filterraden ovan, på Pelles begäran:

     1. Kategori-knappen (och "Rensa filter") görs större — höjd, padding
        och visuell tyngd, hämtat från travel.zmartkund.se/resor/ (.tz-fbtn:
        min-height 44px). GO!:s EGNA färger/tokens, ingen TZ-styling kopierad.
     2. En sorteringsdropdown (Senaste/Äldsta) återinförs, i samma rad,
        höger om Kategori — samma UX-mönster som Travel Zmarts "Sortera"
        (.tz-fbtn--sort: margin-left:auto i samma flexrad), byggt med
        GO!:s design-tokens. Alternativen begränsas till två via
        zmart_redaktion_sort_options-filtret i zmart-redaktion-bridge.php.

   Layouttekniken: .go-intervju-filter__summary hade redan margin-left:auto
   (pushar antalstexten längst till höger i raden). Genom att ge den NYA
   .go-intervju-filter__sort SAMMA margin-left:auto delar flexbox det lediga
   utrymmet mellan de två — nettoresultatet blir Kategori/Rensa vänster,
   antal i mitten, Sortera längst till höger, helt utan att röra befintlig
   CSS ovanför. Se MDN om flera auto-marginaler i samma flex-rad.
   =============================================== */

/* ---- 1. Större Kategori-knapp och Rensa-knapp ---- */

body #page-container .go-intervju-filter__btn {
  min-height: 44px;
  padding: 0.75rem 1.25rem;
}

body #page-container .go-intervju-filter__clear {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.25rem 0.5rem;
}

/* ---- 2. Sorteringsdropdown ---- */

body #page-container .go-intervju-filter__sort {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-left: auto;
}

body #page-container .go-intervju-filter__sort-label {
  font-family: var(--go-font-body);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--go-color-heading);
  white-space: nowrap;
}

body #page-container .go-intervju-filter__sort-select {
  min-height: 44px;
  padding: 0.5rem 2.25rem 0.5rem 0.875rem;
  font-family: var(--go-font-body);
  font-size: 0.9375rem;
  line-height: 1;
  color: var(--go-color-heading);
  background-color: var(--go-color-bg-white);
  border: 1px solid var(--go-if-border);
  border-radius: var(--go-if-radius);
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8'%3E%3Cpath fill='none' stroke='%230D3B77' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1 l6 6 l6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.875rem center;
  cursor: pointer;
  transition: var(--go-transition-base);
}

body #page-container .go-intervju-filter__sort-select:hover {
  border-color: var(--go-color-primary);
}

body #page-container .go-intervju-filter__sort-select:focus-visible {
  outline: 2px solid var(--go-color-primary);
  outline-offset: 2px;
}

/* ---- Mobil (< 767px): Sortera flyttar till egen rad, som antalstexten redan gör ---- */

@media (max-width: 47.9375rem) {
  body #page-container .go-intervju-filter__sort {
    margin-left: 0;
    flex-basis: 100%;
  }

  body #page-container .go-intervju-filter__sort-select {
    flex: 1 1 auto;
  }
}
/* === /GO_INTERVJU_FILTER_V2 === */

/* ==========================================================================
   TIPSA EN VÄN – POPOVER-DIALOG  —  .zmart-event-tip-popover
   ==========================================================================
   Progressiv förbättring av eventsidans "Tipsa en vän"-knapp (2026-08-26,
   uppdaterad 2026-08-26 med centrerad dialog + bakgrundsdimning).

   Popovern visas ALLTID vid klick (samma UI på alla enheter/webbläsare).
   Web Share API (när det stöds) erbjuds som ett extra alternativ INUTI
   popovern ("Dela via enheten…"), ersätter inte längre popovern.

   Byggs och infogas av wp-content/themes/GO/js/go-tipsa-en-van.js – ingen
   markup här i CSS:en styr strukturen, bara utseende/positionering.

   Popovern OCH bakgrundsdimningen (.zmart-event-tip-backdrop) läggs av
   skriptet direkt i <body> - inte i eventsidans egen DOM-struktur - och
   centreras med fixed positionering. Det gör att dialogen alltid hamnar
   mitt i den synliga vyn oavsett var "Tipsa en vän"-knappen sitter på
   sidan, och gör lösningen robust mot att en Divi-sektion sätter en
   transform/perspective/filter på en förfader (vilket annars kan göra
   position: fixed relativt den förfadern istället för viewporten).
   ========================================================================== */
body .zmart-event-tip-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background-color: rgba(10, 20, 35, 0.55);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--go-transition-base);
}

body .zmart-event-tip-backdrop.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

body .zmart-event-tip-popover {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 10000;
  width: max-content;
  max-width: min(22rem, 90vw);
  max-height: 85vh;
  overflow-y: auto;
  padding: 1rem;
  background-color: var(--go-color-bg-white);
  border: 1px solid var(--go-if-border);
  border-radius: var(--go-if-radius);
  box-shadow: var(--go-card-shadow);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.96);
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--go-transition-base), transform var(--go-transition-base);
}

body .zmart-event-tip-popover.is-open {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  visibility: visible;
  pointer-events: auto;
}

body.zmart-event-tip-lock {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  body .zmart-event-tip-popover,
  body .zmart-event-tip-backdrop {
    transition: none;
  }
}

body .zmart-event-tip-popover__heading {
  margin: 0 0 0.5rem;
  padding-right: 1.5rem; /* plats åt stängknappen */
  font-family: var(--go-font-heading);
  font-size: var(--go-text-small-size);
  font-weight: 700;
  color: var(--go-color-heading);
}

body .zmart-event-tip-popover__text {
  margin: 0 0 0.75rem;
  font-size: var(--go-text-small-size);
  line-height: 1.5;
  color: var(--go-color-body);
  white-space: pre-line; /* radbrytningen i delningstexten ska synas */
}

body .zmart-event-tip-popover__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

body .zmart-event-tip-popover__copy {
  font: inherit;
  font-size: var(--go-text-small-size);
  font-weight: 600;
  color: var(--go-color-bg-white);
  background-color: var(--go-color-primary);
  border: none;
  border-radius: var(--go-if-radius);
  padding: 0.5rem 0.875rem;
  cursor: pointer;
  transition: var(--go-transition-base);
}

body .zmart-event-tip-popover__copy:hover {
  filter: brightness(0.92);
}

body .zmart-event-tip-popover__copy:focus-visible,
body .zmart-event-tip-popover__mail:focus-visible,
body .zmart-event-tip-popover__close:focus-visible {
  outline: 2px solid var(--go-color-primary);
  outline-offset: 2px;
}

body .zmart-event-tip-popover__mail {
  font: inherit;
  font-size: var(--go-text-small-size);
  color: var(--go-color-link);
  text-decoration: underline;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

body .zmart-event-tip-popover__status {
  margin-top: 0.5rem;
  font-size: var(--go-text-small-size);
  font-weight: 600;
  color: var(--go-color-primary);
  min-height: 1.2em; /* undviker layoutskutt när texten dyker upp/försvinner */
}

body .zmart-event-tip-popover__close {
  position: absolute;
  top: 0.375rem;
  right: 0.375rem;
  width: 1.75rem;
  height: 1.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--go-color-text-muted);
  background: transparent;
  border: none;
  border-radius: var(--go-if-radius);
  cursor: pointer;
}

body .zmart-event-tip-popover__close:hover {
  color: var(--go-color-heading);
  background-color: var(--go-color-bg-light);
}
/* === /GO_TIPSA_EN_VAN_POPOVER === */

/* COOKIEPOLICY-SIDAN — finjustering 2026-08-27 */
/* Item 3: halverad satsyta för löpande text. divi/text (till skillnad från
   divi/heading) radbryter direkt mot modulens yttre wrapper, så till
   skillnad från .go-heading--measure räcker max-width på den yttre
   klassen (samma mönster som redan används av .gotxt-section-intro). */
.go-text--measure { max-width: 65ch; }
@media (max-width: 61.25rem) { .go-text--measure { max-width: 100%; } }

/* Item 4: centrera ikonerna i "Kategorier av cookies vi använder" och
   "Så hanterar och raderar du cookies". .go-icon-box centrerar bara sin
   egen ikon-glyf, inte boxen själv, eftersom Divis modulwrapper runt den
   renderas i full bredd inuti flex-kolumnen. margin:auto centrerar den
   fasta bredden i .go-icon-box--md oavsett wrapperbredd (samma teknik som
   .gocard-varfor-partner .go-icon-box). Nollställer även Divis default
   margin-bottom (30px) på alla moduler i korten, så ikon → rubrik → text
   får ett enhetligt, avsiktligt avstånd styrt enbart av modulernas egna
   margin-top-värden. */
.gorow-cookiepolicy-kategorier .et_pb_module,
.gorow-cookiepolicy-webblasare .et_pb_module {
  margin-bottom: 0 !important;
}
.gorow-cookiepolicy-kategorier .go-icon-box,
.gorow-cookiepolicy-webblasare .go-icon-box {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* --------------------------------------------------------------------------
   43. HERO-BILDKOLUMN — startsidans högerbild (2026-09-01)

   Höger kolumn i startsidans hero (.gorow-hero > .et_pb_column:last-child,
   post 11 "Hem") innehöll tidigare INGEN modul alls (medvetet tomt
   designbeslut). Den har nu fått en riktig Divi 5-bildmodul
   (niclas-header.jpg), taggad med klassen "go-hero-media" via modulens
   Avancerat → HTML-attribut (samma namngivningsmönster som
   "govarfor-video-thumb" på "Om GO! Enköping"-sidan).

   VARFÖR EN RIKTIG MODUL OCH INTE BARA EN BAKGRUNDSBILD PÅ KOLUMNEN:
   Divi-kärnan sätter display:none på en tom kolumn under 980px bredd
   (.et_pb_column.et_pb_column_empty{display:none}, Divi core CSS,
   ColumnModule.php). En bakgrundsbild på en fortsatt "tom" kolumn hade
   alltså varit osynlig på både tablet och mobil. En riktig modul gör
   kolumnen icke-tom och kringgår spärren helt — ingen Divi-kärnregel
   behöver överstyras.

   Bildens fullbredd, beskärning (object-fit: cover) och fokuspunkt
   (object-position: 60% 25%, centrerad på ansiktet) sätts NATIVT i Divi
   (modulens Sizing → "Force Fullwidth" samt Fit-panelens Object
   Fit/Object Position) — ingen egen CSS för det. Enda delen utan native
   motsvarighet är att ge bildens WRAPPER (.et_pb_image, .et_pb_image_wrap)
   samma höjd som kolumnen: Divis eget höjd-fält sätter bara höjd på
   <img>-taggen, inte dess omslutande div/span. Därför de tre raderna
   nedan.

   Kolumnens bredd (50/62/100 %) styrs redan av avsnitt 16 ovan — orört.
   Vänsterkolumnen (eyebrow, H1, ingress, CTA-knappar) och sektionens egen
   bakgrundsbild (headerbild.webp — den mjukt uttonande grafiska
   dekorationen bakom textkolumnen) är helt oförändrade.

   Mobil (<=47.9375rem): bildkolumnen hamnar ensam på sin egna rad när
   raden radbryts (se avsnitt 16), och får då ingen höjd via
   align-items:stretch (det kräver en syskon-rad att sträcka mot). Ger den
   därför en egen, fluid höjd här — samma clamp()-mönster som redan
   används för sektionens min-height i avsnitt 18.
   -------------------------------------------------------------------------- */
.gorow-hero .go-hero-media,
.gorow-hero .go-hero-media .et_pb_image_wrap,
.gorow-hero .go-hero-media .et_pb_image_wrap img {
  height: 100% !important;
}

@media (max-width: 47.9375rem) {
  .gorow-hero > .et_pb_column:last-child {
    height: clamp(220px, 55vw, 320px) !important;
  }
}

/* --------------------------------------------------------------------------
   43b. HERO-BILDKOLUMN — helt kant-i-kant, ingen bakgrundsbild kvar
   (2026-09-01, uppföljning på avsnitt 43).

   Startsidans .gosec-hero hade fortfarande sin delade bakgrundsbild
   (headerbild.webp, position right_center) kvar bakom hela sektionen —
   den skymtade som en spökbild bakom/runt fotot. Bilden är borttagen från
   startsidans sektion i Divi (endast post 11 — de sex andra hero-sidorna
   behåller sin egen bakgrund oförändrad; det är en per-instans-inställning
   i Divi, inte något denna fil styr). Kvar är .gosec-heros delade solidfärg
   (var(--go-color-hero-bg), #f9fafb), som nu utgör hela sektionens botten —
   det är också den enfärgade vänsterhalvan, helt utan extra CSS här.

   KVARSTÅENDE PROBLEM: fotot fyllde ändå bara sektionens INNEHÅLLSYTA
   (509px), inte hela sektionens box-höjd (780px desktop), eftersom
   .gosec-heros delade padding-top/padding-bottom (215px/56px desktop,
   150px/56px tablet — se avsnitt 43) klämmer in raden likadant som för
   textkolumnen. Resultat: synliga luftremsor upptill/nedtill i bildkolumnen.

   LÖSNING: bildkolumnen ignorerar sektionens vertikala padding via negativa
   marginaler som exakt matchar padding-värdena vid respektive brytpunkt —
   kolumnen blir då exakt lika hög som hela sektionens box, aldrig högre
   (ingen risk för överflöde utanför sektionen). Scoped med :has(.go-hero-media)
   plus :last-child, så ENDAST startsidans bildkolumn påverkas — övriga
   hero-sidors tomma sista kolumn matchar inte selektorn.
   Gäller bara de två brytpunkter där kolumnerna fortfarande ligger sida vid
   sida (>1024px och 768–1024px); vid ≤767px är layouten redan staplad och
   bildkolumnens höjd styrs enbart av clamp()-regeln ovan. */
@media (min-width: 64.0625rem) {
  .gorow-hero > .et_pb_column:last-child:has(.go-hero-media) {
    margin-top: -215px;
    margin-bottom: -3.5rem;
  }
}
@media (min-width: 48rem) and (max-width: 64rem) {
  .gorow-hero > .et_pb_column:last-child:has(.go-hero-media) {
    margin-top: -150px;
    margin-bottom: -3.5rem;
  }
}

/* ==========================================================================
   LOGOTYPGRID FÖR HUVUDPARTNERS (3 × 2)
   --------------------------------------------------------------------------
   Flyttad hit 2026-09-04 från herofilm-bryggan. Reglerna behövs numera på
   TVÅ sidor — startsidan och Partners — som delar en global Divi-rad
   (biblioteks-ID 2707). Bryggan laddas bara på sidor med filmkomponenten,
   så gridden blev ostilad på Partners. Reglerna hör dessutom hemma här,
   bredvid .gocard-partner och .goimg-partner-logo som de överstyr.
   ========================================================================== */

/* LOGOTYPGRID 3 × 2.
   Sex kvadratiska kort i stället för fyra breda. Raden är en Divi-rad, så
   Divis kolumnbredder måste överstyras med !important — samma mönster som
   .gogrid-medlem och .gogrid-kontakt i temat.

   aspect-ratio på KORTET, inte på bilden: kortytan blir kvadratisk medan
   logotypen behåller sina egna proportioner via object-fit: contain.
   Logotyper är olika breda och höga, så de begränsas av både max-width och
   max-height och centreras — ingen sträcks någonsin. */
body #page-container .gogrid-partner-logos {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	gap: 1.5rem !important;
	width: 100% !important;
	align-items: stretch !important;

	/* Samma mått som gap: då blir avståndet ytterkant–kort identiskt med
	   avståndet kort–kort, och raden läser sig som ett jämnt rutnät i
	   stället för tre kort som trycks ut mot kanterna. Ändras gap ska de
	   här två värdena ändras i samma veva. */
	padding-left: 1.5rem !important;
	padding-right: 1.5rem !important;
}

body #page-container .gogrid-partner-logos > .et_pb_column {
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	aspect-ratio: 1 / 1;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 1.5rem !important;
}

/* LOGOTYPENS STORLEK.
   Tre olika begränsningar höll tidigare tillbaka logotyperna samtidigt:
     .gocard-partner img          max-height: 42px   (temat, gjord för en
                                                     smal logotyprad)
     .goimg-partner-logo img      height: 60px; width: 140px  (temat)
     min tidigare regel           max-width: 72%; max-height: 46%
   Alla tre är nu överstyrda här.

   Varför inga gemensamma maxmått behövs: samtliga logotypfiler är 700×500px
   — färdiga dukar med logotypen centrerad och tilltagen efter sitt eget
   format. Låter man duken fylla kortets yta får varje logotyp därmed
   automatiskt sin naturliga relativa storlek. En bred logotyp blir bred,
   en hög blir hög, och ingen tvingas ned av ett gemensamt tak.

   height: auto tillsammans med object-fit: contain garanterar att inget
   någonsin sträcks. max-height 100% hindrar overflow ur kortet. */
body #page-container .gogrid-partner-logos .gocard-partner img {
	width: 100% !important;
	height: auto !important;
	max-width: 100% !important;
	max-height: 100% !important;
	object-fit: contain;
	margin: 0 auto;
}

/* Tablet: tre kvadrater får fortfarande plats, men gapet dras in — och
   ytterkanterna följer med så rytmen hålls jämn. */
@media (max-width: 61.25rem) {
	body #page-container .gogrid-partner-logos {
		gap: 1rem !important;
		padding-left: 1rem !important;
		padding-right: 1rem !important;
	}
}

/* Mobil: två per rad. Tre kvadrater på en telefonbredd blir ca 100px
   breda — där syns ingen logotyp längre. Två ger tre jämna rader. */
@media (max-width: 47.9375rem) {
	body #page-container .gogrid-partner-logos {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 0.75rem !important;

		/* Korten låg kant i kant med viewporten. Divis egen radpadding är
		   nollställd av .go-row--contained, så luften måste sättas här.
		   1rem är samma indrag som overlaytexten i heron använder på mobil,
		   så sidorna linjerar. */
		padding-left: 1rem !important;
		padding-right: 1rem !important;
	}

	body #page-container .gogrid-partner-logos > .et_pb_column {
		padding: 1rem !important;
	}
}

/* --------------------------------------------------------------------------
   VARIANT: PARTNERS (compact)
   Samma komponent som huvudpartnergridden ovan \u2014 samma kortyta, ram,
   radie, kvadratiska proportion och bildhantering. Enda skillnaden \u00e4r
   ANTALET KOLUMNER: sex i st\u00e4llet f\u00f6r tre. Eftersom korten \u00e4r 1:1 och
   delar radens bredd blir de d\u00e4rmed automatiskt ungef\u00e4r h\u00e4lften s\u00e5 stora
   p\u00e5 b\u00e5de bredd och h\u00f6jd. Ingen egen storlek beh\u00f6ver deklareras, och
   ingen CSS dupliceras.
   Kortets innerpadding dras ned proportionerligt s\u00e5 logotypen f\u00e5r samma
   andel av den mindre ytan som i huvudpartnergridden.
   -------------------------------------------------------------------------- */
body #page-container .gogrid-partner-logos--compact {
	grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
	gap: 1rem !important;
	padding-left: 1rem !important;
	padding-right: 1rem !important;
}

body #page-container .gogrid-partner-logos--compact > .et_pb_column {
	padding: 0.875rem !important;
}

/* Tablet: sex kvadrater blir ca 110px breda \u2014 d\u00e4r syns ingen logotyp.
   Tre per rad ger tv\u00e5 j\u00e4mna rader n\u00e4r alla sex platser \u00e4r fyllda. */
@media (max-width: 61.25rem) {
	body #page-container .gogrid-partner-logos--compact {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	}
}

/* Mobil: tv\u00e5 per rad, samma som huvudpartnergridden. */
@media (max-width: 47.9375rem) {
	body #page-container .gogrid-partner-logos--compact {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 0.75rem !important;
		padding-left: 1rem !important;
		padding-right: 1rem !important;
	}

	body #page-container .gogrid-partner-logos--compact > .et_pb_column {
		padding: 0.75rem !important;
	}
}