/* ==========================================================================
   Advocacy Updates — page-scoped styles
   Figma node 11194:6422. Spec: roadmap/phase-08-content-pages/artifacts/page-advocacy-updates-spec.md

   Reuses (no overrides here): page-banner (banners.css), .advice-service-card*
   (advice.css), .btn--* (buttons.css), .section-tagline (typography.css).
   New: wins section, submissions slider (native-scroll, paired with
   assets/js/advocacy-submissions.js), submissions archive.

   Desktop-first: mobile @media (max-width) blocks live AFTER desktop rules.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Block 4 — Section_Wins (Figma 11206:4429) — navy-lightest-50 band
   -------------------------------------------------------------------------- */
.advocacy-wins {
  padding: 112px 80px;                    /* Figma 11206:4429 padding 112 80 */
  background-color: var(--color-navy-lightest-50); /* Figma 11206:4429 rgba(230,231,233,0.5) */
}

.advocacy-wins__inner {
  max-width: 1280px;                      /* Figma 11206:4431 w1280 */
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 48px;                              /* Figma 11206:4430 Content Wrapper gap 48 (intro → cards) */
}

.advocacy-wins__intro {
  display: flex;
  flex-direction: row;                    /* Figma 11206:4431 row space-between */
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}

.advocacy-wins__heading {
  margin: 0;
  font-family: var(--font-family);
  font-weight: 400;                       /* Figma 11206:4435 Heading/H2 Roman */
  font-size: 44px;                        /* Figma 11206:4435 44px */
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--color-navy-darkest);       /* Figma 11206:4435 #03060C (base) */
}

.advocacy-wins__heading-accent {
  color: var(--color-tangerine);          /* Figma 11206:4435 "Latest" #FF6600 */
}

.advocacy-wins__intro > .btn {
  flex: 0 0 auto;                         /* keep CTA from shrinking */
}

.advocacy-wins__cards {
  display: flex;
  flex-direction: row;
  gap: 24px;                              /* Figma 11206:4440 row gap 24 */
}

.advocacy-wins__cards > .advice-service-card {
  flex: 1 1 0;                            /* 3 equal-width cards */
  min-width: 0;
}

.advocacy-wins .advice-service-card__body {
  gap: 18px;                              /* Figma EL-c1b6b792 body gap 18 (base advice is 12) */
}

.advocacy-wins__card-content-top {
  display: flex;
  flex-direction: column;
  gap: 12px;                              /* Figma EL-50ef8a26 Content Top gap 12 (icon-row → text) */
}

.advocacy-wins__card-top {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;                               /* Figma EL-235879b0 gap 8 (icon + tagline) */
}

.advocacy-wins__card-top img {
  width: 30px;                            /* Figma 30×30 govt icon */
  height: 30px;
  flex: 0 0 auto;
}

/* Tagline Small — 12px/700/ls0.04em/tangerine/uppercase (Figma 11206:4441). New text
   style (distinct from .section-tagline 16px); shared with Why Join — keep page-scoped
   until promoted to a typography.css utility. */
.advocacy-wins__tagline {
  margin: 0;
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-tangerine);          /* Figma 11206:4441 #FF6600 */
}

.advocacy-wins .advice-service-card__title {
  font-size: 20px;                        /* Figma 11206:4441 Heading/H6 20px (base advice card is 16) */
}

.advocacy-wins .btn--link {
  text-decoration: none;                  /* Figma 4179:8937 Link variant — no underline (base .btn--link underlines) */
  font-size: 14px;                        /* Figma 4179:8938 Text/Small/Bold 14px (base .btn is 16px) */
}

/* --------------------------------------------------------------------------
   Block 5 — Section_Submissions (Figma 11206:6401) — white
   -------------------------------------------------------------------------- */
.submissions {
  padding: 112px 80px;                    /* Figma 11206:6401 padding 112 80 */
  background-color: var(--color-white);   /* Figma 11206:6401 fill none → page white */
}

.submissions__inner {
  max-width: 1280px;                      /* Figma 11206:6403 w1280 */
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 48px;                              /* Figma 11206:6402 Content Wrapper gap 48 (intro H2 → parts) */
}

.submissions__heading {
  margin: 0;
  font-family: var(--font-family);
  font-weight: 400;                       /* Figma 11206:6407 Heading/H2 Roman */
  font-size: 44px;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.submissions__heading--tangerine {
  color: var(--color-tangerine);          /* Figma 11206:6407 "Advocacy " #FF6600 */
}

.submissions__heading--navy {
  color: var(--color-navy);               /* Figma 11206:6407 "submissions" #0B1628 */
}

.submissions__parts {
  display: flex;
  flex-direction: column;
  gap: 80px;                              /* Figma 11206:7170 gap 80 (slider → archive) */
}

/* 5a — Latest submissions slider (native-scroll, heading-row prev/next) */
.submissions-slider {
  display: flex;
  flex-direction: column;
  gap: 36px;                              /* Figma 11206:6572 gap 36 (heading-row → track) */
  min-width: 0;
}

.submissions-slider__heading-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}

.submissions-slider__heading {
  margin: 0;
  font-family: var(--font-family);
  font-weight: 400;                       /* Figma 11206:6571 Heading/H3 Roman */
  font-size: 36px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: #000;                            /* Figma 11206:6571 #000000 — untokenized one-off (distinct from archive H3 navy) */
}

.submissions-slider__controls {
  display: flex;
  flex-direction: row;
  gap: 12px;
  flex: 0 0 auto;
}

.submissions-slider__arrow {
  width: 33px;                            /* Figma 11206:6736 33.2×33.2 */
  height: 33px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-tangerine); /* Figma 11206:6737 stroke #FF6600 1px */
  border-radius: 0;                         /* Figma 11206:6737 cornerRadius none — square control */
  background-color: transparent;
  color: var(--color-tangerine);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.submissions-slider__arrow .material-symbols-outlined {
  font-size: 20px;
  line-height: 1;
}

.submissions-slider__arrow:hover:not(:disabled) {
  background-color: var(--color-tangerine);
  color: var(--color-white);
}

.submissions-slider__arrow:focus-visible {
  outline: 2px solid var(--color-tangerine);
  outline-offset: 2px;
}

.submissions-slider__arrow:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.submissions-slider__track {
  display: flex;
  flex-direction: row;
  gap: 24px;                              /* Figma 11206:6410 card gap 24 */
  margin: 0;
  padding: 0;
  list-style: none;
  min-width: 0;                           /* css-architecture.md — flex chain */
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.submissions-slider__track::-webkit-scrollbar {
  display: none;
}

.submissions-slider__slide {
  flex: 0 0 387px;                        /* ~3 cards + peek at 1280 (off-page bleed signal) */
  min-width: 0;
  scroll-snap-align: start;
  display: flex;
}

.submissions-slider__card {
  width: 100%;
}

.submissions-slider .advice-service-card__body {
  gap: 18px;                              /* Figma EL-946738ac body gap 18 (title → actions) */
}

.submissions-slider .advice-service-card__title {
  font-size: 20px;                        /* Figma 10503:9792 Heading/H6 20px */
}

.submissions-slider .btn--link {
  text-decoration: none;                  /* Figma 4179:8937 Link variant — no underline */
  font-size: 14px;                        /* Figma 4179:8938 Text/Small/Bold 14px (base .btn is 16px) */
}

/* 5b — Submissions archive list */
.submissions-archive {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 36px;                              /* Figma 11206:7130 — heading → list → CTA */
}

.submissions-archive__heading {
  margin: 0;
  font-family: var(--font-family);
  font-weight: 400;                       /* Figma 11206:7135 Heading/H3 Roman */
  font-size: 36px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-navy);               /* Figma 11206:7135 #0B1628 */
}

.submissions-archive__list {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0;                                 /* Figma 11206:7136 Contents gap none — rows flush, separated by border + 8px pad */
}

.submissions-archive__row {
  padding: 8px 0;                         /* Figma 11206:7137 row pad 8 0 */
  border-bottom: 1px solid var(--color-navy-lighter); /* Figma 11206:7136 #CED0D4 */
}

.submissions-archive__link {
  display: block;
  font-family: var(--font-family);
  font-weight: 400;                       /* Figma 11206:7136 Text/Regular/Normal */
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-navy);               /* Figma 11206:7136 #0B1628 */
  text-decoration: none;
}

.submissions-archive__link:hover {
  color: var(--color-tangerine);
}

.submissions-archive__cta.btn--link {
  text-decoration: none;                  /* Figma 10343:75217 Link/Tangerine — no underline */
}

.submissions__empty {
  margin: 0;
  font-family: var(--font-family);
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-navy);
}

/* ==========================================================================
   Mobile — @media (max-width) AFTER desktop (css-architecture.md)
   No Figma mobile frame for B3: derived per roadmap/mobile-derivation-catalog.md.
   ========================================================================== */

@media (max-width: 768px) {
  .advocacy-wins {
    padding: 50px 20px;                   /* derived — container cap */
  }

  .advocacy-wins__inner {
    gap: 32px;
  }

  .advocacy-wins__intro {
    flex-direction: column;               /* derived — space-between row stacks */
    align-items: flex-start;
    gap: 24px;
  }

  .advocacy-wins__heading {
    font-size: 32px;                      /* sitewide H2 mobile */
  }

  .advocacy-wins__cards {
    flex-direction: column;               /* derived — 3-col → 1-col, no carousel */
  }

  .advocacy-wins__cards > .advice-service-card {
    flex: 1 1 auto;
  }

  .submissions {
    padding: 50px 20px;                   /* derived — container cap */
  }

  .submissions__inner {
    gap: 32px;                            /* derived — intro → parts (mirrors .advocacy-wins__inner) */
  }

  .submissions__parts {
    gap: 48px;
  }

  .submissions__heading,
  .submissions-slider__heading,
  .submissions-archive__heading {
    font-size: 28px;                      /* derived — H2/H3 mobile step-down */
  }

  /* Slider: 1-per-view with a peek so it still reads as a slider (no carousel ban
     applies — this is a designer slider with controls). */
  .submissions-slider__slide {
    flex: 0 0 85%;
  }
}

@media (max-width: 402px) {
  .advocacy-wins {
    padding: 48px 16px;
  }

  .submissions {
    padding: 48px 16px;
  }
}