/* Case studies hub — simulated industry scenario library */

.case-library-index {
  padding: clamp(3rem, 6vw, 5rem) 0;
  border-block: 1px solid var(--line);
  background:
    radial-gradient(circle at 82% 20%, color-mix(in srgb, var(--brand-peach) 35%, transparent), transparent 30%),
    var(--paper);
}

.case-library-index__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(16rem, 28rem);
  align-items: end;
  gap: 1.5rem 3rem;
  margin-bottom: 1.5rem;
}

.case-library-index__head h2 {
  margin: 0;
  max-width: 16ch;
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 1.02;
  letter-spacing: -0.045em;
}

.case-library-index__head > p {
  margin: 0;
  color: var(--ink-soft);
  line-height: 1.65;
}

.case-library-index__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  padding: 1px;
  background: var(--line);
}

.case-library-index__grid a {
  position: relative;
  display: grid;
  min-height: 10.5rem;
  align-content: end;
  gap: .35rem;
  padding: 1.25rem;
  overflow: hidden;
  background: color-mix(in srgb, var(--paper) 94%, white);
  color: var(--ink);
  text-decoration: none;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.case-library-index__grid a::after {
  content: "↘";
  position: absolute;
  top: 1rem;
  right: 1rem;
  color: var(--faint);
  font-size: .9rem;
  transition: transform var(--transition-fast), color var(--transition-fast);
}

.case-library-index__grid a:hover {
  background: var(--ink);
  color: var(--paper);
}

.case-library-index__grid a:hover::after {
  color: var(--paper);
  transform: translate(2px, 2px);
}

.case-library-index__grid span {
  position: absolute;
  top: 1rem;
  left: 1.25rem;
  color: var(--faint);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .12em;
}

.case-library-index__grid strong {
  font-size: 1.05rem;
  line-height: 1.25;
}

.case-library-index__grid small {
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.45;
}

.case-library-index__grid a:hover small,
.case-library-index__grid a:hover span {
  color: color-mix(in srgb, var(--paper) 68%, transparent);
}

.case-library-index__grid a.case-library-index__risk {
  background: color-mix(in srgb, var(--brand-peach) 34%, var(--paper));
}

.case-library-index__grid a.case-library-index__risk:hover {
  background: var(--brand-rust);
  color: white;
}

.case-scenario {
  scroll-margin-top: 6.5rem;
}

.case-scenario > .wrap.split {
  align-items: start;
}

.case-scenario > .wrap.split .guide-card {
  position: sticky;
  top: 6.5rem;
}

.case-scenario__header {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(15rem, .75fr);
  align-items: end;
  gap: 1.5rem 3rem;
  margin-bottom: 2rem;
}

.case-scenario__header .prose {
  max-width: 50rem;
}

.case-scenario__header h2 {
  margin-top: .8rem;
  max-width: 22ch;
}

.case-risk-note {
  padding: 1.25rem;
  border: 1px solid color-mix(in srgb, var(--brand-rust) 35%, var(--line));
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--brand-peach) 32%, var(--paper));
}

.case-risk-note strong {
  display: block;
  margin-bottom: .45rem;
  color: var(--brand-rust);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.case-risk-note p {
  margin: 0;
  color: var(--ink-soft);
  font-size: .88rem;
  line-height: 1.55;
}

.case-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  padding: 1px;
  background: var(--line);
}

.case-detail-grid article {
  padding: clamp(1.35rem, 3vw, 2rem);
  background: var(--paper);
}

.case-scenario.section--soft .case-detail-grid article {
  background: color-mix(in srgb, var(--paper-2) 86%, var(--paper));
}

.case-detail-grid h3 {
  margin: 0 0 .7rem;
  font-size: 1.05rem;
}

.case-detail-grid p,
.case-detail-grid li {
  color: var(--ink-soft);
  font-size: .9rem;
  line-height: 1.65;
}

.case-detail-grid p {
  margin: 0;
}

.case-detail-grid ul,
.case-detail-grid ol {
  margin: 0;
  padding-left: 1.15rem;
}

.case-detail-grid li + li {
  margin-top: .4rem;
}

.case-query-panel {
  display: grid;
  grid-template-columns: minmax(12rem, .65fr) minmax(0, 1.35fr);
  gap: 1.5rem 3rem;
  align-items: start;
  margin-top: 1px;
  padding: clamp(1.4rem, 3vw, 2rem);
  background: var(--ink);
  color: var(--paper);
}

.case-query-panel h3 {
  margin: .55rem 0 0;
  color: inherit;
  font-size: clamp(1.25rem, 2.2vw, 1.7rem);
}

.case-query-panel .section__eyebrow {
  color: color-mix(in srgb, var(--paper) 60%, transparent);
}

.case-query-panel ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .65rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: query;
}

.case-query-panel li {
  position: relative;
  padding-left: 1.5rem;
  color: color-mix(in srgb, var(--paper) 78%, transparent);
  font-size: .88rem;
  line-height: 1.5;
  counter-increment: query;
}

.case-query-panel li::before {
  content: counter(query, decimal-leading-zero);
  position: absolute;
  left: 0;
  color: color-mix(in srgb, var(--paper) 38%, transparent);
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .05em;
}

.case-related {
  margin: 1.25rem 0 0;
  color: var(--muted);
  font-size: .85rem;
}

.case-related a {
  color: var(--ink);
  text-underline-offset: .18em;
}

@media (max-width: 920px) {
  .case-library-index__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .case-scenario__header {
    grid-template-columns: 1fr;
  }

  .case-risk-note {
    max-width: 36rem;
  }
}

@media (max-width: 700px) {
  .case-library-index__head,
  .case-query-panel {
    grid-template-columns: 1fr;
  }

  .case-detail-grid,
  .case-query-panel ul {
    grid-template-columns: 1fr;
  }

  .case-scenario > .wrap.split .guide-card {
    position: static;
  }
}

@media (max-width: 480px) {
  .case-library-index__grid {
    grid-template-columns: 1fr;
  }

  .case-library-index__grid a {
    min-height: 8.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .case-library-index__grid a,
  .case-library-index__grid a::after {
    transition: none;
  }
}