/*
 * css/topics.css - the six keyword pages (browser-crime-game.php and friends; includes/topic_pages.php), 0.22.0.
 * Only what the shared page components in css/landing.css do not already give: a breadcrumb, prose with a picture beside it,
 * framed screenshots with captions, a small facts list and a plain table. Loaded after css/public.css by
 * ld_head($t, $d, array('css/public.css', 'css/topics.css')). Scoped under #ld like the rest of the guest styles.
 * Colours are the page's own (landing.css variables): text and links keep 4.5:1 on the page and on the band colours.
 */

/* ---- breadcrumb (above the h1) ---- */
#ld .tp-crumbs { margin: 0 0 12px; color: var(--muted); font-size: 13.5px; }
#ld .tp-crumbs a { color: var(--wire); }
#ld .tp-crumbs a:hover { text-decoration: underline; }
#ld .tp-crumbs span { color: var(--text); }

/* ---- hero: the h1 is long (it carries the search phrase), so it is a little smaller than the other page heroes ---- */
#ld .tp-hero h1 { font-size: 40px; line-height: 1.08; }
#ld .tp-hero-media img { aspect-ratio: 4 / 3; object-fit: cover; object-position: top center; background: var(--ink); }

/* ---- a section: prose, with a picture or a list beside it when there is one ---- */
#ld .tp-cols { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 28px 44px; align-items: start; }
#ld .tp-cols-flip > :first-child { order: 2; }
#ld .tp-prose { max-width: 42em; }
#ld .tp-prose h2 { margin: 0 0 14px; font: 600 28px/1.12 var(--head); letter-spacing: 1px; text-transform: uppercase; color: #fff; }
#ld .tp-prose h2::after {
  content: ""; display: block; width: 64px; height: 3px; margin-top: 10px; border-radius: 2px;
  background: linear-gradient(90deg, var(--teal), var(--purple), var(--magenta));
}
#ld .tp-prose h3 { margin: 18px 0 6px; font: 600 18px/1.2 var(--head); letter-spacing: 1.1px; text-transform: uppercase; color: #fff; }
#ld .tp-prose p { margin: 0 0 14px; color: var(--text); font-size: 16px; line-height: 1.65; }
#ld .tp-prose p:last-child { margin-bottom: 0; }
#ld .tp-prose ul, #ld .tp-prose ol { margin: 0 0 14px; padding-left: 22px; color: var(--text); font-size: 16px; line-height: 1.6; }
#ld .tp-prose li { margin: 5px 0; }
#ld .tp-prose a { color: var(--wire); }
#ld .tp-prose a:hover { text-decoration: underline; }
#ld .tp-prose b { color: #fff; font-weight: 600; }

/* ---- framed picture with a caption ---- */
#ld .tp-shot { margin: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--steel); box-shadow: 0 10px 30px rgba(0,0,0,.45); }
#ld .tp-shot img { display: block; width: 100%; height: auto; background: var(--ink); }
#ld .tp-shot figcaption { padding: 10px 14px 12px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13.5px; line-height: 1.45; }
#ld .tp-shot-crop img { aspect-ratio: 4 / 3; object-fit: cover; object-position: top center; }
#ld .tp-shot-wide { max-width: 1020px; margin: 28px auto 0; }
#ld .tp-shots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
#ld .tp-shot-phone { max-width: 300px; margin: 0 auto; }
#ld .tp-shot-phone img { aspect-ratio: 9 / 14; object-fit: cover; object-position: top center; }   /* a phone screenshot is very tall: show the top of the page */
#ld .tp-shot-phone-map img { object-position: 50% 84%; }   /* the map page: show the map itself, not the bars above it */

/* ---- a short facts list beside the prose ---- */
#ld .tp-facts { padding: 18px 20px 20px; border: 1px solid var(--line); border-top: 3px solid var(--teal); border-radius: 10px; background: var(--steel2); }
#ld .tp-facts h3 { margin: 0 0 10px; font: 600 18px/1.2 var(--head); letter-spacing: 1.1px; text-transform: uppercase; color: #fff; }
#ld .tp-facts dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; font-size: 15px; }
#ld .tp-facts dt { color: var(--muted); }
#ld .tp-facts dd { margin: 0; color: var(--text); text-align: right; }
#ld .tp-facts p { margin: 12px 0 0; color: var(--muted); font-size: 14px; }
#ld .tp-facts-amber { border-top-color: var(--amber-hi); }
#ld .tp-facts-purple { border-top-color: var(--purple); }
#ld .tp-facts ol { margin: 0; padding-left: 22px; color: var(--text); font-size: 15px; line-height: 1.55; columns: 2; column-gap: 20px; }

/* ---- a plain table (what to check, and where this game stands) ---- */
#ld .tp-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; background: var(--steel2); }
#ld .tp-table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5; display: table; white-space: normal; }   /* css/responsive.css turns every table into a nowrap, scrolling block under 720px: put it back */
#ld .tp-table th, #ld .tp-table td { padding: 11px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
#ld .tp-table thead th { background: #121214; color: #fff; font: 600 14px/1.25 var(--head); letter-spacing: 1px; text-transform: uppercase; }
#ld .tp-table tbody th { width: 34%; color: #fff; font-weight: 600; }
#ld .tp-table td { color: var(--text); }
#ld .tp-table tr:last-child th, #ld .tp-table tr:last-child td { border-bottom: 0; }
#ld .tp-table a { color: var(--wire); }
#ld .tp-table a:hover { text-decoration: underline; }

/* ---- the feature tour: one block per feature, picture and text side by side, alternating ---- */
#ld .tp-feature + .tp-feature { margin-top: 40px; padding-top: 40px; border-top: 1px solid var(--line); }
#ld .tp-tag { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px; border: 1px solid rgba(220,129,0,.5); background: rgba(220,129,0,.12); color: #ffd9a0; font: 600 12px/1.4 var(--head); letter-spacing: 1px; text-transform: uppercase; vertical-align: middle; }
#ld .tp-tag-open { border-color: rgba(95,174,90,.55); background: rgba(95,174,90,.12); color: #cfe8cc; }

#ld .tp-faq-more { margin-top: 16px; }

@media (max-width: 900px) {
  #ld .tp-cols { grid-template-columns: minmax(0, 1fr); }
  #ld .tp-cols-flip > :first-child { order: 0; }
  #ld .tp-hero h1 { font-size: 36px; }
}
@media (max-width: 600px) {
  #ld .tp-hero h1 { font-size: 30px; }
  #ld .tp-prose h2 { font-size: 24px; }
  #ld .tp-prose p, #ld .tp-prose ul, #ld .tp-prose ol { font-size: 15.5px; }
  #ld .tp-shots { grid-template-columns: minmax(0, 1fr); }
  #ld .tp-facts ol { columns: 1; }
  #ld .tp-table th, #ld .tp-table td { padding: 10px 11px; }
  #ld .tp-table tbody th { width: auto; }
  #ld .tp-feature + .tp-feature { margin-top: 32px; padding-top: 32px; }
}