/* Track Pack CTA — shared across the three /university/<track>/ pages.
   Renders a buy block when the visitor doesn't own the track, and an
   entitled state when they do. Driven by /scripts/track-cta.js. */

.track-cta {
    max-width: 900px;
    margin: 1.5rem auto 0;
    padding: 0 1rem;
}

.track-cta-card {
    position: relative;
    background: linear-gradient(135deg, rgba(10, 11, 16, 0.92), rgba(20, 22, 32, 0.85));
    border: 1px solid var(--track-cta-accent, rgba(0, 244, 255, 0.4));
    border-left: 3px solid var(--track-cta-accent, #00f4ff);
    border-radius: 8px;
    padding: 1.5rem 1.5rem 1.4rem;
    box-shadow: 0 0 24px rgba(0, 244, 255, 0.06);
    color: var(--text-color, #e0e0e0);
    font-family: 'Rajdhani', sans-serif;
}

.track-cta-card[hidden] { display: none; }

.track-cta-eyebrow {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--track-cta-accent, #00f4ff);
    margin-bottom: 0.55rem;
}

.track-cta-priceline {
    display: flex;
    align-items: baseline;
    gap: 0.65rem;
    flex-wrap: wrap;
    margin-bottom: 0.35rem;
}

.track-cta-price {
    font-family: 'Share Tech Mono', monospace;
    font-size: 2.1rem;
    color: #fff;
    letter-spacing: 0.04em;
}

.track-cta-was {
    font-family: 'Share Tech Mono', monospace;
    font-size: 1rem;
    color: #6a6a80;
    text-decoration: line-through;
    letter-spacing: 0.04em;
}

.track-cta-launch-tag {
    display: inline-block;
    margin-left: 0.25rem;
    padding: 0.18rem 0.55rem;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.65rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #ffe600;
    background: rgba(255, 230, 0, 0.1);
    border: 1px solid rgba(255, 230, 0, 0.4);
    border-radius: 3px;
}

.track-cta-sub {
    font-size: 0.85rem;
    color: #8a8aa0;
    margin-bottom: 1.05rem;
}

.track-cta-perks {
    list-style: none;
    margin: 0 0 1.2rem;
    padding: 0;
    display: grid;
    gap: 0.45rem;
}

.track-cta-perks li {
    position: relative;
    padding-left: 1.1rem;
    font-size: 0.92rem;
    line-height: 1.5;
    color: #d4d6e0;
}

.track-cta-perks li::before {
    content: '▸';
    position: absolute;
    left: 0;
    top: 0;
    color: var(--track-cta-accent, #00f4ff);
    opacity: 0.7;
    font-size: 0.85rem;
    line-height: 1.7;
}

.track-cta-perks li strong { color: #fff; font-weight: 600; }

.track-cta-actions {
    display: flex;
    gap: 0.65rem;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 0.85rem;
}

.track-cta-buy {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.4rem;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.88rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #050517;
    background: var(--track-cta-accent, #00f4ff);
    border: 1px solid var(--track-cta-accent, #00f4ff);
    border-radius: 4px;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.track-cta-buy:hover {
    transform: translateY(-1px);
    filter: brightness(1.1);
    box-shadow: 0 6px 18px rgba(0, 244, 255, 0.25);
}

.track-cta-login {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.7rem 1rem;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #d4d6e0;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 4px;
    cursor: pointer;
    text-decoration: none;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.track-cta-login:hover { border-color: var(--track-cta-accent, #00f4ff); color: #fff; }

.track-cta-fine {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    color: #6a6a80;
    margin: 0;
}

.track-cta-fine a { color: #8a8aa0; text-decoration: none; border-bottom: 1px dotted rgba(255, 255, 255, 0.2); }
.track-cta-fine a:hover { color: #fff; border-bottom-color: var(--track-cta-accent, #00f4ff); }

/* Entitled state — replaces the whole card content when the visitor already
   owns this track or is otherwise an active Founder. */
.track-cta-entitled {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.track-cta-entitled .track-cta-eyebrow { margin-bottom: 0; color: #00ff88; }

.track-cta-entitled-msg {
    font-size: 0.95rem;
    color: #d4d6e0;
    margin: 0;
}

.track-cta-entitled-msg strong { color: #00ff88; }

@media (max-width: 600px) {
    .track-cta-card { padding: 1.2rem 1.1rem; }
    .track-cta-price { font-size: 1.7rem; }
    .track-cta-actions { flex-direction: column; align-items: stretch; }
    .track-cta-buy, .track-cta-login { justify-content: center; }
}

/* ── Watch + Read entry pair (top of each track hub) ─────────────────────── */
.track-entry-row {
    display: inline-flex;
    gap: 0.6rem;
    margin-top: 1.25rem;
    flex-wrap: wrap;
    justify-content: center;
}
.track-entry-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.7rem 1.3rem;
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-decoration: none;
    border-radius: 2px;
    transition: transform 0.15s, box-shadow 0.15s, background-color 0.15s;
}
.track-entry-watch {
    background: var(--track-accent, #00f4ff);
    color: #03050a;
    box-shadow: 0 8px 28px -10px color-mix(in srgb, var(--track-accent, #00f4ff) 80%, transparent);
}
.track-entry-watch:hover { transform: translateY(-1px); }
.track-entry-read {
    background: transparent;
    color: var(--track-accent, #00f4ff);
    border: 1px solid color-mix(in srgb, var(--track-accent, #00f4ff) 55%, transparent);
}
.track-entry-read:hover {
    background: color-mix(in srgb, var(--track-accent, #00f4ff) 10%, transparent);
    transform: translateY(-1px);
}
.track-entry-foot {
    margin-top: 0.55rem;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.45);
}

/* ── Collapsed perks (details / summary) ─────────────────────────────────── */
.track-cta-perks-wrap {
    margin: 1rem 0 0.4rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 0.25rem;
}
.track-cta-perks-wrap summary {
    cursor: pointer;
    list-style: none;
    padding: 0.55rem 0;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--track-cta-accent, #00f4ff);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    user-select: none;
}
.track-cta-perks-wrap summary::-webkit-details-marker { display: none; }
.track-cta-perks-wrap summary::after {
    content: '▾';
    color: rgba(255, 255, 255, 0.5);
    transition: transform 0.2s ease;
}
.track-cta-perks-wrap[open] summary::after { transform: rotate(180deg); }
.track-cta-perks-wrap .track-cta-perks {
    margin: 0.35rem 0 0.5rem;
}

/* ── Sticky bottom Buy banner (mobile-only) ──────────────────────────────── */
.track-cta-sticky {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 9997; /* below the coffee toast (9999) but above page content */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
    padding: 0.6rem 1rem;
    padding-bottom: calc(0.6rem + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(135deg, rgba(7, 8, 13, 0.97), rgba(20, 22, 32, 0.97));
    border-top: 2px solid var(--track-cta-accent, #00f4ff);
    box-shadow: 0 -10px 24px rgba(0, 0, 0, 0.45);
    font-family: 'Rajdhani', sans-serif;
    color: #fff;
    transform: translateY(110%);
    transition: transform 0.25s ease;
    pointer-events: none;
}
.track-cta-sticky.is-visible {
    transform: translateY(0);
    pointer-events: auto;
}
.track-cta-sticky-info {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.4rem 0.55rem;
    min-width: 0;
    flex: 1 1 auto;
}
.track-cta-sticky-name {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.65);
    font-family: 'Share Tech Mono', monospace;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    width: 100%;
    line-height: 1;
}
.track-cta-sticky-price {
    font-size: 1.35rem;
    font-weight: 700;
    color: #fff;
    line-height: 1;
}
.track-cta-sticky-min {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.45);
    font-family: 'Share Tech Mono', monospace;
}
.track-cta-sticky-buy {
    flex: 0 0 auto;
    background: linear-gradient(135deg, var(--track-cta-accent, #00f4ff), #ff00a0);
    color: #fff;
    text-decoration: none;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.7rem 1.4rem;
    border-radius: 4px;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(255, 0, 160, 0.3);
}

@media (min-width: 769px) {
    /* Hide sticky banner on desktop — inline CTA is always visible enough. */
    .track-cta-sticky { display: none !important; }
}

/* When the sticky banner is up on mobile, lift the coffee FAB so it doesn't
   sit on top of the banner. The banner is ~64px tall + safe-area-inset. */
body.has-sticky-cta #pb-coffee-fab {
    bottom: calc(5.25rem + env(safe-area-inset-bottom, 0px)) !important;
}

/* ── Paper (light) theme ─────────────────────────────────────────────────────
   Default card is neon-on-dark. Under [data-theme="paper"] give it a light
   surface + ink text so the buy block follows the editorial light theme on the
   track hubs. The per-track --track-cta-accent (set inline by track-cta.js) is
   kept on borders + the buy button for brand identity — a bright accent button
   with dark text stays legible on paper. */
[data-theme="paper"] .track-cta-card { background: #ffffff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); color: #20242e; }
[data-theme="paper"] .track-cta-price { color: #1c1813; }
[data-theme="paper"] .track-cta-was { color: #8a8276; }
[data-theme="paper"] .track-cta-sub { color: #6b6358; }
[data-theme="paper"] .track-cta-perks li { color: #44403a; }
[data-theme="paper"] .track-cta-perks li strong { color: #1c1813; }
[data-theme="paper"] .track-cta-login { color: #44403a; border-color: rgba(0, 0, 0, 0.2); }
[data-theme="paper"] .track-cta-login:hover { color: #1c1813; }
[data-theme="paper"] .track-cta-fine { color: #6b6358; }
[data-theme="paper"] .track-cta-fine a { color: #6b6358; border-bottom-color: rgba(0, 0, 0, 0.25); }
[data-theme="paper"] .track-cta-fine a:hover { color: #1c1813; }
[data-theme="paper"] .track-cta-entitled-msg { color: #44403a; }
[data-theme="paper"] .track-cta-perks-wrap { border-top-color: rgba(0, 0, 0, 0.1); }
[data-theme="paper"] .track-cta-perks-wrap summary::after { color: rgba(0, 0, 0, 0.4); }
[data-theme="paper"] .track-entry-foot { color: #6b6358; }
[data-theme="paper"] .track-cta-sticky { background: #ffffff; color: #20242e; box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.12); }
[data-theme="paper"] .track-cta-sticky-name,
[data-theme="paper"] .track-cta-sticky-min { color: #6b6358; }
[data-theme="paper"] .track-cta-sticky-price { color: #1c1813; }