/**
 * BilListe Frontend — homepage.css
 *
 * Frontend M3 (§25): forsidens EGEN CSS - alt her forudsætter, at
 * foundation.css' designtokens allerede er indlæst (samme `:root`
 * custom properties, samme `.billiste-container`/`.billiste-section`-
 * primitiver fra M2, IKKE duplikeret her). Mobile first, ligesom
 * foundation.css: al base-CSS er mobil, brede skærme tilføjes
 * UDELUKKENDE via `min-width`-media queries.
 *
 * **Visuelt design (§25):** M3 introducerer forsidens første rigtige
 * accentfarve (`--billiste-color-accent-soft`, en lys baggrundstone
 * afledt af foundation.css' eksisterende `--billiste-color-accent`) -
 * bevidst IKKE et nyt, ukoordineret farveskema. Ingen gradienter,
 * ingen animationer ud over `--billiste-transition-fast` (allerede
 * etableret i foundation.css), ingen eksterne UI-frameworks. Målet er
 * en seriøs, enkel dansk bilmarkedsplads - ikke et "AI-udseende"
 * design.
 */

:root {
	--billiste-color-accent-soft: #eef3fa;
}

/* -------------------------------------------------------------------
 * Fælles sektionstitel (§22: korrekt overskriftshierarki - alle disse
 * er <h2>, ét niveau under Hero'ens <h1>)
 * ---------------------------------------------------------------- */

.billiste-section__title {
	margin: 0 0 var(--billiste-space-4);
	font-size: 1.5rem;
	line-height: 1.25;
	color: var(--billiste-color-text);
}

.billiste-home .billiste-section {
	border-bottom: 1px solid var(--billiste-color-border);
}

.billiste-home .billiste-section:last-child {
	border-bottom: none;
}

/* -------------------------------------------------------------------
 * Hero (§6) — **1.7.0 (redesign):** mørk, marineblå baggrund (samme
 * `--billiste-color-navy`-tokens som footeren/forhandler-panelet),
 * hvid overskrift/tekst for kontrast, søgekortet forbliver en LYS,
 * flydende kortoverflade (samme "hvid kort på mørk baggrund"-mønster
 * som `homepage.css`s øvrige panel-sektioner nu bruger).
 * ---------------------------------------------------------------- */

.billiste-hero {
	background: linear-gradient(160deg, var(--billiste-color-navy) 0%, var(--billiste-color-navy-soft) 100%);
	color: var(--billiste-color-on-navy);
}

.billiste-hero__inner {
	display: flex;
	flex-direction: column;
	gap: var(--billiste-space-4);
}

.billiste-hero__title {
	margin: 0 0 var(--billiste-space-2);
	font-size: 2rem;
	line-height: 1.15;
	color: var(--billiste-color-on-navy);
}

.billiste-hero__subtitle {
	margin: 0;
	color: var(--billiste-color-on-navy-muted);
	max-width: 40em;
}

/* -------------------------------------------------------------------
 * Hero-badges (§"1.7.0" - se HeroShortcode::renderBadges())
 * ---------------------------------------------------------------- */

.billiste-hero__badges {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--billiste-space-3);
}

.billiste-hero__badge {
	display: flex;
	align-items: flex-start;
	gap: var(--billiste-space-2);
	padding: var(--billiste-space-3);
	background: rgba(244, 246, 250, 0.06);
	border: 1px solid rgba(244, 246, 250, 0.14);
	border-radius: var(--billiste-radius);
}

.billiste-hero__badge-icon {
	flex: 0 0 auto;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 50%;
	background-color: var(--billiste-color-accent);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 60%;
}

.billiste-hero__badge-text {
	display: flex;
	flex-direction: column;
	font-size: 0.875rem;
}

.billiste-hero__badge-text strong {
	color: var(--billiste-color-on-navy);
}

.billiste-hero__badge-text span:last-child {
	color: var(--billiste-color-on-navy-muted);
}

@media (min-width: 640px) {
	.billiste-hero__badges {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* -------------------------------------------------------------------
 * Søgekort
 * ---------------------------------------------------------------- */

.billiste-hero__search {
	display: flex;
	flex-direction: column;
	gap: var(--billiste-space-3);
	background: var(--billiste-color-background);
	border: none;
	border-radius: var(--billiste-radius-lg);
	box-shadow: var(--billiste-shadow-md);
	padding: var(--billiste-space-4);
}

.billiste-hero__field {
	display: flex;
	flex-direction: column;
	gap: var(--billiste-space-1);
}

.billiste-hero__field label,
.billiste-hero__field-legend {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--billiste-color-text);
}

/* Tastbare felter: min. 44px høje (§15's touch-target-krav) */
.billiste-hero__field input,
.billiste-hero__field select {
	min-height: var(--billiste-touch-target-min);
	padding: var(--billiste-space-2);
	font-size: 1rem;
	font-family: inherit;
	border: 1px solid var(--billiste-color-border);
	border-radius: var(--billiste-radius);
	background: var(--billiste-color-background);
	color: var(--billiste-color-text);
	box-sizing: border-box;
	width: 100%;
}

.billiste-hero__field input:focus-visible,
.billiste-hero__field select:focus-visible {
	outline: 2px solid var(--billiste-color-focus);
	outline-offset: 2px;
}

/* **1.7.0:** Pris/Årgang-intervalparrene (HeroShortcode::renderRangeField()) -
 * to talfelter side om side under ÉN fælles synlig label. */
.billiste-hero__range {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--billiste-space-2);
}

.billiste-hero__submit {
	min-height: var(--billiste-touch-target-min);
	padding: var(--billiste-space-2) var(--billiste-space-4);
	font-size: 1rem;
	font-weight: 700;
	color: #ffffff;
	background: var(--billiste-color-accent);
	border: none;
	border-radius: var(--billiste-radius);
	cursor: pointer;
	transition: background-color var(--billiste-transition-fast);
}

.billiste-hero__submit:hover {
	background: var(--billiste-color-accent-dark);
}

.billiste-hero__submit:focus-visible {
	outline: 2px solid var(--billiste-color-focus);
	outline-offset: 2px;
}

@media (min-width: 640px) {
	.billiste-hero__search {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		align-items: end;
	}

	.billiste-hero__submit {
		grid-column: 1 / -1;
	}
}

@media (min-width: 960px) {
	.billiste-hero__search {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* -------------------------------------------------------------------
 * Populære mærker (§14)
 * ---------------------------------------------------------------- */

.billiste-popular-brands__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--billiste-space-2);
}

.billiste-popular-brands__link {
	display: inline-flex;
	align-items: center;
	min-height: var(--billiste-touch-target-min);
	padding: var(--billiste-space-2) var(--billiste-space-4);
	font-weight: 600;
	color: var(--billiste-color-text);
	text-decoration: none;
	background: var(--billiste-color-surface);
	border: 1px solid var(--billiste-color-border);
	/* **1.7.0:** fuldt afrundede "pille"-chips (mere markedsklart look) -
	 * bevidst en fast, stor pixelværdi (ikke `--billiste-radius`) så
	 * formen forbliver en pille uanset chippens højde. */
	border-radius: 999px;
	transition: background-color var(--billiste-transition-fast), border-color var(--billiste-transition-fast), color var(--billiste-transition-fast);
}

.billiste-popular-brands__link:hover {
	color: #ffffff;
	background: var(--billiste-color-accent);
	border-color: var(--billiste-color-accent);
}

.billiste-popular-brands__link:focus-visible {
	outline: 2px solid var(--billiste-color-focus);
	outline-offset: 2px;
}

/* -------------------------------------------------------------------
 * Annoncekort-grid (§17) — delt mellem "Nyeste" og "Fremhævede"
 * ---------------------------------------------------------------- */

.billiste-listing-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--billiste-space-4);
}

.billiste-listing-card {
	border: 1px solid var(--billiste-color-border);
	border-radius: var(--billiste-radius-lg);
	overflow: hidden;
	background: var(--billiste-color-background);
	box-shadow: var(--billiste-shadow-sm);
	transition: box-shadow var(--billiste-transition-fast), transform var(--billiste-transition-fast);
}

.billiste-listing-card:hover {
	box-shadow: var(--billiste-shadow-md);
	transform: translateY(-2px);
}

.billiste-listing-card__link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.billiste-listing-card__link:focus-visible {
	outline: 2px solid var(--billiste-color-focus);
	outline-offset: -2px;
}

.billiste-listing-card__link:hover .billiste-listing-card__title {
	text-decoration: underline;
}

/* Billed-boks - reserverer PRÆCIS samme plads (4:3, matcher Listings'
 * `billiste-card`-billedstørrelse, 400×300), uanset om et rigtigt
 * billede (Milepæl M6: `image_url`) eller den fortsat eksisterende,
 * neutrale pladsholder (§17 - annoncer uden galleri) vises - undgår
 * layout-forskydning når billedet indlæses. */
.billiste-listing-card__image {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	background: var(--billiste-color-surface);
	overflow: hidden;
}

/* Milepæl M6: det rigtige annoncebillede (`image_url`) - udfylder
 * billed-boksen ovenfor, beskåret pænt via `object-fit: cover`,
 * responsivt/mobile-first (altid `width: 100%` af sit forældreelement,
 * uanset skærmstørrelse). */
.billiste-listing-card__image-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.billiste-listing-card__body {
	display: block;
	padding: var(--billiste-space-3);
}

.billiste-listing-card__title {
	display: block;
	margin: 0 0 var(--billiste-space-1);
	font-size: 1rem;
	font-weight: 600;
	color: var(--billiste-color-text);
}

.billiste-listing-card__make-model,
.billiste-listing-card__meta {
	margin: 0 0 var(--billiste-space-1);
	font-size: 0.875rem;
	color: var(--billiste-color-text-muted);
}

.billiste-listing-card__price {
	margin: var(--billiste-space-2) 0 0;
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--billiste-color-accent);
}

@media (min-width: 640px) {
	.billiste-listing-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 960px) {
	.billiste-listing-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* -------------------------------------------------------------------
 * Milepæl M15/M16: "Mine annoncer" (kontosiden) — genbruger BEVIDST
 * `.billiste-section__title` (ovenfor) til afsnittets <h2> og
 * `.billiste-listing-grid`/`.billiste-listing-card__*` (ovenfor) til
 * selve kortene, INGEN duplikeret CSS for dem.
 *
 * **M16:** M15's "der findes flere annoncer end vist"-notits
 * (`.billiste-account-listings__more-notice`) er AFLØST af en rigtig
 * paginering, indsat af `account-listings.js`, når Listings'
 * `/listings/mine`-svar indeholder flere sider (se den fils egen
 * PHPDoc). Samme visuelle SPROG (ikke kode) som
 * `.billiste-search-pagination` (search-page.css, Milepæl M4) - samme
 * design-tokens, samme touch-target-minimum, mobile-first (`flex-wrap`
 * undgår horisontal overflow på smalle skærme). `<button>`-elementer
 * (ikke `<a>`-links, se `account-listings.js`s egen begrundelse) har
 * derfor bevidst INGEN separat, ny `:focus-visible`-regel - samme,
 * allerede etablerede fokus-præcedens som `.billiste-search-pagination__prev`/
 * `__next` (ingen brugerdefineret regel dér heller, browserens
 * standard-fokusring er tilstrækkelig og uændret bevaret).
 * ---------------------------------------------------------------- */

.billiste-account-listings-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--billiste-space-3);
	margin-top: var(--billiste-space-4);
}

.billiste-account-listings-pagination__prev,
.billiste-account-listings-pagination__next {
	min-height: var(--billiste-touch-target-min);
	display: inline-flex;
	align-items: center;
	padding: var(--billiste-space-2) var(--billiste-space-3);
	font: inherit;
	color: var(--billiste-color-accent);
	background: var(--billiste-color-background);
	border: 1px solid var(--billiste-color-border);
	border-radius: var(--billiste-radius);
	cursor: pointer;
}

.billiste-account-listings-pagination__status {
	font-size: 0.875rem;
	color: var(--billiste-color-text-muted);
}

.billiste-account-listings__retry {
	margin-top: var(--billiste-space-3);
	min-height: var(--billiste-touch-target-min);
	display: inline-flex;
	align-items: center;
	padding: var(--billiste-space-2) var(--billiste-space-3);
	font: inherit;
	color: var(--billiste-color-accent);
	background: var(--billiste-color-background);
	border: 1px solid var(--billiste-color-border);
	border-radius: var(--billiste-radius);
	cursor: pointer;
}

/* -------------------------------------------------------------------
 * Milepæl M18: "Mine annoncer" — redigér/slet egne annoncer. Genbruger
 * BEVIDST de samme designtokens/mønstre som resten af filen (§"reuse
 * eksisterende tokens, opfind intet nyt design-system") - kort-
 * handlingsknapperne følger samme touch-target-/farve-/radius-tokens
 * som `.billiste-account-listings-pagination__prev`/`__next` ovenfor,
 * redigeringsformularens felter genbruger PRÆCIS samme mønster som
 * `.billiste-hero__field` (input/label/touch-target, denne fil,
 * Milepæl M3) - en NY, selvstændig klasse med SAMME visuelle sprog,
 * ikke en genbrug af selve `.billiste-hero__*`-klasserne (hero-
 * søgeformularens egne). Slet-knappen er den ENESTE, der bruger
 * `--billiste-color-error` (allerede etableret i foundation.css til
 * fejltilstande) - en tydelig, men IKKE en ny, opfundet farve, som en
 * destruktiv handling ("Slet") bør skille sig visuelt ud med.
 * ---------------------------------------------------------------- */

.billiste-account-listings__card-actions {
	display: flex;
	gap: var(--billiste-space-2);
	padding: 0 var(--billiste-space-3) var(--billiste-space-3);
}

.billiste-account-listings__edit-button,
.billiste-account-listings__delete-button {
	min-height: var(--billiste-touch-target-min);
	flex: 1 1 auto;
	padding: var(--billiste-space-2) var(--billiste-space-3);
	font: inherit;
	border-radius: var(--billiste-radius);
	cursor: pointer;
}

.billiste-account-listings__edit-button {
	color: var(--billiste-color-accent);
	background: var(--billiste-color-background);
	border: 1px solid var(--billiste-color-border);
}

.billiste-account-listings__delete-button {
	color: #ffffff;
	background: var(--billiste-color-error);
	border: 1px solid var(--billiste-color-error);
}

.billiste-account-listings__edit-button:focus-visible,
.billiste-account-listings__delete-button:focus-visible {
	outline: 2px solid var(--billiste-color-focus);
	outline-offset: 2px;
}

.billiste-account-listings__delete-error {
	display: block;
	margin-top: var(--billiste-space-1);
	color: var(--billiste-color-error);
	font-size: 0.875rem;
	font-weight: 600;
}

.billiste-account-listings__edit {
	background: var(--billiste-color-background);
	border: 1px solid var(--billiste-color-border);
	border-radius: var(--billiste-radius);
	padding: var(--billiste-space-4);
}

.billiste-account-listings__edit-title {
	margin: 0 0 var(--billiste-space-3);
	font-size: 1.125rem;
	line-height: 1.25;
	color: var(--billiste-color-text);
}

.billiste-account-listings__edit-error {
	margin: 0 0 var(--billiste-space-3);
	color: var(--billiste-color-error);
	font-weight: 600;
}

.billiste-account-listings__edit-error:empty {
	display: none;
}

.billiste-account-listings__edit-form {
	display: flex;
	flex-direction: column;
	gap: var(--billiste-space-3);
}

.billiste-account-listings__field {
	display: flex;
	flex-direction: column;
	gap: var(--billiste-space-1);
}

.billiste-account-listings__field label {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--billiste-color-text);
}

.billiste-account-listings__field input,
.billiste-account-listings__field textarea {
	min-height: var(--billiste-touch-target-min);
	padding: var(--billiste-space-2);
	font-size: 1rem;
	font-family: inherit;
	border: 1px solid var(--billiste-color-border);
	border-radius: var(--billiste-radius);
	background: var(--billiste-color-background);
	color: var(--billiste-color-text);
	box-sizing: border-box;
	width: 100%;
}

.billiste-account-listings__field input:focus-visible,
.billiste-account-listings__field textarea:focus-visible {
	outline: 2px solid var(--billiste-color-focus);
	outline-offset: 2px;
}

.billiste-account-listings__field--checkbox label {
	display: flex;
	align-items: center;
	gap: var(--billiste-space-2);
	font-weight: 400;
}

.billiste-account-listings__field--checkbox input {
	min-height: auto;
	width: auto;
}

.billiste-account-listings__edit-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--billiste-space-2);
}

.billiste-account-listings__save-button,
.billiste-account-listings__cancel-button,
.billiste-account-listings__draft-button {
	min-height: var(--billiste-touch-target-min);
	padding: var(--billiste-space-2) var(--billiste-space-4);
	font: inherit;
	font-weight: 600;
	border-radius: var(--billiste-radius);
	cursor: pointer;
}

.billiste-account-listings__save-button {
	color: #ffffff;
	background: var(--billiste-color-accent);
	border: none;
}

.billiste-account-listings__save-button:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.billiste-account-listings__cancel-button,
.billiste-account-listings__draft-button {
	color: var(--billiste-color-text);
	background: var(--billiste-color-background);
	border: 1px solid var(--billiste-color-border);
}

.billiste-account-listings__save-button:focus-visible,
.billiste-account-listings__cancel-button:focus-visible,
.billiste-account-listings__draft-button:focus-visible {
	outline: 2px solid var(--billiste-color-focus);
	outline-offset: 2px;
}

/* -------------------------------------------------------------------
 * Forhandlere-CTA (§19) — **1.7.0:** det mørke "premium"-panel (samme
 * `--billiste-color-navy`-tokens som footeren), matcher eksempel-
 * designets mørke "Find forhandlere"-kort. Sektionens indhold er
 * UDELUKKENDE Frontends egen, statiske tekst + rigtige `<a>`-links
 * (ingen indlejret tredjeparts-widget her) - derfor er en mørk flade
 * her, i modsætning til Sælg-/Kort-sektionerne nedenfor, risikofri.
 * ---------------------------------------------------------------- */

.billiste-dealers-cta {
	background: linear-gradient(160deg, var(--billiste-color-navy) 0%, var(--billiste-color-navy-soft) 100%);
	color: var(--billiste-color-on-navy-muted);
	text-align: center;
}

.billiste-dealers-cta .billiste-section__title {
	color: var(--billiste-color-on-navy);
}

.billiste-dealers-cta__text {
	margin: 0 auto;
	max-width: 40em;
	color: var(--billiste-color-on-navy-muted);
}

.billiste-dealers-cta__action {
	margin-top: var(--billiste-space-4);
}

.billiste-dealers-cta__link {
	display: inline-flex;
	align-items: center;
	min-height: var(--billiste-touch-target-min);
	padding: var(--billiste-space-2) var(--billiste-space-5);
	font-weight: 700;
	color: #ffffff;
	background: var(--billiste-color-accent);
	border: 2px solid var(--billiste-color-accent);
	border-radius: 999px;
	text-decoration: none;
	transition: background-color var(--billiste-transition-fast);
}

.billiste-dealers-cta__link:hover {
	background: var(--billiste-color-accent-dark);
	border-color: var(--billiste-color-accent-dark);
}

.billiste-dealers-cta__link--secondary {
	background: transparent;
	border-color: rgba(244, 246, 250, 0.4);
	color: var(--billiste-color-on-navy);
}

.billiste-dealers-cta__link--secondary:hover {
	background: rgba(244, 246, 250, 0.1);
	border-color: var(--billiste-color-on-navy);
}

/* -------------------------------------------------------------------
 * Kort-sektion (§20) — selve kortwidget'ens EGEN CSS (map.css)
 * indlæses uafhængigt af Kort selv, jf. dens Assets::maybeEnqueue().
 * Her styles udelukkende den omsluttende wrapper. **1.7.0:** en LYS,
 * neutral kortoverflade (ikke det mørke panel ovenfor) - denne sektion
 * indeholder Korts EGEN, indlejrede widget, som Frontend ikke
 * kontrollerer den interne styling af; en mørk baggrund herom kunne
 * risikere dårlig kontrast for det indlejrede kort.
 * ---------------------------------------------------------------- */

.billiste-map-section__widget {
	min-height: 44px;
	padding: var(--billiste-space-4);
	background: var(--billiste-color-background);
	border: 1px solid var(--billiste-color-border);
	border-radius: var(--billiste-radius-lg);
	box-shadow: var(--billiste-shadow-sm);
}

/* -------------------------------------------------------------------
 * Sælg din bil-CTA (§21) — **1.7.0:** samme "lys, indlejret widget"-
 * begrundelse som Kort-sektionen ovenfor (SmartSells wizard renderes
 * her, uden for Frontends kontrol) - en varm, lys accentflade i
 * stedet for et mørkt panel.
 * ---------------------------------------------------------------- */

.billiste-sell-cta {
	background: var(--billiste-color-accent-soft);
}

.billiste-sell-cta__text {
	margin: 0 0 var(--billiste-space-4);
	color: var(--billiste-color-text-muted);
	max-width: 40em;
}

.billiste-sell-cta__widget {
	background: var(--billiste-color-background);
	border-radius: var(--billiste-radius-lg);
	box-shadow: var(--billiste-shadow-sm);
	padding: var(--billiste-space-4);
}

.billiste-sell-cta__widget:empty {
	padding: 0;
	background: none;
	box-shadow: none;
}