/* ═══════════════════════════════════════════════════
   DWR Gallery Manager — Frontend (image + video carousel + modal)
   ไม่กำหนด max-width เอง — ไหลเต็มความกว้าง (page wrapper คุมเอง)
   ═══════════════════════════════════════════════════ */

.dwr-gal {
  --_p: var(--dwr-fe-primary, #0152A2);
  --_ink: #182230;
  --_muted: #667085;
  --_card-bg: #fff;
  --_radius: 16px;
  --_shadow: 0 10px 30px rgba(1, 82, 162, .08);
  --_cols: 4;
  --_gap: 22px;
  font-family: inherit;
  width: 100%;
  box-sizing: border-box;
}
.dwr-gal *, .dwr-gal *::before, .dwr-gal *::after { box-sizing: border-box; }

/* ── หัวข้อ ── */
.dwr-gal__head { text-align: center; margin: 0 0 28px; }
.dwr-gal__title { margin: 0; font-size: 26px; font-weight: 600; color: var(--_ink); line-height: 1.3; }
.dwr-gal__subtitle { margin: 8px 0 0; font-size: 18px; font-weight: 400; color: var(--_muted); }

/* ── viewport + nav ── */
.dwr-gal__viewport { display: flex; align-items: center; gap: 12px; max-width: var(--_vpw, 100%); margin-top: var(--_margin-top, 0); margin-left: auto; margin-right: auto; }
.dwr-gal__track {
  list-style: none; margin: 0; padding: 6px 4px 12px;
  flex: 1 1 auto; min-width: 0;
  display: flex; column-gap: var(--_gap); row-gap: var(--_vertical-gap, 0);
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none;
}
.dwr-gal__track::-webkit-scrollbar { display: none; }
.dwr-gal__card {
  flex: 0 0 auto; scroll-snap-align: start;
  background: var(--_card-bg); border-radius: var(--_radius);
  box-shadow: var(--_shadow); overflow: hidden; cursor: pointer;
  transition: transform .2s, box-shadow .2s;
}
.dwr-gal__card:hover { transform: translateY(-4px); box-shadow: 0 16px 38px rgba(1, 82, 162, .16); }
.dwr-gal__card:focus-visible { outline: 3px solid var(--_p); outline-offset: 2px; }

/* nav ปุ่มกลม 2 ข้าง */
.dwr-gal__nav {
  flex: 0 0 auto; z-index: 3;
  width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: var(--dwr-gallery-nav-background, #0152A2); color: #fff; font-size: 18px; line-height: 1;
  cursor: pointer; box-shadow: 0 6px 16px rgba(1, 82, 162, .3);
  display: flex; align-items: center; justify-content: center;
  transition: background .2s, transform .15s;
}
.dwr-gal__nav:hover { transform: scale(1.08); }
.dwr-gal__nav:focus-visible { outline: 3px solid var(--dwr-gallery-nav-background, #0152A2); outline-offset: 3px; }
.dwr-gal__nav[disabled] { opacity: .3; cursor: default; }

/* ── การ์ดรูป (ภาพกิจกรรม) — poster เต็มใบ ── */
.dwr-gal__icard { width: var(--_iw, calc((100% - (var(--_cols) - 1) * var(--_gap)) / var(--_cols))); }
.dwr-gal__poster { display: block; width: 100%; aspect-ratio: var(--_ratio, 3 / 4); background-size: var(--_fit, cover); background-position: center; background-repeat: no-repeat; }
.dwr-gal__ibody { display: block; padding: 16px 18px 20px; }
.dwr-gal__icaption { display: -webkit-box; overflow: hidden; color: var(--_ink); font-size: 16px; font-weight: 600; line-height: 1.4; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }

/* ── การ์ดวิดีโอ (เกร็ดความรู้) ── */
.dwr-gal__vcard { width: var(--_iw, calc((100% - (var(--_cols) - 1) * var(--_gap)) / var(--_cols))); display: flex; flex-direction: column; }
.dwr-gal__thumb {
  display: block; width: 100%; aspect-ratio: var(--_ratio, 16 / 9);
  background-size: var(--_fit, cover); background-position: center; background-color: transparent;
  position: relative;
}
.dwr-gal__play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 54px; height: 54px; border-radius: 50%;
  background: rgba(255, 255, 255, .9); box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
}
.dwr-gal__play::before {
  content: ""; position: absolute; top: 50%; left: 54%; transform: translate(-50%, -50%);
  border-style: solid; border-width: 9px 0 9px 15px; border-color: transparent transparent transparent var(--_p);
}
.dwr-gal__vbody { padding: 24px 24px 40px 24px; display: flex; flex-direction: column; gap: 8px; }
.dwr-gal__vtitle { font-size: 16px; font-weight: 600; color: var(--_ink); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* ปุ่ม "Digital" (label) — ตาม Figma: fill #E0EEFE, border 1px #7BC1FE, text #0068C9 (weight 400), pad 4/13, gap 10, icon 26px, สูงรวม 34px */
.dwr-gal__label {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 10px;
  padding: 4px 13px; border: 1px solid #7BC1FE; border-radius: 20px;
  background: #E0EEFE; color: #0068C9;
  font-size: 15px; font-weight: 400; line-height: 1; order: 2;
}
.dwr-gal__label-ico { flex: 0 0 26px; width: 26px; height: 26px; display: block; }
.dwr-gal__label-txt { display: block; }
.dwr-gal__vtitle { order: 1; }

/* ── Hero (item เด่นใหญ่ แนวนอน) — ตาม design "ไม่ใช่การ์ด": เฉพาะ "รูป" เป็นการ์ดมุมโค้ง+เงา · หัวข้อ/คำอธิบาย/ปุ่ม ลอยบนพื้น section (ไม่มีกล่องขาวครอบทั้งก้อน) ── */
/* herowrap = โครงเดียวกับ .dwr-gal__viewport (flex + spacer 44px คร่อม = กว้างเท่าลูกศร) → hero align กับ track ของ carousel เป๊ะทุกกรณี (บีบ/ไม่บีบ) */
.dwr-gal__herowrap { display: flex; gap: 12px; max-width: var(--_vpw, 100%); margin: 0 auto 30px; }
.dwr-gal__herowrap::before, .dwr-gal__herowrap::after { content: ""; flex: 0 0 44px; }
.dwr-gal__featured { flex: 1; min-width: 0; display: grid; gap: 30px; }
.dwr-gal--featured-span .dwr-gal__featured { padding-inline: 4px; box-sizing: border-box; }
@media (min-width: 768px) {
  .dwr-gal--featured-span .dwr-gal__hero { gap: var(--_featured-gap, 16px); }
  .dwr-gal--featured-span .dwr-gal__hero-media { flex-basis: var(--_featured-span, 66.666%); }
  .dwr-gal--featured-span .dwr-gal__featured--stack .dwr-gal__hero { flex-direction: column; align-items: stretch; }
  .dwr-gal--featured-span .dwr-gal__featured--stack .dwr-gal__hero-media { flex-basis: auto; }
}
@media (min-width: 768px) {
  .dwr-gal__featured--right .dwr-gal__hero { flex-direction: row-reverse; }
}
/* hero ยืม class .dwr-gal__card + .dwr-gal__(v|i)card ให้ JS click → ต้องล้าง look การ์ด (bg ขาว/เงา/มุม/overflow/hover ของ .dwr-gal__card) + flex:1 ทับ .dwr-gal__card{flex:0 0 auto} + width:100% ทับ col-width ของ (v|i)card */
.dwr-gal__hero { display: flex; flex: 1 1 auto; flex-direction: row; width: 100%; align-items: center; gap: 40px; background: transparent; box-shadow: none; border-radius: 0; overflow: visible; cursor: pointer; text-align: left; }
.dwr-gal__hero:hover { transform: none; box-shadow: none; }
/* คลิก/โฟกัส: ไม่เอา outline รอบทั้งก้อน (โปร่ง) ของ .dwr-gal__card — ให้ ring อยู่ที่รูปเท่านั้น (คง a11y คีย์บอร์ด) */
.dwr-gal__hero:focus, .dwr-gal__hero:focus-visible { outline: none; }
.dwr-gal__hero:focus-visible .dwr-gal__hero-media { outline: 3px solid var(--_p); outline-offset: 2px; }
/* การ์ด = เฉพาะรูป · --_hw = ขนาด px จาก admin (min กับจอ), ไม่ตั้ง = clamp responsive · --_hr = สัดส่วน w/h */
.dwr-gal__hero-media { flex: 0 0 var(--_hw, clamp(280px, 44%, 560px)); max-width: 100%; display: block; position: relative; border-radius: var(--_radius); box-shadow: var(--_shadow); overflow: hidden; transition: transform .2s, box-shadow .2s; }
.dwr-gal__hero:hover .dwr-gal__hero-media { transform: translateY(-3px); box-shadow: 0 16px 38px rgba(1, 82, 162, .16); }
.dwr-gal__hero .dwr-gal__poster, .dwr-gal__hero .dwr-gal__thumb { width: 100%; aspect-ratio: var(--_hr, 16 / 9); }
.dwr-gal__hero-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 16px; padding: 0; }
.dwr-gal__hero .dwr-gal__label { order: 3; }
.dwr-gal__hero-title { font-size: 22px; font-weight: 600; line-height: 1.4; color: var(--_ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dwr-gal__hero-desc { font-size: 16px; font-weight: 400; line-height: 1.6; color: var(--_muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 767px) {
  .dwr-gal__herowrap::before, .dwr-gal__herowrap::after { display: none; }
  .dwr-gal__hero { flex-direction: column; align-items: stretch; gap: 16px; }
  .dwr-gal__hero-media { flex-basis: auto; }
  .dwr-gal__hero-body { padding: 0; }
}

/* ── ดูทั้งหมด ── */
.dwr-gal__more { display: flex; justify-content: center; margin-top: 28px; }
/* ปุ่ม "ดูทั้งหมด" — match ปุ่มของ dwr-calendar (.dwr-cal-wel-view-all): #0068C9 + pill + weight 600 + hover brightness */
.dwr-gal__morebtn {
  display: inline-block; padding: 13px 44px;
  background: #0068C9; color: #fff; border-radius: 999px;
  font-size: 1rem; font-weight: 600; text-decoration: none;
  box-shadow: 0 8px 18px -6px rgba(0, 0, 0, .28); transition: filter .2s, transform .15s;
}
.dwr-gal__morebtn:hover, .dwr-gal__morebtn:focus-visible { filter: brightness(.88); transform: translateY(-1px); }

/* ── ข้อมูลอัลบั้ม ── */
.dwr-gal__meta { display: flex; margin-top: 18px; align-items: center; justify-content: center; color: var(--_muted); font-size: .9rem; }

/* ── Modal (lightbox รูป / player วิดีโอ) — ของ plugin เอง ── */
.dwr-gal-modal {
  position: fixed; inset: 0; z-index: 99999;
  background: rgba(0, 0, 0, .85); display: flex; align-items: center; justify-content: center;
  padding: 24px; opacity: 0; visibility: hidden; transition: opacity .2s;
}
.dwr-gal-modal.is-open { opacity: 1; visibility: visible; }
.dwr-gal-modal__inner { position: relative; max-width: 92vw; max-height: 90vh; display: flex; }
.dwr-gal-modal__inner img { max-width: 92vw; max-height: 90vh; border-radius: 10px; display: block; }
.dwr-gal-modal__inner .dwr-gal-modal__video { width: min(90vw, 1100px); aspect-ratio: 16 / 9; }
.dwr-gal-modal__inner iframe { width: 100%; height: 100%; border: 0; border-radius: 10px; }
.dwr-gal-modal__close {
  position: absolute; top: -14px; right: -14px; width: 38px; height: 38px; border-radius: 50%;
  background: #fff; color: #182230; border: 0; font-size: 20px; cursor: pointer; line-height: 1;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .4);
}

/* ── หน้าเต็ม — grid + pagination ── */
.dwr-gal--page .dwr-gal__grid { list-style: none; margin: var(--_margin-top, 0) 0 0; padding: 0; display: grid; column-gap: var(--_gap); row-gap: var(--_vertical-gap, var(--_gap)); }
.dwr-gal--page.dwr-gal--image .dwr-gal__grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.dwr-gal--page.dwr-gal--video .dwr-gal__grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.dwr-gal--page.dwr-gal--fixed-page-cols .dwr-gal__grid { grid-template-columns: repeat(var(--_page-cols), minmax(0, 1fr)); }
.dwr-gal--page.dwr-gal--fixed-page-width .dwr-gal__grid { grid-template-columns: repeat(auto-fill, minmax(min(var(--_page-item-width), 100%), 1fr)); }
.dwr-gal--page .dwr-gal__card { width: auto; }
.dwr-gal--page.dwr-gal--mobile-page-cols .dwr-gal__grid > .dwr-gal__card { width: auto; }
.dwr-gal__pager { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 32px; }
.dwr-gal__pg { min-width: 40px; height: 40px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; border: 1px solid rgba(1, 82, 162, .2); color: var(--_p); font-size: 14px; font-weight: 500; text-decoration: none; background: #fff; }
.dwr-gal__pg:hover { background: rgba(1, 82, 162, .06); }
.dwr-gal__pg--active { background: var(--_p); color: #fff; border-color: var(--_p); }
.dwr-gal__pg--off { opacity: .4; }
.dwr-gal__pg--dots { border: 0; background: transparent; }

@media (max-width: 767px) {
  .dwr-gal__title { font-size: 22px; }
  .dwr-gal__nav { width: 38px; height: 38px; }
  .dwr-gal__icard { width: 74vw; }
  .dwr-gal__vcard { width: 78vw; }
}

/* Keep imported fixed pixel sizes as a maximum, while making the visible
   desktop column control authoritative whenever the container is narrower. */
.dwr-gal--responsive-slide-cols .dwr-gal__track > .dwr-gal__icard,
.dwr-gal--responsive-slide-cols .dwr-gal__track > .dwr-gal__vcard {
  width: min(var(--_iw, 100%), calc((100% - (var(--_cols) - 1) * var(--_gap)) / var(--_cols)));
}

@media (min-width: 601px) and (max-width: 1024px) {
  .dwr-gal--tablet-slide-cols .dwr-gal__track > .dwr-gal__icard,
  .dwr-gal--tablet-slide-cols .dwr-gal__track > .dwr-gal__vcard {
    width: calc((100% - (var(--_tablet-cols) - 1) * var(--_gap)) / var(--_tablet-cols));
  }
  .dwr-gal--page.dwr-gal--tablet-page-cols .dwr-gal__grid { grid-template-columns: repeat(var(--_page-tablet-cols), minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .dwr-gal--responsive-slide-cols .dwr-gal__track > .dwr-gal__icard,
  .dwr-gal--responsive-slide-cols .dwr-gal__track > .dwr-gal__vcard {
    width: calc((100% - (var(--_mobile-cols) - 1) * var(--_gap)) / var(--_mobile-cols));
  }
  .dwr-gal--page.dwr-gal--mobile-page-cols .dwr-gal__grid { grid-template-columns: repeat(var(--_page-mobile-cols), minmax(0, 1fr)); }
}