/* ==========================================================================
   Public Sector Academy page (/academy/)
   Scoped under .academy-page; mirrors the sponsorship-page CSS variable
   pattern (see cms/static/cms/css/CLAUDE.md) but uses orange-led palette
   to differentiate Academy from the blue Sponsorship page.
   ========================================================================== */

/* Palette mirrors the Sponsorship page (cms/static/cms/css/sponsorship.css)
   so the Academy reads as a sibling marketing surface. Blue is primary;
   lilac is the highlight; orange survives only as a soft eyebrow accent. */
.academy-page {
  --academy-blue: #005fbf;
  --academy-blue-hero: #1c7dff;
  --academy-blue-deep: #003e72;
  --academy-midnight: #020b25;
  --academy-navy: #001D32;
  --academy-navy-soft: #0b2d66;
  --academy-slate: #0e2238;
  --academy-ink: #0e2238;
  /* Darkened from #6c7d92 to clear WCAG AA (4.5:1) for body copy on both #fff
     and the #f2f7fb tinted sections. */
  --academy-muted: #566476;
  --academy-line: #e0e6ed;
  --academy-bg: #ffffff;
  --academy-bg-alt: #f2f7fb;
  --academy-orange: #ff7a21;
  /* AA-safe orange for text on light surfaces (eyebrows). 5.1:1 on white,
     4.7:1 on ice. The bright --academy-orange stays for decorative fills only. */
  --academy-orange-ink: #C73F00;
  --academy-lilac: #c188ff;
  --academy-cta-bar-height: 64px;
}

/* ---------------- Sticky CTA bar ----------------
   Uses position:sticky so the bar sits below the global navbar in normal
   flow, then pins to the viewport top once the user scrolls past it. Don't
   switch to position:fixed; the global navbar isn't sticky itself, and a
   fixed bar would overlay it.

   Light "ice" background (matches sponsorship's --psn-ice) with a subtle
   bottom border to break cleanly from the dark navbar above and the dark
   hero below — they're both #001D32, so the bar reads as a distinct
   navigation surface sandwiched between them. */
.academy-cta-bar {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: var(--academy-bg-alt);
  color: var(--academy-ink);
  border-bottom: 1px solid var(--academy-line);
  height: var(--academy-cta-bar-height);
  display: flex;
  align-items: center;
}

.academy-cta-bar__inner {
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
}

/* Scope under .academy-page so these win over global .btn rules in style.css,
   which loads AFTER our extra_styles block in core/_base.html. */
.academy-page .academy-cta-bar__primary,
.academy-page .academy-cta-bar__secondary {
  font-weight: 600;
  border-radius: 0.6rem;
  padding: 0.55rem 1.4rem;
  font-size: 0.95rem;
  white-space: nowrap;
  border: 2px solid transparent;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.academy-page .academy-cta-bar__primary {
  background: var(--academy-blue);
  color: #fff;
  border-color: var(--academy-blue);
}
.academy-page .academy-cta-bar__primary:hover,
.academy-page .academy-cta-bar__primary:focus {
  background: var(--academy-blue-deep);
  border-color: var(--academy-blue-deep);
  color: #fff;
}

.academy-page .academy-cta-bar__secondary {
  background: transparent;
  color: var(--academy-ink);
  border-color: var(--academy-ink);
}
.academy-page .academy-cta-bar__secondary:hover,
.academy-page .academy-cta-bar__secondary:focus {
  background: var(--academy-ink);
  color: #fff;
  border-color: var(--academy-ink);
}

@media (max-width: 575px) {
  .academy-cta-bar {
    height: auto;
    padding: 0.5rem 0;
  }
  .academy-cta-bar__inner {
    justify-content: center;
  }
  .academy-cta-bar__primary,
  .academy-cta-bar__secondary {
    flex: 1 1 auto;
    text-align: center;
    padding: 0.55rem 0.9rem;
    font-size: 0.85rem;
  }
}

/* ---------------- Section primitives ---------------- */
.academy-section__eyebrow {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.85rem;
  color: var(--academy-orange-ink);
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.academy-section__title {
  font-weight: 700;
  color: var(--academy-ink);
  font-size: clamp(1.75rem, 1vw + 1.5rem, 2.5rem);
  line-height: 1.15;
}
.academy-section__subtitle {
  color: var(--academy-muted);
}

/* Keyboard focus rings. Hover is colour-only (flat-by-default), so keyboard
   users get an explicit ring instead of the removed hover lift. */
.academy-page .academy-type-card:focus-visible,
.academy-page .academy-training-card:focus-visible,
.academy-page .academy-insight-card:focus-visible {
  outline: 2px solid var(--academy-blue);
  outline-offset: 3px;
}
.academy-page .academy-categories .academy-category-card {
  display: block;
}
.academy-page .academy-categories .academy-category-card:focus-visible {
  outline: 2px solid var(--academy-blue);
  outline-offset: 3px;
  border-radius: 12px;
}

/* ---------------- Hero ---------------- */
.academy-hero {
  background: var(--academy-navy);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.academy-hero__container {
  padding-block: clamp(4rem, 7vw, 7rem);
  position: relative;
  z-index: 1;
}
.academy-hero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.academy-hero__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: 1.1rem;
}
.academy-hero__title {
  /* Match the DESIGN.md display scale and the sponsorship hero: Inter 700, not the
     Bootstrap-default 500 the bare h1 was inheriting (the visible inconsistency). */
  font-size: clamp(2.25rem, 3vw + 1.5rem, 3.9rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin-bottom: 1.5rem;
  color: #fff;
}
.academy-hero__highlight {
  color: var(--academy-lilac);
}
.academy-hero__lead {
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.86);
  max-width: 36rem;
  margin-bottom: 2.25rem;
}
.academy-page .academy-hero__cta .btn {
  min-width: 190px;
}
.academy-page .academy-hero__btn {
  border-radius: 0.75rem;
  padding: 0.85rem 2.1rem;
  font-size: 1rem;
  font-weight: 600;
}
.academy-page .academy-hero__btn-primary {
  background: var(--academy-blue);
  border: 2px solid var(--academy-blue);
  color: #fff;
  /* Background uses --academy-blue (#005fbf, 6.2:1 vs white) for AA; the lighter
     --academy-blue-hero only reached 3.9:1. The soft shadow is the page's single
     sanctioned button-shadow (the hero anchor CTA); everything else stays flat. */
  box-shadow: 0 10px 24px rgba(0, 95, 191, 0.22);
}
.academy-page .academy-hero__btn-primary:hover,
.academy-page .academy-hero__btn-primary:focus {
  background: var(--academy-blue-deep);
  border-color: var(--academy-blue-deep);
  color: #fff;
}
.academy-page .academy-hero__btn-outline {
  border: 2px solid rgba(255, 255, 255, 0.85);
  color: #fff;
  background: transparent;
}
.academy-page .academy-hero__btn-outline:hover,
.academy-page .academy-hero__btn-outline:focus {
  background: #fff;
  color: var(--academy-navy);
  border-color: #fff;
}
.academy-hero__media {
  position: relative;
  max-width: 540px;
  margin-left: auto;
}
.academy-hero__media-backdrop {
  position: absolute;
  inset: -55px 0 -70px 60px;
  background: linear-gradient(140deg, rgba(5, 40, 70, 0.85), rgba(24, 76, 117, 0.35));
  border-radius: 48px;
  z-index: 0;
}
.academy-hero__image {
  position: relative;
  display: block;
  width: 100%;
  border-radius: 32px;
  border: 6px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35);
}
.academy-hero__image--placeholder {
  aspect-ratio: 11 / 8;
  background: rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.5rem;
  color: rgba(255, 255, 255, 0.55);
  font-size: 1rem;
}
.academy-hero__image--placeholder i {
  font-size: 3rem;
}

@media (max-width: 991.98px) {
  .academy-hero__media {
    max-width: 100%;
  }
  .academy-hero__media-backdrop {
    inset: -30px 0 -40px 30px;
  }
}

/* ---------------- About ---------------- */
.academy-about {
  background: var(--academy-bg);
}
.academy-about__lead {
  font-size: 1.2rem;
  color: var(--academy-ink);
  line-height: 1.5;
  font-weight: 500;
  max-width: 58ch;
  margin-inline: auto;
}
.academy-about__body {
  font-size: 1.02rem;
  color: var(--academy-muted);
  line-height: 1.65;
  max-width: 64ch;
  margin-inline: auto;
}

/* ---------------- Stats ---------------- */
.academy-stats {
  background: var(--academy-bg-alt);
}
.academy-stat {
  padding: 1rem 1.25rem;
  background: transparent;
}
.academy-stat__figure {
  font-size: clamp(3rem, 3.5vw + 2rem, 4.5rem);
  font-weight: 700;
  color: var(--academy-navy-soft);
  line-height: 1;
  margin-bottom: 0.75rem;
  display: flex;
  align-items: baseline;
  gap: 0.1em;
}
.academy-stat__unit {
  font-size: 0.6em;
  font-weight: 600;
  color: var(--academy-navy-soft);
}
.academy-stat__prefix {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--academy-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.35rem;
}
.academy-stat__label {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--academy-ink);
  margin-bottom: 0.25rem;
}
.academy-stat__sublabel {
  font-size: 0.85rem;
  color: var(--academy-muted);
}

/* ---------------- Type cards ---------------- */
.academy-types {
  background: var(--academy-bg);
}
.academy-type-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--academy-line);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: border-color 0.15s ease;
}
.academy-type-card:hover {
  border-color: var(--academy-blue);
  color: inherit;
}
.academy-type-card__image {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--academy-bg-alt);
}
.academy-type-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.academy-type-card__body {
  padding: 1.5rem 1.5rem 1.75rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.academy-type-card__title {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--academy-ink);
  margin-bottom: 0.75rem;
}
.academy-type-card__copy {
  color: var(--academy-muted);
  margin-bottom: 1.25rem;
  flex-grow: 1;
  line-height: 1.5;
}
.academy-type-card__link {
  font-weight: 600;
  color: var(--academy-blue);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.academy-type-card:hover .academy-type-card__link {
  color: var(--academy-blue-deep);
}

/* ---------------- Upcoming trainings ---------------- */
.academy-upcoming {
  background: var(--academy-bg-alt);
}
.academy-training-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border-radius: 12px;
  border: 1px solid var(--academy-line);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease;
}
.academy-training-card:hover {
  border-color: var(--academy-blue);
  color: inherit;
}
.academy-card-header {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--academy-bg-alt);
}
.academy-thumbnail {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.academy-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--academy-muted);
  background: var(--academy-bg-alt);
  font-size: 2rem;
}
.academy-badge-overlay {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
}
.academy-badge {
  display: inline-block;
  padding: 0.25rem 0.6rem;
  border-radius: 4px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #fff;
  background: var(--academy-blue);
}
.academy-badge-online { background: var(--academy-blue); }
.academy-badge-in-person { background: var(--academy-navy-soft); }
.academy-badge-in-house { background: var(--academy-orange); }

.academy-card-body {
  padding: 1rem 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.academy-card-title {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--academy-ink);
  margin-bottom: 0.5rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.academy-category {
  font-size: 0.8rem;
  color: var(--academy-muted);
  margin-bottom: 0.75rem;
  /* Reserve the slot so cards with and without a category keep an even grid. */
  min-height: 1.15rem;
}
.academy-meta-wrapper {
  margin-top: auto;
}
.academy-date-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.academy-date-badge {
  font-size: 0.78rem;
  color: var(--academy-ink);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.academy-flags {
  display: flex;
  gap: 0.25rem;
  align-items: center;
}
.academy-flags img {
  width: 22px;
  height: 16px;
  object-fit: cover;
  border-radius: 2px;
}
.academy-flags .global-icon {
  color: var(--academy-blue);
  font-size: 1rem;
}

/* ---------------- Insights ---------------- */
.academy-insights {
  background: var(--academy-bg);
}
.academy-insight-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border-radius: 14px;
  border: 1px solid var(--academy-line);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease;
}
.academy-insight-card:hover {
  border-color: var(--academy-blue);
  color: inherit;
}
.academy-insight-card__image {
  aspect-ratio: 16 / 9;
  background-color: var(--academy-bg-alt);
  overflow: hidden;
}
.academy-insight-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.academy-insight-card__body {
  padding: 1.5rem;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}
.academy-insight-card__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.78rem;
  color: var(--academy-orange-ink);
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.academy-insight-card__title {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--academy-ink);
  line-height: 1.3;
  margin-bottom: 0.5rem;
}
.academy-insight-card__date {
  font-size: 0.82rem;
  color: var(--academy-muted);
  margin-bottom: 0.75rem;
}
.academy-insight-card__synopsis {
  color: var(--academy-muted);
  font-size: 0.95rem;
  line-height: 1.55;
  margin-bottom: 0;
}

/* ---------------- Categories grid (was learn-section) ---------------- */
.academy-categories {
  background: var(--academy-bg-alt);
}
.academy-categories .category-card {
  background: #fff;
  padding: 25px 15px;
  border-radius: 12px;
  height: 100%;
  transition: border-color 0.15s ease, background-color 0.15s ease;
  cursor: pointer;
  border: 2px solid var(--academy-line);
}
.academy-categories .category-card:hover {
  border-color: var(--academy-blue);
}
.academy-categories .category-card h3 {
  color: var(--academy-ink);
  font-weight: 600;
  font-size: 0.875rem;
  margin-top: 0.5rem;
}
.academy-categories .academy-category-icon {
  max-width: 60px;
  height: auto;
}

/* ---------------- Testimonials ---------------- */
.academy-testimonials {
  background: linear-gradient(180deg, var(--academy-bg) 0%, var(--academy-bg-alt) 100%);
}
.academy-testimonial-slider {
  display: flex;
  gap: 2rem;
  max-width: 820px;
  margin: 0 auto;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.academy-testimonial-slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  padding: 0 1rem;
}
.academy-testimonial {
  margin: 0;
  text-align: center;
  position: relative;
}
.academy-testimonial__mark {
  font-size: 2.5rem;
  color: var(--academy-blue);
  display: inline-block;
  margin-bottom: 0.5rem;
}
.academy-testimonial__quote {
  font-size: clamp(1.1rem, 0.5vw + 1rem, 1.4rem);
  line-height: 1.55;
  color: var(--academy-ink);
  font-weight: 500;
  margin-bottom: 1.75rem;
  font-style: italic;
}
.academy-testimonial__attribution {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}
.academy-testimonial__photo {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.academy-testimonial__name {
  font-weight: 600;
  color: var(--academy-ink);
  text-align: left;
}
.academy-testimonial__role {
  font-size: 0.88rem;
  color: var(--academy-muted);
  text-align: left;
}

/* Testimonials use a native CSS scroll-snap track (no JS carousel). On mobile the
   slides are full-width and snap; multiple testimonials become a horizontal swipe. */
@media (max-width: 575.98px) {
  .academy-testimonial-slide {
    padding: 0 0.5rem;
  }
}

/* ---------------- Closing CTA ---------------- */
.academy-final-cta {
  background: var(--academy-navy);
  color: #fff;
  text-align: center;
  padding-block: clamp(3.5rem, 6vw, 6rem);
  /* Hairline seam so the closing band reads as distinct from the same-navy footer. */
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.academy-final-cta__inner {
  max-width: 720px;
  margin-inline: auto;
}
.academy-final-cta__title {
  font-size: clamp(1.9rem, 2vw + 1.2rem, 2.75rem);
  font-weight: 700;
  color: #fff;
  line-height: 1.15;
  margin-bottom: 1rem;
  text-wrap: balance;
}
.academy-final-cta__lead {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 2rem;
}