/* ======================================================================
   Leadership page (pages/leadership.html). Loaded after style.css and only on this page.
   Sizes and spacing measured from the Leadership Team page on cadence.com at 1920px; colours follow the PulseWave theme.
   ====================================================================== */
[data-page="leadership"] { --font-head: var(--font-nav); --font-body: var(--font-nav); }
[data-page="leadership"] main { font-family: var(--font-nav); color: var(--nav-ink); }

/* ---------- hero: 560px, centred 627px text block ---------- */
.ld-hero { position: relative; display: flex; align-items: center; justify-content: center; min-height: 560px; padding: 40px var(--gutter);
  overflow: hidden; background: var(--navy); color: #fff; text-align: center; z-index: 1; margin-bottom: -1px; }
.ld-hero__art { position: absolute; inset: 0; background: url("../img/photos/team.jpg") center/cover no-repeat; }
.ld-hero__art::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(120deg, rgba(12, 17, 29, .88) 0%, color-mix(in srgb, var(--accent) 55%, rgba(12, 17, 29, .6)) 100%); }
.ld-hero__content { position: relative; width: min(627px, 100%); }
.ld-hero__title { margin: 0 0 15px; font: 500 54px/81px var(--font-nav); letter-spacing: -1.08px; text-transform: uppercase; color: #fff; }
.ld-hero__sub { margin: 0; font: 300 18px/27px var(--font-nav); letter-spacing: 0.72px; color: #fff; }

/* ---------- grey band with the two groups (1140px column) ---------- */
.ld-wrap { background: #f5f5f5; }
.ld-group { width: min(1140px, calc(100% - 2 * var(--gutter))); margin: 0 auto; padding: 90px 0 54px; }
.ld-h2 { margin: 0 0 90px; text-align: center; font: 300 41.4px/49.68px var(--font-nav); letter-spacing: -0.828px; color: #333; }
.ld-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 360px)); justify-content: center; gap: 54px 30px; }

/* card: 246px round photo with a thin gradient ring, overlapping a 360x354 white card by 92px */
.ld-card { position: relative; padding-top: 154px; }
.ld-card__photo { position: absolute; top: 0; left: 50%; z-index: 2; width: 246px; height: 246px; margin-left: -123px; padding: 3.6px;
  border-radius: 50%; background: var(--grad); }
.ld-card__photo img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: center 15%; background: #fff; }
.ld-card__body { display: flex; flex-direction: column; align-items: center; height: 354px; padding: 90px 18px 18px; text-align: center;
  background: #fff; border-radius: 5px; box-shadow: 0 4px 4px rgba(0, 0, 0, .25); transition: box-shadow .2s; }
.ld-card__name { margin: auto 0 24px; padding-top: 8px; font: 400 32.4px/45.36px var(--font-nav); letter-spacing: -0.648px; color: var(--accent); }
.ld-card__role { margin: 0 0 auto; font: 300 16.2px/22.68px var(--font-nav); text-transform: uppercase; color: #333; }
.ld-card__link { display: inline-flex; align-items: center; height: 35px; font: 400 16.2px/25.92px var(--font-nav); text-transform: uppercase; color: var(--accent); transition: color .2s; }
.ld-card__link .icon { position: relative; left: 0; margin-left: 4px; font-size: 16px; stroke-width: 2.2; transform: rotate(-90deg); transition: left .2s linear; }
.ld-card__body:hover, .ld-card__body:focus-visible { box-shadow: 0 10px 12px rgba(34, 34, 34, .25); }
.ld-card__body:hover .ld-card__link { color: color-mix(in srgb, var(--accent) 45%, var(--navy)); }
.ld-card__body:hover .ld-card__link .icon { left: 5px; }

@media (max-width: 1100px) {
  .ld-cards { grid-template-columns: repeat(2, minmax(0, 360px)); }
}
@media (max-width: 760px) {
  .ld-hero { min-height: 420px; }
  .ld-hero__title { font-size: 36px; line-height: 48px; }
  .ld-group { padding: 56px 0 40px; }
  .ld-h2 { margin-bottom: 48px; font-size: 32px; line-height: 40px; }
  .ld-cards { grid-template-columns: minmax(0, 360px); }
}
/* title on one line (like Cadence's), subtitle kept to the 627px column */
@media (min-width: 761px) {
  .ld-hero__content { width: auto; }
  .ld-hero__title { white-space: nowrap; }
  .ld-hero__sub { max-width: 627px; margin-inline: auto; }
}

/* group dividers and spacing, as on cadence.com: cards -> 54px -> 2px grey line (1170px wide) -> 90px -> next heading;
   54px between the last line and the footer */
.ld-wrap { padding-bottom: 54px; }
.ld-group { width: min(1170px, calc(100% - 2 * var(--gutter))); padding: 90px 0 54px; border-bottom: 2px solid #d4d4d3; }

/* hover: the name darkens along with the link */
.ld-card__name { transition: color .2s; }
.ld-card__body:hover .ld-card__name, .ld-card__body:focus-visible .ld-card__name { color: color-mix(in srgb, var(--accent) 45%, var(--navy)); }

@media (max-width: 760px) {
  .ld-group { padding: 56px 0 40px; }
  .ld-wrap { padding-bottom: 40px; }
}

/* Cadence: each card row keeps 54px below it plus the group's 54px, so 108px from the last cards to the grey line;
   the last line sits directly on the footer (no extra gap) */
.ld-group { padding-bottom: 108px; }
.ld-wrap { padding-bottom: 0; }
@media (max-width: 760px) { .ld-group { padding-bottom: 64px; } }