/* ============================================================
   archive-case-study.css  —  Case Studies Archive (post_type = case_study)
   Template    : archive-case_study.php
   Deps        : intone-design-system + intone-theme-tokens + page-blogs.css
                 (hero, .blogs-case-card, pagination, empty state all
                 reused as-is from page-blogs.css — this file only adds
                 the paginated grid wrapper the carousel version doesn't
                 need, plus the page background/padding.)
   ============================================================ */

.intone-case-study-page {
  padding-top: clamp(80px, 12vw, 120px);
  background: #fff;
}

[data-theme="dark"] .intone-case-study-page {
  background: var(--t-bg);
}

/* ── Breadcrumb ──────────────────────────────────────────────────────────
   Same fix as single-post.css's "── Breadcrumb ──" block: the shared
   .intone-breadcrumb component (template-parts/breadcrumbs.php) was written
   assuming intone-design-system.css would supply its typography/colors —
   that file does not exist on this site, so this archive's breadcrumb
   rendered as bare unstyled inline links (single.php got this fix; this
   archive template never did, despite using the identical component).
   ─────────────────────────────────────────────────────────────────────── */
.intone-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  max-width: 1440px;
  padding: 20px 44px 0;
  font-family: var(--ds-font-heading, 'Public Sans', sans-serif);
  font-size: 13px;
  line-height: 20px;
}

.intone-breadcrumb__link {
  color: var(--t-text-muted, #818994);
  text-decoration: none;
  transition: color .15s ease;
}

.intone-breadcrumb__link:hover,
.intone-breadcrumb__link:focus-visible {
  color: var(--ds-navy-primary, #233963);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.intone-breadcrumb__current {
  color: var(--ds-navy, #1e2e4c);
  font-weight: 500;
  max-width: 46ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.intone-case-study-page .intone-breadcrumb {
  margin: 0 auto;
  box-sizing: border-box;
}

@media screen and (max-width: 640px) {
  .intone-breadcrumb { padding: 16px 20px 0; font-size: 12px; }
  .intone-breadcrumb__current { max-width: 24ch; }
}

.cs-archive-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-bottom: 64px;
}

/* .blogs-case-card sets a flex-track width (calc(33.333% - 16px)) for its
   carousel context — inside a CSS grid the track sizing already comes
   from the grid column, so drop the explicit width. */
.cs-archive-grid .blogs-case-card {
  width: auto;
}

@media (max-width: 1100px) {
  .cs-archive-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .cs-archive-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
}