/*
 * Page CSS: articles.html
 * Scope owner: article listing page only
 * Add page-specific overrides after legacy/shared naphat-home.css.
 */

body[data-ds-page-source="articles.html"] .nph-article-list-grid {
    align-items: stretch;
    grid-auto-rows: 1fr;
}

body[data-ds-page-source="articles.html"] .nph-article-card {
    height: 100%;
}

body[data-ds-page-source="articles.html"] .nph-article-card h3 {
    margin-bottom: 18px;
}

body[data-ds-page-source="articles.html"] .nph-article-read {
    margin-top: auto;
}

body[data-ds-page-source="articles.html"] .nph-article-promo-card,
body[data-ds-page-source="articles.html"] .nph-article-promo-slider {
    aspect-ratio: 0.78 / 1;
}

body[data-ds-page-source="articles.html"] .nph-article-promo-slider,
body[data-ds-page-source="articles.html"] .nph-article-promo-slider .swiper-wrapper,
body[data-ds-page-source="articles.html"] .nph-article-promo-slider .swiper-slide {
    width: 100%;
    height: 100%;
}

body[data-ds-page-source="articles.html"] .nph-article-promo-slider .swiper-slide {
    overflow: hidden;
}

body[data-ds-page-source="articles.html"] .nph-article-promo-dots {
    z-index: 3;
}

body[data-ds-page-source="articles.html"] .nph-article-promo-dots span {
    cursor: pointer;
    transition: background-color .2s ease, transform .2s ease;
}

body[data-ds-page-source="articles.html"] .nph-article-promo-dots span.is-active {
    transform: scale(1.12);
}