/* ==========================================================================
   AL HOMES - MEET THE TEAM
   assets/css/al-meet-the-team.css  v1.1.0

   Auto-enqueued by the page-templates engine for
   page-templates/al_meet_the_team.php (underscores -> hyphens).
   The name is the contract, do not rename one without the other.

   Fonts: --alh-font-display (Sofia Pro) / --alh-font-body (Afacad Flux)
   from inc/al-design-tokens.php. Colours use the Figma-named aliases from
   the same file, pasted the way Figma dev mode prints them.

   Everything is scoped under .al-team so typography.css's global h1/h2/p
   sizes never leak in, and nothing here leaks out.

   SOURCE: Figma "Meet the team" desktop frame, 1440 wide.
     Intro band   padding 80px 120px, bg --100
     Grid         1200px, 3 cols, gap 30px, starts 383px (about 60px under
                  the intro band), footer at 2759 (about 120px under grid)
     Card photo   380x300, 1px --200 border left/top/right
     Card body    padding 30px, bg --100, gap 10px
   v1.1.0  Per-person photo framing. The template prints --alh-focus and
           --alh-zoom on each .alh-member__media (from 'focus' / 'zoom' in
           $alh_team). object-position follows --alh-focus; the zoom is a
           transform that grows from the same point, so the face stays put
           while it gets closer. Default 50% 20% / 1 when nothing is set.
           Pairs with al_meet_the_team.php v1.1.0.

   Mobile has no Figma frame yet. The mobile block follows the homepage
   mobile export rules (402 frame, 30px side padding, H 36 -> 32).
   ========================================================================== */

.al-team {
	background: var(--White, #FFFFFF);
}

.al-team .alh-team-wrap {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
}

/* --------------------------------------------------------------------------
   1. INTRO BAND
   -------------------------------------------------------------------------- */
.al-team .alh-team-intro {
	background: var(--100, #FAF9F7);
	padding: 80px 120px;
}

.al-team .alh-team-intro__title {
	margin: 0;
	font-family: var(--alh-font-display);
	font-size: 36px;
	font-weight: 400;
	line-height: normal;
	color: var(--Dark-Text, #2A2A2A);
}

.al-team .alh-team-intro__sub {
	margin: 10px 0 0;
	font-family: var(--alh-font-body);
	font-size: 18px;
	font-weight: 300;
	line-height: normal;
	color: var(--Light-Text, #666666);
}

/* --------------------------------------------------------------------------
   2. TEAM GRID
   -------------------------------------------------------------------------- */
.al-team .alh-team {
	padding: 60px 120px 120px;
}

.al-team .alh-team__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 30px;
	align-items: stretch; /* cards in a row share one height, like the Figma */
}

.al-team .alh-member {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	min-width: 0;
}

/* Photo box: 380x300 ratio, border on 3 sides (bottom meets the body) */
.al-team .alh-member__media {
	position: relative;
	width: 100%;
	aspect-ratio: 380 / 300;
	overflow: hidden;
	background: var(--200, #EFEDEB);
	border: 1px solid var(--200, #EFEDEB);
	border-bottom: 0;
	box-sizing: border-box;
}

.al-team .alh-member__media img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	/* v1.1.0: per-person framing from the template (was: center top) */
	object-position: var(--alh-focus, 50% 20%);
	transform: scale(var(--alh-zoom, 1));
	transform-origin: var(--alh-focus, 50% 20%);
}

/* No photo: Figma placeholder, 30px account_box centred on --200 */
.al-team .alh-member__media--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--Light-Text, #666666);
}

.al-team .alh-member__media--empty svg {
	display: block;
	width: 30px;
	height: 30px;
}

/* Body: fills the rest of the card so a row lines up */
.al-team .alh-member__body {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 30px;
	background: var(--100, #FAF9F7);
}

.al-team .alh-member__role {
	margin: 0;
	font-family: var(--alh-font-body);
	font-size: 16px;
	font-weight: 400;
	line-height: normal;
	color: var(--Light-Text, #666666);
}

.al-team .alh-member__name {
	margin: 0;
	font-family: var(--alh-font-body);
	font-size: 24px;
	font-weight: 500;
	line-height: normal;
	color: var(--Dark-Text, #2A2A2A);
}

/* --------------------------------------------------------------------------
   TABLET (<=1024px): 2 columns
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
	.al-team .alh-team-intro {
		padding: 60px 40px;
	}

	.al-team .alh-team {
		padding: 50px 40px 80px;
	}

	.al-team .alh-team__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* --------------------------------------------------------------------------
   MOBILE (<=767px): 1 column, homepage mobile rules
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
	.al-team .alh-team-intro {
		padding: 40px 30px;
	}

	.al-team .alh-team-intro__title {
		font-size: 32px;
	}

	.al-team .alh-team {
		padding: 40px 30px 60px;
	}

	.al-team .alh-team__grid {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.al-team .alh-member__name {
		font-size: 22px;
	}
}