/* ============================================================
   Podcast cover — "Journalism in Africa" series tile
   ------------------------------------------------------------
   Drop into assets/site.css (or load as its own file).
   Markup contract:
     <div class="podcast-cover-tile" aria-hidden="true"> … </div>
   The component is purely decorative (aria-hidden); pair it
   with a properly-labelled heading/link in the same column.

   Background: paper #f1f3ec + 135° hairline stripes at 4.5% ink
   (matches the EU Gateway tile chassis).
   Loop: 9 seconds, eased. CSS-only — no script, no images.
   ============================================================ */

.podcast-cover-tile {
  /* tokens — fall back if site vars aren't loaded */
  --pct-bg:         #f1f3ec;
  --pct-stripe:     rgba(36, 40, 30, 0.045);
  --pct-ink:        #2a2e26;
  --pct-ink-2:      rgba(42, 46, 38, 0.72);
  --pct-ink-dim:    rgba(42, 46, 38, 0.42);
  --pct-ink-faint:  rgba(42, 46, 38, 0.18);
  --pct-accent:     var(--m17-mid-green, #026203);
  --pct-cycle:      9s;

  position: relative;
  aspect-ratio: 1 / 1;
  width: 100%;
  background:
    repeating-linear-gradient(
      135deg,
      transparent 0 8px,
      var(--pct-stripe) 8px 9px
    ),
    var(--pct-bg);
  color: var(--pct-ink);
  overflow: hidden;
}

/* SVG layer */
.podcast-cover-tile__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* ── Corner stamps (brand + meta) ─────────────────────────── */
.podcast-cover-tile__stamp {
  position: absolute; left: 18px; top: 18px;
  display: flex; align-items: center; gap: 9px;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--pct-ink); z-index: 3;
}
.podcast-cover-tile__stamp-mark {
  width: 14px; height: 14px; background: var(--pct-accent);
  display: inline-block;
}
.podcast-cover-tile__stamp-text { font-weight: 700; }
.podcast-cover-tile__stamp-text i {
  font-style: normal; color: var(--pct-accent); font-weight: 700;
}

.podcast-cover-tile__corner {
  position: absolute; right: 18px; top: 18px;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--pct-ink-dim); z-index: 3; text-align: right;
}
.podcast-cover-tile__corner b { color: var(--pct-accent); font-weight: 500; }

.podcast-cover-tile__footer {
  position: absolute; bottom: 18px;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--pct-ink-dim); z-index: 3;
}
.podcast-cover-tile__footer--left  { left: 18px; }
.podcast-cover-tile__footer--right { right: 18px; }
.podcast-cover-tile__footer b { color: var(--pct-accent); font-weight: 500; }

/* ── SVG sub-elements ─────────────────────────────────────── */
.podcast-cover-tile__row-label {
  fill: var(--pct-ink);
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 8.5px; letter-spacing: 0.18em; text-anchor: start;
  text-transform: uppercase; font-weight: 500;
}
.podcast-cover-tile__baseline {
  stroke: var(--pct-ink-faint); stroke-width: 1; fill: none;
}

/* The two layers per row: dim ink wave + green-lit copy (clipped). */
.podcast-cover-tile__wave {
  fill: none; stroke: var(--pct-ink-dim);
  stroke-width: 1.1; stroke-linejoin: round;
}
.podcast-cover-tile__wave--lit {
  fill: none; stroke: var(--pct-accent);
  stroke-width: 1.4; stroke-linejoin: round;
  clip-path: url(#podcast-cover-tile-scan-clip);
}

/* Axis (timeline at base of stack) */
.podcast-cover-tile__axis-tick {
  stroke: var(--pct-ink-faint); stroke-width: 1;
}
.podcast-cover-tile__axis-num {
  fill: var(--pct-ink-dim);
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 7px; letter-spacing: 0.12em;
  text-anchor: middle; text-transform: uppercase;
}

/* ── Scanning cursor + clip rect (the only animated bits) ─── */
.podcast-cover-tile__cursor {
  stroke: var(--pct-accent); stroke-width: 1.2; opacity: 0.65;
  animation: podcast-cover-tile-scan var(--pct-cycle) cubic-bezier(.55, .05, .55, .95) infinite;
}
.podcast-cover-tile__cursor-cap {
  fill: var(--pct-accent);
  animation: podcast-cover-tile-scan var(--pct-cycle) cubic-bezier(.55, .05, .55, .95) infinite;
}
.podcast-cover-tile__scan-fill {
  /* drives the clip-path applied to .__wave--lit; right edge of this rect
     sits exactly under the cursor. Sweeps right then back. */
  animation: podcast-cover-tile-scan var(--pct-cycle) cubic-bezier(.55, .05, .55, .95) infinite;
}
@keyframes podcast-cover-tile-scan {
  0%   { transform: translateX(0);     }
  50%  { transform: translateX(308px); }
  100% { transform: translateX(0);     }
}

/* ── Reduced motion: pin to "all rows lit", cursor parked at right ── */
@media (prefers-reduced-motion: reduce) {
  .podcast-cover-tile__cursor,
  .podcast-cover-tile__cursor-cap,
  .podcast-cover-tile__scan-fill {
    animation: none;
    transform: translateX(308px);
  }
}