/* cicopy.com — "Copy Exhibit" component
   A standalone, dropped-in exhibit card for each case file's most recent
   marketing copy: a wood clipboard with a paper sheet clipped to it,
   followed by an optional dark "then vs now" comparison strip. Kept in its
   own stylesheet, on purpose, separate from style.css, so it can be added
   to or pulled from a post without touching the base template.

   Placement: inside <article>, directly after the .case-meta bar and
   before <h1>. See CMS-GUIDE.md.

   Tokens: reuses the site's existing custom properties (--paper,
   --ink-text, --muted-1/2/3, --red, --red-dim, --line, --panel, --cream)
   defined in style.css, so it inherits light/dark theme and high-contrast
   behavior automatically. Only the wood-board color is new, added below,
   and stays fixed across themes on the same reasoning --paper and
   --ink-text do: a clipboard is a physical object in the photo, not part
   of the room's lighting.

   Secondary text sitting on the paper insert uses the same fixed grays
   (#6b6455, #4a4436) already established in style.css for text-on-paper
   (see .mock-meta, .mock-block, .case-card p). Those grays are
   contrast-checked at 5.87:1 and 9.67:1 against white, so they stay
   compliant even when a11y-contrast flips --paper to pure white.
*/

:root {
  --wood: #5c4530;
  --wood-dark: #2b2118;
  --wood-highlight: #443423;
}

/* Breaks the exhibit (and its optional then-vs-now strip) out of the
   article's text column to span the full width of .post-layout,
   including the space the sidebar would otherwise occupy in this row.
   .post-sidebar drops down to sit alongside .post-main once this row
   is filled, since it comes later in source order with no explicit
   placement of its own. Only applies where .post-layout is actually a
   two-column grid; below the 860px breakpoint where style.css collapses
   it to one column, this is a no-op and the exhibit just fills that
   single column like everything else. */
.copy-exhibit,
.copy-exhibit-then-now {
  grid-column: 1 / -1;
}

.copy-exhibit {
  background: var(--wood);
  border-radius: 6px;
  padding: 20px 18px 24px;
  position: relative;
  margin: 0 0 22px;
}

.copy-exhibit__clip {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 24px;
  background: var(--wood-dark);
  border-radius: 4px 4px 2px 2px;
}

.copy-exhibit__clip-bar {
  position: absolute;
  top: -7px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 8px;
  background: var(--wood-highlight);
  border-radius: 3px;
}

.copy-exhibit__paper {
  background: var(--paper);
  color: var(--ink-text);
  border-radius: 2px;
  padding: 20px 22px;
}

.copy-exhibit__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #c9c0a8;
  padding-bottom: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
  gap: 6px 12px;
}

.copy-exhibit__label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--red-dim);
  font-weight: 600;
}

.copy-exhibit__label .accent {
  color: var(--red);
}

.copy-exhibit__tag {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: #6b6455;
  border: 1px solid #6b6455;
  padding: 2px 8px;
  border-radius: 2px;
}

.copy-exhibit__sources {
  margin-bottom: 14px;
}

.copy-exhibit__sources-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  color: #6b6455;
  margin: 0 0 4px;
}

.copy-exhibit__sources ol {
  margin: 0;
  padding-left: 18px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  color: #4a4436;
  line-height: 1.55;
}

.copy-exhibit__samples {
  display: grid;
  gap: 16px;
  margin-bottom: 20px;
}

.copy-exhibit__sample {
  border-left: 2px solid var(--red);
  padding-left: 14px;
}

.copy-exhibit__sample-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: #6b6455;
  margin-bottom: 4px;
}

.copy-exhibit__sample-quote {
  font-family: 'Source Serif 4', serif;
  font-style: italic;
  font-size: 18px;
  color: var(--ink-text);
  line-height: 1.55;
}

/* Two columns, now that .copy-exhibit spans the full width of
   .post-layout instead of just the article's text column (see the
   grid-column override below). That extra room is what makes two
   columns work at a font size matched to body text; inside the
   narrower article column alone, the same font size forced awkward
   mid-word wraps, which is why this was a single stacked list before. */
.copy-exhibit__fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 32px;
  margin-bottom: 6px;
}

.copy-exhibit__fields > div {
  padding: 14px 0;
  border-bottom: 1px solid #c9c0a8;
}

.copy-exhibit__fields > div:nth-child(-n+2) {
  padding-top: 0;
}

.copy-exhibit__field-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: #6b6455;
  margin: 0 0 5px;
}

.copy-exhibit__field-value {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 17px;
  color: #4a4436;
  line-height: 1.5;
  margin: 0;
}

.copy-exhibit__note {
  border-top: 1px solid #c9c0a8;
  padding-top: 14px;
  margin-top: 8px;
}

.copy-exhibit__note-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--red-dim);
  margin: 0 0 5px;
}

.copy-exhibit__note-text {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 17px;
  color: #4a4436;
  line-height: 1.5;
  margin: 0;
}

/* ---------- Then vs now (optional, only where a real retro line exists) ---------- */

.copy-exhibit-then-now {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 14px 18px;
  margin: 0 0 26px;
}

.copy-exhibit-then-now__label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--red-dim);
  margin: 0 0 10px;
}

.copy-exhibit-then-now__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.copy-exhibit-then-now__year {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--muted-1);
  margin: 0 0 4px;
}

.copy-exhibit-then-now__line {
  font-family: 'Source Serif 4', serif;
  font-style: italic;
  font-size: 16px;
  color: var(--muted-2);
  margin: 0;
}

.copy-exhibit-then-now__shift {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  color: var(--muted-1);
  margin: 10px 0 0;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

/* ---------- Mobile: a simplified rendering, not just a scaled one ----------
   The fields list is already single-column at the base size, so the only
   job left here is dropping the decorative clip (ornamental only, costs
   vertical space for nothing at this width) and tightening padding so the
   paper insert isn't fighting a phone-width viewport for room. Type does
   not shrink below the desktop size; it stays matched to body text. */

@media (max-width: 640px) {
  .copy-exhibit__clip,
  .copy-exhibit__clip-bar {
    display: none;
  }

  .copy-exhibit {
    padding: 4px;
    border-radius: 4px;
  }

  .copy-exhibit__paper {
    padding: 16px 16px;
  }

  /* The two-column field grid needs the full-width breakout to have
     room; a phone viewport doesn't have that room even with the
     breakout in effect, so fields go back to one column here. */
  .copy-exhibit__fields {
    grid-template-columns: 1fr;
  }

  .copy-exhibit__fields > div:nth-child(-n+2) {
    padding-top: 14px;
  }

  .copy-exhibit__fields > div:first-child {
    padding-top: 0;
  }

  .copy-exhibit-then-now__grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}