.home-news { background:#f6faf9; color:#193c36; font-family:'Noto Sans Thai',sans-serif; line-height:1.75; padding-block:56px; scroll-margin-top:110px; }
.home-news *, .home-news *::before, .home-news *::after { box-sizing:border-box; }
.home-news ::selection { background:#e8f4f0; color:#193c36; }
.home-news .hn-heading { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:28px; }
.home-news .hn-pill { display:inline-block; padding:4px 14px; border-radius:999px; background:#e8f4f0; color:#0f766e; font-size:13px; font-weight:600; }
.home-news h2 { margin:12px 0 8px; color:#193c36; font-size:clamp(26px,3vw,36px); font-weight:700; line-height:1.4; }
.home-news .hn-heading p { margin:0; color:#375e57; font-size:15px; }
.home-news a { color:#0f766e; text-decoration:none; }
.home-news .hn-all { display:inline-flex; align-items:center; justify-content:center; gap:10px; flex:none; min-height:44px; padding:10px 20px; border:1px solid #e1eeea; border-radius:999px; background:#ffffff; font-size:14px; font-weight:600; }
.home-news .hn-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; margin:0; padding:0; list-style:none; }
.home-news .hn-slot { min-width:0; }
.home-news .hn-slot:first-child { grid-column:1/-1; }
.home-news .hn-card { display:flex; flex-direction:column; height:100%; padding:10px; border:1px solid #e1eeea; border-radius:24px; background:#ffffff; box-shadow:0 4px 20px rgba(15,118,110,.07); transition:transform .35s,box-shadow .35s; }
.home-news .hn-media { position:relative; flex:none; display:grid; place-items:center; aspect-ratio:16/9; border-radius:18px; overflow:hidden; background:#f0f8f6; color:#0f766e; }
.home-news .hn-placeholder { position:absolute; }
.home-news .hn-media img { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:contain; }
.home-news .hn-media img:not(.hn-backdrop) { z-index:1; }
.home-news .hn-media .hn-backdrop { object-fit:cover; filter:blur(20px); transform:scale(1.15); opacity:.65; }
.home-news .hn-new { z-index:2; }
.home-news .hn-new { position:absolute; top:16px; left:16px; padding:4px 12px; border-radius:999px; background:#e8f4f0; color:#0f766e; font-size:13px; font-weight:700; }
.home-news .hn-body { display:flex; flex-direction:column; align-items:flex-start; flex:1; min-width:0; padding:16px 8px 8px; }
.home-news .hn-date { display:inline-flex; align-items:center; flex-wrap:wrap; gap:7px; max-width:100%; padding:4px 10px; border-radius:999px; background:#e8f4f0; color:#375e57; font-size:12px; }
.home-news .hn-date svg { flex:none; color:#0f766e; }
.home-news h3 { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; overflow-wrap:anywhere; margin:12px 0 16px; color:#193c36; font-size:17px; font-weight:600; line-height:1.75; }
.home-news .hn-detail { display:inline-flex; align-items:center; gap:8px; min-height:44px; margin-top:auto; font-size:14px; font-weight:600; }
.home-news .hn-detail svg { flex:none; transition:transform .35s; }
.home-news .hn-detail:hover svg { transform:translateX(4px); }
.home-news .hn-unavailable { margin-top:auto; padding-block:10px; color:#375e57; font-size:13px; }
.home-news .hn-feature { flex-direction:row; padding:0; border-radius:28px; overflow:hidden; }
.home-news .hn-feature .hn-media { width:55%; aspect-ratio:16/10; align-self:stretch; border-radius:0; }
.home-news .hn-feature .hn-body { justify-content:center; padding:32px; }
.home-news .hn-feature .hn-date { font-size:13px; }
.home-news .hn-feature h3 { margin-block:16px 24px; font-size:clamp(28px,2.4vw,30px); font-weight:700; line-height:1.4; -webkit-line-clamp:3; }
.home-news .hn-feature .hn-detail { margin-top:0; padding:10px 20px; border-radius:999px; background:#0f766e; color:#ffffff; }
.home-news .hn-state { margin:0; padding:28px; background:#ffffff; border:1px solid #e1eeea; border-radius:24px; color:#375e57; }
.home-news a:focus-visible { outline:3px solid #0f766e; outline-offset:4px; }
.activities-page .home-news { padding:0; background:transparent; }
.activities-page .home-news > .wrap { width:100%; max-width:none; padding:0; }
.activities-page .hn-heading { display:none; }
@media(hover:hover) {
  .home-news .hn-card:hover { transform:translateY(-4px); box-shadow:0 8px 24px rgba(15,118,110,.12); }
  .home-news .hn-all:hover { background:#e8f4f0; }
}
.hn-viewer { width:min(1040px,calc(100% - 32px)); max-height:calc(100dvh - 32px); margin:auto; padding:24px; border:1px solid #e1eeea; border-radius:24px; background:#ffffff; color:#193c36; font-family:'Noto Sans Thai',sans-serif; line-height:1.75; box-shadow:0 16px 48px rgba(15,118,110,.16); overflow:auto; overscroll-behavior:contain; }
.hn-viewer::backdrop { background:rgba(25,60,54,.6); }
.hn-viewer-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:20px; }
.hn-viewer-head > div { min-width:0; }
.hn-viewer h2 { margin:0; font-size:clamp(20px,2.3vw,28px); line-height:1.6; overflow-wrap:anywhere; }
.hn-viewer-date { margin:8px 0 0; color:#375e57; font-size:14px; }
.hn-viewer-close { display:grid; place-items:center; flex:none; width:44px; height:44px; padding:0; border:1px solid #e1eeea; border-radius:999px; background:#e8f4f0; color:#0f766e; cursor:pointer; }
.hn-viewer-media { position:relative; isolation:isolate; overflow:hidden; display:grid; place-items:center; padding:12px; border-radius:16px; background:#f0f8f6; }
.hn-viewer-media::before { content:''; position:absolute; inset:0; background:var(--hn-viewer-image,none) center/cover no-repeat; filter:blur(20px); transform:scale(1.15); opacity:.65; pointer-events:none; }
.hn-viewer-media img { position:relative; z-index:1; display:block; max-width:100%; width:auto; height:auto; max-height:70dvh; object-fit:contain; }
.hn-viewer-status { margin:0 0 16px; color:#375e57; }
.hn-viewer-close:focus-visible { outline:3px solid #0f766e; outline-offset:3px; }
html:has(.hn-viewer[open]), body:has(.hn-viewer[open]) { overflow:hidden; overscroll-behavior:none; }
html:has(.hn-viewer[open]) { scrollbar-gutter:stable; }
@media(max-width:600px) { .hn-viewer { padding:16px; border-radius:20px; } .hn-viewer-media { padding:8px; } }
@media(max-width:1024px) {
  .home-news .hn-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .home-news .hn-feature .hn-body { padding:24px; }
}
@media(max-width:600px) {
  .home-news { padding-block:36px; }
  .home-news .hn-heading { align-items:flex-start; flex-direction:column; gap:18px; }
  .home-news .hn-grid { grid-template-columns:1fr; }
  .home-news .hn-feature { flex-direction:column; }
  .home-news .hn-feature .hn-media { width:100%; align-self:stretch; }
  .home-news .hn-feature .hn-body { padding:24px; }
}
/* Style queries start timed, staggered reveals only when each card enters view. */
@property --hn-entered { syntax:'<integer>'; initial-value:0; inherits:true; }
@keyframes hn-visible { to { --hn-entered:1; } }
@keyframes hn-reveal { from { opacity:0; translate:0 20px; } to { opacity:1; translate:0 0; } }
@supports (animation-timeline:view()) {
  @media(prefers-reduced-motion:no-preference) {
    .home-news .hn-slot { container-name:hn-reveal; animation:hn-visible 1s steps(1,end) both; animation-timeline:view(); animation-range:entry 0% entry 10%; }
    @container hn-reveal style(--hn-entered:0) { .home-news .hn-card { opacity:0; translate:0 20px; } }
    @container hn-reveal style(--hn-entered:1) { .home-news .hn-card { animation:hn-reveal .45s cubic-bezier(.22,1,.36,1) var(--hn-delay) both; } }
    .home-news .hn-slot:focus-within .hn-card { animation:none; opacity:1; translate:0 0; }
  }
}
@media(prefers-reduced-motion:reduce) {
  .home-news .hn-card, .home-news .hn-media img, .home-news .hn-detail svg { transition:none; }
  .home-news .hn-card:hover, .home-news .hn-card:hover img, .home-news .hn-detail:hover svg { transform:none; }
}