/* ==========================================================================
   Augmented Systems — Case Studies listing & detail pages (scoped)
   Extends the shared theme. Reuses every brand token defined in
   home-revamp.css (:root --as-*), the .as-case card + .as-cs spotlight from
   home-revamp.css, and the breadcrumb / hero / overview-panel / challenge /
   outcome-rail / process-six / job-filter patterns already shipped in
   business-solution.css and careers.css. Only adds the ONE new pattern these
   pages need with no existing equivalent: the Client Overview facts list.

   Load order on the page: home-revamp.css -> business-solution.css ->
   careers.css (job-filter/empty-state patterns) -> case-studies.css
   Nothing here overrides global theme files — all rules are prefixed .as-*.
   ========================================================================== */
:root {
  --as-grape: #3b6fd4;
  --as-grape-dark: #3059ab;
  --as-ink: #343f52;
  --as-body: #60697b;
  --as-soft: #f2f3fb;
  --as-line: #e6e5f4;
  --as-radius: 0.8rem;
  --as-shadow: 0 0.25rem 1.75rem rgba(30, 34, 40, 0.06);
  --as-shadow-hover: 0 1rem 2.5rem rgba(96, 93, 186, 0.16);
}

/* ==========================================================================
   SEC-NEW — CLIENT OVERVIEW facts list (inside the reused .as-overview-panel)
   ========================================================================== */
.as-fact-list { margin: 0; }
.as-fact-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--as-line);
}
.as-fact-row:last-child { border-bottom: none; padding-bottom: 0; }
.as-fact-row:first-child { padding-top: 0; }
.as-fact-row dt {
  font-size: clamp(12.5px, 0.25vw + 11.5px, 13.5px);
  color: var(--as-body);
  font-weight: 600;
}
.as-fact-row dd {
  margin: 0;
  font-size: clamp(13px, 0.25vw + 12px, 14.5px);
  color: var(--as-ink);
  font-weight: 700;
  text-align: right;
}

/* Case card grid column: keeps the filter-hidden state's transition tidy
   (no layout jump when a card is toggled back to visible). */
.as-case-col { transition: none; }

@media (max-width: 767.98px) {
  .as-fact-row dt, .as-fact-row dd { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .as-case { transition: none !important; }
  .as-case:hover { transform: none !important; }
}

/* ==========================================================================
   CASE STUDY LISTING — CLIENT REFERENCE LAYOUT  (added 2026-08-19)
   Reference: /case-studies

     .as-csfilt*   pill filter groups + rounded search field
     .as-cscard*   full-bleed photo card with a dark scrim and copy over it

   The card is dark BY DESIGN — the darkness comes from the gradient scrim over
   the photograph, not from the page background — so the reference card drops
   straight onto our light page without a dark theme.

   px, not rem — the theme sets :root{font-size:20px}.
   ========================================================================== */

.as-csfilt,
.as-csfilt-meta,
.as-cs-grid {
  --cs-ink: #0f1b33;
  --cs-body: #5b6579;
  --cs-blue: #3b6fd4;
  --cs-orange: #f4692a;
  --cs-line: #dde4ee;
}

/* ==========================================================================
   FILTER BAR  (.as-csfilt)
   ========================================================================== */
.as-csfilt {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-bottom: 18px;
}
.as-csfilt-groups {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 40px;
  min-width: 0;
}
.as-csfilt-group { min-width: 0; }

.as-csfilt-label {
  display: block;
  margin-bottom: 10px;
  color: #7c8496;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* Pill group */
.as-csfilt-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.as-csfilt-pill {
  appearance: none;
  border: 1px solid var(--cs-line);
  background: #fff;
  border-radius: 999px;
  padding: 7px 16px;
  color: var(--cs-body);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.3;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}
.as-csfilt-pill:hover {
  color: var(--cs-ink);
  border-color: var(--cs-blue);
}
.as-csfilt-pill:focus-visible {
  outline: 2px solid var(--cs-blue);
  outline-offset: 2px;
}
.as-csfilt-pill.is-active {
  background: var(--cs-blue);
  border-color: var(--cs-blue);
  color: #fff;
}

/* Right-hand controls */
.as-csfilt-right {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.as-csfilt-field { position: relative; min-width: 0; }

.as-csfilt-select,
.as-csfilt-search input {
  appearance: none;
  width: 100%;
  border: 1px solid var(--cs-line);
  background: #fff;
  border-radius: 999px;
  padding: 11px 18px;
  color: var(--cs-ink);
  font-family: inherit;
  font-size: 13.5px;
  line-height: 1.3;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.as-csfilt-select {
  padding-right: 38px;
  /* Chevron drawn inline so no image request is needed. */
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%235b6579' stroke-width='1.8'%3E%3Cpath d='M4 6.5 8 10.5l4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  background-size: 14px 14px;
  cursor: pointer;
}
.as-csfilt-search { flex: 1 1 240px; }
.as-csfilt-search input { padding-left: 42px; }
.as-csfilt-search i {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #9aa3b4;
  font-size: 16px;
  pointer-events: none;
}
.as-csfilt-search input::placeholder { color: #9aa3b4; }
.as-csfilt-select:focus,
.as-csfilt-search input:focus {
  outline: none;
  border-color: var(--cs-blue);
  box-shadow: 0 0 0 3px rgba(59, 111, 212, 0.15);
}
/* Kill the native clear affordance so the pill shape stays clean */
.as-csfilt-search input::-webkit-search-cancel-button { -webkit-appearance: none; }

/* Count + clear */
.as-csfilt-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 28px;
}
.as-csfilt-count {
  color: var(--cs-body);
  font-size: 13.5px;
}
.as-csfilt-clear {
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  color: var(--cs-blue);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
}
.as-csfilt-clear:hover { text-decoration: underline; }
.as-csfilt-clear:focus-visible { outline: 2px solid var(--cs-blue); outline-offset: 3px; }

/* Desktop: groups left, search right, on one line. */
@media (min-width: 992px) {
  .as-csfilt {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
  }
  .as-csfilt-right { flex: 0 0 auto; }
  .as-csfilt-search { flex: 0 0 250px; }
}

@media (max-width: 575.98px) {
  .as-csfilt-groups { gap: 18px 24px; }
  .as-csfilt-pill { padding: 6px 13px; font-size: 12px; }
  .as-csfilt-right { flex-direction: column; align-items: stretch; }
  .as-csfilt-search { flex: 1 1 auto; }
}

/* ==========================================================================
   OVERLAY CARD  (.as-cscard)
   ========================================================================== */
.as-cscard {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 22px;
  aspect-ratio: 4 / 5;
  border: 1px solid var(--cs-line);
  background: #0d1526;          /* shows while the photo loads */
  text-decoration: none;
  isolation: isolate;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.as-cscard:hover,
.as-cscard:focus-visible {
  transform: translateY(-6px);
  box-shadow: 0 22px 44px rgba(15, 27, 51, 0.22);
}
.as-cscard:focus-visible { outline: 2px solid var(--cs-blue); outline-offset: 3px; }

.as-cscard-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s ease;
}
.as-cscard:hover .as-cscard-img { transform: scale(1.05); }

/* Dark scrim: opaque at the bottom so the copy always clears AA, fading out
   towards the top so the photograph still reads. */
.as-cscard-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(3, 7, 18, 0.95) 0%,
    rgba(3, 7, 18, 0.78) 32%,
    rgba(3, 7, 18, 0.35) 62%,
    rgba(3, 7, 18, 0.12) 100%);
}

.as-cscard-body {
  position: absolute;
  inset: auto 0 0 0;
  display: block;
  padding: 26px;
}

.as-cscard-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  line-height: 1.3;
  text-transform: uppercase;
}
.as-cscard-tag--solution { color: #7ea5f8; }
.as-cscard-tag--industry { color: #fb9a6d; }

.as-cscard-title {
  display: block;
  margin-top: 10px;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.01em;
  transition: color 0.25s ease;
}
.as-cscard:hover .as-cscard-title { color: #dbe8ff; }

.as-cscard-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.as-cscard-metric { display: block; min-width: 0; }
.as-cscard-metric-num {
  display: block;
  color: #3b82f6;
  font-size: 22px;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.as-cscard-metric-lbl {
  display: block;
  margin-top: 2px;
  color: #94a3b8;
  font-size: 11px;
  line-height: 1.35;
}

/* Fallback line when no outcome carries a figure. */
.as-cscard-key {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  color: #cbd5e1;
  font-size: 12.5px;
  line-height: 1.5;
}
.as-cscard-key i { color: #3b82f6; font-size: 15px; line-height: 1.35; flex: 0 0 auto; }

@media (max-width: 575.98px) {
  .as-cscard { aspect-ratio: 4 / 4.4; border-radius: 16px; }
  .as-cscard-body { padding: 20px; }
  .as-cscard-title { font-size: 16.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .as-cscard, .as-cscard-img, .as-cscard-title, .as-csfilt-pill { transition: none !important; }
  .as-cscard:hover { transform: none !important; }
  .as-cscard:hover .as-cscard-img { transform: none !important; }
}