/*!
 * AutoMedia — Article detail (Tahap 5)
 */
.article__header { padding-block: var(--space-8) var(--space-6); }
.article__category { margin-bottom: var(--space-4); }
.article__title {
    font-size: var(--text-4xl);
    line-height: var(--leading-4xl);
    letter-spacing: var(--tracking-tight);
}
@media (min-width: 768px) {
    .article__title { font-size: var(--text-5xl); line-height: var(--leading-5xl); }
}
.article__excerpt { margin-top: var(--space-4); font-size: var(--text-lg); color: var(--color-text-secondary); }
.article__byline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-top: var(--space-6);
    padding-top: var(--space-6);
    border-top: var(--border-width) solid var(--color-border);
}
.article__byline-meta { font-size: var(--text-xs); color: var(--color-text-tertiary); display: flex; gap: var(--space-1); flex-wrap: wrap; }

/* Layout: sticky share rail + main content column ------------------ */
.article__layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-8);
    padding-block: var(--space-4) var(--space-16);
}
@media (min-width: 1024px) {
    .article__layout { grid-template-columns: 56px minmax(0, 1fr); align-items: start; }
}

.share-rail {
    position: sticky;
    top: calc(64px + var(--space-6));
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
@media (min-width: 768px) {
    /* Re-assert flex against .u-hide-sm's `display: revert !important`
       at the same breakpoint — see components.css's docblock next to
       .u-hide-sm for the full explanation. Without this, .share-rail
       reverts to a plain <aside>'s block default and its icons wrap
       into a horizontal row instead of the intended sticky vertical
       rail — confirmed via a real render, not just theoretical. */
    .share-rail.u-hide-sm { display: flex !important; }
}
.share-rail__btn {
    width: 44px; height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--radius-full);
    border: var(--border-width) solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text-secondary);
    transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-spring);
}
.share-rail__btn:hover { background: var(--color-primary); color: var(--color-text-on-primary); border-color: transparent; transform: scale(1.06); }
.share-rail__btn[aria-pressed="true"] { background: var(--color-danger); color: white; border-color: transparent; }

/* Reading body ------------------------------------------------------- */
.article__content { font-size: var(--text-lg); line-height: 1.85; color: var(--color-text); }
.article__content p { margin-bottom: 1.5em; }
.article__content p:last-child { margin-bottom: 0; }

/* Inline recommendation, inserted mid-article ------------------------ */
.inline-reco {
    margin: var(--space-8) 0;
    padding: var(--space-5);
    border-radius: var(--radius-lg);
    border: var(--border-width) solid var(--color-border);
    background: var(--color-bg-subtle);
    display: flex;
    gap: var(--space-4);
    align-items: center;
}
.inline-reco__title { font-size: var(--text-base); font-weight: var(--font-semibold); }
.inline-reco__title:hover { color: var(--color-primary); }
.inline-reco__media { width: 80px; height: 80px; flex-shrink: 0; border-radius: var(--radius-md); overflow: hidden; }
.inline-reco__media .media-placeholder,
.inline-reco__media img { font-size: var(--text-xl); width: 100%; height: 100%; object-fit: cover; }

/* Paywall -------------------------------------------------------------- */
.paywall {
    position: relative;
    margin: var(--space-8) 0;
    padding: var(--space-8) var(--space-6);
    text-align: center;
    border-radius: var(--radius-xl);
    border: var(--border-width) solid var(--color-accent);
    background: var(--color-accent-subtle);
}
.paywall::before { content: ""; position: absolute; left: 0; right: 0; top: -3rem; height: 3rem; background: linear-gradient(180deg, transparent, var(--color-bg)); pointer-events: none; }
.paywall h3 { font-size: var(--text-xl); margin-bottom: var(--space-2); }
.paywall p { color: var(--color-text-secondary); max-width: 32rem; margin-left: auto; margin-right: auto; margin-bottom: var(--space-5); }

/* Live blog ------------------------------------------------------------ */
.live-blog-feed { margin: var(--space-6) 0 var(--space-8); }
.live-blog-ended { color: var(--color-text-secondary); font-size: var(--text-sm); margin-bottom: var(--space-3); }

/* Author box ------------------------------------------------------------ */
.author-box {
    margin: var(--space-10) 0;
    padding: var(--space-6);
    border-radius: var(--radius-xl);
    border: var(--border-width) solid var(--color-border);
    background: var(--color-surface);
}
.author-box__label { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--color-text-tertiary); margin-bottom: var(--space-4); }

/* Tags ------------------------------------------------------------------ */
.article__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-8) 0; }

/* Related grids ----------------------------------------------------------- */
.related-section { padding-block: var(--space-10); border-top: var(--border-width) solid var(--color-border); margin-top: var(--space-8); }

/* Comments ---------------------------------------------------------------- */
.comments-section { padding-block: var(--space-10); }
.comments-section__count { color: var(--color-text-tertiary); font-weight: var(--font-normal); }

/* Floating mobile action bar ------------------------------------------------
   Stacks ABOVE the sitewide sticky bottom nav (site.css's .bottom-nav,
   fixed at bottom:0 on every page), not on top of it — both are real,
   separate features (site navigation vs. this article's quick actions)
   and would otherwise overlap on every article page on mobile. */
.floating-actions {
    position: fixed;
    left: 0; right: 0;
    bottom: var(--bottom-nav-height);
    z-index: var(--z-fixed);
    display: flex;
    justify-content: space-around;
    padding: var(--space-2) var(--space-4);
    background: color-mix(in srgb, var(--color-surface) 92%, transparent);
    backdrop-filter: blur(10px);
    border-top: var(--border-width) solid var(--color-border);
}
/* Article pages stack TWO fixed bottom bars on mobile (the sitewide
   .bottom-nav plus this article's own .floating-actions) — #main-content
   needs extra clearance beyond site.css's sitewide bottom-nav-only
   padding so the end of the article body/comments isn't hidden behind
   both. `:has()` (Baseline widely-available since 2023) targets the
   layout wrapper from the child that's actually present. */
@media (max-width: 767px) {
    body:has(.floating-actions) #main-content { padding-bottom: calc(var(--bottom-nav-height) * 2); }
}

.floating-actions__btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    background: none; border: 0;
    color: var(--color-text-secondary);
    font-size: var(--text-xs);
    padding: var(--space-1) var(--space-2);
}
.floating-actions__btn[aria-pressed="true"] { color: var(--color-danger); }