/* tv-board.css: /tv-board/ only.

   Loaded last, after platform.css, theme-oxford.css, module-page.css and
   content.css. Every rule is scoped to .page-tv (set as $body_class on the
   page) so nothing leaks to the other module pages.

   The subject is a screen on a wall in a site office, read from across the
   room by people who did not choose to look at it. So the page is drawn the
   way that screen is: flat panels, hairline separation, one accent used only
   where something is live or current, and nothing that needs squinting at.

   Density is graded top to bottom, the same as /advanced-estimating/. The
   first two screens carry a headline, one line of sub and a photograph. The
   mechanics, the setup steps and the FAQ all sit below the second screen.

   The definitional aside, the mechanics run, the numbered steps and the
   action band are .ub-* in blocks.css, loaded just before this sheet and
   shared with /advanced-estimating/ and /holiday-planner/. Only what is
   genuinely specific to this page is left below.
   ────────────────────────────────────────────────────────────────────────── */


/* ══ 1. HERO ══════════════════════════════════════════════════════════════ */

/* The hero runs on platform.css untouched: the standard 1.7fr/0.72fr split and
   the standard photo slot, same as every other module page. */
.page-tv .pf-hero .sub { max-width: 44ch; }

/* The photograph is a gang standing on a slab, shot from above, and the hero
   slot crops it to roughly a square. The people are along the lower third, so
   the crop has to come down off the sky. */
.page-tv .pf-hero-media img { object-position: 50% 72%; }


/* ══ 3. THE PROBLEM ═══════════════════════════════════════════════════════ */

/* Same treatment as /advanced-estimating/: short cells, two columns inside the
   split so twelve words are three lines rather than five, and no black-and-
   white alternation once the grid drops to one column. */
.page-tv .pain-cell { min-height: 0; padding: 26px 24px; }
.page-tv .pain-cell .what {
  font-size: var(--fs-lg);
  line-height: 1.32;
  margin-top: 12px;
  text-wrap: pretty;
}
.page-tv .pain-cell .cost { margin-top: 22px; }

@media (min-width: 901px) {
  .page-tv .pain-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .page-tv .pain-cell.heavy { background: var(--paper); color: var(--ink); }
  .page-tv .pain-cell.heavy .tag { color: var(--ink-mute); }
  .page-tv .pain-cell.heavy .cost { color: var(--ink-2); border-color: var(--rule-soft); }
  .page-tv .pain-cell .cost { font-weight: 500; color: var(--hazard); }
}


/* ══ 4. POINT BAR ═════════════════════════════════════════════════════════ */

/* core.css sets .pb-v at --fs-h2, the same step as a real section heading, and
   the inline highlight carries 2px of its own vertical padding, so at a tight
   line height the highlight boxes on consecutive lines collide. --fs-xl on a
   1.45 line keeps it to one line and reads as an aside. Scoped here for the
   same reason as on /advanced-estimating/: the fault is on 42 pages and wants
   its own pass, not a fix smuggled in from a page build. */
.page-tv .point-bar {
  margin-top: 56px;
  padding: 14px 22px;
  gap: 20px;
}
.page-tv .point-bar .pb-v {
  font-size: var(--fs-xl);
  line-height: 1.45;
  text-wrap: pretty;
}
.page-tv .point-bar .pb-v b { padding: 1px 9px; }
@media (min-width: 901px) {
  .page-tv .point-bar { grid-template-columns: minmax(0, auto) minmax(0, 3fr) minmax(0, auto); }
  .page-tv .point-bar .pb-l,
  .page-tv .point-bar .pb-r { max-width: 17ch; }
}


/* ══ 5. THE BOARDS ════════════════════════════════════════════════════════ */

/* platform.css:292 puts flex:1 on the card paragraph, which makes it absorb
   all the slack in the card and pushes the bullet list away from the text it
   belongs to. Let the paragraph be its own height and collect the slack above
   the footer, where a rule already sits. */
.page-tv .pf-mod p { flex: 0 0 auto; }
.page-tv .pf-mod > ul { margin-top: 4px; }
.page-tv .pf-mod > .pf-mod-foot { margin-top: auto; padding-top: 26px; }

/* Six ordinals at once on a dark band read as six pale slabs. Outline them. */
.page-tv .sec-dark .pf-mod-tag {
  background: transparent;
  color: oklch(0.66 0.005 60);
  border: 1px solid oklch(0.30 0.01 60);
}


/* ══ 9. FAQ AND CLOSING BAND ══════════════════════════════════════════════ */

/* The heading column is sticky and short, the list is long, so the section
   ends with a band of empty paper below the last question. */
.page-tv #faq .faq-list { padding-bottom: 0; }
.page-tv #faq { padding-bottom: clamp(72px, 8vw, 112px); }

/* Hero and closing band must rank the same two actions the same way.
   core.css:816 states the intent for the hero ("secondary CTA reduced to an
   underlined text link, not a competing button"), so the closing band adopts
   it rather than the reverse. */
.page-tv .final .row .btn-ghost {
  background: transparent;
  border: 0;
  padding: 14px 4px;
  color: oklch(0.84 0.005 60);
  text-decoration: underline;
  text-decoration-color: oklch(0.45 0.01 60);
  text-underline-offset: 6px;
  font-weight: 500;
}
.page-tv .final .row .btn-ghost:hover {
  color: var(--paper);
  text-decoration-color: var(--paper);
  transform: none;
}