/* =========================================================
   Practice-test hubs and grade pages.

   Shared by /practice-tests/, /practice-tests/{exam}/ and
   /practice-tests/{exam}/{grade}/.  Everything here is built
   from the theme's own tokens, so the practice routes read as
   the same site as the home page: white cards on a 1px --line
   border with a soft shadow, pill badges rather than rules or
   bars, and one hue per test family.
   ========================================================= */

/* ---------- Breadcrumbs ---------- */
.breadcrumbs{
  display:flex;align-items:center;justify-content:flex-start;gap:8px;flex-wrap:wrap;
  width:100%;margin:0 0 22px;text-align:left;color:var(--muted);font-size:.88rem;
}
.breadcrumbs a{color:var(--brand-ink);font-weight:700}
.breadcrumbs a:hover{text-decoration:underline;text-underline-offset:3px}
.breadcrumbs span[aria-hidden]{color:var(--line-strong);font-size:1.2em}

/* ---------- Practice hero ----------
   One anatomy at every level of the route, so the hub, the exam hub and a
   grade page open the same way: breadcrumbs, a row of pills, the headline,
   one line of lede.  Left-aligned like the home-page hero and the legal
   pages; only the exam hub adds a second column. */
.practice-hero{
  background:var(--hero-bg);
  padding:clamp(30px,4vw,48px) 0 clamp(44px,5.5vw,68px);
}
.practice-hero .breadcrumbs{margin-bottom:clamp(20px,2.6vw,28px)}
.practice-hero__eyebrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.practice-hero h1{max-width:36ch;text-wrap:balance}
.practice-hero__lede{margin-top:16px;max-width:96ch;color:var(--ink-2);font-size:1.1rem}

/* The exam hub puts the grade picker beside the copy.  The copy column is the
   wider of the two: the headline is the page, the picker is the tool. */
.practice-hero--split .practice-hero__grid{
  display:grid;grid-template-columns:1fr .9fr;
  gap:clamp(30px,4.5vw,58px);align-items:center;
}
.practice-hero--split h1{max-width:15ch}
.practice-hero--split .practice-hero__lede{max-width:44ch}

/* ---------- Grade picker ---------- */
.grade-picker{
  padding:clamp(20px,2.4vw,26px);border:1px solid var(--line);
  border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow);
}
.grade-picker__head{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding-bottom:14px;margin-bottom:16px;border-bottom:1px solid var(--line);
}
.grade-picker__head h2{font-size:1.18rem}
.grade-picker__head span{font-size:.8rem;font-weight:700;color:var(--muted)}
.grade-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}

/* A grade is either playable or it isn't, and the two states should not look
   alike: the live one carries the brand tint and an arrow, the rest step back
   to the alt surface with a quiet "Soon" chip. */
.grade-card{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  min-height:72px;padding:13px 15px;border:1px solid var(--line);
  border-radius:var(--radius-sm);background:var(--bg-alt);
}
.grade-card strong{display:block;font-family:var(--font-display);font-size:1.06rem;line-height:1.2}
.grade-card small{display:block;margin-top:3px;color:var(--muted);font-size:.82rem}
a.grade-card{
  background:var(--surface);border-color:var(--chip-line);
  box-shadow:var(--shadow-sm);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s;
}
a.grade-card:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--brand)}
a.grade-card small{color:var(--ink-2)}
/* The arrow sits on a brand-tinted disc so a live grade reads as a control
   rather than a link with a glyph after it.  It fills on hover, which is the
   only place in the picker that goes to solid --brand. */
.grade-card__arrow{
  flex:none;display:grid;place-items:center;
  width:30px;height:30px;border-radius:var(--radius-pill);
  background:var(--brand-050);color:var(--brand-ink);
  font-size:1rem;font-weight:800;line-height:1;
  transition:background .2s var(--ease),color .2s var(--ease);
}
a.grade-card:hover .grade-card__arrow,
a.grade-card:focus-visible .grade-card__arrow{background:var(--brand);color:#fff}
.grade-card--soon strong{color:var(--ink-2)}
.grade-card__soon{
  flex:none;font-size:.68rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);background:var(--chip-bg);border:1px solid var(--chip-line);
  padding:3px 9px;border-radius:var(--radius-pill);
}

/* The picker repeated as the last card of the preparation guide, on the CogAT
   and mixed hubs.  The prep card supplies the border, radius, surface and
   padding, so this copy drops the picker's own chrome: a card inside a card
   would read as a mistake.  Three across at container width, which is the
   shape six grades want at that size rather than the hero's two. */
.prep-grades .grade-picker{padding:0;border:0;border-radius:0;background:none;box-shadow:none}
.prep-grades .grade-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
/* .prep-card a underlines and re-colours every link in the guide, which is
   right for prose and wrong for a card. */
.prep-grades a.grade-card{color:var(--ink);text-decoration:none}
@media (max-width:860px){.prep-grades .grade-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.prep-grades .grade-grid{grid-template-columns:1fr}}

/* ---------- Sections ---------- */
.hub-section{padding:clamp(54px,7vw,88px) 0}
.hub-section--alt{background:var(--bg-alt)}
.hub-section__head{max-width:800px;margin-bottom:clamp(28px,4vw,42px)}
.hub-section__head.center{margin-inline:auto;text-align:center}
.hub-section__head p{margin-top:13px;color:var(--ink-2);font-size:1.04rem}

/* ---------- Test-family cards ----------
   The hub's main content.  Same shape as the home page's track cards: a
   family-tinted badge on a white card, then the name, then what it is.  The
   family that has published grades leads at full width; the rest sit below as
   a quieter row so the live practice is unmistakably the thing to click. */
.hub-section--catalog{padding:clamp(6px,1vw,10px) 0 clamp(58px,7vw,90px)}
.test-type-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.test-type-card{
  display:flex;flex-direction:column;
  padding:clamp(24px,2.6vw,30px);
  border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);
  box-shadow:var(--shadow-sm);
}
.test-type-card__badge{
  align-self:flex-start;padding:5px 11px;border-radius:var(--radius-pill);
  background:var(--brand-050);color:var(--brand-ink);
  font-size:.72rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
}
.test-type-card--cogat .test-type-card__badge{background:var(--test-cogat-bg);color:var(--test-cogat-ink)}
.test-type-card--nnat  .test-type-card__badge{background:var(--test-nnat-bg); color:var(--test-nnat-ink)}
.test-type-card--gate  .test-type-card__badge{background:var(--test-gate-bg); color:var(--test-gate-ink)}
.test-type-card--mix   .test-type-card__badge{background:var(--test-mix-bg);  color:var(--test-mix-ink)}
.test-type-card h2{margin-top:16px;font-size:1.4rem}
.test-type-card h2 a{color:inherit}
.test-type-card h2 a:hover{text-decoration:underline;text-underline-offset:4px}
.test-type-card > p,
.test-type-card__intro > p{margin-top:9px;color:var(--ink-2);font-size:.96rem;max-width:46ch}

/* The published family.  Full width, and split inside so the grade links sit
   beside the description rather than leaving half the card empty. */
.test-type-card--featured{
  grid-column:1 / -1;display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(26px,4vw,54px);align-items:center;
}
.test-type-card--featured h2{margin-top:15px;font-size:1.6rem}
.test-type-card__intro{display:flex;flex-direction:column;align-items:flex-start}
.test-type-card__grades{margin-top:auto;padding-top:24px}
.test-type-card--featured .test-type-card__grades{margin-top:0;padding-top:0}
.test-type-card__label{
  font-size:.72rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);margin-bottom:11px;
}
/* auto-fit, so a single published grade fills the width it is given and
   later grades slot in beside it without a layout change. */
.test-grade-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(228px,1fr));gap:12px}
.test-grade-link{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  min-height:70px;padding:13px 16px;border:1px solid var(--chip-line);
  border-radius:var(--radius-sm);background:var(--surface);box-shadow:var(--shadow-sm);
  transition:transform .2s var(--ease),border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.test-grade-link:hover{transform:translateY(-2px);border-color:var(--brand);box-shadow:var(--shadow)}
.test-grade-link strong{display:block;font-family:var(--font-display);font-size:1.06rem;line-height:1.2}
.test-grade-link small{display:block;margin-top:3px;color:var(--ink-2);font-size:.82rem}
.test-grade-link > span:last-child{color:var(--brand-ink);font-size:1.2rem;font-weight:800;line-height:1}
.test-type-card__more{margin-top:16px;display:inline-block;color:var(--brand-ink);font-weight:800;font-size:.92rem}
.test-type-card__more:hover{text-decoration:underline;text-underline-offset:3px}

/* The families still to come */
.test-type-card--soon{background:var(--bg-alt);box-shadow:none}
.test-type-card--soon h2{color:var(--ink-2)}
.test-type-card--soon .test-type-card__badge{opacity:.8}
.test-grade-empty{
  align-self:flex-start;margin-top:auto;padding-top:22px;
  color:var(--muted);font-size:.86rem;font-weight:700;
}

/* ---------- Shared closing CTA ----------
   The sky band from the home page, given a second column for the device art.
   Its copy sits left of the art on desktop and re-centres on narrow screens,
   which is the same move the home-page hero makes. */
.practice-cta{padding:clamp(52px,6.5vw,84px) 0}
.practice-cta__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,56px);align-items:center}
.practice-cta__copy{text-align:left}
.practice-cta .cta__brand{width:max-content;margin:0 0 20px;color:var(--cta-fg)}
.practice-cta .cta__brand .brand__name span{color:var(--cta-muted)}
.practice-cta h2{max-width:20ch;color:var(--cta-fg);text-wrap:balance}
.practice-cta p{margin:14px 0 0;max-width:50ch;font-size:1.04rem}
.practice-cta .cta__row{justify-content:flex-start;margin-top:26px}
.practice-cta .cta__fine{margin-top:18px}
.practice-cta .device-stack{min-height:330px}
.practice-cta .device--pad{width:min(64%,300px)}
.practice-cta .device--phone{width:min(36%,165px);margin-left:-16%}
.practice-cta .blob--a{width:250px;height:250px}
.practice-cta .blob--b{width:220px;height:220px}

/* ---------- Responsive ---------- */
@media (max-width:1000px){
  .practice-hero--split .practice-hero__grid{grid-template-columns:1fr;gap:30px}
  .practice-hero--split h1,.practice-hero--split .practice-hero__lede{max-width:none}
  .grade-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:980px){
  .practice-cta__grid{grid-template-columns:1fr;gap:24px}
  .practice-cta__copy{text-align:center}
  .practice-cta .cta__brand{margin-inline:auto}
  .practice-cta h2{max-width:none}
  .practice-cta p{margin-inline:auto}
  .practice-cta .cta__row{justify-content:center}
  .practice-cta .device-stack{min-height:0;margin-top:4px}
  .practice-cta .device--pad{width:min(58%,280px)}
  .practice-cta .device--phone{width:min(32%,150px)}
}
@media (max-width:860px){
  .test-type-card--featured{grid-template-columns:1fr;gap:0}
  .test-type-card--featured .test-type-card__grades{margin-top:24px}
}
@media (max-width:620px){
  .test-type-grid{grid-template-columns:1fr}
  .grade-picker{padding:16px}
  .test-grade-row{grid-template-columns:1fr}
}
/* Below this a grade card cannot hold "Kindergarten" and its chip side by
   side in half a phone's width, so the picker becomes a single column. */
@media (max-width:560px){
  .grade-grid{grid-template-columns:1fr}
}

/* Preparation guides and contextual next steps. */
.prep-guide > h3{margin:32px 0 16px}
.prep-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:22px;margin-top:24px}
.prep-card{padding:clamp(20px,3vw,30px);border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface)}
.prep-card h3{font-size:1.25rem;line-height:1.3}
.prep-card p,.prep-card ul,.prep-card ol{margin-top:14px;color:var(--ink-2)}
.prep-card li,.prep-steps li{margin:10px 0}
.prep-card ul,.prep-card ol,.prep-steps{padding-left:22px}
.prep-access,.prep-grades{margin-top:24px}
.prep-guide a,.prep-card a{color:var(--brand-ink);text-decoration:underline;text-underline-offset:3px}
.prep-source{font-size:.9rem;color:var(--muted);margin-top:12px}
.prep-table-wrap{overflow-x:auto}
.prep-table{width:100%;border-collapse:collapse;font-size:.95rem}
.prep-table caption{text-align:left;margin-bottom:12px;color:var(--muted)}
.prep-table th,.prep-table td{padding:16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line);overflow-wrap:anywhere}
.prep-table thead{background:var(--brand-050)}
.prep-table th{color:var(--brand-ink)}
#prep-guide,#question-types{scroll-margin-top:100px}
@media(max-width:520px){.prep-table th,.prep-table td{padding:10px 7px;font-size:.84rem}}