@import url('../../../menu_effect.css.php');
@import url('../../../module_surface.css.php');
/* BNW v1.10.0 — school logo + latest stories list */
.brand-mark.bnw-school-logo{overflow:hidden;background:#fff!important;border:1px solid rgba(13,148,136,.16);padding:0!important;display:grid!important;place-items:center!important}
.brand-mark.bnw-school-logo img{display:block;width:100%;height:100%;object-fit:contain;border-radius:inherit}
.footer-brand .brand-mark.bnw-school-logo{background:#fff!important}
#bnwMemberDock .bnw-member-avatar:not(.has-picture){font-size:0!important;background:#fff url('https://lh3.googleusercontent.com/a/ACg8ocJUb1C6p23BOfQOIMAYDc1HQC-uNxppHyD931vYPFbFpAoZ1lPT=s576-c-no') center/cover no-repeat!important;border-color:rgba(13,148,136,.18)!important}
#bnwMemberDock .bnw-member-avatar.has-picture{background-image:none!important}
.bnw-home-fb-shell{display:block}
.bnw-home-fb-list-wrap{margin-top:34px;background:#fff;border:1px solid #e1e8ec;border-radius:20px;overflow:hidden;box-shadow:0 10px 28px rgba(14,35,48,.045)}
.bnw-home-fb-list-head{display:grid;grid-template-columns:140px minmax(0,1fr);gap:18px;padding:12px 20px;background:#f4f8f8;border-bottom:1px solid #e3eaed;color:#55717a;font-size:12px;font-weight:800;letter-spacing:.03em}
.bnw-home-fb-list{display:block}
.bnw-home-fb-list .bnw-home-fb-list-row{display:grid!important;grid-template-columns:140px minmax(0,1fr);gap:18px;align-items:center;margin:0!important;padding:17px 20px!important;border:0!important;border-bottom:1px solid #edf1f2!important;border-radius:0!important;box-shadow:none!important;background:#fff!important;transform:none!important;overflow:visible!important;transition:background .18s ease!important}
.bnw-home-fb-list .bnw-home-fb-list-row:last-child{border-bottom:0!important}
.bnw-home-fb-list .bnw-home-fb-list-row:hover{background:#f7fbfa!important;transform:none!important}
.bnw-list-date{font-size:14px;color:#6a7d84;font-weight:700;white-space:nowrap}
.bnw-list-title{min-width:0;display:flex;align-items:center;justify-content:space-between;gap:12px}
.bnw-list-title strong{min-width:0;flex:1;font-size:16px;line-height:1.5;color:#162a33;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bnw-list-title span{flex:0 0 auto;font-size:0;color:#0f857a;font-weight:800;white-space:nowrap}
.bnw-list-title span::before{content:'ดูเพิ่มเติม →';font-size:12px}

/* Template module surface — match the Latest Stories block.
   Ordinary modules use the same soft surface, with color/opacity/radius from Admin.
   Hero/CTA are excluded because their authored background is part of the module. */
#bnwTemplateSafeGrid>section:not(.hero):not(.cta):not(:has(.bnw-template-empty)),
.bnw-cross-page-grid>section:not(.hero):not(.cta):not(:has(.bnw-template-empty)){
 position:relative;
 align-self:start!important;
 height:max-content!important;
 min-height:0!important;
 padding-block:clamp(18px,1.7vw,26px)!important;
 background:var(--bnw-module-surface-bg,#eef3f5)!important;
 border:1px solid #e1e8ec!important;
 border-radius:var(--bnw-module-surface-radius,24px)!important;
 box-shadow:0 12px 32px rgba(14,35,48,.065)!important;
 overflow:hidden;
 transition:box-shadow .22s ease,border-color .22s ease,transform .22s ease;
}
#bnwTemplateSafeGrid>section.hero,
#bnwTemplateSafeGrid>section.cta,
.bnw-cross-page-grid>section.hero,
.bnw-cross-page-grid>section.cta{
 align-self:start!important;
 height:max-content!important;
 min-height:0!important;
 border-radius:24px!important;
 overflow:hidden;
 box-shadow:0 12px 32px rgba(14,35,48,.09)!important;
}
/* Keep the first template module away from the fixed navigation by the same
   visual rhythm used between modules inside the template grid. */
#bnwTemplateSafeRoot{
 margin-top:24px!important;
}
/* Give the final module group breathing room before the global footer. */
#bnwTemplateSafeRoot,
.bnw-cross-page-grid{
 margin-bottom:clamp(54px,6vw,88px)!important;
}
@supports not (height:max-content){
 #bnwTemplateSafeGrid>section,
 .bnw-cross-page-grid>section{
  height:auto!important;
 }
}
@media(hover:hover) and (pointer:fine){
 #bnwTemplateSafeGrid>section:not(.hero):not(.cta):not(:has(.bnw-template-empty)):hover,
 .bnw-cross-page-grid>section:not(.hero):not(.cta):not(:has(.bnw-template-empty)):hover{
  border-color:#d9e3e7!important;
  box-shadow:0 16px 38px rgba(14,35,48,.085)!important;
 }
}
@media(max-width:760px){
 #bnwTemplateSafeGrid>section:not(.hero):not(.cta):not(:has(.bnw-template-empty)),
 .bnw-cross-page-grid>section:not(.hero):not(.cta):not(:has(.bnw-template-empty)){
  padding-block:14px!important;
  border-radius:var(--bnw-module-surface-radius,24px)!important;
  box-shadow:0 8px 24px rgba(14,35,48,.055)!important;
 }
 #bnwTemplateSafeGrid>section.hero,
 #bnwTemplateSafeGrid>section.cta,
 .bnw-cross-page-grid>section.hero,
 .bnw-cross-page-grid>section.cta{
  border-radius:18px!important;
 }
 #bnwTemplateSafeRoot{
  margin-top:18px!important;
 }
 #bnwTemplateSafeRoot,
 .bnw-cross-page-grid{
  margin-bottom:42px!important;
 }
}
@media(prefers-reduced-motion:reduce){
 #bnwTemplateSafeGrid>section,.bnw-cross-page-grid>section{transition:none!important}
}

@media(max-width:600px){
 .bnw-home-fb-list-wrap{margin-top:20px;border-radius:14px}
 .bnw-home-fb-list-head{display:none}
 .bnw-home-fb-list .bnw-home-fb-list-row{grid-template-columns:1fr!important;gap:6px!important;padding:15px 16px!important;border-left:0!important;border-right:0!important}
 .bnw-list-date{font-size:12px;color:#0f857a}
 .bnw-list-title{display:block}
 .bnw-list-title strong{display:block;white-space:normal;font-size:15px;line-height:1.55}
 .bnw-list-title span{display:block;margin-top:5px;font-size:0}
 .bnw-list-title span::before{font-size:11px}
}

/* Responsive story/gallery viewport guard.
   The public header is fixed, so modal canvases must live only in the usable
   viewport below it. This changes presentation geometry only; story/gallery
   data, navigation and open/close logic remain untouched. */
.bnw-story-modal,
.bnw-gallery-modal{
 top:var(--bnw-site-header-height,116px)!important;
 right:0!important;
 bottom:0!important;
 left:0!important;
 box-sizing:border-box!important;
}
.bnw-story-modal{
 padding:clamp(12px,2vw,24px)!important;
}
.bnw-story-dialog{
 max-height:min(920px,calc(100dvh - var(--bnw-site-header-height,116px) - clamp(24px,4vw,48px)))!important;
}
.bnw-story-scroll{
 max-height:min(920px,calc(100dvh - var(--bnw-site-header-height,116px) - clamp(24px,4vw,48px)))!important;
}
.bnw-gallery-modal{
 padding:clamp(10px,2vw,24px)!important;
}
.bnw-gallery-dialog{
 height:min(900px,calc(100dvh - var(--bnw-site-header-height,116px) - clamp(20px,4vw,48px)))!important;
 max-height:calc(100dvh - var(--bnw-site-header-height,116px) - clamp(20px,4vw,48px))!important;
}
@media(max-width:600px){
 .bnw-story-modal,
 .bnw-gallery-modal{
  top:var(--bnw-site-header-height,116px)!important;
  padding:0!important;
 }
 .bnw-story-dialog{
  position:relative!important;
  inset:auto!important;
  width:100%!important;
  height:calc(100dvh - var(--bnw-site-header-height,116px))!important;
  max-height:calc(100dvh - var(--bnw-site-header-height,116px))!important;
 }
 .bnw-story-scroll{
  height:100%!important;
  max-height:100%!important;
 }
 .bnw-story-close,
 .bnw-story-nav{
  position:absolute!important;
 }
 .bnw-story-close{
  top:max(12px,env(safe-area-inset-top))!important;
 }
 .bnw-gallery-dialog{
  width:100%!important;
  height:calc(100dvh - var(--bnw-site-header-height,116px))!important;
  max-height:calc(100dvh - var(--bnw-site-header-height,116px))!important;
  border-radius:0!important;
 }
 .bnw-gallery-close,
 .bnw-gallery-nav{
  position:absolute!important;
 }
 .bnw-gallery-close{
  top:max(12px,env(safe-area-inset-top))!important;
 }
}

/* Floating Facebook / entry popup viewport guard.
   These popups are separate from Latest Story modal and need their own fixed-header
   geometry. Keep all original open/close/data logic untouched. */
.bnw-fb-float-popup,
.bnw-entry-popup{
 top:var(--bnw-site-header-height,116px)!important;
 right:0!important;
 bottom:0!important;
 left:0!important;
 height:auto!important;
 min-height:0!important;
 padding:clamp(12px,2vw,24px)!important;
 box-sizing:border-box!important;
 align-items:center!important;
 justify-content:center!important;
 overflow:hidden!important;
 z-index:10050!important;
}
.bnw-fb-float-card,
.bnw-entry-popup-card{
 width:min(920px,100%)!important;
 max-height:calc(100dvh - var(--bnw-site-header-height,116px) - clamp(24px,4vw,48px))!important;
 overflow:auto!important;
 overscroll-behavior:contain!important;
 -webkit-overflow-scrolling:touch;
 box-sizing:border-box!important;
}
.bnw-fb-float-x,
.bnw-entry-popup-x{
 top:12px!important;
 right:12px!important;
 z-index:10!important;
}
@media(max-width:760px){
 .bnw-fb-float-popup,
 .bnw-entry-popup{
  top:var(--bnw-site-header-height,116px)!important;
  padding:8px!important;
  align-items:stretch!important;
 }
 .bnw-fb-float-card,
 .bnw-entry-popup-card{
  width:100%!important;
  max-height:calc(100dvh - var(--bnw-site-header-height,116px) - 16px)!important;
  border-radius:18px!important;
 }
}
@media(max-width:480px){
 .bnw-fb-float-popup,
 .bnw-entry-popup{
  padding:0!important;
 }
 .bnw-fb-float-card,
 .bnw-entry-popup-card{
  max-height:calc(100dvh - var(--bnw-site-header-height,116px))!important;
  height:calc(100dvh - var(--bnw-site-header-height,116px))!important;
  border-radius:0!important;
 }
}

/* Weather frame fail-safe.
   The generic frame bridge bootstraps first-party iframes at 1px. Weather's CSP
   blocks the injected inline height reporter, so keep only the wrapped Weather
   viewport visible while preserving every other module's sizing contract. */
html body .bnw-core-embed-card .bnw-embed-wrap:has(>iframe[src*="module_frame.php"][src*="weather_widget.php"]){
 height:620px!important;
 min-height:620px!important;
}
html body .bnw-core-embed-card .bnw-embed-wrap:has(>iframe[src*="module_frame.php"][src*="weather_widget.php"])>iframe{
 height:100%!important;
 min-height:0!important;
}
@media(max-width:760px){
 html body .bnw-core-embed-card .bnw-embed-wrap:has(>iframe[src*="module_frame.php"][src*="weather_widget.php"]){height:520px!important;min-height:520px!important}
}