/* Verityprep free IELTS trial exam page (/free-ielts-trial-exam, Wave A migration).
   Shared ap-* recipes (hero, panel, check list, info grid, course cards) come
   from verity-pages/exam-landing.css; this file only adds the page-specific
   pieces: hero aside stack, accent note card, numbered access steps, 2-column
   info modifier, centered actions and the final CTA band. */

/* --- Hero aside: panel + note card stacked in the right hero column --- */
.it-hero-aside {
  display: grid;
  gap: 14px;
  align-self: center;
}
.ap-copy .it-quote {
  color: var(--accent);
  font-weight: 800;
  font-style: italic;
}

/* --- Accent-bordered note card (recipe adapted from .xpd-promo) --- */
.it-note {
  display: grid;
  gap: 6px;
  padding: 16px 18px;
  border-radius: 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
}
.it-note b {
  color: var(--heading);
}
.it-note p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}
.it-note a {
  color: var(--accent);
  font-weight: 700;
  text-decoration: underline;
}

/* --- Section band + heading --- */
.it-section {
  display: grid;
  gap: 20px;
  scroll-margin-top: 96px; /* keep anchor targets clear of the sticky header */
}
.it-head h2 {
  margin: 0 0 10px;
  color: var(--heading);
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.05;
  letter-spacing: -.045em;
}
.it-head p {
  margin: 0;
  max-width: 640px;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.6;
}

/* --- Numbered access steps (badge recipe adapted from .xpd-step-list) --- */
.it-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.it-step {
  padding: 20px;
  border-radius: 20px;
  background: var(--panel);
  border: 1px solid var(--line);
}
.it-step-num {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  margin-bottom: 12px;
  border-radius: 999px;
  color: var(--bg);
  background: var(--accent);
  font-weight: 900;
}
.it-step h3 {
  margin: 0 0 8px;
  color: var(--heading);
  font-size: 16px;
}
.it-step p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}
.it-step a {
  color: var(--accent);
  font-weight: 700;
}

/* --- Two-column variant of the shared info grid --- */
.ap-info-grid.it-cols-2 {
  grid-template-columns: repeat(2, 1fr);
}
.it-warn-list {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 6px;
  color: var(--muted);
  line-height: 1.62;
}

/* --- Centered action row --- */
.ap-actions.it-center {
  justify-content: center;
}

/* --- Final CTA band --- */
.it-final {
  display: grid;
  gap: 18px;
  justify-items: center;
  text-align: center;
  padding: 10px 0 30px;
}
.it-final h2 {
  margin: 0;
  color: var(--heading);
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.05;
  letter-spacing: -.045em;
}
.it-final p {
  margin: 0;
  max-width: 720px;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.6;
}
.it-final .bank-pills {
  margin-bottom: 0;
}

/* --- Responsive (theme breakpoints) --- */
@media (max-width: 1120px) {
  .it-steps {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 520px) {
  .it-steps,
  .ap-info-grid.it-cols-2 {
    grid-template-columns: 1fr;
  }
}

/* --- Warning check-list marks (Important Warnings card): amber caution tone
   instead of the positive blue check pill, so the "NOT / do" rules read as
   warnings rather than confirmations. --- */
.vp-check-list__mark--warn {
  background: rgb(var(--vp-orange-rgb) / .16);
}
.vp-check-list__mark--warn .fa-triangle-exclamation {
  color: var(--vp-accent-orange-color);
  font-size: 11px;
}