/* =============================================================
   Leveredge Media - assets/css/case-studies.css

   Case study archive and the two taxonomy archives. Loaded only on
   those routes, from the enqueue block in functions.php.

   Depends on base.css for tokens, .container, .btn, .breadcrumb,
   .overline and .section-title. Nothing here redefines those.
============================================================= */


/* -- Header -------------------------------------------------- */

#cs-hero {
  padding: clamp(96px, 12vw, 132px) 0 clamp(32px, 4vw, 44px);
}

.cs-hero-text { max-width: 720px; }

#cs-hero .section-title {
  margin: 14px 0 0;
  font-size: clamp(34px, 5.5vw, 54px);
  line-height: 1.06;
}

.cs-hero-lede {
  margin-top: 20px;
  font-size: clamp(17px, 2vw, 19px);
  line-height: 1.75;
  color: var(--white-2);
  max-width: 62ch;
}


/* -- Filters --------------------------------------------------
   Two groups on one bar. The chips are anchors, so they keep link
   semantics, keyboard behavior and middle click for free.
   ------------------------------------------------------------ */

#cs-filters { padding-bottom: 8px; }

.cs-filter-bar {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px 0 20px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.cs-filter-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.cs-filter-label {
  font-size: 13px;
  color: var(--muted);
  min-width: 64px;
}

.cs-chip {
  display: inline-block;
  padding: 7px 15px;
  border: 1px solid var(--border-2);
  border-radius: 999px;
  font-size: 14px;
  line-height: 1.3;
  color: var(--white-2);
  text-decoration: none;
  transition: border-color 0.16s ease, color 0.16s ease, background-color 0.16s ease;
}

.cs-chip:hover {
  border-color: var(--orange-border);
  color: var(--white);
}

.cs-chip.is-active {
  background: var(--orange);
  border-color: var(--orange);
  color: #0A0D16;
  font-weight: 600;
}

.cs-count {
  margin: 14px 0 0;
  font-size: 14px;
  color: var(--muted);
  min-height: 1.4em;   /* Reserve the line so filtering does not shift the grid. */
}


/* -- Grid ---------------------------------------------------- */

#cs-grid-section { padding: 28px 0 clamp(64px, 9vw, 104px); }

.cs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 26px;
}

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

.cs-card {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color 0.18s ease;
}

.cs-card:hover { border-color: var(--border-2); }

.cs-card[hidden] { display: none; }

.cs-card-thumb {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--card-2);
}

.cs-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cs-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 24px 24px 22px;
}

.cs-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 12px;
}

.cs-tag {
  font-size: 11.5px;
  letter-spacing: 0.01em;
  padding: 4px 9px;
  border-radius: 5px;
  background: var(--orange-soft);
  border: 1px solid var(--orange-border);
  color: var(--orange);
}

.cs-card-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 21px;
  line-height: 1.28;
  letter-spacing: -0.02em;
  font-weight: 700;
}

.cs-card-title a { color: var(--white); text-decoration: none; }
.cs-card-title a:hover { color: var(--orange); }

.cs-card-client {
  margin: 7px 0 0;
  font-size: 14px;
  color: var(--muted);
}

.cs-card-excerpt {
  margin: 13px 0 0;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--white-2);
}

/*
   The measured result. Given its own treatment because it is the one
   claim on the card, and it is a number observed on a build that the
   reader can go and check rather than an outcome asserted about a
   client who cannot be named.
*/
.cs-card-result {
  margin: 16px 0 0;
  padding: 12px 14px;
  border-left: 2px solid var(--orange);
  background: var(--card-2);
  border-radius: 0 8px 8px 0;
  font-family: var(--font-mono);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--white);
}

.cs-card-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 18px;
}

.cs-card-platform {
  font-size: 13px;
  color: var(--muted);
}

.cs-card-build {
  font-size: 14px;
  font-weight: 600;
  color: var(--orange);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.cs-card-build:hover { border-bottom-color: var(--orange); }


/* -- Empty results ------------------------------------------- */

.cs-empty {
  margin: 40px 0 0;
  padding: 26px;
  border: 1px dashed var(--border-2);
  border-radius: var(--r-lg);
  text-align: center;
  color: var(--white-2);
}

.cs-empty a { color: var(--orange); }

.cs-empty-state {
  max-width: 620px;
  padding: clamp(40px, 6vw, 60px) 0;
}

.cs-empty-state h2 {
  font-family: var(--font-display);
  font-size: clamp(24px, 3.4vw, 32px);
  letter-spacing: -0.02em;
  margin: 0;
}

.cs-empty-state p {
  margin: 16px 0 0;
  color: var(--white-2);
  line-height: 1.75;
}

.cs-empty-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}


/* -- Pagination ---------------------------------------------- */

.navigation.pagination { margin-top: 48px; }

.navigation.pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.navigation.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--border-2);
  border-radius: 9px;
  color: var(--white-2);
  font-size: 15px;
  text-decoration: none;
}

.navigation.pagination .page-numbers:hover { border-color: var(--orange-border); color: var(--white); }

.navigation.pagination .page-numbers.current {
  background: var(--orange);
  border-color: var(--orange);
  color: #0A0D16;
  font-weight: 600;
}

.navigation.pagination .screen-reader-text {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}


/* -- Closing ------------------------------------------------- */

#cs-cta {
  padding: clamp(56px, 8vw, 88px) 0 clamp(72px, 10vw, 112px);
  border-top: 1px solid var(--border);
}

.cs-cta-inner { max-width: 640px; }

.cs-cta-inner h2 {
  font-family: var(--font-display);
  font-size: clamp(25px, 3.6vw, 36px);
  line-height: 1.18;
  letter-spacing: -0.02em;
  margin: 0;
}

.cs-cta-inner p {
  margin: 16px 0 0;
  color: var(--white-2);
  line-height: 1.75;
}

.cs-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}


/* -- Motion -------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .cs-card, .cs-chip { transition: none; }
}