/* =============================================================
   Pureform — class guide sections (v2.3.0)
   Extra copy under each class page and the /classes/ hub.
   Uses the tokens defined in main.css (:root).
   ============================================================= */

.classguide {
  padding: clamp(48px, 6vw, 88px) var(--gutter);
  border-top: 1px solid var(--line);
}
.classguide-inner {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(32px, 5vw, 72px);
  row-gap: clamp(28px, 3.5vw, 44px);
}
.classguide-item { min-width: 0; }
.classguide-h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(20px, 2.4vw, 26px);
  line-height: 1.25;
  color: var(--ink);
  margin: 0 0 12px;
}
.classguide-item p {
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--mid);
  max-width: 60ch;
}
.classguide-item p + p { margin-top: 12px; }
.classguide-item a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--oak);
  text-underline-offset: 3px;
  transition: opacity 0.2s var(--ease);
}
.classguide-item a:hover,
.classguide-item a:focus-visible { opacity: 0.65; }

/* Hub variant sits between the class grid and the dark offer band */
.classguide-hub { padding-top: clamp(40px, 5vw, 72px); }

@media (max-width: 760px) {
  .classguide-inner { grid-template-columns: minmax(0, 1fr); }
  .classguide-item p { font-size: 15px; }
}

/* Hub page: descriptive H1 styled as the eyebrow line */
.page-header h1.page-header-eyebrow { font-size: 11px; line-height: 1.5; }

/* Visually hidden, still read by screen readers */
.pf-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* Preview label — only rendered on ?pfpreview= links */
.pf-preview-flag {
  position: fixed; left: 16px; bottom: 16px; z-index: 99999;
  background: var(--ink); color: var(--cream);
  font-family: var(--sans); font-size: 11px; font-weight: 600;
  letter-spacing: 2px; text-transform: uppercase;
  padding: 9px 14px; border-radius: 999px;
  pointer-events: none;
}

@media (max-width: 760px) {
  .pf-preview-flag { bottom: auto; top: 96px; left: 12px; font-size: 10px; padding: 7px 12px; }
}