/* File: /assets/css/articles.css
   Module: Articles (CH_Articles) - the pieces an article file can use, the
   Premium early-access gate, and the early-access list on the dashboard.

   Colour grammar, same as /premium/: Emerald is the action (every button that
   does something), royal blue is Premium's own mark (the early banner, the
   lock eyebrow, the note rule), and every surface reads the --ch-* tokens so
   light and dark mode follow the site switch (html[data-theme]).

   GeneratePress darkens button:hover at 0,1,1. Nothing here is a <button>;
   every action is a link, so the trap does not apply.

   Loaded on single posts and on /dashboard/ only (CH_Articles::enqueue).

   Contents: 1 tokens, 2 early banner, 3 CTA card, 4 field note,
   5 missing screenshot, 6 gallery, 7 locked page, 8 dashboard list,
   9 dark, 10 responsive, 11 reduced motion */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */

:root {
    --a-pro:       #1D4ED8;
    --a-pro-ink:   #1E40AF;
    --a-pro-wash:  rgba(37, 99, 235, 0.07);
    --a-pro-line:  rgba(37, 99, 235, 0.28);
    --a-cta:       #10B981;
    --a-cta-hi:    #059669;
    --a-cta-wash:  rgba(16, 185, 129, 0.09);
    --a-cta-line:  rgba(16, 185, 129, 0.38);
    --a-mono:      'JetBrains Mono', 'Roboto Mono', ui-monospace, monospace;
    --a-shadow:    0 1px 2px rgba(15, 23, 42, 0.04), 0 14px 32px -20px rgba(15, 23, 42, 0.28);
    --a-ease:      cubic-bezier(0.22, 1, 0.36, 1);
}

/* ==========================================================================
   2. EARLY BANNER (premium member reading an early article)
   ========================================================================== */

.ch-early-banner {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    margin: -1rem 0 2rem;
    padding: 0.85rem 1.1rem;
    border: 1px solid var(--a-pro-line);
    border-left: 3px solid var(--a-pro);
    border-radius: 10px;
    background: var(--a-pro-wash);
    color: var(--ch-text-main);
    font-size: 0.95rem;
    line-height: 1.55;
}

.ch-early-banner-ico {
    display: inline-flex;
    flex-shrink: 0;
    margin-top: 0.15rem;
    color: var(--a-pro);
}

.ch-early-banner strong {
    color: var(--a-pro-ink);
}

/* ==========================================================================
   3. CTA CARD  [ch_cta tool="..."]
   ========================================================================== */

.entry-content .ch-cta-card {
    position: relative;
    max-width: 75ch;
    margin: 2.75rem auto;
    padding: 1.5rem 1.6rem 1.6rem;
    border: 1px solid var(--ch-border);
    border-radius: 14px;
    background: var(--ch-bg-card);
    background-image: radial-gradient(ellipse 90% 120% at 100% 0%, var(--a-cta-wash), transparent 60%);
    box-shadow: var(--a-shadow);
    overflow: hidden;
}

.entry-content .ch-cta-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, var(--a-cta) 0%, #34D399 60%, transparent 100%);
}

.ch-cta-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--a-mono);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--a-cta-hi);
}

.entry-content .ch-cta-card .ch-cta-title {
    margin: 0.55rem 0 0.4rem;
    max-width: none;
    font-size: 1.28rem;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -0.015em;
    color: var(--ch-text-main);
}

.entry-content .ch-cta-card .ch-cta-line {
    margin: 0 0 1.15rem;
    max-width: none;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--ch-text-muted);
}

.entry-content .ch-cta-card .ch-cta-line strong {
    color: var(--ch-text-main);
}

.entry-content .ch-cta-card .ch-cta-btn {
    --btn-color: var(--a-cta);
    gap: 0.45rem;
    margin: 0;
    padding: 0.72rem 1.3rem;
}

/* A card without a button (a member who already has the feature) ends on the line. */
.entry-content .ch-cta-card .ch-cta-line:last-child {
    margin-bottom: 0;
}

/* ==========================================================================
   4. FIELD NOTE  [ch_note label="..."]
   The first-hand box: what Adrian measured, broke or fixed. It is an <aside>
   (a note is not a quotation) that wears the blockquote's heat-reactive
   signal card and EKG trace: the card and text are in style.css, the trace in
   heat-engine.css, both under `.entry-content .ch-note`. Only the label is
   its own, and it follows the same heat color.
   ========================================================================== */

.ch-note-label {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.6rem;
    font-family: var(--a-mono);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #047857;
    color: color-mix(in srgb, var(--ch-ekg-color) 70%, var(--ch-text-main));
    transition: color 0.5s ease;
}

.entry-content .ch-note-body > :last-child {
    margin-bottom: 0;
}

/* ==========================================================================
   5. MISSING SCREENSHOT (editors only; readers get nothing)
   ========================================================================== */

.entry-content .ch-figure-missing {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    max-width: 75ch;
    margin: 2.5rem auto;
    padding: 1.4rem 1.5rem;
    border: 2px dashed #F59E0B;
    border-radius: 12px;
    background: rgba(245, 158, 11, 0.07);
}

.ch-figure-missing-kicker {
    font-family: var(--a-mono);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #B45309;
    word-break: break-all;
}

.ch-figure-missing-shot {
    font-size: 0.98rem;
    line-height: 1.55;
    color: var(--ch-text-main);
}

/* ==========================================================================
   6. GALLERY  [ch_gallery]
   The tiles use the site's existing .wp-block-gallery rules (style.css 4).
   ========================================================================== */

.entry-content .ch-gallery {
    max-width: 1200px;
}

/* ==========================================================================
   7. LOCKED PAGE (article-locked.php)
   ========================================================================== */

.ch-lock-page .site-main {
    padding-top: 2.5rem;
    padding-bottom: 4rem;
}

/* style.css splits every single post 70/30 for the article sidebar. The gate
   has no sidebar (CH_Articles::sidebar_layout), so it takes the full width. */
@media (min-width: 769px) {
    .single-post.ch-article-locked .site-content .content-area {
        width: 100%;
        flex: 0 0 100%;
    }
}

.ch-lock {
    max-width: 780px;
    margin: 0 auto;
}

.ch-lock-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.38rem 0.8rem;
    border: 1px solid var(--a-pro-line);
    border-radius: 999px;
    background: var(--a-pro-wash);
    font-family: var(--a-mono);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--a-pro);
}

.ch-lock-title {
    margin: 1.1rem 0 0.9rem;
    font-size: clamp(1.8rem, 3.5vw + 0.5rem, 2.6rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.03em;
    color: var(--ch-text-main);
}

.ch-lock-lead {
    margin: 0 0 1.25rem;
    font-size: 1.15rem;
    line-height: 1.6;
    color: var(--ch-text-muted);
}

.ch-lock-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.2rem;
    padding-bottom: 1.4rem;
    border-bottom: 1px solid var(--ch-border);
    font-family: var(--a-mono);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    color: var(--ch-text-muted);
}

.ch-lock-meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.ch-lock-meta svg {
    color: var(--a-cta);
}

.ch-lock-meta-date {
    color: var(--a-pro);
}

.ch-lock-meta-date svg {
    color: var(--a-pro);
}

.ch-lock-card {
    position: relative;
    margin: 2rem 0;
    padding: 1.75rem 1.8rem;
    border: 1px solid var(--ch-border);
    border-radius: 16px;
    background: var(--ch-bg-card);
    background-image: radial-gradient(ellipse 80% 120% at 0% 0%, var(--a-pro-wash), transparent 62%);
    box-shadow: var(--a-shadow);
    overflow: hidden;
}

.ch-lock-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, #2563EB 0%, #1E40AF 55%, transparent 100%);
}

.ch-lock-card-title {
    margin: 0 0 0.45rem;
    font-size: 1.3rem;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -0.015em;
    color: var(--ch-text-main);
}

.ch-lock-card-line {
    margin: 0 0 1.1rem;
    font-size: 1.02rem;
    line-height: 1.6;
    color: var(--ch-text-muted);
}

.ch-lock-card-line strong {
    color: var(--ch-text-main);
}

.ch-lock-card-hint {
    margin: 0 0 0.8rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ch-text-main);
}

.ch-lock-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.ch-lock-btn,
.ch-lock-provider {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-height: 46px;
    padding: 0.7rem 1.25rem;
    border-radius: 10px;
    font-size: 0.97rem;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none !important;
    transition: transform 0.2s var(--a-ease), box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.ch-lock-btn {
    background: var(--a-cta);
    border: 1px solid var(--a-cta-hi);
    color: #FFFFFF !important;
    box-shadow: 0 8px 18px -10px rgba(16, 185, 129, 0.7);
}

.ch-lock-btn:hover,
.ch-lock-btn:focus-visible {
    background: var(--a-cta-hi);
    transform: translateY(-1px);
    box-shadow: 0 12px 22px -10px rgba(16, 185, 129, 0.75);
}

.ch-lock-provider {
    background: var(--ch-bg-card);
    border: 1px solid var(--ch-border);
    color: var(--ch-text-main) !important;
}

.ch-lock-provider:hover,
.ch-lock-provider:focus-visible {
    border-color: var(--a-cta-line);
    background: var(--a-cta-wash);
    transform: translateY(-1px);
}

.ch-lock-btn:focus-visible,
.ch-lock-provider:focus-visible {
    outline: 2px solid var(--a-cta);
    outline-offset: 2px;
}

.ch-lock-alt {
    margin: 1rem 0 0;
    font-size: 0.93rem;
    color: var(--ch-text-muted);
}

.ch-lock-alt a {
    color: var(--ch-accent);
    font-weight: 700;
}

.ch-lock-includes {
    margin: 2rem 0;
}

.ch-lock-includes-label {
    margin: 0 0 0.85rem;
    font-family: var(--a-mono);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--ch-text-muted);
}

.ch-lock-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem 1.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ch-lock-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    margin: 0;
    font-size: 0.98rem;
    line-height: 1.45;
    color: var(--ch-text-main);
}

.ch-lock-list svg {
    flex-shrink: 0;
    margin-top: 0.15rem;
    color: var(--a-cta);
}

.ch-lock-back {
    margin: 2.25rem 0 0;
}

.ch-lock-back a {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-weight: 700;
    color: var(--ch-accent);
    text-decoration: none;
}

.ch-lock-back a:hover {
    text-decoration: underline;
}

/* ==========================================================================
   8. DASHBOARD: EARLY ACCESS LIST (tab-learning.php)
   ========================================================================== */

/* Full row of the three-column dashboard grid, like .ch-card-learning below it. */
.ch-dash-card.ch-early-list-card {
    grid-column: 1 / -1;
}

.ch-early-list-card .ch-early-list-lead {
    margin: 0.35rem 0 1rem;
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--ch-text-muted);
}

.ch-early-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ch-early-item {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.8rem 0;
    border-top: 1px solid var(--ch-border);
}

.ch-early-item:first-child {
    border-top: none;
}

.ch-early-item-ico {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--a-pro-wash);
    color: var(--a-pro);
}

.ch-early-item-body {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.ch-early-item-title {
    font-weight: 700;
    line-height: 1.35;
    color: var(--ch-text-main);
    text-decoration: none;
}

a.ch-early-item-title:hover {
    color: var(--ch-accent);
}

.ch-early-item-meta {
    font-family: var(--a-mono);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--ch-text-muted);
}

.ch-early-list-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-top: 1rem;
    padding: 0.62rem 1.1rem;
    border-radius: 9px;
    background: var(--a-cta);
    color: #FFFFFF !important;
    font-size: 0.92rem;
    font-weight: 700;
    text-decoration: none !important;
    transition: background-color 0.2s ease, transform 0.2s var(--a-ease);
}

.ch-early-list-cta:hover,
.ch-early-list-cta:focus-visible {
    background: var(--a-cta-hi);
    transform: translateY(-1px);
}

/* ==========================================================================
   9. DARK
   ========================================================================== */

html[data-theme="dark"] {
    --a-pro:      #60A5FA;
    --a-pro-ink:  #93C5FD;
    --a-pro-wash: rgba(96, 165, 250, 0.10);
    --a-pro-line: rgba(96, 165, 250, 0.32);
    --a-cta-hi:   #34D399;
    --a-cta-wash: rgba(16, 185, 129, 0.12);
    --a-shadow:   0 1px 2px rgba(0, 0, 0, 0.3), 0 18px 36px -20px rgba(0, 0, 0, 0.6);
}

/* Emerald text on the dark card needs the lighter step; the filled buttons keep #10B981. */
html[data-theme="dark"] .ch-cta-eyebrow {
    color: #34D399;
}

html[data-theme="dark"] .ch-lock-btn:hover,
html[data-theme="dark"] .ch-lock-btn:focus-visible,
html[data-theme="dark"] .ch-early-list-cta:hover,
html[data-theme="dark"] .ch-early-list-cta:focus-visible {
    background: #059669;
}

html[data-theme="dark"] .ch-lock-btn {
    border-color: #059669;
}

html[data-theme="dark"] .entry-content .ch-figure-missing {
    background: rgba(245, 158, 11, 0.1);
}

html[data-theme="dark"] .ch-figure-missing-kicker {
    color: #FBBF24;
}

/* ==========================================================================
   10. RESPONSIVE
   ========================================================================== */

@media (max-width: 680px) {
    .ch-lock-page .site-main {
        padding-top: 1.5rem;
    }

    .ch-lock-card {
        padding: 1.35rem 1.2rem;
    }

    .ch-lock-list {
        grid-template-columns: 1fr;
    }

    .ch-lock-actions {
        flex-direction: column;
    }

    .ch-lock-btn,
    .ch-lock-provider {
        width: 100%;
    }

    .entry-content .ch-cta-card {
        padding: 1.3rem 1.15rem 1.35rem;
    }

    .entry-content .ch-cta-card .ch-cta-btn {
        width: 100%;
        white-space: normal;
    }

    .ch-early-banner {
        margin-top: -0.5rem;
    }
}

/* ==========================================================================
   11. REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .ch-lock-btn,
    .ch-lock-provider,
    .ch-early-list-cta {
        transition: none;
    }

    .ch-lock-btn:hover,
    .ch-lock-provider:hover,
    .ch-early-list-cta:hover {
        transform: none;
    }
}