/* Article layout — single-column editorial body. Vanilla CSS (no tailwind build);
   relies on :root tokens (--spacing, --radius-*) from the compiled tailwind.css.
   Brand hex values below are intentional, ported byte-faithful from the former inline
   <style> in article-detail.ejs — do NOT swap for var(--color-*) (different semantics). */

/* Single-column body container — mirrors .main-body spacing (compiled values) but as
   block flow instead of the 2-col flex grid. */
.main-body--article {
    display: block;
    margin-inline: calc(var(--spacing) * -3);
    padding: calc(var(--spacing) * 3);
    margin-bottom: calc(var(--spacing) * 12);
}

/* Kill the 2/3 desktop width (sized for the old grid) + flatten the glass card chrome,
   so the body reads as a centered editorial column (Image #6). */
.main-body--article > .main-content {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-radius: 0;
}

/* ── Article body polish (scoped to the editorial prose container) ──
   The editor-button / editor-image-text block styling moved to
   src/tailwind-webgame.css under .editor-content (the single source for all
   editor-content surfaces — landing pages don't load this article.css). Article
   pages now carry the .editor-content class too, so they pick up the same rules
   from the global tailwind build. Only article-prose-specific styling (tables,
   FAQ, related grid) stays scoped to .sm-article-content below. */

/* Responsive tables — shrink-to-content and center; wide tables cap at 100% and
   scroll horizontally instead of breaking layout. max-content lets a small table
   hug its own width so margin-inline:auto can center it (former width:100% pinned
   every table to the left edge). Rounded corners come from the overflow clip. */
.sm-article-content table {
    display: block;
    /* !important neutralizes the editor's inline width:100%. On a display:block
       table that inline value stretches the card box (bg/shadow/radius live here)
       full-width while the inner row layout keeps content width, leaving a blank
       right gutter + misaligned row stripes. max-content makes the card hug its
       rows; wide tables exceed 100%, get capped, and scroll horizontally. */
    width: max-content !important;
    max-width: 100%;
    margin: 1.5rem auto;
    overflow-x: auto;
    border-collapse: collapse;
    border-radius: .75rem;
    background: #fff;
    /* Stronger ring + lift so the table reads as a distinct card, not a faint
       outline that dissolves into the slate-50 page. */
    box-shadow: 0 6px 20px rgba(15, 23, 42, .10), 0 0 0 1px #d4ddea;
    font-size: .95rem;
    line-height: 1.5;
    color: #334155;
}
.sm-article-content th, .sm-article-content td {
    border-bottom: 1px solid #e4eaf2;
    border-right: 1px solid #e4eaf2;
    padding: .75rem 1.1rem;
    text-align: left;
    vertical-align: top;
}
/* Drop the outer dividers — the box-shadow ring is the table's edge. */
.sm-article-content tr > :last-child { border-right: 0; }
.sm-article-content tr:last-child > * { border-bottom: 0; }
/* Header band — brand-blue tint pops the column labels off the body. */
.sm-article-content thead th {
    background: #eaf1ff; font-weight: 700; color: #1d4ed8;
    text-transform: uppercase; letter-spacing: .03em; font-size: .82rem;
}
/* First column acts as the row's anchor (esp. for header-less tables) — bold + dark. */
.sm-article-content tbody td:first-child { font-weight: 600; color: #0f172a; }
.sm-article-content tbody tr:nth-child(even) { background: #f3f7ff; }
.sm-article-content tbody tr:hover { background: #e7efff; }

/* ── "You may like" related grid ── */
.yml-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.yml-card {
    display: flex; flex-direction: column; border: 1px solid #e2e8f0; border-radius: .75rem;
    overflow: hidden; background: #fff; text-decoration: none; transition: box-shadow .15s ease, transform .15s ease;
}
.yml-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,.08); transform: translateY(-2px); }
.yml-thumb { aspect-ratio: 16 / 9; background: #f1f5f9; }
.yml-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* margin (not padding) — overflow:hidden clips at the padding-box, so padded
   space would show a sliced 3rd line bleeding past the 2-line clamp. */
.yml-title { margin: .75rem; font-weight: 700; font-size: .9rem; color: #0f172a; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 768px) { .yml-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .yml-grid { grid-template-columns: 1fr; } }

/* ── FAQ accordion (native <details>/<summary>, no JS) ── */
.faq-accordion { display: flex; flex-direction: column; gap: .75rem; }
.faq-item { border: 1px solid #e2e8f0; border-radius: .75rem; background: #fff; overflow: hidden; }
.faq-q {
    cursor: pointer; padding: 1rem 1.25rem; font-weight: 700; font-size: 1rem; color: #0f172a;
    list-style: none; display: flex; align-items: center; justify-content: space-between; gap: .75rem;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q::after { content: "+"; font-size: 1.25rem; color: #155dfc; line-height: 1; }
.faq-item[open] .faq-q::after { content: "\2212"; }
.faq-a { padding: 0 1.25rem 1.25rem; color: #334155; line-height: 1.6; }
.faq-a > :first-child { margin-top: 0; }