/*
 * Evenemangssidan (evenemangssida.php) — samma utseende som företagssidan, egen fil med flit
 * (företagsmallen byggs om samtidigt; en ändring där ska inte slå igenom här). Färger ur Elementor-kitet (4987) med reservvärden —
 * byter Aline en global i kitet följer sidan med. Typsnittet sätts bara i kitet.
 * Ingen text under 18 px (16 för versaletiketter). Mobil och desktop är båda tänkta.
 */
.hn-evs-bilder, .hn-evs-besked, .hn-evs-innehall, .hn-evs-annonsrad, .hn-evs-arrangor, .hn-evs-upptack, .hn-evs-lov, .hn-knapprad, .hn-faciliteter, .hn-guide-vecka, .hn-guide-evenemang {
	--hn-bla: var(--e-global-color-primary, #00354E);
	--hn-bla-hover: var(--e-global-color-hnhover, #14526F);
	--hn-kant: var(--e-global-color-hnkant1, #E5E9EC);
	--hn-text: var(--e-global-color-text, #1f2937);
	--hn-dampad: var(--e-global-color-hndampad, #4a4a4a);
	--hn-gron: var(--e-global-color-hngron, #0F7A6C);
	--hn-sida: clamp(16px, 4.4vw, 96px);
	box-sizing: border-box;
	width: 100%;
	color: var(--hn-text);
}
.hn-evs-bilder *, .hn-evs-innehall *, .hn-evs-arrangor *, .hn-evs-upptack * { box-sizing: border-box; }
/* Elementors kolumn-container har flex-wrap på mobil: en widget vars höjd följer bredden (aspect-ratio) mäts till
   ~0 och innehållet lägger sig över nästa del (minnet elementor-flex-wrap-mobil-nollar-hojd). Bestämd bredd löser det.
   Kust och land-mallarna lägger delarna som KORTKOD ([hn_evenemang del=…] i .elementor-shortcode) — den vägen saknades,
   och brödtexten låg över bilden på mobil (Aline 2026-09-28). Där är widgeten redan full bredd men mäts ändå till 0:
   bara containerns radbrytning av löser det. Alla delar, alla sidtyper som lånar hn-evs (och företagets hn-ftg). */
.e-con:has(> .elementor-widget-shortcode > .elementor-shortcode > :is([class*="hn-evs-"], [class*="hn-ftg-"])),
.e-con:has(> .elementor-widget-shortcode > .elementor-widget-container > .elementor-shortcode > :is([class*="hn-evs-"], [class*="hn-ftg-"])) {
	--flex-wrap-mobile: nowrap; flex-wrap: nowrap;
}
.elementor-widget:has(> .elementor-widget-container > .hn-evs-bilder),
.elementor-widget:has(> .elementor-widget-container > .hn-evs-innehall),
.elementor-widget:has(> .elementor-widget-container > .hn-evs-arrangor),
.elementor-widget:has(> .elementor-widget-container > .hn-evs-upptack),
.elementor-widget:has(> .hn-evs-bilder), .elementor-widget:has(> .hn-evs-innehall) { width: 100%; }

/* ── Bilderna: huvudbilden stor i 16:9, galleriet som miniatyrer under (Aline 2026-09-24) ── */
.hn-evs-bilder { padding: 16px var(--hn-sida) 0; display: flex; flex-direction: column; gap: 10px; }
.hn-evs-bild, .hn-evs-tumme { position: relative; display: block; overflow: hidden; }
/* 16:9 som alla huvudbilder, men aldrig högre än 60 % av skärmen — namnet och datumet ska synas utan att man scrollar. */
/* ALLTID 16:9 (Aline 2026-09-26: *"varför ska vi klippa 16:9 när du använder annan format"*). Höjden högst 60 % av skärmen
   styr BREDDEN — förut klämde max-height rutan till ~3,4:1 på en bred skärm och klippte även kundens valda 16:9-utsnitt.
   Bilden och miniatyrerna står i samma bredd, mitt i. */
.hn-evs-bild.is-huvud { aspect-ratio: 16 / 9; width: 100%; border-radius: 16px; }
.hn-evs-bilder > .hn-evs-bild.is-huvud, .hn-evs-bilder > .hn-evs-tummar { width: 100%; max-width: calc(60vh * 16 / 9); margin-inline: auto; box-sizing: border-box; }
.hn-evs-bild img, .hn-evs-tumme img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.hn-evs-bild:hover img, .hn-evs-tumme:hover img { transform: scale(1.03); }
/* Miniatyrerna behåller bildens EGEN form (Aline 2026-09-26: "bilderna är sällan liggande som de lägger upp.....så
   det blir inte så snyggt när du klipper alla till samma storlek"): samma höjd, bredden följer bilden, radbryts —
   ingen sidledsrullning. Stående blir smala, liggande breda, ingenting klipps. */
.hn-evs-tummar { display: flex; flex-wrap: wrap; gap: 10px; }
.hn-evs-tumme { height: 180px; width: auto; aspect-ratio: auto; border-radius: 10px; flex: none; max-width: 100%; }
.hn-evs-tummar .hn-evs-tumme img { position: static; inset: auto; width: auto; height: 100%; max-width: none; object-fit: contain; }
.hn-evs-tumme.is-dold { display: none; }
/* "Visa alla N bilder" — vit knapp på huvudbilden, nere till höger. */
.hn-evs-bilder-antal {
	position: absolute; right: 14px; bottom: 14px; z-index: 1; display: inline-flex; align-items: center; gap: 8px;
	min-height: 44px; padding: 8px 18px; border-radius: 999px; background: var(--e-global-color-accent, #fff); color: var(--hn-bla);
	font-size: 18px; font-weight: 700; box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
}
.hn-evs-bild.is-huvud:hover .hn-evs-bilder-antal { background: var(--hn-bla-hover); color: var(--e-global-color-accent, #fff); }
/* «Skapad med AI» (Bildväljaren steg 5, Aline 2026-10-19): kitets HN Etikett på linneplattan, uppe till vänster. */
.hn-ai-ram { position: relative; }
.hn-ai-markning {
	position: absolute; top: 12px; left: 12px; z-index: 1; pointer-events: none;
	display: inline-block; padding: 0.4375em 0.75em; border-radius: 6px; line-height: 1; white-space: nowrap;
	font-family: var(--e-global-typography-hnetikett-font-family); font-size: var(--e-global-typography-hnetikett-font-size);
	font-weight: var(--e-global-typography-hnetikett-font-weight); letter-spacing: var(--e-global-typography-hnetikett-letter-spacing);
	text-transform: uppercase; color: var(--e-global-color-primary); background-color: var(--e-global-color-hnlinne);
}
.hn-ai-markning.is-kort { top: 8px; left: 8px; }
.hn-bv-ai { position: static; margin-inline-start: 12px; }
.hn-bv-ai[hidden] { display: none; }
.hn-evs-tummar-fler.is-mobil { display: none; }
.hn-evs-tummar-fler {
	position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
	background: rgba(0, 53, 78, .62); color: var(--e-global-color-accent, #fff); font-size: 20px; font-weight: 700;
}

/* ── Bildvisningen (hn-foretagssida.js): <dialog> i översta lagret, ovanför adminraden och menyn.
   Bilderna har olika storlekar och format — scenen är fast, varje bild visas HEL (contain),
   och en liten bild förstoras inte till något suddigt. ── */
html.hn-bv-oppen { overflow: hidden; }
/* Inget dubbeltryck-zoom i bildvisningen (ett snabbt tryck bredvid pilen zoomade hela sidan); att nypa fungerar. */
.hn-bv, .hn-bv * { touch-action: manipulation; }
.hn-bv {
	position: fixed; inset: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none;
	margin: 0; padding: 0; border: 0; background: rgba(0, 20, 30, .96); color: var(--e-global-color-accent, #fff);
	display: none; flex-direction: column; box-sizing: border-box;
}
.hn-bv[open] { display: flex; }
.hn-bv::backdrop { background: rgba(0, 20, 30, .96); }
.hn-bv * { box-sizing: border-box; }
.hn-bv-topp {
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	padding: max(12px, env(safe-area-inset-top)) 16px 8px 24px; flex: none;
}
.hn-bv-rakna { font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.hn-bv button {
	appearance: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
	color: var(--e-global-color-accent, #fff); background: rgba(255, 255, 255, .14); border-radius: 999px; padding: 0; margin: 0;
	transition: background .15s ease; box-shadow: none; line-height: 1;
}
.hn-bv button:focus { background: rgba(255, 255, 255, .14); color: var(--e-global-color-accent, #fff); outline: none; } /* temats rosa :focus */
.hn-bv button:hover, .hn-bv button:focus-visible { background: var(--e-global-color-hnhover, #14526F); color: #fff; }
.hn-bv-stang { width: 56px; height: 56px; }
.hn-bv-scen {
	position: relative; flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center;
	padding: 0 88px;
}
.hn-bv-bild {
	display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain;
	border-radius: 6px; user-select: none; -webkit-user-drag: none;
}
/* Pilarna ligger ofta OVANPÅ bilden: fast mörk botten och skugga, så de syns på ljusa bilder också. */
.hn-bv .hn-bv-pil, .hn-bv .hn-bv-pil:focus {
	position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 60px; height: 60px;
	background: rgba(0, 20, 30, .72); box-shadow: 0 2px 12px rgba(0, 0, 0, .45);
}
.hn-bv .hn-bv-pil:hover, .hn-bv .hn-bv-pil:focus-visible { background: var(--e-global-color-hnhover, #14526F); }
.hn-bv-pil.is-forra { left: 16px; }
.hn-bv-pil.is-nasta { right: 16px; }
.hn-bv-tummar {
	/* Radbryts — ingenting rullar i sidled (Aline 2026-09-24: "vill inte ha en sida varken på mobil eller desktop
	   där man ska scrolla till sidan"). */
	flex: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 16px max(14px, env(safe-area-inset-bottom));
	justify-content: center; max-height: 160px; overflow: hidden;
}
.hn-bv .hn-bv-tumme {
	flex: none; width: 84px; height: 60px; border-radius: 6px; overflow: hidden; opacity: .55;
	outline: 3px solid transparent; outline-offset: 0; background: transparent;
}
.hn-bv .hn-bv-tumme img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hn-bv .hn-bv-tumme.is-vald { opacity: 1; outline-color: var(--e-global-color-accent, #fff); }
.hn-bv .hn-bv-tumme:hover, .hn-bv .hn-bv-tumme:focus { opacity: 1; background: transparent; }
@media (max-width: 767px) {
	.hn-bv-scen { padding: 0; }
	.hn-bv-bild { border-radius: 0; }
	.hn-bv .hn-bv-pil, .hn-bv .hn-bv-pil:focus { width: 56px; height: 56px; }
	.hn-bv-pil.is-forra { left: 8px; }
	.hn-bv-pil.is-nasta { right: 8px; }
	.hn-bv-tummar { display: none; } /* mobil: pilarna och räknaren räcker */
}

/* ── Innehållet: huvud, knappar, text till vänster — faktakortet till höger, FAST (Aline 2026-09-24:
   "den ska fyllas med annat innehåll sedan så den får vara fast istället") ── */
.hn-evs-innehall {
	display: grid;
	grid-template-columns: minmax(0, 1fr) clamp(340px, 26vw, 440px);
	grid-template-areas: "huvud fakta" "snabb fakta" "knappar fakta" "text fakta" "dela fakta" "kontakt fakta";
	grid-template-rows: auto auto auto auto 1fr;
	column-gap: clamp(40px, 4.5vw, 96px);
	row-gap: 28px;
	padding: 36px var(--hn-sida) 0;
}
.hn-evs-huvud { grid-area: huvud; display: flex; gap: 28px; align-items: center; min-width: 0; }
.hn-evs-knappar { grid-area: knappar; }
.hn-evs-besked { padding: 28px var(--hn-sida) 0; font-size: 19px; font-weight: 600; }

/* NÄR · VAR · PRIS — det besökaren bestämmer sig på, i en rad under namnet. Vitt med tunn kantlinje. */
.hn-evs-snabb {
	grid-area: snabb; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
	border: 1px solid var(--hn-kant); border-radius: 16px; background: var(--e-global-color-accent, #fff);
}
.hn-evs-snabb.is-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hn-evs-snabb.is-1 { grid-template-columns: minmax(0, 1fr); }
.hn-evs-snabb-cell { padding: 16px 20px; min-width: 0; }
.hn-evs-snabb-cell + .hn-evs-snabb-cell { border-left: 1px solid var(--hn-kant); }
.hn-evs-snabb dt { margin: 0 0 4px; }
.hn-evs-snabb dd { margin: 0; font-size: 20px; font-weight: 700; color: var(--hn-bla); line-height: 1.3; overflow-wrap: anywhere; }
.hn-evs-snabb dd .hn-event-dates__summary, .hn-evs-snabb dd .hn-event-recurrence { font-weight: 700; }
/* ARRANGÖR i heron (2.329.0, Aline 2026-10-30): egen rad under När · Var · Pris, flera arrangörer bredvid varandra.
   Heronas rad är flex (Elementor-mallen 31216), sidans gamla rad rutnät — båda får hela bredden. */
.hn-evs-snabb .hn-evs-snabb-cell.is-arr { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--e-global-color-hnkant1); }
.hn-hero .hn-evs-snabb .hn-evs-snabb-cell.is-arr { flex: 1 1 100%; padding-top: 14px; border-top: 1px solid color-mix(in srgb, var(--e-global-color-accent) 22%, transparent); }
.hn-evs-snabb-cell.is-arr dd { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.hn-evs-snabb-cell.is-arr .hn-evs-arr-rad { padding: 2px 0; gap: 12px; }
.hn-evs-snabb-cell.is-arr .hn-evs-arr-rad + .hn-evs-arr-rad { border-top: 0; margin-top: 0; padding-top: 2px; }
.hn-evs-snabb-cell.is-arr .hn-evs-arr-logo { width: 44px; height: 44px; border-radius: 10px; padding: 3px; }
.hn-hero .hn-evs-snabb-cell.is-arr dd :is(a, .hn-evs-varde) { font-size: var(--e-global-typography-hnkort-font-size); font-weight: var(--e-global-typography-hnkort-font-weight); }
/* ONLINE i Var (2.216.0): kortets etikett — linneplattan, marinblå versaler — bunden mot kitets HN Etikett.
   Heronas `dd *`-regler (klossar.css, alla tre tonerna) färgar allt i cellen — därför hero-väljarna. */
.hn-online-etikett,
.hn-hero .hn-evs-snabb dd .hn-online-etikett,
.hn-hero.hn-bild-ram.hn-ton-land .hn-evs-snabb dd .hn-online-etikett {
	display: inline-block; padding: 0.4375em 0.75em; border-radius: 6px; line-height: 1; white-space: nowrap;
	font-size: var(--e-global-typography-hnetikett-font-size); font-weight: var(--e-global-typography-hnetikett-font-weight);
	letter-spacing: var(--e-global-typography-hnetikett-letter-spacing); text-transform: uppercase;
	color: var(--e-global-color-primary); background-color: var(--e-global-color-hnlinne);
}
/* PASSERAT / INSTÄLLT i heronas När-ruta (2.320.0, Aline 2026-10-28 *"beige knapp med vit text för sidor som är utgångna"*):
   brickan har linneplattan, men `dd *` i klossar.css gav den herons vita text. Brickans egen mörka text tillbaka. */
.hn-hero .hn-evs-snabb dd .hn-event-past { color: var(--e-global-color-hngranit); }
.hn-hero .hn-evs-snabb dd .hn-event-cancelled { color: var(--e-global-color-hnrod); }
/* HÖGTIDEN i heron (2.284.0): egna etiketter under kategoriraden, samma etikett som Online. */
.hn-hero-hogtider { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; align-items: center; }
/* VÄGEN TILLBAKA TILL LOVGUIDEN (2.292.0, mockup docs/mockup/evenemang-vagen-tillbaka-2.html, Aline 2026-10-22 «snyggt»):
   GUIDERUTAN i heron (bara desktop) + BANNERN efter evenemangets del + tipsraden Mer på <lovet> längst ner. Ingen knapp i heron sedan 2.290.0. */
/* Guiderutan: glasruta på det mörka fotot, hela rutan är länken. BARA DESKTOP (≥1280 px) — på mobil och surfplatta ritas den
   inte alls (Aline 2026-10-22 *"men på mobilen är den ju mitt i deras sida??"* · *"på desktop i hero....den blå rutan"*). */
.hn-hero .hn-hero-guideruta {
	display: none; flex-direction: column; justify-content: space-between; gap: 22px; margin-top: 22px; padding: 24px;
	border-radius: 16px; box-sizing: border-box; text-decoration: none; color: var(--e-global-color-accent);
	background: color-mix(in srgb, var(--e-global-color-accent) 12%, transparent);
	border: 1px solid color-mix(in srgb, var(--e-global-color-accent) 40%, transparent);
	-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.hn-hero .hn-hero-guideruta-topp, .hn-hero .hn-hero-guideruta-botten, .hn-hero .hn-hero-guideruta-etikett, .hn-hero .hn-hero-guideruta-namn { display: block; }
.hn-hero .hn-hero-guideruta-etikett {
	color: var(--e-global-color-hnnal); font-size: var(--e-global-typography-hnversal-font-size); font-weight: var(--e-global-typography-hnversal-font-weight);
	letter-spacing: var(--e-global-typography-hnversal-letter-spacing); text-transform: uppercase;
}
.hn-hero .hn-hero-guideruta-etikett.is-period { color: var(--e-global-color-accent); opacity: .85; }
.hn-hero .hn-hero-guideruta-namn {
	margin: 6px 0 4px; color: var(--e-global-color-accent); font-family: var(--e-global-typography-hnserif1-font-family), serif;
	font-size: var(--e-global-typography-hnsiffra-font-size); font-weight: var(--e-global-typography-hnserif1-font-weight); line-height: 1;
}
.hn-hero .hn-hero-guideruta h2 {
	margin: 0 0 16px; color: var(--e-global-color-accent); font-family: var(--e-global-typography-hnh3-font-family), serif;
	font-size: var(--e-global-typography-hnh3-font-size); font-weight: var(--e-global-typography-hnh3-font-weight); line-height: var(--e-global-typography-hnh3-line-height);
}
/* Knappen = herons knappstil (kitets .hn-hero .elementor-button: genomskinlig, vit kant), versalerna som Hitta hit. Fyra lägen:
   vila · hover (rutan, bara mus) · tryckt · fokus (kitets ring på länken). */
.hn-hero .hn-hero-guideruta-knapp {
	align-self: flex-start; font-size: var(--e-global-typography-hnversal-font-size); font-weight: var(--e-global-typography-hnversal-font-weight);
	letter-spacing: var(--e-global-typography-hnversal-letter-spacing); text-transform: uppercase;
}
@media (hover: hover) { .hn-hero .hn-hero-guideruta:hover:not(:active) .hn-kloss-knapp.hn-hero-guideruta-knapp { background: var(--e-global-color-hnfjard); box-shadow: none; transform: translateY(-2px); } }
.hn-hero .hn-hero-guideruta:active .hn-kloss-knapp.hn-hero-guideruta-knapp { background: var(--e-global-color-hnlinne); color: var(--e-global-color-primary); box-shadow: none; }
/* Ramläget (liten bild, linnebotten): vit ruta i märkets färg — högerhalvan är bilden, rutan står i textspalten. */
.hn-hero.hn-bild-ram .hn-hero-guideruta { background: var(--e-global-color-accent); border-color: var(--e-global-color-hnsten); -webkit-backdrop-filter: none; backdrop-filter: none; }
.hn-hero.hn-bild-ram .hn-hero-guideruta :is(.hn-hero-guideruta-etikett, .hn-hero-guideruta-namn, h2) { color: var(--e-global-color-primary); }
.hn-hero.hn-bild-ram .hn-hero-guideruta-knapp { color: var(--e-global-color-primary); box-shadow: inset 0 0 0 1px var(--e-global-color-primary); }
/* Desktop: kvadratisk i herons tomma högerhalva (mallens kant 72 / 64 px). Kitets intåg (hnHeroIn, transform) på herotextens
   barn skulle flytta den absoluta rutan under animationen — delen tar intåget själv i stället, rutan med. */
@media (min-width: 1280px) {
	/* Elementors .e-con är position: relative — utan det här mäts rutan mot textspalten (780 px), inte mot heron. */
	.hn-hero .hn-hero-guideruta { display: flex; }
	.hn-hero:not(.hn-bild-ram) :is(.hn-hero-text:has(.hn-hero-guideruta), .hn-hero-text :has(.hn-hero-guideruta)) { position: static; }
	.hn-hero:not(.hn-bild-ram) .hn-hero-guideruta { position: absolute; right: 72px; bottom: 64px; width: 360px; aspect-ratio: 1 / 1; margin: 0; padding: 32px; z-index: 1; }
	.hn-hero:not(.hn-bild-ram) .hn-hero-guideruta-namn { font-size: var(--e-global-typography-hnserif1-font-size); }
}
.hn-hero .hn-hero-text > *:has(.hn-hero-guideruta) { animation: none; }
.hn-hero .hn-hero-text > *:has(.hn-hero-guideruta) :is(.hn-hero-kategorier, .hn-hero-hogtider, .hn-hero-guideruta) { animation: hnHeroIn 1s cubic-bezier(.2, .8, .2, 1) .48s both; }
@media (prefers-reduced-motion: reduce) { .hn-hero .hn-hero-text > *:has(.hn-hero-guideruta) :is(.hn-hero-kategorier, .hn-hero-hogtider, .hn-hero-guideruta) { animation: none; } }
/* Tipsraden: vit botten före Tipsa en vän och det marinblå Mer att upptäcka; korten = evenemangskortmallen via HN Kortrad. */
.hn-evs-lov { padding: 64px var(--hn-sida) 0; display: flex; flex-direction: column; gap: 24px; box-sizing: border-box; }
.hn-evs-lov * { box-sizing: border-box; }
.hn-evs-lov-huvud { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.hn-evs-lov-huvud h2 { margin: 0; font-size: clamp(26px, 2.2vw, 34px); color: var(--hn-bla); }
.hn-evs-lov-etikett { color: var(--hn-bla); }
.hn-evs-lov-mobil { display: none; margin: 0; }
@media (max-width: 767px) {
	.hn-evs-lov { padding-top: 40px; gap: 18px; }
	.hn-evs-lov-huvud .hn-evs-lov-knapp { display: none; }
	.hn-evs-lov-mobil { display: block; }
	.hn-evs-lov-mobil .hn-evs-lov-knapp { display: flex; width: 100%; justify-content: center; }
	/* Korten sveps i sidled i 375 px (mockupen): ett kort på 78 % av bredden, snäpper vid varje kort. */
	.hn-evs-lov .hn-kortrad .hn-kortrad-kort, .hn-evs-lov .hn-kortrad .hn-kortrad-kort.is-farre {
		display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
		margin: 0 calc(-1 * var(--hn-sida)); padding: 0 var(--hn-sida) 8px; gap: 14px; scrollbar-width: none;
		scroll-padding-left: var(--hn-sida); /* annars snäpper första kortet till kanten och sidmarginalen försvinner */
	}
	.hn-evs-lov .hn-kortrad .hn-kortrad-kort::-webkit-scrollbar { display: none; }
	.hn-evs-lov .hn-kortrad .hn-lista-post { flex: 0 0 78%; scroll-snap-align: start; }
}
/* Husets märke ("En del av Friskhuset", hus.php) bredvid platsen; husets namn är länken till huset. */
.hn-hus-var { display: flex; align-items: center; gap: 12px; }
.hn-hus-var a:not(.hn-hus-marke) { color: inherit; }
.hn-hus-marke { flex-shrink: 0; display: block; line-height: 0; border-radius: 50%; }
.hn-hus-marke:focus-visible { outline: 2px solid var(--hn-bla); outline-offset: 2px; }
.hn-hus-marke-bild { width: 64px; height: 64px; border-radius: 50%; display: block; }
a.hn-hus-marke:hover .hn-hus-marke-bild { transform: scale(1.05); transition: transform .15s; }
a.hn-hus-marke:active .hn-hus-marke-bild { transform: scale(.97); }
@media (max-width: 767px) { .hn-hus-marke-bild { width: 52px; height: 52px; } }
picture.hn-hus-marke-bild > img { width: 100%; height: 100%; object-fit: contain; border-radius: 50%; display: block; }
/* Plats-raden i sidokortet (hus.php hn_custom_hus_plats_html, 2.130.0): märket stort, husets namn som länk, adressen under. */
.hn-hus-plats { display: flex; align-items: center; gap: 16px; }
.hn-hus-plats .hn-hus-marke-bild { width: 96px; height: 96px; }
.hn-hus-plats-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hn-hus-plats-namn { font-size: 19px; font-weight: 600; color: var(--hn-text); }
@media (max-width: 767px) { .hn-hus-plats .hn-hus-marke-bild { width: 72px; height: 72px; } }
.hn-evs-ut { font-size: 18px; margin-left: -2px; }
.hn-evs-text { grid-area: text; min-width: 0; max-width: 860px; }
.hn-evs-dela-mobil { grid-area: dela; }
.hn-evs-kontakt { grid-area: kontakt; max-width: 860px; scroll-margin-top: 90px; }
.hn-evs-fakta { grid-area: fakta; align-self: start; display: flex; flex-direction: column; gap: 20px; }


/* Kalenderbladet: nästa tillfälle, där företagen har logotypen. Månaden på marinblått, dagen på vitt — som ett blad ur almanackan. */
.hn-evs-kalender {
	flex-shrink: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
	width: clamp(104px, 8.5vw, 136px); aspect-ratio: 1 / 1.08; border-radius: 16px; overflow: hidden;
	border: 1.5px solid var(--hn-bla); background: var(--e-global-color-accent, #fff); color: var(--hn-bla); line-height: 1;
}
.hn-evs-kalender-man { align-self: stretch; text-align: center; background: var(--hn-bla); color: var(--e-global-color-accent, #fff); font-size: 16px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 8px 0; }
.hn-evs-kalender-dag { font-size: clamp(40px, 3.6vw, 56px); font-weight: 700; padding-top: 8px; }
.hn-evs-kalender-vdag { font-size: 16px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 4px 0 10px; }
.hn-evs-kalender.is-passerat { opacity: .55; }
.hn-evs-huvud-text { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.hn-evs-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.hn-evs-chip {
	font-size: 18px; font-weight: 700; color: var(--hn-bla); border: 1px solid var(--hn-kant);
	border-radius: 999px; padding: 5px 14px; line-height: 1.3; text-decoration: none;
}
a.hn-evs-chip:hover { border-color: var(--hn-bla); color: var(--hn-bla); }
.hn-evs-namn { margin: 0; font-size: clamp(32px, 3.4vw, 54px); line-height: 1.1; color: var(--hn-bla); overflow-wrap: anywhere; }
.hn-evs-plats { display: inline-flex; align-items: center; gap: 8px; }
.hn-evs-plats .hn-evs-ikon { color: var(--hn-bla); flex-shrink: 0; }
.hn-evs-datum { font-weight: 700; color: var(--hn-bla); }

.hn-evs-knappar { display: flex; flex-wrap: wrap; gap: 12px; }
/* Knappens utseende och lägen = kitets knappfamilj (hn-knapp / hn-knapp--kant, sätts i hn_evs_knapp_html(), 2.112.0). */

/* Kundens rubrik är en ingress under sidans namn, inte ett andra namn — mindre än H1, lugnare (Aline 2026-09-26: "snygg sida"). */
.hn-evs-underrubrik { margin: 0 0 16px; font-size: var(--e-global-typography-hnh3-font-size, 22px); font-weight: 600; line-height: 1.35; color: var(--hn-bla); }
/* Tipsa en vän i faktakortet: etiketten på egen rad, alla sex ikoner på raden under — länkikonen hamnade ensam på rad två. */
.hn-evs-kort .hn-dela { margin: 0; gap: 8px 6px; }
.hn-evs-kort .hn-dela-etikett { flex-basis: 100%; margin: 0 0 2px; }
.hn-evs-text p, .hn-evs-text li, .hn-nyhet-text p, .hn-nyhet-text li { font-size: 19px; line-height: 1.65; }
/* En lång webbadress i kundens text bryts — annars blir hela sidan bredare än mobilen (Tjejkväll 2026-09-26). */
.hn-evs-text, .hn-nyhet-text { overflow-wrap: anywhere; } /* artikeln också: en lång Facebook-länk i Valborg 2026 gav 1189 px i mobilen */
.hn-evs-text h3 { font-size: 24px; color: var(--hn-bla); margin: 28px 0 10px; }
/* Knappar i texten (Ring Harris · Ring Tony): luft mellan dem när de radbryts i mobilen — utan detta låg de kant i kant (Gnistan 2026-10-16). */
.hn-evs-text p:has(> .hn-knapp), .hn-nyhet-text p:has(> .hn-knapp) { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

/* ARTIKELNS KLOSSAR (nyhetssida.php, Aline 2026-09-28): bild, galleri, citat, faktaruta, ställe-kort, video — i textens flöde. */
.hn-nyhet-kloss { margin: 32px 0; }
.hn-nyhet-bild figure { margin: 0; }
.hn-nyhet-bild img { display: block; width: 100%; height: auto; border-radius: 14px; }
.hn-nyhet-bild figcaption { margin-top: 8px; font-size: 18px; line-height: 1.5; color: var(--e-global-color-hndampad); }
.hn-nyhet-galleri .hn-evs-bilder { padding: 0; }
/* Citatet: sajtens brödtextfont (Figtree, kitets Text) — Playfair kursiv gick inte att läsa (Aline 2026-10-09, 2.152.1).
   Nålens tunna guldstreck till vänster — guldet är streck, aldrig text. Samma citat på företags- och evenemangssidorna (plan 15 steg 10). */
.hn-nyhet-text blockquote, .hn-ftg-text blockquote, .hn-evs-text blockquote {
	margin: 32px 0; padding: 4px 0 4px 22px; border: 0; border-left: 2px solid var(--e-global-color-hnnal); border-radius: 0; background: none;
	font-family: var(--e-global-typography-text-font-family, sans-serif); font-style: normal; color: var(--hn-bla);
}
.hn-nyhet-text blockquote p, .hn-ftg-text blockquote p, .hn-evs-text blockquote p { font-family: inherit; font-style: inherit; font-size: 26px; line-height: 1.4; margin: 0 0 10px; }
.hn-nyhet-text blockquote cite, .hn-nyhet-text blockquote p:last-child:not(:first-child) {
	display: block; font-family: inherit; font-style: normal; font-size: 18px; line-height: 1.5; color: var(--e-global-color-hngranit); margin: 0;
}
.hn-nyhet-text blockquote cite::before { content: "— "; }
/* Faktarutan: linne, kitets enda platta. */
.hn-nyhet-fakta aside { background: var(--e-global-color-hnlinne); border-radius: 14px; padding: 22px 26px; color: var(--e-global-color-hngranit); }
.hn-nyhet-fakta h3 { margin: 0 0 8px; font-size: var(--e-global-typography-hnh3-font-size, 22px); color: var(--hn-bla); }
.hn-nyhet-text .hn-nyhet-fakta p, .hn-nyhet-text .hn-nyhet-fakta li { font-size: 18px; line-height: 1.6; }
.hn-nyhet-fakta p:last-child, .hn-nyhet-fakta ul:last-child { margin-bottom: 0; }
@media (max-width: 767px) {
	.hn-nyhet-text blockquote p { font-size: 22px; }
	.hn-nyhet-fakta aside { padding: 18px 18px; }
	.hn-nyhet-kloss { margin: 24px 0; }
}
.hn-evs-kontakt h2 { font-size: 28px; color: var(--hn-bla); margin: 12px 0 16px; }

/* Faktakortet */
.hn-evs-kort { border: 1px solid var(--hn-kant); border-radius: 16px; overflow: hidden; background: var(--e-global-color-accent, #fff); }
.hn-evs-kort-del { padding: 18px 22px; border-bottom: 1px solid var(--hn-kant); font-size: 18px; }
.hn-evs-kort-del:last-child { border-bottom: 0; }
/* Varje uppgift på egen rad: namn, adress, telefon. */
.hn-evs-kort-del { display: flex; flex-direction: column; gap: 4px; }
/* Kontaktraden (hn_kontaktrad_html) i kontaktrutan: symbol + handling, numret efter i vanlig vikt. Faktakorten har inga handlingar sedan 2.126.0. */
.hn-kontaktrad { display: inline-flex; align-items: center; gap: 10px; font-size: 19px; font-weight: 600; color: var(--hn-bla); text-decoration: none; }
.hn-kontaktrad .hn-evs-ikon { flex-shrink: 0; }
.hn-evs-kort-del:has(.hn-kontaktrad) { gap: 10px; }
.hn-kontaktrad-varde { font-weight: 400; color: var(--hn-text); }
@media (hover: hover) { .hn-kontaktrad:hover { opacity: .8; } }
.hn-kontaktrad:focus-visible { outline: 2px solid var(--hn-bla); outline-offset: 3px; border-radius: 4px; }
.hn-kontaktrad:active { opacity: .65; }
.hn-evs-varde { font-size: 19px; font-weight: 600; color: var(--hn-text); }
.hn-evs-adressrad { color: var(--hn-text); }
/* Flera platser (2.345.0, steg 6b): en rad per plats — länken, under den gata och kommundel; streckad linje mellan platserna. */
.hn-evs-plats { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; }
.hn-evs-plats + .hn-evs-plats { border-top: 1px dashed var(--hn-kant); }
.hn-evs-plats a { font-size: 19px; font-weight: 600; color: var(--hn-bla); }
.hn-evs-arr a { font-size: 19px; font-weight: 600; color: var(--hn-bla); overflow-wrap: anywhere; }
/* Logorna i rutan Arrangör (2.303.0): en rad per arrangör, logon till vänster. */
.hn-evs-arr-rad { display: flex; align-items: center; gap: 14px; padding: 6px 0; }
.hn-evs-arr-rad + .hn-evs-arr-rad { border-top: 1px solid var(--hn-kant); padding-top: 12px; margin-top: 6px; }
.hn-evs-arr-logo { width: 64px; height: 64px; flex-shrink: 0; object-fit: contain; border: 1px solid var(--hn-kant); border-radius: 12px; background: var(--e-global-color-accent, #fff); padding: 4px; }
.hn-evs-karta { display: block; }
.hn-evs-nar ul { margin: 6px 0 0; padding-left: 0; list-style: none; }
.hn-evs-nar li { font-size: 18px; margin: 2px 0; }
.hn-evs-etikett { display: block; font-size: 16px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--hn-dampad); margin-bottom: 4px; }
.hn-evs-karta { padding: 0; height: 190px; position: relative; background: var(--e-global-color-accent, #fff); }
.hn-evs-karta iframe { width: 100%; height: 100%; border: 0; display: block; }
.hn-evs-kort .hn-evs-annons:empty { display: none; }
/* Mobilen flyttar rutorna ut ur textspalten (hn-evenemangssida.js, 2026-10-23) — sidans marginal följer med. */
.hn-evs-annons.is-flyttad { padding: 28px var(--hn-sida, 20px) 0; box-sizing: border-box; }
.hn-evs-upptack .hn-evs-annons.is-flyttad { padding: 0; }
/* Föreningens annons längst ner, efter På gång hos (2.303.3) — luft ovanför, borta när zonen är tom. */
.hn-evs-annons--nere { padding-top: 48px; }
.hn-evs-annons--nere:has(.hn-ads-zone-async[data-zone-tom]) { display: none; }
/* Sidopanelen (sidopanel.php, 2.132.0): Senaste nytt + Utforska i annonsens plats när zonen är tom. Samma kortram som faktakortet. */
.hn-sidopanel {
	--hn-bla: var(--e-global-color-primary, #00354E); --hn-bla-hover: var(--e-global-color-hnhover, #14526F); --hn-kant: var(--e-global-color-hnkant1, #E5E9EC);
	--hn-text: var(--e-global-color-text, #1f2937); --hn-dampad: var(--e-global-color-hndampad, #4a4a4a);
	border: 1px solid var(--hn-kant); border-radius: 16px; overflow: hidden; background: var(--e-global-color-accent, #fff); font-size: 18px; color: var(--hn-text);
}
.hn-sidopanel + .hn-sidopanel { margin-top: 20px; }
/* Ruta 1 i panelen, evenemang och aktivitet (2.301.0) — tom zon fälls ihop; flyttad i mobilen bär den sidans marginal. */
.hn-sidopanel-annons { margin-top: 20px; }
.hn-sidopanel-annons:has(.hn-ads-zone-async:empty) { display: none; }
.hn-sidopanel-annons.is-flyttad { margin-top: 0; }
/* Annonsen vinner (2.133.0): zonen fylls via REST efter sidladdningen, så panelen döljs först när platshållaren fått en annons. */
.hn-sidopanel-plats:has(.hn-ads-zone-async:not(:empty)) .hn-sidopanel { display: none; }
.hn-sidopanel-plats .hn-evs-annons:has(.hn-ads-zone-async:empty), .hn-sidopanel-plats .hn-ftg-annons:has(.hn-ads-zone-async:empty) { display: none; }
.hn-sidopanel-bild { display: block; aspect-ratio: 16 / 9; background: var(--e-global-color-hnlinne, var(--hn-kant)); }
.hn-sidopanel-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hn-sidopanel-text { padding: 18px 22px 22px; display: flex; flex-direction: column; gap: 6px; }
.hn-sidopanel-text .hn-evs-etikett { margin-bottom: 0; }
/* Sidorutans rubrik «Vad händer i Nynäshamn»: Playfair 500, vanliga bokstäver (Aline 2026-11-08 «Ja, bygg det»). Före lyft-raden så den vinner. */
.hn-sidopanel-text h2.hn-evs-etikett { font-family: var(--e-global-typography-hnserif2-font-family), serif; font-weight: var(--e-global-typography-hnserif2-font-weight); font-size: var(--e-global-typography-hnkursiv-font-size); text-transform: none; letter-spacing: 0; line-height: 1.25; }
.hn-sidopanel-lyft h2.hn-evs-etikett { font-family: inherit; font-size: 16px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--hn-dampad); line-height: 1.4; margin: 0 0 4px; }
.hn-sidopanel h2 { margin: 0; font-size: 21px; line-height: 1.25; font-weight: var(--e-global-typography-hnkort-font-weight); }
.hn-sidopanel h2 a, .hn-sidopanel-fler a { color: var(--hn-bla); text-decoration: none; font-weight: 700; }
.hn-sidopanel h2 a:hover, .hn-sidopanel-fler a:hover { color: var(--hn-bla-hover); text-decoration: underline; }
.hn-sidopanel-datum { font-size: 18px; color: var(--hn-dampad); } /* 18 px: ingen liten text (sidvakten stoppade 16 px, 2.133.0) */
.hn-sidopanel-fler { list-style: none; margin: 8px 0 0; padding: 0; border-top: 1px solid var(--hn-kant); }
.hn-sidopanel-fler li { padding: 10px 0; border-bottom: 1px solid var(--hn-kant); display: flex; flex-direction: column; gap: 2px; }
.hn-sidopanel-fler li:last-child { border-bottom: 0; }
.hn-sidopanel-fler a { font-size: 18px; line-height: 1.3; }
.hn-sidopanel-alla { align-self: flex-start; margin-top: 6px; font-size: 16px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--hn-bla); text-decoration: none; }
.hn-sidopanel-alla:hover { color: var(--hn-bla-hover); text-decoration: underline; }
.hn-sidopanel-rutor { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 6px; }
.hn-sidopanel-ruta { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: linear-gradient(135deg, #8fb3c8, #2f5f7d); text-decoration: none; transition: transform .2s; }
.hn-sidopanel-ruta img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.hn-sidopanel-ruta span { position: absolute; inset: auto 0 0 0; display: flex; flex-direction: column; gap: 2px; padding: 30px 12px 10px; font-size: 18px; font-weight: 700; line-height: 1.25; color: var(--hn-bla); background: linear-gradient(to top, rgba(255,255,255,.98) 55%, rgba(255,255,255,0)); overflow-wrap: anywhere; hyphens: auto; }
.hn-sidopanel-ruta small { font-size: 18px; font-weight: 400; color: var(--hn-text); }
.hn-sidopanel-ruta:hover { transform: translateY(-3px); }
.hn-sidopanel-ruta:focus-visible { outline: 2px solid var(--hn-bla); outline-offset: 2px; }
@media (max-width: 767px) { .hn-sidopanel { display: none !important; } } /* Senaste nytt + Utforska aldrig i mobilen (Aline 2026-10-09); annonsen syns */
@media (prefers-reduced-motion: reduce) { .hn-sidopanel-ruta { transition: none; } .hn-sidopanel-ruta:hover { transform: none; } }

/* ── Egna sidor och Upptäck mer: kort i 16:9, som alla våra kort ── */
/* Annonsraden i sidmallen (2.300.0): EN annons under text och faktakort, sidans marginal; tom zon fälls ihop av hn-ads. */
.hn-evs-annonsrad { padding: 64px var(--hn-sida) 0; }
.hn-evs-annonsrad:has(.hn-ads-zone-async:empty) { display: none; }
.hn-evs-arrangor, .hn-evs-upptack { padding: 64px var(--hn-sida) 0; display: flex; flex-direction: column; gap: 48px; }
/* Tydlig gräns mellan företagets sida och VÅRA tips (Aline 2026-09-24: "gör tydligt när man går från det om
   företaget ... till våra lokala tips"): ett helbrett marinblått band, vit text. */
.hn-evs-upptack { margin-top: 72px; padding-top: 0; gap: 36px; padding-bottom: 64px; }
.hn-evs-upptack .hn-evs-upptack-huvud {
	margin: 0 calc(-1 * var(--hn-sida)); padding: 40px var(--hn-sida); background: var(--hn-bla); color: var(--e-global-color-accent, #fff);
}
.hn-evs-upptack .hn-evs-upptack-huvud h2, .hn-evs-upptack .hn-evs-upptack-huvud .hn-evs-etikett { color: var(--e-global-color-accent, #fff); }
/* Tydligt skilt från kundens del — "så man inte tror det är deras" (Aline 2026-09-24). */
.hn-evs-upptack-huvud { display: flex; flex-direction: column; gap: 4px; }
.hn-evs-upptack h3 { margin: 0; font-size: 24px; color: var(--hn-bla); }
.hn-evs-sektion { display: flex; flex-direction: column; gap: 22px; }
.hn-evs-arrangor h2, .hn-evs-upptack h2 { margin: 0; font-size: clamp(26px, 2.2vw, 34px); color: var(--hn-bla); }
.hn-evs-kort-rad { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.hn-evs-kortet { display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: var(--hn-text); }
.hn-evs-kortet img, .hn-evs-kortet-tom { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 16px; display: block; background: var(--hn-kant); }
.hn-evs-kortet-namn { font-size: 20px; font-weight: 600; color: var(--hn-bla); line-height: 1.25; }
.hn-evs-kortet-meta { font-size: 18px; color: var(--hn-dampad); }
.hn-evs-kortet:not(.hn-evs-upptack *):hover .hn-evs-kortet-namn { color: var(--hn-bla-hover); } /* inte på den blå botten — blått på blått */
.hn-evs-lankar { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 8px; }
/* Länkarna på den marinblå botten = kitets hn-knapp--ljus --liten (2.112.0) — utseende och lägen därifrån. */


/* ── NY STIL (hn_evs_ny_stil): sidhuvudet i marinblått — bilden till vänster, datum, namn och plats till höger. Inga vita
   fält runt bilden; guld bara som linje, aldrig som text. ── */
.hn-evs-hjalte {
	--hn-bla: var(--e-global-color-primary, #00354E);
	--hn-sida: clamp(16px, 4.4vw, 96px);
	box-sizing: border-box; width: 100%;
	/* Samma spalter som innehållet under (.hn-evs-innehall): bilden över kundens text, namnet och knapparna över
	   faktakortet — två raka linjer för ögat (Aline 2026-09-26: "blir svårt för ögat att följa"). */
	display: grid; grid-template-columns: minmax(0, 1fr) clamp(340px, 26vw, 440px); align-items: center;
	column-gap: clamp(40px, 4.5vw, 96px); row-gap: 24px; padding: clamp(24px, 2.8vw, 48px) var(--hn-sida);
	background: var(--hn-bla); color: var(--e-global-color-accent, #fff);
}
.hn-evs-hjalte * { box-sizing: border-box; }
.hn-evs-hjalte.is-utan-bild { grid-template-columns: minmax(0, 1fr); }
.hn-evs-hjalte .hn-evs-bilder { padding: 0; }
.hn-evs-hjalte .hn-evs-bilder > .hn-evs-bild.is-huvud, .hn-evs-hjalte .hn-evs-bilder > .hn-evs-tummar { max-width: none; }
.hn-evs-hjalte .hn-evs-tumme { height: 96px; }
.hn-evs-hjalte-text { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.hn-evs-hjalte-nar { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--e-global-color-accent, #fff); }
.hn-evs-hjalte-nar * { color: inherit; font-weight: inherit; }
.hn-evs-hjalte .hn-evs-namn { color: var(--e-global-color-accent, #fff); font-size: clamp(30px, 2.5vw, 46px); }
.hn-evs-hjalte-linje { display: block; width: 72px; height: 4px; border-radius: 2px; background: var(--e-global-color-secondary, #DD9B0C); }
.hn-evs-hjalte-var { margin: 0; font-size: 20px; font-weight: 600; color: var(--e-global-color-accent, #fff); }
.hn-evs-hjalte .hn-evs-chip, .hn-evs-hjalte span.hn-evs-chip { color: var(--e-global-color-accent, #fff); border: 1px solid rgba(255, 255, 255, .45); }
.hn-evs-hjalte a.hn-evs-chip:hover { background: var(--e-global-color-hnhover, #14526F); border-color: var(--e-global-color-hnhover, #14526F); color: var(--e-global-color-accent, #fff); }
.hn-evs-innehall.is-ny { grid-template-areas: "text fakta" "dela fakta" "kontakt fakta"; grid-template-rows: auto auto 1fr; }
/* Knapparna i sidhuvudet: den viktigaste vit, de andra med vit kant. !important — kitets länkfärg vinner annars. */
.hn-evs-hjalte .hn-evs-knappar { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.hn-evs-hjalte :is(a, summary).hn-evs-knapp { background: transparent; border-color: rgba(255, 255, 255, .7); color: var(--e-global-color-accent, #fff) !important; }
.hn-evs-hjalte :is(a, summary).hn-evs-knapp.is-primar { background: var(--e-global-color-accent, #fff); border-color: var(--e-global-color-accent, #fff); color: var(--e-global-color-primary, #00354E) !important; }
.hn-evs-hjalte :is(a, summary).hn-evs-knapp:hover, .hn-evs-hjalte :is(a, summary).hn-evs-knapp:focus-visible { background: var(--e-global-color-hnhover, #14526F); border-color: var(--e-global-color-hnhover, #14526F); color: var(--e-global-color-accent, #fff) !important; }
@media (max-width: 1024px) {
	.hn-evs-hjalte { grid-template-columns: minmax(0, 1fr) 320px; column-gap: 32px; }
}
@media (max-width: 767px) {
	.hn-evs-hjalte { padding: 0 0 28px; gap: 20px; }
	.hn-evs-hjalte-text { padding: 0 var(--hn-sida); gap: 12px; }
	.hn-evs-hjalte .hn-evs-tummar { padding: 0 var(--hn-sida); }
	.hn-evs-hjalte .hn-evs-tumme { height: 64px; }
	.hn-evs-hjalte .hn-evs-namn { font-size: 30px; }
	.hn-evs-innehall.is-ny { grid-template-areas: "text" "dela" "fakta" "kontakt"; }
}

/* Knappraden syns bara på mobil — alla sidtyper (hn_knapprad_html()). */
.hn-knapprad { display: none; }

/* ── Surfplatta ── */
@media (max-width: 1024px) {
	.hn-evs-innehall { grid-template-columns: minmax(0, 1fr) 320px; column-gap: 32px; }
	.hn-evs-kort-rad { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.hn-evs-tumme { height: 130px; }
}

/* ── Mobil: bild → namn → knappar → TEXT → faktakort → formulär; fast knapprad nederst. Texten före kartan och
   öppettiderna (Aline 2026-09-24: "öppettider typ 2 gånger först … är karta på mobilen viktigare än texten?") ── */
@media (max-width: 767px) {
	/* Mobil: huvudbilden i full bredd, fyra miniatyrer under — ingen sidledsrullning. */
	.hn-evs-bilder { padding: 0 0 0; gap: 8px; }
	.hn-evs-bild.is-huvud { border-radius: 0; }
	.hn-evs-bilder > .hn-evs-bild.is-huvud, .hn-evs-bilder > .hn-evs-tummar { max-width: none; }
	.hn-evs-bild:hover img, .hn-evs-tumme:hover img { transform: none; }
	.hn-evs-tummar { gap: 8px; padding: 0 var(--hn-sida); }
	.hn-evs-tumme { height: 64px; border-radius: 8px; }
	.hn-evs-bilder-antal { right: 10px; bottom: 10px; padding: 6px 14px; font-size: 18px; }
	.hn-evs-tummar .hn-evs-tumme:nth-child(n+5) { display: none; }
	.hn-evs-tummar-fler.is-mobil { display: flex; }
	.hn-evs-innehall {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "huvud" "snabb" "knappar" "text" "fakta" "kontakt" "dela";
		grid-template-rows: none;
		padding-top: 20px; row-gap: 20px;
	}
	.hn-evs-fakta { position: static; }
	.hn-evs-fakta .hn-evs-dela { display: none; }
	.hn-evs-dela-mobil { display: block; padding-top: 4px; }
	/* Kategorierna överst, sedan kalenderbladet + namnet på samma rad, sedan datum och plats. */
	.hn-evs-huvud { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "chips chips" "kal namn"; gap: 12px 14px; align-items: center; }
	.hn-evs-huvud:not(:has(.hn-evs-kalender)) { grid-template-areas: "chips chips" "namn namn"; }
	.hn-evs-huvud-text { display: contents; }
	.hn-evs-chips { grid-area: chips; }
	.hn-evs-namn { grid-area: namn; font-size: 28px; }
	.hn-evs-kalender { grid-area: kal; width: 84px; border-radius: 12px; }
	.hn-evs-kalender-man { font-size: 16px; padding: 5px 0; }
	.hn-evs-kalender-dag { font-size: 32px; padding-top: 4px; }
	.hn-evs-kalender-vdag { font-size: 16px; padding: 2px 0 6px; }
	/* EN kolumn på mobil. Hitta hit och Fråga står i knappraden längst ner, och arrangörens hemsida ska aldrig
	   vara det första man ser (Aline 2026-09-24 om företagssidan) — här uppe bara Boka och Delta online. */
	.hn-evs-knappar { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
	body:has(.hn-evs-knapprad) .hn-evs-knappar .hn-evs-knapp:is([data-hn-click="phone"], [data-hn-click="directions"], [data-hn-click="email"], [data-hn-click="website"], [data-hn-click="foretag"]) { display: none; }
	body:has(.hn-evs-knapprad) .hn-evs-knappar .hn-hitta { display: none; }
	body:has(.hn-evs-knapprad) .hn-evs-knappar:not(:has(.hn-evs-knapp:is([data-hn-click="boka"], [data-hn-click="online"]))) { display: none; }
	.hn-evs-knapp { justify-content: center; }
	.hn-evs-text p, .hn-evs-text li, .hn-nyhet-text p, .hn-nyhet-text li { font-size: 18px; }
	.hn-evs-arrangor, .hn-evs-upptack { padding-top: 40px; gap: 32px; }
	.hn-evs-upptack { margin-top: 40px; padding-top: 0; padding-bottom: 40px; gap: 18px; }
	.hn-evs-upptack .hn-evs-upptack-huvud { padding: 28px var(--hn-sida); }
	/* EN kolumn, uppifrån och ner — ingen sidledsrullning (Aline 2026-09-24: "kan inte ha två kolumner i en mobil!!!
	   … man skrollar inte till höger som du tror där vid populärt nu"). */
	.hn-evs-kort-rad { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
	.hn-evs-lankar { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }

	/* MOBILENS KNAPPRAD — EN för alla sidtyper (2.113.0, hn_knapprad_html()). Lägena står längre ned (LÄGENA). */
	.hn-knapprad {
		display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; gap: 8px;
		position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
		background: #fff; border-top: 1px solid var(--e-global-color-hnkant1, #E5E9EC);
	}
	/* Två klasser: kitets länkvikt (600) vann över <a> men inte över Hitta hit (<summary>) — samma vikt på alla nu. */
	.hn-knapprad .hn-knapprad-knapp {
		display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 52px;
		font-size: 18px; font-weight: 600; color: var(--e-global-color-primary, #00354E); text-decoration: none; border-radius: 12px;
		text-align: center; line-height: 1.2; /* Mer om arrangören kan gå på två rader */
	}
	.hn-knapprad.is-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.hn-knapprad.is-1 { grid-template-columns: minmax(0, 1fr); }
	/* Boka är den stora: halva raden, med priset när vi säljer biljetten. */
	/* Utan bokning är Mer om arrangören den stora (2.104.0) — samma bredd, kitets färger som de andra i raden. */
	.hn-knapprad:is(.har-boka, .har-forsta).is-3 { grid-template-columns: 2fr 1fr 1fr; }
	.hn-knapprad:is(.har-boka, .har-forsta).is-2 { grid-template-columns: 2fr 1fr; }
	.hn-knapprad .hn-knapprad-knapp[data-hn-click="boka"] { flex-direction: row; gap: 8px; }
	body:has(.hn-knapprad) { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
	/* Cookie-ikonen får inte ligga över Ring-knappen. */
	body:has(.hn-knapprad) #moove_gdpr_save_popup_settings_button { bottom: calc(84px + env(safe-area-inset-bottom)) !important; }
	/* .is-2/.is-1 väger tyngre än en klass — utan dem delades NÄR/VAR i två smala spalter på mobil. */
	.hn-evs-snabb, .hn-evs-snabb.is-2, .hn-evs-snabb.is-1 { grid-template-columns: minmax(0, 1fr); }
	/* Etiketten OVANFÖR värdet, som på desktop (Aline 2026-10-02). Bredvid i en 64 px-kolumn gick ÖPPETTIDER och ANSTÄLLNING
	   (≈ 112 px i 16 px versaler) rakt in i värdet; en bredare kolumn lämnade ett tomrum under korta etiketter som VAR. */
	.hn-evs-snabb-cell { display: block; padding: 12px 16px; }
	.hn-evs-snabb-cell + .hn-evs-snabb-cell { border-left: 0; border-top: 1px solid var(--hn-kant); }
	.hn-evs-snabb dt { margin: 0; }
	.hn-evs-snabb dd { font-size: 19px; }
	.hn-evs-besked { padding-top: 16px; font-size: 18px; }
}

/* ── Aktivitetssidan (aktivitetssida.php, 2.76.0) lånar hela den här filen. Det enda egna: läget i rutan Öppet. ── */
.hn-akts-lage { font-weight: 700; }
.hn-akts-lage.is-oppet { color: var(--hn-gron); }
.hn-akts-lage.is-stangt { color: var(--hn-text); }
/* "Nästa evenemang" under knapparna på aktivitetssidan — vitt med kantlinje, hela raden är länken. */
.hn-akts-nasta {
	grid-area: nasta; display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 14px 18px; border: 1px solid var(--hn-kant);
	border-radius: 12px; background: var(--e-global-color-accent, #fff); color: var(--hn-bla); text-decoration: none; font-size: 18px;
}
.hn-akts-nasta:hover { border-color: var(--hn-bla-hover); color: var(--hn-bla-hover); }
.hn-akts-nasta-fler { color: var(--hn-dampad); font-weight: 500; }
/* PASSEN (2.167.0, Alines ja på docs/bilder/passen-*.png): linneplatta överst i textspalten, en vit ruta per pass — dagen i
   serif till vänster, guldstreck, tid och grupp till höger. Alltid öppet = samma platta, en rad. Bara kitets globaler. */
.hn-akts-pass { margin: 0 0 32px; padding: 26px 28px; border-radius: 16px; background: var(--e-global-color-hnlinne); color: var(--e-global-color-hngranit); }
.hn-akts-pass .hn-evs-etikett { color: var(--hn-bla); margin-bottom: 12px; }
.hn-akts-pass-rubrik { margin: 0 0 6px; font-family: var(--e-global-typography-hnserif1-font-family), serif; font-size: var(--e-global-typography-hnh3-font-size, 26px); font-weight: 500; line-height: 1.2; color: var(--hn-bla); }
.hn-akts-pass-ingress, .hn-akts-pass-fot, .hn-akts-pass-alltid { margin: 0; font-size: 18px; line-height: 1.5; }
.hn-akts-pass-alltid strong { color: var(--hn-bla); }
.hn-akts-pass-rader { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.hn-akts-pass-rad { display: flex; align-items: center; gap: 0; padding: 16px 20px; border: 1px solid var(--e-global-color-hnsten, var(--hn-kant)); border-radius: 14px; background: var(--e-global-color-accent, #fff); }
.hn-akts-pass-dag { display: flex; flex-direction: column; align-items: center; min-width: 88px; padding-right: 18px; margin-right: 18px; border-right: 3px solid var(--e-global-color-hnnal); }
.hn-akts-pass-dag-kort { font-family: var(--e-global-typography-hnserif1-font-family), serif; font-size: var(--e-global-typography-hnh2-font-size, 32px); font-weight: 500; line-height: 1.1; color: var(--hn-bla); }
.hn-akts-pass-dag-lang { font-size: 16px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--e-global-color-hngranit); }
.hn-akts-pass-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.hn-akts-pass-tid { font-size: 20px; font-weight: 700; color: var(--hn-bla); }
.hn-akts-pass-grupp { font-size: 18px; }
.hn-akts-pass-fot { margin-top: 18px; }
.hn-akts-pass-fot strong { color: var(--e-global-color-hngranit); }
@media (max-width: 767px) {
	.hn-akts-pass { padding: 22px 20px; margin-bottom: 24px; }
	.hn-akts-pass-rader { grid-template-columns: minmax(0, 1fr); }
}
/* Egen rad i rutnätet, bara när raden finns (en tom rad hade gett en extra lucka). */
.hn-evs-innehall:has(> .hn-akts-nasta) {
	grid-template-areas: "huvud fakta" "snabb fakta" "knappar fakta" "nasta fakta" "text fakta" "dela fakta" "kontakt fakta";
	grid-template-rows: auto auto auto auto auto 1fr;
}
@media (max-width: 767px) {
	.hn-evs-innehall:has(> .hn-akts-nasta) { grid-template-areas: "huvud" "snabb" "knappar" "nasta" "text" "fakta" "kontakt" "dela"; grid-template-rows: none; }
}

/* ── HÖR IHOP MED — egen rad i FULL BREDD under text + faktakort (2.169.0, Aline 2026-10-11 "Ja": låg i textspalten, smal hela
   vägen också där faktakortet slutat). Desktop: inget namngivet område — raden spänner båda spalterna och hamnar av sig själv
   efter de namngivna raderna, i alla tre rutnäten (med huvud, is-ny, nasta); ingen rad finns när sektionen saknas.
   Mobil: dagens ordning, direkt efter texten — bara när sektionen finns (en tom rad hade gett en extra lucka). ── */
.hn-evs-innehall > .hn-evs-kopplat { grid-column: 1 / -1; margin-top: 12px; }
.hn-evs-kopplat h2 { margin: 0; font-size: clamp(26px, 2.2vw, 34px); color: var(--hn-bla); }
@media (max-width: 767px) {
	.hn-evs-innehall > .hn-evs-kopplat { grid-area: kopplat; margin-top: 0; }
	.hn-evs-innehall:has(> .hn-evs-kopplat) { grid-template-areas: "huvud" "snabb" "knappar" "text" "kopplat" "fakta" "kontakt" "dela"; }
	.hn-evs-innehall.is-ny:has(> .hn-evs-kopplat) { grid-template-areas: "text" "kopplat" "dela" "fakta" "kontakt"; }
	.hn-evs-innehall:has(> .hn-akts-nasta):has(> .hn-evs-kopplat) { grid-template-areas: "huvud" "snabb" "knappar" "nasta" "text" "kopplat" "fakta" "kontakt" "dela"; }
}

/* ── Jobb- och fastighetssidan (objektsida.php, 2.78.0) lånar hela filen. Det egna: faktatabellen och ja-listan. ── */
.hn-objs-rader { margin: 0; display: grid; gap: 8px; }
.hn-objs-rader > div { display: flex; justify-content: space-between; gap: 12px; font-size: 18px; border-bottom: 1px solid var(--hn-kant); padding-bottom: 8px; }
.hn-objs-rader > div:last-child { border-bottom: 0; padding-bottom: 0; }
.hn-objs-rader dt { color: var(--hn-dampad); font-weight: 500; }
.hn-objs-rader dd { margin: 0; font-weight: 700; color: var(--hn-text); text-align: right; }
.hn-objs-ja { margin: 6px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.hn-objs-ja li { padding: 4px 12px; border: 1px solid var(--hn-kant); border-radius: 999px; font-size: 18px; font-weight: 600; color: var(--hn-bla); }
/* VI ERBJUDER överst i evenemangets textspalt (2.153.0) — som .hn-ftg-text i hn-foretagssida.css: luft före
   underrubriken, textens radhöjd släpps på etiketterna. */
.hn-evs-text .hn-faciliteter { margin: 0 0 32px; }
.hn-evs-text .hn-objs-ja li { line-height: 1.4; }
/* VI ERBJUDER KOMPAKT (2.229.0, Aline 2026-10-16): slagen tätare, etiketterna lägre, högst åtta per slag + Visa alla (kortdelar.php). */
div.hn-erbjuder { margin: 0 0 32px; }
div.hn-erbjuder > .hn-faciliteter { margin: 0 0 14px; }
div.hn-erbjuder > .hn-faciliteter:last-child { margin-bottom: 0; }
div.hn-erbjuder .hn-objs-ja { margin-top: 4px; gap: 6px; align-items: center; }
div.hn-erbjuder .hn-objs-ja li { padding: 2px 10px; font-weight: 500; line-height: 1.4; }
div.hn-erbjuder .hn-objs-ja li[hidden] { display: none; }
div.hn-erbjuder .hn-objs-ja li.hn-erbjuder-knapp { padding: 0; border: 0; }
/* ÄMNESSIDANS KLOSS [hn_amne_ord] (2.188.0, 8-amnen.md 10b): kategorierna som länkar, orden som etiketter under. */
.hn-amne-ord { margin: 48px 0 0; }
.hn-amne-ord-kategorier { list-style: none; margin: 0; padding: 0; display: grid; gap: 24px; }
.hn-amne-ord-kategorier li.hn-amne-ord-kategori { margin: 0; }
.hn-amne-ord-kategoriknapp { max-width: 100%; }
.hn-amne-ord .hn-objs-ja { margin-top: 12px; }
.hn-amne-ord .hn-objs-ja li { line-height: 1.4; margin: 0; }
/* Orden = knappar ur kitets knappfamilj (stil.md 10a), inte etikettens ram. Ord utan kategori är kvar som etiketter. */
.hn-amne-ord .hn-objs-ja li:has(> a.hn-knapp) { padding: 0; border: 0; border-radius: 0; }
.hn-amne-ord-ovriga { margin-top: 24px; }


/* ═══ KUST OCH LAND, ALLA SIDTYPER (Aline 2026-09-27, ja på skissen och på lägestabellen) ═══════════════════════════ */

/* Kontaktkortets rubrik — kitets H3, bara avståndet här. */
.hn-kort-rubrik { margin: 0; padding: 18px 22px 0; }
/* H2 sedan 2026-09-28 (rubrikhoppet H1 → H3 för Google och AI-svar) — men samma UTSEENDE som förut, kitets H3-storlek:
   inte kitets H2 (guld, stor). Värdena ur kitets globaler hnh3 + primary. */
h2.hn-kort-rubrik {
	font-family: inherit; font-size: var(--e-global-typography-hnh3-font-size); font-weight: 700;
	line-height: 1.3; letter-spacing: normal; text-transform: none; color: var(--e-global-color-primary);
}

/* Den blå botten i tre nyanser ur kitet: Tipsa en vän i fjärd, Mer att upptäcka i marinblått, varannan sektion i skog.
   Texten blir vit genom kitets hn-pa-morkt och reglerna nedan. */
.hn-botten-dela { margin-top: 72px; padding: 28px var(--hn-sida, clamp(16px, 4vw, 64px)); background: var(--e-global-color-hnfjard); color: var(--e-global-color-accent); }
.hn-botten-dela .hn-dela { margin: 0; }
.hn-botten-dela + .hn-ftg-upptack, .hn-botten-dela + .hn-evs-upptack { margin-top: 0; }
.hn-botten-dela .hn-dela-etikett { color: var(--e-global-color-accent); }
.hn-ftg-upptack, .hn-evs-upptack { background: var(--e-global-color-primary); color: var(--e-global-color-accent); }
.hn-ftg-upptack h3, .hn-evs-upptack h3,
.hn-ftg-upptack .hn-ftg-kortet-namn, .hn-evs-upptack .hn-evs-kortet-namn,
.hn-ftg-upptack .hn-ftg-kortet-meta, .hn-evs-upptack .hn-evs-kortet-meta { color: var(--e-global-color-accent); }
.hn-ftg-upptack > .hn-ftg-sektion:nth-child(odd), .hn-evs-upptack > .hn-evs-sektion:nth-child(odd) {
	margin: 0 calc(-1 * var(--hn-sida)); padding: 36px var(--hn-sida); background: var(--e-global-color-hnskog);
}
/* Typernas kort på den blå botten (2.120.0): kortmallen är genomskinlig och ärver bandets vita text — kortet får sin
   ljusa yta och sidans textfärg tillbaka, så det ser ut som på en vit sida. */
.hn-ftg-upptack .hn-kortrad .hn-kort, .hn-evs-upptack .hn-kortrad .hn-kort {
	background-color: var(--e-global-color-accent); color: var(--e-global-color-hngranit); overflow: hidden;
}

/* ═══ KNAPPRADEN i botten (mobil) = MARINBLÅ (Aline 2026-09-28: *"du skulle göra bakgrunden blå?"*), och heronas knappar
   döljs på mobil där raden finns — samma tre knappar två gånger (*"vad med knappar där nere?"*). Marinblått var raden än
   syns (2.113.0): förut bara ≤ 767 px medan texten var vit på alla bredder — vitt på vitt om raden visats på en surfplatta. ═══ */
.hn-knapprad { background: var(--e-global-color-primary) !important; border-top-color: var(--e-global-color-primary) !important; }
@media (max-width: 767px) {
	body:has(.hn-knapprad) .hn-hero .hn-hero-knappar { display: none; }
}

/* ═══ LÄGENA — allt man kan trycka på (Aline 2026-09-27: *"i stilprofilen ha hur man har olika lägen? Aktiv, trycka?"*).
   Vila · hover BARA med mus · tryckt (fingret) · fokus (tangentbord). Texten får aldrig samma färg som botten.
   På den marinblå knappraden: vila marinblå/vit, tryckt fjärd/vit, Boka omvänd (vit/marinblå). ═══ */
.hn-knapprad .hn-knapprad-knapp:not([data-hn-click="boka"]) {
	background: transparent !important; color: var(--e-global-color-accent) !important;
}
.hn-knapprad .hn-knapprad-knapp[data-hn-click="boka"] { background: var(--e-global-color-accent) !important; color: var(--e-global-color-primary) !important; }
@media (hover: hover) {
	.hn-knapprad .hn-knapprad-knapp:hover {
		background: var(--e-global-color-hnfjard) !important; border-color: var(--e-global-color-hnfjard) !important; color: var(--e-global-color-accent) !important;
	}
}
@media (hover: none) {
	.hn-knapprad .hn-knapprad-knapp:not([data-hn-click="boka"]):hover {
		background: transparent !important; color: var(--e-global-color-accent) !important;
	}
}
.hn-knapprad .hn-knapprad-knapp:active {
	background: var(--e-global-color-hnfjard) !important; color: var(--e-global-color-accent) !important;
}
.hn-knapprad .hn-knapprad-knapp:focus-visible {
	outline: 2px solid var(--e-global-color-accent); outline-offset: 2px;
}

/* Nyhetens video (nyhetssida.php): full bredd i 16:9 — oEmbed ger 800×450 som annars sträcks på höjden. */
.hn-nyhet-video iframe { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; border-radius: 10px; }
.hn-nyhet-video { margin-bottom: 24px; }

/* EN bild: i sin egen form och mindre (samma regel i hn-foretagssida.css, som även bär galleriets rutnät). Aline 2026-09-28. */
.hn-evs-bilder.is-en { display: block; }
.hn-evs-bilder.is-en > .hn-evs-bild.is-egen-form { display: inline-block; aspect-ratio: auto; width: auto; max-width: min(100%, 640px); margin: 0; border-radius: 14px; }
.hn-evs-bilder.is-en .hn-evs-bild.is-egen-form img { position: static; inset: auto; width: auto; max-width: 100%; height: auto; max-height: 70vh; object-fit: contain; }
@media (min-width: 768px) { .hn-evs-bilder.is-en .hn-evs-bild.is-egen-form img { max-height: 420px; } }

/* INKLISTRAD TEXT (genomgången 2026-09-28: Grupp­träning Friskis hade text klistrad från en annan sajt med width 812.8px,
   eget typsnitt och font-size 1rem — 829 px bred sida i mobilen och 16 px-text). Kundens text står orörd i databasen; här
   får inget i den bli bredare än textytan, och typsnitt, storlek och bakgrund kommer från kitet. */
.hn-evs-text * { max-width: 100% !important; box-sizing: border-box; }
.hn-evs-text [style*="width"] { width: auto !important; }
.hn-evs-text [style*="font-family"], .hn-evs-text [style*="font-size"] { font-family: inherit !important; font-size: inherit !important; }
.hn-evs-text [style*="background"] { background-color: transparent !important; }
.hn-evs-text [style*="color:"] { color: inherit !important; }

/* ── KONTAKTRUTAN (kloss.php hn_kloss_agera_html(), 2.123.0) — EN för alla sidtyper, under sidans text. Aline 2026-10-05:
   *"ska vara lätta att förstå...jaha här kan jag ringa.....jaha här kan jag anmäla mig"*. Linneplattan (den enda plattan), en rad
   per handling: symbol + handlingen i fetstil + en hjälprad. Första raden är huvudhandlingen (marin). Lägena: vila · hover (mus)
   · tryckt · fokus. Färger ur kitet. ── */
.hn-agera {
	--hn-bla: var(--e-global-color-primary, #00354E);
	--hn-bla-hover: var(--e-global-color-hnhover, #14526F);
	--hn-vit: var(--e-global-color-accent, #fff);
	box-sizing: border-box; clear: both; margin: 48px 0 8px; padding: clamp(24px, 3vw, 40px);
	background: var(--e-global-color-hnlinne, #F7F3EC); border-radius: 16px; color: var(--e-global-color-text, #1f2937);
}
.hn-agera * { box-sizing: border-box; }
.hn-agera .hn-agera-rubrik { margin: 0 0 6px; color: var(--hn-bla); }
.hn-agera .hn-agera-ingress { margin: 0 0 22px; font-size: 18px; }
.hn-agera-rader { display: flex; flex-wrap: wrap; gap: 14px; }
.hn-agera-rader > * { flex: 1 1 300px; min-width: 0; } /* flex, inte rutnät: en udda knapp fyller raden — ingen tom ruta */
.hn-agera .hn-hitta { display: flex; }
.hn-agera-rad, .hn-agera .hn-hitta > summary.hn-agera-rad {
	display: flex; align-items: center; gap: 16px; width: 100%; min-height: 84px; padding: 16px 20px;
	background: var(--hn-vit); color: var(--hn-bla) !important; border: 2px solid transparent; border-radius: 14px;
	text-decoration: none !important; cursor: pointer; transition: border-color .15s, transform .1s;
}
.hn-agera-rad.is-forst, .hn-agera .hn-hitta > summary.hn-agera-rad.is-forst { background: var(--hn-bla); color: var(--hn-vit) !important; } /* Hitta hit först: evenemang utan bokning */
@media (hover: hover) {
	.hn-agera-rad:hover { border-color: var(--hn-bla); }
	.hn-agera-rad.is-forst:hover, .hn-agera .hn-hitta > summary.hn-agera-rad.is-forst:hover { background: var(--hn-bla-hover); border-color: var(--hn-bla-hover); }
}
.hn-agera-rad:active { transform: scale(.98); }
.hn-agera-rad:focus-visible { outline: 3px solid var(--hn-bla); outline-offset: 3px; }
.hn-agera-ikon { flex: 0 0 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: var(--hn-bla); color: var(--hn-vit); }
.hn-agera-rad.is-forst .hn-agera-ikon { background: var(--hn-vit); color: var(--hn-bla); }
.hn-agera-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hn-agera-text b { font-size: 21px; font-weight: var(--e-global-typography-hnknapp-font-weight); line-height: 1.25; overflow-wrap: anywhere; }
.hn-agera-text span { font-size: 18px; line-height: 1.35; }
/* ARRANGÖR överst i evenemangets ruta (2.329.0, Aline 2026-10-30): etiketten, sedan logo + namn per arrangör. */
.hn-agera-arr { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; margin: 0 0 18px; }
.hn-agera-arr .hn-evs-etikett { margin: 0; color: var(--e-global-color-primary); }
.hn-agera-arr .hn-evs-arr-rad { padding: 0; gap: 12px; }
.hn-agera-arr .hn-evs-arr-rad + .hn-evs-arr-rad { border-top: 0; margin-top: 0; padding-top: 0; }
.hn-agera-arr .hn-evs-arr-logo { width: 48px; height: 48px; border-radius: 10px; padding: 3px; border: 1px solid var(--e-global-color-hnkant1); background: var(--e-global-color-accent); }
.hn-agera-arr :is(a, .hn-evs-varde) { font-size: var(--e-global-typography-hnkort-font-size); font-weight: var(--e-global-typography-hnkort-font-weight); color: var(--e-global-color-primary); }
.hn-agera-mer { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 20px; }
.hn-agera-folj { font-size: 16px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--hn-bla); }
.hn-agera-sociala { display: flex; gap: 10px; }
.hn-agera-social, .hn-agera-webb { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; color: var(--hn-bla) !important; text-decoration: none !important; }
.hn-agera-social { width: 44px; border-radius: 50%; background: var(--hn-vit); font-size: 20px; border: 2px solid transparent; }
.hn-agera-webb { gap: 6px; margin-left: auto; font-size: 18px; font-weight: 700; }
@media (hover: hover) { .hn-agera-social:hover { border-color: var(--hn-bla); } .hn-agera-webb:hover { color: var(--hn-bla-hover) !important; } }
.hn-agera-social:active, .hn-agera-webb:active { transform: scale(.96); }
.hn-agera-social:focus-visible, .hn-agera-webb:focus-visible { outline: 3px solid var(--hn-bla); outline-offset: 3px; }
@media (max-width: 767px) {
	.hn-agera { margin: 36px 0 8px; }
	.hn-agera-webb { margin-left: 0; }
	.hn-agera-rader > * { flex-basis: 100%; }
}

/* ═══ SPONSORERNA (2.158.0, Aline 2026-10-10 *"tydligare? kanske en blå sektion? Större text"* · *"Bild och Logo och titel"*):
   Våra sponsorer (föreningen) och Stöttar (företaget) = ett marinblått band med serifrubriken i stort, och korten bara
   bild + logga + namn — varumärket syns, kortet leder till företagets sida hos oss. Kategorier, adress, öppettider och
   Läs mer döljs här. Texten Så sponsrar du föreningen står under bandet på vit botten. ═══ */
.hn-sponsorer {
	margin: 48px 0; padding: clamp(28px, 4vw, 48px) 0;
	background: var(--e-global-color-primary); color: var(--e-global-color-accent);
	/* Blått i FULL bredd, kant i kant (Aline 2026-10-11 *"container är blå full bredd"*) — innehållet står kvar i sidans spalt.
	   Skuggan + klippet målar ut färgen utan att ändra layouten: ingen sidoscroll. */
	box-shadow: 0 0 0 100vmax var(--e-global-color-primary); clip-path: inset(0 -100vmax);
}
.hn-sponsorer > h2, .hn-ftg-egna .hn-sponsorer > h2 { /* företagssidans .hn-ftg-egna h2 (marinblå) slog rubriken (2.164.1) */
	color: var(--e-global-color-accent);
	font-family: var(--e-global-typography-hnserif1-font-family), serif; font-size: var(--e-global-typography-hnserif1-font-size);
	font-weight: var(--e-global-typography-hnserif1-font-weight); line-height: var(--e-global-typography-hnserif1-line-height);
}
.hn-sponsorer .hn-kortrad .hn-kort { background-color: var(--e-global-color-accent); color: var(--e-global-color-hngranit); overflow: hidden; }
.hn-sponsorer .hn-kortrad .elementor-widget-shortcode:not(.hn-namnknapp-ruta),
.hn-sponsorer .hn-kortrad .hn-card-fakta,
.hn-sponsorer .hn-kortrad .elementor-widget-button { display: none; }
/* Förslag D (2.164.0): namnknappen är kortets fot i full bredd och bryts bara mellan ord. FYRA i bredd från 1280 (Aline 2026-10-10
   *"såklart du får plats med 4"*): 16 px mellan korten och 24 px luft i bandet ger 240 px kort vid 1280 — Massagespecialisten ryms
   med knappens 1 px teckenavstånd (hn-lista.css). 1025–1279 blir korten 187 px med fyra → tre där. */
@media (min-width: 1025px) {
	.hn-sponsorer .hn-kortrad .hn-kortrad-kort { column-gap: 16px; }
}
@media (min-width: 1025px) and (max-width: 1279px) {
	.hn-sponsorer .hn-kortrad .hn-kortrad-kort:not(.is-farre) { grid-template-columns: repeat(min(var(--hn-kol, 4), 3), minmax(0, 1fr)); }
}
@media (max-width: 767px) { .hn-sponsorer { padding: 24px 0; } }
/* ═══ GUIDEN DAG FÖR DAG (2.180.0, guidelista.php hn_guide_dagar_html(); Aline 2026-10-13 "ja snyggt bygg det") ═══════════
   H2 per dag med guldstreck, evenemanget första gången som bild + text, dagarna efter en kort rad. Hela raden är länken. */
.hn-guide-dagar {
	--hn-bla: var(--e-global-color-primary, #00354E);
	--hn-kant: var(--e-global-color-hnkant1, #E5E9EC);
	--hn-dampad: var(--e-global-color-hngranit, #4a5560);
	margin: 0 0 48px;
}
.hn-guide-dagar .hn-guide-dag {
	margin: 40px 0 4px; padding: 0 0 6px; border-bottom: 2px solid var(--e-global-color-accent);
	font-family: var(--e-global-typography-hnserif1-font-family), serif; font-size: var(--e-global-typography-hnh3-font-size, 26px);
	font-weight: 500; line-height: 1.2; color: var(--hn-bla);
}
.hn-guide-dag-rad {
	display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 20px; padding: 18px 0;
	border-bottom: 1px solid var(--hn-kant); color: inherit; text-decoration: none;
}
.hn-guide-dag-rad:hover h3, .hn-guide-dag-rad:hover strong { color: var(--e-global-color-hnhover, #14526F); }
.hn-guide-dag-rad:active { opacity: 0.85; }
.hn-guide-dag-rad:focus-visible { outline: 2px solid var(--hn-bla); outline-offset: 2px; }
.hn-guide-dag-bild img, .hn-guide-dag-tom { display: block; width: 180px; height: 128px; object-fit: cover; border-radius: 8px; }
.hn-guide-dag-tom { background: var(--e-global-color-hnlinne); }
.hn-guide-dag-text h3 { margin: 0 0 6px; font-size: var(--e-global-typography-hnh3-font-size, 22px); font-weight: 600; line-height: 1.3; color: var(--hn-bla); }
.hn-guide-dag-ingress { display: block; margin: 0 0 8px; font-size: 18px; line-height: 1.6; }
.hn-guide-dag-fakta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 18px; color: var(--hn-dampad); }
.hn-guide-dag-etikett {
	padding: 2px 12px; border: 1px solid var(--hn-kant); border-radius: 999px;
	font-size: 16px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--hn-bla);
}
.hn-guide-dag-rad--kort { padding: 12px 0; font-size: 18px; color: var(--hn-bla); }
.hn-guide-dag-tid { color: var(--hn-dampad); }
.hn-guide-dag-se { color: var(--hn-dampad); font-weight: 400; }
.hn-guide-dag-rad--utgangen { opacity: 0.7; }
@media (max-width: 600px) {
	.hn-guide-dag-rad { grid-template-columns: 1fr; gap: 10px; }
	.hn-guide-dag-bild img, .hn-guide-dag-tom { width: 100%; height: auto; aspect-ratio: 16 / 9; }
	.hn-guide-dag-rad--kort { gap: 2px; }
}

/* VECKAN PÅ EN BLICK (2.286.0, Aline 2026-10-22): tabellen på dator, ett kort per evenemang på mobil. Bara kitets globaler. */
.hn-guide-vecka { margin: 48px 0; }
.hn-guide-vecka-sub { color: var(--hn-dampad); margin: 0 0 20px; }
.hn-guide-vecka-tabell { width: 100%; border-collapse: collapse; }
.hn-guide-vecka-tabell thead th {
	font-family: var(--e-global-typography-hnetikett-font-family); font-size: var(--e-global-typography-hnetikett-font-size);
	font-weight: var(--e-global-typography-hnetikett-font-weight); letter-spacing: var(--e-global-typography-hnetikett-letter-spacing);
	color: var(--hn-bla); text-align: center; padding: 10px 4px; border-bottom: 2px solid var(--hn-bla);
}
.hn-guide-vecka-tabell thead th:first-child { text-align: left; width: 32%; }
/* 14–16 dagar: namnkolumnen lämnar plats, så att «19:15» ryms i rutan vid 1280 px och bredare (2.399.1, Guiderna steg 28). Med 26 % bröts den i «19:1 / 5» på live. */
.hn-guide-vecka-tabell:has(thead th:nth-child(15)) thead th:first-child { width: 24%; }
.hn-guide-vecka-tabell thead small { display: block; font-size: 16px; font-weight: 400; letter-spacing: 0; color: var(--hn-dampad); }
.hn-guide-vecka-tabell tbody th, .hn-guide-vecka-ruta { border-bottom: 1px solid var(--hn-kant); padding: 12px 4px; vertical-align: middle; }
.hn-guide-vecka-tabell tbody th { text-align: left; font-weight: 400; }
.hn-guide-vecka-ruta { text-align: center; padding: 12px 2px; }
.hn-guide-vecka .hn-guide-vecka-tabell tbody > tr > * { background-color: transparent; } /* temats randiga rader */
.hn-guide-vecka .hn-guide-vecka-tabell tr > .is-helg { background-color: var(--e-global-color-hnlinne); }
.hn-guide-vecka-tabell { table-layout: fixed; }
.hn-guide-vecka a { color: var(--hn-bla); font-weight: 700; text-decoration: none; }
.hn-guide-vecka a:hover, .hn-guide-vecka a:focus-visible { color: var(--hn-bla-hover); text-decoration: underline; }
.hn-guide-vecka-om { display: block; font-size: 16px; color: var(--hn-dampad); }
.hn-guide-vecka-tid {
	display: block; margin: 2px auto; padding: 4px 1px; max-width: 110px; border-radius: 6px; background: var(--hn-bla);
	color: var(--e-global-color-accent, #fff); font-size: 16px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere;
}
.hn-guide-vecka-korten { display: none; }
.hn-guide-vecka-kort { border: 1px solid var(--hn-kant); border-radius: 10px; padding: 16px; margin-bottom: 14px; }
.hn-guide-vecka-kort h3 { margin: 0; font-size: 18px; font-family: var(--e-global-typography-text-font-family); }
.hn-guide-vecka-dagar { display: grid; gap: 3px; margin-top: 12px; text-align: center; }
.hn-guide-vecka-dag { font-size: 16px; color: var(--hn-dampad); text-transform: uppercase; }
.hn-guide-vecka-dag b { display: block; font-size: 16px; color: var(--hn-text); }
.hn-guide-vecka-dag i { display: block; height: 28px; border-radius: 5px; background: var(--hn-kant); }
.hn-guide-vecka-dag i.is-pa { background: var(--hn-bla); }
.hn-guide-vecka-tider { margin: 10px 0 0; font-size: 16px; }
/* 10–16 dagar under 1280 px: rutorna blir för smala, samma kort som i mobilen tar över (2.397.0). */
@media (max-width: 1279px) {
	.hn-guide-vecka:has(thead th:nth-child(11)) .hn-guide-vecka-tabell { display: none; }
	.hn-guide-vecka:has(thead th:nth-child(11)) .hn-guide-vecka-korten { display: block; }
}
@media (max-width: 767px) {
	.hn-guide-vecka-tabell { display: none; }
	.hn-guide-vecka-korten { display: block; }
	/* Dagraden bryts efter sju dagar i stället för att gå ut över kortet (stil.md 8: aldrig svep i sidled). */
	.hn-guide-vecka-dagar { grid-template-columns: repeat(var(--hn-kol-m, 7), minmax(0, 1fr)) !important; row-gap: 10px; }
}

/* ALLA EVENEMANG PÅ LOVET (2.287.0, Aline 2026-10-22 «ja bygg så»): stor bild + text, en ruta per datum, Läs mer marinblå +
   Anmäl dig skogsgrön. Bara rubriken djupblå, texten kitets textfärg. Mobil: bilden överst. Bara kitets globaler. */
.hn-guide-evenemang { margin: 48px 0; }
.hn-guide-ev { display: grid; grid-template-columns: 360px 1fr; gap: 28px; padding: 28px 0; border-top: 1px solid var(--hn-kant); }
.hn-guide-ev-bild img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; display: block; }
.hn-guide-ev h3 { margin: 0 0 6px; font-family: var(--e-global-typography-primary-font-family), serif; }
.hn-guide-ev h3 a { color: var(--hn-bla); text-decoration: none; font: inherit; }
.hn-guide-ev h3 a:hover, .hn-guide-ev h3 a:focus-visible { color: var(--hn-bla-hover); text-decoration: underline; }
.hn-guide-ev-om { margin: 0 0 12px; color: var(--e-global-color-text); font-size: var(--e-global-typography-hnetikett-font-size);
	font-weight: var(--e-global-typography-hnetikett-font-weight); letter-spacing: var(--e-global-typography-hnetikett-letter-spacing); text-transform: uppercase; }
.hn-guide-ev-ingress { margin: 0 0 14px; color: var(--e-global-color-text); }
.hn-guide-ev-datum { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; padding: 0; list-style: none; }
.hn-guide-ev-datum li { border: 1px solid var(--hn-bla); border-radius: 6px; padding: 6px 12px; color: var(--e-global-color-text); white-space: nowrap; margin: 0; }
.hn-guide-ev-knappar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
@media (max-width: 767px) {
	.hn-guide-ev { grid-template-columns: 1fr; gap: 14px; }
}

/* LOVGUIDENS HERO, VYRAD OCH KARTAN TILL HÖGER (2.288.0, Aline 2026-10-22 «Bygg … så som mockupen visar», hostlov-34896-wow).
   Bilden med djupblå ton nedåt, text i kitets vita, nedräkningen i nålgult. Kartan 340 px («kartan får inte vara för bred»). */
.hn-guide-hero { position: relative; min-height: 560px; display: flex; align-items: flex-end; padding: 40px; overflow: hidden;
	background: var(--e-global-color-primary) center / cover no-repeat; border-radius: 0 0 8px 8px; }
/* Bilden i tre storlekar (hn_kloss_bakgrund_stil(), 2.308.0): mobil large, 768–1536 px på vanlig skärm 1536, annars originalet. */
@media (max-width: 767px) { .hn-guide-hero[style*="--hn-bg-s"] { background-image: var(--hn-bg-s) !important; } }
@media (min-width: 768px) and (max-width: 1536px) and (max-resolution: 1.49dppx) { .hn-guide-hero[style*="--hn-bg-m"] { background-image: var(--hn-bg-m) !important; } }
.hn-guide-hero::before { content: ""; position: absolute; inset: 0;
	background: linear-gradient(180deg, color-mix(in srgb, var(--e-global-color-primary) 45%, transparent) 0%, color-mix(in srgb, var(--e-global-color-primary) 92%, transparent) 100%); } /* mörk över hela bilden, mobil och desktop (Aline 2026-10-22) */
.hn-guide-hero-inne { position: relative; color: var(--e-global-color-accent); max-width: 760px; }
.hn-guide-hero-versal { margin: 0 0 8px; color: inherit; font-family: var(--e-global-typography-hnversal-font-family), sans-serif; font-size: var(--e-global-typography-hnversal-font-size);
	font-weight: var(--e-global-typography-hnversal-font-weight); letter-spacing: var(--e-global-typography-hnversal-letter-spacing); text-transform: uppercase; }
.hn-guide-hero h1 { margin: 0 0 10px; color: var(--e-global-color-accent); font-family: var(--e-global-typography-primary-font-family), serif; font-size: 60px; line-height: 1.1; }
.hn-guide-hero-rad { margin: 0 0 20px; color: inherit; font-size: 22px; }
.hn-guide-hero-rutor { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.hn-guide-hero-rutor li { margin: 0; padding: 6px 16px; border: 1px solid color-mix(in srgb, var(--e-global-color-accent) 60%, transparent); border-radius: 999px;
	background: color-mix(in srgb, var(--e-global-color-accent) 16%, transparent); font-weight: 600; }
.hn-guide-hero-rutor li.is-nu { background: var(--e-global-color-hnnal); border-color: var(--e-global-color-hnnal); color: var(--e-global-color-primary); }
.hn-guide-vyrad-plats { max-width: 1200px; margin: 0 auto; padding: 0 16px; }
.hn-guide-vyrad { display: flex; gap: 10px; padding: 14px 0; background: var(--e-global-color-accent); border-bottom: 1px solid var(--hn-kant); }
.hn-guide-vyrad.is-fast { position: fixed; top: 0; left: 0; right: 0; z-index: 50; padding-left: max(16px, calc((100vw - 1200px) / 2)); padding-right: max(16px, calc((100vw - 1200px) / 2)); }
.admin-bar .hn-guide-vyrad.is-fast { top: 32px; }
.hn-guide-vyrad a { cursor: pointer; } /* flikarna har ingen href (2.291.1) — vybytet är inget kontaktklick */
.hn-guide-vyrad a:not([aria-current]) { opacity: .78; }
.hn-guide-vyrad a[aria-current] { box-shadow: inset 0 -4px 0 var(--e-global-color-hnnal); }
/* 2.288.4 (Aline 2026-10-22 «kartan funkar inte alls.....flytta den under istället»): kartan under evenemangen, full bredd. */
.hn-guide-kartan { margin: 48px 0; }
.hn-guide-kartan h2 { margin-top: 0; }
#hn-guide-evenemang, #hn-guide-kartan, #hn-guide-vecka { scroll-margin-top: 90px; }
@media (max-width: 900px) {
	.hn-guide-hero { min-height: 480px; padding: 20px; }
	.hn-guide-hero h1 { font-size: 38px; }
	.hn-guide-hero-rad { font-size: 19px; }
	.hn-guide-hero-rutor li { padding: 4px 12px; }
	.hn-guide-vyrad { gap: 8px; }
	.hn-guide-vyrad a { flex: 1 1 auto; min-width: 0; text-align: center; padding-left: 4px; padding-right: 4px; letter-spacing: var(--e-global-typography-hnetikett-letter-spacing); } /* 375 px: EVENEMANG klipptes i kanterna (Aline 2026-10-22) */
}
/* Mobil: fyra flikar får inte plats på en rad (Aline 2026-10-31) — raden bryts, två och två, ingen klippt text. Desktop orörd. */
@media (max-width: 600px) {
	.hn-guide-vyrad { flex-wrap: wrap; }
	.hn-guide-vyrad a { flex: 1 1 calc(50% - 4px); white-space: nowrap; padding-left: 8px; padding-right: 8px; }
}

/* Sidofältet (sidopanel.php hn_sidofalt_html(), Mallar steg 14): den SISTA panelen är sticky. Sidokolumnen sträcks över hela
   textens höjd (annars är den lika hög som sitt innehåll och inget kan följa med) och faktakortets egen is-fast släpps. */
@media (min-width: 768px) {
	.hn-evs-fakta:has(.hn-sidofalt-rad.is-sticky), .hn-ftg-fakta:has(.hn-sidofalt-rad.is-sticky) { align-self: stretch; }
	.hn-ftg-fakta.is-fast:has(.hn-sidofalt-rad.is-sticky) { position: static; }
	.hn-sidofalt-rad { align-self: flex-start; width: 100%; box-sizing: border-box; }
}
.hn-sidofalt-titel { margin: 0; font-size: 21px; line-height: 1.25; font-weight: 700; }
.hn-sidofalt-titel a { color: var(--hn-bla); text-decoration: none; }
.hn-sidofalt-titel a:hover { color: var(--hn-bla-hover); text-decoration: underline; }
.hn-sidofalt-rad .hn-sidopanel-fler { margin-top: 0; }
.hn-sidofalt-hitta .hn-hitta { margin-top: 8px; }
.hn-sidofalt-rad + .hn-sidofalt-rad { margin-top: 0; } /* sidokolumnen har redan 20 px luft (gap) */