/* ==========================================================================
   Page: News
   DTL Accounting — Tin tức & Kiến thức

   Load after:
   tokens.css
   -> reset.css
   -> typography.css
   -> base.css
   -> components/*.css
   -> pages/news.css

   Only consumes Semantic / Component tokens.
   ========================================================================== */


/* ==========================================================================
   1. News Intro
   ========================================================================== */

   .news-intro {
    padding-block: var(--space-12) var(--space-16);
    background-color: var(--color-surface-alt);
    border-block:
        var(--border-width-sm)
        solid
        var(--color-border);
}

.news-intro__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
    max-width: 760px;
}

.news-eyebrow,
.news-section-header__eyebrow,
.consultation__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-normal);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.news-eyebrow::before,
.news-section-header__eyebrow::before,
.consultation__eyebrow::before {
    content: "";
    display: inline-block;
    width: var(--space-6);
    height: var(--border-width-lg);
    flex: 0 0 auto;
    background-color: var(--color-action-accent);
}

.news-intro__lead {
    max-width: 680px;
}


/* ==========================================================================
   2. Featured Article
   ========================================================================== */

.featured-section {
    background-color: var(--color-surface);
}

.featured-news {
    display: grid;
    grid-template-columns: 1fr;
    overflow: hidden;
    background-color: var(--color-surface-alt);
    border:
        var(--border-width-sm)
        solid
        var(--color-border);
    border-radius: var(--radius-lg);
}

.featured-news__media {
    display: block;
    overflow: hidden;
    background-color: var(--color-surface-tinted);
    text-decoration: none;
}

.featured-news__media img {
    width: 100%;
    height: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

.featured-news__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: var(--space-4);
    padding: var(--space-8);
}

.featured-news__title {
    max-width: 22ch;
}

.featured-news__title a {
    color: var(--color-text-primary);
    text-decoration: none;
}

.featured-news__title a:hover {
    color: var(--color-text-link-hover);
}

.featured-news__excerpt {
    max-width: 58ch;
    color: var(--color-text-secondary);
}

.featured-news__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-2);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-link);
    text-decoration: none;
}

.featured-news__link:hover {
    color: var(--color-text-link-hover);
    text-decoration: underline;
}


/* ==========================================================================
   3. Shared News Content Patterns
   ========================================================================== */

.news-category {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding:
        var(--space-1)
        var(--space-3);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-normal);
    color: var(--color-text-link);
    background-color: var(--color-surface-tinted);
    border-radius: var(--radius-full);
}

.news-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-normal);
    color: var(--color-text-muted);
}

.news-meta__separator {
    color: var(--color-text-muted);
}


/* ==========================================================================
   4. Latest News Heading
   ========================================================================== */

.news-content-section {
    background-color: var(--color-surface);
}

.news-section-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
    margin-bottom: var(--space-8);
}

.news-section-header > div {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.news-results-count {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-normal);
    color: var(--color-text-muted);
}


/* ==========================================================================
   5. Category Filter
   ========================================================================== */

.news-filter-panel {
    position: relative;
    margin-bottom: var(--space-8);
    border-bottom:
        var(--border-width-sm)
        solid
        var(--color-border);
}

.news-filter-strip {
    display: flex;
    align-items: stretch;
    gap: var(--space-6);
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
    scroll-snap-type: inline proximity;
}

.news-filter {
    position: relative;
    flex: 0 0 auto;
    min-height: 48px;
    padding:
        var(--space-3)
        0;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-normal);
    color: var(--color-text-secondary);
    scroll-snap-align: start;
    white-space: nowrap;
}

.news-filter::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: var(--border-width-lg);
    background-color: transparent;
}

.news-filter:hover {
    color: var(--color-text-link-hover);
}

.news-filter.is-active,
.news-filter[aria-pressed="true"] {
    color: var(--color-text-link);
    font-weight: var(--font-weight-semibold);
}

.news-filter.is-active::after,
.news-filter[aria-pressed="true"]::after {
    background-color: var(--color-action-primary);
}


/* ==========================================================================
   6. Editorial Article List
   ========================================================================== */

.news-list {
    border-top:
        var(--border-width-sm)
        solid
        var(--color-border);
}

.news-item {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
    padding-block: var(--space-8);
    border-bottom:
        var(--border-width-sm)
        solid
        var(--color-border);
}

.news-item__media {
    display: block;
    overflow: hidden;
    align-self: start;
    background-color: var(--color-surface-tinted);
    border-radius: var(--radius-md);
    text-decoration: none;
}

.news-item__media img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

.news-item__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: var(--space-3);
    min-width: 0;
}

.news-item__title {
    font-size: var(--font-size-xl);
}

.news-item__title a {
    color: var(--color-text-primary);
    text-decoration: none;
}

.news-item__title a:hover {
    color: var(--color-text-link-hover);
    text-decoration: underline;
    text-decoration-thickness: var(--border-width-sm);
    text-underline-offset: var(--space-1);
}

.news-item__excerpt {
    max-width: 68ch;
    color: var(--color-text-secondary);
}


/* ==========================================================================
   7. Empty State
   ========================================================================== */

.news-empty {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-8);
    background-color: var(--color-surface-alt);
    border:
        var(--border-width-sm)
        solid
        var(--color-border);
    border-radius: var(--radius-lg);
}

.news-empty p {
    max-width: 58ch;
    color: var(--color-text-secondary);
}


/* ==========================================================================
   8. Pagination
   ========================================================================== */

.news-pagination {
    margin-top: var(--space-12);
}

.news-pagination__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
}

.news-pagination__link,
.news-pagination__current {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding:
        var(--space-2)
        var(--space-3);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-normal);
    border-radius: var(--radius-md);
}

.news-pagination__link {
    color: var(--color-text-link);
    background-color: var(--color-surface);
    border:
        var(--border-width-sm)
        solid
        var(--color-border);
    text-decoration: none;
}

.news-pagination__link:hover {
    color: var(--color-text-link-hover);
    background-color: var(--color-surface-tinted);
    border-color: var(--color-border-strong);
    text-decoration: none;
}

.news-pagination__current {
    color: var(--color-text-on-brand);
    background-color: var(--color-action-primary);
    border:
        var(--border-width-sm)
        solid
        var(--color-action-primary);
}

.news-pagination__link--direction {
    gap: var(--space-2);
    padding-inline: var(--space-4);
}

.news-pagination__ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    min-height: 44px;
    color: var(--color-text-muted);
}


/* ==========================================================================
   9. Consultation CTA
   ========================================================================== */

.consultation-section {
    background-color: var(--color-surface-tinted);
    border-top:
        var(--border-width-sm)
        solid
        var(--color-border);
}

.consultation {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-8);
    align-items: center;
}

.consultation__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
    max-width: 720px;
}

.consultation__content p:last-child {
    max-width: 64ch;
    color: var(--color-text-secondary);
}

.consultation__action {
    display: flex;
    align-items: center;
}


/* ==========================================================================
   10. Tablet
   ========================================================================== */

@media (min-width: 640px) {

    .news-section-header {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
    }

    .news-item {
        grid-template-columns:
            minmax(220px, 35%)
            minmax(0, 1fr);
        align-items: center;
    }

    .news-pagination__inner {
        gap: var(--space-3);
    }
}


/* ==========================================================================
   11. Desktop
   ========================================================================== */

@media (min-width: 768px) {

    .featured-news {
        grid-template-columns:
            minmax(0, 56fr)
            minmax(0, 44fr);
        align-items: stretch;
    }

    .featured-news__content {
        padding: var(--space-12);
    }

    .featured-news__media img {
        min-height: 100%;
    }
}


@media (min-width: 1024px) {

    .news-intro {
        padding-block:
            var(--space-16)
            var(--space-20);
    }

    .news-filter-strip {
        gap: var(--space-8);
    }

    .news-item {
        grid-template-columns:
            minmax(240px, 280px)
            minmax(0, 1fr);
        gap: var(--space-8);
    }

    .consultation {
        grid-template-columns:
            minmax(0, 1fr)
            auto;
    }

    .consultation__action {
        justify-content: flex-end;
    }
}


/* ==========================================================================
   12. Narrow Mobile
   ========================================================================== */

@media (max-width: 639.98px) {

    .news-intro {
        padding-block:
            var(--space-8)
            var(--space-12);
    }

    .featured-news__content {
        padding: var(--space-6);
    }

    .news-section-header {
        margin-bottom: var(--space-6);
    }

    .news-filter-panel {
        margin-inline-end:
            calc(-1 * var(--container-padding-inline));
    }

    .news-filter-strip {
        padding-inline-end: var(--container-padding-inline);
    }

    .news-item {
        padding-block: var(--space-6);
    }

    .news-pagination__link--direction {
        padding-inline: var(--space-3);
    }

    .consultation__action,
    .consultation__action .button {
        width: 100%;
    }
}


/* ==========================================================================
   13. Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    .news-filter,
    .news-item__title a,
    .featured-news__link,
    .featured-news__title a,
    .news-pagination__link {
        transition: none;
    }
}