/* ─────────────────────────────────────────────────────────────────
   CASE STUDY — shared structural styles
   Used by SDM.html, a-check.html, joule-studio.html.
   Page-specific color tokens (e.g. --sdm-primary, --ac-primary,
   --js-primary) and one-off components stay in each page's inline
   <style> block — only structure shared by 2+ case studies lives here.
   ───────────────────────────────────────────────────────────────── */

.cs-body { background-color: var(--bg-surface); }

/* ─── LAYOUT ────────────────────────────────────────────────────── */
.cs-layout {
  display: flex;
  align-items: flex-start;
  position: relative;
}

/* ─── SIDE NAV ──────────────────────────────────────────────────── */
.cs-sidenav {
  position: fixed;
  top: 140px;
  left: var(--spacing-small);
  padding: var(--spacing-small);
  width: 132px;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-small);
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  z-index: 10;
}
.cs-sidenav.is-visible { opacity: 1; transform: translateX(0); }
.cs-sidenav-links { display: flex; flex-direction: column; gap: var(--spacing-tiny); }

.cs-sidenav-home,
.cs-sidenav-top {
  font-family: 'Geist', sans-serif;
  font-weight: 500;
  font-size: 12px;
  color: var(--text-primary);
  background: none;
  padding: 6px 10px;
  border-radius: 999px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  width: fit-content;
  transition: color 0.2s ease;
  line-height: 1.4;
}
.cs-sidenav-home:hover, .cs-sidenav-top:hover { color: var(--text-brand-primary); }

.cs-sidenav-link {
  font-family: 'Geist', sans-serif;
  font-weight: 400;
  font-size: 12px;
  color: var(--text-secondary);
  padding: 6px 10px;
  border-radius: 999px;
  text-decoration: none;
  transition: color 0.2s ease, background-color 0.2s ease, font-weight 0.2s ease;
  line-height: 1.4;
  white-space: nowrap;
  display: block;
  width: fit-content;
}
.cs-sidenav-link:hover { color: var(--text-primary); }
.cs-sidenav-link.is-active {
  color: var(--text-primary);
  background-color: var(--bg-container);
  font-weight: 500;
}

@media (max-width: 1024px) {
  .cs-sidenav { display: none !important; }
}

.cs-content { flex: 1; min-width: 0; }

/* ─── COVER ─────────────────────────────────────────────────────── */
.cs-cover {
  padding: calc(96px + var(--spacing-medium)) max(var(--spacing-medium), calc((100% - 920px) / 2)) var(--spacing-large);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-medium);
  box-sizing: border-box;
  background: var(--bg-surface);
}

/* Reserve the same clearance as .cs-section above the sidenav's
   hide breakpoint (1024px), so cover content never sits under the
   fixed sidenav even though this block is otherwise centered. */
@media (min-width: 1025px) {
  .cs-cover { padding-left: max(180px, calc((100% - 920px) / 2)); }
}

.cs-cover-title {
  font-family: 'Geist', sans-serif;
  font-weight: 500;
  font-size: 28px;
  color: var(--text-primary);
  text-align: center;
  line-height: 1.2;
  transition: color var(--transition-slow);
  width: 100%;
}

.cs-cover-desc {
  font-family: 'Geist', sans-serif;
  font-weight: 400;
  font-size: var(--font-body-regular);
  color: var(--text-secondary);
  text-align: center;
  line-height: 1.5;
  transition: color var(--transition-slow);
  margin-top: calc(8px - var(--spacing-medium));
}

.cs-cover-tags {
  display: flex;
  gap: var(--spacing-tiny);
  justify-content: center;
  flex-wrap: wrap;
}

.cs-cover-tags .tag {
  padding-left: 4px;
  padding-right: 4px;
}

/* .cs-cover .tag uses each page's primary/secondary color tokens —
   stays page-specific (see each page's inline <style> block). */

/* ─── COVER HERO ────────────────────────────────────────────────── */
/* Fixed-height container shared by every case study so covers read as
   one consistent system. Each page only sets its own background-color
   (its secondary token) inline. Images keep their natural aspect ratio
   and scale to fit via object-fit: contain — never stretched, never
   cropped, no two assets need to share a shape. */
.cs-cover-hero {
  width: 100%;
  height: clamp(280px, 59.26vw, 640px);
  padding: var(--spacing-large) 80px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.cs-cover-hero-img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

/* ─── COVER META ──────────────────────────────────────────────────── */
/* .cs-cover-meta itself (grid-template-columns/gap) and .cs-meta-label
   color (page-primary token) vary per page — stay page-specific. */
.cs-meta-item {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-tiny);
  min-width: 0;
}

.cs-meta-value {
  font-family: 'Geist', sans-serif;
  font-weight: 400;
  font-size: var(--font-body-small);
  color: var(--text-primary);
  line-height: 1.5;
  transition: color var(--transition-slow);
}

/* ─── SECTION BASE ──────────────────────────────────────────────── */
:root {
  --cs-content-width: clamp(920px, 76vw, 1104px);
}

.cs-section {
  padding: var(--spacing-xlarge) max(var(--spacing-medium), calc((100% - var(--cs-content-width)) / 2));
  padding-left: max(180px, calc((100% - var(--cs-content-width)) / 2 + 164px));
  scroll-margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-large);
  box-sizing: border-box;
}

@media (max-width: 1024px) {
  .cs-section { padding-left: max(24px, calc((100% - 920px) / 2)); }
}

.cs-section-label {
  font-family: 'Geist', sans-serif;
  font-weight: 400;
  font-size: var(--font-label);
  color: var(--text-label);
  line-height: normal;
}

.cs-section-body {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xlarge);
}

/* ─── CONTENT BLOCKS ────────────────────────────────────────────── */
.cs-block {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-medium);
}

.cs-block-text {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-small);
}

.cs-h2 {
  font-family: 'Geist', sans-serif;
  font-weight: 500;
  font-size: 24px;
  color: var(--text-primary);
  line-height: 1.2;
  transition: color var(--transition-slow);
}

.cs-h3 {
  font-family: 'Geist', sans-serif;
  font-weight: 500;
  font-size: 20px;
  color: var(--text-primary);
  line-height: 1.2;
  transition: color var(--transition-slow);
}

.cs-body-text {
  font-family: 'Geist', sans-serif;
  font-weight: 400;
  font-size: var(--font-body-regular);
  color: var(--text-secondary);
  line-height: 1.6;
  transition: color var(--transition-slow);
}

/* ─── FLOW CAPTION ──────────────────────────────────────────────── */
.cs-flow-caption {
  font-family: 'Geist', sans-serif;
  font-weight: 400;
  font-size: var(--font-body-small);
  color: var(--text-label);
  text-align: center;
  line-height: normal;
}

/* ─── DIAGRAM / IMAGE CONTAINERS ────────────────────────────────── */
.cs-diagram-box {
  background-color: var(--bg-container);
  border-radius: var(--radius-l);
  overflow: hidden;
  width: 100%;
}

.cs-diagram-box img {
  width: 100%;
  height: auto;
  display: block;
}

.cs-placeholder {
  background-color: var(--bg-container);
  border-radius: var(--radius-l);
  width: 100%;
  height: 400px;
  transition: background-color var(--transition-slow);
}

/* ─── NEXT PROJECT ──────────────────────────────────────────────── */
.cs-next-divider {
  height: 1px;
  background: transparent;
  margin: 0 max(var(--spacing-medium), calc((100% - var(--cs-content-width)) / 2));
  margin-left: max(180px, calc((100% - var(--cs-content-width)) / 2 + 164px));
  border-top: 1px solid var(--border-container);
}

.cs-next-section {
  padding: var(--spacing-xlarge) max(var(--spacing-medium), calc((100% - var(--cs-content-width)) / 2));
  padding-left: max(180px, calc((100% - var(--cs-content-width)) / 2 + 164px));
  display: flex;
  flex-direction: column;
  gap: var(--spacing-large);
  background: var(--bg-surface);
  box-sizing: border-box;
}

.cs-next-heading {
  font-family: 'Geist', sans-serif;
  font-weight: 500;
  font-size: 20px;
  color: var(--text-primary);
  line-height: normal;
  transition: color var(--transition-slow);
}

.cs-next-cards {
  display: flex;
  gap: var(--spacing-large);
  width: 100%;
}

.cs-next-card {
  background: none;
  border-radius: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-small);
  flex: 1;
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--transition-base);
}

.cs-next-card:hover { transform: translateY(-4px); }

.cs-next-card-image {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-l);
  overflow: hidden;
  position: relative;
}
.cs-next-card-image img,
.cs-next-card-image video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ─── RESPONSIVE ────────────────────────────────────────────────── */
/* Only the rules identical across all three pages live here.
   .cs-next-divider margins and .cs-cover-meta/.cs-cover-hero overrides
   differ per page — those stay in each page's inline <style>.
   .cs-section's padding-right (and .cs-next-section, unaffected by
   the sidenav) can shrink at 1100px, but padding-left must not drop
   below the sidenav's hide breakpoint (1024px) — otherwise there's a
   window where the fixed sidenav is visible but content has lost its
   clearance and renders underneath it. */
@media (max-width: 1100px) {
  .cs-section      { padding-right: var(--spacing-large); }
  .cs-next-section { padding-left: var(--spacing-large); padding-right: var(--spacing-large); }
}

@media (max-width: 768px) {
  .cs-section      { padding-left: var(--spacing-medium); padding-right: var(--spacing-medium); }
  .cs-cover        { padding-left: var(--spacing-medium); padding-right: var(--spacing-medium); }
  .cs-next-section { padding-left: var(--spacing-medium); padding-right: var(--spacing-medium); }
  .cs-next-cards   { flex-direction: column; }
}