/* itbuilder/team-member-card */

{#
  module.css only supports a very limited subset of HubL (module_asset_url()
  only — no theme.* access), so the {% set %} calls this file used to have
  here never actually resolved. Fixed colours now come from the
  --theme-*-color custom properties published in theme-overrides.css's :root
  (which does have full theme.* access) instead of interpolating theme
  values directly in this file.
#}

/* Mockup (ITBuilder_HomePage_D03.pdf): this section sits on the same light
   band colour as the site's own header/nav bar, not the plain page
   background — pixel-sampled both and they match. --theme-header-bg-color
   is theme.header.background.color.color published as a custom property
   (see theme-overrides.css :root) so this stays in sync with whatever's
   actually configured for the site header, rather than a hardcoded guess. */

.team-member-card {
  background-color: var(--theme-header-bg-color, #dce4ea);
  padding: var(--space-8, 80px) 0;
}

/* Sept 2026 client feedback: the Homepage's carousel instance should sit on
   the sitewide off-white band instead of the header-bar colour above —
   scoped to --carousel specifically (not the shared base rule) so About's
   "Senior team"/"Service delivery team" --grid instances, which still want
   the header-bar colour, are unaffected. */

.team-member-card--carousel {
  background-color: var(--theme-secondary-color, #f8fafc);
}

.team-member-card__heading,
.team-member-card__intro {
  text-align: center;
}

.team-member-card__intro {
  margin: var(--space-3, 16px) auto 0;
  max-width: 60ch;
}

/* Sept 2026 client feedback: prev/next now sit in a header row next to the
   heading, matching case-study-carousel.module's own .case-study-carousel
   __header/__controls layout exactly (same properties, same values) so the
   two carousels on the Homepage look consistent. Left as a plain block by
   default — only --carousel turns it into that header row (see further
   down); --grid keeps its heading centred with no visible row, since its
   prev/next are already display:none below. */

.team-member-card--carousel .team-member-card__header {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.team-member-card--carousel .team-member-card__heading {
  text-align: left;
}

.team-member-card__controls {
  display: flex;
  gap: var(--space-2, 8px);
}

.team-member-card__carousel {
  margin-top: var(--space-5, 32px);
}

.team-member-card__prev,
.team-member-card__next {
  align-items: center;
  background: #fff;
  border: 1px solid rgba(25, 39, 50, 0.15);
  border-radius: var(--radius-pill, 999px);
  color: var(--theme-primary-color, #192732);
  cursor: pointer;
  display: flex;
  font-size: 18px;
  height: 40px;
  justify-content: center;
  line-height: 1;
  padding: 0;
  text-transform: none;
  width: 40px;
}

.team-member-card__prev:hover,
.team-member-card__next:hover,
.team-member-card__prev:focus-visible,
.team-member-card__next:focus-visible {
  background: rgba(25, 39, 50, 0.06);
}

.team-member-card__prev:disabled,
.team-member-card__next:disabled {
  cursor: not-allowed;
  opacity: 0.35;
}

.team-member-card__list {
  display: flex;
  flex: 1;
  gap: var(--space-4, 24px);
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
}

.team-member-card__item {
  background-color: var(--theme-primary-color);
  border-radius: var(--radius-md, 8px);
  color: #fff;
  flex: 0 0 220px;
  padding: var(--space-5, 32px) var(--space-4, 24px);
  scroll-snap-align: start;
  text-align: center;
}

.team-member-card__photo {
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-pill, 999px);
  margin: 0 auto;
  object-fit: cover;
  width: 96px;
}

.team-member-card__name {
  color: var(--theme-modernisation-color);
  margin-top: var(--space-3, 16px);
}

.team-member-card__role {
  color: #fff;
  opacity: 0.85;
}

.team-member-card__bio-toggle {
  background: none;
  border: 0;
  color: #fff;
  cursor: pointer;
  font-weight: 600;
  margin-top: var(--space-2, 8px);
  text-decoration: underline;
}

.team-member-card__bio {
  color: #fff;
  margin-top: var(--space-2, 8px);
  opacity: 0.85;
}

.team-member-card__contacts {
  display: flex;
  gap: var(--space-3, 16px);
  justify-content: center;
  margin-top: var(--space-3, 16px);
}

.team-member-card__contacts a {
  color: #fff;
}

/* Mobile: bio collapsed behind the toggle button */

@media (max-width: 767px) {
  .team-member-card__bio {
    display: none;
  }

  .team-member-card__bio.is-expanded {
    display: block;
  }

  .team-member-card__item {
    flex-basis: 70%;
  }
}

/* Tablet/desktop: bio always visible, toggle hidden */

@media (min-width: 768px) {
  .team-member-card__bio-toggle {
    display: none;
  }
}

/* Sept 2026 (ITBuilder_About_D01.pdf "Senior team" / "Service delivery
   team"): a second, static-grid layout for this module — light bordered
   cards with a square photo, wrapping to as many rows as needed, no
   prev/next arrows. Scoped entirely under .team-member-card--grid so the
   Homepage's carousel (module.layout left unset/"carousel") is completely
   unaffected. --team-columns-desktop/--team-columns-tablet are published
   inline by module.html from columns_desktop/columns_tablet, same pattern
   as capability-grid.module's own column-count custom properties. */

.team-member-card--grid .team-member-card__prev,
.team-member-card--grid .team-member-card__next {
  display: none;
}

.team-member-card--grid .team-member-card__carousel {
  display: block;
}

.team-member-card--grid .team-member-card__list {
  display: grid;
  gap: var(--space-5, 32px);
  grid-template-columns: 1fr;
  overflow: visible;
  scroll-snap-type: none;
}

@media (min-width: 600px) {
  .team-member-card--grid .team-member-card__list {
    grid-template-columns: repeat(var(--team-columns-tablet, 2), 1fr);
  }
}

@media (min-width: 1024px) {
  .team-member-card--grid .team-member-card__list {
    grid-template-columns: repeat(var(--team-columns-desktop, 3), 1fr);
  }
}

.team-member-card--grid .team-member-card__item {
  background-color: #fff;
  border: 1px solid rgba(25, 39, 50, 0.15);
  border-radius: 0;
  color: var(--theme-primary-color, #192732);
  flex: initial;
  padding: 0 0 var(--space-4, 24px);
}

.team-member-card--grid .team-member-card__photo {
  aspect-ratio: 4 / 5;
  border-radius: 0;
  margin: 0 0 var(--space-4, 24px);
  object-fit: cover;
  width: 100%;
}

.team-member-card--grid .team-member-card__name,
.team-member-card--grid .team-member-card__role,
.team-member-card--grid .team-member-card__bio,
.team-member-card--grid .team-member-card__bio-toggle,
.team-member-card--grid .team-member-card__contacts {
  padding-left: var(--space-4, 24px);
  padding-right: var(--space-4, 24px);
}

.team-member-card--grid .team-member-card__name {
  color: var(--color-pillar-current, var(--theme-accent-color));
}

.team-member-card--grid .team-member-card__role {
  color: var(--theme-primary-color, #192732);
  font-weight: 700;
  opacity: 1;
}

.team-member-card--grid .team-member-card__bio {
  color: rgba(25, 39, 50, 0.75);
}

.team-member-card--grid .team-member-card__bio-toggle {
  color: var(--theme-primary-color, #192732);
}

.team-member-card--grid .team-member-card__contacts a {
  color: var(--theme-primary-color, #192732);
}

/* Oct 2026: optional background photo behind the whole section. The photo
   and its navy overlay are absolutely-positioned layers behind
   .team-member-card__inner (z-index 1); the overlay's strength is the
   unitless --overlay-intensity (0-100) set inline by module.html. Heading
   and intro flip to white for contrast; the cards keep their own colours. */

.team-member-card--has-photo {
  background-color: var(--theme-primary-color, #192732);
  overflow: hidden;
  position: relative;
}

.team-member-card__bg {
  background-position: center;
  background-size: cover;
  inset: 0;
  position: absolute;
  z-index: 0;
}

.team-member-card__bg-overlay {
  background: rgba(25, 39, 50, calc(var(--overlay-intensity, 70) / 100));
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 0;
}

.team-member-card--has-photo .team-member-card__inner {
  position: relative;
  z-index: 1;
}

.team-member-card--has-photo .team-member-card__heading,
.team-member-card--has-photo .team-member-card__intro,
.team-member-card--has-photo .team-member-card__intro p {
  color: #fff;
}

/* Oct 2026: round "porthole" photo for the grid layout (module.photo_style,
   default "porthole"), same 96px circle as the carousel cards and the
   Insights authors, instead of the large 4:5 portrait. Cards keep their
   light bordered style but centre their content to suit the round photo. */

.team-member-card--porthole .team-member-card__item {
  padding-top: var(--space-5, 32px);
  text-align: center;
}

.team-member-card--porthole .team-member-card__photo {
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-pill, 999px);
  display: block;
  margin: 0 auto var(--space-3, 16px);
  width: 96px;
}

.team-member-card--porthole .team-member-card__contacts {
  justify-content: center;
}