/* ═══════════════════════════════════════════════════════════════════
   DWR News v2 — Composition renderer styles
   Modes: featured | carousel | grid | search-grid
   Themes: dark | light | photo | white   ·   WCAG AAA (tokens from dwr-shared)
   ─────────────────────────────────────────────────────────────────── */

.dwr-news2 {
  --n2-accent:       var(--dwr-fe-primary, #1565C0);
  --n2-accent-dark:  var(--dwr-fe-primary-strong, #0D47A1);
  --n2-card-bg:      #ffffff;
  --n2-card-border:  var(--dwr-fe-border, #c8d4e0);
  --n2-heading:      var(--dwr-fe-text-heading, #1A1A1A);
  --n2-body:         var(--dwr-fe-text-body, #424242);
  --n2-muted:        var(--dwr-fe-text-meta, #5E5E5E);
  --n2-sec-heading:  var(--dwr-fe-text-heading, #1A1A1A);   /* section title color (overridden per theme) */
  --n2-sec-sub:      var(--dwr-fe-text-body, #424242);
  --n2-radius:       16px;
  --n2-shadow:       0 10px 30px -12px rgba(13,71,161,.16);

  position: relative;
  /* ไม่กำหนดความกว้างเอง (direction #1): ไหลเต็ม แล้ว client ครอบผ่าน Page editor */
  margin: 40px 0;
  padding: 44px 28px 40px;
  border-radius: var(--n2-radius);
  font-family: var(--dwr-fe-font, 'Prompt','Kanit','Sarabun',sans-serif);
  color: var(--n2-body);
  line-height: 1.6;
}

/* ── Themes ── */
.dwr-news2--theme-light {
  background: linear-gradient(135deg, #eaf3ff 0%, #dceaff 100%);
}
.dwr-news2--theme-dark {
  background: linear-gradient(135deg, #14507e 0%, #1a5276 55%, #123f5e 100%);
  --n2-sec-heading: #ffffff;
  --n2-sec-sub: #e3eef7;
}
.dwr-news2--theme-white {
  background: #ffffff;
}
/* DWO11-34: ธีมไม่มีพื้นหลัง — ปล่อยโปร่ง ให้พื้นหลังของหน้า/template โชว์ผ่าน
   ตัดระยะขอบในตัวออกด้วย เพราะไม่มีพื้นสีให้ต้องเว้นขอบแล้ว */
.dwr-news2--theme-none {
  background: none;
  padding: 0;
  border-radius: 0;
}
.dwr-news2--theme-photo {
  background-size: cover;
  background-position: center;
  --n2-sec-heading: #ffffff;
  --n2-sec-sub: #f1f5f9;
}
.dwr-news2--theme-photo::before {
  content: ""; position: absolute; inset: 0; border-radius: var(--n2-radius);
  background: linear-gradient(180deg, rgba(15,40,70,.35), rgba(15,40,70,.55));
  pointer-events: none;
}
.dwr-news2--theme-photo > * { position: relative; z-index: 1; }

/* ── Heading ── */
.dwr-news2-head { margin-bottom: 26px; }
.dwr-news2-head--center { text-align: center; }
.dwr-news2-head--left-bar { text-align: left; border-left: 5px solid var(--n2-accent); padding-left: 14px; }
.dwr-news2-title {
  margin: 0 0 6px; font-size: 1.875rem; font-weight: 700;
  color: var(--n2-sec-heading); line-height: 1.25;
}
.dwr-news2-title-accent { color: var(--n2-accent); }
.dwr-news2--theme-dark .dwr-news2-title-accent,
.dwr-news2--theme-photo .dwr-news2-title-accent { color: #7dd3fc; }
.dwr-news2-subtitle { margin: 0; font-size: 1rem; color: var(--n2-sec-sub); }

/* ── Tabs ── */
.dwr-news2-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.dwr-news2-tabs[hidden] { display: none; }
.dwr-news2-tab {
  font-family: inherit; font-size: .95rem; font-weight: 600; cursor: pointer;
  color: var(--n2-sec-heading); background: transparent; border: 0;
  padding: 10px 22px; border-radius: 999px; transition: all .18s;
}
/* pill */
.dwr-news2-tabs--pill { background: rgba(255,255,255,.6); padding: 8px; border-radius: 999px; backdrop-filter: blur(4px); justify-content: center; }
.dwr-news2--theme-dark .dwr-news2-tabs--pill,
.dwr-news2--theme-photo .dwr-news2-tabs--pill { background: rgba(255,255,255,.12); }
.dwr-news2-tabs--pill .dwr-news2-tab { color: var(--n2-heading); }
.dwr-news2--theme-dark .dwr-news2-tabs--pill .dwr-news2-tab,
.dwr-news2--theme-photo .dwr-news2-tabs--pill .dwr-news2-tab { color: #fff; }
.dwr-news2-tabs--pill .dwr-news2-tab.is-active {
  background: var(--n2-accent); color: #fff; box-shadow: 0 3px 10px rgba(13,71,161,.3);
}
/* underline */
.dwr-news2-tabs--underline { gap: 28px; border-bottom: 1px solid var(--n2-card-border); justify-content: flex-start; }
.dwr-news2-tabs--underline .dwr-news2-tab {
  border-radius: 0; padding: 10px 4px 14px; position: relative; color: var(--n2-muted);
}
.dwr-news2-tabs--underline .dwr-news2-tab.is-active { color: var(--n2-heading); }
.dwr-news2-tabs--underline .dwr-news2-tab.is-active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px;
  background: linear-gradient(90deg, #f59e0b, var(--n2-accent)); border-radius: 3px;
}

/* ── Body / states ── */
.dwr-news2-loading, .dwr-news2-empty { text-align: center; padding: 48px 16px; color: var(--n2-sec-sub); }
.dwr-news2-empty span { font-size: 2rem; display: block; margin-bottom: 8px; }
.dwr-news2-count { font-size: .9rem; color: var(--n2-sec-sub); margin-bottom: 14px; }

/* ── Grid ── */
.dwr-news2-grid { display: grid; gap: 22px; }
.dwr-news2-cols-2 { grid-template-columns: repeat(2, 1fr); }
.dwr-news2-cols-3 { grid-template-columns: repeat(3, 1fr); }
.dwr-news2-cols-4 { grid-template-columns: repeat(4, 1fr); }

/* ── Card (shared) ──
   DWO11-34: เอาเงาออก ใช้เส้นขอบแทน · สีเส้นเลือกได้ต่อบล็อกที่หน้าตั้งค่า
   (--n2-card-border ฉีดเป็น inline style จาก shortcode · ว่าง = สีเริ่มต้น) */
.dwr-news2-card {
  background: var(--n2-card-bg); border-radius: 14px; overflow: hidden;
  border: 1px solid var(--n2-card-border);
  box-shadow: none;
  display: flex; flex-direction: column;
  transition: transform .18s, border-color .18s;
}
.dwr-news2-card:hover { transform: translateY(-4px); border-color: var(--n2-accent); }
.dwr-news2-card-img { aspect-ratio: 16/10; overflow: hidden; background: #dbeafe; }
.dwr-news2-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dwr-news2-card-body { padding: 16px 18px 18px; display: flex; flex-direction: column; flex: 1; }
.dwr-news2-card-cat {
  align-self: flex-start; font-size: 12px; font-weight: 700; color: var(--n2-accent-dark);
  background: var(--dwr-fe-primary-tint, #E3F2FD); padding: 3px 10px; border-radius: 999px; margin-bottom: 8px;
}
.dwr-news2-card-title { margin: 0 0 8px; font-size: 1.05rem; font-weight: 700; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dwr-news2-card-title a { color: var(--n2-heading); text-decoration: none; }
.dwr-news2-card-title a:hover { color: var(--n2-accent); text-decoration: underline; }
.dwr-news2-card-desc { margin: 0 0 12px; font-size: .92rem; color: var(--n2-body);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dwr-news2-card-meta { display: flex; flex-wrap: wrap; gap: 12px; font-size: 13px; font-weight: 600;
  color: var(--n2-muted); margin-top: auto; }
.dwr-news2-card-date { display: inline-flex; align-items: center; gap: 5px; }
.dwr-news2-card-date svg { color: var(--n2-accent); }
/* DWO11-34: ล็อกสีลิงก์ "อ่านเพิ่มเติม" ทุกสถานะเป็นสีแบรนด์
   (ธีมของเว็บมี a:hover สีส้ม — เขียนครบทุก state กันไม่ให้หลุดไปโดน) */
.dwr-news2-card-link,
.dwr-news2-card-link:link,
.dwr-news2-card-link:visited { margin-top: 12px; align-self: flex-start; font-size: .92rem; font-weight: 700;
  color: var(--n2-accent); text-decoration: underline; text-underline-offset: 3px; }
.dwr-news2-card-link:hover,
.dwr-news2-card-link:focus,
.dwr-news2-card-link:focus-visible,
.dwr-news2-card-link:active { color: var(--n2-accent-dark); }

/* card: minimal */
.dwr-news2-card--minimal .dwr-news2-card-body { padding: 14px 16px 16px; }
.dwr-news2-card--minimal .dwr-news2-card-date { font-size: 13px; color: var(--n2-muted); font-weight: 600; margin-bottom: 6px; }
.dwr-news2-card--minimal .dwr-news2-card-title { -webkit-line-clamp: 3; margin: 0; }

/* card: arrow */
.dwr-news2-card--arrow .dwr-news2-card-foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; gap: 10px; }
.dwr-news2-card-arrow {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; display: inline-flex;
  align-items: center; justify-content: center; background: var(--dwr-fe-primary-tint, #E3F2FD);
  color: var(--n2-accent-dark);
}
.dwr-news2-card-arrow:hover { background: var(--n2-accent); color: #fff; }

/* card: document (procurement) */
.dwr-news2-card--document .dwr-news2-card-foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; gap: 10px; }
.dwr-news2-btn-doc {
  flex-shrink: 0; font-size: 13px; font-weight: 700; color: #fff !important; background: var(--n2-accent);
  padding: 7px 16px; border-radius: 999px; text-decoration: underline; text-underline-offset: 2px;
}
.dwr-news2-btn-doc:hover { background: var(--n2-accent-dark); }

/* ── Section CTA ── */
.dwr-news2-actions { text-align: center; margin-top: 28px; }
/* DWO11-34: ปุ่ม "ดูทั้งหมด" — ใช้สไตล์เดียวกับปุ่มของ dwr-calendar/dwr-gallery
   (#0068C9 · pill · weight 600 · ไม่มีขีดเส้นใต้) และล็อกสี hover ไม่ให้ธีมยัดสีส้มมา */
.dwr-news2-viewall,
.dwr-news2-viewall:link,
.dwr-news2-viewall:visited {
  display: inline-block; padding: 13px 44px; border-radius: 999px;
  font-weight: 600; font-size: 1rem;
  color: #fff !important; background: #0068C9;
  text-decoration: none !important;
  box-shadow: 0 8px 18px -6px rgba(0,0,0,.28);
  transition: filter .2s, transform .15s;
}
.dwr-news2-viewall:hover,
.dwr-news2-viewall:focus,
.dwr-news2-viewall:focus-visible,
.dwr-news2-viewall:active {
  color: #fff !important; background: #0068C9;
  filter: brightness(.88); transform: translateY(-1px);
  text-decoration: none !important;
}

/* ── Slider (featured + carousel) ── */
.dwr-news2-slider { position: relative; }
.dwr-news2-track {
  display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  -ms-overflow-style: none; scrollbar-width: none; padding: 4px;
}
.dwr-news2-track::-webkit-scrollbar { display: none; }
.dwr-news2-slide { scroll-snap-align: start; flex: 0 0 100%; }
.dwr-news2--mode-carousel .dwr-news2-cols-2 .dwr-news2-slide,
.dwr-news2--mode-carousel .dwr-news2-slide { } /* set per perview below */

/* carousel cards-per-view via data-perview (set inline width fallback) */
.dwr-news2-slider[data-perview="2"] .dwr-news2-slide { flex: 0 0 calc((100% - 22px) / 2); }
.dwr-news2-slider[data-perview="3"] .dwr-news2-slide { flex: 0 0 calc((100% - 44px) / 3); }
.dwr-news2-slider[data-perview="4"] .dwr-news2-slide { flex: 0 0 calc((100% - 66px) / 4); }

.dwr-news2-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--n2-card-border);
  background: #fff; color: var(--n2-accent); font-size: 24px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(0,0,0,.12);
}
.dwr-news2-arrow:hover { background: var(--n2-accent); color: #fff; }
.dwr-news2-arrow--prev { left: -10px; }
.dwr-news2-arrow--next { right: -10px; }

.dwr-news2-dots { display: flex; justify-content: center; gap: 8px; margin-top: 20px; }
.dwr-news2-dot { width: 9px; height: 9px; border-radius: 999px; border: 0; padding: 0; cursor: pointer;
  background: rgba(13,71,161,.25); transition: all .2s; }
.dwr-news2--theme-dark .dwr-news2-dot, .dwr-news2--theme-photo .dwr-news2-dot { background: rgba(255,255,255,.4); }
.dwr-news2-dot.is-active { width: 26px; background: var(--n2-accent); }
.dwr-news2--theme-dark .dwr-news2-dot.is-active, .dwr-news2--theme-photo .dwr-news2-dot.is-active { background: #fff; }

/* ── Featured card ── */
.dwr-news2-feat {
  display: grid; grid-template-columns: minmax(0, 46%) 1fr; gap: 32px; align-items: center;
  background: var(--n2-card-bg); border-radius: var(--n2-radius); box-shadow: var(--n2-shadow); padding: 22px;
}
.dwr-news2-feat-img { border-radius: 12px; overflow: hidden; aspect-ratio: 4/3; background: #dbeafe; }
.dwr-news2-feat-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dwr-news2-feat-img--ph { display: flex; align-items: center; justify-content: center; color: var(--n2-accent); opacity: .5; }
.dwr-news2-feat-img--ph svg { width: 72px; height: 72px; }
.dwr-news2-feat-body { padding: 8px 8px 8px 0; }
.dwr-news2-feat-title { margin: 8px 0 10px; font-size: 1.5rem; font-weight: 700; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.dwr-news2-feat-title a { color: var(--n2-heading); text-decoration: none; }
.dwr-news2-feat-title a:hover { color: var(--n2-accent); text-decoration: underline; }
.dwr-news2-feat-date { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600;
  color: var(--n2-accent-dark); margin: 0 0 12px; }
.dwr-news2-feat-desc { margin: 0 0 18px; color: var(--n2-body); font-size: 1rem; line-height: 1.7;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.dwr-news2-btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 11px 26px; border-radius: 999px;
  font-weight: 700; font-size: .95rem; color: #fff !important; background: var(--n2-accent);
  text-decoration: underline; text-underline-offset: 3px; box-shadow: 0 6px 16px rgba(13,71,161,.28);
}
.dwr-news2-btn:hover { background: var(--n2-accent-dark); }

/* ── Search-grid ── */
.dwr-news2-sg-bar { background: var(--n2-card-bg); border: 1px solid var(--n2-card-border); border-radius: 14px;
  padding: 16px; margin-bottom: 20px; display: flex; flex-direction: column; gap: 12px; }
.dwr-news2-sg-search { display: flex; gap: 10px; }
.dwr-news2-sg-search input { flex: 1; padding: 11px 14px; border: 1px solid var(--n2-card-border);
  border-radius: 8px; font-family: inherit; font-size: .95rem; background: var(--dwr-fe-bg-soft, #f5f7fa); }
.dwr-news2-sg-search input:focus { outline: none; border-color: var(--n2-accent); background: #fff; box-shadow: 0 0 0 3px rgba(21,101,192,.12); }
.dwr-news2-btn-sm { padding: 0 22px; border: 0; border-radius: 8px; background: var(--n2-accent); color: #fff;
  font-family: inherit; font-weight: 700; font-size: .92rem; cursor: pointer; }
.dwr-news2-btn-sm:hover { background: var(--n2-accent-dark); }
.dwr-news2-sg-filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.dwr-news2-sg-filters select, .dwr-news2-sg-filters input[type="date"] {
  padding: 10px 12px; border: 1px solid var(--n2-card-border); border-radius: 8px; font-family: inherit;
  font-size: .9rem; background: var(--dwr-fe-bg-soft, #f5f7fa); color: var(--n2-body); min-width: 160px;
}
.dwr-news2-sg-filters select:focus, .dwr-news2-sg-filters input[type="date"]:focus {
  outline: none; border-color: var(--n2-accent); box-shadow: 0 0 0 3px rgba(21,101,192,.12); }
.dwr-news2-sg-clear { margin-left: auto; background: none; border: 0; color: var(--n2-accent);
  font-family: inherit; font-weight: 700; font-size: .9rem; cursor: pointer; text-decoration: underline; }

/* ── Pagination ── */
.dwr-news2-pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 28px; }
.dwr-news2-pg { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px;
  padding: 0 6px; border-radius: 8px; border: 1px solid var(--n2-card-border); background: #fff;
  color: var(--n2-body); text-decoration: none; font-size: 14px; font-weight: 600; }
.dwr-news2-pg:hover { background: var(--dwr-fe-bg-soft, #eef2f6); }
.dwr-news2-pg.is-active { background: var(--n2-accent); color: #fff; border-color: var(--n2-accent); }
.dwr-news2-pg-gap { border-color: transparent; background: transparent; pointer-events: none; }

/* ── Focus (AAA) — local fallback (shared theme also covers .dwr-news2) ── */
.dwr-news2 :focus-visible { outline: 3px solid var(--n2-accent); outline-offset: 2px; border-radius: 4px; }

/* ── Responsive ── */
@media (max-width: 960px) {
  .dwr-news2-cols-3, .dwr-news2-cols-4 { grid-template-columns: repeat(2, 1fr); }
  .dwr-news2-slider[data-perview="3"] .dwr-news2-slide,
  .dwr-news2-slider[data-perview="4"] .dwr-news2-slide { flex: 0 0 calc((100% - 22px) / 2); }
  .dwr-news2-feat { grid-template-columns: 1fr; gap: 18px; }
  .dwr-news2-feat-title { font-size: 1.25rem; }
}
@media (max-width: 600px) {
  .dwr-news2 { padding: 30px 16px 32px; }
  .dwr-news2-cols-2, .dwr-news2-cols-3, .dwr-news2-cols-4 { grid-template-columns: 1fr; }
  .dwr-news2-slide,
  .dwr-news2-slider[data-perview="2"] .dwr-news2-slide,
  .dwr-news2-slider[data-perview="3"] .dwr-news2-slide,
  .dwr-news2-slider[data-perview="4"] .dwr-news2-slide { flex: 0 0 88%; }
  .dwr-news2--mode-featured .dwr-news2-slide { flex: 0 0 100%; }
  .dwr-news2-arrow { display: none; }
  .dwr-news2-title { font-size: 1.4rem; }
  .dwr-news2-sg-clear { margin-left: 0; }
}