/* ============================================================
   Course page system — shared styles for every course under
   /get-started/courses/*. Tokens, typography, buttons, .gs-*
   structure all come from get-started.css. This file only adds
   the course-specific components and an accent per track.
   ============================================================ */

/* ---- Per-track accent (pick one modifier on .course-page) ---- */
.course-page--training  { --gs-accent: #38bdf8; --gs-accent-dark: #0ea5e9; --course-rgb: 56, 189, 248; }
.course-page--marketing { --gs-accent: #fbbf24; --gs-accent-dark: #d99e09; --course-rgb: 251, 191, 36; }
.course-page--workflow  { --gs-accent: #34d399; --gs-accent-dark: #10b981; --course-rgb: 52, 211, 153; }
.course-page--full      { --gs-accent: #a78bfa; --gs-accent-dark: #8b5cf6; --course-rgb: 167, 139, 250; }

/* ---- Per-level accent — course pages are keyed by level, mirroring the
   in-person-learning level colours (beginner = training blue ·
   intermediate = marketing amber · expert = full purple). The main accent
   pulls the shared --gs-c-* token; --gs-accent-dark / --course-rgb have no
   token of their own, so they match the values above. ---- */
.course-page--beginner     { --gs-accent: var(--gs-c-training);  --gs-accent-dark: #0ea5e9; --course-rgb: 56, 189, 248; }
.course-page--intermediate { --gs-accent: var(--gs-c-marketing); --gs-accent-dark: #d99e09; --course-rgb: 251, 191, 36; }
.course-page--expert       { --gs-accent: var(--gs-c-full);      --gs-accent-dark: #8b5cf6; --course-rgb: 167, 139, 250; }

/* ============================================================
   Hero
   ============================================================ */
.course-hero {
    position: relative;
    min-height: auto;
    overflow: hidden;
    padding-block: clamp(7rem, 16vh, 11rem) clamp(3rem, 7vw, 5rem);
}
/* soft accent glow rising behind the title */
.course-hero__glow {
    position: absolute;
    left: 50%;
    top: -10%;
    transform: translateX(-50%);
    width: min(900px, 90vw);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(var(--course-rgb), 0.18) 0%,
        rgba(var(--course-rgb), 0.06) 42%,
        transparent 68%);
    pointer-events: none;
    z-index: 0;
}
.course-hero .gs-hero__inner { position: relative; z-index: 1; }
/* Talk/conversation pages: fully centred hero. The base .gs-hero__sub loses its
   auto side-margins to a later `margin` shorthand, so re-centre the description. */
.course-hero--center .gs-hero__copy { text-align: center; }
.course-hero--center .gs-hero__sub  { margin-inline: auto; }

/* one-line meta strip under the hero copy */
.course-hero__meta {
    list-style: none;
    margin: clamp(1.6rem, 3vw, 2.4rem) 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(1.4rem, 4vw, 3rem);
}
.course-hero__meta li {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    text-align: center;
}
.course-hero__meta b {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(1.05rem, 1.6vw, 1.3rem);
    font-weight: 700;
    color: var(--gs-text);
}
.course-hero__meta span {
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gs-text-faint);
}
/* divider dots between meta items */
.course-hero__meta li + li { position: relative; }
.course-hero__meta li + li::before {
    content: "";
    position: absolute;
    left: calc(clamp(1.4rem, 4vw, 3rem) / -2);
    top: 50%;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--gs-border-strong);
    transform: translateY(-50%);
}

/* ============================================================
   Overview — copy + at-a-glance card
   ============================================================ */
.course-overview { background: var(--gs-bg); }
.course-overview__grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: clamp(var(--gs-3), 5vw, var(--gs-6));
    align-items: start;
}
.course-overview__p {
    color: var(--gs-text-dim);
    line-height: 1.7;
    margin: var(--gs-2) 0 0;
    max-width: 60ch;
}
.course-overview__who {
    margin: var(--gs-3) 0 0;
    padding-top: var(--gs-3);
    border-top: 1px solid var(--gs-border);
    color: var(--gs-text-dim);
    line-height: 1.6;
}
.course-overview__who b { color: var(--gs-text); }

.course-facts {
    position: relative;
    background: var(--gs-surface);
    border: 1px solid var(--gs-border);
    border-top: 3px solid var(--gs-accent);
    border-radius: var(--gs-radius);
    padding: clamp(1.4rem, 2.6vw, 2rem);
}
.course-facts__title {
    font-family: 'Outfit', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gs-accent);
    margin: 0 0 0.4rem;
}
.course-facts__list { margin: 0; }
.course-facts__list > div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--gs-border);
}
.course-facts__list > div:last-child { border-bottom: 0; padding-bottom: 0; }
.course-facts__list dt {
    font-size: 0.8rem;
    color: var(--gs-text-faint);
}
.course-facts__list dd {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--gs-text);
    text-align: right;
}

/* ============================================================
   Take-aways — numbered outcome grid
   ============================================================ */
.course-takeaways { background: var(--gs-bg-alt); }
.course-takeaways__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gs-3);
}
@media (min-width: 640px)  { .course-takeaways__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .course-takeaways__grid { grid-template-columns: repeat(3, 1fr); } }
.course-take {
    background: var(--gs-surface);
    border: 1px solid var(--gs-border);
    border-radius: var(--gs-radius);
    padding: clamp(1.4rem, 2.4vw, 1.9rem);
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.course-take:hover {
    transform: translateY(-3px);
    border-color: var(--gs-border-strong);
    box-shadow: 0 16px 44px -22px rgba(var(--course-rgb), 0.5);
}
.course-take__num {
    font-family: 'Outfit', sans-serif;
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    color: var(--gs-accent);
}
.course-take__title {
    font-family: 'Outfit', sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0.5rem 0 0;
}
.course-take__desc {
    color: var(--gs-text-dim);
    line-height: 1.6;
    margin: 0.5rem 0 0;
}

/* ============================================================
   Instructor
   ============================================================ */
.course-instr { background: var(--gs-bg); }
.course-instr__grid {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: clamp(var(--gs-3), 5vw, var(--gs-6));
    align-items: center;
}
.course-instr__photo-wrap {
    position: relative;
    border-radius: var(--gs-radius);
    overflow: hidden;
    border: 1px solid var(--gs-border);
    max-width: 460px;
}
.course-instr__photo { display: block; width: 100%; height: auto; }
.course-instr__badge {
    position: absolute;
    left: 1rem;
    bottom: 1rem;
    font-family: 'Outfit', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #06121b;
    background: var(--gs-accent);
    border-radius: var(--gs-radius-pill);
    padding: 0.35rem 0.9rem;
    box-shadow: 0 8px 24px -8px rgba(var(--course-rgb), 0.7);
}
.course-instr__p {
    color: var(--gs-text-dim);
    line-height: 1.7;
    margin: var(--gs-2) 0 0;
    max-width: 56ch;
}
.course-instr__points {
    list-style: none;
    margin: var(--gs-3) 0 0;
    padding: 0;
    display: grid;
    gap: 0.7rem;
}
.course-instr__points li {
    position: relative;
    padding-left: 1.8rem;
    color: var(--gs-text);
    font-size: 0.92rem;
}
.course-instr__points li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.15rem;
    width: 13px;
    height: 8px;
    border-left: 2px solid var(--gs-accent);
    border-bottom: 2px solid var(--gs-accent);
    transform: rotate(-45deg);
}

/* ============================================================
   Attend — booking card + open-session interest gauge
   ============================================================ */
.course-attend { background: var(--gs-bg-alt); scroll-margin-top: 4.5rem; }
.course-attend__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto auto;        /* left column stacks book + speaker; rows size to content */
    gap: var(--gs-3);
    align-items: stretch;
}
/* Bento: book top-left, speaker bottom-left, open-session spans the full height on the right */
.course-attend__card--book    { grid-column: 1; grid-row: 1; }
.course-attend__card--speaker { grid-column: 1; grid-row: 2; }
.course-attend__grid .course-gauge { grid-column: 2; grid-row: 1 / span 2; }
.course-attend__card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--gs-surface);
    border: 1px solid var(--gs-border);
    border-radius: var(--gs-radius);
    padding: clamp(1.5rem, 3vw, 2.4rem);
}
.course-attend__card--book {
    border-color: rgba(var(--course-rgb), 0.35);
    box-shadow: 0 30px 80px -50px rgba(var(--course-rgb), 0.55);
}
.course-attend__tag {
    align-self: flex-start;
    font-family: 'Outfit', sans-serif;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #06121b;
    background: var(--gs-accent);
    border-radius: var(--gs-radius-pill);
    padding: 0.26rem 0.7rem;
    margin-bottom: 0.9rem;
}
.course-attend__tag--open {
    color: var(--gs-accent);
    background: rgba(var(--course-rgb), 0.12);
    border: 1px solid rgba(var(--course-rgb), 0.4);
}
.course-attend__title {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(1.25rem, 2vw, 1.55rem);
    font-weight: 700;
    letter-spacing: -0.015em;
    margin: 0;
}
.course-attend__lead {
    color: var(--gs-text-dim);
    line-height: 1.6;
    margin: 0.7rem 0 0;
}
.course-attend__lead em { font-style: italic; color: var(--gs-text); }
.course-attend__feats {
    list-style: none;
    margin: 1.1rem 0 0;
    padding: 0;
    display: grid;
    gap: 0.55rem;
}
.course-attend__feats li {
    position: relative;
    padding-left: 1.6rem;
    font-size: 0.9rem;
    color: var(--gs-text);
}
.course-attend__feats li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.1rem;
    width: 12px;
    height: 7px;
    border-left: 2px solid var(--gs-accent);
    border-bottom: 2px solid var(--gs-accent);
    transform: rotate(-45deg);
}
.course-attend__card .gs-btn { margin-top: auto; align-self: flex-start; }
.course-attend__card--book .gs-btn { margin-top: 1.4rem; }

/* ---- the interest gauge ---- */
.course-gauge__meter { margin: 1.3rem 0 0; }
.course-gauge__nums { display: flex; align-items: baseline; gap: 0.5rem; }
.course-gauge__count {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(2.2rem, 4.5vw, 3rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--gs-accent);
}
.course-gauge__nums span { font-size: 0.85rem; color: var(--gs-text-dim); }
.course-gauge__bar {
    height: 8px;
    border-radius: var(--gs-radius-pill);
    background: rgba(255, 255, 255, 0.07);
    overflow: hidden;
    margin: 0.8rem 0 0.6rem;
}
.course-gauge__bar i {
    display: block;
    height: 100%;
    width: var(--pct, 0);            /* JS sets the target; 0 without JS */
    border-radius: inherit;
    background: linear-gradient(90deg, var(--gs-accent-dark), var(--gs-accent));
    box-shadow: 0 0 14px rgba(var(--course-rgb), 0.6);
    transition: width 1.2s cubic-bezier(0.25, 1, 0.4, 1);
}
.course-gauge__left { font-size: 0.85rem; color: var(--gs-text-dim); margin: 0; }
.course-gauge__left b { color: var(--gs-text); }
.course-gauge__met {
    font-size: 0.85rem;
    color: var(--gs-accent);
    margin: 0;
    display: none;
}
.course-gauge.is-met .course-gauge__left { display: none; }
.course-gauge.is-met .course-gauge__met { display: block; }
.course-gauge__faces {
    display: flex;
    margin: 1.1rem 0;
}
.course-gauge__faces span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--gs-surface-2), var(--gs-bg));
    border: 1px solid var(--gs-border-strong);
    margin-left: -8px;
    box-shadow: inset 0 0 0 2px var(--gs-surface);
    font-family: 'Outfit', sans-serif;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--gs-text-dim);
}
.course-gauge__faces span:first-child { margin-left: 0; }
.course-gauge__faces span:last-child {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--course-rgb), 0.18);
    border-color: var(--gs-accent);
    color: var(--gs-accent);
}
.course-gauge__note {
    font-size: 0.75rem;
    color: var(--gs-text-faint);
    margin-top: 0.7rem;
}

/* ============================================================
   Forms — open-session interest (inline) + booking/join page.
   Shared field styling on the dark design system.
   ============================================================ */
.course-form-wrap { margin-top: 1.3rem; }
.course-form { display: grid; gap: 0.85rem; }
.course-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.course-form__field { display: grid; gap: 0.35rem; }
.course-form__label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--gs-text-dim);
}
.course-form__label em { font-style: normal; color: var(--gs-text-faint); font-weight: 400; }
.course-form input,
.course-form textarea {
    width: 100%;
    font: inherit;
    color: var(--gs-text);
    background: var(--gs-surface-2);
    border: 1px solid var(--gs-border-strong);
    border-radius: var(--gs-radius-sm);
    padding: 0.7rem 0.85rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.course-form textarea { resize: vertical; min-height: 6.5em; }
.course-form input[type="date"] { color-scheme: dark; }
.course-form input::placeholder,
.course-form textarea::placeholder { color: var(--gs-text-faint); }
.course-form input:focus,
.course-form textarea:focus {
    outline: none;
    border-color: var(--gs-accent);
    box-shadow: 0 0 0 3px rgba(var(--course-rgb), 0.25);
}
/* show invalid fields only after a submit attempt */
.course-form.is-validated input:invalid,
.course-form.is-validated textarea:invalid {
    border-color: #f87171;
}
.course-form__submit { justify-self: start; }
.course-form--inline .course-form__submit { justify-self: stretch; text-align: center; justify-content: center; }
.course-form__err {
    margin: 0;
    font-size: 0.8rem;
    color: #f87171;
}
.course-form__submit.is-loading { opacity: 0.7; pointer-events: none; }

/* success panel that replaces the form */
.course-form__done {
    display: grid;
    gap: 0.4rem;
    padding: 1.2rem 1.3rem;
    background: rgba(var(--course-rgb), 0.08);
    border: 1px solid rgba(var(--course-rgb), 0.4);
    border-radius: var(--gs-radius);
}
.course-form__done strong {
    font-family: 'Outfit', sans-serif;
    font-size: 1.05rem;
    color: var(--gs-text);
}
.course-form__done span { color: var(--gs-text-dim); line-height: 1.55; }
.course-form__done .gs-btn { justify-self: start; margin-top: 0.6rem; }

/* ---- Booking / join page ---- */
.course-join { background: var(--gs-bg); }
.course-join__wrap {
    background: var(--gs-surface);
    border: 1px solid var(--gs-border);
    border-top: 3px solid var(--gs-accent);
    border-radius: var(--gs-radius);
    padding: clamp(1.5rem, 4vw, 2.6rem);
}
.course-form__row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.85rem;
}
.course-join__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0;
    align-self: start;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    color: var(--gs-text);
    background: rgba(var(--course-rgb), 0.1);
    border: 1px solid rgba(var(--course-rgb), 0.4);
    border-radius: var(--gs-radius-pill);
    padding: 0.4rem 0.95rem;
}
.course-join__chip span {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gs-accent);
}
.course-join__form { margin-top: 0.4rem; }
@media (max-width: 560px) {
    .course-form__row { grid-template-columns: 1fr; }
}

/* ============================================================
   Closing CTA
   ============================================================ */
.course-cta { text-align: center; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 900px) {
    .course-overview__grid,
    .course-instr__grid,
    .course-attend__grid { grid-template-columns: 1fr; }
    .course-instr__photo-wrap { max-width: 360px; }
    /* stack the bento back into one column */
    .course-attend__grid { grid-template-rows: none; }
    .course-attend__card--book,
    .course-attend__card--speaker,
    .course-attend__grid .course-gauge { grid-column: auto; grid-row: auto; }
}

@media (prefers-reduced-motion: reduce) {
    .course-take,
    .course-gauge__bar i { transition: none; }
    .course-take:hover { transform: none; }
}