/* Losse site-CSS (2026-10-30), overal geladen (inc/template-service-icons.php). Op deze site staat geen Tailwind-bron,
   alleen de gebouwde style.css; klassen die daar niet in zitten (lg:col-start-2, lg:grid-cols-2) dus hier. */

/* ---------- Text-image: maximaal col-span-10 (aan beide kanten één kolom in) ----------
   Binnen die 10 kolommen: tekst 4 · 1 kolom ruimte · beeld 5 (image-text gespiegeld). Tien kolommen zonder
   tussenruimte, zodat de buitenranden exact gelijk lopen met de methode-kaarten. Overschrijft de lg/2xl-col-classes
   in acf/text-image.php (hogere specificiteit). */
@media (min-width: 1024px) {
	.text-image-grid {
		margin-inline: calc(100% / 12);
		grid-template-columns: repeat(10, minmax(0, 1fr));
		column-gap: 0;
	}

	.text-image-grid > .text-image__text:first-child {
		grid-column: 1 / span 4;
	}

	.text-image-grid > .text-image__media:last-child {
		grid-column: 6 / span 5;
	}

	.text-image-grid > .text-image__media:first-child {
		grid-column: 1 / span 5;
	}

	.text-image-grid > .text-image__text:last-child {
		grid-column: 7 / span 4;
	}
}

/* ---------- Methode-kaarten op de home (acf/cards.php) ----------
   Icoon i.p.v. foto (stuwit_method_icon()), zelfde opzet als de dienstkaarten van bull-schuimbeton: liggende witte
   kaart, getint icoonvlak links, titel + tekst rechts, 2 per rij, maximaal col-span-10 (gecentreerd).
   Hover: de lagen van het icoon schuiven zacht uit elkaar, de bovenste het verst, met een kleine vertraging per laag.
   Bewust een transitie (geen oneindige keyframe-animatie): die schokte bij bull-schuimbeton bij in/uit. */
@media (min-width: 1024px) {
	.method-cards-wrap {
		margin-inline: calc(100% / 12); /* zelfde berekening als .text-image-grid, zodat de randen precies gelijk lopen */
	}
}

.method-cards {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0.75rem;
}

@media (min-width: 1024px) {
	.method-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1rem;
	}
}

.method-card {
	position: relative;
	display: flex;
	align-items: center;
	gap: 1.25rem;
	padding: 0.75rem;
	border-radius: 0.375rem;
	background: #fff;
	color: var(--color-dark, #1c1e26);
	transition: transform 0.3s;
}

.method-card:hover {
	transform: translateY(-2px);
}

@media (min-width: 1024px) {
	.method-card {
		gap: 1.75rem;
		padding: 1rem;
	}
}

/* Geen overflow-hidden: de lagen zweven bij hover iets buiten hun vak */
.method-card__media {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 5.5rem;
	height: 5.5rem;
	border-radius: 0.6rem;
	background: #fbf1ec; /* licht getint oranje */
}

.method-card__media .service-icon {
	width: 4.75rem;
	height: 4.75rem;
}

@media (min-width: 1024px) {
	.method-card__media {
		width: 7.5rem;
		height: 7.5rem;
	}

	.method-card__media .service-icon {
		width: 6.25rem;
		height: 6.25rem;
	}
}

.method-card__body {
	display: flex;
	min-width: 0;
	flex-direction: column;
	gap: 0.25rem;
	padding-right: 0.5rem;
}

.method-card__title {
	font-size: clamp(1rem, 0.91rem + 0.22vw, 1.125rem);
	line-height: 1.3;
	color: var(--color-dark, #1c1e26) !important;
}

.method-card__text {
	font-size: 0.875rem;
	line-height: 1.55;
	color: rgba(28, 30, 38, 0.6);
}

.service-icon {
	overflow: visible; /* de bovenste laag schuift bij hover net boven de viewBox uit */
}

.service-icon__layer {
	transform-box: view-box;
	transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
	transition-delay: calc((2 - var(--i)) * 0.04s);
}

.method-card:hover .service-icon__layer {
	transform: translateY(calc(var(--i) * -3px - 1px));
	transition-delay: calc(var(--i) * 0.06s);
}

@media (prefers-reduced-motion: reduce) {
	.method-card,
	.service-icon__layer {
		transition: none;
	}
}

/* Iconenweergave, kaart zonder herkende methode: de eigen foto vult het icoonvlak */
.method-card__media--photo {
	overflow: hidden;
}

.method-card__photo {
	width: 100%;
	height: 100%;
	object-fit: cover;
}