/* Team styles: Team Member Grid (pattern swiss/team-grid) and Single Team Member (pattern swiss/single-team-member).
 * Everything team-related lives in this file. Tokens come from the active KOOP Graphite & Signal design.
 * Grid styles are scoped to .team-member; name, credentials and job title are shared with .single-team_member.
 *
 * Structure: base styles first, then accessibility, then max-width overrides (widest first).
 * The grid column counts stay as "up to" queries because the desktop column count is set
 * on the Post Template block, not in this file. */

/* ==============================================================================
   TEAM GRID
   ============================================================================== */

.team-member {
  padding-inline: clamp(1rem, 4vw, 2rem);
  margin-block: 0;
}

.team-member .wp-block-post-template.is-layout-grid {
  gap: clamp(2.5rem, 2rem + 2vw, 4rem) 2rem;
}

/* Equal-height team grids: keep content-driven sizing without fixed heights.
 * :has() scopes this to grids containing a team member card, including
 * saved pattern instances and the block editor preview.
 */
.wp-block-post-template.is-layout-grid:has(.team-member-card-block) {
  grid-auto-rows: 1fr;
  align-items: stretch;
}

.wp-block-post-template.is-layout-grid:has(.team-member-card-block) > li {
  display: flex;
  min-width: 0;
}

.wp-block-post-template.is-layout-grid:has(.team-member-card-block)
  > li
  > .wp-block-group:has(.team-member-card-block) {
  flex: 1;
  min-width: 0;
  box-sizing: border-box;
}

/* Members: a hairline rule and space, no boxes */
.team-member .wp-block-post-template > li {
  border-top: 1px solid var(--wp--preset--color--light-gray);
  padding-top: 1.5rem;
  transition: border-color 0.25s ease;
}

.team-member .wp-block-post-template > li:hover,
.team-member .wp-block-post-template > li:focus-within {
  border-top-color: var(--wp--preset--color--charcoal);
}

/* Portraits: one ratio, natural color */
.team-member .team-member-image {
  margin: 0 0 0.65rem;
  overflow: hidden;
  border-radius: 2px;
}

.team-member .team-member-image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center top;
  border-radius: 2px;
  transition: transform 0.4s ease;
}

/* Very slight zoom on hover */
.team-member .wp-block-post-template > li:hover .team-member-image img,
.team-member .wp-block-post-template > li:focus-within .team-member-image img {
  transform: scale(1.05);
}

/* Bio / LinkedIn: spacing only; the buttons keep the theme small-btn style */
.team-member .team-bio-linkedin {
  margin-top: 1.25rem;
  gap: 0.5rem;
}

/* Team buttons (grid and single member) keep the navy background; other small buttons use
   primary (small-button.css). :not(:hover) leaves the shared transparent hover state intact. */
.team-member .is-style-small-btn .wp-block-button__link:not(:hover),
.single-team_member .is-style-small-btn .wp-block-button__link:not(:hover) {
  background-color: var(--wp--preset--color--contrast);
  border-color: var(--wp--preset--color--contrast);
}

/* ==============================================================================
   NAME, CREDENTIALS AND JOB TITLE (grid and single team member)
   ============================================================================== */

.team-member h3.team-member-name,
.single-team_member h3.team-member-name {
  font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.75rem);
  font-weight: var(--wp--custom--font-weight--bold);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0 0 0.4rem !important;
}

/* Grid names: size and colour sit on the heading, not the link, because the link is removed
   when a member's bio page is off (inc/team-blocks.php). Linked and unlinked names match. */
.team-member h3.team-member-name {
  font-size: var(--wp--preset--font-size--medium-large);
  color: var(--wp--preset--color--charcoal);
}

.team-member h3.team-member-name a {
  border-bottom: none !important;
  text-decoration: none !important;
  color: inherit;
}

.team-member .credentials,
.single-team_member .credentials {
  display: block;
  color: var(--wp--preset--color--dark-gray);
  font-size: 0.95rem;
  font-weight: var(--wp--custom--font-weight--light);
  line-height: 1.5;
  margin-top: 0;
}

.team-member .job-title,
.single-team_member .job-title {
  color: var(--wp--preset--color--dark-gray);
  font-size: 1.1rem;
  font-weight: var(--wp--custom--font-weight--light);
  line-height: 1.4;
  margin-top: 12px !important;
  margin-bottom: 10px !important;
  /* 1px rule above the job title, exactly as wide as the job title */
  width: fit-content;
  max-width: 100%;
  border-top: 1px solid var(--wp--preset--color--light-gray);
  padding-top: 0.2rem;
  transition: border-color 0.25s ease;
}

.team-member .wp-block-post-template > li:hover .job-title,
.team-member .wp-block-post-template > li:focus-within .job-title,
.team-member .wp-block-post-template > li:hover .credentials,
.team-member .wp-block-post-template > li:focus-within .credentials {
  border-top-color: var(--wp--preset--color--charcoal);
  color: var(--wp--preset--color--charcoal);
}

/* ==============================================================================
   SINGLE TEAM MEMBER PAGE
   ============================================================================== */

.single.single-team_member header .header-transparent-centered {
  background-color: #001337 !important;
}

.single-team_member .wp-block-post-featured-image {
  max-width: 200px;
}

.single-team_member p.expertise {
  font-size: var(--wp--preset--font-size--small);
  color: var(--wp--preset--color--dark-gray);
  margin-top: 25px;
  margin-bottom: 15px;
  font-weight: var(--wp--custom--font-weight--regular);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.single-team_member p.expertise::before {
  content: "Expertise";
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--wp--preset--color--gray);
  font-weight: var(--wp--custom--font-weight--medium);
  color: var(--wp--preset--color--dark-gray);
  margin-bottom: 7px;
  padding-bottom: 2px;
  line-height: 1;
  display: inline-block;
  text-transform: uppercase;
  font-family: var(--wp--preset--font-family--secondary);
  font-size: var(--wp--preset--font-size--xxsmall);
}

/* ==============================================================================
   REDUCED MOTION
   ============================================================================== */

@media (prefers-reduced-motion: reduce) {
  .team-member .wp-block-post-template > li,
  .team-member .team-member-image img {
    transition: none;
  }

  .team-member .wp-block-post-template > li:hover .team-member-image img,
  .team-member
    .wp-block-post-template
    > li:focus-within
    .team-member-image
    img {
    transform: none;
  }
}

/* ==============================================================================
   MAX-WIDTH OVERRIDES (widest first)
   Grid: 4 across on desktop (Post Template block setting), 3 on tablet,
   2 on small screens, 1 on phones.
   ============================================================================== */

@media (max-width: 1024px) {
  .team-member .wp-block-post-template.is-layout-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Up to 781px: WordPress stacks columns below 782px. */
@media (max-width: 781px) {
  .team-member .wp-block-post-template.is-layout-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Drop the gap between the photo and the details once the columns stack.
   * !important overrides the 40px inline margin set on the block. */
  .single-team_member .team-member-details {
    margin-top: 0 !important;
  }
}

@media (max-width: 480px) {
  .team-member .wp-block-post-template.is-layout-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}