/* ==========================================================================
   Swift Shell — Homepage Stylesheet
   Homepage-only rules. Nothing here duplicates global.css.
   ========================================================================== */

/* -------------------------------------------------------------------------
   Hero
   ------------------------------------------------------------------------- */
.home-hero { padding-block: var(--space-2xl) var(--space-2xl); overflow: hidden; }

.home-hero__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-xl);
	align-items: center;
}

.home-hero__copy { max-width: 640px; }

.home-hero__copy .display { margin-bottom: var(--space-md); }
.home-hero__copy .lede { max-width: 46ch; margin-bottom: var(--space-lg); }

.home-hero__actions { flex-wrap: wrap; }

.home-hero__visual {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: flex-end;
	min-height: 280px;
}

.hero-device {
	position: relative;
	border-radius: var(--radius-medium);
	overflow: hidden;
	box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.55);
}

.hero-device--laptop {
	width: min(560px, 90%);
	aspect-ratio: 16 / 10;
	border: 6px solid #2A251E;
	border-bottom-width: 14px;
}

/* Keyboard deck: a thin trapezoid beneath the screen so the laptop
   reads as a device in perspective rather than a flat rectangle. */
.hero-device--laptop::after {
	content: '';
	position: absolute;
	left: 50%;
	bottom: -22px;
	transform: translateX(-50%);
	width: 112%;
	height: 22px;
	background: linear-gradient(180deg, #3A342A 0%, #211D17 100%);
	clip-path: polygon(6% 0%, 94% 0%, 100% 100%, 0% 100%);
}

.hero-device--phone {
	position: absolute;
	right: -2%;
	bottom: -14%;
	width: 32%;
	max-width: 190px;
	aspect-ratio: 9 / 18.5;
	border: 5px solid #2A251E;
	border-radius: var(--radius-large);
	box-shadow: 0 20px 45px -18px rgba(0, 0, 0, 0.6);
	z-index: 1;
}

.hero-device__screen {
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 4px;
	padding: var(--space-md);
}

.hero-device--brey {
	background:
		linear-gradient(180deg, rgba(20, 18, 15, 0.1) 0%, rgba(20, 18, 15, 0.85) 88%),
		linear-gradient(135deg, #C7B49B 0%, #7D6C57 60%, #4A3F33 100%);
}

.hero-device--schoon {
	background:
		linear-gradient(180deg, rgba(20, 18, 15, 0.05) 0%, rgba(20, 18, 15, 0.9) 90%),
		linear-gradient(160deg, #2E3A44 0%, #101820 65%, #05080B 100%);
}

.hero-device__label {
	font-size: 0.62rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-gold-light);
}

.hero-device__title {
	font-family: var(--font-heading);
	font-size: 1.3rem;
	color: #fff;
	line-height: 1.15;
}

.hero-device--phone .hero-device__title { font-size: 0.85rem; }

.hero-device__sub {
	font-size: 0.72rem;
	color: rgba(255, 255, 255, 0.7);
}

@media (min-width: 1024px) {
	.home-hero__grid {
		grid-template-columns: minmax(360px, 420px) 1fr;
		gap: var(--space-xl);
	}
	.home-hero__visual { justify-content: flex-end; min-height: 440px; margin-top: var(--space-lg); }
	.hero-device--laptop { width: 100%; }
}

@media (min-width: 1280px) {
	.home-hero__grid { grid-template-columns: minmax(380px, 440px) 1fr; }
}

/* -------------------------------------------------------------------------
   Positioning strip
   ------------------------------------------------------------------------- */
.home-positioning { padding-block: var(--space-lg); }

.home-positioning__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-lg) var(--space-md);
}

.home-positioning__item { max-width: 220px; }

.home-positioning__icon {
	width: 26px;
	height: 26px;
	color: var(--color-gold);
	margin-bottom: var(--space-sm);
}

.home-positioning__item h4 { margin-bottom: 4px; }

@media (min-width: 700px) {
	.home-positioning__grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1024px) {
	.home-positioning__grid { grid-template-columns: repeat(5, 1fr); }
}

/* -------------------------------------------------------------------------
   Featured projects
   ------------------------------------------------------------------------- */
.home-projects {
	padding-block: var(--space-2xl) 152px;
}

.home-projects__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-md);
}

.project-card {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 460px;
	border-radius: var(--radius-medium);
	overflow: hidden;
	background: #201C16;
	transition: transform var(--transition-normal);
}

.project-card:hover { transform: translateY(-4px); }

.project-card__media {
	position: absolute;
	inset: 0;
}

.project-card--brey .project-card__media {
	background: linear-gradient(180deg, rgba(20,18,15,0.05) 0%, rgba(15,13,11,0.94) 78%), linear-gradient(150deg, #C7B49B 0%, #8B7A63 55%, #45392C 100%);
}
.project-card--schoonvermogen .project-card__media {
	background: linear-gradient(180deg, rgba(20,18,15,0.05) 0%, rgba(8,10,12,0.94) 78%), linear-gradient(160deg, #3A4A56 0%, #131C22 65%, #05080B 100%);
}
.project-card--norush .project-card__media {
	background: linear-gradient(180deg, rgba(20,18,15,0.05) 0%, rgba(8,8,8,0.94) 78%), linear-gradient(160deg, #3D3D3D 0%, #171717 65%, #050505 100%);
}
.project-card--swiftshell .project-card__media {
	background:
		repeating-linear-gradient(-35deg, rgba(199, 154, 101, 0.16) 0px, rgba(199, 154, 101, 0.16) 1px, transparent 1px, transparent 46px),
		linear-gradient(180deg, rgba(20,18,15,0.05) 0%, rgba(10,9,7,0.94) 78%), linear-gradient(160deg, #2A241C 0%, #14120F 100%);
}

.project-card__mark {
	position: absolute;
	right: -18px;
	bottom: -14px;
	width: 140px;
	height: 140px;
	color: var(--color-gold);
	opacity: 0.9;
}

.project-card__body {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-rows:
		20px
		54px
		minmax(66px, auto)
		32px;
	align-content: end;
	padding: var(--space-lg);
	color: var(--color-on-dark);
	min-height: 245px;
}

/* 1 — categorie */
.project-card__body .caption {
	display: flex;
	align-items: flex-start;
	margin: 0;
	line-height: 1.4;
}

/* 2 — projecttitel */
.project-card__body h3 {
	color: var(--color-on-dark);
	margin: 0;
	align-self: start;
}

/* 3 — beschrijving */
.project-card__text {
	color: var(--color-on-dark-muted);
	font-size: 0.9rem;
	line-height: 1.55;
	max-width: 32ch;
	margin: 0;
	align-self: start;
}

/* 4 — CTA */
.project-card__link {
	color: var(--color-on-dark);
	margin: 0;
	padding: 0;
	align-self: end;
	justify-self: start;
}

@media (max-width: 1199px) {
	.project-card__body {
		min-height: 230px;
	}
}

@media (min-width: 700px) {
	.home-projects__grid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1200px) {
	.home-projects__grid { grid-template-columns: repeat(4, 1fr); }
	.project-card { min-height: 560px; }
}

/* -------------------------------------------------------------------------
   Why Swift Shell
   ------------------------------------------------------------------------- */
.home-why {
	padding-block: var(--space-2xl) 152px;
}

.home-why__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-xl);
}

.home-why__intro { max-width: 380px; }
.home-why__intro p { margin-block: var(--space-sm) var(--space-md); }

.home-why__list {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-lg) var(--space-xl);
}

.home-why__index {
	display: block;
	font-family: var(--font-heading);
	font-size: 0.85rem;
	color: var(--color-gold);
	margin-bottom: 6px;
}

.home-why__item h4 { margin-bottom: 4px; }

@media (min-width: 700px) {
	.home-why__list { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1024px) {
	.home-why__grid { grid-template-columns: 380px 1fr; }
}

/* -------------------------------------------------------------------------
   Method
   ------------------------------------------------------------------------- */
.home-method {
	padding-block: var(--space-2xl) 152px;
}

.home-method__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-lg);
	counter-reset: none;
}

.home-method__item {
	border-top: 1px solid var(--color-border-dark);
	padding-top: var(--space-md);
}

.home-method__index {
	display: block;
	font-family: var(--font-heading);
	color: var(--color-gold);
	font-size: 0.85rem;
	margin-bottom: var(--space-sm);
}

.home-method__icon-row {
	display: flex;
	align-items: center;
	gap: var(--space-xs);
	margin-bottom: 6px;
}

.home-method__icon-row svg { width: 18px; height: 18px; color: var(--color-gold); }
.home-method__icon-row h4 { font-size: 0.82rem; letter-spacing: 0.04em; }

@media (min-width: 700px) {
	.home-method__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1200px) {
	.home-method__grid { grid-template-columns: repeat(5, 1fr); }
}

/* -------------------------------------------------------------------------
   Help / solutions
   ------------------------------------------------------------------------- */
.home-help {
	padding-block: var(--space-2xl);
}

.home-help__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-md);
}

.help-card {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-medium);
	padding: var(--space-lg);
}

.help-card__media {
	width: 100%;
	aspect-ratio: 4 / 3;
	border-radius: var(--radius-small);
	background: linear-gradient(150deg, var(--color-dark) 0%, #2A241C 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: var(--space-md);
}

.help-card__icon { width: 32px; height: 32px; color: var(--color-gold); }

.help-card h4 { margin-bottom: 6px; }
.help-card .caption { margin-bottom: var(--space-sm); min-height: 3em; }

@media (min-width: 700px) {
	.home-help__grid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1024px) {
	.home-help__grid { grid-template-columns: repeat(4, 1fr); }
}

/* -------------------------------------------------------------------------
   Social proof / testimonial slider
   ------------------------------------------------------------------------- */

.home-proof {
	padding-block: var(--space-2xl);
}

/* Heading */
.home-proof__header {
	max-width: 620px;
	margin-bottom: var(--space-xl);
}

.home-proof__header .eyebrow {
	margin-bottom: var(--space-sm);
}

.home-proof__header h2 {
	margin: 0;
}

/* Slider wrapper */
.home-proof__slider {
	position: relative;
	width: 100%;
}

/* Only the cards are clipped — arrows remain visible */
.home-proof__viewport {
	width: 100%;
	overflow: hidden;
}

/* Moving track */
.home-proof__track {
	display: flex;
	align-items: stretch;
	gap: var(--space-md);
	width: 100%;
	transition: transform 420ms cubic-bezier(0.22, 0.61, 0.36, 1);
	will-change: transform;
}

/* Review card */
.testimonial-card {
	flex: 0 0 100%;
	min-width: 0;
	min-height: 230px;

	display: flex;
	flex-direction: column;
	justify-content: space-between;

	margin: 0;
	padding: var(--space-lg);

	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-medium);
}

/* Review text */
.testimonial-card blockquote {
	margin: 0;
}

.testimonial-card blockquote p {
	margin: 0;
	color: var(--color-text);
	font-size: 0.98rem;
	line-height: 1.6;
}

/* Person */
.testimonial-card figcaption {
	margin-top: var(--space-lg);
}

.testimonial-card__avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: 38px;
	height: 38px;
	flex: 0 0 38px;

	border-radius: 50%;
	background: var(--color-dark);
	color: var(--color-gold-light);

	font-family: var(--font-heading);
}

.testimonial-card__name {
	display: block;
	font-size: 0.9rem;
	line-height: 1.35;
}

.testimonial-card__company {
	display: block;
	margin-top: 2px;
	color: var(--color-gold);
}

/* --------------------------------------------------
   Navigation arrows
   -------------------------------------------------- */

.home-proof__arrow {
	position: absolute;
	top: 50%;
	z-index: 10;

	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: 44px;
	height: 44px;
	padding: 0;

	border: 1px solid var(--color-border);
	border-radius: 50%;

	background: var(--color-surface);
	color: var(--color-text);

	font-size: 1.05rem;
	line-height: 1;

	box-shadow: 0 8px 24px rgba(20, 18, 15, 0.08);

	transform: translateY(-50%);

	transition:
		background var(--transition-fast),
		color var(--transition-fast),
		border-color var(--transition-fast),
		opacity var(--transition-fast),
		transform var(--transition-fast);
}

.home-proof__arrow:hover:not(:disabled) {
	background: var(--color-dark);
	color: var(--color-on-dark);
	border-color: var(--color-dark);
	transform: translateY(-50%) scale(1.04);
}

.home-proof__arrow:focus-visible {
	outline: 2px solid var(--color-gold);
	outline-offset: 3px;
}

/* Hide unavailable direction cleanly */
.home-proof__arrow:disabled {
	opacity: 0;
	pointer-events: none;
}

.home-proof__arrow--prev {
	left: -22px;
}

.home-proof__arrow--next {
	right: -22px;
}

/* --------------------------------------------------
   Tablet — 2 reviews
   -------------------------------------------------- */

@media (min-width: 700px) {

	.testimonial-card {
		flex-basis: calc((100% - var(--space-md)) / 2);
	}
}

/* --------------------------------------------------
   Desktop — 3 reviews
   -------------------------------------------------- */

@media (min-width: 1000px) {

	.testimonial-card {
		flex-basis: calc(
			(100% - (var(--space-md) * 2)) / 3
		);
	}
}

/* --------------------------------------------------
   Smaller screens
   -------------------------------------------------- */

@media (max-width: 699px) {

	.home-proof {
		padding-block: var(--space-xl);
	}

	.home-proof__header {
		margin-bottom: var(--space-lg);
	}

	.testimonial-card {
		min-height: 220px;
	}

	.home-proof__arrow {
		width: 40px;
		height: 40px;
	}

	.home-proof__arrow--prev {
		left: 10px;
	}

	.home-proof__arrow--next {
		right: 10px;
	}
}

/* -------------------------------------------------------------------------
   Audience
   ------------------------------------------------------------------------- */
.home-audience {
	padding-block: var(--space-2xl) 152px;
}

.home-audience__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-xl);
}

.home-audience__intro { max-width: 420px; }
.home-audience__intro p { margin-block: var(--space-sm) var(--space-md); }

.home-audience__list {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-sm) var(--space-lg);
}

.home-audience__list li {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	padding-block: var(--space-sm);
	border-bottom: 1px solid var(--color-border-dark);
	font-size: 0.95rem;
}

.home-audience__icon {
	width: 16px;
	height: 16px;
	color: var(--color-gold);
	flex-shrink: 0;
}

@media (min-width: 700px) {
	.home-audience__list { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1024px) {
	.home-audience__grid { grid-template-columns: 420px 1fr; }
}

/* -------------------------------------------------------------------------
   FAQ
   ------------------------------------------------------------------------- */
.home-faq {
	padding-block: var(--space-2xl);
}

.home-faq__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-xl);
}

.home-faq__intro { max-width: 340px; }
.home-faq__intro h2 { margin-block: var(--space-sm) var(--space-md); }

.faq-item {
	border-bottom: 1px solid var(--color-border);
}

.faq-item__trigger {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-md);
	padding-block: 22px;
	background: none;
	border: none;
	text-align: left;
	font-size: 1.02rem;
	font-weight: 500;
	line-height: 1.4;
}

.faq-item__icon {
	width: 14px;
	height: 14px;
	color: var(--color-gold);
	flex-shrink: 0;
	transition: transform var(--transition-fast);
}

.faq-item__trigger[aria-expanded="true"] .faq-item__icon {
	transform: rotate(45deg);
}

.faq-item__panel p {
	padding-bottom: var(--space-md);
	max-width: 60ch;
}

/* Collapsed accordion behaviour only applies once JavaScript has run
   (see the no-js -> js class swap in header.php). Without JavaScript,
   every answer stays fully visible and readable. */
.js .faq-item__panel {
	overflow: hidden;
	max-height: 0;
	transition: max-height var(--transition-normal);
}

.js .faq-item.is-open .faq-item__panel {
	max-height: 320px;
}

@media (min-width: 1024px) {
	.home-faq__grid { grid-template-columns: 340px 1fr; }
}

/* -------------------------------------------------------------------------
   Final CTA
   ------------------------------------------------------------------------- */
.home-final-cta {
	position: relative;
	overflow: hidden;
	padding-block: var(--space-xl);
}

.home-final-cta__lines {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 100%;
	max-width: 480px;
	height: auto;
	max-height: 360px;
	pointer-events: none;
}

.home-final-cta__grid {
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-lg);
	align-items: end;
}

.home-final-cta .display { margin-block: var(--space-sm) var(--space-md); }
.home-final-cta__actions { flex-wrap: wrap; }

@media (min-width: 1024px) {
	.home-final-cta__grid { grid-template-columns: 1.4fr 1fr; }
	.home-final-cta__actions { justify-content: flex-end; }
}

@media (max-width: 767px) {
	.home-projects,
	.home-why,
	.home-method,
	.home-audience {
		padding-block: var(--space-xl);
	}
}

/* ================================================================
   HERO — PROJECT MOCKUP
   ================================================================ */

.home-hero__visual {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
}

.home-hero__mockup {
	display: block;
	width: 100%;
	max-width: 760px;
	height: auto;
	object-fit: contain;
}

@media (max-width: 767px) {

	.home-hero__mockup {
		width: 100%;
		max-width: 620px;
	}

}