/* ==========================================================================
   Meet Our Team page

   Header band matches the "All Available Apartments" listings page (eyebrow
   / serif headline / subhead, centered, thin bottom rule) — those values are
   redeclared here since that plugin's stylesheet only loads on pages that
   render a listings shortcode.

   Cards reuse the homepage amenities section's visual language (rounded
   photo card, bottom gradient scrim, white overlaid copy) with a headshot
   in place of the amenity photo.

   Loaded only on the Meet Our Team page template, so the tokens are
   redeclared here rather than pulled from home.css, which never loads on
   this page.
   ========================================================================== */

/* Astra's own .ast-container still boxes this page with its default ~20px
   mobile side padding, stacking underneath this page's own padding and
   pushing everything in further than the 16px the rest of the site uses.
   Same fix as contact.css / news.css / leasing-details.css /
   sitemap-map.css. */
.site-content > .ast-container:has(.fc-team-template) {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}

.fc-team-template {

	--font-display: 'proxima-sera', Georgia, 'Times New Roman', serif;
	--font-accent: 'Inter Tight', 'Helvetica Neue', Arial, sans-serif;
	--font-body: 'proxima-nova', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	background: var(--mist);
	font-family: var(--font-body);
	color: var(--ink);
}

/* ---------- Header ----------
   Now the shared page header — see inc/page-header.php and
   assets/page-header.css. The .fc-team-* rules that used to live here were a
   drifted copy of the same block (weight 400, fixed 70px, <em> accent left in
   the serif) and have been removed rather than left to fight the shared one. */

/* ---------- Card grid ---------- */
.fc-team-grid {
	background: var(--mist);
	padding: 56px 24px 80px;
}
.fc-team-grid__inner {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
	max-width: 1280px;
	margin: 0 auto;
}
.fc-team-card {
	position: relative;
	border-radius: 18px;
	overflow: hidden;
	min-height: 320px;
}
.fc-team-card__media {
	position: absolute;
	inset: 0;
}
.fc-team-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
/* Full-bleed photo, shadowed toward the bottom so the overlaid name/title
   stay legible over any headshot. */
.fc-team-card__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(0,0,0,0) 45%, rgba(0,0,0,0.55) 78%, rgba(0,0,0,0.85) 100%);
	pointer-events: none;
}
.fc-team-card__body {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	padding: 20px 20px 22px;
	color: #fff;
}
.fc-team-card__name {
	color: #fff !important;
	font-family: var(--font-display);
	font-size: 20px;
	line-height: 1em;
	margin: 0 0 4px;
	text-shadow: 0 2px 10px rgba(0,0,0,0.35);
}
.fc-team-card__title {
	display: block;
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: rgba(255,255,255,0.8);
}

/* Scroll-triggered entrance, copied from the homepage amenities section:
   cards rise, sharpen out of a soft blur and settle into place with an
   Apple-style decelerated ease, staggered diagonally by grid position so
   the whole grid unfolds as one wave. Gated behind reduced-motion since
   it's a pure auto-playing flourish. */
@media (prefers-reduced-motion: no-preference) {
	.fc-team-card {
		opacity: 0;
		transform: translateY(42px) scale(0.94);
		filter: blur(10px);
		transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
		            transform 0.9s cubic-bezier(0.16, 1, 0.3, 1),
		            filter 0.9s cubic-bezier(0.16, 1, 0.3, 1);
		will-change: transform, opacity, filter;
	}
	.fc-team-card.is-in {
		opacity: 1;
		transform: none;
		filter: blur(0);
	}
}

/* ---------- Closing bento ----------
   The fc-news-bento callout borrows .fc-news-wrap from news.css, which is
   1200px wide with 40px sides, so here it sat inset from the 1280px card grid
   above. Match the grid's width and side padding instead, the way the contact
   page's bento lines up with its frame. */
.fc-team-template .fc-news-bento .fc-news-wrap {
	max-width: calc(1280px + 48px);
	padding-left: 24px;
	padding-right: 24px;
}

/* Sit the bento one grid gap under the last row of cards instead of 140px
   (the grid's 80px bottom padding plus the bento's 60px top margin), the same
   way the contact page's bento sits right under its frame. Space below the
   bento is left as news.css has it. The dot texture normally bleeds 28px
   above the cards, which would now land on the headshots, so it starts at
   the cards' top edge here. */
.fc-team-grid { padding-bottom: 0; }
.fc-team-template .fc-news-bento { margin-top: 18px; }
.fc-team-template .fc-news-bento::before { top: 0; }

@media (max-width: 1024px) {
	.fc-team-grid__inner { grid-template-columns: repeat(2, 1fr); }
}
/* Side-padding standard (matches the leasing/apply page) starts at 768px,
   not just the narrower 600px query below. The header half of this pair moved
   to page-header.css with the rest of the header. */
@media (max-width: 768px) {
	.fc-team-grid,
	.fc-team-template .fc-news-bento .fc-news-wrap { padding-left: 16px; padding-right: 16px; }
}
@media (max-width: 600px) {
	.fc-team-grid { padding: 40px 16px 0; }
	.fc-team-grid__inner { grid-template-columns: 1fr; }
}