/*
Theme Name: (Child) Elysian Theme
Template: elysianaircraft
*/

/* ============================================================
   Careers page — alternating section backgrounds.
   The white/gradient rhythm is assigned in PHP (page-career.php)
   across only the VISIBLE sections, so empty/absent blocks never
   break the alternation. CSS just paints the two states. This
   stylesheet loads after px-style, so these rules win the cascade.
   ============================================================ */

/* Baseline: every Careers section is white. Also overrides career-role's
   own .bg-gradient class when it lands on a white slot. */
.career > section.section {
  background: #fff;
}

/* Gradient slot — class added server-side to every other visible section. */
.career > section.section.section--alt-gradient {
  background: linear-gradient(181deg, rgba(211, 217, 223, 0) 0.49%, rgba(211, 217, 223, 0.3) 93.84%), #fff;
}

/* ============================================================
   Careers video-intro — solid white play button for visibility.
   The theme default is a faint translucent circle; on a busy
   photo it disappears, so make it a solid white disc with a
   dark navy play icon. Scoped to .career so the About page is
   left as-is.
   ============================================================ */
.career .btn.video-button {
  background: #fff;
  border-color: #fff;
  backdrop-filter: none;
  box-shadow: 0 4px 20px rgba(21, 24, 26, 0.25);
  color: #15181a; /* drives the play icon via currentColor */
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.career .btn.video-button svg {
  color: #15181a;
}

.career .btn.video-button:hover {
  background: #fff;
  transform: translate(-50%, -50%) scale(1.06);
  box-shadow: 0 6px 26px rgba(21, 24, 26, 0.35);
}

/* ============================================================
   Testimonials / supporters block — keep member names + the
   separator above them aligned across cards.

   Root cause: the quote is clamped to 4 lines and the attribution
   block (.testimonial-card-bottom) is pinned to the bottom of the
   card with `margin-top: auto`, so it grows UPWARD. A job that
   wraps to 3 lines instead of 2 makes that block taller, pushing
   its top border (the separator) — and the name — up. So cards
   with different job lengths show the divider and name at
   different heights (e.g. Jolanda's 3-line job vs Joris's 2).

   Fix (desktop only — below 992px the theme stacks the card into
   a column, so cross-card alignment doesn't apply):
   1. Reserve a fixed height for the job text (3 lines: line-height
      1.5 x 3 = 4.5em, in em so it tracks the responsive font size)
      so every attribution block is the same height -> separators
      and names line up regardless of how many lines the job wraps
      to. NOTE: bump this if any supporter's job runs past 3 lines.
   2. Top-align the avatar+text row so the name sits at a fixed
      baseline, then re-center the avatar on the name LINE alone
      (name 2rem x 1.5 = 3rem, avatar 6rem -> nudge up half the
      3rem difference = 1.5rem).
   ============================================================ */
@media (min-width: 992px) {
  .testimonial-card-bottom-left {
    align-items: flex-start;
  }
  .testimonial-card-bottom .testimonial-job {
    min-height: 4.5em;
  }
  .testimonial-card-bottom .testimonial-img {
    margin-top: -1.5rem;
  }
}

/* ============================================================
   About page — Advisory Board member names.
   Markup tags the name with `.title-navy` (single dash), but the
   theme only defines `.title--navy` (double dash), so the name
   never gets colored and falls back to black. Re-apply the navy
   so names match the job-title text below them.
   ============================================================ */
.advisory .title.title-navy {
  color: #00284b;
}