/* ==========================================================================
   test-v2.css — rules specific to the aptitude test page template.

   v2-core.css is shared by every v2 template, so nothing here is added there.
   Everything below serves a case that only the test family has:

   1. CMS-fallback guide prose. Eight of the 25 pages in the family have no
      git-owned content file, so their guide is markdownified CMS body copy
      rather than the curated `guide:` sections. That HTML contains element
      types the curated sections never do — h3/h4, images, blockquotes,
      horizontal rules — which v2-core does not style, and which would
      otherwise render as browser defaults inside a v2 page.
   2. The tips list, likewise CMS-sourced and present on 17 of the 25 pages.
   3. Anchor scroll offsets for the ids the contents rail targets.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero without a try-one aside

   v2-core sets the hero to `minmax(0,1fr) 344px`, sized for the sample-question
   aside. Seventeen of the 25 pages in this family cannot show that aside — eight
   have no free test at all, and nine carry a test whose every question needs a
   table, chart, figure or passage that will not fit in it. Without this rule
   those pages reserve an empty 344px column beside the H1.
   -------------------------------------------------------------------------- */

/* v2-core's 38px gap above the CTAs is measured from the facts card. Where a
   page has no facts to show, the CTAs would otherwise float a long way below
   the intro paragraph. */

/* --------------------------------------------------------------------------
   Guide list markers

   v2-core lays guide lists out with `display: flex` on the ul/ol, which
   blockifies the list items and suppresses their markers — so the `li::marker`
   colour it defines never paints, and every bulleted list in a guide renders as
   unindented plain paragraphs. Restoring `list-item` here brings the markers
   back for this template without touching the shared file.
   -------------------------------------------------------------------------- */
/* The tips list draws its own numerals in ::before, so it opts back out. */

/* Anchor targets: the contents rail jumps to guide sections and to CMS
   Q&A headings, both of which sit flush to the top of the viewport without
   this. */

/* --------------------------------------------------------------------------
   CMS-fallback guide prose
   -------------------------------------------------------------------------- */
/* Worked-example images. Owned guide sections carry them too on the pages with
   no free test, where the example questions are the only demonstration of the
   format, so both variants share one rule. */
/* Wide CMS tables scroll rather than pushing the page sideways. */

/* --------------------------------------------------------------------------
   Tips
   -------------------------------------------------------------------------- */
.tv2 .tv2-tips {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 26px;
  counter-reset: tv2-tip;
}
.tv2 .tv2-tip { counter-increment: tv2-tip; position: relative; padding-left: 42px; }
.tv2 .tv2-tip::before {
  content: counter(tv2-tip);
  position: absolute; left: 0; top: 1px;
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font: 500 13px 'IBM Plex Mono', monospace;
  color: #1257E8; background: #EEF4FF; border: 1px solid #D8E3FB;
}
.tv2 .tv2-tip h3 {
  margin: 0 0 8px; font-size: 19px; line-height: 1.35; font-weight: 500;
  color: #14203A; max-width: 46ch;
}
.tv2 .tv2-tip p { margin: 0 0 12px; font-size: 17px; line-height: 1.65; color: #414B5E; max-width: 68ch; }
.tv2 .tv2-tip p:last-child { margin-bottom: 0; }
.tv2 .tv2-tip a { color: #1257E8; }
.tv2 .tv2-tip ul, .tv2 .tv2-tip ol { margin: 0 0 12px; padding-left: 22px; }
.tv2 .tv2-tip li { font-size: 17px; line-height: 1.6; color: #414B5E; }

@media (max-width: 620px) {
  .tv2 .tv2-tip { padding-left: 34px; }
  .tv2 .tv2-tip::before { width: 24px; height: 24px; font-size: 12px; }
}

/* Video tutorials */
.tv2-videos { padding: 72px 0 8px; scroll-margin-top: 16px; }
.tv2-videos__grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 28px; }
.tv2-videos__item { display: block; text-decoration: none; }
.tv2-videos__thumb { position: relative; display: block; border-radius: 10px; overflow: hidden; background: #14203A; }
.tv2-videos__thumb img { display: block; width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; opacity: .92; transition: opacity .15s; }
.tv2-videos__item:hover .tv2-videos__thumb img { opacity: 1; }
.tv2-videos__play { position: absolute; inset: 0; margin: auto; width: 52px; height: 52px; border-radius: 50%; background: rgba(20,32,58,.82); }
.tv2-videos__play::after { content: ''; position: absolute; left: 21px; top: 16px; border-style: solid; border-width: 10px 0 10px 16px; border-color: transparent transparent transparent #fff; }
.tv2-videos__title { display: block; margin: 12px 0 2px; font: 500 16px/1.4 'Circular', sans-serif; color: #14203A; }
.tv2-videos__duration { display: block; font-size: 13px; color: #5A6478; }
.tv2-videos__player iframe { width: 100%; aspect-ratio: 16/9; border: 0; border-radius: 10px; }
@media (max-width: 820px) { .tv2-videos__grid { grid-template-columns: 1fr; } }

/* Single-column hero (no aside). The children keep max-widths sized for the old
   two-column layout, so without this they sit in the left 60% with a dead half
   beside them. Centred on a readable measure, matching the live hero this
   replaces. Scoped to --single so a hero that ever regains an aside is
   untouched.

   Centring is done with auto inline margins, NOT by making __main a centred
   flex column: that shrink-wraps the facts block, which collapses its 2x2 grid
   into a single stack four rows tall. */
/* One line at desktop: the 20ch cap wrapped the longer family names
   (Diagrammatic Reasoning Test). Mobile still wraps via the fluid clamp. */
/* Fact cells stay left-aligned inside the centred block: a label above a value
   reads as a column, and centring each cell makes the pairs wander. */

/* Breadcrumb centred with the hero. It sits INSIDE the hero band, above the H1
   — the conventional, more accessible position, since it says where you are
   before you read the title — so left-aligning it under a fully centred hero
   left it looking orphaned. (The live page dodges this by putting its
   breadcrumb BELOW the centred hero, where left alignment is correct because it
   joins left-aligned content. Keeping it above the H1 is the better trade.)
   Scoped to this template: the other v2 heroes are left-aligned. */

/* Rail unboxed (this template only, Guy 2026-09-01): the cards and both
   contents navs lose their outline, radius, padding and background, so the
   blocks separate by space and the row rules are the only structure. The
   other five profile templates keep the boxed rail. */

/* Types-of-question band: the cluster's front door. Two columns desktop,
   one below 980px, matching the guide's breakpoints. */
@media (max-width: 980px) { .tv2 .tv2-qtypes__grid { grid-template-columns: 1fr; } }

/* Trailing hub link under a card grid (publishers card set). */

/* Diagram frame (HANDOFF §16 shared grammar). */

/* Reviews, this template only: cards sit side by side and the quote leads.
   The shared stacked-card style (v2-core) stays for the employer template.
   One padding rhythm across the tail (videos, FAQs band, reviews), and the
   reviews section drops its v1-era centred head and hairline divider. */
.tv2 .tv2-videos { padding: 64px 0; }

/* Page closer: one quiet line back to the free test. */

/* Byline spans above the intro grid, so the contents panel top-aligns with
   the "What is" heading rather than with the metadata line. */

/* "What's inside" strip: the difficulty mix as a segmented bar (§16 grammar:
   one hue in shades, mono micro-label, figures in the legend). */
.tv2 .tv2-inside { margin: 18px 0 0; max-width: 560px; }
.tv2 .tv2-inside__label { font: 500 11px/1 'IBM Plex Mono', monospace; letter-spacing: .07em; text-transform: uppercase; color: #5A6478; margin-bottom: 10px; }
.tv2 .tv2-inside__bar { display: flex; gap: 2px; height: 10px; border-radius: 3px; overflow: hidden; }
.tv2 .tv2-inside__seg { display: block; }
.tv2 .tv2-inside__seg--easy { background: #EEF4FF; }
.tv2 .tv2-inside__seg--medium { background: #DCE8FF; }
.tv2 .tv2-inside__seg--hard { background: #1257E8; }
.tv2 .tv2-inside__legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 8px; font: 500 13px/1.4 'IBM Plex Mono', monospace; color: #414B5E; font-variant-numeric: tabular-nums; }
.tv2 .tv2-inside__swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 7px; border: 1px solid #C9D3E4; }
.tv2 .tv2-inside__swatch--easy { background: #EEF4FF; }
.tv2 .tv2-inside__swatch--medium { background: #DCE8FF; }
.tv2 .tv2-inside__swatch--hard { background: #1257E8; border-color: #1257E8; }
.tv2 .tv2-inside__skills { margin: 10px 0 0; font-size: 14px; line-height: 1.55; color: #5A6478; }