/* =====================================================================
   Northaven — css/work.css
   Page-specific styles for work.html and work/*.html case studies.
   Shared tokens, reset, typography, nav, footer, buttons, cards, .reveal
   utilities, and the .work__grid/.work__tile/.cta patterns all come from
   ../styles.css — this file only adds what those pages need on top.
   ===================================================================== */

/* ------------------------------------------------------- Portfolio hero */
.work-hero {
  position: relative;
  overflow: hidden;
  padding-top: var(--space-9);
  padding-bottom: var(--space-7);
}
.work-hero__glow {
  position: absolute; z-index: 0; pointer-events: none;
  top: -200px; right: -160px;
  width: 620px; height: 620px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(139,124,246,0.18), transparent);
  filter: blur(40px);
}
.work-hero__inner { position: relative; z-index: 1; }
.work-hero__title { margin-top: var(--space-4); }
.work-hero__lead {
  margin-top: var(--space-5);
  font-size: 1.25rem; line-height: 1.55;
  color: var(--text-muted); max-width: 46ch;
}

/* Case-study grid links reuse .work__grid / .work__tile / .work__visual /
   .work__badge / .work__caption from styles.css directly on <a> elements. */
.work__tile-link { display: block; }

/* ------------------------------------------------------ Case-study hero */
.case-hero { padding-top: var(--space-9); padding-bottom: var(--space-6); }
.case-hero__cat { color: var(--accent); }
.case-hero__title { margin-top: var(--space-3); }
.case-hero__dek {
  margin-top: var(--space-5);
  font-size: 1.25rem; line-height: 1.55;
  color: var(--text-muted); max-width: 52ch;
}
.case-meta {
  margin-top: var(--space-6);
  display: flex; flex-wrap: wrap; gap: var(--space-6);
}
.case-meta__item { display: flex; flex-direction: column; gap: var(--space-1); }
.case-meta__label { color: var(--text-muted); }
.case-meta__value { font-weight: 600; color: var(--text); font-size: 0.9375rem; }

.case-hero__image {
  position: relative;
  margin-top: var(--space-8);
  aspect-ratio: 16 / 7;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.case-hero__image .work__visual { position: absolute; inset: 0; }

/* --------------------------------------------------------- Case body */
.case-body { padding-block: var(--space-7); }
.case-grid {
  display: grid; gap: var(--space-8);
  grid-template-columns: 1fr;
}
.case-content { max-width: 62ch; }
.case-content h2 { margin-top: var(--space-7); }
.case-content h2:first-child { margin-top: 0; }
.case-content p { margin-top: var(--space-4); color: var(--text-muted); }
.case-content p:first-of-type { margin-top: var(--space-3); }

.case-aside { display: flex; flex-direction: column; gap: var(--space-5); }
.case-stats {
  border-left: 3px solid var(--accent);
  display: grid; gap: var(--space-5);
}
.case-stats .stat__num { font-size: 2rem; }

.case-services__label { margin-bottom: var(--space-3); }
.case-services__list { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.case-services__link {
  display: inline-flex; align-items: center;
  padding: 0.5em 0.9em;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-size: 0.875rem; font-weight: 500; color: var(--text-muted);
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.case-services__link:hover { border-color: var(--accent); color: var(--accent); }

/* Secondary in-article gradient panel — same recipe language as the
   portfolio tiles (135deg linear / conic + palette tokens + low-alpha
   texture), distinct combos per case study. */
.case-visual {
  position: relative;
  margin-top: var(--space-8);
  aspect-ratio: 21 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.case-visual--solace {
  background: linear-gradient(135deg, var(--accent-2-soft), var(--surface-2)), radial-gradient(circle at 20% 30%, rgba(198,242,78,0.28), transparent 55%);
  background-blend-mode: screen;
}
.case-visual--kestrel {
  background: linear-gradient(135deg, var(--surface-2), var(--bg)), repeating-linear-gradient(45deg, rgba(139,124,246,0.14) 0 10px, transparent 10px 20px);
}
.case-visual--bloom {
  background: conic-gradient(from 140deg at 30% 70%, var(--accent), var(--surface-2), var(--bg));
}
.case-visual--verge {
  background: linear-gradient(135deg, var(--accent-2), var(--bg)), repeating-linear-gradient(90deg, rgba(0,0,0,0.2) 0 2px, transparent 2px 14px);
  background-blend-mode: multiply;
}
.case-visual--atlas {
  background: linear-gradient(135deg, var(--bg), var(--accent-2-soft)), radial-gradient(circle at 80% 20%, rgba(198,242,78,0.24), transparent 50%);
  background-blend-mode: screen;
}
.case-visual--nord {
  background: linear-gradient(135deg, var(--surface-2), var(--bg)), radial-gradient(circle at 60% 40%, rgba(139,124,246,0.3), transparent 55%);
  background-blend-mode: screen;
}

/* -------------------------------------------------------- Case pull-quote */
.case-quote { margin-top: var(--space-7); }

/* ---------------------------------------------------- Prev/next nav row */
.case-pager {
  border-top: 1px solid var(--border);
  padding-block: var(--space-6);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-4);
}
.case-pager__link { display: flex; flex-direction: column; gap: var(--space-1); }
.case-pager__link--next { text-align: right; align-items: flex-end; }
.case-pager__dir { color: var(--text-muted); }
.case-pager__name {
  font-weight: 600; color: var(--text); font-size: 1.0625rem;
  transition: color var(--dur) var(--ease);
}
.case-pager__link:hover .case-pager__name { color: var(--accent); }

/* ------------------------------------------------------ Closing CTA band */
.work-cta { padding-block: var(--space-8); }

/* ==================================================================== */
@media (min-width: 820px) {
  .case-grid { grid-template-columns: 1.1fr 0.9fr; align-items: start; }
}

@media (min-width: 1120px) {
  .work-hero { padding-bottom: var(--space-8); }
}