/*
 * news.css — หน้าข่าวสาร (/news) · แบบ: temp/news_and_contact.png (ครึ่งบน, กว้าง 1920)
 * ใช้ร่วมจาก site.css: .zb-phero (ส่วนหัว), .zb-section-title, .zb-news / .zb-news-card (การ์ดข่าว)
 * mobile-first · ส่วนหัวตามแบบตั้งแต่ 1100px · การ์ดตามแบบตั้งแต่ 1280px (เหมือนหน้าแรก)
 */
.zb-main { display: block; overflow-x: clip; }

/* ======================================================= ส่วนหัว */
.zb-nhero { color: var(--zb-black); }
.zb-nhero__badge {
    display: inline-flex;
    width: max-content;
    align-items: center;
    gap: .35em;
    padding: 8px 18px 9px;
    border: 2px solid rgba(160, 190, 255, .9);
    border-radius: 999px;
    background: var(--zb-indigo);
    color: #fff;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: .06em;
    line-height: 1;
}
.zb-nhero__badge .zb-word { font-size: 1.12em; font-weight: 600; letter-spacing: .01em; }
.zb-nhero__title {
    margin-top: 14px;
    font-size: clamp(26px, 6.4vw, 40px);
    line-height: 1.3;
    font-weight: 500;
    letter-spacing: .01em;
}
.zb-nhero__title .zb-word { display: inline-flex; font-size: 1.16em; font-weight: 600; vertical-align: -.04em; }
.zb-nhero__lead { margin-top: 12px; color: var(--zb-ink); font-size: 16px; line-height: 1.55; letter-spacing: .02em; }
.zb-nhero__lead br { display: none; }
.zb-nhero__cats { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 18px; }
.zb-nhero__cats a { display: inline-flex; align-items: center; gap: 4px; color: #2b2b33; font-size: 14px; font-weight: 500; white-space: nowrap; }
.zb-nhero__cats img { width: 40px; height: auto; }
.zb-nhero__art { display: block; width: min(100%, 560px); height: auto; margin: 10px auto 0; }

/* ======================================================= ข่าวล่าสุด (slider) */
.zb-latest { position: relative; max-width: 960px; margin: 28px auto 0; padding: 0 12px; }
.zb-latest__viewport { overflow: hidden; }
.zb-latest__slide[hidden] { display: none; }
.zb-latest__slide a { display: block; }
.zb-latest__slide img { display: block; width: 100%; height: auto; }
.zb-latest__slide.is-enter { animation: zb-latest-in .45s var(--zb-ease); }
@keyframes zb-latest-in { from { opacity: 0; transform: translateX(var(--from, 24px)); } }
.zb-latest__arrow {
    position: absolute;
    top: 50%;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: #1d2a8f;
    box-shadow: 0 4px 14px rgba(20, 40, 120, .22);
    transform: translateY(-50%);
    cursor: pointer;
    z-index: 2;
}
.zb-latest__arrow svg { width: 60%; height: 60%; }
.zb-latest__arrow--prev { left: 0; }
.zb-latest__arrow--prev svg { transform: rotate(90deg); }
.zb-latest__arrow--next { right: 0; }
.zb-latest__arrow--next svg { transform: rotate(-90deg); }
.zb-latest__arrow:hover { color: var(--zb-indigo); }
.zb-latest:not(.is-multi) .zb-latest__arrow { display: none; }
.zb-latest__dots { display: flex; justify-content: center; gap: 14px; margin-top: 16px; }
.zb-latest__dot { width: 12px; height: 12px; padding: 0; border: 0; border-radius: 50%; background: #d9d9d9; cursor: pointer; }
.zb-latest__dot[aria-current="true"] { background: #b4b4b4; }

/* ======================================================= ข่าวสาร และ โปรโมชั่น (การ์ดจาก site.css) */
.zb-newspage .zb-news { padding: 48px 16px 56px; background: #fff; }

/* ======================================================= tablet */
@media (min-width: 600px) {
    .zb-nhero__lead br { display: inline; }
    .zb-nhero__cats img { width: 46px; }
    .zb-nhero__cats a { font-size: 15px; }
    .zb-latest { padding: 0 20px; }
    .zb-latest__arrow { width: 44px; height: 44px; }
}
@media (min-width: 900px) and (max-width: 1099.98px) {
    .zb-phero__stage { display: grid; grid-template-columns: 1.15fr 1fr; column-gap: 20px; align-items: end; padding: 110px 28px 0; }
    .zb-nhero__badge, .zb-nhero__title, .zb-nhero__lead, .zb-nhero__cats { grid-column: 1; justify-self: start; }
    .zb-nhero__art { grid-column: 2; grid-row: 1 / span 4; margin: 0; width: 100%; align-self: end; }
    .zb-nhero__lead br { display: none; }
    .zb-nhero__cats { margin-bottom: 36px; }
}

/* ======================================================= desktop: ส่วนหัวตามแบบ 1920 */
@media (min-width: 1100px) {
    .zb-nhero { height: calc(var(--u) * 683); }
    .zb-nhero .zb-phero__stage > * { margin: 0; }
    .zb-nhero__badge {
        left: calc(var(--u) * 192);
        top: calc(var(--u) * 236);
        width: calc(var(--u) * 273);
        height: calc(var(--u) * 65);
        justify-content: center;
        gap: calc(var(--u) * 13);
        padding: 0;
        border-width: max(1px, calc(var(--u) * 2));
        font-size: calc(var(--u) * 28);
        letter-spacing: .08em;
    }
    .zb-nhero__badge .zb-word { font-size: calc(var(--u) * 35); }
    .zb-nhero__title { left: calc(var(--u) * 190); top: calc(var(--u) * 306); white-space: nowrap; font-size: calc(var(--u) * 42.5); line-height: calc(var(--u) * 64); letter-spacing: 0; }
    .zb-nhero__title .zb-word { margin-left: 0; font-size: calc(var(--u) * 54); vertical-align: -.02em; }
    .zb-nhero__lead { left: calc(var(--u) * 191); top: calc(var(--u) * 387); white-space: nowrap; font-size: calc(var(--u) * 30); line-height: calc(var(--u) * 39); letter-spacing: .025em; }
    .zb-nhero__lead br { display: inline; }
    .zb-nhero__cats { left: calc(var(--u) * 185); top: calc(var(--u) * 491); flex-wrap: nowrap; gap: 0 calc(var(--u) * 15); }
    .zb-nhero__cats a { gap: calc(var(--u) * 5); font-size: calc(var(--u) * 19); letter-spacing: 0; }
    .zb-nhero__cats img { width: calc(var(--u) * 52); }
    .zb-nhero__art { left: calc(var(--u) * 1098); top: calc(var(--u) * 185); width: calc(var(--u) * 746); max-width: none; }

    /* slider: ภาพวางตรงพิกัดแบบ (x 96, y 736 → ห่างส่วนหัว 53) */
    .zb-latest { width: calc(var(--u) * 1714); max-width: none; margin: calc(var(--u) * 53) 0 0 calc(50% - var(--u) * 864); padding: 0; }
    .zb-latest__arrow { width: calc(var(--u) * 70); height: calc(var(--u) * 70); min-width: 36px; min-height: 36px; }
    .zb-latest__arrow--prev { left: calc(var(--u) * -31); }
    .zb-latest__arrow--next { right: calc(var(--u) * -31); }
    .zb-latest__dots { gap: calc(var(--u) * 37); margin-top: calc(var(--u) * 28); }
    .zb-latest__dot { width: calc(var(--u) * 20); height: calc(var(--u) * 20); min-width: 10px; min-height: 10px; }
}
@media (min-width: 1280px) {
    .zb-newspage .zb-news { padding: calc(var(--u) * 108) 0 calc(var(--u) * 75); }
}

/* ======================================================= โหมดภาษาอังกฤษ (Google Translate) */
@media (min-width: 1100px) {
    .translated-ltr .zb-nhero__title { font-size: calc(var(--u) * 44); }
    .translated-ltr .zb-nhero__title .zb-word { margin-left: .3em; }
    .translated-ltr .zb-nhero__lead { white-space: normal; width: calc(var(--u) * 880); font-size: calc(var(--u) * 25); line-height: 1.4; letter-spacing: .01em; }
    .translated-ltr .zb-nhero__lead br { display: none; }
    .translated-ltr .zb-nhero__cats a { font-size: calc(var(--u) * 18); letter-spacing: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .zb-latest__slide.is-enter { animation: none; }
}