/* ==========================================================================
   Frijns theme — content-secties: over ons, CTA-band, tarief
   ========================================================================== */

/* --- Over ons (home) --- */
.about-section__text p {
	color: var(--color-text);
}

.about-section__text p + p {
	margin-top: 1.1rem;
}

/* Huisfoto (kantoor aan huis) */
.about-photo {
	margin: 0;
}

.about-photo img {
	width: 100%;
	height: auto;
	border-radius: var(--radius-m);
	box-shadow: var(--shadow-card);
	display: block;
}

.about-photo figcaption {
	text-align: center;
	color: var(--color-muted);
	font-size: var(--wp--preset--font-size--small, 0.95rem);
	margin-top: 0.75rem;
	line-height: 1.5;
}

/* Adresregel onder het bijschrift: nog een maatje kleiner */
.about-photo__adres {
	font-size: 0.85em;
	color: #7A809A;
}

/* Tijdelijk adres-paneel zolang de huisfoto ontbreekt */
.about-address {
	background: var(--color-tint);
	border-radius: var(--radius-m);
	padding: var(--space-card);
	text-align: center;
}

.about-address .card-icon {
	margin: 0 auto 1rem;
	border-radius: 50%;
	background: var(--color-white);
}

.about-address h3 {
	margin: 0 0 0.5rem;
}

.about-address p {
	margin: 0;
	color: var(--color-muted);
}

.about-section__buttons {
	margin-top: clamp(1.5rem, 3vw, 2rem);
}

/* --- Personen op de over-ons pagina: portret naast verhaal --- */

/* De sectie met beide vennoten krijgt de script-F als heel licht merkteken
   aan de rechterrand — net zichtbaar, nooit storend achter de tekst. */
.people-section {
	position: relative;
	overflow: hidden;
}

/* Afsluitende uitnodiging onder de twee portretten */
.people-section__cta {
	position: relative;
	z-index: 1;
	margin-top: clamp(2.5rem, 5vw, 3.5rem) !important;
	padding-top: clamp(2rem, 4vw, 2.75rem);
	border-top: 1px solid var(--color-tint-strong);
	max-width: 44em;
	margin-inline: auto;
	color: var(--color-text);
	font-size: clamp(1.05rem, 0.3vw + 1rem, 1.15rem);
}

.people-section__cta a {
	color: var(--color-primary);
	font-weight: 600;
}

/* Volledig in beeld rechtsonder in het blok — niets afgesneden en niet
   achter de afsluitende tekst. */
.people-section__mark {
	position: absolute;
	right: clamp(1rem, 4vw, 3.5rem);
	bottom: clamp(1.25rem, 3vw, 2.5rem);
	width: clamp(130px, 14vw, 230px);
	height: auto;
	opacity: 0.06;
	pointer-events: none;
	user-select: none;
	z-index: 0;
}

.people-section > .wp-block-columns {
	position: relative;
	z-index: 1;
}

@media (max-width: 781px) {
	.people-section__mark {
		width: 120px;
		right: 1rem;
		bottom: 1rem;
		opacity: 0.07;
	}
}
.wp-block-columns.person-row {
	gap: clamp(1.5rem, 4vw, 3rem);
	margin: 0;
}

.wp-block-columns.person-row + .wp-block-columns.person-row {
	margin-top: clamp(2.5rem, 5vw, 4rem);
	padding-top: clamp(2.5rem, 5vw, 4rem);
	border-top: 1px solid var(--color-tint-strong);
}

.person-row__photo {
	margin: 0;
}

.person-row__photo img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: center 22%;
	border-radius: var(--radius-m);
	display: block;
}

/* De sectiekop staat boven de namen in de hiërarchie en moet dus ook groter
   zijn; de namen eronder zijn een niveau kleiner. */
.people-section .section-intro h2 {
	font-size: clamp(1.9rem, 1.6vw + 1.3rem, 2.6rem);
	margin-bottom: 0.75rem;
}

.people-section .section-intro {
	max-width: 46em;
	margin-bottom: clamp(2.5rem, 5vw, 3.75rem);
}

/* Minder lucht boven de kop, meer onderaan zodat het merkteken rechtsonder
   volledig binnen het blok past. */
.people-section {
	padding-top: clamp(2.25rem, 4vw, 3.25rem);
	padding-bottom: clamp(5rem, 8vw, 7rem);
}

.person-row__name {
	margin: 0 0 0.2rem;
	font-size: clamp(1.25rem, 0.7vw + 1.05rem, 1.55rem);
}

.person-row__role {
	margin: 0 0 1rem;
	color: var(--color-primary);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--small, 0.95rem);
}

.person-row p {
	color: var(--color-text);
}

.person-row__contact {
	margin-top: 1.1rem !important;
}

.person-row__contact a {
	color: var(--color-primary);
	font-weight: 600;
	text-decoration: none;
}

.person-row__contact a:hover {
	text-decoration: underline;
}

/* Op mobiel de foto altijd boven de tekst, ook bij de omgekeerde rij.
   De portretverhouding blijft staan (een brede uitsnede snijdt de hoofden
   lelijk af); de foto wordt alleen kleiner en gecentreerd. */
@media (max-width: 781px) {
	.person-row--reverse {
		flex-direction: column-reverse;
	}

	.person-row__photo {
		width: min(260px, 68%);
		margin-inline: auto;
	}

	.person-row__photo img {
		aspect-ratio: 4 / 5;
		object-position: center 18%;
	}

	.person-row__name,
	.person-row__role {
		text-align: center;
	}
}

/* Introparagraaf van een pagina */
.lead-text {
	font-size: var(--wp--preset--font-size--large, clamp(1.15rem, 0.6vw + 1rem, 1.35rem));
	color: var(--color-text);
	line-height: 1.65;
}

/* Openingsalinea van de over-ons sectie: iets steviger dan de rest */
.about-section__opening {
	font-size: clamp(1.08rem, 0.35vw + 1rem, 1.2rem);
	color: var(--color-navy);
	line-height: 1.65;
}

/* Uitgelichte zin in de over-ons tekst: zelfde lettertype en -grootte als de
   lopende tekst, alleen een blauw lijntje en wat meer lucht eromheen. */
.about-quote {
	margin-top: clamp(1.5rem, 3vw, 2rem) !important;
	padding-left: 1.25rem;
	border-left: 3px solid var(--color-primary);
	color: var(--color-text);
	line-height: 1.7;
}

/* --- CTA-band: rustig, effen Frijns-blauw --- */
/* Het blauwe blok stond met veel lege ruimte los onder de pagina. Nu sluit
   het aan met een kort accentstreepje, net als onder de paginatitels, en is
   de tussenruimte ongeveer gehalveerd. */
.section:has(+ .cta-section) {
	padding-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
}

.cta-section {
	padding-top: clamp(1.75rem, 3.5vw, 2.75rem);
	padding-bottom: clamp(3rem, 6vw, 5rem);
}

.cta-section::before {
	content: '';
	display: block;
	width: clamp(2.5rem, 6vw, 4rem);
	height: 3px;
	border-radius: 3px;
	margin: 0 auto clamp(1.75rem, 3.5vw, 2.75rem);
	background: var(--color-primary);
	opacity: 0.3;
}

.cta-band {
	background: var(--color-deep);
	border-radius: var(--radius-l);
	padding: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 4vw, 4rem);
	text-align: center;
	box-shadow: 0 12px 32px rgba(10, 18, 64, 0.16);
}

.cta-band h2 {
	color: var(--color-white);
	margin-top: 0;
	margin-bottom: 0.75rem;
}

.cta-band p {
	color: rgba(255, 255, 255, 0.9);
	max-width: 42em;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
}

.cta-band .wp-block-buttons {
	justify-content: center;
}

/* Sectie-wrapper om de CTA-band heen (voor witruimte) */
.cta-section {
	padding-top: var(--space-section);
	padding-bottom: var(--space-section);
}

/* --- Tarief-pagina --- */
.tarief-lead {
	font-size: var(--wp--preset--font-size--large, clamp(1.15rem, 0.6vw + 1rem, 1.35rem));
	color: var(--color-text);
	line-height: 1.65;
}

.tarief-panel {
	background: var(--color-tint);
	border-radius: var(--radius-m);
	padding: var(--space-card);
	height: 100%;
}

.tarief-panel h3 {
	margin-top: 0;
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

/* --- Starter-pagina intro --- */
.intro-text p + p {
	margin-top: 1.1rem;
}

/* Startersdiensten-paneel: zacht getint, rustig */
.starter-panel {
	background: var(--color-tint);
	border-radius: var(--radius-m);
	padding: var(--space-card);
}

.starter-panel h3 {
	margin: 0 0 1rem;
	font-size: var(--wp--preset--font-size--large, clamp(1.15rem, 0.6vw + 1rem, 1.35rem));
}