/* The Exporters Directory.
 *
 * Every value here is a token from the Organic system. The one thing this sheet
 * adds that the system does not already carry is the LOGO BOX: .card-gallery's
 * media is a photograph, cropped to fill, on a dark plate. A logo cannot be
 * cropped and cannot be assumed to sit on dark, so the box here contains the
 * mark on a light surface with air around it. Everything else is the system's.
 */

/* ── the logo box ─────────────────────────────────────────────── */

/* The plate is white because the logos are.
 *
 * Member logos arrive as supplied artwork with a baked white background. To sit
 * them on Morning Mist or on the dark ground, every one of them would have to be
 * edited first — background removed, transparency preserved, re-exported. That
 * is ~70 images today and a new one with every member who joins, and it would
 * have to happen again for any member who sends a replacement mark.
 *
 * White in both themes, for the same reason: the artwork does not change when
 * the page does. Declared once, here, so there is one place to change it if the
 * association ever does commission that artwork pass.
 */
/* SPECIFICITY: the theme styles the card's image well as `.card-gallery .media`
 * — two classes — and sets `display: block` with a dark photographic plate on
 * it. A single `.exporter-logo` class loses to that no matter which sheet loads
 * last, so the flex centring silently never applies and the plate stays dark.
 * Every rule that has to beat it names `.media` too. */
.exporter-logo,
.card-gallery .media.exporter-logo,
:root[data-theme="dark"] .card-gallery .media.exporter-logo,
:root[data-theme="light"] .card-gallery .media.exporter-logo {
  --exporter-plate: #ffffff;

  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  aspect-ratio: 16 / 10;
  padding: var(--space-5);
  background: var(--exporter-plate);
  border-bottom: 1px solid var(--color-divider);
}

.exporter-logo img,
.card-gallery .media.exporter-logo img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  margin: auto;
  /* Contain, never cover: a member's mark is not a photograph. */
  object-fit: contain;
}

/* A member with no logo gets an empty plate. Nothing is drawn in its place:
   an invented monogram is a mark the association does not have. */

.exporter-logo-lg {
  aspect-ratio: 16 / 10;
  width: var(--space-24);
  height: auto;
  flex: none;
  padding: var(--space-3);
  border: 1px solid var(--color-divider);
  border-bottom: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
}

/* The member number reads as a reference, so it sits where a reference sits —
   the trailing corner, clear of the mark's own top-left lock-up. Three classes,
   because the theme pins it left as `.card-gallery .media .card-kicker`. */
.card-gallery .media.exporter-logo .card-kicker {
  left: auto;
  right: var(--space-3);
}

/* ── the card ─────────────────────────────────────────────────── */

.exporter-card .exporter-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
}

.exporter-card .card-title {
  font-size: var(--text-lg);
  line-height: var(--leading-heading);
}

.exporter-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.exporter-card .card-meta {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
}

/* ── completeness ─────────────────────────────────────────────── */

.exporter-bar {
  display: block;
  flex: 1;
  height: var(--space-1);
  border-radius: var(--radius-sm);
  background: var(--color-neutral-200);
  overflow: hidden;
}

.exporter-bar-fill {
  display: block;
  height: 100%;
  border-radius: var(--radius-sm);
  background: var(--color-accent-2);
}

.exporter-state {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
}

.exporter-state .exporter-bar {
  height: var(--space-2);
}

/* ── the record ───────────────────────────────────────────────── */

.exporter-head {
  display: flex;
  align-items: flex-start;
  gap: var(--space-5);
  flex-wrap: wrap;
}

.exporter-group h2 {
  font-size: var(--text-xl);
}

.exporter-record {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  border-top: 1px solid var(--color-divider);
}

.exporter-row {
  display: grid;
  grid-template-columns: minmax(9rem, 14rem) 1fr;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-divider);
}

.exporter-row dt {
  margin: 0;
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}

.exporter-row dd {
  margin: 0;
  color: var(--color-text);
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Provenance sits under the field name, because a reader needs to know where a
   value came from before they read the value. */
.exporter-prov {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--weight-body);
  color: var(--color-text-secondary);
}

/* A missing field is the point of this page in its first phase. It is marked
   with the accent, which is the one colour the system allows for something a
   reader is meant to act on. */
.exporter-none {
  color: var(--color-accent-700);
  font-style: italic;
}

.exporter-row.is-missing dt {
  color: var(--color-text-secondary);
}

.exporter-note {
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface);
  border-left: 2px solid var(--color-accent);
  border-radius: var(--radius-sm);
}

@media (max-width: 40rem) {
  .exporter-row {
    grid-template-columns: 1fr;
    gap: var(--space-1);
  }
}