/*
 * About page principals.
 *
 * Flat and editorial. No card shadow, no gradient, no glassmorphism. The
 * hairline rule above each name is the only decoration, and it is gold, which
 * is the one gold element in this layout.
 */

.mscl-team {
  background: var(--msc-off-white);
  color: var(--msc-near-black);
  padding-block: var(--msc-section-y);
}

.mscl-team__inner {
  max-width: var(--msc-container);
  margin-inline: auto;
  padding-inline: var(--msc-gutter);
}

/* Eyebrow is red on light surfaces, gold on dark. This section is light. */
.mscl-team__eyebrow {
  font-family: var(--msc-font-body);
  font-size: var(--msc-size-caption);
  font-weight: 600;
  color: var(--msc-red);
  margin: 0 0 var(--msc-space-xs);
}

.mscl-team__heading {
  font-family: var(--msc-font-display);
  font-size: var(--msc-size-h2);
  font-weight: 400;
  line-height: var(--msc-leading-tight);
  margin: 0 0 var(--msc-space-3xl);
  max-width: 24ch;
}

/* Standfirst under the H2. Names the family relationship plainly, which is a
   trust signal for a brand with no track record under its own name. */
.mscl-team__intro {
  font-family: var(--msc-font-editorial);
  font-size: var(--msc-size-body-lg);
  line-height: var(--msc-leading-body);
  max-width: var(--msc-measure-narrow);
  margin: 0 0 var(--msc-space-3xl);
}

.mscl-team__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--msc-space-2xl);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Fixed row track: photo, name, relation, bio. The relation row keeps its
   height even when empty, so names and bios align across columns. Only applied
   while there is more than one column to align to: see the 40rem query. */
@media (min-width: 40.0625rem) {
  .mscl-team__item {
    display: grid;
    grid-template-rows: auto auto 1.25rem 1fr;
  }
}

.mscl-team__photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--msc-radius-card);
  /* Flat. The brief bans heavy shadows on cards. */
  border: 1px solid var(--msc-hairline-dark);
}

.mscl-team__name {
  font-family: var(--msc-font-body);
  font-size: var(--msc-size-h3);
  font-weight: 600;
  line-height: var(--msc-leading-snug);
  margin: var(--msc-space-lg) 0 var(--msc-space-xs);
  padding-block-start: var(--msc-space-md);
  border-block-start: 1px solid var(--msc-gold);
}

.mscl-team__bio {
  margin-block-start: var(--msc-space-md);
}

.mscl-team__bio p {
  font-size: var(--msc-size-body);
  line-height: var(--msc-leading-body);
  max-width: var(--msc-measure-narrow);
  margin: 0 0 var(--msc-space-md);
}

.mscl-team__bio p:last-child {
  margin-block-end: 0;
}

/* Two up, then one. The 3-col grid collapses before the text measure breaks. */
@media (max-width: 60rem) {
  .mscl-team__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--msc-space-xl);
  }
}

/* Fixed row track: photo, name, bio. Applied only while there is more than one
   column to align to: see the 40rem query below. */
@media (min-width: 40.0625rem) {
  .mscl-team__item {
    display: grid;
    grid-template-rows: auto auto 1fr;
  }
}

@media (max-width: 40rem) {
  .mscl-team__list {
    grid-template-columns: 1fr;
  }

  .mscl-team__photo {
    max-width: 20rem;
  }
}

/*
 * Hello Elementor ships an off-palette link colour (magenta) that leaks into
 * the site title and any unstyled link. The palette admits no magenta, so
 * neutralise it at document level until the Pro Theme Builder header replaces
 * this markup entirely.
 */
.site-title,
.site-title a {
  font-family: var(--msc-font-display);
  font-weight: 400;
  color: var(--msc-green-dark);
  text-decoration: none;
}

/* The global link colour lives in global.css, which sets it per surface.
   A blanket red rule here leaked onto the dark footer, where red on Dark Green
   fails contrast and red is reserved for CTAs. */