/* ==========================================================================
   Midnight Signal - hero, editorial surfaces, archives
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero. Left content, visual offset right and breaking its frame.
   One moment only: headline, lede, two CTAs.
   -------------------------------------------------------------------------- */

.hero { position: relative; padding-block: clamp(48px, 5vw + 24px, 92px) clamp(44px, 4vw, 76px); }

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}

/* Sized so the approved headline sets on two lines at desktop, not three.
   Component rules that override a base heading size must carry the body.bcs
   prefix: the base rules are `body.bcs h1` (0,1,1) and would otherwise win
   against a bare single-class selector. */
body.bcs .hero__title {
  font-size: clamp(2.1rem, 1.15rem + 3.1vw, 3.35rem);
  margin-bottom: var(--space-md);
}

.hero__title .accent {
  color: var(--accent);
}

.hero__lede { margin-bottom: var(--space-lg); max-width: 50ch; }

.hero__cta { margin-bottom: var(--space-lg); }

/* Value strip. Facts only, directly under the CTAs. */
.hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md) var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--border);
}

.hero__fact dt {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  margin-bottom: 4px;
}

.hero__fact dd { font-size: 1.5rem; }

/* The visual breaks its container to the right. */
.hero__visual {
  position: relative;
  margin-right: calc(var(--gutter) * -1);
}

.hero__visual svg { width: 100%; height: auto; }

@media (min-width: 1360px) {
  .hero__visual { margin-right: -7vw; }
}

@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; gap: var(--space-lg); }
  .hero__visual { order: -1; margin-right: 0; max-width: 520px; }
  .hero__facts { gap: var(--space-md) var(--space-lg); }
}

/* --------------------------------------------------------------------------
   Provider bento. Asymmetric, varied grounds, never three identical cards.
   -------------------------------------------------------------------------- */

.bento {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--space-md);
}

.bento__cell {
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease);
}

.bento__cell:hover { border-color: var(--border-strong); transform: translateY(-3px); }

.bento__cell--wide { grid-column: span 3; }
.bento__cell--feature { grid-column: span 4; background: var(--surface-raised); border-color: var(--border-strong); }

/* One cell carries a tinted ground so the grid is not six identical panels. */
.bento__cell--tinted {
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(98, 91, 255, 0.16) 0%, rgba(11, 25, 51, 0) 62%),
    var(--surface);
}

.bento__head { display: flex; align-items: center; gap: var(--space-md); }
.bento__cell h3 { font-size: 1.1875rem; }
.bento__cell p { color: var(--ink-muted); font-size: 0.9375rem; }
.bento__cell .btn--ghost { margin-top: auto; align-self: flex-start; }

@media (max-width: 900px) {
  .bento { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .bento__cell, .bento__cell--wide { grid-column: span 2; }
  .bento__cell--feature { grid-column: span 4; }
}

@media (max-width: 768px) {
  .bento { grid-template-columns: 1fr; }
  .bento__cell, .bento__cell--wide, .bento__cell--feature { grid-column: span 1; }
}

/* --------------------------------------------------------------------------
   Generic responsive grids
   -------------------------------------------------------------------------- */

.grid { display: grid; gap: var(--space-md); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1000px) { .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 768px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
}

/* Split: content beside an asset. Used at most twice in a row. */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}

.split--reverse > *:first-child { order: 2; }

@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; gap: var(--space-lg); }
  .split--reverse > *:first-child { order: 0; }
}

/* --------------------------------------------------------------------------
   Ordered process. Numbers carry the rhythm, not icon boxes.
   -------------------------------------------------------------------------- */

.steps { counter-reset: step; border-top: 1px solid var(--border); }

.steps__item {
  counter-increment: step;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: var(--space-md) var(--space-lg);
  padding-block: var(--space-lg);
  border-bottom: 1px solid var(--border);
  align-items: start;
}

.steps__item::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2rem;
  line-height: 1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.steps__item h3 { margin-bottom: var(--space-sm); }
.steps__item p { color: var(--ink-muted); max-width: 62ch; }

@media (max-width: 600px) {
  .steps__item { grid-template-columns: 1fr; gap: var(--space-sm); }
  .steps__item::before { font-size: 1.5rem; }
}

/* --------------------------------------------------------------------------
   Breadcrumbs
   -------------------------------------------------------------------------- */

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-block: var(--space-md);
  font-size: 0.8125rem;
  color: var(--ink-muted);
}

.crumbs a { color: var(--ink-muted); }
.crumbs a:hover { color: var(--accent); }
.crumbs li { display: flex; align-items: center; gap: 8px; }
.crumbs li + li::before { content: '/'; color: rgba(164, 190, 255, 0.4); }
.crumbs [aria-current="page"] { color: var(--ink); }

/* --------------------------------------------------------------------------
   Editorial layout. Composed single column with a sticky contents rail.
   -------------------------------------------------------------------------- */

.page-hero { padding-block: var(--space-lg) var(--space-xl); }
.page-hero h1 { margin-bottom: var(--space-md); }
.page-hero .lede { max-width: 62ch; }

.page-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-md);
  align-items: center;
  margin-top: var(--space-lg);
  font-size: 0.875rem;
  color: var(--ink-muted);
}

.editorial {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 264px;
  gap: clamp(32px, 4vw, 72px);
  align-items: start;
  padding-bottom: var(--space-xl);
}

.editorial--full { grid-template-columns: minmax(0, 1fr); }

@media (max-width: 1000px) {
  .editorial { grid-template-columns: minmax(0, 1fr); }
}

/* Contents rail */
.toc {
  position: sticky;
  top: 140px;
  border-left: 1px solid var(--border);
  padding-left: var(--space-md);
  max-height: calc(100vh - 180px);
  overflow-y: auto;
}

.toc__title {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  margin-bottom: var(--space-md);
}

.toc__list li + li { margin-top: 9px; }

.toc__list a {
  display: block;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--ink-muted);
  transition: color 0.18s var(--ease);
}

.toc__list a:hover { color: var(--ink); }
.toc__list a.is-current { color: var(--accent); font-weight: 500; }
.toc__list .toc__sub { padding-left: var(--space-md); }

@media (max-width: 1000px) {
  .toc {
    position: static;
    max-height: none;
    border-left: 0;
    border-top: 1px solid var(--border);
    padding-left: 0;
    padding-top: var(--space-md);
    margin-bottom: var(--space-lg);
  }
  .toc__list { columns: 2; column-gap: var(--space-lg); }
}

@media (max-width: 560px) {
  .toc__list { columns: 1; }
}

/* --------------------------------------------------------------------------
   Prose. The 68ch measure lives here.
   -------------------------------------------------------------------------- */

.prose { max-width: var(--measure); }
.prose > * + * { margin-top: 1.4em; }

.prose p, .prose li { color: #DCE4F5; }

.prose h2 {
  margin-top: 2.1em;
  margin-bottom: 0.6em;
  padding-top: 1.2em;
  border-top: 1px solid var(--border);
  scroll-margin-top: 110px;
}

.prose h3 {
  margin-top: 1.9em;
  margin-bottom: 0.5em;
  color: var(--ink);
  scroll-margin-top: 110px;
}

.prose h2:first-child, .prose h3:first-child { margin-top: 0; }

.prose strong { color: var(--ink); font-weight: 600; }
.prose em { font-style: italic; }

.prose a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: rgba(54, 120, 255, 0.4);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.18s var(--ease), color 0.18s var(--ease);
}

.prose a:hover { color: #5B91FF; text-decoration-color: var(--accent); }

body.bcs .prose ul,
body.bcs .prose ol { padding-left: 1.3em; }
.prose ul > li { list-style: none; position: relative; padding-left: 0.2em; }
.prose ul > li + li, .prose ol > li + li { margin-top: 0.6em; }

.prose ul > li::before {
  content: '';
  position: absolute;
  left: -0.95em;
  top: 0.72em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}

body.bcs .prose ol { list-style: decimal; }
.prose ol > li::marker { color: var(--accent); font-weight: 600; }

.prose blockquote {
  padding: var(--space-md) 0 var(--space-md) var(--space-lg);
  border-left: 2px solid var(--accent);
  color: var(--ink);
  font-size: 1.0625rem;
}

.prose code {
  padding: 2px 7px;
  border-radius: 6px;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.875em;
  color: var(--cyan);
}

.prose pre {
  padding: var(--space-md);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  overflow-x: auto;
}

.prose pre code { padding: 0; border: 0; background: none; }

.prose figure { margin-block: var(--space-lg); }
.prose img { border-radius: var(--radius-sm); border: 1px solid var(--border); }
.prose figcaption {
  margin-top: var(--space-sm);
  font-size: 0.8125rem;
  color: var(--ink-muted);
}

/* Tables inside prose get the comparison treatment and can exceed the measure. */
.prose .table-scroll { max-width: none; width: 100%; margin-block: var(--space-lg); }

/* Wide elements may break the measure deliberately. */
.prose > .bleed { max-width: none; }

/* --------------------------------------------------------------------------
   Archive cards
   -------------------------------------------------------------------------- */

.post-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease);
}

.post-card:hover { border-color: var(--border-strong); transform: translateY(-3px); }

.post-card__thumb {
  aspect-ratio: 16 / 9;
  background:
    radial-gradient(130% 130% at 12% 8%, rgba(98, 91, 255, 0.28) 0%, rgba(11, 25, 51, 0) 58%),
    linear-gradient(140deg, rgba(40, 215, 242, 0.14) 0%, rgba(7, 18, 38, 0) 54%),
    var(--surface-raised);
  border-bottom: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}

.post-card__thumb img { width: 100%; height: 100%; object-fit: cover; border: 0; border-radius: 0; }

.post-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-lg) var(--space-md) var(--space-md);
  flex: 1 1 auto;
}

.post-card__cat {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
}

body.bcs .post-card__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.post-card__title a { color: var(--ink); }
.post-card__title a:hover { color: var(--accent); }

.post-card__excerpt { font-size: 0.9375rem; color: var(--ink-muted); }

.post-card__foot {
  margin-top: auto;
  padding-top: var(--space-md);
  font-size: 0.8125rem;
  color: var(--ink-muted);
}

/* Featured article. Asymmetric, larger, tinted. */
.post-feature {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 0;
  background: var(--surface-raised);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: var(--space-lg);
}

.post-feature__body { padding: clamp(24px, 3vw, 44px); display: flex; flex-direction: column; gap: var(--space-md); justify-content: center; }
.post-feature__body h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); }
.post-feature__body h2 a { color: var(--ink); }
.post-feature__body h2 a:hover { color: var(--accent); }
.post-feature__body p { color: var(--ink-muted); }

.post-feature__thumb {
  min-height: 260px;
  background:
    radial-gradient(120% 120% at 88% 12%, rgba(144, 101, 255, 0.3) 0%, rgba(16, 35, 71, 0) 60%),
    linear-gradient(200deg, rgba(40, 215, 242, 0.16) 0%, rgba(7, 18, 38, 0) 58%),
    var(--surface);
}

.post-feature__thumb img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 860px) {
  .post-feature { grid-template-columns: 1fr; }
  .post-feature__thumb { order: -1; min-height: 190px; }
}

/* --------------------------------------------------------------------------
   Category filter row
   -------------------------------------------------------------------------- */

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  padding-bottom: var(--space-lg);
}

.chip {
  padding: 8px 15px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink-muted);
  transition: color 0.18s var(--ease), border-color 0.18s var(--ease), background-color 0.18s var(--ease);
}

.chip:hover { color: var(--ink); border-color: var(--border-strong); }
.chip.is-active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }

/* --------------------------------------------------------------------------
   Pagination
   -------------------------------------------------------------------------- */

.pagination {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: center;
  justify-content: center;
  padding-top: var(--space-xl);
}

.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 13px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ink-muted);
  transition: color 0.18s var(--ease), border-color 0.18s var(--ease), background-color 0.18s var(--ease);
}

.pagination a.page-numbers:hover { color: var(--ink); border-color: var(--border-strong); background: var(--accent-soft); }

.pagination .page-numbers.current {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
  color: #FFFFFF;
}

.pagination .page-numbers.dots { border-color: transparent; }

/* --------------------------------------------------------------------------
   Related and next steps
   -------------------------------------------------------------------------- */

.related { border-top: 1px solid var(--border); padding-top: var(--space-xl); }

/* Final CTA band */
.cta-band {
  background:
    radial-gradient(100% 160% at 0% 0%, rgba(98, 91, 255, 0.2) 0%, rgba(11, 25, 51, 0) 62%),
    var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  padding: clamp(32px, 4vw, 60px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-lg);
  align-items: center;
}

.cta-band h2 { margin-bottom: var(--space-sm); }
.cta-band p { color: var(--ink-muted); max-width: 54ch; }

@media (max-width: 860px) {
  .cta-band { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Empty, loading and error states
   -------------------------------------------------------------------------- */

.state {
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
  padding: var(--space-xl) var(--space-lg);
  text-align: center;
  color: var(--ink-muted);
}

.state h2 { margin-bottom: var(--space-sm); }
.state .btn { margin-top: var(--space-lg); }

.state--error { border-style: solid; border-left: 3px solid var(--danger); text-align: left; }

.form-error {
  display: block;
  margin-top: 6px;
  font-size: 0.8125rem;
  color: var(--danger);
}