/* =============================================================
   KirkeTjek — Section-specific styling
   (hero, mockup, features, steps, showcase, stats, faq, cta)
   ============================================================= */

/* =====================================================
   HERO
   ===================================================== */
.hero {
	position: relative;
	padding-top: calc(var(--kt-header-h) + var(--kt-space-9));
	padding-bottom: var(--kt-space-9);
	overflow: hidden;
}

.hero::before {
	/* Soft brand glow behind the content */
	content: "";
	position: absolute;
	top: -28%;
	right: -12%;
	width: 60vw;
	height: 60vw;
	max-width: 760px;
	max-height: 760px;
	background: radial-gradient(circle, rgba(139, 114, 168, 0.28), transparent 62%);
	filter: blur(8px);
	z-index: 0;
	pointer-events: none;
}

.hero .container {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	align-items: center;
	gap: var(--kt-space-8);
}

.hero__title {
	font-size: var(--kt-fs-900);
	margin-block: var(--kt-space-4);
}

.hero__title .accent {
	color: var(--kt-primary);
}

.hero__lead {
	font-size: var(--kt-fs-500);
	color: var(--kt-ink-soft);
	max-width: 36ch;
}

.hero__cta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--kt-space-3);
	margin-top: var(--kt-space-6);
}

.hero__trust {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--kt-space-2) var(--kt-space-5);
	margin-top: var(--kt-space-6);
	font-size: var(--kt-fs-300);
	color: var(--kt-ink-faint);
}

.hero__trust-item {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
}

.hero__trust-item svg {
	width: 18px;
	height: 18px;
	color: var(--kt-status-present);
}

.hero__media {
	position: relative;
}

/* =====================================================
   APP MOCKUP (on-brand, pure HTML/CSS)
   ===================================================== */
.mockup {
	position: relative;
	background: var(--kt-surface);
	border: 1px solid var(--kt-line);
	border-radius: var(--kt-radius-xl);
	box-shadow: var(--kt-shadow-lg);
	overflow: hidden;
}

.mockup__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.85rem 1.1rem;
	background: var(--kt-primary);
	color: var(--kt-on-primary);
}

.mockup__bar-left {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-weight: 600;
	font-size: var(--kt-fs-300);
}

.mockup__bar-icon {
	width: 26px;
	height: 26px;
	display: grid;
	place-items: center;
	background: rgba(255, 255, 255, 0.18);
	border-radius: 8px;
}

.mockup__bar-icon svg { width: 16px; height: 16px; }

.mockup__bar-actions {
	display: flex;
	gap: 0.4rem;
}

.mockup__bar-actions span {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.4);
}

.mockup__body {
	padding: var(--kt-space-5);
	background: var(--kt-surface-2);
}

.mockup__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--kt-space-4);
}

.mockup__service {
	font-weight: 700;
	color: var(--kt-primary);
	font-size: var(--kt-fs-500);
}

.mockup__date {
	font-size: var(--kt-fs-300);
	color: var(--kt-ink-faint);
}

.mockup__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--kt-space-3);
}

.seat {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.7rem 0.85rem;
	background: var(--kt-surface);
	border: 1px solid var(--kt-line);
	border-radius: var(--kt-radius-md);
	box-shadow: var(--kt-shadow-sm);
}

.seat__avatar {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	font-size: 0.72rem;
	font-weight: 700;
	color: var(--kt-on-primary);
	background: var(--kt-primary-bright);
	flex: none;
}

.seat__info {
	min-width: 0;
	flex: 1;
}

.seat__name {
	font-size: var(--kt-fs-300);
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.seat__role {
	font-size: 0.72rem;
	color: var(--kt-ink-faint);
}

.seat__status {
	width: 13px;
	height: 13px;
	border-radius: 50%;
	flex: none;
	box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 18%, transparent);
}

.seat[data-status="present"]    .seat__status { background: var(--kt-status-present); color: var(--kt-status-present); }
.seat[data-status="sick"]       .seat__status { background: var(--kt-status-sick); color: var(--kt-status-sick); }
.seat[data-status="noshow"]     .seat__status { background: var(--kt-status-noshow); color: var(--kt-status-noshow); }
.seat[data-status="substitute"] .seat__status { background: var(--kt-status-substitute); color: var(--kt-status-substitute); }
.seat[data-status="leave"]      .seat__status { background: var(--kt-status-leave); color: var(--kt-status-leave); }

.mockup__save {
	margin-top: var(--kt-space-5);
	display: flex;
	justify-content: flex-end;
}

/* Floating status legend that overlaps the mockup */
.mockup__legend {
	position: absolute;
	left: -1.5rem;
	bottom: 2.2rem;
	display: grid;
	gap: 0.5rem;
	padding: 0.9rem 1rem;
	background: var(--kt-surface);
	border: 1px solid var(--kt-line);
	border-radius: var(--kt-radius-md);
	box-shadow: var(--kt-shadow-md);
}

/* =====================================================
   LOGO / TRUST STRIP
   ===================================================== */
.trust-strip {
	border-block: 1px solid var(--kt-line);
	background: var(--kt-surface);
}

.trust-strip .container {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--kt-space-4) var(--kt-space-7);
	padding-block: var(--kt-space-5);
	text-align: center;
}

.trust-strip p {
	font-size: var(--kt-fs-300);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--kt-ink-faint);
}

/* =====================================================
   FEATURES
   ===================================================== */
.feature-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--kt-space-5);
}

.feature-card h3 {
	font-size: var(--kt-fs-600);
	margin-bottom: var(--kt-space-2);
}

.feature-card p {
	color: var(--kt-ink-soft);
	font-size: var(--kt-fs-400);
}

/* =====================================================
   STEPS / HOW IT WORKS
   ===================================================== */
.steps {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--kt-space-6);
	counter-reset: step;
}

.step {
	position: relative;
	padding-top: var(--kt-space-6);
}

.step__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--kt-primary);
	color: var(--kt-on-primary);
	font-weight: 700;
	font-size: var(--kt-fs-500);
	margin-bottom: var(--kt-space-4);
	box-shadow: var(--kt-shadow-primary);
}

.step h3 {
	font-size: var(--kt-fs-600);
	margin-bottom: var(--kt-space-2);
}

.step p {
	color: var(--kt-ink-soft);
}

/* =====================================================
   SHOWCASE (split feature rows)
   ===================================================== */
.showcase {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: var(--kt-space-8);
}

.showcase + .showcase {
	margin-top: var(--kt-space-9);
}

.showcase--reverse .showcase__media {
	order: -1;
}

.showcase__title {
	font-size: var(--kt-fs-700);
	margin-bottom: var(--kt-space-4);
}

.showcase__list {
	display: grid;
	gap: var(--kt-space-3);
	margin-top: var(--kt-space-5);
}

.showcase__list li {
	display: flex;
	gap: 0.7rem;
	align-items: flex-start;
	color: var(--kt-ink-soft);
}

.showcase__list svg {
	width: 22px;
	height: 22px;
	color: var(--kt-status-present);
	flex: none;
	margin-top: 1px;
}

/* Panel used as showcase media */
.panel {
	background: var(--kt-surface);
	border: 1px solid var(--kt-line);
	border-radius: var(--kt-radius-lg);
	box-shadow: var(--kt-shadow-md);
	overflow: hidden;
}

.panel__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.9rem 1.2rem;
	border-bottom: 1px solid var(--kt-line);
	font-weight: 600;
	font-size: var(--kt-fs-300);
	color: var(--kt-ink-soft);
}

.panel__body {
	padding: var(--kt-space-5);
}

/* Archive-style list rows */
.reg-row {
	display: flex;
	align-items: center;
	gap: var(--kt-space-4);
	padding: 0.85rem 0;
	border-bottom: 1px solid var(--kt-line);
}

.reg-row:last-child { border-bottom: 0; }

.reg-row__date {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: var(--kt-radius-md);
	background: var(--kt-primary-container);
	color: var(--kt-on-primary-container);
	font-weight: 700;
	line-height: 1.05;
	text-align: center;
	flex: none;
}

.reg-row__date small { font-size: 0.62rem; font-weight: 600; text-transform: uppercase; }

.reg-row__main { flex: 1; min-width: 0; }
.reg-row__title { font-weight: 600; }
.reg-row__sub { font-size: var(--kt-fs-300); color: var(--kt-ink-faint); }

/* Salary calc style mini-table */
.calc-line {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.6rem 0;
	border-bottom: 1px solid var(--kt-line);
	font-size: var(--kt-fs-400);
}

.calc-line:last-of-type { border-bottom: 0; }
.calc-line span:last-child { font-variant-numeric: tabular-nums; font-weight: 600; }

.calc-total {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: var(--kt-space-3);
	padding-top: var(--kt-space-3);
	border-top: 2px solid var(--kt-primary);
	font-weight: 700;
	color: var(--kt-primary);
	font-size: var(--kt-fs-500);
}

/* =====================================================
   STATS BAND
   ===================================================== */
.stats {
	background: linear-gradient(135deg, var(--kt-primary), var(--kt-primary-strong));
	color: var(--kt-on-primary);
	border-radius: var(--kt-radius-xl);
	padding: var(--kt-space-8) var(--kt-space-6);
}

.stats__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--kt-space-6);
	text-align: center;
}

.stat__num {
	font-size: var(--kt-fs-800);
	font-weight: 800;
	letter-spacing: -0.03em;
}

.stat__label {
	margin-top: var(--kt-space-2);
	color: rgba(255, 255, 255, 0.82);
	font-size: var(--kt-fs-400);
}

/* =====================================================
   FAQ
   ===================================================== */
.faq {
	max-width: var(--kt-container-narrow);
	margin-inline: auto;
	display: grid;
	gap: var(--kt-space-3);
}

.faq-item {
	background: var(--kt-surface);
	border: 1px solid var(--kt-line);
	border-radius: var(--kt-radius-md);
	overflow: hidden;
	transition: border-color var(--kt-dur-base) var(--kt-ease),
		box-shadow var(--kt-dur-base) var(--kt-ease);
}

.faq-item[open] {
	border-color: var(--kt-line-strong);
	box-shadow: var(--kt-shadow-sm);
}

.faq-item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--kt-space-4);
	padding: var(--kt-space-5);
	font-weight: 600;
	font-size: var(--kt-fs-500);
	cursor: pointer;
	list-style: none;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
	content: "";
	width: 12px;
	height: 12px;
	border-right: 2px solid var(--kt-primary);
	border-bottom: 2px solid var(--kt-primary);
	transform: rotate(45deg);
	transition: transform var(--kt-dur-base) var(--kt-ease);
	flex: none;
}

.faq-item[open] summary::after {
	transform: rotate(-135deg);
}

.faq-item__answer {
	padding: 0 var(--kt-space-5) var(--kt-space-5);
	color: var(--kt-ink-soft);
}

/* =====================================================
   CTA SECTION
   ===================================================== */
.cta {
	position: relative;
	background: var(--kt-dark);
	color: var(--kt-on-dark);
	border-radius: var(--kt-radius-xl);
	padding: var(--kt-space-9) var(--kt-space-6);
	text-align: center;
	overflow: hidden;
}

.cta::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 20% 20%, rgba(139, 114, 168, 0.45), transparent 45%),
		radial-gradient(circle at 85% 80%, rgba(135, 76, 102, 0.4), transparent 45%);
	pointer-events: none;
}

.cta > * { position: relative; z-index: 1; }

.cta h2 {
	color: var(--kt-on-dark);
	font-size: var(--kt-fs-800);
	max-width: 20ch;
	margin-inline: auto;
}

.cta p {
	margin-top: var(--kt-space-4);
	color: var(--kt-on-dark-soft);
	font-size: var(--kt-fs-500);
	max-width: 50ch;
	margin-inline: auto;
}

.cta__actions {
	margin-top: var(--kt-space-6);
	display: flex;
	flex-wrap: wrap;
	gap: var(--kt-space-3);
	justify-content: center;
}

/* =====================================================
   RESPONSIVE
   ===================================================== */
@media (max-width: 980px) {
	.feature-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
	.hero .container { grid-template-columns: 1fr; gap: var(--kt-space-7); }
	.hero__lead { max-width: none; }
	.showcase { grid-template-columns: 1fr; gap: var(--kt-space-6); }
	.showcase--reverse .showcase__media { order: 0; }
	.steps { grid-template-columns: 1fr; gap: var(--kt-space-5); }
	.mockup__legend { position: static; margin-top: var(--kt-space-4); }
}

@media (max-width: 640px) {
	.feature-grid { grid-template-columns: 1fr; }
	.stats__grid { grid-template-columns: 1fr; gap: var(--kt-space-5); }
	.mockup__grid { grid-template-columns: 1fr; }
}