/* ============================================================
   Cross-franchise recirculation component
   ----------------------------------------------------------------
   Drop-in: any page that wants to recirculate to two sibling
   franchises uses this exact markup + classes. The visual treatment
   is identical across the brand so the move feels deliberate.

   Usage (HTML):
     <section class="recirc" aria-label="More from CFO Interactive">
       <p class="recirc-kicker">Filed next door</p>
       <div class="recirc-grid">
         <a class="recirc-card recirc-card--situation" href="...">
           <p class="recirc-card-tag">Today's CFO Situation</p>
           <p class="recirc-card-line">Play today's daily — one absurd-but-real beat at a time.</p>
           <span class="recirc-card-cta">Play →</span>
         </a>
         <a class="recirc-card recirc-card--trenches" href="...">…</a>
       </div>
     </section>

   The modifier classes (--situation, --baby-rank, --trenches,
   --confessions, --memes) just set the per-franchise accent.
   ============================================================ */

.recirc {
  margin-top: var(--space-12);
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-divider);
}

.recirc-kicker {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-5);
}

.recirc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

.recirc-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  text-decoration: none;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--color-border);
  transition: transform var(--transition), background var(--transition),
              border-color var(--transition), box-shadow var(--transition);
  min-height: 140px;
}
.recirc-card::before {
  /* Per-franchise accent rail along the top edge */
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--recirc-accent, var(--color-primary));
  opacity: 0.85;
}
.recirc-card:hover {
  transform: translateY(-2px);
  background: var(--color-surface-2);
  border-color: var(--color-text);
  color: var(--color-text);
  box-shadow: var(--shadow-sm);
}

.recirc-card-tag {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--recirc-accent, var(--color-primary));
}
.recirc-card-line {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-lg);
  line-height: 1.2;
  color: var(--color-text);
  text-wrap: balance;
  flex: 1;
}
.recirc-card-cta {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--recirc-accent, var(--color-primary));
  margin-top: var(--space-2);
}

/* ─── Per-franchise accents ─── */
.recirc-card--situation   { --recirc-accent: var(--color-primary); }       /* gold (CFO register) */
.recirc-card--baby-rank   { --recirc-accent: var(--color-babies); }        /* hot magenta */
.recirc-card--trenches    { --recirc-accent: var(--color-primary); }       /* gold (CFO register) */
.recirc-card--confessions { --recirc-accent: var(--color-brand-teal); }    /* brand teal */
.recirc-card--memes       { --recirc-accent: var(--color-babies); }        /* magenta */

/* Baby Rank card uses the condensed display font for tonal match */
.recirc-card--baby-rank .recirc-card-line {
  font-family: var(--font-babies-display);
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
  line-height: 1.1;
}

@media (max-width: 560px) {
  .recirc-grid { grid-template-columns: 1fr; }
}