/* Homepage — Salon Little Wellness.dc.html */

.home-knoppen {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 16px;
}

.home-kop {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.home-kop h2 {
	line-height: 1;
	letter-spacing: -.02em;
}

/* Hero */
.home-hero {
	position: relative;
	min-height: min(88vh, 820px);
	display: flex;
	align-items: center;
	overflow: hidden;
	background: var(--lila);
}

.home-hero__foto {
	position: absolute;
	inset: 0;
}

.home-hero__foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 60% 50%;
}

/* Linnen verloop over de foto zodat de tekst leesbaar blijft. Smal staat de tekst over de
   hele breedte (tot 1024 px, ook staande tablet): dan van boven naar beneden, zodat de bloem
   onderaan zichtbaar blijft. */
.home-hero--foto::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(243, 238, 230, .93) 0%, rgba(243, 238, 230, .9) 62%, rgba(243, 238, 230, .35) 100%);
}

@media (min-width: 1024px) {
	/* Bloem naast de tekst in plaats van eronder; links loopt het vlak weg in het linnen */
	.home-hero__foto {
		left: 30%;
		-webkit-mask-image: linear-gradient(90deg, transparent, #000 30%);
		mask-image: linear-gradient(90deg, transparent, #000 30%);
	}

	.home-hero--foto::after {
		background: linear-gradient(90deg, rgba(243, 238, 230, .96) 0%, rgba(243, 238, 230, .88) 38%, rgba(243, 238, 230, 0) 72%);
	}
}

.home-hero__binnen {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var(--max-breedte-breed);
	margin: 0 auto;
	padding: clamp(56px, 8vw, 112px) var(--gutter);
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.home-hero h1 {
	--kop-grootte: clamp(36px, 7vw, 104px);
	line-height: .98;
	letter-spacing: -.025em;
	/* Ontwerp: 760px; "Schoonheidssalon" op 104px is breder, dus iets ruimer om breken midden in het woord te voorkomen */
	max-width: 860px;
	text-wrap: balance;
}

.home-hero__streep {
	color: var(--pruim);
}

.home-hero__intro {
	font-size: clamp(17px, 1.4vw, 19px);
	line-height: 1.6;
	max-width: 520px;
	color: var(--tekst-intro);
	text-wrap: pretty;
}

.home-hero__tweede {
	background: rgba(243, 238, 230, .6);
}

/* Kenmerkenband */
.home-kenmerken {
	border-top: 1px solid var(--lijn-zacht);
	border-bottom: 1px solid var(--lijn-zacht);
}

.home-kenmerken__lijst {
	list-style: none;
	max-width: var(--max-breedte-breed);
	margin: 0 auto;
	padding: 22px var(--gutter);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 16px 40px;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.5;
	color: var(--tekst);
}

.home-kenmerken__lijst li {
	display: flex;
	align-items: center;
	gap: 10px;
}

.home-kenmerken .groene-stip {
	width: 8px;
	height: 8px;
}

/* Behandelingen */
.home-behandelingen {
	max-width: var(--max-breedte-breed);
	margin: 0 auto;
	padding: clamp(64px, 9vw, 128px) var(--gutter);
}

.home-behandelingen__kop {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-end;
	gap: 24px;
	margin-bottom: 48px;
}

.home-behandelingen__kop h2 {
	font-size: clamp(36px, 4.5vw, 60px);
	line-height: 1.02;
}

.home-behandelingen__kop p {
	max-width: 380px;
	font-size: 16px;
	line-height: 1.6;
	color: var(--tekst);
}

/* Bloemkaarten (Salon Little Wellness.dc.html, #behandelingen): de bloem van de pagina, bij
   aanwijzen of toetsenbordfocus vervaagt de behandelfoto erover en komt de kaart omhoog.
   1 kolom, vanaf 768 px 2, vanaf 1024 px 4. */
.home-kaarten {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 20px;
}

@media (min-width: 768px) {
	.home-kaarten {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

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

.home-kaart {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	aspect-ratio: 3 / 4.4;
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--aubergine);
	color: var(--linnen);
	text-decoration: none;
	transition: transform .35s ease, box-shadow .35s ease;
}

.home-kaart:hover,
.home-kaart:focus-visible {
	color: var(--linnen);
	transform: translateY(-6px);
	box-shadow: var(--schaduw-kaart);
}

.home-kaart__bloem,
.home-kaart__foto {
	position: absolute;
	inset: 0;
}

.home-kaart img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.home-kaart__foto {
	opacity: 0;
	transition: opacity .45s ease;
}

.home-kaart:hover .home-kaart__foto,
.home-kaart:focus-visible .home-kaart__foto {
	opacity: 1;
}

/* Verloop naar aubergine onder de tekst */
.home-kaart::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(58, 31, 72, 0) 30%, rgba(58, 31, 72, .75) 62%, rgba(58, 31, 72, .96) 100%);
}

.home-kaart__tekst {
	position: relative;
	z-index: 1;
	padding: 28px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.home-kaart__naam {
	font-family: var(--font-kop);
	font-size: clamp(24px, 2.3vw, 30px);
	line-height: 1.05;
	letter-spacing: -.01em;
}

.home-kaart__sub {
	font-size: 14px;
	line-height: 1.5;
	color: var(--tekst-op-donker);
}

.home-kaart__meer {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 6px;
	font-size: 15px;
	font-weight: 600;
	color: var(--hover-lichtgroen);
}

/* "Bekijk behandeling" pas bij aanwijzen of toetsenbordfocus; zonder hover (telefoon, tablet)
   blijft hij staan. Dichtgeklapt neemt hij geen ruimte in (negatieve marge heft de gap op). */
@media (hover: hover) {
	.home-kaart__meer {
		max-height: 0;
		margin-top: -14px;
		overflow: hidden;
		opacity: 0;
		transition: max-height .35s ease, margin-top .35s ease, opacity .35s ease;
	}

	.home-kaart:hover .home-kaart__meer,
	.home-kaart:focus-visible .home-kaart__meer {
		max-height: 2em;
		margin-top: 6px;
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.home-kaart,
	.home-kaart__meer,
	.home-kaart__foto {
		transition: none;
	}

	.home-kaart:hover,
	.home-kaart:focus-visible {
		transform: none;
	}
}

/* Fotoband */
.home-band {
	position: relative;
	height: clamp(320px, 48vw, 640px);
	background: var(--aubergine);
}

.home-band img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 60% 40%;
}

/* Ontdek: aubergine met watermerk */
.home-ontdek {
	position: relative;
	overflow: hidden;
	background: var(--aubergine);
	color: var(--linnen);
}

.home-ontdek__watermerk {
	position: absolute;
	left: clamp(-120px, -6vw, -40px);
	bottom: -90px;
	width: clamp(300px, 34vw, 500px);
	height: auto;
	opacity: .09;
	transform: rotate(-24deg);
	pointer-events: none;
}

.home-ontdek__binnen {
	position: relative;
	max-width: var(--max-breedte-breed);
	margin: 0 auto;
	padding: clamp(64px, 9vw, 128px) var(--gutter);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
	gap: clamp(32px, 6vw, 96px);
}

.home-ontdek .bovenregel {
	color: var(--lichtgroen);
}

.home-ontdek h2 {
	font-size: clamp(40px, 5.5vw, 76px);
}

.home-ontdek__tekst {
	display: flex;
	flex-direction: column;
	gap: 22px;
	font-size: 17px;
	line-height: 1.7;
	color: var(--footer-tekst);
}

.home-ontdek__tekst p {
	text-wrap: pretty;
}

.home-ontdek__tekst strong {
	color: var(--linnen);
	font-weight: 600;
}

.home-ontdek__tekst .home-knoppen {
	margin-top: 8px;
}

.home-ontdek__knop {
	background: var(--linnen);
	color: var(--inkt);
}

.home-ontdek__knop:hover {
	background: var(--lila-hover-op-donker);
	color: var(--inkt);
}

/* Over mij */
.home-over {
	max-width: var(--max-breedte-breed);
	margin: 0 auto;
	padding: clamp(64px, 9vw, 128px) var(--gutter);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
	gap: clamp(32px, 6vw, 96px);
	align-items: center;
}

.home-over__tekst {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.home-over__tekst > p:not(.home-over__citaat) {
	font-size: 17px;
	line-height: 1.7;
	color: var(--tekst);
	text-wrap: pretty;
}

.home-over__citaat {
	font-family: var(--font-accent);
	font-size: clamp(28px, 3vw, 40px);
	line-height: 1.3;
	color: var(--pruim);
	text-wrap: pretty;
}

/* Afspraak */
.home-afspraak {
	max-width: var(--max-breedte-breed);
	margin: 0 auto;
	padding: 0 var(--gutter) clamp(64px, 9vw, 112px);
}

/* Paars vlak met de bloem onder een paars verloop, zoals het afspraakblok op de andere pagina's.
   Rechts staan hier ook de stappen, dus het verloop blijft daar dekkender (85%). */
.home-afspraak__vlak {
	background-color: var(--pruim);
	background-image: linear-gradient(90deg, rgba(110, 50, 144, .97) 0%, rgba(110, 50, 144, .9) 45%, rgba(110, 50, 144, .85) 100%), var(--bloem, none);
	background-position: center;
	background-size: cover;
	color: var(--linnen);
	border-radius: var(--radius);
	padding: clamp(32px, 5vw, 64px);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
	gap: 32px 64px;
	align-items: center;
}

.home-afspraak .bovenregel {
	color: var(--hover-lichtgroen);
}

.home-afspraak h2 {
	font-size: clamp(34px, 4vw, 56px);
	line-height: 1.02;
}

.home-afspraak__stappen {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.home-afspraak ol {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--lijn-op-pruim);
}

.home-afspraak li {
	display: flex;
	gap: 16px;
	padding: 14px 0;
	border-bottom: 1px solid var(--lijn-op-pruim);
	font-size: 17px;
	line-height: 1.5;
}

.home-afspraak li span {
	color: var(--hover-lichtgroen);
	font-weight: 600;
}

.home-afspraak__noot {
	font-size: 14px;
	line-height: 1.5;
	color: var(--tekst-op-pruim);
}

/* Contact */
.home-contact {
	background: var(--lila);
}

.home-contact__binnen {
	max-width: var(--max-breedte-breed);
	margin: 0 auto;
	padding: clamp(64px, 9vw, 112px) var(--gutter);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
	gap: 48px;
	align-items: end;
}

.home-contact h2 {
	font-size: clamp(40px, 5vw, 68px);
}

.home-contact .home-kop p {
	margin-top: 8px;
	max-width: 440px;
	font-size: 17px;
	line-height: 1.6;
	color: var(--tekst);
}

.home-gegevens {
	margin: 0;
	border-top: 1px solid var(--inkt);
}

.home-gegevens > div {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	gap: 4px 16px;
	padding: 18px 0;
	border-bottom: 1px solid var(--lijn-rand);
}

.home-gegevens dt {
	font-size: 14px;
	color: var(--grijs-tekst);
}

.home-gegevens dd {
	margin: 0;
	font-size: 17px;
	font-weight: 500;
	line-height: 1.5;
}

.home-gegevens a {
	display: inline-block;
	padding: 10px 0;
	margin: -10px 0;
}

.home-contact__knoppen {
	margin-top: 28px;
}

.home-contact__afspraak {
	background: var(--inkt);
	color: var(--linnen);
}

.home-contact__afspraak:hover {
	background: var(--pruim);
	color: var(--linnen);
}