/**
 * Guidekortet — samma form som resten av sajten, men byggt för en guide.
 *
 * GeoDir ritar multiselect som punktlista; på ett kort ska sortimentet vara
 * brickor på rad. Öppettiderna hamnar underst, avskilda med en linje, så de
 * läses som fakta och inte som en del av texten.
 *
 * Färgerna binds mot Elementor-kitet — ändras de där följer korten med.
 * Klasserna sätts i mallen "Guidekort" (30622) och finns ingen annanstans — det
 * delade företagskortet (22214) har dem inte, så resten av sajten rörs inte.
 * (Containerns egen klass renderas inte i GeoDirs arkivobjekt, därför ingen
 * förälder i väljarna.)
 */

.hn-kort-sortiment ul,
.hn-kort-sortiment ol {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hn-kort-sortiment li {
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.3;
	padding: 3px 11px;
	border-radius: 999px;
	border: 1px solid var(--e-global-color-hnkant1, #E5E9EC);
	background: #F8FAFB;
	color: var(--e-global-color-hndampad, #4a4a4a);
	margin: 0;
	list-style: none;
}

/* GeoDir lägger en etikettikon före värdet — den säger ingenting här. */
.hn-kort-sortiment .geodir-i-text,
.hn-kort-sortiment .fa,
.hn-kort-sortiment .fas {
	display: none;
}

.hn-kort-ort {
	font-size: 15.5px;
	color: var(--e-global-color-hndampad, #4a4a4a);
}

.hn-kort-tider {
	padding-top: 10px;
	border-top: 1px solid var(--e-global-color-hnkant1, #E5E9EC);
	font-size: 15px;
	font-variant-numeric: tabular-nums;
}

/* Guidens sidhuvud. Utan bild ritas HN:s marinblå ton — en guide utan utvald
   bild ska inte se trasig ut. Panelen ger kontrasten, fotot behåller sin lyster
   (sajtens hero-mönster: vit gradient över bilden, mörk text). */
.hnr-hero:not(.hnr-hero--bild) {
	background:
		radial-gradient(circle at 78% 28%, rgba(221,155,12,.2), transparent 46%),
		radial-gradient(circle at 92% 76%, rgba(15,122,108,.26), transparent 42%),
		linear-gradient(135deg, #00354E 0%, #0a4a68 58%, #14526F 100%);
}


/* ---- Guidens kort: rutnät, inte en lång stapel ------------------------------
 * Ett kort per rad gör sidan till en remsa man scrollar förbi. I rutnät ser man
 * flera gårdar samtidigt och kan välja — det var så det såg ut i skissen.
 */
.hnr-rad {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.hnr-rad .hnr-butik {
	margin: 0 !important;
	height: 100%;
	display: flex;
	flex-direction: column;
}

.hnr-rad .hnr-kropp {
	display: flex;
	flex-direction: column;
	flex: 1;
}

/* Länken längst ner, så korten får samma bottenlinje. */
.hnr-rad .hnr-kropp > p:last-child {
	margin-top: auto;
	padding-top: 6px;
}

@media (max-width: 880px) {
	.hnr-hero.hnr-hero--bild {
		padding-top: min(56vw, 260px) !important;
	}
	.hnr-hero:not(.hnr-hero--bild) {
		padding-top: 0 !important;
	}
	.hnr-hero .hnr-panel {
		padding: 26px 20px !important;
	}
	.hnr-hero h1 {
		font-size: 27px !important;
		line-height: 1.2;
	}
	.hnr-hero .hnr-over {
		font-size: 15px !important;
	}
}

/* Gårdskorten på liten skärm: bilden i 16:9, luftigare kropp. */
@media (max-width: 560px) {
	.hnr-rad .hnr-bildruta { aspect-ratio: 16 / 9; }
	.hnr-sort li { font-size: 14px; }
}