/*
 * HN Lista · HN Kategoritext · kortmallens delar (listor.php, kortmall.php) — SOM GEODIRS ARKIV I DAG.
 * Facit: /foretag/kategori/shopping-och-butiker/ ritad av gd_simple_archive + kortmallen 22214, uppmätt 2026-09-26
 * i 1440 och 375 px. KORTET ritas av Alines Elementor-kortmall (2.80.0) och stylas där och i hn-custom.css — här står
 * bara listan runt korten. Kartan OVANFÖR listan i full bredd (2.99.0, Aline 2026-09-30: korten blev smala bredvid
 * kartan); tre kort per rad i hela bredden, två under 1200 px, en kolumn i mobilen.
 * Färgerna är kitets globaler (4987) — byter Aline en global följer listan med. Typsnittet sätts bara i kitet.
 */
.hn-lista, .hn-adress, .hn-kategoritext {
	--hn-bla: var(--e-global-color-primary);
	--hn-bla-hover: var(--e-global-color-hnhover);
	--hn-guld: var(--e-global-color-secondary);
	--hn-kant: var(--e-global-color-hnkant1);
	--hn-text: var(--e-global-color-text);
	--hn-gron: var(--e-global-color-hngron);
	--hn-vit: var(--e-global-color-accent);
	box-sizing: border-box;
	color: var(--hn-text);
}
.hn-lista * { box-sizing: border-box; }
/* Elementors kolumn-container har flex-wrap på mobil: en widget vars höjd följer bredden mäts till ~0
   (minnet elementor-flex-wrap-mobil-nollar-hojd). Bestämd bredd löser det. */
.elementor-widget:has(> .elementor-widget-container > .hn-lista),
.elementor-widget:has(> .hn-lista) { width: 100%; }

/* ── Ytan: kartan överst i full bredd, listan under (2.99.0) ── */
.hn-lista-yta { display: block; }
.hn-lista-listdel { min-width: 0; }
.hn-lista-listdel[hidden] { display: none; }
.hn-lista-kartdel { margin: 0 0 24px; }
.hn-lista.is-bara-karta .hn-lista-kartdel { margin: 0; }
/* Höjden: widgetens val (--hn-karta-hojd, eget mobilvärde) eller kortkodens hojd, annars 480 px. */
.hn-lista-karta {
	position: relative; width: 100%; height: var(--hn-karta-hojd, 480px); overflow: hidden; border-radius: 12px;
	background: var(--hn-kant); display: flex; align-items: center; justify-content: center; font-size: 18px;
}

/* Infofönstret: bild + namn + adress i en rad, Läs mer, Hitta hit (samma tre kartor som sidornas knapp).
   Googles ruta får inte vara högre än kartan medger (~240 px i 480) — därför på bredden, inte på höjden. */
.hn-lista-info { width: 320px; max-width: 100%; font-size: 18px; line-height: 1.3; color: var(--hn-text); }
.hn-lista-info-topp { display: flex; gap: 12px; align-items: flex-start; }
.hn-lista-info-topp > div { min-width: 0; }
.hn-lista-info h4 { margin: 0 0 4px; font-size: 18px; font-weight: 600; line-height: 1.25; }
.hn-lista-info a { color: var(--hn-bla); text-decoration: none; }
.hn-lista-info .hn-lista-info-bild { flex: 0 0 84px; width: 84px; height: 84px; overflow: hidden; border-radius: 8px; background: var(--hn-kant); }
.hn-lista-info .hn-lista-info-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hn-lista-info .hn-lista-info-adress { margin: 0; color: var(--hn-bla); }
.hn-lista-info .hn-lista-info-las { margin-top: 10px; width: 100%; }
.hn-lista-info-hitta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 14px; margin: 8px 0 0; }
.hn-lista-info-hitta p { margin: 0; font-size: 16px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--hn-bla); }
.hn-lista-info-hitta ul { list-style: none; margin: 0; padding: 0; display: contents; }
.hn-lista-info-hitta li { display: inline; }
.hn-lista-info .hn-lista-info-hitta a { display: inline-block; padding: 6px 0; font-weight: 600; }

/* Mobilens Visa karta / Visa listan — GeoDirs btn-primary w-100. Syns bara under 992 px. */
.hn-lista button.hn-lista-vaxla {
	display: none; width: 100%; margin: 0 0 16px; padding: 8px 20px; min-height: 44px;
	align-items: center; justify-content: center; gap: 10px;
	font: inherit; font-size: 18px; font-weight: 500; line-height: 1.3; letter-spacing: 0; text-transform: none;
	color: var(--hn-vit); background: var(--hn-bla); border: 0; border-radius: 8px; cursor: pointer; box-shadow: none;
}
.hn-lista button.hn-lista-vaxla:hover, .hn-lista button.hn-lista-vaxla:focus-visible { background: var(--hn-bla-hover); color: var(--hn-vit); }
.hn-lista button.hn-lista-vaxla:focus-visible { outline: 3px solid var(--hn-bla); outline-offset: 2px; }
.hn-lista-vaxla [hidden] { display: none; }

/* ── Valraden: Nära mig · kommundelarna ── */
.hn-lista-valrad { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0 0 20px; }
.hn-lista-delar { display: contents; }
/* Valen = kitets hn-val (2.112.0): vit tills vald (aria-pressed), lägena därifrån. */
.hn-lista button.hn-lista-val { margin: 0; }
.hn-lista-besked { margin: -8px 0 16px; font-size: 18px; }
.hn-lista-tom { font-size: 18px; }

/* ── Korten: tre per rad i HELA bredden (2.99.0 — förut tre i två tredjedelar bredvid kartan). Fler i bredd gav halvtomma
   rader på kategorier med få ställen (sidvakten, /foretag/kategori/cafe/ 7 kort). 30 px mellan kolumner, 35 mellan rader ──
   Behållaren bär också GeoDirs klasser (elementor-posts-container …) så att kortreglerna i hn-custom.css gäller. */
.hn-lista .hn-lista-kort { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 35px 30px; padding: 10px; }
.hn-lista:not(.har-karta) .hn-lista-kort { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.hn-lista .hn-lista-post { margin: 0; padding: 0; min-width: 0; }
.hn-lista .hn-lista-kort > .hn-lista-post[hidden] { display: none !important; }
/* Nära mig: avståndet under adressen (skrivs av hn-lista.js). */
.hn-lista-avstand { display: block; font-size: 18px; font-weight: 600; color: var(--hn-bla); }
.hn-lista-avstand[hidden] { display: none; }

/* ── [hn_adress] — GeoDirs gd_post_address på kortet: kartnål + adress i HN-blått, samma storlek som i dag
   (GeoDirs fs-base, radhöjden ärvd; mätt 2026-09-26 på /foretag/kategori/shopping-och-butiker/: 16 px / 29 px). ── */
.hn-adress { text-align: center; color: var(--e-global-color-primary); font-size: 18px; }
.hn-adress-ikon { color: inherit; }

.hn-adress.hn-adress--vanster { text-align: left; }
/* Husets märke på kortets bild ("En del av Friskhuset", hus.php) — i hörnet, som på de gamla korten. */
.hn-kort-bild { position: relative; }
.hn-kort-bild .hn-hus-marke { position: absolute; top: 10px; right: 10px; line-height: 0; border-radius: 50%; }
.hn-kort-bild .hn-hus-marke-bild { width: 72px; height: 72px; aspect-ratio: 1 / 1; border-radius: 50%; display: block; object-fit: contain; }
@media (max-width: 767px) { .hn-kort-bild .hn-hus-marke-bild { width: 60px; height: 60px; } }
/* Har kortet en egen logga i höger hörn (hn-logo-badge) står märket i vänster. */
.hn-card-image:has(.hn-logo-badge img) .hn-kort-bild .hn-hus-marke { right: auto; left: 10px; }
/* WebP-omskrivningen slår in bilden i <picture> och flyttar klassen dit — den inre bilden fyller rundeln. */
picture.hn-hus-marke-bild > img { width: 100%; height: 100%; aspect-ratio: 1 / 1; object-fit: contain; border-radius: 50%; display: block; }

/* ── Kortdelarna (kortdelar.php, 2.82.0) — SOM GEODIRS DELAR PÅ KORTEN I DAG, uppmätt 2026-09-26 i webbläsaren på
   aktivitets-, fastighets- och nyhetsarkivet. Värdena är GeoDirs (AUI-badgen: 0,84em, luft 0,4375em/0,75em). ── */
/* Kortets bild (bildwidget + HN Sidans bild) fyller 16:9 som GeoDirs bildspel — alla sidtyper, loggan och
   absolut placerade delar (etiketter, pris) lämnas orörda. Våra klasser (.hn-local-type, 2.103.0), aldrig type-<sidtyp>. */
.hn-local-type .hn-card-image .elementor-widget-image:not(.elementor-absolute):not([class*="hn-logo"]) img:not(.hn-hus-marke *):not(.hn-hus-marke-bild) {
	aspect-ratio: 16 / 9; width: 100%; height: auto; object-fit: cover; object-position: center; display: block;
}
.hn-kategorier { display: block; margin: 0 0 8px; }
.hn-kategorier--pill { margin-bottom: 0; }
.hn-kategorier-rad { display: inline; }
.hn-kategorier .hn-kategori--pill,
.hn-kategorier .hn-kategori--etikett {
	display: inline-block; padding: 0.4375em 0.75em; font-size: 18px; font-weight: 400; line-height: 1;
	text-align: center; white-space: nowrap; vertical-align: baseline; border-radius: 6px; text-decoration: none;
}
.hn-kategorier .hn-kategori--pill { border-radius: 800px; }
.hn-kategorier .hn-kategori--ljus { background: #f9f8fa; color: #1f1b2d; }
.hn-kategorier .hn-kategori--mork { background: #212529; color: var(--e-global-color-accent); }
.hn-kategorier .hn-kategori--etikett:hover { color: var(--e-global-color-accent); }
.hn-kategorier .hn-kategori--lank { color: var(--e-global-color-primary); font-weight: 600; text-decoration: none; }
.hn-etikett-yta { display: block; }
.hn-etikett-yta--h4 { font-size: 23.472px; font-weight: 500; }
.hn-etikett {
	display: inline-block; max-width: 100%; padding: 0.4375em 0.75em; font-size: 18px; font-weight: 400; line-height: 1;
	white-space: nowrap; text-align: center; border-radius: 6px;
}
.hn-etikett--centrerad { display: block; width: fit-content; margin: 0 auto; }
/* Utgånget evenemang i en guides Kortrad (2.109.0): etiketten över kortets bild. */
.hn-lista-post--utgangen, .hn-lista-post--utgangen .hn-kort-bild { position: relative; }
.hn-kort-utgangen { position: absolute; top: 12px; left: 12px; z-index: 2; pointer-events: none; }
.hn-kort-utgangen .hn-etikett { font-weight: 600; color: var(--e-global-color-accent); background-color: var(--e-global-color-hngranit); }
/* Vad kortet ÄR (2.135.0): Förening · Evenemang · 9 okt · Aktivitet · Nyhet — i bildrutan på blandade rader (Mer från, Mer att upptäcka). */
.hn-lista-post--etikett, .hn-lista-post--etikett .hn-kort-bild { position: relative; }
.hn-kort-etikett { position: absolute; top: 12px; left: 12px; z-index: 2; pointer-events: none; }
.hn-kort-etikett .hn-etikett { font-weight: 600; font-size: 16px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--e-global-color-hnlinne); background-color: var(--e-global-color-primary); }
.hn-taggar { margin: 0 0 8px; }
.hn-kategorier-taggar { float: right; }
.hn-kategorier::after { content: ""; display: table; clear: both; }
.hn-falt-etikett { font-weight: 600; }

/* ── HN Kortrad (kortrad.php) — GeoDirs gd_listings/gd_linked_posts med Elementor-skin: N kort per rad på datorn,
   två på surfplatta, ett i mobilen (Elementors rutnät), 30 px i sidled och 35 px mellan rader. ── */
.hn-kortrad .hn-kortrad-kort {
	display: grid; grid-template-columns: repeat(var(--hn-kol, 4), minmax(0, 1fr));
	gap: var(--hn-radgap, 35px) var(--hn-kolgap, 30px);
}
.hn-kortrad .hn-lista-post { margin: 0; padding: 0; min-width: 0; }
.hn-kortrad-alla { text-align: center; margin-top: 16px; }
.hn-kortrad-alla a, .hn-redigera a {
	display: inline-block; padding: 8px 20px; min-height: 44px; font-size: 18px; font-weight: 500; line-height: 1.5;
	color: var(--e-global-color-primary); background: var(--e-global-color-accent);
	border: 1px solid var(--e-global-color-primary); border-radius: 8px; text-decoration: none;
}
.hn-kortrad-alla a:hover, .hn-kortrad-alla a:focus-visible { color: var(--e-global-color-accent); background: var(--e-global-color-primary); }
/* Omgångarna bakom Visa fler (2.110.0): omslaget släpper korten rakt in i rutnätet; en dold omgång är borta helt. */
.hn-kortrad-omgang:not([hidden]) { display: contents; }
.hn-kortrad-fler { text-align: center; margin-top: 32px; }
/* Visa fler i sektionens knapprad (2.111.3, hn-lista.js knappraden): dold på sin gamla plats, i raden som en knapp till. */
.elementor-widget-hn_kortrad:has(+ .e-con .elementor-widget-button) .hn-kortrad > .hn-kortrad-fler { display: none; }
.hn-kortrad-knapprad, .hn-kortrad-knapprad > .e-con-inner { flex-wrap: wrap; align-items: stretch; }
.hn-kortrad-knapprad .hn-kortrad-fler { display: flex; margin: 0 9px 9px 0; }
/* Samma höjd som Elementor-knappen bredvid: dess ruta tappar glappet under knappen, Visa fler fyller raden. */
.hn-kortrad-knapprad .elementor-button { vertical-align: top; }
.hn-kortrad-knapprad .hn-kortrad-fler .hn-knapp { height: 100%; }
/* Färre kort än spår (genomgången 2026-09-28): lika många spår som kort, i kortets vanliga bredd — aldrig tomma rutor. */
.hn-kortrad .hn-kortrad-kort.is-farre { grid-template-columns: repeat(var(--hn-kol, 1), minmax(0, 360px)); }
@media (min-width: 768px) {
	.hn-lista .hn-lista-kort:has(> .hn-lista-post:only-child) { grid-template-columns: minmax(0, 360px); }
	.hn-lista .hn-lista-kort:has(> .hn-lista-post:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 360px)); }
}
/* Två per rad upp till 1279 px: fyra kort blev 228 px breda runt 1 100 px och texten bröts i tre rader (mätt 2026-10-05). */
@media (min-width: 1025px) and (max-width: 1279px) {
	.hn-kortrad .hn-kortrad-kort:not(.is-farre) { grid-template-columns: repeat(min(var(--hn-kol, 4), 2), minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
	.hn-kortrad .hn-kortrad-kort { grid-template-columns: repeat(min(var(--hn-kol, 4), 2), minmax(0, 1fr)); }
	/* Fyra kort i taget på surfplatta och mobil: först omgångens fyra första, Visa fler ger de fyra sista (is-andra). */
	.hn-kortrad-omgang:not(.is-andra) > :nth-child(n+5),
	.hn-kortrad-omgang.is-andra > :nth-child(-n+4) { display: none; }
}
@media (max-width: 767px) {
	.hn-kortrad .hn-kortrad-kort { grid-template-columns: minmax(0, 1fr); }
	.hn-kategorier-taggar { float: none; display: block; }
}

/* ── Sidnummer (bara när någon valt ett antal per sida) ── */
.hn-lista-sidor { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; font-size: 18px; }
.hn-lista-sidor .page-numbers { padding: 8px 14px; border: 1px solid var(--hn-kant); border-radius: 12px; color: var(--hn-bla); text-decoration: none; }
.hn-lista-sidor .page-numbers.current { background: var(--hn-bla); color: var(--hn-vit); border-color: var(--hn-bla); }

/* ── Kategoritexten ── */
.hn-kategoritext { font-size: 18px; line-height: 1.6; }
.hn-kategoritext > :first-child { margin-top: 0; }
.hn-kategoritext > :last-child { margin-bottom: 0; }

/* Under 992 px som förut: kartan göms bakom Visa karta och tar då det mesta av skärmen. Bara karta syns direkt. */
@media (max-width: 1199px) {
	.hn-lista.har-karta .hn-lista-kort { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 991px) {
	.hn-lista button.hn-lista-vaxla { display: flex; width: calc(100% - 24px); margin: 0 12px 16px; }
	.hn-lista-valrad { padding: 0 12px; }
	.hn-lista:not(.is-bara-karta) .hn-lista-kartdel { display: none; }
	.hn-lista.visar-karta .hn-lista-kartdel { display: block; }
	.hn-lista.visar-karta .hn-lista-listdel { display: none; }
	.hn-lista:not(.is-bara-karta) .hn-lista-karta { height: 75vh; }
}
@media (max-width: 767px) {
	.hn-lista .hn-lista-kort, .hn-lista.har-karta .hn-lista-kort { grid-template-columns: minmax(0, 1fr); gap: 35px; padding: 10px 12px; }
	.hn-lista-valrad { gap: 8px; }
}