/* ============================================================
   page-case-studies.css — sits on top of service.css.
   Ported from public/proposed/nas-v3/assets/css/page-case-studies.css
   with the chromatic tokens re-anchored to the NAS brand palette.
   ============================================================ */

/* Chromatic tokens → NAS brand (nas-blue ramp, mint, pink, coral).
   Loads after service.css, so these win over its old palette. */
:root {
  --c-navy: #0E2A6B;
  --c-blue: #2158D6;
  --c-blue-2: #4A7EE8;
  --c-accent: #7BDFB1;
  --c-accent-2: #FFA8C6;
  --c-coral: #FF5146;
}

/* HERO — evidence-pack diorama */
.cs-hero .hero-grid { grid-template-columns: 1.05fr 1fr; }
.cs-hero-meta { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.ep-diorama { position: relative; width: 100%; aspect-ratio: 1; }
.ep-svg { width: 100%; height: 100%; }

/* Placement lives on wrapper groups in the SVG; these classes only animate.
   --r carries each document's resting rotation through the keyframes. */
.ep-doc { transform-box: fill-box; transform-origin: center; }
.ep-doc-1 { animation: epDoc1 6s ease-in-out infinite; }
.ep-doc-2 { animation: epDoc1 7s ease-in-out infinite reverse; }
.ep-doc-3 { animation: epDoc1 8s ease-in-out infinite; animation-delay: -2s; }

@keyframes epDoc1 {
  0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); }
  50%      { transform: translateY(-4px) rotate(var(--r, 0deg)); }
}

.ep-amb { transform-box: fill-box; transform-origin: center; animation: epAmb 6s ease-out infinite; }
@keyframes epAmb {
  0%   { transform: scale(.85); opacity: .8; }
  100% { transform: scale(1.15); opacity: 0; }
}

.ep-check { opacity: 0; animation: epCheck .6s var(--ease-spring, cubic-bezier(.16,1,.3,1)) forwards; }
.ep-check-1 { animation-delay: .4s; }
.ep-check-2 { animation-delay: .8s; }
.ep-check-3 { animation-delay: 1.2s; }
@keyframes epCheck {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: none; }
}

.ep-stamp { transform-box: fill-box; transform-origin: center; animation: epStamp 8s linear infinite; }
@keyframes epStamp {
  to { transform: rotate(360deg); }
}

.ep-tag { transform-box: fill-box; transform-origin: center; animation: epTag 5s ease-in-out infinite; }
.ep-tag-2 { animation-delay: 1.6s; }
.ep-tag-3 { animation-delay: 3.2s; }
@keyframes epTag {
  0%, 100% { transform: translateY(0); opacity: .92; }
  50%      { transform: translateY(-6px); opacity: 1; }
}


/* FEATURED CASE CARD */
.featured-case {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  padding: clamp(34px, 4vw, 56px);
  background: linear-gradient(160deg, #fff, var(--c-bg-2));
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  transition: transform var(--t-mid) var(--ease-spring),
              box-shadow var(--t-mid) var(--ease-out),
              border-color var(--t-fast) var(--ease-out);
  position: relative;
  overflow: hidden;
}
.featured-case::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 30% 60% at 100% 0%, rgba(255, 81, 70, .1), transparent 60%);
  pointer-events: none;
}
.featured-case:hover {
  transform: translateY(-4px);
  box-shadow: 0 40px 80px -40px rgba(14, 42, 107, .28);
  border-color: rgba(33, 88, 214, .35);
}

.fc-body { position: relative; }

.fc-meta-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }

.fc-pill {
  font-family: 'JetBrains Mono', monospace;
  font-size: .72rem;
  color: var(--c-blue);
  padding: 5px 12px;
  background: rgba(33, 88, 214, .08);
  border-radius: 4px;
}
.fc-pill-out { background: rgba(255, 81, 70, .1); color: #B3312A; }

.fc-body h3 {
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  line-height: 1.15;
  margin-bottom: 14px;
}

.fc-deck { color: var(--c-mute); margin-bottom: 24px; max-width: 520px; font-size: 1.02rem; }

.fc-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 24px;
  padding: 18px 0;
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
}
.fc-m { display: flex; flex-direction: column; gap: 4px; }
.fc-m-n {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: clamp(1.4rem, 2.2vw, 1.9rem);
  color: var(--c-navy);
  letter-spacing: -.02em;
}
.fc-m-l { font-size: .78rem; color: var(--c-mute); line-height: 1.4; }

.fc-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.fc-partner { display: flex; flex-direction: column; gap: 2px; }
.fc-partner-k {
  font-family: 'JetBrains Mono', monospace;
  font-size: .72rem;
  color: var(--c-mute);
  letter-spacing: .04em;
}
.fc-partner-v {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  color: var(--c-navy);
  font-size: 1.02rem;
}

.fc-cta { color: var(--c-blue); font-weight: 700; }
.fc-cta span { display: inline-block; transition: transform var(--t-fast) var(--ease-spring); }
.featured-case:hover .fc-cta span { transform: translateX(6px); }

.fc-vis { position: relative; aspect-ratio: 1; max-width: 360px; margin: 0 auto; }
.fc-vis svg { width: 100%; height: 100%; }

.fc-led { transform-box: fill-box; transform-origin: center; animation: fcLed 1.4s ease-in-out infinite; }
@keyframes fcLed { 0%,100% { opacity: .3; } 50% { opacity: 1; } }

.fc-arcs path {
  stroke-dasharray: 4 5;
  animation: fcArcFlow 2.4s linear infinite;
}
.fc-arcs path:nth-child(2) { animation-duration: 2.8s; }
.fc-arcs path:nth-child(3) { animation-duration: 3.2s; }
.fc-arcs path:nth-child(4) { animation-duration: 2.6s; }
.fc-arcs path:nth-child(5) { animation-duration: 3s; }
@keyframes fcArcFlow { to { stroke-dashoffset: -36; } }

.fc-cloud-led { transform-box: fill-box; transform-origin: center; animation: fcLed 1.6s ease-in-out infinite; }

.fc-cloud-ring {
  transform-box: fill-box;
  transform-origin: center;
  animation: fcCloudRing 18s linear infinite;
}
@keyframes fcCloudRing { to { transform: rotate(360deg); } }


/* INDUSTRIES grid */
.ind-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}
.ind {
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  padding: 24px 22px 20px;
  transition: transform var(--t-mid) var(--ease-spring),
              border-color var(--t-fast) var(--ease-out),
              box-shadow var(--t-mid) var(--ease-out);
}
.ind:hover {
  transform: translateY(-3px);
  border-color: var(--c-blue);
  box-shadow: 0 24px 50px -28px rgba(14, 42, 107, .22);
}
.ind-k {
  font-family: 'JetBrains Mono', monospace;
  font-size: .72rem;
  color: var(--c-blue);
  display: block;
  margin-bottom: 10px;
}
.ind h3 { margin-bottom: 8px; }
.ind p { color: var(--c-mute); font-size: .92rem; margin-bottom: 12px; }
.ind-tags {
  font-family: 'JetBrains Mono', monospace;
  font-size: .72rem;
  color: var(--c-mute);
  padding-top: 12px;
  border-top: 1px solid var(--c-line);
  display: block;
}


/* CASE STUDIES grid */
.cs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

.cs-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 26px 24px 24px;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  transition: transform var(--t-mid) var(--ease-spring),
              border-color var(--t-fast) var(--ease-out),
              box-shadow var(--t-mid) var(--ease-out);
  position: relative;
  overflow: hidden;
}
.cs-card:hover {
  transform: translateY(-4px);
  border-color: var(--c-blue);
  box-shadow: 0 28px 56px -28px rgba(14, 42, 107, .22);
}

.cs-card-head { display: flex; justify-content: space-between; align-items: center; }
.cs-card-pill {
  font-family: 'JetBrains Mono', monospace;
  font-size: .72rem;
  color: var(--c-blue);
  padding: 5px 10px;
  background: rgba(33, 88, 214, .08);
  border-radius: 4px;
}
.cs-card-pill-mute { color: var(--c-mute); background: rgba(77, 90, 119, .08); }

.cs-card-yr {
  font-family: 'JetBrains Mono', monospace;
  font-size: .72rem;
  color: var(--c-mute);
}

.cs-card h3 { font-size: 1.1rem; line-height: 1.3; margin-bottom: 4px; }
.cs-card p { color: var(--c-mute); font-size: .92rem; margin-bottom: 10px; flex: 1; }

.cs-card-mini {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  padding: 12px 0;
  border-top: 1px solid var(--c-line);
  font-family: 'JetBrains Mono', monospace;
  font-size: .76rem;
  color: var(--c-mute);
}
.cs-card-mini strong { color: var(--c-navy); font-weight: 700; font-family: 'Space Grotesk', sans-serif; }

.cs-card-cta { color: var(--c-blue); font-weight: 700; font-size: .92rem; }
.cs-card-cta span { display: inline-block; transition: transform var(--t-fast) var(--ease-spring); }
.cs-card:hover .cs-card-cta span { transform: translateX(6px); }

.cs-card-stub {
  background: linear-gradient(180deg, #fff, var(--c-bg-2));
  border-style: dashed;
}
.cs-card-stub h3 { color: var(--c-mute); }
.cs-stub-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: .76rem;
  color: var(--c-mute);
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--c-line);
}
.cs-stub-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #FF5146;
  box-shadow: 0 0 0 3px rgba(255, 81, 70, .18);
  animation: csStubDot 1.6s ease-in-out infinite;
}
@keyframes csStubDot {
  0%, 100% { opacity: 1; }
  50% { opacity: .5; }
}


/* GRID TOOLBAR — count + sort (DB-driven listing) */
.cs-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.cs-toolbar-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: .78rem;
  color: var(--c-mute);
}
.cs-toolbar-sort {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.cs-toolbar-sort label {
  font-family: 'JetBrains Mono', monospace;
  font-size: .78rem;
  color: var(--c-mute);
}
.cs-toolbar-sort select {
  appearance: none;
  padding: 8px 34px 8px 14px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5 L6 7.5 L9 4.5' stroke='%234D5A77' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center / 12px;
  border: 1px solid var(--c-line);
  border-radius: 8px;
  font: 600 .82rem/1 'Space Grotesk', sans-serif;
  color: var(--c-navy);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease-out);
}
.cs-toolbar-sort select:hover,
.cs-toolbar-sort select:focus-visible {
  border-color: var(--c-blue);
  outline: none;
}

/* LOAD MORE */
.cs-loadmore-wrap { display: flex; justify-content: center; margin-top: 30px; }
.cs-loadmore {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 26px;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: 999px;
  font: 700 .9rem/1 'Space Grotesk', sans-serif;
  color: var(--c-navy);
  cursor: pointer;
  transition: transform var(--t-mid) var(--ease-spring),
              border-color var(--t-fast) var(--ease-out),
              box-shadow var(--t-mid) var(--ease-out);
}
.cs-loadmore:hover {
  transform: translateY(-2px);
  border-color: var(--c-blue);
  box-shadow: 0 18px 36px -22px rgba(14, 42, 107, .3);
}
.cs-loadmore svg { width: 14px; height: 14px; }
.cs-loadmore.is-loading { opacity: .55; pointer-events: none; }


/* RESPONSIVE */
@media (max-width: 1024px) {
  .cs-hero .hero-grid { grid-template-columns: 1fr; }
  .ep-diorama { max-width: 480px; margin: 0 auto; }
  .featured-case { grid-template-columns: 1fr; }
  .fc-vis { max-width: 320px; }
  .cs-hero-meta { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .fc-metrics { grid-template-columns: 1fr; gap: 10px; }
  .cs-hero-meta { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .ep-doc, .ep-amb, .ep-stamp, .ep-tag, .ep-check,
  .fc-led, .fc-arcs path, .fc-cloud-led, .fc-cloud-ring, .cs-stub-dot {
    animation: none !important;
  }
  .ep-check { opacity: 1; transform: none; }
}