/* ==========================================================================
   Swift Shell — Werkwijze page (/werkwijze/)
   Page-scoped only. Reuses existing design tokens, .btn, .eyebrow and
   the visually-hidden utility from global.css. Self-contained otherwise.
   ========================================================================== */

.process-container {
	width: 100%;
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: var(--container-gutter);
}

/* Active "Werkwijze" nav state — same small rule already used by the
   Projecten/Diensten pages, scoped here since this page loads
   process.css. */
.nav-menu .current-menu-item > a,
.nav-menu .current_page_item > a {
	color: var(--color-text);
	position: relative;
}

.nav-menu .current-menu-item > a::after,
.nav-menu .current_page_item > a::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: -6px;
	height: 1px;
	background: var(--color-gold);
}

/* -------------------------------------------------------------------------
   Hero + process index
   ------------------------------------------------------------------------- */
.process-hero {
	padding-block: 72px 56px;
	background: var(--color-bg);
}

.process-hero__grid {
	display: grid;
	grid-template-columns: 1fr;
	row-gap: 40px;
}

.process-hero__intro {
	max-width: 760px;
}

.process-hero__heading {
	font-family: var(--font-heading);
	font-weight: 400;
	font-size: clamp(2.2rem, 4vw, 3.6rem);
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: var(--color-text);
	margin-block: var(--space-sm) var(--space-md);
}

.process-hero__body {
	color: var(--color-text-muted);
	font-size: 1.05rem;
	line-height: 1.6;
	max-width: 46ch;
}

.process-index ol {
	display: flex;
	flex-direction: column;
}

.process-index li + li { margin-top: 18px; }

.process-index a {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 18px;
	color: var(--color-text);
}

.process-index__number {
	font-family: var(--font-heading);
	font-size: 0.95rem;
	color: var(--color-gold);
}

.process-index__rule {
	display: block;
	height: 1px;
	background: var(--color-border);
	transition: background var(--transition-fast);
}

.process-index a:hover .process-index__rule { background: var(--color-gold); }

.process-index__label {
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	white-space: nowrap;
}

@media (min-width: 1024px) {
	.process-hero {
		padding-block: 100px 80px;
	}

	.process-hero__grid {
		grid-template-columns: minmax(0, 7fr) minmax(360px, 5fr);
		column-gap: 80px;
		align-items: start;
	}

	.process-index {
		padding-top: 72px;
	}

	.process-index__rule {
		width: 90px;
	}
}

/* -------------------------------------------------------------------------
   Approach
   ------------------------------------------------------------------------- */
.process-approach {
	padding-block: 96px;
	background: var(--color-surface-muted);
}

.process-approach__intro {
	display: grid;
	grid-template-columns: 1fr;
	row-gap: var(--space-md);
	margin-bottom: 56px;
}

.process-approach__heading {
	font-family: var(--font-heading);
	font-weight: 400;
	font-size: clamp(1.9rem, 3vw, 2.5rem);
	line-height: 1.15;
	color: var(--color-text);
	margin-top: var(--space-sm);
}

.process-approach__intro p {
	color: var(--color-text-muted);
	max-width: 46ch;
}

.process-approach__rule {
	border-top: 1px solid var(--color-border);
	margin-bottom: 48px;
}

.process-approach__columns {
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
}

.process-approach__number {
	display: block;
	font-family: var(--font-heading);
	color: var(--color-gold);
	font-size: 0.95rem;
	margin-bottom: 10px;
}

.process-approach__column h3 {
	font-size: 0.85rem;
	letter-spacing: 0.06em;
	margin-bottom: 10px;
}

.process-approach__column p {
	color: var(--color-text-muted);
	font-size: 0.92rem;
	max-width: 34ch;
}

@media (min-width: 1024px) {
	.process-approach__intro { grid-template-columns: 5fr 1fr 6fr; }
	.process-approach__intro p { grid-column: 3; }
	.process-approach__columns { grid-template-columns: repeat(3, 1fr); }
}

/* -------------------------------------------------------------------------
   Process intro
   ------------------------------------------------------------------------- */
.process-intro {
	padding-block: 96px 72px;
	background: var(--color-bg);
	text-align: center;
}

.process-intro__copy {
	max-width: 560px;
	margin-inline: auto;
}

.process-intro__heading {
	font-family: var(--font-heading);
	font-weight: 400;
	font-size: clamp(1.9rem, 3vw, 2.5rem);
	line-height: 1.2;
	color: var(--color-text);
	margin-top: var(--space-sm);
}

.process-intro__copy p {
	color: var(--color-text-muted);
	margin-top: var(--space-md);
}

.process-intro__stages {
	display: grid;
	grid-template-columns: 1fr;
	gap: 28px;
	margin-top: 56px;
	text-align: left;
}

.process-intro__stages li {
	padding-top: 16px;
	border-top: 1px solid var(--color-border);
}

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

.process-intro__stage-label {
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.08em;
}

@media (min-width: 1024px) {
	.process-intro__stages {
		grid-template-columns: repeat(4, 1fr);
		gap: var(--space-lg);
	}
}

/* -------------------------------------------------------------------------
   Process phases (shared system)
   ------------------------------------------------------------------------- */
.process-phase {
	padding-block: 72px;
	background: var(--color-bg);
	border-top: 1px solid var(--color-border);
	scroll-margin-top: 90px;
}

.process-phase__row {
	display: grid;
	grid-template-columns: 1fr;
	row-gap: var(--space-lg);
}

.process-phase__label {
	display: block;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--color-gold);
	margin-bottom: var(--space-sm);
}

.process-phase__heading {
	font-family: var(--font-heading);
	font-weight: 400;
	font-size: clamp(1.9rem, 3vw, 2.5rem);
	line-height: 1.15;
	color: var(--color-text);
	margin-bottom: var(--space-md);
}

.process-phase__body {
	color: var(--color-text-muted);
	max-width: 44ch;
	margin-bottom: var(--space-md);
}

.process-phase__items {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 14px;
	font-size: 0.86rem;
	color: var(--color-text-muted);
}

.process-phase__items li:not(:last-child)::after {
	content: '·';
	margin-left: 14px;
	color: var(--color-border);
}

@media (min-width: 1024px) {
	.process-phase { padding-block: 100px; }

	.process-phase__row {
		grid-template-columns: 5fr 7fr;
		column-gap: var(--space-2xl);
		align-items: center;
	}

	.process-phase--visual-left .process-phase__row {
		grid-template-columns: 7fr 5fr;
	}

	.process-phase--visual-left .process-phase__text { order: 2; }
	.process-phase--visual-left .process-phase__visual { order: 1; }
}

/* -------------------------------------------------------------------------
   Process images
   ------------------------------------------------------------------------- */

.process-phase__visual {
	width: 100%;
	min-width: 0;
}

.process-phase__image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	object-position: center;
	border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
	.process-index__rule { transition: none; }
}

/* -------------------------------------------------------------------------
   Collaboration
   ------------------------------------------------------------------------- */
.process-collaboration {
	padding-block: 96px;
	background: var(--color-dark);
	color: var(--color-on-dark);
}

.process-collaboration__grid {
	display: grid;
	grid-template-columns: 1fr;
	row-gap: 48px;
}

.process-collaboration__heading {
	font-family: var(--font-heading);
	font-weight: 400;
	font-size: clamp(1.9rem, 3vw, 2.5rem);
	line-height: 1.2;
	color: var(--color-on-dark);
	margin-top: var(--space-sm);
	max-width: 15ch;
}

.process-collaboration__items {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
}

.process-collaboration__item {
	padding-top: 20px;
	border-top: 1px solid var(--color-border-dark);
}

.process-collaboration__number {
	display: block;
	font-family: var(--font-heading);
	color: var(--color-gold);
	font-size: 0.9rem;
	margin-bottom: 8px;
}

.process-collaboration__item h3 {
	color: var(--color-on-dark);
	font-size: 0.88rem;
	letter-spacing: 0.05em;
	margin-bottom: 8px;
}

.process-collaboration__item p {
	color: var(--color-on-dark-muted);
	font-size: 0.92rem;
	max-width: 34ch;
}

@media (min-width: 1024px) {
	.process-collaboration__grid {
		grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
		column-gap: 80px;
	}

	.process-collaboration__items {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* -------------------------------------------------------------------------
   FAQ ("Praktisch") — reuses the homepage's accordion visual language
   ------------------------------------------------------------------------- */
.process-faq {
	padding-block: 96px;
	background: var(--color-surface-muted);
}

.process-faq__grid {
	display: grid;
	grid-template-columns: 1fr;
	row-gap: var(--space-lg);
}

.process-faq__intro { max-width: 340px; }

.process-faq__heading {
	font-family: var(--font-heading);
	font-weight: 400;
	font-size: clamp(1.7rem, 2.6vw, 2.2rem);
	line-height: 1.2;
	color: var(--color-text);
	margin-top: var(--space-sm);
}

.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) {
	.process-faq__grid { grid-template-columns: 340px 1fr; }
}

/* -------------------------------------------------------------------------
   Final CTA
   ------------------------------------------------------------------------- */
.process-cta {
	padding-block: 100px;
	background: var(--color-dark);
	color: var(--color-on-dark);
	text-align: center;
}

.process-cta .eyebrow { justify-content: center; color: var(--color-gold); }

.process-cta__inner {
	max-width: 640px;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.process-cta__heading {
	font-family: var(--font-heading);
	font-weight: 400;
	font-size: clamp(1.9rem, 3vw, 2.6rem);
	line-height: 1.2;
	color: var(--color-on-dark);
	margin-top: var(--space-sm);
}

.process-cta__body {
	color: var(--color-on-dark-muted);
	margin-block: var(--space-md) var(--space-lg);
}

/* -------------------------------------------------------------------------
   Mobile adjustments
   ------------------------------------------------------------------------- */
@media (max-width: 767px) {
	.process-hero,
	.process-approach,
	.process-intro,
	.process-phase,
	.process-collaboration,
	.process-faq {
		padding-block: 56px;
	}
	.process-cta { padding-block: 64px; }
}

/* ============================================================
   FINAL FIX — PROCESS INDEX
   ============================================================ */

/* DESKTOP */
@media (min-width: 768px) {

	.process-page .process-index__item {
		display: grid !important;
		grid-template-columns: 28px minmax(120px, 1fr) 120px !important;
		align-items: center !important;
		column-gap: 16px !important;
	}

	.process-page .process-index__rule {
		display: block !important;
		width: 100% !important;
		max-width: none !important;
		height: 1px !important;
		margin: 0 !important;
	}

	.process-page .process-index__label {
		width: 120px !important;
		min-width: 120px !important;
		text-align: right !important;
		white-space: nowrap !important;
	}
}


/* MOBILE */
@media (max-width: 767px) {

	.process-page .process-index {
		width: 100% !important;
		padding-top: 24px !important;
	}

	.process-page .process-index__item {
		display: grid !important;
		grid-template-columns: 28px minmax(0, 1fr) 105px !important;
		align-items: center !important;
		column-gap: 12px !important;
		padding: 11px 0 !important;
	}

	.process-page .process-index__number {
		font-size: 13px !important;
		line-height: 1 !important;
	}

	.process-page .process-index__rule {
		display: block !important;
		width: 100% !important;
		max-width: none !important;
		min-width: 0 !important;
		height: 1px !important;
		margin: 0 !important;
	}

	.process-page .process-index__label {
		width: 105px !important;
		min-width: 105px !important;
		font-size: 12px !important;
		line-height: 1 !important;
		letter-spacing: 0.12em !important;
		text-align: right !important;
		white-space: nowrap !important;
	}
}