/* ============================================================
   Page 2.2 — Security-Awareness-Schulungen (pages/courses.css)
   Page-specific layout only; shared components (surface-dark,
   eyebrow-dark, feature-row, cta-band, buttons) live in main.css.
   Tokens only — no raw hex/px outside documented cases.
   ============================================================ */

/* ── Hero: visual-led, media-dominant, premium dark band
      (chrome comes from .surface-dark + .eyebrow-dark in main.css;
      spec: media-first even on mobile — markup order does that) ── */
.courses-hero { padding-block: var(--space-2xl); }
.courses-hero__grid { display: grid; gap: var(--space-xl); }
.courses-hero__visual svg { width: 100%; height: auto; }
.courses-hero__visual img { width: 100%; height: auto; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.courses-hero__eyebrow { margin-bottom: var(--space-md); }
.courses-hero__headline { margin-bottom: var(--space-sm); }
.courses-hero__sub { font-size: var(--text-lg); color: var(--ink-inverse-muted); margin-bottom: var(--space-lg); }
/* the spec CTA label is a full sentence — allow wrapping (.btn defaults to nowrap) */
.courses-hero__cta { white-space: normal; text-align: center; }

@media (min-width: 1024px) {
    .courses-hero { padding-block: var(--space-3xl) var(--space-2xl); }
    /* media-dominant: the course visual is the argument */
    .courses-hero__grid { grid-template-columns: 1.25fr 1fr; align-items: center; }
}

/* ── Format proof: cards in the home pillar-card treatment —
      icon tile centered, bold label + muted description ── */
.courses-format { background: var(--surface-0); }
.courses-format__grid {
    display: grid; gap: var(--space-lg);
    list-style: none; padding: 0;
}
@media (min-width: 640px) { .courses-format__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .courses-format__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.courses-format__item {
    display: flex; flex-direction: column; align-items: flex-start;
    background: var(--surface-0);
    border: 1px solid var(--line-200);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    box-shadow: var(--shadow-sm);
}
.courses-format__icon {
    display: flex; align-items: center; justify-content: center;
    flex: none;
    width: 40px; height: 40px; /* icon tile, matches pillar-card */
    background: var(--blue-100); color: var(--blue-700); /* blue-700 for AA on the tint; accent stays reserved for success */
    border-radius: var(--radius-md);
    margin-bottom: var(--space-md);
}
.courses-format__label { font-weight: 600; color: var(--ink-900); margin-bottom: var(--space-3xs); }
.courses-format__desc { font-size: var(--text-sm); color: var(--ink-600); }

/* ── Topic spread: neutral pill chips (badge style; real text, not controls) ── */
.courses-topics__grid {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: var(--space-sm);
    list-style: none; padding: 0;
    max-width: var(--container-narrow);
    margin-inline: auto;
}
.courses-topics__grid li {
    display: inline-flex; align-items: center;
    background: var(--surface-0);
    border: 1px solid var(--line-200);
    border-radius: var(--radius-full);
    padding: var(--space-xs) var(--space-md);
    font-size: var(--text-sm); color: var(--ink-900);
}

/* ── Band rhythm: preview sits on white between surface-50 sections ── */
.courses-preview { background: var(--surface-0); }