/* ============ TOPICS INDEX ============
   Redesigned 2026-08-24 (Nico): the topic grid of small cards became full-width ROWS, one
   below the other - big title + subtitle on the left, lime pill with the episode count on
   the right. Same visual language as the guests page's country accordions, but these are
   plain LINKS to each topic page, not toggles. No underlines, no emoji.
   Page: topics.html (generated by generator/topics_final.py). */

.tp-list{display:flex;flex-direction:column;gap:16px;margin-top:8px;}
.tp-row{display:flex;align-items:center;gap:24px;background:#fff;
        border:1px solid rgba(15,53,87,.14);border-radius:var(--r-card);
        padding:24px 26px;text-decoration:none;
        transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),
                   background-color var(--dur) var(--ease);}
.tp-row, .tp-row *{text-decoration:none;}
.tp-copy{flex:1;display:flex;flex-direction:column;gap:6px;min-width:0;}
.tp-title{font-size:var(--t-term);font-weight:var(--w-strong);color:var(--itg-near-black);line-height:1.15;
          transition:color var(--dur) var(--ease);}
.tp-sub{font-size:var(--t-small);font-weight:var(--w-body);color:rgba(27,36,42,.62);line-height:1.45;
        transition:color var(--dur) var(--ease);}
.tp-pill{font-size:var(--t-label);font-weight:var(--w-strong);color:var(--itg-near-black);
         background:var(--itg-lime-light);border-radius:var(--r-badge);
         padding:4px 14px;white-space:nowrap;flex-shrink:0;
         transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease);}

/* ---- HOVER: the row FILLS, the pill INVERTS ---------------------------------------------------
   Nico, 2026-08-25. The row used to only pick up a lime border; now the whole card goes lime with
   ink type, while the pill flips the other way into an ink chip with a lime label. Same gesture as
   the episode pages' Connect pills, so "this is clickable" reads identically across the site.

   THE TWO LIMES ARE DIFFERENT ON PURPOSE, and both follow the brand rule in tokens.css:
     row fill   -> var(--accent), which resolves to #8ed800 because .tp-list sits inside
                   .itg-light. That is the same value the pill already rests on and the same fill
                   .btn-ghost--primary takes on a white band, so filled-lime stays one colour.
     pill label -> --itg-lime-dark #96ff00, because the pill has BECOME a dark ground, and that is
                   the lime for dark grounds (16:1 on ink). --accent there would put the
                   light-ground lime on ink and read muddy.
   Measured on #8ed800: title 11.5:1, subtitle 7.0:1 (AAA), pill 16:1. The subtitle keeps a hair
   of transparency rather than going flat black so the title/subtitle hierarchy survives the fill.
   background-color had to JOIN the transition list on .tp-row, and the children needed colour
   transitions of their own - otherwise the fill and the type snapped while the border eased. */
.tp-row:hover{background:var(--accent);border-color:var(--accent);
              box-shadow:0 4px 22px rgba(4,6,10,.07);}
.tp-row:hover .tp-title{color:var(--itg-ink);}
.tp-row:hover .tp-sub{color:rgba(4,6,10,.75);}
.tp-row:hover .tp-pill{background:var(--itg-ink);color:var(--itg-lime-dark);}

@media (max-width:720px){
  .tp-row{padding:18px;gap:14px;}
}