/* Customer stories: case-studies.html (list) and case-study.html?slug= (detail). Mobile-first.
   The featured card on the list reuses css/sections/case-study.css (homepage section markup). */

/* ---------- List: header + filters ---------- */
.p-cases { padding-bottom: var(--space-8); }
.p-cases__head { display: grid; gap: var(--space-6); align-items: end; }
.p-cases__intro { display: grid; justify-items: start; gap: var(--space-4); }
.p-cases__title { max-width: 14ch; }
.p-cases__count { margin-left: var(--space-1); font-family: var(--font-body); font-size: var(--body-md-size); letter-spacing: 0; line-height: 1; vertical-align: top; color: var(--text-medium); }
.p-cases__lead { max-width: 420px; font-size: var(--para-lg-size); line-height: var(--para-lg-lh); letter-spacing: var(--para-lg-ls); color: var(--text-medium); }
.p-cases__tabs { margin-top: var(--space-8); }
@media (max-width: 639px) {
  .p-cases__tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
  .p-cases__tabs::-webkit-scrollbar { display: none; }
  .p-cases__tabs .tabs__btn { flex: none; }
}
@media (min-width: 1024px) {
  .p-cases__head { grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-16); }
}

/* Featured card: section spacing is tighter here than on the homepage */
.p-cases__featured { padding-block: 0 var(--space-12); }
.p-cases__featured[hidden] { display: none; }
.p-cases__featured-logo img { height: 25px; width: auto; filter: brightness(0) invert(1); }
@media (min-width: 1024px) { .p-cases__featured { padding-bottom: var(--space-16); } }

.p-cases__list-wrap { padding-bottom: var(--section-y); }

/* ---------- Story card (list grid + "More stories" on the detail page) ---------- */
.p-cases__grid { display: grid; gap: var(--space-10) var(--space-4); }
.p-cases__grid .cms-notice { grid-column: 1 / -1; }
@media (min-width: 768px) { .p-cases__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-12) var(--space-6); } }
@media (min-width: 1024px) { .p-cases__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8) var(--space-4); } }

.cs-card__link { display: grid; gap: var(--space-3); color: var(--text-strong); }
.cs-card__media { position: relative; isolation: isolate; display: block; overflow: hidden; border-radius: var(--radius-lg); aspect-ratio: 16 / 10; background: var(--amber-950); }
.cs-card__cover { width: 100%; height: 100%; object-fit: cover; opacity: 0.85; transition: transform 700ms var(--ease-out), opacity var(--dur-slow) var(--ease); }
.cs-card__media::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgb(70 25 1 / 0) 35%, rgb(70 25 1 / 0.75) 100%); }
.cs-card__logo { position: absolute; left: var(--space-5); bottom: var(--space-5); z-index: 2; display: flex; }
.cs-card__logo img { height: 22px; width: auto; filter: brightness(0) invert(1); }
.cs-card__media::after {
  content: ""; position: absolute; right: var(--space-4); bottom: var(--space-4); z-index: 2; width: 44px; height: 44px; border-radius: var(--radius-pill);
  background: var(--base-high) center / 16px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23111' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 11.5l7-7M5.5 4.5h6v6'/%3E%3C/svg%3E");
  box-shadow: var(--shadow-md); opacity: 0; transform: translateY(8px) scale(0.85);
  transition: opacity var(--dur) var(--ease), transform var(--dur-slow) var(--ease-spring);
}
.cs-card__meta { display: flex; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-2); font-weight: var(--fw-medium); font-size: var(--body-md-size); }
.cs-card__meta span + span { color: var(--text-low); text-align: right; }
.cs-card__title { font-family: var(--font-heading); font-weight: var(--fw-heading); font-size: var(--h5-size); line-height: 1.2; letter-spacing: var(--h5-ls); max-width: 30ch; transition: color var(--dur) var(--ease), transform var(--dur-slow) var(--ease-out); }
.cs-card__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); margin-top: var(--space-2); padding-top: var(--space-4); border-top: 1px solid var(--border-thin); }
.cs-card__stat { display: grid; gap: 2px; font-size: var(--body-sm-size); line-height: 1.3; color: var(--text-low); }
.cs-card__stat strong { font-family: var(--font-body); font-weight: var(--fw-regular); font-size: 1.75rem; line-height: 1.1; letter-spacing: -0.02em; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.cs-card__more { display: inline-flex; align-items: center; gap: var(--space-2); margin-top: var(--space-1); font-weight: var(--fw-medium); font-size: var(--body-md-size); }
.cs-card__more svg { transition: transform var(--dur-slow) var(--ease-out); }
.cs-card__link:focus-visible { outline: none; }
.cs-card__link:focus-visible .cs-card__media { outline: 2px solid var(--orange-500); outline-offset: 3px; }
@media (hover: hover) {
  .cs-card__link:hover .cs-card__cover { transform: scale(1.06); opacity: 1; }
  .cs-card__link:hover .cs-card__media::after { opacity: 1; transform: none; }
  .cs-card__link:hover .cs-card__title { color: var(--amber-800); transform: translateX(4px); }
  .cs-card__link:hover .cs-card__more svg { transform: translateX(4px); }
}
.cs-card__link:focus-visible .cs-card__media::after { opacity: 1; transform: none; }
.cs-card__link:active .cs-card__cover { transform: scale(1.03); transition-duration: var(--dur-fast); }

/* Cards that come back after a filter change */
@keyframes p-cases-card-in {
  from { opacity: 0; transform: translateY(16px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
.p-cases__grid .is-filtered-in { animation: p-cases-card-in var(--dur-reveal) var(--ease-out) both; animation-delay: calc(var(--i, 0) * 60ms); }
.p-cases__tabs .tabs__btn { transition: background var(--dur) var(--ease), transform var(--dur-fast) var(--ease); }
.p-cases__tabs .tabs__btn:active { transform: scale(0.95); }

/* ---------- Detail ---------- */
.p-case__progress { position: fixed; inset: 0 0 auto; z-index: 60; height: 2px; pointer-events: none; }
.p-case__progress-bar { display: block; height: 100%; background: var(--orange-500); transform: scaleX(0); transform-origin: left; }
.p-case__loading { padding-block: var(--space-16); color: var(--text-low); }

.p-case__crumbs { display: flex; flex-wrap: wrap; gap: var(--space-2); font-weight: var(--fw-medium); font-size: var(--body-md-size); color: var(--text-low); }
.p-case__crumbs a { color: var(--text-strong); }
.p-case__hero { display: grid; gap: var(--space-10); margin-top: var(--space-8); }
.p-case__intro { display: grid; justify-items: start; gap: var(--space-6); }
.p-case__logo { height: 28px; width: auto; }
.p-case__title { max-width: 20ch; }
.p-case__excerpt { max-width: 560px; font-size: var(--para-lg-size); line-height: var(--para-lg-lh); letter-spacing: var(--para-lg-ls); color: var(--text-medium); }
.p-case__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6) var(--space-4); align-content: end; }
.p-case__facts div { display: grid; gap: var(--space-1); padding-top: var(--space-3); border-top: 1px solid var(--border-thin); }
.p-case__facts dt { font-size: var(--body-sm-size); color: var(--text-low); }
.p-case__facts dd { margin: 0; font-weight: var(--fw-medium); font-size: var(--body-md-size); color: var(--text-strong); }

.p-case__cover { margin-top: var(--space-12); overflow: hidden; border-radius: var(--radius-lg); aspect-ratio: 16 / 9; background: var(--amber-950); }
.p-case__cover img { width: 100%; height: 100%; object-fit: cover; }

.p-case__metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: var(--space-6) var(--space-4); margin-top: var(--space-10); padding-bottom: var(--space-10); border-bottom: 1px solid var(--border-thin); }
.p-case__metric { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: var(--space-2); }
.p-case__metric dd { margin: 0; font-family: var(--font-body); font-weight: var(--fw-regular); font-size: 2rem; line-height: 1.05; letter-spacing: -0.02em; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.p-case__metric dt { font-weight: var(--fw-medium); font-size: var(--body-md-size); color: var(--text-medium); }

.p-case__layout { display: grid; gap: var(--space-10); margin-top: var(--space-12); }
.p-case__aside { display: grid; gap: var(--space-8); align-content: start; order: 2; } /* below the story on mobile, sticky rail on desktop */
.p-case__aside p { font-weight: var(--fw-medium); font-size: var(--body-md-size); color: var(--text-strong); }
.p-case__toc { display: none; }
.p-case__toc ul { display: grid; gap: var(--space-4); margin-top: var(--space-4); }
.p-case__toc a { position: relative; display: block; padding-left: var(--space-4); font-size: var(--body-md-size); color: var(--text-low); transition: color var(--dur) var(--ease); }
.p-case__toc a::before { content: ""; position: absolute; left: 0; top: 50%; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.3; transform: translateY(-50%) scale(0.7); transition: opacity var(--dur) var(--ease), transform var(--dur-slow) var(--ease-spring), background var(--dur) var(--ease); }
.p-case__toc a:hover, .p-case__toc a[aria-current] { color: var(--text-strong); }
.p-case__toc a[aria-current]::before { opacity: 1; background: var(--orange-500); transform: translateY(-50%) scale(1); }
.p-case__tools ul { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.p-case__cta { display: grid; justify-items: start; gap: var(--space-3); padding: var(--space-5); border-radius: var(--radius-md); background: var(--base-medium); }

.p-case__body { max-width: 640px; }
.p-case__section { scroll-margin-top: calc(var(--header-h) + var(--space-8)); }
.p-case__section + .p-case__section, .p-case__quote + .p-case__section { margin-top: var(--space-12); }
.p-case__section > * + * { margin-top: var(--space-4); }
.p-case__section h2 { margin-top: 0; }

/* Pull quote: the homepage case study's warm card in miniature */
.prose .p-case__quote { margin-top: var(--space-12); padding: var(--space-8) var(--space-6); border-radius: var(--radius-lg); background: linear-gradient(160deg, var(--amber-950), #2a0f02); color: var(--text-negative); }
.p-case__quote blockquote { padding: 0; font-family: var(--font-heading); font-weight: var(--fw-heading); font-size: var(--h5-size); line-height: 1.3; letter-spacing: var(--h5-ls); color: var(--text-negative); }
.p-case__quote blockquote::before { content: none; }
.p-case__quote figcaption { display: flex; align-items: center; gap: var(--space-4); margin-top: var(--space-6); font-size: var(--body-md-size); color: var(--stone-100); }
.p-case__quote figcaption img { width: 48px; height: 48px; border-radius: 8px; object-fit: cover; }
.p-case__quote figcaption span { display: grid; gap: 2px; opacity: 0.75; }
.p-case__quote figcaption strong { color: var(--text-negative); font-weight: var(--fw-medium); opacity: 1; }

.p-case__more { padding-top: var(--space-16); }
.p-case__more[hidden] { display: none; }
.p-case__more-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-8); }

@media (min-width: 768px) {
  .p-case__metric dd { font-size: 2.5rem; }
  .p-case__facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .prose .p-case__quote { padding: var(--space-10); }
}
@media (min-width: 1024px) {
  .p-case__hero { grid-template-columns: minmax(0, 1fr) 380px; gap: var(--space-16); align-items: end; }
  .p-case__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .p-case__title { font-size: var(--h2-size); line-height: var(--h2-lh); letter-spacing: var(--h2-ls); }
  .p-case__cover { aspect-ratio: 1232 / 560; }
  .p-case__metric dd { font-size: 3.5rem; }
  .p-case__layout { grid-template-columns: 280px minmax(0, 1fr); gap: var(--space-16); margin-top: 70px; }
  .p-case__aside { order: 0; position: sticky; top: calc(var(--header-h) + var(--space-8)); gap: var(--space-10); }
  .p-case__toc { display: block; }
  .p-case__quote blockquote { font-size: var(--h4-size); line-height: var(--h4-lh); letter-spacing: var(--h4-ls); }
  .p-case__more { padding-top: var(--space-24); }
}

/* Dark theme: dark-ink client logos flip to white on the page background */
:root[data-theme="dark"] .p-case__logo { filter: brightness(0) invert(1); }

@media (prefers-reduced-motion: reduce) {
  .cs-card *, .cs-card__media::after, .p-case__toc a::before, .p-cases__tabs .tabs__btn { transition-duration: 0.01ms !important; }
  .cs-card__link:hover * { transform: none !important; }
  .p-cases__grid .is-filtered-in { animation: none; }
  .p-case__progress { display: none; }
}