/* The threat cards' pages (website #37): the deck page, /trusler/ and /en/threats/, the card pages
 * and the front page's section. The cards themselves are the app's (IRT#357): its components and
 * their styles come with the widget (site/deck/widget/deck-widget.css, written by
 * tools/build-deck.js); this file only places them on the site's pages. */

/* The fanned cards may reach past the column, never past the screen: no sideways scroll. */
.deck-section { padding-bottom: 56px; overflow-x: clip; }
/* Under the page's title the hand follows straight on. */
.hero-wrap + .deck-section { padding-top: 0; }
.hero-wrap:has(+ .deck-section) .page-hero { padding-bottom: 8px; }
/* The site's own headings name the section, so the deck's eyebrow is left out; Shuffle stays. */
#threat-deck .dk-shead { justify-content: flex-end; }
#threat-deck .dk-shead .dk-eyebrow { display: none; }

.deck-all { margin: 48px 0 16px; }
.deck-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 20px; }
.deck-list a { display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--text); text-decoration: none; font-weight: 700; }
/* Each card's front at half size, drawn by the widget. */
.deck-thumb { display: block; width: 150px; height: 210px; transition: transform .2s ease;
  /* Painted only when scrolled near: twelve live cards below the deck slowed a phone's first load. */
  content-visibility: auto; contain-intrinsic-size: 150px 210px; }
/* A transform, not CSS zoom: iPhone Safari keeps zoomed text at 9 px or more while the card shrinks, so the words overlapped. */
.deck-thumb > .dk-root { width: 300px; height: 420px; transform: scale(.5); transform-origin: 0 0; }
.deck-list a:hover .deck-thumb, .deck-list a:focus-visible .deck-thumb { transform: translateY(-4px) rotate(-1deg); }
.deck-note { color: var(--muted, #8aa0bd); font-size: 13px; margin-top: 28px; }

/* A card's own page: its front and reading side, then the card's facts as a list, then the
   exercise as a centred call to action. */
.card-page { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 4vw, 48px); padding-top: 8px; padding-bottom: 56px; }
.card-pair { min-height: 420px; }
.card-facts { max-width: 760px; width: 100%; margin: 0 auto; }
.card-facts h2 { margin: 0 0 14px; }
.card-facts dl { margin: 0; display: grid; gap: 0; border-top: 1px solid rgba(255, 255, 255, .1); }
.card-facts .fact { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 14px; padding: 10px 0; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.card-facts dt { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); padding-top: 3px; }
.card-facts dd { margin: 0; }
.card-facts .lore { display: block; color: var(--dim, #8aa0bd); font-size: 14px; margin-top: 2px; }
.card-cta { text-align: center; }
.card-cta .sub { margin-left: auto; margin-right: auto; }
.card-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 0; }
.card-cta .deck-note { max-width: 44em; margin: 26px auto 0; }

@media (max-width: 600px) {
  .card-page { gap: 28px; }
}
@media (max-width: 520px) {
  .card-facts .fact { grid-template-columns: 1fr; gap: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .deck-thumb { transition: none; }
}