/* ==========================================================================
   OUR TEAM — "Directory Wall" redesign
   Sticky filter rail, dense photo wall, roster as connected vertical
   timeline of accordion profiles. Same DOM hooks as before (teamGrid,
   roster, disciplineFilters) so js/pages/our-team.js keeps functioning.
   ========================================================================== */

.team-section {
  padding: 8.5rem 0 4rem !important;
  position: relative;
}

.team-section .eyebrow-wrap { justify-content: center; display: flex; }

.team-section .section-title {
  text-align: center;
  font-size: clamp(1.9rem, 3.6vw, 2.7rem);
  max-width: 820px;
  margin: 0.5rem auto 1rem;
}

.team-section .section-title .accent { color: var(--color-accent-hover); }

.team-section .section-intro {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 2.5rem;
}

/* ---- Sticky filter rail ---- */
.disciplines-container {
  position: sticky;
  top: 0.75rem;
  z-index: 20;
  background: var(--glass-bg, rgba(250,249,247,0.96));
  backdrop-filter: blur(8px);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1rem 1.25rem !important;
  max-width: 1100px;
  margin: 0 auto 2rem !important;
  display: flex !important;
  flex-direction: column;
  gap: 0.6rem;
}

.disciplines-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.discipline-tag {
  border-radius: 999px !important;
  font-size: 0.78rem !important;
  padding: 0.45rem 0.9rem !important;
  border: 1px solid var(--color-border) !important;
  background: var(--color-surface) !important;
}

.discipline-tag.is-active {
  background: var(--color-accent) !important;
  color: #05221a !important;
  border-color: var(--color-accent) !important;
}

/* ---- Photo wall grid ---- */
.team-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)) !important;
  gap: 0.85rem !important;
  max-width: 1180px;
  margin: 0 auto 3.5rem;
}

.team-grid .member-card,
.team-grid > * {
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-md) !important;
  overflow: hidden;
  position: relative;
}

.team-list-header {
  max-width: 1100px;
  margin: 0 auto 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.team-list-header::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-border);
}

/* ---- Roster: connected vertical timeline of profiles ---- */
.roster {
  max-width: 900px !important;
  margin: 0 auto !important;
  position: relative;
  padding-left: 2rem;
}

.roster::before {
  content: "";
  position: absolute;
  left: 0.55rem;
  top: 0.6rem;
  bottom: 0.6rem;
  width: 2px;
  background: linear-gradient(180deg, var(--color-accent), var(--color-teal));
}

.roster .roster-item {
  position: relative;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-md) !important;
  margin-bottom: 1rem;
  background: var(--color-bg);
}

.roster .roster-item::before {
  content: "";
  position: absolute;
  left: -1.62rem;
  top: 1.6rem;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-accent);
  border: 2px solid var(--color-bg);
}

.roster .roster-item.open::before { background: var(--color-teal); }

@media (max-width: 640px) {
  .roster { padding-left: 1.25rem; }
  .roster::before { left: 0.15rem; }
  .roster .roster-item::before { left: -1.15rem; }
  .disciplines-container { position: static; }
}

/* Sticky Footer Layout Fix */
body {
  display: flex !important;
  flex-direction: column !important;
  min-height: 100vh !important;
}
.site-footer {
  margin-top: auto !important;
}



/* ============================================================================
   OUR TEAM — 2026 REDESIGN
   Page-scoped (enqueued only for the our-team slug via the about-us map in
   functions.php). Styles the block content that already exists — no post
   content is modified, so every string stays editable in Gutenberg.

   The page's own classes are the Kadence/core ones the editor produced:
   .business-impact-grid (roster), .impact-card (member), .impact-card-title
   / -desc / -social, .team-member-photo. The rules further up this file
   target .team-grid / .roster, which this page never used.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   MEASURE
   The section container resolves to --container-width (88rem = 1408px), which
   left ~48px margins at 1440 and stretched every paragraph to 1344px. Prose
   and roster get a tighter measure; full-bleed sections keep the wide one.
   --------------------------------------------------------------------------- */
.inner-section > .wp-block-group__inner-container {
	max-width: 1140px !important;
}

.inner-section {
	padding-block: clamp(3.5rem, 7vw, 5.5rem);
}

/* Prose caps out well before the container so lines stay readable. */
.inner-section p.wp-block-paragraph {
	max-width: 72ch;
	font-size: 1rem;
	line-height: 1.75;
	color: var(--color-text-muted);
}

/* ---------------------------------------------------------------------------
   HERO / INTRO
   --------------------------------------------------------------------------- */
.page-hero-title,
.inner-section h1 {
	font-size: clamp(2.2rem, 4.6vw, 3.4rem);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -0.035em;
	margin-bottom: 1.25rem;
}

/* The green standfirst under the H1 — currently as loud as the H1 itself. */
.inner-section h2.has-medium-font-size,
.inner-section h2 .accent,
.inner-section h2.wp-block-heading:first-of-type .accent {
	letter-spacing: -0.02em;
}

.section-title {
	font-size: clamp(1.75rem, 3.2vw, 2.5rem);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.03em;
}

.service-section-head { margin-bottom: clamp(2rem, 4vw, 3rem); }

/* ---------------------------------------------------------------------------
   ROSTER
   Two members previously stretched to 658px each with a 596px-wide avatar.
   Cards are now a fixed comfortable width and the row centres itself, so the
   layout reads correctly at 2 members and still fills out as more are added.
   --------------------------------------------------------------------------- */
/* Flex rather than grid: auto-fit emitted a trailing 0px track for the two
   current members, which pushed the row off-centre. Flex also lets the row
   start at the container's left edge so it lines up with the section heading
   and body copy instead of floating in the middle. */
.business-impact-grid {
	display: flex !important;
	flex-wrap: wrap;
	justify-content: center;
	align-items: stretch;
	gap: 1.5rem;
}

/* Descendant, not child: WordPress injects .wp-block-group__inner-container
   between the grid and the cards. premium-enhancements.css sets that wrapper
   to display:contents site-wide (runbook T13), so the cards DO become flex
   items of .business-impact-grid -- but they are not its DOM children, so a
   `>` selector never matched and the cards sized to their own content
   (188px vs 327px) instead of matching.
   Fixed basis with no shrink so both cards are identical. */
.business-impact-grid .impact-card {
	flex: 0 0 300px;
	width: 300px;
	max-width: 100%;
}

@media (max-width: 700px) {
	.business-impact-grid .impact-card { flex: 0 0 min(300px, 100%); width: min(300px, 100%); }
}

.impact-card {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex !important;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 2.25rem 1.5rem 1.75rem !important;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	background: var(--card-bg);
	transition: transform 0.45s var(--ease-out), border-color 0.45s var(--ease-out),
	            box-shadow 0.45s var(--ease-out);
}

.impact-card::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	background: radial-gradient(130% 70% at 50% 0%, rgba(var(--color-accent-rgb), 0.12), transparent 70%);
	opacity: 0;
	transition: opacity 0.45s var(--ease-out);
	pointer-events: none;
}
.impact-card:hover {
	transform: translateY(-8px);
	border-color: rgba(var(--color-accent-rgb), 0.38);
	box-shadow: 0 26px 50px -22px rgba(var(--ink-rgb), 0.32);
}
.impact-card:hover::after { opacity: 1; }

/* Portrait: the source images are square avatars, so crop to a circle with
   an accent ring rather than letting the figure run the card's full width. */
.team-member-photo,
.impact-card .wp-block-image {
	width: 132px !important;
	height: 132px;
	margin: 0 auto 1.25rem !important;
	border-radius: 50%;
	overflow: hidden;
	background: var(--color-surface);
	box-shadow: 0 0 0 1px var(--color-border),
	            0 0 0 6px rgba(var(--color-accent-rgb), 0.10);
	transition: box-shadow 0.45s var(--ease-out), transform 0.45s var(--ease-out);
}
.team-member-photo img,
.impact-card .wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 50%;
}
.impact-card:hover .team-member-photo {
	transform: scale(1.04);
	box-shadow: 0 0 0 1px rgba(var(--color-accent-rgb), 0.4),
	            0 0 0 8px rgba(var(--color-accent-rgb), 0.16);
}

.impact-card-title {
	font-size: 1.15rem !important;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--color-text);
	margin: 0 0 0.4rem !important;
}

/* First .impact-card-desc is the role, the second is the bio. */
.impact-card-desc {
	max-width: none !important;
	margin: 0 !important;
	font-size: 0.9rem;
	line-height: 1.6;
	color: var(--color-text-muted);
}
.impact-card-desc .accent,
.impact-card-desc strong.accent {
	display: block;
	font-size: 0.7rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-accent);
}
.impact-card-desc em {
	font-size: 0.88rem;
	color: var(--color-text-dim);
}

/* Kadence divider between role and bio — tighten and tint it. */
.impact-card .kt-divider {
	width: 34px;
	margin: 0 auto;
	border: 0;
	border-top: 2px solid rgba(var(--color-accent-rgb), 0.35);
}
.impact-card .wp-block-kadence-spacer { margin: 0.9rem 0 !important; }

/* Social row: core supplies the brand chip colours, only position and spacing
   are set here. */
.impact-card-social {
	margin: auto 0 0 !important;
	padding-top: 1.25rem;
	display: flex;
	justify-content: center;
	gap: 0.5rem;
}

/* Core paints the glyph white over the brand chip, but it does so through
   `:where(...)` selectors, which carry zero specificity. The theme's own text
   colour therefore wins on the anchor and the glyph inherits it: near-black on
   the blue chip in light mode, beige in dark. Neither is the intended white, so
   pin it explicitly for both themes.
   The :not() keeps this off the logos-only style, where the glyph is meant to
   carry the brand colour on a transparent background. */
.impact-card-social:not(.is-style-logos-only) .wp-social-link,
.impact-card-social:not(.is-style-logos-only) .wp-social-link .wp-block-social-link-anchor,
.impact-card-social:not(.is-style-logos-only) .wp-social-link .wp-block-social-link-anchor svg {
	color: #fff;
	fill: currentColor;
}

.business-impact-grid .impact-card:nth-child(1) { transition-delay: 0.04s; }
.business-impact-grid .impact-card:nth-child(2) { transition-delay: 0.12s; }
.business-impact-grid .impact-card:nth-child(3) { transition-delay: 0.20s; }
.business-impact-grid .impact-card:nth-child(4) { transition-delay: 0.28s; }

/* ---------------------------------------------------------------------------
   BROADER TEAM — text beside the studio photo
   --------------------------------------------------------------------------- */
.inner-section .wp-block-columns {
	gap: clamp(2rem, 4vw, 3.5rem);
	align-items: center;
}

.inner-section .wp-block-column > figure.wp-block-image,
.inner-section .wp-block-column .wp-block-image {
	margin: 0;
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: 0 26px 52px -26px rgba(var(--ink-rgb), 0.45);
}
.inner-section .wp-block-column .wp-block-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s var(--ease-out);
}
.inner-section .wp-block-column .wp-block-image:hover img { transform: scale(1.03); }

/* ---------------------------------------------------------------------------
   CTA
   --------------------------------------------------------------------------- */
.inner-cta-box {
	box-shadow: 0 22px 44px -18px rgba(var(--ink-rgb), 0.3),
	            0 0 0 1px rgba(var(--color-accent-rgb), 0.16);
	transition: box-shadow 0.5s var(--ease-out);
}
.inner-cta-box:hover {
	box-shadow: 0 28px 60px -18px rgba(var(--ink-rgb), 0.4),
	            0 0 0 1px rgba(var(--color-accent-rgb), 0.4);
}

/* ---------------------------------------------------------------------------
   Responsive
   --------------------------------------------------------------------------- */
@media (max-width: 900px) {
	.inner-section .wp-block-columns { flex-direction: column; }
	.inner-section p.wp-block-paragraph { max-width: none; }
}

@media (max-width: 600px) {
	.business-impact-grid { grid-template-columns: minmax(0, 1fr); }
	.impact-card { padding: 1.9rem 1.25rem 1.5rem !important; }
	.team-member-photo, .impact-card .wp-block-image { width: 116px !important; height: 116px; }
}

@media (prefers-reduced-motion: reduce) {
	.impact-card:hover,
	.impact-card:hover .team-member-photo,
	.impact-card-social .wp-block-social-link-anchor:hover,
	.inner-section .wp-block-column .wp-block-image:hover img { transform: none !important; }
}

/* ---------------------------------------------------------------------------
   ROSTER SECTION — centred heading to match the centred cards
   Scoped with :has() so only the section that actually contains the roster
   is centred; the other left-aligned section heads on this page keep their
   alignment.
   --------------------------------------------------------------------------- */
/* The section head sits in a narrower box than the roster row (750px vs the
   full 1140 container), so centring each one independently left the heading
   ~163px left of the cards at 1440 and only lined them up below ~780px.
   Widening the head to the container makes both centre on the same axis. */
.inner-section:has(.business-impact-grid) .service-section-head,
.inner-section:has(.business-impact-grid) .service-section-head.left-aligned {
	text-align: center;
	width: 100%;
	max-width: none !important;
	margin-inline: auto;
}

.inner-section:has(.business-impact-grid) .section-title {
	text-align: center;
	width: 100%;
	max-width: none !important;
	margin-inline: auto;
}

/* A little more air between the heading and the roster. */
.inner-section:has(.business-impact-grid) .business-impact-grid {
	margin-top: 2.75rem;
}

/* A short accent rule under the heading ties it to the cards below. */
.inner-section:has(.business-impact-grid) .section-title::after {
	content: "";
	display: block;
	width: 54px;
	height: 3px;
	margin: 0.9rem auto 0;
	border-radius: 3px;
	background: linear-gradient(90deg, var(--color-accent), var(--color-accent-hover));
}

/* Slightly richer card: a top accent edge that draws in on hover. */
.impact-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 0;
	height: 3px;
	border-radius: 0 0 3px 3px;
	background: linear-gradient(90deg, var(--color-accent), var(--color-accent-hover));
	transition: width 0.45s var(--ease-out);
}
.impact-card:hover::before { width: 70%; }

@media (prefers-reduced-motion: reduce) {
	.impact-card:hover::before { transition: none; }
}