/* The purple Topics page (pages/purple/topics.php; docs/purple-rollout.md, step 4): topic rows
   in two white panels. From the mockup's live/topics.html. Loaded after css/purple-hub.css. */
/* Topics page, NEW DESIGN (option B "Rows with pages", picked 2026-09-30; A was first): no left column; each topic is a card in the style
   of the "Best matching skill" card on search.html (white, 8px orange left edge, small label,
   big title, one line, a counts line, orange button). The grade + topic pages that sat in the
   left column move into each topic's card as grade links. Topic cards open the topic hub
   (topic-hub.html), theme cards the theme hub. Each row shows three of the topic's pages, centred, plus a "+N more" tile. The A (two across) and
   C (three across with a pile) styles are kept below, unused, in case they come back. */
.tsec { display: flex; align-items: baseline; gap: 10px; margin: 6px 0 14px; }
.tsec h2 { font: 600 22px 'Fredoka', sans-serif !important; color: var(--pv-plum) !important; margin: 0; }
.tsec small { color: var(--pv-muted); font-weight: 600; font-size: 13px; }
.tsec + .tcards { margin-bottom: 34px; }
.tcards { display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); gap: 18px; }

.tc { position: relative; background: #fff; border-radius: 28px; padding: 22px 24px; box-shadow: 0 10px 30px rgba(52,30,96,.08); border-left: 8px solid var(--pv-orange); display: flex; gap: 20px; min-width: 0; }
.tc.theme { border-left-color: var(--pv-violet); }
.tc .body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tc .ey { font: 800 11.5px 'DM Sans', sans-serif; letter-spacing: 1.2px; text-transform: uppercase; color: var(--pv-violet); }
.tc h3 { font: 600 26px/1.15 'Fredoka', sans-serif; color: var(--pv-plum); margin: 6px 0 8px; }
.tc h3 a { color: inherit; text-decoration: none; }
.tc p { font-size: 14.5px; color: #4b3f6b; line-height: 1.5; margin: 0; }
.tc .meta { font: 700 11.5px 'DM Sans', sans-serif; letter-spacing: 1px; text-transform: uppercase; color: var(--pv-muted); margin-top: 10px; }
.tc .gl { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.tc .gl a { font: 700 12.5px 'DM Sans', sans-serif; color: var(--pv-violet-d); background: #ece8ff; border-radius: 999px; padding: 5px 11px; text-decoration: none; }
.tc .gl a:hover { background: #ddd6ff; }
.tc .go { flex: none; align-self: flex-start; background: var(--pv-orange); color: var(--pv-plum); font: 700 14px 'DM Sans', sans-serif; border-radius: 999px; padding: 11px 20px; text-decoration: none; white-space: nowrap; }
.tc .go:hover { background: var(--pv-orange-d); }
.tc.theme .go { background: var(--pv-bg); color: var(--pv-violet-d); }

/* B: wide rows, the topic's own pages on the right */
.tcards.rows { --n: 1; gap: 14px; }
/* B (picked 2026-09-30): the pages are bigger than the first mockup's and centred on the card */
.tc .strip { flex: none; display: flex; gap: 12px; align-items: center; align-self: center; }
.tc .strip a { width: 124px; height: 160px; border-radius: 10px; overflow: hidden; background: #efe9f9; padding: 8px 8px 0; box-sizing: border-box; display: block; transition: transform .15s; }
.tc .strip a:hover { transform: translateY(-3px); }
.tc .strip img { width: 100%; display: block; border-radius: 4px 4px 0 0; box-shadow: 0 3px 8px rgba(0,0,0,.12); }
.tc .strip .more { display: grid; place-items: center; text-align: center; background: var(--pv-cream); color: var(--pv-violet-d); font: 700 13px/1.3 'DM Sans', sans-serif; padding: 0; text-decoration: none; }
.tc .strip .more b { display: block; font: 600 24px 'Fredoka', sans-serif; color: var(--pv-plum); }

/* C: three across, the page pile at the top of the card */
.tcards.pile { --n: 3; }
.tcards.pile .tc { flex-direction: column; padding: 0 0 18px; overflow: hidden; gap: 0; }
.tcards.pile .tc .stackbox { height: 132px; }
.tcards.pile .tc .body { padding: 14px 18px 0; }
.tcards.pile .tc h3 { font-size: 22px; margin: 4px 0 6px; }
.tcards.pile .tc p { font-size: 13.5px; }
.tcards.pile .tc .go { align-self: stretch; margin: 14px 18px 0; text-align: center; padding: 10px 16px; }

/* The two groups (2026-10-01, picked from four mockups): each is a white panel with the hub
   pages' section header (dot, title, count); the topic rows inside are cream, no orange edge. */
.tgroup { background: #fff; border-radius: 28px; padding: 18px 18px 20px; box-shadow: 0 6px 20px rgba(52,30,96,.05); margin-bottom: 18px; }
.tgroup .tsec { align-items: center; margin: 0 6px 14px; }
.tgroup .tsec::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--pv-orange); }
.tgroup.themes .tsec::before { background: var(--pv-violet); }
.tgroup .tsec h2 { font-size: 20px !important; }
.tgroup .tsec + .tcards { margin-bottom: 0; }
.tgroup .tc { background: var(--pv-cream); box-shadow: none; border-radius: 22px; border-left-width: 0; padding: 18px 20px; }
.tgroup .tc .strip .more { background: #fff; }
.tgroup .tcards.rows { gap: 12px; }
@media (max-width: 760px) { .tgroup { padding: 14px 12px 14px; border-radius: 24px; } }

/* narrower screens: smaller pages rather than fewer, so "+N more" stays right */
@media (max-width: 1100px) { .tcards.pile { --n: 2; } .tc .strip { gap: 8px; } .tc .strip a { width: 88px; height: 114px; } }
@media (max-width: 760px) {
  .tcards, .tcards.pile { --n: 1; }
  .tc { flex-direction: column; padding: 18px 18px; }
  .tc .go { align-self: stretch; text-align: center; }
  /* phones: the pages fill the card's width, four across, above the button */
  .tc .strip { order: 2; align-self: stretch; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .tc .strip a { width: auto; height: auto; aspect-ratio: 124 / 160; }
  .tc .go { order: 3; }
  .tc h3 { font-size: 22px; }
}