/* ==========================================================================
   Blog — templates/template-blog.php (/blog/), phase-04 Batch 6
   Figma frame 12739:18104, Section_Blog Body 12739:18114.
   Spec: roadmap/phase-04-home-and-nav/artifacts/page-blog-spec.md
   Cache: .tmp/figma-spec/page-blog-section-4-section-blog-body.md

   Page-scoped. The bases it builds on are global layers: .card (cards.css),
   .checkbox (controls.css), .form-input / .form-input-wrap (forms.css) and
   .btn--tiny.btn--secondary (buttons.css). The course-listing and Newsroom
   stylesheets draw the same widget shapes but are frozen, so the Blog carries
   its own blog-scoped copy rather than reusing their page classes.

   Desktop-first; mobile queries (<=1024 drawer, <=768 mobile) are at the end.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Section + intro
   -------------------------------------------------------------------------- */
.blog-body {
  padding: 112px 80px; /* Figma 12739:18114 pad T112 R80 B112 L80 */
  background-color: var(--color-white); /* Figma 12739:18114 fill #ffffff */
}

.blog-body__inner {
  display: flex;
  flex-direction: column;
  gap: 64px; /* Figma 12739:18114 gap 64 */
  max-width: 1280px; /* Figma 12760:19172 box_w_1280 */
  margin: 0 auto;
}

.blog-body__intro {
  display: flex;
  flex-direction: column;
  gap: 22px; /* Figma 12760:19173 gap 22 */
}

/* The heading runs on one line: its text node is 782 wide, a single 58px line that
   overflows the 648 frame it sits in and the 768 content box (QA 2026-09-24 Blog #1).
   Only the copy keeps the 768 cap. */
.blog-body__intro-heading {
  margin: 0;
  font-size: 48px; /* Figma 12760:19176 size 48 */
  line-height: 1.2; /* Figma 12760:19176 LH 57.6 */
  letter-spacing: -0.01em; /* Figma 12760:19176 LS -0.48 */
  font-weight: var(--font-weight-regular); /* Figma 12760:19176 Roman 400 */
  color: var(--color-tangerine); /* Figma 12760:19176 fill #ff6600 */
}

.blog-body__intro-copy {
  margin: 0;
  font-size: 16px; /* Figma 12760:19178 size 16 */
  line-height: 1.4; /* Figma 12760:19178 LH 22.4 */
  font-weight: var(--font-weight-bold); /* Figma 12760:19178 Bold 700 */
  color: var(--color-navy); /* Figma 12760:19178 fill #0b1628 */
  max-width: 768px; /* Figma 12760:19173 box_w_768 */
}

/* --------------------------------------------------------------------------
   Panel + results layout
   -------------------------------------------------------------------------- */
.blog-body__layout {
  display: flex;
  flex-direction: row; /* Figma 12739:18115 HORIZONTAL */
  align-items: flex-start; /* Figma 12739:18115 counter MIN */
  gap: 64px; /* Figma 12739:18115 gap 64 */
}

/* Mobile-only affordance; the panel is always open on desktop. */
.blog-body__filter-toggle {
  display: none;
}

.blog-body__filter-panel {
  flex: 0 0 321px; /* Figma 12759:18990 box_w_321 */
  padding: 24px; /* Figma 12759:18990 pad 24 */
  background-color: var(--color-navy-lightest-50); /* Figma 12759:18990 fill #e6e7e9 opacity 0.5 */
  border-radius: var(--radius-sm); /* Figma 12759:18990 cornerRadius 4 */
  /* Sticks while the results scroll (QA 2026-09-24 Blog #2); a panel taller than the
     viewport scrolls inside itself. No Figma scroll frame. */
  position: sticky;
  top: 24px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* base.css hides body's x-overflow, which makes body a scroll container and kills sticky;
   clip hides the same overflow without one. */
body.page-template-template-blog {
  overflow-x: clip;
}

.blog-body__filter-list {
  display: flex;
  flex-direction: column;
  gap: 24px; /* Figma 12759:18991 gap 24 */
  padding: 3px 1px; /* Figma 12759:18991 pad T3 R1 B3 L1 */
}

.blog-body__filter-group {
  display: flex;
  flex-direction: column;
  gap: 16px; /* Figma 12759:19027 gap 16, 12759:19043 gap 16 */
}

.blog-body__filter-heading {
  margin: 0;
  font-size: 16px; /* Figma 12759:19045 size 16 */
  line-height: 1.4; /* Figma 12759:19045 LH 22.4 */
  font-weight: var(--font-weight-bold); /* Figma 12759:19045 Bold 700 */
  color: var(--color-navy-darkest); /* Figma 12759:19045 fill #03060c */
}

.blog-body__filter-heading--tags {
  color: #000000; /* Figma 12759:19028 fill #000000 — untokenized */
}

.blog-body__checkbox-list {
  display: flex;
  flex-direction: column;
  gap: 12px; /* Figma 12759:19029 gap 12 */
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The magnifier commits the keyword (same interaction as the course listings,
   Pastel R7 #1). The shared .form-input-icon is pointer-events:none, so the
   button repeats its geometry instead. */
.blog-body__search-submit {
  position: absolute;
  top: 50%;
  right: 12px; /* Figma 12760:19137 pad R12 */
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px; /* Figma 12760:19138 box 24x24 */
  height: 24px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--color-navy); /* Figma I12760:19138;7044:32033 fill #0b1628 */
  cursor: pointer;
}

.blog-body__search-submit:hover {
  color: var(--color-tangerine);
}

.blog-body__search-submit:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.blog-body__filter-divider {
  width: 100%;
  margin: 0;
  border: 0;
  border-top: 1px solid var(--color-navy-lighter); /* Figma 12759:19042 stroke #ced0d4 */
}

.blog-body__filter-foot {
  display: flex;
  align-items: center; /* Figma 12759:19048 counter CENTER */
  min-height: 24px;
}

.blog-body__filter-results {
  flex: 1 1 auto; /* Figma 12759:19049 text node fills the row */
  font-size: 12px; /* Figma 12759:19049 size 12 */
  line-height: 1.3; /* Figma 12759:19049 LH 15.6 */
  color: var(--color-navy-light); /* Figma 12759:19049 fill #545b68 */
}

/* --------------------------------------------------------------------------
   Results column
   -------------------------------------------------------------------------- */
.blog-body__main {
  display: flex;
  flex-direction: column;
  gap: 36px; /* Figma 12739:18175 gap 36 (chips row -> grid) */
  flex: 1 1 auto;
  min-width: 0; /* flex child; the grid must be allowed to shrink */
}

.blog-body__results {
  display: flex;
  flex-direction: column;
  gap: 64px; /* Figma 12739:18168 gap 64 (grid -> pagination) */
}

[data-blog-results][aria-busy="true"] {
  opacity: 0.5;
  pointer-events: none;
}

.blog-body__error {
  margin: 0;
  padding: 16px;
  background-color: var(--color-neutral-lightest);
  border-left: 4px solid var(--color-tangerine);
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-navy-darkest);
}

.blog-body__error[hidden],
.blog-body__empty[hidden] {
  display: none;
}

.blog-body__empty {
  margin: 0;
  font-size: 18px;
  line-height: 1.5;
  color: var(--color-navy-light);
}

/* Empty containers must not hold a flex gap open. */
.blog-body__chips:empty,
.blog-body__pagination:empty {
  display: none;
}

/* --------------------------------------------------------------------------
   Toolbar — chips + Sort by. Figma 12760:19149
   -------------------------------------------------------------------------- */
.blog-body__toolbar {
  display: flex;
  flex-direction: row; /* Figma 12760:19149 layout HORIZONTAL */
  justify-content: space-between; /* Figma 12760:19149 primary SPACE_BETWEEN */
  align-items: center; /* Figma 12760:19149 counter CENTER */
  gap: 24px; /* Figma 12760:19149 gap 24 */
  min-height: 40px; /* Figma 12760:19149 box h 40 */
}

/* --------------------------------------------------------------------------
   Sort — the trigger is Figma 12760:19154 (Button, Style=Link). The open menu has
   no Figma node; its panel repeats the accepted course listings' menu
   (course-archive.css "Sort"), which is not a transcription either.
   -------------------------------------------------------------------------- */
.blog-body__sort {
  position: relative;
  flex: 0 0 auto;
  margin-left: auto; /* stays right when the chip list is empty and hidden */
}

.blog-body__sort-toggle {
  gap: 8px; /* Figma 12760:19154 gap 8 */
  padding: 0; /* Figma 12760:19154 pad 0 */
}

.blog-body__sort-toggle .btn__label {
  text-decoration: none; /* Figma I12760:19154;4179:8938 no textDecoration (spec); .btn--link underlines the label */
  font-size: 16px; /* Figma I12760:19154;4179:8938 size 16 */
  line-height: 1.5; /* Figma I12760:19154;4179:8938 LH 24 */
  font-weight: var(--font-weight-regular); /* Figma I12760:19154;4179:8938 weight 400 */
  color: var(--color-navy); /* Figma I12760:19154;4179:8938 fill #0b1628 */
}

.blog-body__sort-toggle .material-symbols-outlined {
  color: var(--color-navy-darkest); /* Figma I12760:19154;4179:8939;7044:24627 fill #03060c */
}

.blog-body__sort-toggle[aria-expanded="true"] .material-symbols-outlined {
  transform: rotate(180deg);
}

.blog-body__sort-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 2;
  min-width: 200px;
  margin: 0;
  padding: 8px 0;
  list-style: none;
  background-color: var(--color-white);
  border: 1px solid var(--color-navy-lightest);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
}

.blog-body__sort-menu[hidden] {
  display: none;
}

.blog-body__sort-menu li {
  padding: 8px 16px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-navy);
  cursor: pointer;
}

.blog-body__sort-menu li:hover,
.blog-body__sort-menu li:focus-visible,
.blog-body__sort-menu li[aria-selected="true"] {
  background-color: var(--color-navy-lightest-50);
}

.blog-body__sort-menu li:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

/* --------------------------------------------------------------------------
   Applied-filter chips — Figma 12760:19202 / 12760:19150
   -------------------------------------------------------------------------- */
.blog-body__chips {
  flex: 1 1 auto; /* Figma 12760:19202 sizingH FILL */
  min-width: 0;
  display: flex;
  flex-wrap: wrap; /* Figma 12760:19202 wrap WRAP */
  align-items: center; /* Figma 12760:19202 counter CENTER */
  gap: 16px; /* Figma 12760:19202 gap 16 rowGap 16 */
  margin: 0;
  padding: 0;
  list-style: none;
}

.blog-chip {
  display: inline-flex;
  align-items: center; /* Figma 12760:19150 counter CENTER */
  gap: 8px; /* Figma 12760:19150 gap 8 */
  padding: 8px 12px 8px 16px; /* Figma 12760:19150 pad T8 R12 B8 L16 */
  background-color: var(--color-neutral-lightest); /* Figma 12760:19150 fill #f2f2f2 */
}

.blog-chip__label {
  font-size: 16px; /* Figma 12760:19151 size 16 */
  line-height: 1.5; /* Figma 12760:19151 LH 24 */
  color: var(--color-navy-darkest); /* Figma 12760:19151 fill #03060c */
}

.blog-chip__clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 19px; /* Figma 12760:19152 box 19x19 */
  height: 19px;
  padding: 4px; /* Figma 12760:19152 pad 4 */
  margin-block: -2px 2px; /* optical: centres the cross on the label's cap band (same as .filter-chip__clear) */
  background: none;
  border: 0;
  color: var(--color-neutral-darkest); /* Figma 12760:19153 fill #0d0b00 */
  cursor: pointer;
}

.blog-chip__clear .material-symbols-outlined {
  font-size: 11px; /* Figma 12760:19153 vector 11x11 */
  line-height: 1;
}

.blog-chip__clear:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Card grid — Figma 12739:18180
   -------------------------------------------------------------------------- */
.blog-body__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* Figma 12739:18180 GRID columns=2 */
  gap: 48px; /* Figma 12739:18180 columnGap 48 rowGap 48 */
  margin: 0;
  padding: 0;
  list-style: none;
}

.blog-body__item {
  display: flex;
  min-width: 0;
}

/* News Card, "Small with Multiple Tags" — Figma 12759:18789 (component 10385:5104) */
.blog-card {
  flex: 1 1 auto;
  border: 1px solid var(--color-navy-lightest); /* Figma 12759:18789 stroke #e6e7e9 1px */
  box-shadow: 0 3px 16px -4px rgba(0, 0, 0, 0.09); /* Figma 12759:18789 DROP_SHADOW y3 blur16 spread-4 a.09 */
}

/* Same hover as the Short Courses card (.course-training-card:hover, cards.css): one shadow
   step up, no lift (QA 2026-09-24 Blog #4). No Figma hover frame. */
a.blog-card:hover,
a.blog-card:focus-visible {
  box-shadow: var(--shadow-lg);
  transform: none;
}

.blog-card__image {
  position: relative;
  flex: 0 0 auto;
  align-self: stretch; /* Figma I12759:18789;10385:5105 w=424 = card 12759:18789 w (QA 2026-09-24 Blog #3) */
  height: 282px; /* Figma I12759:18789;10385:5105 box_h_282 */
  overflow: hidden;
}

.blog-card__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Figma I12759:18789;10385:5105 scaleMode FILL */
}

.blog-card__image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(11, 22, 40, 0.8) 0%, rgba(11, 22, 40, 0) 60%); /* Figma I12759:18789;10385:5105 GRADIENT_LINEAR #0b1628 @0 -> a0 @0.6, opacity 0.8, handles top->bottom */
  pointer-events: none;
}

.blog-card__tags {
  position: absolute;
  top: 11px; /* Figma I12759:18789;10385:5123 rel y 11 */
  left: 9px; /* Figma I12759:18789;10385:5123 rel x 9 */
  right: 9px;
  z-index: 1;
  display: flex;
  flex-wrap: wrap; /* a post can carry more tags than one row holds */
  align-items: center; /* Figma I12759:18789;10385:5123 counter CENTER */
  gap: 8px; /* Figma I12759:18789;10385:5123 gap 8 */
  margin: 0;
  padding: 0;
  list-style: none;
}

.blog-card__tag {
  padding: 5px 8px 3px; /* Figma I12759:18789;10385:5106 pad T4 R8 B4 L8; 1px moved from bottom to top because Frutiger's 9/3 ascent/descent sat the glyphs high (Pastel 3jjr1my3 #1) */
  background-color: var(--color-navy); /* Figma I12759:18789;10385:5106 fill #0b1628 */
  border-radius: var(--radius-sm); /* Figma I12759:18789;10385:5106 cornerRadius 4 */
  font-size: 12px; /* Figma I12759:18789;10385:5106;5034:8671 size 12 */
  line-height: 1.3; /* Figma I12759:18789;10385:5106;5034:8671 LH 15.6 */
  font-weight: var(--font-weight-bold); /* Figma I12759:18789;10385:5106;5034:8671 Bold 700 */
  color: var(--color-white); /* Figma I12759:18789;10385:5106;5034:8671 fill #ffffff */
}

.blog-card__content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: 24px; /* Figma I12759:18789;10385:5107 gap 24 */
  padding: 24px; /* Figma I12759:18789;10385:5107 pad 24 */
}

.blog-card__text {
  display: flex;
  flex-direction: column;
  gap: 16px; /* Figma I12759:18789;10385:5108 gap 16 */
}

.blog-card__date {
  font-size: 12px; /* Figma I12759:18789;10385:5110 size 12 */
  line-height: 1.3; /* Figma I12759:18789;10385:5110 LH 15.6 */
  color: var(--color-navy-light); /* Figma I12759:18789;10385:5110 fill #545b68 */
}

.blog-card__body {
  display: flex;
  flex-direction: column;
  gap: 8px; /* Figma I12759:18789;10385:5111 gap 8 */
}

.blog-card__title {
  margin: 0;
  font-size: 20px; /* Figma I12759:18789;10385:5112 size 20 */
  line-height: 1.3; /* Figma I12759:18789;10385:5112 LH 26 */
  letter-spacing: -0.01em; /* Figma I12759:18789;10385:5112 LS -0.2 */
  font-weight: var(--font-weight-bold); /* Figma I12759:18789;10385:5112 Bold 700 */
  color: var(--color-navy-darkest); /* Figma I12759:18789;10385:5112 fill #03060c */
}

.blog-card__excerpt {
  margin: 0;
  font-size: 14px; /* Figma I12759:18789;10385:5113 size 14 */
  line-height: 1.4; /* Figma I12759:18789;10385:5113 LH 19.6 */
  color: var(--color-navy-darkest); /* Figma I12759:18789;10385:5113 fill #03060c */
}

/* Pinned to the bottom so a row of unequal cards keeps its buttons aligned. */
.blog-card__readmore {
  display: inline-flex;
  align-items: center; /* Figma I12759:18789;10385:5114 counter CENTER */
  gap: 8px; /* Figma I12759:18789;10385:5114 gap 8 */
  margin-top: auto;
  font-size: 14px; /* Figma I12759:18789;10385:5114;4179:8938 size 14 */
  line-height: 1.4; /* Figma I12759:18789;10385:5114;4179:8938 LH 19.6 */
  font-weight: var(--font-weight-bold); /* Figma I12759:18789;10385:5114;4179:8938 Bold 700 */
  color: var(--color-navy); /* Figma I12759:18789;10385:5114;4179:8938 fill #0b1628 */
}

.blog-card__readmore .material-symbols-outlined {
  font-size: 24px; /* Figma I12759:18789;10385:5114;4179:8939 box 24x24 */
  line-height: 1;
}

.blog-card:hover .blog-card__readmore {
  color: var(--color-tangerine);
}

/* --------------------------------------------------------------------------
   Pagination — Figma 12739:18206 / 12739:18207
   -------------------------------------------------------------------------- */
.blog-body .navigation.pagination {
  display: flex;
  justify-content: center; /* Figma 12739:18206 primary CENTER counter CENTER */
  padding: 9px 0; /* Figma 12739:18206 pad T9 B9 */
}

.blog-body .nav-links {
  display: flex;
  align-items: center; /* Figma 12739:18207 counter CENTER */
  gap: 14px; /* Figma 12739:18207 SPACE_BETWEEN in w315 — measured pitch: 12739:18208 ends x788, 12739:18209 starts x802 */
  padding: 3px 9px; /* Figma 12739:18207 pad T3 R9 B3 L9 */
}

.blog-body .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 33px; /* Figma 12739:18209 box 33x29 */
  height: 29px;
  padding: 0 6px;
  border: 1px solid transparent;
  border-radius: var(--radius-xs); /* Figma 12739:18209 cornerRadius 2 */
  font-size: 16px; /* Figma 12739:18210 size 16 */
  line-height: 1.4; /* Figma 12739:18210 LH 22.4 */
  font-weight: var(--font-weight-bold); /* Figma 12739:18210 Bold 700 */
  color: var(--color-navy); /* Figma 12739:18212 fill #0b1628 */
  text-decoration: none;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.blog-body .page-numbers.current {
  border-color: var(--color-tangerine); /* Figma 12739:18209 stroke #ff6600 */
  color: var(--color-tangerine); /* Figma 12739:18210 fill #ff6600 */
}

.blog-body .page-numbers.prev,
.blog-body .page-numbers.next {
  min-width: 24px; /* Figma 12739:18208 box 24x24 */
  padding: 0;
  color: var(--color-navy-darkest); /* Figma I12739:18208;7044:9449 fill #03060c */
}

.blog-body .page-numbers:not(.current):hover {
  color: var(--color-tangerine-dark);
}

.blog-body .page-numbers:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.blog-body .page-numbers.dots {
  border: 0;
}

.blog-body .page-numbers .material-symbols-outlined {
  font-size: 24px;
  line-height: 1;
}

/* No global .screen-reader-text rule exists in the theme; scoped here for the search
   label and the pagination heading / arrow names. */
.blog-body .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   Tablet / landscape phone — <=1024px. The 321px panel + 64px gap leaves the
   two-column grid too narrow below 1025, so the panel collapses behind a Filter
   button (the course listings' accepted drawer, derived — no Blog mobile frame).
   ========================================================================== */
@media (max-width: 1024px) {
  .blog-body__layout {
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
  }

  .blog-body__filter-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    height: 44px;
    padding: 10px 24px;
    background-color: var(--color-white);
    color: var(--color-navy);
    border: 2px solid var(--color-navy);
    border-radius: var(--radius-xs);
    font-family: var(--font-family);
    font-size: 16px;
    font-weight: var(--font-weight-bold);
    line-height: 1.5;
    cursor: pointer;
  }

  .blog-body__filter-toggle:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }

  .blog-body__filter-panel {
    display: none;
    flex: 1 1 auto; /* the desktop 321px basis is a height basis in a column */
    padding: 16px;
    position: static; /* the drawer opens in flow above the results */
    max-height: none;
    overflow: visible;
  }

  .blog-body__filter-panel.is-open {
    display: block;
  }
}

/* ==========================================================================
   Mobile — <=768px. 402 inherits (no Blog mobile frame; mobile-derivation-catalog).
   ========================================================================== */
@media (max-width: 768px) {
  .blog-body {
    padding: 50px 20px; /* Section Padding large 112 -> 50 */
  }

  .blog-body__inner {
    gap: 36px;
  }

  .blog-body__intro-heading {
    font-size: 32px; /* 48px off-scale heading -> H2 mobile 32 (site precedent, spec "Resolved at spec time") */
  }

  .blog-body__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  .blog-card__title {
    font-size: 18px; /* H6 20 -> 18 */
  }

  .blog-body__results {
    gap: 36px;
  }

  /* Chips wrap to several rows on a phone, so Sort by takes its own row (the course
     listings' accepted derivation). */
  .blog-body__toolbar {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .blog-body__sort {
    margin-left: 0;
  }

  .blog-body__sort-menu {
    right: auto;
    left: 0;
  }
}