/* ==========================================================================
   Page: Article Detail
   Spec: pages/article_detail.md
   Chỉ chứa layout/style thực sự đặc thù cho page — không copy style của
   Navigation, Button, Breadcrumb hoặc Footer (theo pages/README.md).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Reading measure — dùng chung cho Header/Body/TOC/CTA để giữ một chiều
   rộng đọc nhất quán xuyên suốt page (article_detail.md §5/§6: 700–760px).
   -------------------------------------------------------------------------- */
.article-measure {
    max-width: 760px;
    margin-inline: auto;
}

/* --------------------------------------------------------------------------
   5. Article Header — pages/article_detail.md §5
   -------------------------------------------------------------------------- */
.article-header {
    padding-block: var(--space-8) var(--space-6);
}

.article-header__inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.article-header__category {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    padding: var(--space-1) var(--space-3);
    background-color: var(--color-surface-tinted);
    color: var(--color-action-primary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
    border-radius: var(--radius-full);
    letter-spacing: 0.02em;
}

.article-header__category:hover {
    background-color: var(--navy-100);
    color: var(--color-text-link-hover);
}

.article-header__title {
    max-width: 22ch;
}

.article-header__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.article-header__meta-dot {
    width: 3px;
    height: 3px;
    border-radius: var(--radius-full);
    background-color: var(--color-text-muted);
    flex-shrink: 0;
}

.article-header__image {
    margin-top: var(--space-2);
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background-color: var(--color-surface-alt);
    border: var(--border-width-sm) solid var(--color-border);
}

.article-header__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Header content stays at reading measure; the image can breathe a little
   wider than the text column while remaining inside the page container. */
.article-header__inner > *:not(.article-header__image) {
    max-width: 760px;
    margin-inline: auto;
    width: 100%;
}

/* Keep the badge compact and aligned with the centered reading column. */
.article-header__inner > .article-header__category {
    width: fit-content;
    margin-inline: max(0px, calc((100% - 760px) / 2)) 0;
}

/* --------------------------------------------------------------------------
   6.1 Table of Contents — pages/article_detail.md §6.1
   Static block above the body by default; promoted to a sticky rail once
   there is enough width to hold it beside the reading column (>=1200px).
   -------------------------------------------------------------------------- */
.article-toc {
    margin-inline: auto;
    max-width: 760px;
    margin-bottom: var(--space-8);
    padding: var(--space-4) var(--space-6);
    background-color: var(--color-surface-alt);
    border: var(--border-width-sm) solid var(--color-border);
    border-radius: var(--radius-lg);
}

.article-toc__title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin-bottom: var(--space-3);
}

.article-toc__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    list-style: none;
    font-size: var(--font-size-sm);
}

.article-toc__list a {
    color: var(--color-text-secondary);
    text-decoration: none;
}

.article-toc__list a:hover {
    color: var(--color-text-link-hover);
    text-decoration: underline;
}

/* Collapsed accordion presentation on narrow viewports (spec: <details>) */
.article-toc[open] .article-toc__title,
.article-toc:not([open]) .article-toc__list {
    display: none;
}

@media (min-width: 640px) {
    .article-toc {
        padding: var(--space-6);
    }

    .article-toc[open] .article-toc__title,
    .article-toc__list {
        display: block;
    }

    .article-toc__list {
        display: flex;
    }
}

@media (min-width: 1280px) {
    /* Optional sticky-rail layout — activated by adding
       data-toc-layout="rail" on .article-body-wrap in markup when the
       page wants the two-column treatment described in the spec. */
    .article-body-wrap[data-toc-layout="rail"] {
        display: grid;
        grid-template-columns: 220px 1fr;
        gap: var(--space-12);
        align-items: start;
        max-width: 1040px;
        margin-inline: auto;
    }

    .article-body-wrap[data-toc-layout="rail"] .article-toc {
        position: sticky;
        top: calc(var(--nav-height) + var(--space-6));
        margin-bottom: 0;
        max-width: none;
    }

    .article-body-wrap[data-toc-layout="rail"] .article-measure {
        margin-inline: 0;
    }
}

/* --------------------------------------------------------------------------
   6. Article Body — pages/article_detail.md §6
   Typography intentionally relies on typography.css defaults for h2/h3/p/
   ul/ol so the reading experience stays consistent site-wide; only spacing
   and media handling are page-specific here.
   -------------------------------------------------------------------------- */
.article-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.article-body > * + h2 {
    margin-top: var(--space-4);
}

.article-body h2 {
    scroll-margin-top: calc(var(--nav-height) + var(--space-4));
}

.article-body h3 {
    scroll-margin-top: calc(var(--nav-height) + var(--space-4));
}

.article-body figure {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.article-body figure img {
    border-radius: var(--radius-md);
}

.article-body figcaption {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    text-align: center;
}

.article-body blockquote {
    padding-inline-start: var(--space-4);
    border-inline-start: var(--border-width-lg) solid var(--color-action-accent);
    color: var(--color-text-secondary);
    font-size: var(--font-size-md);
    line-height: var(--line-height-relaxed);
}

.article-body__disclaimer {
    padding: var(--space-4);
    background-color: var(--color-info-bg);
    border: var(--border-width-sm) solid var(--color-info-border);
    border-radius: var(--radius-md);
    color: var(--color-info-text);
    font-size: var(--font-size-sm);
}

/* --------------------------------------------------------------------------
   7. Share — pages/article_detail.md §7
   -------------------------------------------------------------------------- */
.article-share {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    padding-top: var(--space-6);
    margin-top: var(--space-6);
    border-top: var(--border-width-sm) solid var(--color-border);
}

.article-share__label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    margin-inline-end: var(--space-1);
}

.article-share__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    border: var(--border-width-sm) solid var(--color-border);
    color: var(--color-text-secondary);
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.article-share__action:hover {
    background-color: var(--color-surface-alt);
    color: var(--color-action-primary);
    border-color: var(--color-action-secondary-border);
}

.article-share__action svg {
    width: var(--icon-size-md, 18px);
    height: var(--icon-size-md, 18px);
}

/* "Đã sao chép" feedback — swapped via JS on the button's accessible name
   and this visible label; no color-only state per accessibility.md §4. */
.article-share__copy-label {
    font-size: var(--font-size-xs);
    color: var(--color-success-text);
    opacity: 0;
    transition: opacity 0.15s ease;
}

.article-share__copy-label[data-visible="true"] {
    opacity: 1;
}

/* --------------------------------------------------------------------------
   8. Author Note — pages/article_detail.md §8
   -------------------------------------------------------------------------- */
.article-author {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-6);
    margin-top: var(--space-6);
    background-color: var(--color-surface-alt);
    border-radius: var(--radius-md);
}

.article-author__avatar {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    background-color: var(--navy-100);
    color: var(--color-action-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--font-weight-semibold);
    flex-shrink: 0;
}

.article-author__text {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: var(--line-height-relaxed);
}

.article-author__text strong {
    color: var(--color-text-primary);
}

/* --------------------------------------------------------------------------
   9. Related Articles — pages/article_detail.md §9
   -------------------------------------------------------------------------- */
.related {
    background-color: var(--color-surface-alt);
}

.related__heading {
    margin-bottom: var(--space-6);
}

.related__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
}

@media (min-width: 640px) {
    .related__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .related__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.related-card {
    display: flex;
    flex-direction: column;
    background-color: var(--card-bg);
    border: var(--border-width-sm) solid var(--card-border);
    border-radius: var(--card-radius);
    overflow: hidden;
    box-shadow: var(--card-shadow);
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.related-card:hover {
    box-shadow: var(--card-shadow-hover);
    transform: translateY(-2px);
}

.related-card__media {
    aspect-ratio: 16 / 10;
    background-color: var(--color-surface-alt);
}

.related-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.related-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-6) var(--space-6);
}

.related-card__category {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-action-primary);
}

.related-card__title {
    font-size: var(--font-size-md);
    line-height: var(--line-height-tight);
}

.related-card__title a {
    color: var(--color-text-primary);
    text-decoration: none;
}

.related-card__title a::after {
    /* Extends the link's hit area to the whole card without nesting a
       second interactive link (article_detail.md §9 accessibility note). */
    content: "";
    position: absolute;
    inset: 0;
}

.related-card {
    position: relative;
}

.related-card__title a:hover {
    color: var(--color-action-primary);
}

.related-card__date {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   10. CTA Band — pages/article_detail.md §10
   Same visual pattern as About Page's CTA Band (about.css) — single
   primary action, tinted surface, centered.
   -------------------------------------------------------------------------- */
.cta-band {
    background-color: var(--color-surface-tinted);
    text-align: center;
}

.cta-band__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    max-width: 60ch;
    margin-inline: auto;
}

.cta-band__text {
    color: var(--color-text-secondary);
}

/* --------------------------------------------------------------------------
   11. Article Not Found — pages/article_detail.md §11
   -------------------------------------------------------------------------- */
.article-not-found {
    text-align: center;
    padding-block: var(--space-20);
}

.article-not-found__text {
    max-width: 50ch;
    margin-inline: auto;
    color: var(--color-text-secondary);
}

.article-not-found__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-3);
    margin-top: var(--space-6);
}

@media (max-width: 479.98px) {
    .article-not-found__actions .button {
        width: 100%;
    }
}