/*
 * Autolight — Chip Tuning (custom, isoleret stylesheet)
 * -------------------------------------------------------------------------
 * Loades KUN på siden der bruger skabelonen "Autolight — Chip Tuning
 * (Custom)" (page-chiptuning.php). Alle regler er scoped under
 * .autolight-chip-tuning, så intet globalt (body, h1, h2, p, a, button,
 * input osv.) på resten af sitet påvirkes.
 *
 * Farver/variabler genbruger temaets egne CSS custom properties fra
 * style.css (--bg, --surface-2, --line, --brand, --text, --muted osv.),
 * så designet altid følger Autolight 2.0's design-system 1:1.
 */

.autolight-chip-tuning {
	--ct-bg: var(--bg, #0B0E13);
	--ct-card: var(--surface-2, #1C2430);
	--ct-card-2: var(--surface, #141A22);
	--ct-border: var(--line, #2A3341);
	--ct-text: var(--text, #EDF1F7);
	--ct-muted: var(--muted, #8B96A5);
	--ct-gold: var(--brand, #E7AE35);
	--ct-gold-light: var(--brand-light, #FFDE85);
	--ct-gold-ink: var(--ink-on-brand, #201400);
	--ct-maxw: var(--maxw, 1440px);

	display: block;
	width: 100%;
	background: var(--ct-bg);
	color: var(--ct-text);
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
	box-sizing: border-box;
	overflow-x: hidden;
}

.autolight-chip-tuning *,
.autolight-chip-tuning *::before,
.autolight-chip-tuning *::after {
	box-sizing: border-box;
}

.autolight-chip-tuning h1,
.autolight-chip-tuning h2,
.autolight-chip-tuning h3,
.autolight-chip-tuning h4 {
	font-family: 'Space Grotesk', 'Inter', sans-serif;
	margin: 0;
	color: var(--ct-text);
}

.autolight-chip-tuning a {
	color: var(--ct-gold);
	text-decoration: none;
}
.autolight-chip-tuning a:hover {
	color: var(--ct-gold-light);
}

.autolight-chip-tuning svg {
	color: var(--ct-gold);
	flex-shrink: 0;
}

/* ---------- Layout helpers ---------- */

.autolight-chip-tuning .ct-section {
	width: 100%;
	max-width: var(--ct-maxw);
	margin: 0 auto;
	box-sizing: border-box;
	padding: 0 clamp(20px, 4vw, 40px) clamp(56px, 8vw, 88px);
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.autolight-chip-tuning .ct-section-narrow {
	max-width: 900px;
}

.autolight-chip-tuning .ct-section-narrow-900 {
	max-width: 940px;
}

/* Fallback-offset for in-page ankre (#typer, #priser, #faq, #booking, #kontakt),
   så et direkte hash-link ikke skjuler overskriften under en sticky header.
   chip-tuning.js beregner en mere præcis offset ved klik på ankre. */
.autolight-chip-tuning #om,
.autolight-chip-tuning #typer,
.autolight-chip-tuning #priser,
.autolight-chip-tuning #faq,
.autolight-chip-tuning #booking,
.autolight-chip-tuning #kontakt {
	scroll-margin-top: 100px;
}

.autolight-chip-tuning .ct-section-head {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.autolight-chip-tuning .ct-section-head-center {
	display: flex;
	flex-direction: column;
	gap: 10px;
	text-align: center;
	align-items: center;
}

.autolight-chip-tuning .ct-eyebrow {
	color: var(--ct-gold);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 1.6px;
	text-transform: uppercase;
}

.autolight-chip-tuning .ct-h1 {
	font-size: clamp(30px, 5vw, 52px);
	line-height: 1.14;
	font-weight: 700;
}

.autolight-chip-tuning .ct-h2 {
	font-size: clamp(24px, 3vw, 30px);
	font-weight: 600;
}

.autolight-chip-tuning .ct-h2-gold {
	color: var(--ct-gold);
}

.autolight-chip-tuning .ct-h3 {
	font-size: clamp(18px, 2.4vw, 20px);
	font-weight: 600;
}

.autolight-chip-tuning .ct-p {
	font-size: 16px;
	line-height: 1.7;
	color: var(--ct-muted);
	margin: 0;
	max-width: 70ch;
}

.autolight-chip-tuning .ct-p-tight {
	font-size: 15px;
}

.autolight-chip-tuning .ct-center {
	max-width: 620px;
	margin-left: auto;
	margin-right: auto;
}

.autolight-chip-tuning .ct-kicker {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--ct-gold);
	margin-bottom: 10px;
}

/* ---------- Buttons ---------- */

.autolight-chip-tuning .ct-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
	font-weight: 600;
	padding: 14px 26px;
	border-radius: 8px;
	border: 1px solid transparent;
	cursor: pointer;
	white-space: nowrap;
	transition: opacity .15s ease, background-color .15s ease, border-color .15s ease;
	font-family: inherit;
}

.autolight-chip-tuning .ct-btn-primary {
	background: var(--ct-gold);
	color: var(--ct-gold-ink);
}
.autolight-chip-tuning .ct-btn-primary:hover {
	opacity: .9;
	color: var(--ct-gold-ink);
}

.autolight-chip-tuning .ct-btn-ghost {
	border-color: var(--ct-border);
	color: var(--ct-text);
	background: transparent;
}
.autolight-chip-tuning .ct-btn-ghost:hover {
	border-color: var(--ct-gold);
	color: var(--ct-gold);
}

.autolight-chip-tuning .ct-btn-block {
	width: 100%;
	margin-top: 4px;
}

/* ---------- Hero ---------- */

.autolight-chip-tuning .ct-hero {
	width: 100%;
	box-sizing: border-box;
	padding: clamp(56px, 9vw, 88px) clamp(20px, 4vw, 40px) clamp(48px, 7vw, 72px);
	display: flex;
	justify-content: center;
	background: radial-gradient(ellipse 900px 500px at 50% -10%, rgba(231, 174, 53, .10), transparent);
}

.autolight-chip-tuning .ct-hero-inner {
	width: 100%;
	max-width: 860px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 22px;
	text-align: center;
}

.autolight-chip-tuning .ct-lede {
	max-width: 640px;
	font-size: clamp(15px, 1.8vw, 18px);
	line-height: 1.6;
	color: var(--ct-muted);
	margin: 0;
}

.autolight-chip-tuning .ct-hero-ctas {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
	margin-top: 8px;
}

/* ---------- Hero billede ---------- */

.autolight-chip-tuning .ct-hero-image-wrap {
	width: 100%;
	max-width: var(--ct-maxw);
	margin: 0 auto;
	box-sizing: border-box;
	padding: 0 clamp(20px, 4vw, 40px) clamp(56px, 8vw, 88px);
}

.autolight-chip-tuning .ct-hero-image {
	width: 100%;
	border-radius: 16px;
	overflow: hidden;
	border: 1px solid var(--ct-border);
	box-shadow: 0 24px 64px rgba(0, 0, 0, .45);
}

.autolight-chip-tuning .ct-hero-image img {
	display: block;
	width: 100%;
	height: auto;
}

/* ---------- Stats ---------- */

.autolight-chip-tuning .ct-stats-wrap {
	width: 100%;
	max-width: var(--ct-maxw);
	margin: 0 auto;
	box-sizing: border-box;
	padding: 0 clamp(20px, 4vw, 40px) clamp(56px, 8vw, 80px);
}

.autolight-chip-tuning .ct-stats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1px;
	background: var(--ct-border);
	border: 1px solid var(--ct-border);
	border-radius: 12px;
	overflow: hidden;
}

.autolight-chip-tuning .ct-stat {
	background: var(--ct-card);
	padding: 26px 24px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.autolight-chip-tuning .ct-stat-title {
	font-size: 15px;
	font-weight: 600;
	color: var(--ct-text);
}

.autolight-chip-tuning .ct-stat-desc {
	font-size: 13px;
	color: var(--ct-muted);
}

/* ---------- Cards / grids ---------- */

.autolight-chip-tuning .ct-grid {
	display: grid;
	gap: 20px;
}

.autolight-chip-tuning .ct-grid-4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.autolight-chip-tuning .ct-grid-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.autolight-chip-tuning .ct-card {
	background: var(--ct-card);
	border: 1px solid var(--ct-border);
	border-radius: 12px;
	padding: 26px 22px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	position: relative;
}

.autolight-chip-tuning .ct-card-featured {
	border-color: var(--ct-gold);
}

.autolight-chip-tuning .ct-card-title-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
}

.autolight-chip-tuning .ct-badge {
	background: var(--ct-gold);
	color: var(--ct-gold-ink);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .5px;
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: 999px;
	white-space: nowrap;
}

.autolight-chip-tuning .ct-card-title {
	font-size: 17px;
	font-weight: 600;
	color: var(--ct-text);
}

.autolight-chip-tuning .ct-card-title-row .ct-card-title {
	margin-top: 0;
}

.autolight-chip-tuning .ct-card-text {
	font-size: 14px;
	line-height: 1.6;
	color: var(--ct-muted);
	margin: 0;
}

/* ---------- Price banner ---------- */

.autolight-chip-tuning .ct-price-banner {
	background: linear-gradient(135deg, var(--ct-card), var(--ct-card-2));
	border: 1px solid var(--ct-border);
	border-radius: 16px;
	padding: clamp(28px, 4vw, 44px) clamp(24px, 4vw, 48px);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.autolight-chip-tuning .ct-price-copy {
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-width: 640px;
}

.autolight-chip-tuning .ct-price-btn {
	flex-shrink: 0;
}

/* ---------- FAQ ---------- */

.autolight-chip-tuning .ct-faq-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.autolight-chip-tuning .ct-faq-item {
	background: var(--ct-card);
	border: 1px solid var(--ct-border);
	border-radius: 10px;
	padding: 18px 22px;
}

.autolight-chip-tuning .ct-faq-item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	font-size: 16px;
	font-weight: 600;
	color: var(--ct-text);
	cursor: pointer;
	list-style: none;
}
.autolight-chip-tuning .ct-faq-item summary::-webkit-details-marker {
	display: none;
}
.autolight-chip-tuning .ct-faq-item .ct-chev {
	transition: transform .2s ease;
}
.autolight-chip-tuning .ct-faq-item[open] .ct-chev {
	transform: rotate(180deg);
}
.autolight-chip-tuning .ct-faq-item[open] summary {
	color: var(--ct-gold);
}
.autolight-chip-tuning .ct-faq-item p {
	margin: 14px 0 0;
	font-size: 15px;
	line-height: 1.7;
	color: var(--ct-muted);
}

.autolight-chip-tuning .ct-callout {
	background: rgba(231, 174, 53, .06);
	border: 1px solid rgba(231, 174, 53, .35);
	border-radius: 10px;
	padding: 18px 22px;
	display: flex;
	gap: 14px;
	align-items: flex-start;
}
.autolight-chip-tuning .ct-callout-title {
	font-size: 14px;
	font-weight: 700;
	color: var(--ct-text);
	margin-bottom: 4px;
}
.autolight-chip-tuning .ct-callout p {
	margin: 0;
	font-size: 14px;
	line-height: 1.7;
	color: var(--ct-muted);
}

/* ---------- Booking cards ---------- */

.autolight-chip-tuning .ct-booking-card {
	padding: 28px 30px;
}

.autolight-chip-tuning .ct-contact-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	font-size: 15px;
	color: var(--ct-muted);
	margin-top: 6px;
}

.autolight-chip-tuning .ct-contact-row {
	display: flex;
	gap: 10px;
	align-items: flex-start;
}
.autolight-chip-tuning .ct-contact-row a {
	color: var(--ct-text);
}
.autolight-chip-tuning .ct-contact-row a:hover {
	color: var(--ct-gold);
}

/* ---------- Contact card / form ---------- */

.autolight-chip-tuning .ct-contact-card {
	background: var(--ct-card);
	border: 1px solid var(--ct-gold);
	border-radius: 18px;
	padding: clamp(26px, 4vw, 48px);
	display: flex;
	flex-direction: column;
	gap: 26px;
}

.autolight-chip-tuning .ct-form {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.autolight-chip-tuning .ct-form-row {
	display: grid;
	gap: 16px;
}
.autolight-chip-tuning .ct-form-row-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.autolight-chip-tuning .ct-field {
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-size: 13px;
	color: var(--ct-muted);
}
.autolight-chip-tuning .ct-field em {
	color: var(--ct-gold);
	font-style: normal;
}

.autolight-chip-tuning .ct-field input,
.autolight-chip-tuning .ct-field textarea {
	font-family: inherit;
	font-size: 15px;
	color: var(--ct-text);
	background: var(--ct-bg);
	border: 1px solid var(--ct-border);
	border-radius: 8px;
	padding: 12px 14px;
	width: 100%;
	transition: border-color .15s ease;
}
.autolight-chip-tuning .ct-field input:focus,
.autolight-chip-tuning .ct-field textarea:focus {
	outline: none;
	border-color: var(--ct-gold);
}
.autolight-chip-tuning .ct-field textarea {
	resize: vertical;
	min-height: 110px;
}

/* Let, progressiv klient-side feedback (sat af chip-tuning.js) — serveren
   validerer stadig autoritativt i PHP, dette er kun en visuel hjælp. */
.autolight-chip-tuning .ct-field.ct-field-invalid input,
.autolight-chip-tuning .ct-field.ct-field-invalid textarea {
	border-color: var(--sale, #FF6A3D);
}

/* Honeypot: usynligt for mennesker, men til stede i DOM'en for bots */
.autolight-chip-tuning .ct-honeypot {
	position: absolute;
	left: -9999px;
	top: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.autolight-chip-tuning .ct-form-message {
	border-radius: 10px;
	padding: 14px 18px;
	font-size: 14px;
	line-height: 1.6;
}
.autolight-chip-tuning .ct-form-success {
	background: rgba(62, 207, 142, .1);
	border: 1px solid rgba(62, 207, 142, .4);
	color: var(--ok, #3ECF8E);
}
.autolight-chip-tuning .ct-form-error {
	background: rgba(255, 106, 61, .08);
	border: 1px solid rgba(255, 106, 61, .4);
	color: var(--sale, #FF6A3D);
}
.autolight-chip-tuning .ct-form-error ul {
	margin: 0;
	padding-left: 18px;
}

/* =========================================================================
   RESPONSIVE
   Dækker 1920 / 1440 / 1366 / 1280 / 1024 / 768 / 430 / 414 / 390 / 375 / 360
   Fluid type/spacing (clamp) håndterer det meste af skaleringen mellem
   desktop-bredderne. Nedenstående breakpoints justerer LAYOUT (kolonner).
   ========================================================================= */

/* Tablet (≤1024px): 4-kolonne grids bliver til 2 */
@media (max-width: 1024px) {
	.autolight-chip-tuning .ct-grid-4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Mobil/tablet-portræt (≤768px): 2-kolonne grids og formularrækker bliver til 1 */
@media (max-width: 768px) {
	.autolight-chip-tuning .ct-stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.autolight-chip-tuning .ct-grid-2 {
		grid-template-columns: minmax(0, 1fr);
	}
	.autolight-chip-tuning .ct-form-row-2 {
		grid-template-columns: minmax(0, 1fr);
	}
	.autolight-chip-tuning .ct-price-banner {
		flex-direction: column;
		align-items: flex-start;
	}
	.autolight-chip-tuning .ct-price-btn {
		width: 100%;
	}
}

/* Små mobiler (≤430px, dækker 430/414/390/375/360) — 432px for at sikre at
   præcis 430px-visninger rammer bruddet, selv med browserens sub-pixel
   afrunding af viewport-bredden. */
@media (max-width: 432px) {
	.autolight-chip-tuning .ct-grid-4 {
		grid-template-columns: minmax(0, 1fr);
	}
	.autolight-chip-tuning .ct-stats {
		grid-template-columns: minmax(0, 1fr);
	}
	.autolight-chip-tuning .ct-hero-ctas {
		flex-direction: column;
		width: 100%;
	}
	.autolight-chip-tuning .ct-hero-ctas .ct-btn {
		width: 100%;
	}
	.autolight-chip-tuning .ct-contact-card {
		border-radius: 14px;
	}
}