/**
 * cdob-directories.css | v0.3.1 | 2026-08-02 | Generated by Claude, session CDOB-WOO-S13
 * (v0.3.0 2026-07-31 CDOB-DIR-S2, v0.2.0 2026-07-30 CDOB-DIR-S1, v0.1.0 2026-07-29 CDOB-M7)
 *
 * Organization directory (.cdob-od-*) + photo gallery incl. lightbox
 * (.cdob-pg-*). The .cdob-od-* card family is SHARED with the Approved
 * Resellers directory (parts/cdob-resellers.php since v0.21.0); changing
 * card rules here changes both surfaces. Enqueued by the plugin loader on
 * pages carrying [cdob_org_directory], [cdob_photo_gallery], or
 * [cdob_approved_resellers].
 *
 * v0.3.1 (CDOB-WOO-S13): COMMENT-ONLY. Header updated for the second
 * .cdob-od-* consumer and the third enqueue trigger. No rule changed.
 *
 * v0.3.0 (CDOB-DIR-S2, owner-directed card redesign): banner-top card. The
 * card becomes a column: NEW decorative .cdob-od-band (64px tint strip; navy
 * tint active, ink tint archived), the logo in a 88px white-bordered CIRCLE
 * overlapping the band half-and-half (-44px margin), and the text block at
 * full card width below. The logo image is inscribed at 70% so a square
 * mark is never corner-clipped by the circle. No text color pair changed;
 * the band and circle border are decorative (no 1.4.11 obligation; the org
 * name is real text in the h3).
 *
 * v0.2.0 (CDOB-DIR-S1): Archived and Inactive section (.cdob-od-arch*,
 * .cdob-od-badge--arch, .cdob-od-card--arch). No existing rule's VALUES
 * changed; comment-only truth fix per the a11y re-derivation: the 8% navy
 * tint ratio is 9.08, not the 9.05 previously written (three comments).
 *
 * Contrast (sRGB-linearized, re-derived this session):
 *   ink #1f1f1f on paper 16.48 | navy #2c3c77 on paper 10.40
 *   on-light-meta #555 on paper 7.46 | navy on 8% navy tint 9.08
 *   ink on 4% navy tint 15.42 | paper on ink 16.48 (symmetric with ink/paper)
 *   on-dark-soft #ccc on ink 10.26
 *   on-light-meta #555 on 6% ink tint over paper (#F2F2F2 composite) 6.63
 */

/* ============================================================
   1. Organization directory (.cdob-od-*)
   ============================================================ */

.cdob-od-filters {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 16px;
  margin: 0 0 20px;
}

@media (max-width: 767px) {
  .cdob-od-filters {
    grid-template-columns: 1fr;
  }
}

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

.cdob-od-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  margin: 0 0 28px;
}

.cdob-od-card {
  border: 1px solid var(--cdob-ui-border); /* decorative card edge */
  border-radius: 8px;
  background: var(--cdob-paper);
  overflow: hidden; /* clips the band to the rounded corners */
}

/* Decorative banner strip across the card top (aria-hidden in markup). */
.cdob-od-band {
  height: 64px;
  background: rgba(var(--cdob-navy-rgb), 0.08);
}

/* The logo circle: white-bordered, overlapping the band half-and-half.
   88px circle + 3px paper border; -44px pulls exactly half over the band. */
.cdob-od-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  margin: -44px 0 0 18px;
  border: 3px solid var(--cdob-paper); /* the white border against the band */
  border-radius: 50%;
  background: var(--cdob-paper);
  overflow: hidden;
  position: relative; /* paints above the band */
}

.cdob-od-logo-img {
  width: 70%; /* inscribed: a square mark is never corner-clipped by the circle */
  height: 70%;
  object-fit: contain;
  display: block;
}

.cdob-od-monogram {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: rgba(var(--cdob-navy-rgb), 0.08);
  color: var(--cdob-navy); /* 9.08 on the 8% tint */
  font-size: var(--fs-700);
  font-weight: 700;
}

.cdob-od-body {
  min-width: 0;
  padding: 8px 18px 18px; /* full card width for the text */
}

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

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

.cdob-od-name a:hover {
  text-decoration: underline;
  color: var(--cdob-navy); /* 10.40 held; blocks the theme flame hover (3.51 FAIL, lesson 148) */
}

.cdob-od-name a:focus-visible {
  outline: 3px solid var(--cdob-navy);
  outline-offset: 2px;
}

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

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

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

.cdob-od-site {
  margin: 0;
  font-size: var(--fs-400);
}

.cdob-od-site a {
  color: var(--cdob-navy); /* 10.40 */
  min-height: var(--cdob-tap-min);
  display: inline-flex;
  align-items: center;
}

.cdob-od-site a:hover {
  color: var(--cdob-navy); /* 10.40 held; blocks the theme flame hover (lesson 148) */
}

.cdob-od-empty,
.cdob-od-none {
  background: rgba(var(--cdob-navy-rgb), 0.04);
  border-radius: 8px;
  padding: 28px 22px;
  text-align: center;
  color: var(--cdob-ink); /* 15.42 on the 4% tint */
}

.cdob-od-cta {
  border-top: 1px solid var(--cdob-ui-border);
  padding: 20px 0 0;
  color: var(--cdob-ink);
}

/* ------------------------------------------------------------
   1b. Archived and Inactive section (CDOB-DIR-S1)
   ------------------------------------------------------------
   Renders below the active grid, outside the filter controls. The
   archived badge is deliberately grey (not navy) so the two badge
   families read as different systems: type/location describe an org,
   archived describes its state. Muted logos are decorative only; the
   card's text carries all information. */

.cdob-od-arch {
  border-top: 1px solid var(--cdob-ui-border);
  margin: 4px 0 28px;
  padding: 24px 0 0;
}

.cdob-od-arch-title {
  margin: 0 0 6px;
  font-size: var(--fs-700);
  color: var(--cdob-ink); /* 16.48 on paper */
}

.cdob-od-arch-lede {
  margin: 0 0 18px;
  font-size: var(--fs-400);
  color: var(--cdob-on-light-meta); /* 7.46 on paper */
}

.cdob-od-badge.cdob-od-badge--arch {
  /* Doubled class beats .cdob-od-badge at 0,2,0 vs 0,1,0 so the grey wins
     deterministically, not by source order (lesson 148). */
  color: var(--cdob-on-light-meta); /* 6.63 on the 6% ink tint over paper */
  background: rgba(var(--cdob-ink-rgb), 0.06);
}

.cdob-od-card--arch .cdob-od-band {
  background: rgba(var(--cdob-ink-rgb), 0.06); /* grey band marks the archived shelf */
}

.cdob-od-card--arch .cdob-od-logo-img {
  filter: grayscale(1); /* decorative de-emphasis; no text is carried in the logo */
  opacity: 0.78;
}

/* ============================================================
   2. Photo gallery (.cdob-pg-*)
   ============================================================ */

.cdob-pg-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: end;
  margin: 0 0 20px;
}

.cdob-pg-filter {
  min-width: 180px;
}

.cdob-pg-grid {
  columns: 3 260px;
  column-gap: 18px;
  margin: 0 0 24px;
}

.cdob-pg-item {
  break-inside: avoid;
  margin: 0 0 18px;
}

.cdob-pg-open {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  border-radius: 8px;
}

.cdob-pg-open:focus-visible {
  outline: 3px solid var(--cdob-navy); /* 10.40 on paper */
  outline-offset: 3px;
}

.cdob-pg-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}

.cdob-pg-caption {
  padding: 8px 2px 0;
}

.cdob-pg-title {
  display: block;
  font-size: var(--fs-400);
  font-weight: 600;
  color: var(--cdob-ink); /* 16.48 */
}

.cdob-pg-meta {
  display: block;
  font-size: var(--fs-300);
  color: var(--cdob-on-light-meta); /* 7.46 */
}

.cdob-pg-empty {
  background: rgba(var(--cdob-navy-rgb), 0.04);
  border-radius: 8px;
  padding: 28px 22px;
  text-align: center;
  color: var(--cdob-ink); /* 15.42 on the 4% tint */
}

.cdob-pg-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin: 0 0 24px;
}

.cdob-pg-page {
  color: var(--cdob-navy); /* 10.40 */
  font-weight: 600;
  min-height: var(--cdob-tap-min);
  display: inline-flex;
  align-items: center;
}

.cdob-pg-page:hover {
  color: var(--cdob-navy); /* 10.40 held; blocks the theme flame hover (lesson 148) */
}

.cdob-pg-pageinfo {
  font-size: var(--fs-400);
  color: var(--cdob-on-light-meta); /* 7.46 */
}

.cdob-pg-cta {
  border-top: 1px solid var(--cdob-ui-border);
  padding: 20px 0 0;
}

/* Lightbox: a native <dialog> on the ink surface. Caption is on-dark-soft on
   ink (10.26); the close button is paper on ink (16.48). */
.cdob-pg-lightbox {
  border: 0;
  border-radius: 8px;
  background: var(--cdob-ink);
  padding: 16px;
  max-width: min(92vw, 1100px);
}

.cdob-pg-lightbox::backdrop {
  background: rgba(var(--cdob-ink-rgb), 0.8);
}

.cdob-pg-lightbox-img {
  max-width: 100%;
  max-height: 78vh;
  display: block;
  margin: 0 auto;
  border-radius: 4px;
}

.cdob-pg-lightbox-caption {
  margin: 12px 0 0;
  text-align: center;
  font-size: var(--fs-400);
  color: var(--cdob-on-dark-soft); /* 10.26 on ink */
}

.cdob-pg-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: var(--cdob-tap-min);
  height: var(--cdob-tap-min);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--cdob-paper-rgb), 0.12);
  color: var(--cdob-paper); /* 16.48 on ink */
  border: 0;
  border-radius: 999px;
  font-size: var(--fs-500);
  cursor: pointer;
}

.cdob-pg-close:hover {
  background: rgba(var(--cdob-paper-rgb), 0.25);
}

.cdob-pg-close:focus-visible {
  outline: 3px solid var(--cdob-paper); /* 16.48 on ink */
  outline-offset: 2px;
}