/* ====== /ai/<slug> — Minus Hype article ======
   One template (ai/article.php) for every post. Port-grade layout on the
   site's system, 2026-09-17; loads after home.css for the .hero pattern.
   Gloss: the hero image and the older/newer cards are raised surfaces
   (edge + sheen); the body's opening rule is lit; type stays matte. */

/* ── Hero ──────────────────────────────────────────────────────────── */
.article-hero {
    isolation: isolate;
    overflow: hidden;
    min-height: 0;
    padding-block: var(--space-10) var(--space-15);
    background: var(--c-primary-dark);   /* shorthand: .hero in home.css carries Home's poster image */
}
/* Backdrop: the post's own image, blurred past recognition, under a purple
   tint — every article gets its own colour cast without any per-post CSS. */
.article-hero::before {
    content: ''; position: absolute; inset: -12%; z-index: -2;
    background: var(--article-hero-bg, none) center / cover no-repeat;
    filter: blur(48px) saturate(1.2);
    opacity: .35;
}
.article-hero::after {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(180deg, rgba(21, 0, 27, .35) 0%, rgba(21, 0, 27, .7) 60%, rgba(21, 0, 27, 1) 100%);
}
.article-hero__inner { gap: var(--space-8); }
.article-hero__copy  { display: flex; flex-direction: column; gap: var(--space-5); }
.article-hero__back {
    font-family: var(--font-secondary);
    font-size: var(--t-p3);
    letter-spacing: var(--ls-cta);
    text-transform: uppercase;
    color: var(--c-accent-cyan);
}
.article-hero h1 { font-size: var(--t-h2); line-height: var(--lh-heading); letter-spacing: 0; max-width: 20ch; }
@media (min-width: 1024px) { .article-hero h1 { font-size: var(--t-h1); line-height: var(--lh-tight); letter-spacing: var(--ls-display); } }

.article-meta { display: flex; align-items: center; gap: var(--space-3); }
.article-meta__avatars { display: flex; }
.article-meta__avatars img {
    width: 44px; height: 44px; border-radius: 50%;
    border: 2px solid var(--c-primary-dark);
    box-shadow: var(--gloss-edge);
}
.article-meta__avatars img + img { margin-left: -12px; }
.article-meta__name { font-size: var(--t-p2); font-weight: var(--fw-medium); }
.article-meta__line { font-family: var(--font-secondary); font-size: var(--t-p3); color: var(--c-accent-pink); }
.article-meta__line span { margin-inline: 4px; color: var(--c-text-muted); }

.article-hero__media {
    position: relative;
    width: 100%; max-width: 660px;
    border: 1px solid rgba(171, 235, 240, .16);
    border-radius: var(--radius-card);
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .45);
}
.article-hero__media img { width: 100%; height: auto; }   /* whole image, own ratio — some are square */
.article-hero__media::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--gloss-sheen); box-shadow: var(--gloss-edge), inset 0 0 80px rgba(21, 0, 27, .28); pointer-events: none; }   /* inset vignette: white artwork stops glaring */

/* ── Reading progress ─────────────────────────────────────────────
   Pinned under the sticky nav; scaleX from 0 to 1 as the body is read. */
.article-progress {
    position: fixed; top: var(--nav-height); left: 0; right: 0; z-index: calc(var(--z-nav) - 1);
    height: 2px; pointer-events: none;
}
.article-progress span {
    display: block; height: 100%; transform-origin: left; transform: scaleX(0);
    background: linear-gradient(90deg, var(--c-accent-teal), var(--c-accent-cyan));
    box-shadow: var(--gloss-glow);
}

/* ── Body: text + sticky aside ────────────────────────────────────── */
.article-body { background: linear-gradient(180deg, var(--primary-900) 0%, var(--primary-800) 100%); }
.article-layout { display: grid; gap: var(--space-15); }

.article-body__text {
    position: relative;
    max-width: 62ch;
    padding-top: var(--space-8);
    font-size: var(--t-p1);
    line-height: var(--lh-body);
    color: var(--c-text-muted);
}
.article-body__text::before {                 /* the opening rule, lit */
    content: ''; position: absolute; top: 0; left: 0;
    width: 96px; height: 2px; border-radius: 2px;
    background: linear-gradient(90deg, var(--c-accent-cyan), rgba(171, 235, 240, 0));
    box-shadow: var(--gloss-glow);
}
.article-body__text > * + * { margin-top: var(--space-6); }
.article-body__text > p:first-child { font-size: var(--t-h5); line-height: var(--lh-heading); color: var(--c-text); }   /* the lead */
.article-body__text h2 {
    position: relative;
    margin-top: var(--space-10); padding-left: var(--space-5);
    font-size: var(--t-h4); line-height: var(--lh-heading); font-weight: var(--fw-medium); color: var(--c-text);
}
.article-body__text h2::before {              /* section turn: a short lit rule */
    content: ''; position: absolute; left: 0; top: .15em; bottom: .15em; width: 3px; border-radius: 2px;
    background: linear-gradient(180deg, var(--c-accent-cyan) 0%, rgba(171, 235, 240, .15) 100%);
    box-shadow: 0 0 12px rgba(171, 235, 240, .45);
}
.article-body__text strong { font-weight: var(--fw-medium); color: var(--c-text); }
.article-body__text ul { padding-left: 1.25em; list-style: disc; }
.article-body__text li { padding-left: .25em; }
.article-body__text li + li { margin-top: var(--space-3); }
.article-body__text li::marker { color: var(--c-accent-cyan); }
.article-body__text li > p { margin-top: var(--space-2); }

/* Aside */
.article-aside__sticky { display: flex; flex-direction: column; gap: var(--space-6); }
.article-share-panel { padding: var(--space-5) var(--space-6); }
.article-share { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); }
.article-share__label { margin-right: auto; font-family: var(--font-secondary); font-size: var(--t-p3); letter-spacing: var(--ls-cta); text-transform: uppercase; color: var(--c-accent-cyan); }
.article-share__btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 50%;
    color: var(--c-text);
    border: 1px solid rgba(171, 235, 240, .2);
    background: var(--gloss-sheen), rgba(171, 235, 240, .06);
    box-shadow: var(--gloss-edge);
    transition: color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.article-share__btn:hover { color: var(--c-primary-dark); background: var(--c-accent-cyan); box-shadow: var(--gloss-edge), var(--gloss-glow); }
.article-share__toast {
    position: absolute; right: 0; top: calc(100% + 4px);
    font-family: var(--font-secondary); font-size: var(--t-p3); color: var(--c-accent-cyan);
    opacity: 0; transform: translateY(-4px); transition: opacity .2s ease, transform .2s ease;
}
.article-share__toast.is-on { opacity: 1; transform: none; }

.article-more { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.article-more__label { font-family: var(--font-secondary); font-size: var(--t-p3); letter-spacing: var(--ls-cta); text-transform: uppercase; color: var(--c-accent-cyan); }
.article-more__list { display: flex; flex-direction: column; gap: var(--space-3); width: 100%; }
.article-more__item {
    display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: var(--space-4); align-items: center;
    padding: var(--space-3);
    border: 1px solid rgba(171, 235, 240, .16);
    border-radius: 12px;
    background: var(--gloss-sheen), var(--c-bg-raised);
    box-shadow: var(--gloss-edge), 0 12px 30px rgba(0, 0, 0, .3);
    transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.article-more__item:hover { color: inherit; border-color: rgba(171, 235, 240, .4); box-shadow: var(--gloss-edge), var(--gloss-glow), 0 12px 30px rgba(0, 0, 0, .3); transform: translateY(-2px); }
.article-more__item img { width: 72px; height: 72px; border-radius: 8px; object-fit: cover; }
.article-more__item > span { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.article-more__date { font-family: var(--font-secondary); font-size: var(--t-p3); color: var(--c-accent-pink); }
.article-more__title { font-size: var(--t-p2); font-weight: var(--fw-medium); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ── Older / newer ────────────────────────────────────────────────── */
.article-nav { background: linear-gradient(180deg, var(--primary-800) 0%, var(--primary-900) 100%); padding-top: 0; }
.article-nav__inner { display: grid; gap: var(--space-4); }
.article-nav__card {
    display: flex; flex-direction: column; gap: var(--space-2);
    padding: var(--space-5) var(--space-6);
    border: 1px solid rgba(171, 235, 240, .16);
    border-radius: var(--radius-card);
    background: var(--gloss-sheen), var(--c-bg-raised);
    box-shadow: var(--gloss-edge), 0 16px 40px rgba(0, 0, 0, .35);
    transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.article-nav__card:hover { color: inherit; border-color: rgba(171, 235, 240, .4); box-shadow: var(--gloss-edge), var(--gloss-glow), 0 16px 40px rgba(0, 0, 0, .35); transform: translateY(-2px); }
.article-nav__card--next { text-align: right; }
.article-nav__label { font-family: var(--font-secondary); font-size: var(--t-p3); letter-spacing: var(--ls-cta); text-transform: uppercase; color: var(--c-accent-cyan); }
.article-nav__title { font-size: var(--t-p1); font-weight: var(--fw-medium); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ── 404 ──────────────────────────────────────────────────────────── */
.article-404 { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-5); min-height: 50vh; }

/* ── Tablet ───────────────────────────────────────────────────────── */
@media (min-width: 768px) {
    .article-nav__inner { grid-template-columns: 1fr 1fr; }
}

/* ── Desktop ──────────────────────────────────────────────────────── */
@media (min-width: 1024px) {
    .article-hero { min-height: 480px; padding-block: var(--space-15); }
    .article-hero__inner { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--space-10); }
    .article-hero__copy  { flex: 1 1 0; }
    .article-hero__media { flex: 0 0 46%; }
    /* no align-items:start — the aside must stretch to the row so its sticky child has the full article height to travel */
    .article-layout { grid-template-columns: minmax(0, 1fr) 320px; gap: var(--space-16); }
    .article-aside__sticky { position: sticky; top: calc(var(--nav-height) + var(--space-6)); }
}