/* Verityprep private lesson landing pages (Main Layout Overhaul).
   SHARED by all 5 Private_*_Lesson pages (AP / IB / SAT / ACT / TIL).
   Page-specific layout only — reusable components (vp-panel, vp-check-list,
   vp-btn, vp-meta-chip, vp-package-card, vp-card-grid, vp-pill-badge,
   vp-section-title, vp-tag-links) live in verityprep_main_theme_v2.css.
   Colors come from tokens in verityprep_main_theme_tokens.css. */

/* --- Hero: copy + request bar (left), check-list panel (right) --- */
/* Reusable hero tint modifier (opt-in per page; siblings can add it later). */
.vp-pl-hero {
  display: grid;
  grid-template-columns: 1fr .92fr;
  gap: 42px;
  align-items: start;
}
.vp-pl-hero__aside {
  display: grid;
  gap: 0;
  min-width: 0;
}
.vp-pl-hero__media {
  display: block;
  width: 100%;
  max-width: 280px;
  height: auto;
  border-radius: var(--vp-radius-lg);
  filter: drop-shadow(2px 4px 6px rgb(var(--vp-navy-rgb) / .4));
}
.vp-pl-hero__copy small {
  display: inline-flex;
  margin-bottom: 14px;
  color: var(--vp-accent-primary-color);
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.vp-pl-hero__copy h1 {
  margin: 0 0 24px;
  font-size: clamp(38px, 5vw, 62px);
  line-height: .98;
  letter-spacing: -.055em;
}
.vp-pl-hero__copy p {
  max-width: 590px;
  margin: 0 0 18px;
  color: var(--vp-text-secondary-color);
  font-size: 17px;
  line-height: 1.7;
}

/* --- Hero check-list panel: restore right-top decorative blue glow.
   Glow is a background-image layer (no ::before); the shared vp-panel surface
   gradient is re-stacked underneath so its themed look (and dark-mode swap) stays. */
.vp-pl-hero__panel {
  position: relative;
  overflow: hidden;
  background-image:
    radial-gradient(circle 115px at calc(100% - 15px) 35px, rgb(var(--vp-blue-rgb) / .25), transparent 68%),
    var(--vp-gradient-surface-1);
}

/* --- Request bar: course select + Make a Request CTA --- */
.vp-pl-request-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 14px;
  margin-top: 8px;
}
.vp-pl-request-field {
  display: grid;
  gap: 8px;
  min-width: 0;
}
.vp-pl-request-field label {
  color: var(--vp-text-secondary-color);
  font-size: 13px;
  font-weight: 500;
}
.vp-pl-select {
  min-height: 46px;
  min-width: 260px;
  max-width: 100%;
  padding: 0 14px;
  border-radius: var(--vp-radius-md);
  color: var(--vp-text-primary-color);
  background: var(--vp-bg-secondary-color);
  border: 1px solid var(--vp-border-primary-color);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
.vp-pl-select:focus-visible {
  outline: 2px solid rgb(var(--vp-blue-rgb) / .55);
  outline-offset: 2px;
}

/* Disabled-state CTA (JS removes .is-disabled + aria-disabled on selection) */
.vp-btn.is-disabled {
  opacity: .55;
  pointer-events: none;
}

/* --- Feature grid (4 highlight cards with FA icons) --- */
.vp-pl-feature-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.vp-pl-feature-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px;
  min-height: 140px;
  border-radius: var(--vp-radius-lg);
  color: var(--vp-text-heading-color);
  background: var(--vp-gradient-surface-1);
  border: 1px solid var(--vp-border-primary-color);
  box-shadow: var(--vp-shadow-1);
}
.vp-pl-feature-card__icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  margin-bottom: 0;
  flex: 0 0 auto;
  border-radius: var(--vp-radius-md);
  color: var(--vp-accent-primary-color);
  background: rgb(var(--vp-blue-rgb) / .12);
  border: 1px solid rgb(var(--vp-blue-rgb) / .28);
  font-size: 22px;
}
.vp-pl-feature-card h3 {
  flex: 1 1 auto;
  margin: 0;
  font-size: 16px;
  line-height: 1.45;
  letter-spacing: -.01em;
}

/* Description support: icon + stacked title/body block. Body-less cards
   (AP/IB/SAT/ACT/TIL highlights) keep the centered icon+title layout. */
.vp-pl-feature-card:has(.vp-pl-feature-card__content) {
  align-items: flex-start;
}
.vp-pl-feature-card__content {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.vp-pl-feature-card__content h3 { flex: 0 0 auto; }
.vp-pl-feature-card__body {
  margin: 6px 0 0;
  color: var(--vp-text-secondary-color);
  font-size: 14px;
  line-height: 1.55;
}

/* --- Compact feature strip (moved into lesson-packages section header).
   Tighter than the standalone grid: smaller padding/icon, single-line-ish cards,
   auto-fit columns that collapse on narrow viewports. --- */
.vp-pl-feature-grid--compact {
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
  margin-bottom: 22px;
}
.vp-pl-feature-grid--compact .vp-pl-feature-card {
  gap: 11px;
  padding: 12px 14px;
  min-height: 0;
}
.vp-pl-feature-grid--compact .vp-pl-feature-card__icon {
  width: 36px;
  height: 36px;
  font-size: 17px;
}
.vp-pl-feature-grid--compact .vp-pl-feature-card h3 {
  font-size: 14px;
  line-height: 1.35;
}

/* --- Lesson package benefit pills (page-specific row; pill = vp-pill-badge) --- */
.vp-pl-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 13px;
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
}

/* --- Lesson package cards --- */
.vp-pl-lesson-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: 4px;
}
.vp-pl-lesson-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 26px;
  border-radius: var(--vp-radius-lg);
  color: var(--vp-text-heading-color);
  background: var(--vp-gradient-surface-1);
  border: 1px solid var(--vp-border-primary-color);
  box-shadow: var(--vp-shadow-1);
}
.vp-pl-lesson-card__head h3 {
  margin: 0 0 8px;
  font-size: clamp(22px, 3vw, 28px);
  letter-spacing: -.035em;
  line-height: 1.1;
}
.vp-pl-lesson-card__head p {
  margin: 0;
  color: var(--vp-text-secondary-color);
  font-size: 15px;
  line-height: 1.55;
}
.vp-pl-lesson-card__actions {
  margin-top: auto;
  display: flex;
}

/* --- Closing CTA band (deliberately dark in both themes; tokens in tokens.css) --- */
.vp-pl-cta-band {
  padding: 42px clamp(24px, 5vw, 56px);
  text-align: center;
  border-radius: var(--vp-radius-lg);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--vp-pl-cta-band-bg);
  border: 1px solid var(--vp-pl-cta-band-border);
  box-shadow: var(--vp-pl-cta-band-shadow);
}
.vp-pl-cta-band p {
  max-width: 880px;
  margin: 0 auto 16px;
  color: var(--vp-pl-cta-band-lead-color);
  font-size: 17px;
  line-height: 1.7;
}
.vp-pl-cta-band b {
  display: block;
  margin: 0 0 26px;
  color: var(--vp-pl-cta-band-b-color);
  font-size: clamp(22px, 3vw, 30px);
  letter-spacing: -.03em;
  line-height: 1.2;
}
.vp-pl-cta-band__actions {
  display: flex;
  justify-content: center;
}

/* --- Prose content panel (TIL "About", IB "Why successful") --- */
.vp-pl-prose {
  padding: 32px clamp(24px, 4vw, 44px);
  border-radius: var(--vp-radius-lg);
  color: var(--vp-text-heading-color);
  background: var(--vp-gradient-surface-1);
  border: 1px solid var(--vp-border-primary-color);
  box-shadow: var(--vp-shadow-1);
}
.vp-pl-prose h2 {
  margin: 0 0 20px;
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1;
  letter-spacing: -.045em;
}
.vp-pl-prose h3 {
  margin: 26px 0 10px;
  font-size: 19px;
  letter-spacing: -.02em;
  color: var(--vp-accent-primary-color);
}
.vp-pl-prose p {
  margin: 0 0 14px;
  color: var(--vp-text-secondary-color);
  font-size: 15.5px;
  line-height: 1.7;
}
.vp-pl-prose ul {
  margin: 0 0 16px;
  padding-left: 22px;
  display: grid;
  gap: 8px;
}
.vp-pl-prose li {
  color: var(--vp-text-secondary-color);
  font-size: 15px;
  line-height: 1.6;
}
.vp-pl-prose a { color: var(--vp-accent-primary-color); font-weight: 500; }
.vp-pl-prose a:hover { text-decoration: underline; }
.vp-pl-prose b,
.vp-pl-prose strong { color: var(--vp-text-primary-color); }

/* --- Exam tables (TIL-I / TIL-A downloadable tests) --- */
.vp-pl-exam-tables { display: grid; gap: 16px; }
.vp-pl-exam-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.vp-pl-exam-block {
  padding: 22px;
  border-radius: var(--vp-radius-lg);
  color: var(--vp-text-heading-color);
  background: var(--vp-gradient-surface-1);
  border: 1px solid var(--vp-border-primary-color);
  box-shadow: var(--vp-shadow-1);
}
.vp-pl-exam-block h3 {
  margin: 0 0 16px;
  font-size: 22px;
  letter-spacing: -.02em;
}
.vp-pl-exam-scroll { overflow-x: auto; }
.vp-pl-exam-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.vp-pl-exam-table th,
.vp-pl-exam-table td {
  padding: 11px 14px;
  text-align: left;
  border: 1px solid var(--vp-border-primary-color);
}
.vp-pl-exam-table th {
  color: var(--vp-text-heading-color);
  background: rgb(var(--vp-white-rgb) / .05);
  font-weight: 500;
}
.vp-pl-exam-table tbody tr:nth-child(even) td {
  background: rgb(var(--vp-white-rgb) / .03);
}
.vp-pl-exam-table a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--vp-accent-primary-color);
  font-weight: 500;
}
.vp-pl-exam-table a:hover { text-decoration: underline; }
.vp-pl-exam-table td.is-disabled { color: var(--vp-text-secondary-color); }
.vp-pl-file-icon {
  width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
}
.vp-pl-file-icon svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --- FAQ (native details/summary) --- */
.vp-pl-faq { display: grid; gap: 10px; }
.vp-pl-faq-item {
  border-radius: 18px;
  background: var(--vp-bg-secondary-color);
  border: 1px solid var(--vp-border-primary-color);
}
.vp-pl-faq-item[open] { border-color: rgb(var(--vp-blue-rgb) / .42); }
.vp-pl-faq-q {
  position: relative;
  padding: 16px 52px 16px 20px;
  list-style: none;
  cursor: pointer;
  color: var(--vp-text-heading-color);
  font-size: 15px;
  font-weight: 500;
}
.vp-pl-faq-q::-webkit-details-marker { display: none; }
.vp-pl-faq-q::after {
  content: "+";
  position: absolute;
  right: 20px;
  top: 50%;
  width: 22px;
  text-align: center;
  color: var(--vp-accent-primary-color);
  font-size: 22px;
  line-height: 1;
  transform: translateY(-50%);
  transition: transform .2s ease;
}
.vp-pl-faq-item[open] .vp-pl-faq-q::after { transform: translateY(-50%) rotate(45deg); }
.vp-pl-faq-a {
  padding: 0 20px 18px;
  color: var(--vp-text-secondary-color);
  font-size: 14.5px;
  line-height: 1.65;
}
.vp-pl-faq-a p { margin: 0 0 10px; }
.vp-pl-faq-a p:last-child { margin-bottom: 0; }

/* --- Responsive (breakpoints aligned with reusable v2 grids) --- */
@media (max-width: 1120px) {
  .vp-pl-hero { grid-template-columns: 1fr; }
  .vp-pl-feature-grid { grid-template-columns: repeat(2, 1fr); }
  .vp-pl-lesson-grid,
  .vp-pl-exam-grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .vp-pl-feature-grid { grid-template-columns: 1fr; }
  .vp-pl-request-bar { align-items: stretch; flex-direction: column; }
  .vp-pl-request-bar .vp-btn { width: 100%; }
  .vp-pl-select { min-width: 0; width: 100%; }
}