/* 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;
    max-width: var(--container-max);
    margin-inline: auto;
    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-news.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; }

/* ── Editorial prose polish (scoped to the article body) ──
   Light touches on top of .prose/.editor-content: a branded blockquote, readable
   links, and softened media. Below-the-fold content, so no critical-CSS mirror. */
.sm-article-content blockquote {
    margin: 1.75rem 0;
    padding: .75rem 0 .75rem 1.25rem;
    border-left: 4px solid #155dfc;
    color: #475569;
    font-style: italic;
}
.sm-article-content blockquote > :first-child { margin-top: 0; }
.sm-article-content blockquote > :last-child { margin-bottom: 0; }
.sm-article-content a {
    color: #1d4ed8;
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
    transition: color .15s ease;
}
.sm-article-content a:hover { color: #155dfc; text-decoration-thickness: 2px; }
.sm-article-content img,
.sm-article-content figure img { border-radius: .75rem; }
.sm-article-content figure figcaption {
    margin-top: .5rem;
    font-size: .85rem;
    color: #64748b;
    text-align: center;
}

/* ── Phone reading column ──
   Story text a notch larger with a tighter leading than the prose default
   (1rem / 1.75): Vietnamese diacritics stack tall, so 1.7 keeps lines open
   without the airy gaps 1.75 leaves at 17px. Mirrored in critical.css — the
   body starts above the fold, so the size must not change when this file lands.
   overflow-wrap stops a pasted URL from forcing a horizontal scroll. */
.sm-article-content { overflow-wrap: break-word; }
@media (max-width: 639px) {
    .prose.sm-article-content { font-size: 1.0625rem; line-height: 1.7; }
}

/* ── "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;
}
@media (hover: hover) {
    .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); } }
/* Phones: one column of thumb-left rows (same shape as the feed's compact card)
   — six 16:9 tiles stacked were a full screen of scrolling before the first title. */
@media (max-width: 639px) {
    .yml-grid { grid-template-columns: 1fr; gap: .75rem; }
    .yml-card { flex-direction: row; align-items: stretch; min-height: 44px; }
    .yml-thumb { flex: 0 0 7.5rem; width: 7.5rem; aspect-ratio: 3 / 2; }
    .yml-title { margin: .5rem .75rem; align-self: center; -webkit-line-clamp: 3; }
}

/* ── Adsconex in-content video player ──
   The bare <div id="adsconex-video-container"> is filled client-side by the
   external cdn.adsconex.com/js/adsconex-player.js (a Video.js player). That
   script reserves no aspect-ratio or width, so the player renders at its native
   size and spills over the article heading directly below it. The theme owns the
   container element even though the player is external, so box it here — same
   responsive 16:9 / 640px frame the GAM player gets from gam-video.css. The frame
   is reserved before the script runs, so there is no overlap during the fill gap.
   overflow:hidden clips inline overflow but NOT a position:fixed sticky child
   (fixed escapes ancestor clipping), so sticky-on-scroll keeps working. */
#adsconex-video-container {
    position: relative;
    width: 100%;
    max-width: 640px;
    aspect-ratio: 16 / 9;
    margin: 1em auto;
    overflow: hidden;
    background: #000;
}
#adsconex-video-container .video-js,
#adsconex-video-container video,
#adsconex-video-container iframe {
    width: 100% !important;
    height: 100% !important;
}
#adsconex-video-container video { object-fit: contain; }

/* ── 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; }