/**
 * FRC overrides. Indlæses efter design-system.css (prioritet 99).
 * Retter: hero fuld højde + billede, steps på én række, kontaktinfo-kort,
 * lækrere kontaktformular, bil-minikort.
 */

/* ---- Hero: fuld skærm + dækkende billede ------------------------------- */
.hero.is-fullheight { min-height: 100vh; }
.hero.is-fullheight .hero__inner { padding-top: 104px; padding-bottom: 104px; }
.hero__media-img { width: 100%; height: 100%; object-fit: cover; }
/* Lidt dybere overlay, så hvid tekst altid kan læses på showroom-foto. */
.hero--has-bg .hero__overlay { background: linear-gradient(180deg, rgba(11,15,23,.45), rgba(11,15,23,.82)); }

/* ---- Steps: én række på desktop (uanset 4 eller 5 trin) ---------------- */
@media (min-width: 980px) {
	.steps__list {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: 1fr;
		gap: 22px;
		align-items: start;
	}
}
@media (max-width: 979px) and (min-width: 560px) {
	.steps__list { grid-template-columns: 1fr 1fr; }
}

/* ---- Kontaktinfo: rent kort i stedet for nøgne bullets ----------------- */
.local-contact-info {
	background: #fff;
	border: 1px solid var(--line, #e3e7ec);
	border-radius: 18px;
	padding: 28px;
}
.local-contact-list {
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.local-contact-item {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	padding: 0;
	border: 0;
}
.local-contact-item::before { content: none; }
.local-contact-item__icon {
	flex: 0 0 auto;
	width: 42px;
	height: 42px;
	border-radius: 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: color-mix(in srgb, var(--accent, #cf8b3c) 15%, #fff);
	color: var(--accent, #cf8b3c);
	font-size: 18px;
}
.local-contact-item__icon svg { width: 20px; height: 20px; }
.local-contact-item__body { display: flex; flex-direction: column; gap: 2px; }
.local-contact-item__label {
	font-size: .74rem;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--muted, #6b7280);
	font-weight: 700;
}
.local-contact-item__value { font-weight: 600; color: var(--ink, #0e1a2b); }
.local-contact-item__value a { color: inherit; text-decoration: none; }
.local-contact-item__value a:hover { text-decoration: underline; }
.local-contact-item__meta { color: var(--muted, #6b7280); font-size: .92rem; }
.local-contact-actions { display: flex; gap: 12px; flex-wrap: wrap; margin: 4px 0 18px; }
.local-contact-map { border-radius: 16px; overflow: hidden; border: 1px solid var(--line, #e3e7ec); }
.local-contact-map iframe, .local-contact-map img { display: block; width: 100%; min-height: 240px; border: 0; }

/* ---- Kontaktformular: lettere og mere overskuelig --------------------- */
.local-contact-formcol { border-radius: 20px; padding: 32px; }
.manids-form, .contact-form { max-width: 680px; }
.form-field { margin-bottom: 18px; }
.form-label { font-weight: 600; font-size: .92rem; margin-bottom: 6px; display: block; color: var(--ink, #0e1a2b); }
.form-req { color: var(--accent, #cf8b3c); margin-left: 2px; }
.form-field input,
.form-field select,
.form-field textarea,
.manids-form input:not([type=checkbox]):not([type=radio]),
.manids-form select,
.manids-form textarea,
.contact-form input:not([type=checkbox]):not([type=radio]),
.contact-form select,
.contact-form textarea {
	width: 100%;
	border: 1px solid var(--line, #e3e7ec);
	border-radius: 12px;
	padding: 12px 14px;
	font: inherit;
	line-height: 1.4;
	background: #fff;
	color: var(--ink, #0e1a2b);
	box-shadow: none;
	transition: border-color .15s, box-shadow .15s;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus,
.manids-form input:focus,
.manids-form select:focus,
.manids-form textarea:focus,
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
	outline: none;
	border-color: var(--accent, #cf8b3c);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #cf8b3c) 18%, transparent);
}
.form-field textarea, .manids-form textarea, .contact-form textarea { min-height: 140px; resize: vertical; }
.form-hint, .form-hint a { color: var(--muted, #6b7280); font-size: .85rem; margin-top: 6px; }
.form-row--two, .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 600px) { .form-row--two, .form-row { grid-template-columns: 1fr; } }
.form-consent, .form-checkbox { display: flex; gap: 10px; align-items: flex-start; font-size: .9rem; color: var(--muted, #6b7280); margin: 6px 0 14px; }
.form-consent input, .form-checkbox input { margin-top: 3px; }
.contact-form__submit, .manids-form .btn-primary, .contact-form .btn-primary { margin-top: 4px; }

/* ---- Bil-minikort: billede + nøgleinfo --------------------------------- */
.product-card { border-radius: 16px; overflow: hidden; }
.product-card__media { aspect-ratio: 4 / 3; overflow: hidden; background: #f1f3f6; }
.product-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.product-card:hover .product-card__media img { transform: scale(1.04); }
.product-card__spec { color: var(--muted, #6b7280); font-size: .92rem; }

/* ---- Bil-detalje: galleri-split billede dækkende ----------------------- */
.single-katalog__img { width: 100%; height: 100%; object-fit: cover; border-radius: 16px; }

/* ---- Bil-galleri på detaljeside (importerede biler) -------------------- */
.frc-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 10px; }
.frc-gallery__item { display: block; border-radius: 10px; overflow: hidden; aspect-ratio: 4 / 3; background: #f1f3f6; }
.frc-gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s; }
.frc-gallery__item:hover img { transform: scale(1.05); }
@media (max-width: 600px) { .frc-gallery { grid-template-columns: repeat(3, 1fr); } }

/* ===== Hero: rigtigt FRC-billede via CSS (robust) + skjul tom billed-boks == */
.hero__media { display: none !important; }
.hero { position: relative; }
.hero--full {
	background: #0b0f17 url('https://frcbilhus.dk/wp-content/uploads/2024/03/62da2e5a-856d-426d-b0ab-56d835421bd8.jpg') center/cover no-repeat;
}
.hero--compact {
	background: #0b0f17 url('https://frcbilhus.dk/wp-content/uploads/2024/02/row-cars-front-view-rear-view-mirrors-scaled.jpg') center/cover no-repeat;
}
.hero--full::before, .hero--compact::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(11,15,23,.5), rgba(11,15,23,.85));
	z-index: 0;
	pointer-events: none;
}
.hero__inner { position: relative; z-index: 1; }

/* ===== Bil-grid med filter (Karlsen-niveau) ============================== */
.frc-biler { background: var(--mp-surface, #f5f6f9); }
.frc-biler__head { max-width: 720px; margin: 0 auto 26px; text-align: center; }
.frc-biler__filters {
	display: grid;
	grid-template-columns: 1.5fr repeat(4, 1fr) auto;
	gap: 12px;
	align-items: end;
	background: #fff;
	border: 1px solid var(--line, #e3e7ec);
	border-radius: 18px;
	padding: 18px;
	margin-bottom: 16px;
	box-shadow: 0 10px 30px rgba(11,15,23,.05);
}
.frc-biler__flabel { display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted, #6b7280); font-weight: 700; margin-bottom: 5px; }
.frc-biler__filter input, .frc-biler__filter select { width: 100%; border: 1px solid var(--line, #e3e7ec); border-radius: 10px; padding: 10px 12px; font: inherit; background: #fff; color: var(--ink, #0e1a2b); }
.frc-biler__filter input:focus, .frc-biler__filter select:focus { outline: none; border-color: var(--accent, #cf8b3c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #cf8b3c) 16%, transparent); }
.frc-biler__reset { align-self: end; border: 1px solid var(--line, #e3e7ec); background: #fff; border-radius: 10px; padding: 11px 16px; cursor: pointer; font-weight: 600; }
.frc-biler__reset:hover { background: var(--mp-surface, #f1f3f6); }
.frc-biler__count { color: var(--muted, #6b7280); font-size: .9rem; margin: 0 0 16px; }
.frc-biler__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.frc-car { background: #fff; border: 1px solid var(--line, #e3e7ec); border-radius: 16px; overflow: hidden; transition: transform .2s ease, box-shadow .2s ease; }
.frc-car:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(11,15,23,.12); }
.frc-car__link { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; }
.frc-car__media { position: relative; aspect-ratio: 4 / 3; background: #eef1f5; overflow: hidden; }
.frc-car__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.frc-car:hover .frc-car__media img { transform: scale(1.05); }
.frc-car__badge { position: absolute; top: 12px; left: 12px; background: rgba(11,15,23,.82); color: #fff; font-size: .72rem; font-weight: 700; letter-spacing: .03em; padding: 5px 11px; border-radius: 999px; }
.frc-car__body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.frc-car__title { font-size: 1.12rem; margin: 0; line-height: 1.25; }
.frc-car__specs { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.frc-car__specs li { background: var(--mp-surface, #f1f3f6); border: 1px solid var(--line, #e3e7ec); color: var(--mp-ink-3, #16243c); font-size: .78rem; padding: 3px 9px; border-radius: 999px; }
.frc-car__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; padding-top: 10px; border-top: 1px solid var(--line, #e3e7ec); }
.frc-car__price { font-size: 1.15rem; font-weight: 800; color: var(--mp-ink, #0b0f17); }
.frc-car__price--small { font-size: .85rem; font-weight: 600; color: var(--muted, #6b7280); }
.frc-car__cta { color: var(--accent, #cf8b3c); font-weight: 700; font-size: .9rem; white-space: nowrap; }
.frc-biler__empty { text-align: center; color: var(--muted, #6b7280); padding: 30px 0; }
.frc-biler__all { text-align: center; margin-top: 26px; }
@media (max-width: 980px) { .frc-biler__filters { grid-template-columns: 1fr 1fr; } .frc-biler__grid { grid-template-columns: repeat(2, 1fr); } .frc-biler__reset { grid-column: span 2; } }
@media (max-width: 600px) { .frc-biler__filters { grid-template-columns: 1fr; } .frc-biler__grid { grid-template-columns: 1fr; } .frc-biler__reset { grid-column: auto; } }

/* ===== Footer (ren, curated) =========================================== */
.frc-footer { background: var(--mp-ink, #0b0f17); color: #cfd8e3; }
.frc-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 32px; padding: 56px 0 40px; }
.frc-footer__brand { display: block; color: #fff; font-family: var(--font-head, inherit); font-size: 1.3rem; font-weight: 700; margin-bottom: 14px; }
.frc-footer__line { margin: 0 0 6px; font-size: .95rem; }
.frc-footer__line a { color: #e7edf4; text-decoration: none; }
.frc-footer__line a:hover { color: var(--accent, #cf8b3c); }
.frc-footer__muted { color: #8a98a8; font-size: .88rem; }
.frc-footer__h { color: #fff; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; margin: 0 0 14px; }
.frc-footer__h--mt { margin-top: 22px; }
.frc-footer__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.frc-footer__list a { color: #cfd8e3; text-decoration: none; font-size: .95rem; }
.frc-footer__list a:hover { color: var(--accent, #cf8b3c); }
.frc-footer__hours li { color: #aab6c4; font-size: .92rem; }
.frc-footer__base { border-top: 1px solid rgba(255,255,255,.1); }
.frc-footer__base-inner { display: flex; align-items: center; justify-content: space-between; padding: 18px 0; gap: 12px; flex-wrap: wrap; }
.frc-footer__base small { color: #8a98a8; }
.frc-footer__legal { display: flex; gap: 18px; }
.frc-footer__legal a { color: #aab6c4; text-decoration: none; font-size: .88rem; }
.frc-footer__legal a:hover { color: #fff; }
@media (max-width: 900px) { .frc-footer__grid { grid-template-columns: 1fr 1fr; gap: 28px; } }
@media (max-width: 560px) { .frc-footer__grid { grid-template-columns: 1fr; } }

/* ===== Forside: udvalgte biler (4 kort, ingen filterbar) ================ */
.frc-biler--featured .frc-biler__grid { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .frc-biler--featured .frc-biler__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .frc-biler--featured .frc-biler__grid { grid-template-columns: 1fr; } }