/* ==========================================================================
   About screen
   Contents: split sections · owners · management · clinical team · locations
   ========================================================================== */

/*
 * .split-section itself moved to main.css when Careers became its second user.
 * What stays here is the column proportion, which is this screen's decision: a
 * narrow intro against a wide list of people. Careers sets its own.
 */
@media (min-width: 992px) {
	.split-section__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.95fr);
		gap: var(--space-10);
	}
}

/* Shared person typography */
.person__name {
	font-size: var(--fs-base);
	color: var(--color-navy);
}

.person__role {
	margin-top: 0.2rem;
	font-size: var(--fs-sm);
	color: var(--color-muted);
}


/* Owners
   ========================================================================== */

.owner-list {
	display: grid;
	gap: var(--space-5);
}

.owner-card {
	display: grid;
	grid-template-columns: minmax(0, 0.75fr) minmax(0, 1fr);
	overflow: hidden;
	background: var(--color-white);
	border: 1px solid #edf2f8;
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm);
}

.owner-card__image {
	width: 100%;
	height: 100%;
	min-height: 220px;
	object-fit: cover;
	object-position: top;
}

/*
 * The stand-in when a person has no portrait: their initials, filling exactly
 * the frame the photograph would have filled. The look is .initials in
 * main.css, shared with Testimonials; only the sizes are this screen's.
 */
.owner-card__image--initials {
	font-size: 2.75rem;
}

.person-card__image--initials {
	font-size: 2.25rem;
}

.owner-card__body {
	padding: var(--space-6) var(--space-5);
}

.owner-card .person__name {
	font-size: 0.9375rem;
}

.owner-card__quote {
	margin-top: var(--space-4);
	font-size: 0.9375rem;
	line-height: 1.6;
}

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


/* Management
   ========================================================================== */

.person-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-4);
}

.person-card {
	overflow: hidden;
	background: var(--color-white);
	border: 1px solid #edf2f8;
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm);
}

.person-card__image {
	width: 100%;
	aspect-ratio: 5 / 4;
	object-fit: cover;
	object-position: top;
}

.person-card__body {
	min-height: 96px;
	padding: var(--space-4) var(--space-4) var(--space-5);
}

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


/* Clinical team
   ========================================================================== */

.team-groups {
	display: grid;
	gap: var(--space-5);
}

.team-group__image {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--radius);
}

.team-group__label {
	margin-top: var(--space-3);
	font-family: var(--font-heading);
	font-weight: 700;
	color: var(--color-navy);
}

@media (min-width: 576px) {
	.team-groups { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}


/* Inside our locations
   ========================================================================== */

.locations-strip__inner {
	display: grid;
	gap: var(--space-5);
	align-items: center;
}

/*
 * Smaller than the section titles above it, which is how the mockup draws it:
 * measured there, this heading's cap height is 16px against "Our Owners"' 22,
 * so it sits at roughly three quarters of their size. The build had the two
 * within a pixel of each other (33.6 vs 34.4), which is what pushed "Inside Our
 * Locations" onto a second line and its paragraph onto a third.
 */
/*
 * --color-ink, like every other section heading on the site: this is a section
 * title, not a card title, and it sat in navy on the same tinted background as
 * "Our Management Team" two sections above it in ink. Navy is the token for
 * card titles, names and badges; a heading that introduces a section is not one.
 *
 * The size is still this section's own, smaller than section-intro__title's —
 * left alone because that is a composition choice for a compact strip, where
 * the colour was not a choice at all.
 */
.locations-strip__title {
	margin-bottom: var(--space-3);
	font-size: clamp(1.35rem, 0.9rem + 0.95vw, 1.85rem);
	color: var(--color-ink);
}

.locations-strip__intro p {
	font-size: var(--fs-sm);
	line-height: 1.5;
	/*
	 * The break between the two sentence groups is in the content, via the "|" in
	 * inc/data/team.php — no CSS mode produces it, because all three (wrap, pretty,
	 * balance) were measured here and each broke mid-sentence. balance stays for
	 * the narrow columns where a group does not fit on one line: it is what makes
	 * the two lines that group then takes even instead of ragged.
	 */
	text-wrap: balance;
}

.locations-strip__gallery {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-3);
}

/*
 * The photo cells carry the aspect ratio, not the <img>. The link is the last
 * cell of the same grid row, so whichever is taller sets the row and the other
 * stretches into it: normally the photos decide and the card matches them
 * exactly, and if a longer translation ever makes the card the tallest, the
 * photos grow with it and crop instead of letterboxing. Either way the card
 * cannot drift away from the photos again, at any width, in any language.
 */
.locations-strip__gallery > li:not(.locations-strip__more-cell) {
	aspect-ratio: 4 / 3;
	/*
	 * Both are needed and they do different jobs. aspect-ratio is what the cell
	 * contributes when the row is measured, so the photos can win it. height
	 * is what the cell does once the row is decided, so the photos follow when
	 * the card wins instead — a cell sized only by aspect-ratio ignores the
	 * stretch and stops short, which is what left them 13px under the card.
	 *
	 * width is what keeps the ratio honest once height is definite. A ratio with
	 * a definite height stops deriving the height and starts deriving the WIDTH:
	 * with the row at 124 it asked for 124 x 4/3 = 165px inside a 144px track,
	 * so at ~1031px the photos overflowed their columns and overlapped. Pinning
	 * the width to the track leaves the ratio with nothing to derive, and the
	 * image crops through object-fit instead.
	 */
	width: 100%;
	height: 100%;
}

.locations-strip__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--radius-tile);
}

/* Stacked, the card is a full-width row under the 2x2 photos. */
.locations-strip__more-cell {
	grid-column: 1 / -1;
}

.locations-strip__more {
	display: flex;
	height: 100%;
	/* Stacked this card is full width, so the icon, label and arrow read as a row. */
	flex-direction: row;
	gap: var(--space-2);
	align-items: center;
	justify-content: center;
	/*
	 * Padding is a floor, not the spacing you see: the card stretches to the
	 * photos and centres its contents in whatever height that gives. Keeping the
	 * floor low is what lets the photos win the row instead of this card.
	 */
	padding: var(--space-3);
	font-family: var(--font-heading);
	font-weight: 600;
	line-height: 1.25;
	color: var(--color-primary);
	text-align: center;
	background: var(--color-white);
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm);
	transition: box-shadow var(--transition), transform var(--transition);
}

.locations-strip__more .icon:first-child {
	width: 26px;
	height: 26px;
}

.locations-strip__more .icon:last-child {
	width: 18px;
	height: 18px;
}

.locations-strip__more:hover {
	box-shadow: var(--shadow);
	transform: translateY(-2px);
}

@media (min-width: 992px) {
	/*
	 * Two columns: the intro, and the band of photos that ends with the card.
	 * The intro's share went up and the card's came down. The card was 12.2% of
	 * the row against the mockup's 9.9%, and the width that buys goes to the text
	 * so the heading holds one line and its paragraph two. The photos give up
	 * about 9px each, which is what Robert expected from the mockup anyway.
	 */
	.locations-strip__inner {
		grid-template-columns: minmax(0, 1.55fr) minmax(0, 4.53fr);
		gap: var(--space-4);
	}

	.locations-strip__gallery {
		grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 0.666fr);
	}

	.locations-strip__more {
		flex-direction: column;
	}

	.locations-strip__more-cell {
		grid-column: auto;
	}
}