/* ============================================================
   About — /over-ons (585, NL) and /en/about-us (586, EN).

   Enqueued from functions.php, gated on the .about-page marker
   class the import script puts on the outer group of every
   section — same pattern as legal.css / rejuvenation.css.

   Everything the page could borrow, it borrows: .treatment-hero,
   .section-head, .mech-grid, .cond-list, .cond-grid/.cond-card,
   .tldr-box, .treat-card, .cta-box and .faq-item are all defined
   in treatment.css. Only the four components that exist nowhere
   else on the site live here.

   Tokens (--gold, --line, --deep, --ink-soft …) come from
   sensitif.css. No build step.
   ============================================================ */

/* --- SECTION RHYTHM ---------------------------------------- */
/* The delivered design runs 52px of vertical section padding;
   sensitif.css sets section{padding:80px 0} for the rest of the
   site. This page carries ten sections — at 80px it reads as a
   scroll with no end. Own class rather than changing the global
   element selector, exactly as .rejuv-section does. */
.about-section{padding:52px 0;}
.about-section.pt-0{padding-top:0;}
.about-section.pb-0{padding-bottom:0;}
.about-section.bg-panel{background:var(--bg-panel);}

/* --- TRUST BAR --------------------------------------------- */
/* Four proof points directly under the hero: founding year,
   equipment status, treatment count, location. Playfair for the
   figures so they read as the page's own voice rather than as a
   generic stat strip; mono labels tie them to the eyebrow system.
   A hairline underneath separates the bar from the TL;DR without
   a second background colour. */
.about-stats{
	display:grid;
	grid-template-columns:repeat(4,1fr);
	gap:20px;
	text-align:center;
}
.about-stats .stat-num{
	font-family:'Playfair Display',serif;
	font-size:28px;
	font-weight:600;
	color:var(--gold);
	line-height:1.1;
}
.about-stats .stat-label{
	font-family:'IBM Plex Mono',monospace;
	font-size:11px;
	letter-spacing:0.04em;
	text-transform:uppercase;
	color:var(--ink-soft);
	margin-top:6px;
}
.about-section.about-trust{
	padding:36px 0;
	border-bottom:1px solid var(--line);
}

/* Two-by-two rather than a four-across squeeze: "Medisch
   gecertificeerde apparatuur" wraps to three lines in a 90px
   column and the bar stops being scannable. */
@media (max-width:760px){
	.about-stats{grid-template-columns:1fr 1fr; gap:28px 20px;}
}

/* --- TEAM PHOTO -------------------------------------------- */
/* A five-person group portrait is the one image on this site that
   must not be run in a side column: at ~45% of .wrap each face
   lands near 40px and nobody is recognisable. So it takes the full
   measure, with the section copy stacked above it.

   Frame matches the card family (.info-card / .cond-card): 8px
   radius, hairline border, gold gradient rule along the top. */
.about-team-photo{
	margin:0;
	position:relative;
	border-radius:8px;
	overflow:hidden;
	border:1px solid var(--line);
	box-shadow:0 12px 34px rgba(19,42,59,0.12);
}
.about-team-photo::before{
	content:"";
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:2px;
	z-index:2;
	background:linear-gradient(90deg, var(--gold), var(--gold-bright));
}

/* aspect-ratio reserves the box before the file arrives, so CLS
   stays at zero while the stored markup remains a bare
   <img src alt> that core/image still validates in the editor.
   16/9 rather than the file's native 3:2: it trims the empty wall
   above and the laps below, which is where a seated group shot
   wastes its height. object-position 35% keeps the faces on the
   upper third of the crop instead of dead-centring the bench. */
.about-team-photo img{
	display:block;
	width:100%;
	height:auto;
	aspect-ratio:16 / 9;
	object-fit:cover;
	object-position:center 35%;
}

/* The caption sits on the image rather than under it: the line is
   context ("this is the team, at this address"), not a fact the
   reader has to hold, and an overlaid strip keeps the section to
   copy → image with no third block of text underneath.

   It is the native core/image caption, restyled — not a hand-built
   div — so the block still validates and the client can swap the
   photo and retype the line in the editor. The scrim is the brand
   navy at 78%, which clears WCAG AA for white at 11.5px over the
   warm beige the photo fades into along its base. */
.about-team-photo figcaption{
	position:absolute;
	left:0;
	right:0;
	bottom:0;
	margin:0;
	padding:34px 24px 18px;
	background:linear-gradient(180deg, rgba(19,42,59,0) 0%, rgba(19,42,59,0.78) 62%);
	font-family:'IBM Plex Mono',monospace;
	font-size:11.5px;
	letter-spacing:0.03em;
	line-height:1.4;
	color:#fff;
	text-align:left;
}

/* Below the nav breakpoint the native 3:2 comes back. At 390px a
   16/9 crop is only 219px tall and the faces drop under 50px;
   3:2 buys back 40px of height where it matters most. The caption
   loses its right-hand item to a stack rather than wrapping into
   a two-line bar over the image. */
@media (max-width:1100px){
	.about-team-photo img{aspect-ratio:3 / 2;}
}
@media (max-width:560px){
	.about-team-photo figcaption{padding:30px 18px 16px; font-size:10.5px;}
}

/* --- WERKWIJZE: THREE STEPS -------------------------------- */
/* .treat-card supplies the card itself (treatment.css); this is
   only the track it runs in. Three equal columns at desktop, and
   a single column below 760px — at two-up the third card orphans
   on its own row, which reads as a mistake in a numbered
   sequence. */
.about-steps{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:24px;
}
@media (max-width:760px){
	.about-steps{grid-template-columns:1fr;}
}

/* The shared card keeps 10px under its paragraph for the "→" link a
   step card does not carry; without this the three cards read as
   bottom-heavy against their own 22px padding. */
.about-steps .treat-card p{margin-bottom:0;}

.about-steps-cta{text-align:center; margin-top:36px;}

/* --- PRACTICAL INFO ---------------------------------------- */
/* Address and contact carry the same weight, so this is an even
   split — unlike .mech-grid, which is 1.2fr/1fr because it pairs
   long prose with a short list. */
.about-facts{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:36px;
}
.about-facts h4{margin-bottom:14px;}
.about-facts p{font-size:14.5px; color:var(--ink);}
@media (max-width:700px){
	.about-facts{grid-template-columns:1fr; gap:24px;}
}