/* ============================================================================
   PharmaFacts — Formations catalogue v2
   Marketing acts appended below the course list. Built on studio-v6 tokens;
   reuses the public [data-reveal] scroll-motion system (app.js). Loaded only on
   the catalogue via head_extra.
   ============================================================================ */

.cat-eyebrow { display: inline-flex; align-items: center; gap: 10px; color: var(--pf-green-dark); font-size: .78rem; font-weight: 700; letter-spacing: .04em; }
.cat-eyebrow::before { content: ""; width: 24px; height: 2px; background: var(--pf-green); }
.cat-sec__head { max-width: 640px; margin-bottom: clamp(32px, 4vw, 56px); }
.cat-sec__head h2 { margin: 16px 0 0; font-size: clamp(2rem, 3.6vw, 3rem); letter-spacing: -.03em; line-height: 1.06; }
.cat-sec__head p { margin: 18px 0 0; color: var(--pf-ink-2); font-size: 1.05rem; line-height: 1.6; }

/* ---- How it works (3-step) -------------------------------------------------- */
.cat-how { padding-block: var(--s-9); background: var(--pf-paper); }
.cat-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 24px); }
.cat-step { padding: clamp(24px, 2.6vw, 34px); border-radius: var(--r-4); background: #fff; border: 1px solid var(--pf-line); box-shadow: 0 1px 2px rgba(16,35,63,.04), 0 16px 34px -26px rgba(16,35,63,.2); }
.cat-step__n { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; background: var(--pf-blue-soft); color: var(--pf-blue); font-family: var(--font-brand); font-weight: 650; font-size: 1.25rem; }
.cat-step h3 { margin: 20px 0 8px; font-size: 1.25rem; letter-spacing: -.02em; }
.cat-step p { margin: 0; color: var(--pf-muted); font-size: .95rem; line-height: 1.55; }

/* ---- What's included (editorial spec, not card grid) ------------------------ */
.cat-includes { padding-block: var(--s-9); background: #fff; }
.cat-includes__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(24px, 2.6vw, 40px); }
.cat-inc { padding-top: 22px; border-top: 2px solid var(--pf-ink); }
.cat-inc__ic { display: inline-flex; color: var(--pf-green); }
.cat-inc__ic svg { width: 24px; height: 24px; }
.cat-inc h3 { margin: 14px 0 8px; font-size: 1.15rem; letter-spacing: -.02em; }
.cat-inc p { margin: 0; color: var(--pf-muted); font-size: .92rem; line-height: 1.55; }

/* Owned formations switch from commerce to continuation. */
.catalog-owned {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--pf-green-soft) !important;
  color: var(--pf-green-dark) !important;
}
.catalog-owned .icon { width: 14px; height: 14px; }
.catalog-owned-label {
  color: var(--pf-green-dark) !important;
  font-size: .8rem !important;
  font-weight: 700;
}

/* ---- Scroll reveal for the appended sections (uses html.js-reveal system) ---- */
html.js-reveal .cat-how [data-reveal],
html.js-reveal .cat-includes [data-reveal] { will-change: opacity, transform; }

/* ---- Responsive ------------------------------------------------------------- */
@media (max-width: 900px) {
  .cat-steps { grid-template-columns: 1fr; }
  .cat-includes__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .cat-includes__grid { grid-template-columns: 1fr; }
}