/* ============================================================
 * case-studies-archive.css
 *
 * Page-specific styles for archive-case_study.php (Tier-2 archive
 * at /case-studies/).
 *
 * Contents:
 *   1. .case-studies-archive-filter-* — 4-axis filter bar
 *      (Client / Brand / Year / Awards). New family added in v3
 *      (3-axis) and extended in v4 (Awards axis).
 *   2. .case-studies-archive-empty — JS-driven empty state shown
 *      when active filter combination yields zero matches.
 *   3. .work-archive-* — uniform 2-up grid + card grammar.
 *      Backwards-compatible with v1's hooks (canonical line 2350:
 *      "the archive section + cards still use `.work-archive`,
 *      `.work-archive-card`, `.work-archive-*` etc.").
 *
 * NOT INCLUDED here (lifted to base.css per op-learning #16):
 *   - .case-related, .case-related-header, .case-related-label,
 *     .case-related-headline (shared section-introduction wrapper
 *     used by single-case_study.php tail rail and other surfaces).
 *
 * Lifted verbatim from locked canonical
 * `flibbr-design-mockup-final-case-studies-archive.html`
 * lines 1920-2208 (de-indented from the canonical's 2-space
 * <style>-block indentation).
 *
 * @package Flibbr
 * @since   0.5.47
 */

.case-studies-archive-filters {
  margin-bottom: var(--s-8);
  padding: var(--s-6) 0 var(--s-7);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule-soft);
  display: flex; flex-direction: column;
  gap: var(--s-5);
}
.case-studies-archive-filter-row {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: var(--s-5);
  align-items: baseline;
}
@media (max-width: 880px) {
  .case-studies-archive-filter-row {
    grid-template-columns: 1fr;
    gap: var(--s-3);
  }
  /* G.3b — filter pill tap-target; G.3c — added min-width to lift .is-active to 44 */
  .case-studies-archive-filter-pill {
    min-height: 44px;
    min-width: 44px;
  }
}
.case-studies-archive-filter-label {
  font-family: var(--sans); font-weight: 600;
  font-size: 11px; line-height: 1.2;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-quiet);
  padding-top: var(--s-2);
}
.case-studies-archive-filter-pills {
  display: flex; flex-wrap: wrap; gap: var(--s-2);
}
.case-studies-archive-filter-pill {
  display: inline-flex; align-items: center;
  border: 0; padding: 0; font: inherit;
  background: transparent; cursor: pointer;
  font-family: var(--sans); font-weight: 500;
  font-size: 12px; line-height: 1;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--paper);
  transition: border-color var(--motion-duration-ui) var(--motion-ease-ui),
              color var(--motion-duration-ui) var(--motion-ease-ui),
              background var(--motion-duration-ui) var(--motion-ease-ui);
}
.case-studies-archive-filter-pill:hover {
  border-color: var(--ink);
  color: var(--ink);
}
.case-studies-archive-filter-pill:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.case-studies-archive-filter-pill.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
.case-studies-archive-filter-pill.is-active:hover {
  background: var(--ink);
}

.case-studies-archive-filter-status {
  display: flex; flex-wrap: wrap;
  gap: var(--s-4);
  align-items: baseline;
  margin-top: var(--s-3);
  padding-top: var(--s-4);
  border-top: 1px solid var(--rule-soft);
  font-family: var(--sans); font-size: 12px;
  color: var(--ink-quiet);
  letter-spacing: 0.04em;
}
.case-studies-archive-filter-count strong {
  color: var(--ink); font-weight: 600;
}
.case-studies-archive-filter-clear {
  border: 0; padding: 0; font: inherit;
  background: transparent; cursor: pointer;
  font-family: var(--sans); font-size: 12px;
  color: var(--accent);
  letter-spacing: 0.04em;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color var(--motion-duration-ui) var(--motion-ease-ui);
}
.case-studies-archive-filter-clear:hover {
  color: var(--ink);
}
.case-studies-archive-filter-clear[hidden] {
  display: none;
}

/* Cards hidden by JS when filter combination doesn't match */
.work-archive-card[hidden] {
  display: none;
}

/* Empty state — NEW in v3. Hidden by default. Shown via JS
   when active filter combination yields zero matches. */
.case-studies-archive-empty {
  margin-top: var(--s-7);
  padding: var(--s-8) var(--s-6);
  border: 1px solid var(--rule-soft);
  background: var(--paper-warm);
  text-align: center;
}
.case-studies-archive-empty[hidden] {
  display: none;
}
.case-studies-archive-empty-headline {
  margin: 0 0 var(--s-3) 0;
  font-family: var(--serif); font-weight: 400;
  font-style: italic;
  font-size: clamp(18px, 1.8vw, 22px); line-height: 1.3;
  color: var(--ink);
}
.case-studies-archive-empty-supporting {
  margin: 0;
  font-family: var(--sans); font-size: 13px;
  color: var(--ink-soft);
}
.case-studies-archive-empty-action {
  border: 0; padding: 0; font: inherit;
  background: transparent; cursor: pointer;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color var(--motion-duration-ui) var(--motion-ease-ui);
}
.case-studies-archive-empty-action:hover {
  color: var(--ink);
}


/* Work archive section */
.work-archive {
  padding-block: var(--s-9);
}

.work-archive-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-9) var(--s-7);
}
@media (max-width: 880px) {
  .work-archive-grid {
    grid-template-columns: 1fr;
    gap: var(--s-8);
  }
}

.work-archive-card {
  display: flex; flex-direction: column;
  gap: var(--s-4);
  text-decoration: none; color: inherit;
  padding: 0 var(--s-4) var(--s-4);
  border-radius: 4px;
  transition: box-shadow var(--motion-duration-content) var(--motion-ease-content);
}
.work-archive-card:hover {
  box-shadow: 0 8px 32px rgba(20,20,19,.06);
}
/* Coming-to-archive cards are non-clickable in v2 (rendered
   as <div>, not <a>). Suppress the hover lift so the card
   doesn't signal interactivity it doesn't have, and remove
   the pointer cursor. */
.work-archive-card.is-coming {
  cursor: default;
}
.work-archive-card.is-coming:hover {
  box-shadow: none;
}

.work-archive-image {
  background: var(--paper-warm);
  aspect-ratio: 4/3;
  position: relative; overflow: hidden;
  margin-inline: calc(var(--s-4) * -1);
}
.work-archive-image::before {
  content: "image"; position: absolute;
  bottom: var(--s-3); left: var(--s-3);
  font-family: var(--sans); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-quiet);
}
/* When a real image is present, hide the placeholder "image"
   caption and let the <img> fill the frame. v0.5.83. */
.work-archive-image.has-image::before { content: none; }
.work-archive-image.has-image img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--motion-duration-content) var(--motion-ease-content),
              filter var(--motion-duration-content) var(--motion-ease-content);
}
.work-archive-card:hover .work-archive-image.has-image img {
  transform: scale(1.012);
  filter: brightness(0.96);
}
/* Unbuilt teasers get a slightly quieter image well — signals
   "this is a placeholder" without a heavy treatment. */
.work-archive-card.is-coming .work-archive-image {
  background: repeating-linear-gradient(
    135deg,
    var(--paper-warm) 0 12px,
    var(--paper) 12px 24px
  );
}

.work-archive-content {
  display: flex; flex-direction: column;
  gap: var(--s-3);
}

.work-archive-headline {
  margin: 0;
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1.20;
  color: var(--ink);
  letter-spacing: -0.005em;
  max-width: 28ch;
}
.work-archive-headline em { font-style: italic; }

/* Unbuilt teaser headlines render in ink-quiet so [Headline TBD]
   doesn't compete with real headlines on the same page. */
.work-archive-card.is-coming .work-archive-headline {
  color: var(--ink-quiet);
  font-style: italic;
}

.work-archive-meta {
  display: flex; flex-wrap: wrap; gap: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px solid var(--rule-soft);
  margin-top: var(--s-2);
  font-family: var(--sans); font-size: 12px;
  color: var(--ink-soft);
}
.work-archive-meta strong {
  font-weight: 600; color: var(--ink);
}
.work-archive-meta > * + *::before {
  content: "·"; color: var(--ink-quiet); margin-right: var(--s-3);
}

/* Optional recognition strip — sans-caps, quiet. Inherits the
   Single's awards-strip grammar. Only appears on cards that
   warrant it (in v1, only NFITS). */
.work-archive-recognition {
  margin-top: var(--s-3);
  font-family: var(--sans); font-weight: 400;
  font-size: 10px; line-height: 1.5;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-quiet);
  opacity: 0.7;
}

/* "Coming to the archive" flag — replaces the recognition strip
   on unbuilt teasers. Same visual weight, different signal. */
.work-archive-flag {
  margin-top: var(--s-3);
  font-family: var(--sans); font-weight: 500;
  font-size: 10.5px; line-height: 1.4;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent);
}

/* Pagination — single-page state in v1.
   Live with the_posts_pagination() in build. */
.work-archive-pagination {
  margin-top: var(--s-9);
  padding-top: var(--s-5);
  border-top: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-5);
}
.work-archive-pagination-label {
  font-family: var(--sans); font-size: 12px;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--ink-quiet);
}
.work-archive-pagination-controls {
  display: flex; gap: var(--s-4);
  font-family: var(--serif); font-size: 22px;
  color: var(--ink-quiet);
}
.work-archive-pagination-arrow.is-disabled {
  opacity: 0.35; cursor: not-allowed;
}
@media (max-width: 540px) {
  .work-archive-pagination {
    flex-direction: column; align-items: flex-start;
    gap: var(--s-3);
  }
}