/**
 * cdob-content-index.css | v0.3.0 | 2026-08-12 | Generated by Claude, session CDOB-CPT-S3
 * (v0.2.0 2026-08-11 CDOB-CPT-S2; v0.1.0 2026-08-11 CDOB-CPT-S1, drafted, never deployed)
 *
 * v0.3.0 (CDOB-CPT-S3, owner-directed): the three index pages go FULL WIDTH,
 * the control set becomes a two-tier horizontal bar, and the card grid is
 * pinned to three columns.
 *   (1) NEW .cdob-content .cdob-prose.cdob-prose--index lifts the 70ch reading
 *       cap, the load-bearing half of the change. Removing the sidebar without
 *       it leaves the grid inside a ~700px measure, still two-up.
 *   (2) .cdob-ci-controls--bar becomes 3 equal tracks + auto: the search field
 *       spans the three, everything after it auto-flows into tier two. The
 *       mobile query now RESETS that span, because span 3 in a one-track grid
 *       generates implicit columns rather than clamping.
 *   (3) .cdob-ci-grid drops auto-fill for an explicit 3 / 2 / 1 ladder.
 * The --rail rules below are retained and are now unexercised; the rail
 * placement is dormant, not deleted (parts/cdob-content-index.php v0.3.0).
 * No token, colour, or contrast value changed in this revision, so the
 * contrast table above still holds without re-derivation.
 *
 * v0.2.0 (CDOB-CPT-S2): pre-deploy gate found four classes the markup emits
 * with no rule anywhere. .cdob-ci-featured and .cdob-ci-grid--feat now carry
 * the divider and spacing that make the featured strip read as a strip rather
 * than as the first rows of the same list. .cdob-ci-wrap and .cdob-ci-results
 * stay ruleless and are now documented as deliberate, so the next gate can tell
 * a decision from an omission. No token, colour, or contrast value changed.
 *
 * The searchable index engine (.cdob-ci-*) for News Articles, Pop Culture and
 * the Resource Library. Enqueued by the plugin loader on pages carrying
 * [cdob_content_index], and on the single views of the three CPTs, which render
 * the source block this sheet also owns.
 *
 * DECLARES cdob-forms AS A DEPENDENCY. The controls are built from
 * .cdob-input / .cdob-label / .cdob-btn, and that baseline lives only in
 * css/cdob-forms.css. Enqueuing this sheet without it is exactly the CDOB-M9
 * defect where three browse surfaces rendered their filter controls with raw
 * browser defaults; a declared dependency also makes the cascade order
 * deterministic rather than enqueue-order dependent (lesson 148).
 *
 * TWO PLACEMENTS, ONE FAMILY. .cdob-ci-controls is the shared control set;
 * --bar lays it out horizontally above the grid and --rail stacks it in the
 * sidebar. The modifiers change layout ONLY. No control, label, or value is
 * styled differently between the two, because they are the same component and
 * a visitor who uses both should not have to learn it twice.
 *
 * Contrast (sRGB-linearized, derived this session; the first six reproduce the
 * values cdob-directories.css v0.3.1 documents, recomputed rather than copied):
 *   ink #1f1f1f on paper                       16.48
 *   navy #2c3c77 on paper                      10.40
 *   navy on 8% navy tint over paper             9.08
 *   ink on 4% navy tint over paper             15.42
 *   on-light-meta #555 on paper                 7.46
 *   paper on ink                               16.48
 *   fir #1e4d2b on paper                        9.76   NEW
 *   fir on 8% fir tint over paper               8.55   NEW
 *   navy on 4% navy tint over paper             9.72   NEW
 *   on-light-meta #555 on 4% navy tint          6.97   NEW
 *
 * FLAME IS DELIBERATELY ABSENT from every text pair here. flame #f0523d on
 * paper is 3.51, which clears the 3:1 non-text floor and FAILS the 4.5:1
 * requirement for the badge-sized text it would otherwise have carried. The
 * Featured badge uses fir instead. Flame stays available for a future
 * non-text accent, where 3.51 is sufficient.
 */

/* ============================================================
   1. Controls, shared by both placements
   ============================================================ */

.cdob-ci-controls {
  display: grid;
  gap: 12px 16px;
  margin: 0 0 24px;
}

.cdob-ci-field {
  min-width: 0; /* lets a select shrink inside the grid track instead of overflowing */
}

.cdob-ci-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cdob-ci-clear {
  font-size: var(--fs-400);
  color: var(--cdob-navy); /* 10.40 on paper */
}

.cdob-ci-count {
  margin: 0;
  font-size: var(--fs-400);
  color: var(--cdob-on-light-meta); /* 7.46 on paper */
}

/* -- Bar placement: horizontal strip above the grid ------------------- */

/* FULL-WIDTH INDEX PAGES (CDOB-CPT-S3, owner-directed: the sidebar is removed
   from the three index pages). page.php v0.10.0 drops .cdob-layout, skips
   get_sidebar(), and emits .cdob-prose--index. cdob-core.css caps
   `.cdob-content .cdob-prose { max-width: 70ch }` at (0,2,0); this rule is
   (0,3,0), so it beats the cap deterministically without depending on enqueue
   order. This is the SAME mechanism css/cdob-catalogue.css v0.2.0 uses for the
   store pages, reused rather than reinvented.

   WITHOUT THIS RULE, REMOVING THE SIDEBAR BUYS NOTHING: the grid would still
   render inside a ~700px measure and still seat two cards. That is exactly the
   trap CDOB-WOO-S15 fell into on the store, where full-width chrome had
   already shipped and the grid stayed two-up for another whole session. */
.cdob-content .cdob-prose.cdob-prose--index {
  max-width: none;
}

.cdob-ci-controls--bar {
  /* TWO TIERS (CDOB-CPT-S3, owner-directed). Tier 1 is the search field across
     the three equal tracks plus Order; tier 2 is Kind/Medium/Format, Topic,
     Location, then Apply. Only the search field is placed explicitly and
     everything after it auto-flows, so an index whose Location or Topic
     vocabulary is empty simply closes the gap, where hardcoded column numbers
     would leave a hole. */
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  align-items: end;
  padding: 16px;
  border: 1px solid var(--cdob-ui-border); /* decorative panel edge */
  border-radius: 8px;
  background: rgba(var(--cdob-navy-rgb), 0.04);
}

/* The count sits on its own row spanning the full bar, so a long result
   phrase never squeezes the Search button below its tap target. */
.cdob-ci-controls--bar .cdob-ci-field--q {
  grid-column: span 3;
}

.cdob-ci-controls--bar .cdob-ci-count {
  grid-column: 1 / -1;
}

@media (max-width: 767px) {
  .cdob-ci-controls--bar {
    grid-template-columns: 1fr;
  }
  /* RESET THE SPAN, do not leave it inherited. `grid-column: span 3` inside a
     single-track grid does not clamp: it generates two IMPLICIT columns and
     the tidy stacked bar silently becomes three columns wide, overflowing the
     phone viewport. */
  .cdob-ci-controls--bar .cdob-ci-field--q {
    grid-column: auto;
  }
}

/* -- Rail placement: stacked block at the top of the sidebar ---------- */

.cdob-ci-controls--rail {
  grid-template-columns: 1fr;
  gap: 12px;
}

.cdob-ci-controls--rail .cdob-ci-actions {
  flex-wrap: wrap;
}

/* ============================================================
   2. Card grid
   ============================================================ */

.cdob-ci-section-title {
  margin: 0 0 16px;
  font-size: var(--fs-600);
  color: var(--cdob-ink); /* 16.48 */
}

.cdob-ci-grid {
  display: grid;
  /* EXACTLY THREE ACROSS (CDOB-CPT-S3, owner-directed), not auto-fill.
     auto-fill with a 260px minimum needs 3*260 + 2*20 = 820px to seat a third
     column, and the prose measure was capped at 70ch (~700px), which is why
     this grid rendered two-up. The cap is lifted above; the column count is
     PINNED here because "three across" is the requirement, not a happy
     consequence of some minimum width. Same reasoning, same wording, same fix
     as css/cdob-catalogue.css v0.2.0 for the store grid.

     minmax(0, 1fr) rather than a px minimum so an unbreakable token (a long
     URL in a title) can never force horizontal overflow of the whole page. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin: 0 0 28px;
}

@media (max-width: 1023px) {
  .cdob-ci-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 599px) {
  .cdob-ci-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.cdob-ci-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--cdob-ui-border); /* decorative card edge */
  border-radius: 8px;
  background: var(--cdob-paper);
  overflow: hidden;
}

/* Featured entries keep a fir edge in BOTH placements, so an entry the
   visitor already met in the strip is recognisable when they meet it again
   in the grid rather than reading as an accidental duplicate. */
.cdob-ci-card--feat {
  border-left: 4px solid var(--cdob-fir); /* 9.76 on paper; decorative here */
}

/* -- Featured strip ---------------------------------------------------
   The owner asked for featured entries in a highlighted strip above the
   grid AND still in the grid below, badged. The strip needs a boundary or
   it reads as the first rows of one long list: same card shape, same
   column track, and the visitor meets those entries twice with nothing on
   the page explaining why. The divider plus the section title do that
   work; the fir card edge above is what carries recognition on the second
   meeting. */

.cdob-ci-featured {
  margin: 0 0 28px;
  border-bottom: 1px solid var(--cdob-ui-border); /* decorative divider */
}

/* The section owns the space beneath itself, so the grid inside it must
   not add a second gap on top of that. */
.cdob-ci-grid--feat {
  margin-bottom: 20px;
}

/* STRUCTURAL HOOKS, DELIBERATELY CARRYING NO RULES.
   .cdob-ci-wrap is the shortcode's outer container and .cdob-ci-results
   wraps the main grid plus its pagination. Both exist as scoping and
   attachment points; every visual property they could carry is already
   owned by their children (.cdob-ci-controls, .cdob-ci-grid,
   .cdob-ci-pagination), so giving them rules would mean two selectors
   competing for one margin.
   Written down because a class with no rule is otherwise indistinguishable
   from a class whose rule was forgotten, which is what the pre-deploy gate
   could not resolve on its own (QA item 7, CDOB-CPT-S2). Same convention as
   .cdob-ci-rail in section 6, which states its reuse for the same reason. */

.cdob-ci-thumb {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: rgba(var(--cdob-ink-rgb), 0.06);
}

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

.cdob-ci-body {
  padding: 16px;
}

.cdob-ci-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 8px;
}

.cdob-ci-badge {
  font-size: var(--fs-300);
  font-weight: 600;
  color: var(--cdob-navy); /* 9.08 on the 8% navy tint */
  background: rgba(var(--cdob-navy-rgb), 0.08);
  padding: 3px 10px;
  border-radius: 999px;
}

.cdob-ci-badge--feat {
  color: var(--cdob-fir); /* 8.55 on the 8% fir tint */
  background: rgba(var(--cdob-fir-rgb), 0.08);
}

.cdob-ci-title {
  margin: 0 0 6px;
  font-size: var(--fs-600);
}

.cdob-ci-title a {
  color: var(--cdob-navy); /* 10.40 on paper */
  text-decoration: none;
}

.cdob-ci-title a:hover,
.cdob-ci-title a:focus-visible {
  text-decoration: underline;
}

.cdob-ci-source {
  margin: 0 0 2px;
  font-size: var(--fs-400);
  color: var(--cdob-ink); /* 16.48 */
}

.cdob-ci-date {
  margin: 0 0 8px;
  font-size: var(--fs-300);
  color: var(--cdob-on-light-meta); /* 7.46 on paper */
}

.cdob-ci-excerpt {
  margin: 0;
  font-size: var(--fs-400);
  color: var(--cdob-ink); /* 16.48 */
}

/* ============================================================
   3. Empty state and call to action
   ============================================================ */

.cdob-ci-empty,
.cdob-ci-cta {
  padding: 20px;
  border-radius: 8px;
  background: rgba(var(--cdob-navy-rgb), 0.04);
  color: var(--cdob-ink); /* 15.42 on the 4% navy tint */
}

.cdob-ci-empty p:last-child,
.cdob-ci-cta p:last-child {
  margin-bottom: 0;
}

.cdob-ci-empty a,
.cdob-ci-cta a {
  color: var(--cdob-navy); /* 9.72 on the 4% navy tint */
}

/* ============================================================
   4. Pagination
   ============================================================ */

.cdob-ci-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 28px;
}

/* 44px floor on both axes: WCAG 2.5.5 target size, the level this codebase
   holds for navigation controls (--cdob-tap-min, cdob-core.css). Page links
   are short labels and would otherwise be well under it. */
.cdob-ci-page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--cdob-tap-min);
  min-height: var(--cdob-tap-min);
  padding: 0 10px;
  border: 1px solid var(--cdob-ui-border);
  border-radius: 6px;
  font-size: var(--fs-400);
  color: var(--cdob-navy); /* 10.40 on paper */
  text-decoration: none;
}

.cdob-ci-page--on {
  background: var(--cdob-navy);
  border-color: var(--cdob-navy);
  color: var(--cdob-paper); /* 10.40, symmetric with navy on paper */
  font-weight: 600;
}

.cdob-ci-gap {
  color: var(--cdob-on-light-meta); /* 7.46 on paper */
}

/* ============================================================
   5. Source block on the single view
   ============================================================ */

.cdob-ci-source-block {
  margin: 28px 0 0;
  padding: 20px;
  border-radius: 8px;
  background: rgba(var(--cdob-navy-rgb), 0.04);
}

.cdob-ci-source-list {
  margin: 0 0 16px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 16px;
}

.cdob-ci-source-list dt {
  font-size: var(--fs-300);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--cdob-on-light-meta); /* 6.97 on the 4% navy tint */
}

.cdob-ci-source-list dd {
  margin: 0;
  font-size: var(--fs-400);
  color: var(--cdob-ink); /* 15.42 on the 4% navy tint */
}

.cdob-ci-source-link {
  margin: 0;
}

/* ============================================================
   6. Rail block wrapper
   ============================================================ */

/* The rail block reuses the theme's .cdob-rail__widget shell (css/cdob-rail.css)
   so it sits in the same card family as Stay connected and Recent updates
   beneath it. Only the internal gap needs adjusting. */
.cdob-ci-rail .cdob-ci-controls {
  margin-bottom: 0;
}