/* ============================================================
   Impulse88 — Blog
   Spec: design_handoff_impulse88_stadium/BLOG.md
   Design reference: design/Impulse88 Blog.dc.html

   Loaded per page via @section Styles in Views/Blog/List.cshtml and
   Views/Blog/Content.cshtml, NOT from _Layout. Nothing outside /Blog needs
   these rules and _Layout's stylesheet list is already render-blocking on
   every request.

   Colours come from the --imp-* tokens in impulse88-theme.css. One literal
   survives: #c9d6e0 on the lead paragraph, which is a step brighter than
   --imp-text-2 and has no token of its own.
   ============================================================ */

/* ============================================================
   1. Header — shared by List (full) and Content (breadcrumb only)
   ============================================================ */

.imp-blog-head {
    background: linear-gradient(100deg, var(--imp-surface-3), var(--imp-bg-2));
    border-left: 4px solid var(--imp-lime);
    border-bottom: 1px solid var(--imp-line);
    padding: 34px 34px 26px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 28px;
    flex-wrap: wrap;
}

.imp-blog-kicker { font: 700 12px/1 var(--imp-cond); letter-spacing: .24em; text-transform: uppercase; color: var(--imp-lime); }
.imp-blog-h1 { font: 800 40px/1.05 var(--imp-sans); letter-spacing: -.035em; color: var(--imp-text); margin-top: 14px; text-wrap: pretty; }
.imp-blog-standfirst { font: 400 14px/1.7 var(--imp-sans); color: var(--imp-text-2); margin-top: 12px; max-width: 520px; }

/* ---- language switch: EN · BM · 中文 ---- */
.imp-blog-langs { flex: none; display: flex; border: 1px solid var(--imp-line); }

.imp-blog-lang {
    padding: 10px 16px;
    background: var(--imp-bg);
    font: 700 12px/1 var(--imp-cond);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--imp-text-3);
    text-decoration: none;
    border-right: 1px solid var(--imp-line);
    transition: color .12s ease, background .12s ease;
}

.imp-blog-lang:last-child { border-right: 0; }
.imp-blog-lang:hover { color: var(--imp-lime); text-decoration: none; }
.imp-blog-lang.on { background: var(--imp-lime); color: var(--imp-bg); }
.imp-blog-lang.on:hover { color: var(--imp-bg); }

/* ============================================================
   2. List — featured post
   ============================================================ */

.imp-blog-body { padding: 26px 34px 40px; }

.imp-blog-featured {
    display: flex;
    gap: 26px;
    background: var(--imp-surface);
    border: 1px solid var(--imp-line);
    transition: border-color .12s ease;
    text-decoration: none;
}

.imp-blog-featured:hover { border-color: var(--imp-lime); text-decoration: none; }

.imp-blog-featured-art { flex: none; width: 520px; aspect-ratio: 16 / 10; overflow: hidden; background: var(--imp-surface-3); }
.imp-blog-featured-art img { width: 100%; height: 100%; object-fit: cover; display: block; }

.imp-blog-featured-body { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 26px 28px 26px 0; }

.imp-blog-chiprow { display: flex; align-items: center; gap: 12px; }

.imp-blog-chip {
    flex: none;
    padding: 5px 9px;
    background: var(--imp-lime);
    color: var(--imp-bg);
    font: 700 10px/1 var(--imp-cond);
    letter-spacing: .16em;
    text-transform: uppercase;
}

.imp-blog-date { font: 700 10px/1 var(--imp-cond); letter-spacing: .18em; text-transform: uppercase; color: var(--imp-text-3); }
.imp-blog-featured-title { font: 800 30px/1.15 var(--imp-sans); letter-spacing: -.03em; color: var(--imp-text); margin-top: 14px; text-wrap: pretty; }
.imp-blog-featured-excerpt { font: 400 14px/1.7 var(--imp-sans); color: var(--imp-text-2); margin-top: 12px; max-width: 560px; }

.imp-blog-featured-foot { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-top: auto; padding-top: 20px; }
.imp-blog-readmore { font: 700 12px/1 var(--imp-cond); letter-spacing: .18em; text-transform: uppercase; color: var(--imp-lime); }
.imp-blog-byline { font: 400 12px/1 var(--imp-sans); color: var(--imp-text-4); }

/* ============================================================
   3. List — grid
   ============================================================ */

.imp-blog-grid { margin-top: 26px; }

/* Bootstrap's gutters are 15px; the spec asks for an 18px gap, so the row is
   pulled out by 9px a side and each column padded to match. */
.imp-blog-grid > .row { margin-left: -9px; margin-right: -9px; }
.imp-blog-grid > .row > [class*="col-"] { padding-left: 9px; padding-right: 9px; margin-bottom: 18px; }

.imp-blog-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--imp-surface);
    border: 1px solid var(--imp-line);
    border-top: 3px solid var(--imp-line);
    text-decoration: none;
    transition: transform .12s ease, border-color .12s ease;
}

.imp-blog-card.newest { border-top-color: var(--imp-lime); }

.imp-blog-card:hover {
    transform: translateY(-3px);
    border-left-color: var(--imp-line-2);
    border-right-color: var(--imp-line-2);
    border-bottom-color: var(--imp-line-2);
    text-decoration: none;
}

.imp-blog-card-art { aspect-ratio: 16 / 10; overflow: hidden; background: var(--imp-surface-3); }
.imp-blog-card-art img { width: 100%; height: 100%; object-fit: cover; display: block; }

.imp-blog-card-body { display: flex; flex-direction: column; flex: 1; padding: 14px 15px 15px; }

.imp-blog-card-title {
    font: 700 15px/1.3 var(--imp-sans);
    letter-spacing: -.015em;
    color: var(--imp-text);
    margin-top: 9px;
    text-wrap: pretty;
}

/* Two lines, always. A one-line title would otherwise lift this card's READ
   row above its neighbours' and the grid stops reading as rows. */
.imp-blog-card-excerpt {
    font: 400 12px/1.6 var(--imp-sans);
    color: var(--imp-text-3);
    margin-top: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.imp-blog-card-read {
    font: 700 11px/1 var(--imp-cond);
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--imp-lime);
    margin-top: auto;
    padding-top: 14px;
}

/* ============================================================
   4. List — empty state
   ============================================================ */

.imp-blog-empty { border: 1px dashed var(--imp-line-2); padding: 40px 34px; text-align: center; }
.imp-blog-empty-title { font: 700 15px/1.3 var(--imp-sans); color: var(--imp-text); }
.imp-blog-empty-body { font: 400 13px/1.6 var(--imp-sans); color: var(--imp-text-3); margin-top: 8px; }

/* ============================================================
   5. Content — breadcrumb
   ============================================================ */

.imp-blog-crumbs {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
    padding: 20px 34px;
    border-bottom: 1px solid var(--imp-line);
    font: 700 11px/1.4 var(--imp-cond);
    letter-spacing: .16em;
    text-transform: uppercase;
}

.imp-blog-crumbs a { color: var(--imp-text-3); text-decoration: none; transition: color .12s ease; }
.imp-blog-crumbs a:hover { color: var(--imp-lime); text-decoration: none; }
.imp-blog-crumbs .sep { color: var(--imp-line-2); }
.imp-blog-crumbs .here { color: var(--imp-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 42ch; }

/* ============================================================
   6. Content — article + sidebar
   ============================================================ */

.imp-blog-cols { display: flex; gap: 34px; align-items: flex-start; padding: 30px 34px 48px; }

/* The measure. Long unstyled lines are the main reason raw editor output reads
   badly, and this single value fixes more of it than any font choice. */
.imp-blog-article { flex: 1; min-width: 0;  }

.imp-blog-meta { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.imp-blog-meta-date { font: 700 11px/1 var(--imp-cond); letter-spacing: .2em; text-transform: uppercase; color: var(--imp-lime); }
.imp-blog-meta-by { font: 400 12px/1 var(--imp-sans); color: var(--imp-text-3); }
.imp-blog-meta-updated { font: 400 12px/1 var(--imp-sans); color: var(--imp-text-4); }

.imp-blog-headline {
    font: 800 44px/1.08 var(--imp-sans);
    letter-spacing: -.038em;
    color: var(--imp-text);
    margin-top: 16px;
    text-wrap: pretty;
}

.imp-blog-hero { aspect-ratio: 16 / 9; overflow: hidden; background: var(--imp-surface-3); margin-top: 24px; }
.imp-blog-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ============================================================
   7. Prose scale — the editor's own HTML

   DEFECT FIX. The body was `style="color: black"` on a #0a0f14 page, i.e.
   invisible, and links were browser blue. Everything below is scoped to
   #content so it dresses Html.Raw output without touching the page chrome.
   ============================================================ */

#content { margin-top: 26px; }
.imp-blog-content--redirect { cursor: pointer; }
.imp-blog-content--redirect:focus { outline: 2px solid var(--imp-lime); outline-offset: 8px; }

#content p { font: 400 15px/1.8 var(--imp-sans); color: var(--imp-text-2); margin: 14px 0 0; }

/* Gives every article a proper opening without the author doing anything. */
#content > p:first-of-type { font-size: 17px; line-height: 1.75; color: #c9d6e0; margin-top: 0; }

#content h2 {
    font: 800 26px/1.2 var(--imp-sans);
    letter-spacing: -.025em;
    color: var(--imp-text);
    margin: 34px 0 0;
    padding-top: 22px;
    border-top: 1px solid var(--imp-line);
    text-wrap: pretty;
}

#content h3 { font: 700 19px/1.3 var(--imp-sans); color: var(--imp-text); margin: 26px 0 0; text-wrap: pretty; }

#content ul,
#content ol { list-style: none; display: flex; flex-direction: column; gap: 10px; margin: 14px 0 0; padding: 0; }

#content li { position: relative; font: 400 15px/1.7 var(--imp-sans); color: var(--imp-text-2); padding-left: 20px; }

#content li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .55em;
    width: 6px;
    height: 6px;
    background: var(--imp-lime);
}

#content blockquote {
    background: var(--imp-surface-2);
    border-left: 4px solid var(--imp-lime);
    padding: 18px 22px;
    margin: 20px 0 0;
    font: 400 16px/1.7 var(--imp-sans);
    color: var(--imp-text);
}

#content a {
    color: var(--imp-lime);
    text-decoration: none;
    border-bottom: 1px solid rgba(200, 255, 0, .4);
    transition: border-color .12s ease;
}

#content a:hover { color: var(--imp-lime); border-bottom-color: var(--imp-lime); text-decoration: none; }

/* Editor tables are rarely given a wrapper, so the table scrolls in place
   rather than pushing the article wider than its measure. */
#content .imp-blog-tablewrap { overflow-x: auto; margin-top: 20px; }
#content table { width: 100%; border: 1px solid var(--imp-line); border-collapse: collapse; }
#content thead th,
#content th {
    background: var(--imp-surface-2);
    font: 700 10px/1.3 var(--imp-cond);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--imp-text-3);
    text-align: left;
    padding: 13px 16px;
    border-bottom: 1px solid var(--imp-line);
}
#content td { padding: 13px 16px; border-bottom: 1px solid var(--imp-line); font: 400 14px/1.6 var(--imp-sans); color: var(--imp-text-2); }

#content img { max-width: 100%; height: auto; display: block; margin: 24px 0; }
#content strong, #content b { color: var(--imp-text); }
#content hr { border: 0; border-top: 1px solid var(--imp-line); margin: 28px 0; }

/* The editor emits inline colours from its own palette, which were authored
   against a white page. Anything the author did not deliberately colour comes
   through as near-black and vanishes here, so neutralise the defaults. */
#content [style*="color: black"],
#content [style*="color:black"],
#content [style*="color: #000"],
#content [style*="color:#000"],
#content [style*="rgb(0, 0, 0)"],
#content [style*="rgb(0,0,0)"] { color: var(--imp-text-2) !important; }

/* ============================================================
   8. Content — share row
   ============================================================ */

.imp-blog-share { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--imp-line); }
.imp-blog-share-label { font: 700 11px/1 var(--imp-cond); letter-spacing: .2em; text-transform: uppercase; color: var(--imp-text-3); }

.imp-blog-share-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 11px 16px;
    background: transparent;
    border: 1px solid var(--imp-line-2);
    color: var(--imp-text-2);
    font: 700 11px/1 var(--imp-cond);
    letter-spacing: .16em;
    text-transform: uppercase;
    cursor: pointer;
    text-decoration: none;
    transition: color .12s ease, border-color .12s ease;
}

.imp-blog-share-btn:hover { border-color: var(--imp-lime); color: var(--imp-lime); text-decoration: none; }
.imp-blog-share-btn svg { flex: none; }

/* ============================================================
   9. Content — sidebar
   ============================================================ */

.imp-blog-side { flex: none; width: 320px; display: flex; flex-direction: column; gap: 16px; }

.imp-blog-panel { background: var(--imp-surface); border: 1px solid var(--imp-line); padding: 20px; }
.imp-blog-panel.cta { border-top: 4px solid var(--imp-lime); }
.imp-blog-panel-kicker { font: 700 11px/1 var(--imp-cond); letter-spacing: .22em; text-transform: uppercase; color: var(--imp-lime); }
.imp-blog-panel-title { font: 700 12px/1 var(--imp-cond); letter-spacing: .2em; text-transform: uppercase; color: var(--imp-text-3); }
.imp-blog-panel-body { font: 400 13px/1.6 var(--imp-sans); color: var(--imp-text-2); margin-top: 10px; }

.imp-blog-cta-btn {
    display: block;
    width: 100%;
    margin-top: 16px;
    text-align: center;
    font: 700 14px/1 var(--imp-cond);
    letter-spacing: .18em;
    text-transform: uppercase;
    padding: 15px 0;
    background: var(--imp-lime);
    color: var(--imp-bg);
    border: 0;
    clip-path: var(--imp-cut);
    text-decoration: none;
    transition: background .12s ease;
}

.imp-blog-cta-btn:hover { background: var(--imp-lime-hi); color: var(--imp-bg); text-decoration: none; }

/* on this page */
.imp-blog-toc { display: flex; flex-direction: column; gap: 9px; margin-top: 14px; }
.imp-blog-toc a { font: 400 13px/1.5 var(--imp-sans); color: var(--imp-text-2); text-decoration: none; border-left: 2px solid var(--imp-line); padding-left: 11px; transition: color .12s ease, border-color .12s ease; }
.imp-blog-toc a:hover { color: var(--imp-lime); border-left-color: var(--imp-lime); text-decoration: none; }

/* more articles */
.imp-blog-more { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }
.imp-blog-more-row { display: flex; gap: 12px; align-items: flex-start; text-decoration: none; }
.imp-blog-more-art { flex: none; width: 74px; aspect-ratio: 16 / 10; overflow: hidden; background: var(--imp-surface-3); }
.imp-blog-more-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.imp-blog-more-title { font: 700 13px/1.35 var(--imp-sans); color: var(--imp-text); margin-top: 5px; text-wrap: pretty; }
.imp-blog-more-row:hover .imp-blog-more-title { color: var(--imp-lime); }

/* ============================================================
   10. Mobile
   ============================================================ */

@media only screen and (max-width: 991px) {
    .imp-blog-cols { flex-direction: column; gap: 26px; }
    .imp-blog-article { max-width: none; }
    .imp-blog-side { width: auto; align-self: stretch; }
}

@media only screen and (max-width: 767px) {
    .imp-blog-head { padding: 20px 18px; gap: 16px; }
    .imp-blog-h1 { font-size: 24px; margin-top: 10px; }
    .imp-blog-standfirst { font-size: 13px; margin-top: 9px; }
    .imp-blog-lang { padding: 9px 12px; font-size: 11px; }

    .imp-blog-body { padding: 16px 18px 26px; }
    .imp-blog-crumbs { padding: 14px 18px; font-size: 10px; }
    .imp-blog-cols { padding: 18px 18px 32px; }

    /* Featured collapses into the same row shape the grid uses below it, so a
       phone shows one consistent list rather than two different treatments. */
    .imp-blog-featured,
    .imp-blog-card {
        flex-direction: row;
        gap: 12px;
        border: 0;
        border-bottom: 1px solid var(--imp-line);
        border-top: 0;
        background: transparent;
        padding: 12px 0;
        height: auto;
    }

    .imp-blog-featured:hover,
    .imp-blog-card:hover { transform: none; border-color: var(--imp-line); }

    .imp-blog-featured-art,
    .imp-blog-card-art { width: 104px; flex: none; }

    .imp-blog-featured-body,
    .imp-blog-card-body { padding: 0; flex: 1; min-width: 0; }

    .imp-blog-featured-title { font-size: 15px; line-height: 1.3; margin-top: 7px; letter-spacing: -.015em; }
    .imp-blog-featured-excerpt { display: none; }
    .imp-blog-featured-foot { margin-top: 9px; padding-top: 0; }
    .imp-blog-byline { display: none; }

    .imp-blog-card-title { font-size: 14px; }
    .imp-blog-card-excerpt { display: none; }
    .imp-blog-card-read { padding-top: 8px; }

    .imp-blog-grid > .row > [class*="col-"] { margin-bottom: 0; }

    .imp-blog-headline { font-size: 30px; letter-spacing: -.03em; }
    .imp-blog-hero { margin-top: 18px; }

    /* the prose scale itself is deliberately unchanged on mobile */
}