/* ==========================================================================
   BWDB CSAWMP Training Series — shared page design system
   Used by every batch page under projects/national-training/package-21|22/.
   All classes are bwdb- prefixed so nothing can collide with style.css.
   Per-page artwork (hero background) is set with an inline style attribute.
   ========================================================================== */

:root{--water-teal:#0e7490;--water-deep:#083344}

/* Layout widening ---------------------------------------------------------- */
.bwdb-hero .container,
.blog-content-full .container,
.blog-content-full .blog-post-layout{max-width:1400px}
.bwdb-stats{max-width:1400px}

.blog-content-full .blog-post-layout{display:block !important;grid-template-columns:1fr !important;max-width:1400px}
.blog-content-full .blog-content{max-width:100%;width:100%}
.blog-content-full .blog-sidebar{margin-top:2.5rem;display:grid;grid-template-columns:1fr 2fr;gap:2rem;align-items:start}
.blog-content-full .blog-sidebar .sidebar-widget{background:#fff;border:1px solid var(--border-color);border-radius:12px;padding:1.5rem 1.75rem;box-shadow:0 4px 14px rgba(0,0,0,.04)}
.blog-content-full .blog-sidebar .sidebar-widget h3{font-size:1.05rem;margin:0 0 1rem;color:var(--text-dark);padding-bottom:.6rem;border-bottom:2px solid var(--background-light)}
@media(max-width:768px){.blog-content-full .blog-sidebar{grid-template-columns:1fr}}

/* Hero --------------------------------------------------------------------- */
.bwdb-hero{position:relative;min-height:540px;margin-top:var(--header-height);overflow:hidden;color:#fff;display:flex;align-items:center;background:var(--water-deep)}
.bwdb-hero-bg{position:absolute;inset:0;background-size:cover;background-position:center 35%;filter:brightness(.5);transform:scale(1.04)}
.bwdb-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(8,51,68,.94) 0%,rgba(12,63,94,.8) 45%,rgba(14,116,144,.55) 100%);z-index:1}
.bwdb-hero .container{position:relative;z-index:2;padding-top:4rem;padding-bottom:4rem;width:100%}
.bwdb-eyebrow{display:inline-flex;align-items:center;gap:.55rem;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);padding:.4rem 1rem;border-radius:50px;font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#fff;backdrop-filter:blur(6px);margin-bottom:1.25rem}
.bwdb-eyebrow i{color:#7dd3fc}
.bwdb-hero h1{color:#fff;font-size:clamp(1.75rem,3.4vw,2.7rem);font-weight:700;line-height:1.18;max-width:980px;margin-bottom:1rem;letter-spacing:-.01em}
.bwdb-hero h1 .bwdb-accent{background:linear-gradient(90deg,#7dd3fc,#fff);-webkit-background-clip:text;background-clip:text;color:transparent}
.bwdb-hero p.bwdb-lead{font-size:1.05rem;color:rgba(255,255,255,.92);max-width:820px;margin-bottom:2rem;line-height:1.7}
.bwdb-hero-meta{display:flex;flex-wrap:wrap;gap:1.5rem 2.25rem;margin-top:1.5rem}
.bwdb-hero-meta-item{display:flex;align-items:center;gap:.65rem;color:#fff;font-size:.92rem}
.bwdb-hero-meta-item i{width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;border-radius:10px;background:rgba(255,255,255,.14);color:#7dd3fc;font-size:.95rem;border:1px solid rgba(255,255,255,.18);flex-shrink:0}
.bwdb-hero-meta-item strong{display:block;font-size:.7rem;letter-spacing:.1em;color:rgba(255,255,255,.72);text-transform:uppercase;font-weight:500;margin-bottom:.1rem}
.bwdb-hero-meta-item span{font-weight:600;font-size:.95rem}

/* KPI strip ---------------------------------------------------------------- */
.bwdb-stats{margin:-3.25rem auto 0;position:relative;z-index:5;padding:0 1.5rem}
.bwdb-stats-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem;background:#fff;padding:1.75rem 1.5rem;border-radius:16px;box-shadow:0 18px 40px -18px rgba(8,51,68,.25);border:1px solid var(--border-color)}
.bwdb-stat{text-align:center;padding:.5rem .35rem;border-right:1px solid #eef1f5}
.bwdb-stat:last-child{border-right:none}
.bwdb-stat-num{font-size:2rem;font-weight:700;color:var(--water-teal);line-height:1;margin-bottom:.4rem;letter-spacing:-.02em}
.bwdb-stat-num small{font-size:1rem;font-weight:600;color:var(--secondary-blue)}
.bwdb-stat-label{font-size:.75rem;color:var(--text-light);text-transform:uppercase;letter-spacing:.08em;font-weight:500}
@media(max-width:900px){.bwdb-stats-grid{grid-template-columns:repeat(3,1fr)}.bwdb-stat:nth-child(3){border-right:none}}
@media(max-width:560px){.bwdb-stats-grid{grid-template-columns:repeat(2,1fr)}.bwdb-stat{border-right:none}}

/* Breadcrumb --------------------------------------------------------------- */
.bwdb-breadcrumb{font-size:.8rem;color:var(--text-light);margin:0 0 1.25rem;display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}
.blog-content .bwdb-breadcrumb a{color:var(--water-teal);border-bottom:none}
.bwdb-breadcrumb span[aria-current]{color:var(--text-dark);font-weight:500}
.bwdb-breadcrumb i{font-size:.6rem}

/* Officials / resource-person cards ---------------------------------------- */
.bwdb-official-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(275px,1fr));gap:1.25rem;margin:1.75rem 0 2rem}
.bwdb-official-card{background:#fff;border:1px solid var(--border-color);border-radius:12px;padding:1.6rem 1.25rem 1.25rem;box-shadow:0 4px 14px rgba(0,0,0,.04);position:relative;transition:all .3s ease;display:flex;flex-direction:column}
.bwdb-official-card:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(14,116,144,.12);border-color:var(--water-teal)}
.bwdb-official-card .bwdb-role-badge{position:absolute;top:-10px;left:1.25rem;background:var(--water-teal);color:#fff;font-size:.65rem;letter-spacing:.08em;text-transform:uppercase;padding:.25rem .65rem;border-radius:50px;font-weight:600}
.bwdb-official-card.bwdb-role-chief .bwdb-role-badge{background:#0f5132}
.bwdb-official-card.bwdb-role-chief{background:linear-gradient(180deg,#fff 0%,#f2fbf6 100%)}
.bwdb-official-card.bwdb-role-mti .bwdb-role-badge{background:var(--primary-blue)}
.bwdb-official-card.bwdb-role-mti{background:linear-gradient(180deg,#fff 0%,#f5f9ff 100%)}
.bwdb-official-card .bwdb-official-photo{width:88px;height:88px;border-radius:50%;object-fit:cover;border:3px solid #fff;box-shadow:0 4px 14px rgba(14,116,144,.2);margin:.6rem auto .85rem;display:block}
.bwdb-official-card.bwdb-has-photo{text-align:center}
.bwdb-official-card .bwdb-official-name{font-size:1.05rem;font-weight:600;margin-bottom:.35rem;color:var(--text-dark);margin-top:.25rem}
.blog-content .bwdb-official-card .bwdb-official-title{font-size:.85rem;color:var(--text-light);line-height:1.55;margin:0}
.bwdb-official-card .bwdb-official-org{display:block;margin-top:.5rem;font-size:.78rem;color:var(--water-teal);font-weight:500}
.blog-content .bwdb-official-card .bwdb-official-name a{color:var(--text-dark);border-bottom:none}
.blog-content .bwdb-official-card .bwdb-official-name a:hover{color:var(--water-teal)}
.bwdb-official-link-icons{display:inline-flex;gap:.4rem;margin-top:.65rem}
.bwdb-official-card.bwdb-has-photo .bwdb-official-link-icons{justify-content:center;width:100%}
.blog-content .bwdb-official-link-icons a{width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:#eef2f7;color:var(--water-teal) !important;font-size:.78rem;border-bottom:none !important;transition:all .25s ease}
.blog-content .bwdb-official-link-icons a:hover{background:var(--water-teal);color:#fff !important;transform:translateY(-2px)}

/* Image rows & featured photo ---------------------------------------------- */
.blog-content .image-row{align-items:start;margin:1.5rem 0 2.5rem}
.blog-content .image-row figure{display:block;margin:0}
.blog-content .image-row img{width:100%;height:auto !important;aspect-ratio:16/9;object-fit:cover;display:block;border-radius:10px}
.blog-content .image-row figcaption{padding:.5rem .25rem 0}
.blog-content figure{clear:both;display:block;overflow:visible}
.blog-content .image-row + h3,.blog-content .image-row + h4,
.blog-content figure + h3,.blog-content figure + h4{margin-top:3rem !important;clear:both;display:block}

.bwdb-featured-photo{margin:1.5rem 0 2rem;border-radius:14px;overflow:hidden;box-shadow:0 12px 32px rgba(8,51,68,.14)}
.bwdb-featured-photo img{width:100%;height:auto;display:block}
.bwdb-featured-photo figcaption{padding:.85rem 1rem;background:#f6fafb;font-size:.85rem;color:var(--text-light);border-top:1px solid var(--border-color)}

/* Day-by-day agenda -------------------------------------------------------- */
.bwdb-agenda{margin:1.5rem 0 2.25rem}
.bwdb-day{border:1px solid var(--border-color);border-radius:12px;margin-bottom:1.1rem;overflow:hidden;background:#fff;box-shadow:0 4px 14px rgba(0,0,0,.03)}
.bwdb-day-head{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.25rem;padding:1rem 1.35rem;background:linear-gradient(90deg,#f0fbfd 0%,#fff 75%);border-left:5px solid var(--water-teal)}
.bwdb-day-badge{background:var(--water-teal);color:#fff;font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:.3rem .75rem;border-radius:50px}
.bwdb-day-title{font-weight:600;font-size:1.02rem;color:var(--text-dark);flex:1 1 260px}
.bwdb-day-date{font-size:.82rem;color:var(--text-light);font-weight:500}
.blog-content .bwdb-sessions{list-style:none;margin:0;padding:.35rem 0 .6rem}
.blog-content .bwdb-sessions li{display:grid;grid-template-columns:110px 1fr 190px;gap:1rem;padding:.75rem 1.35rem;border-top:1px solid #f1f4f6;align-items:start;margin:0}
.blog-content .bwdb-sessions li:first-child{border-top:none}
.bwdb-time{font-size:.78rem;font-weight:600;color:var(--water-teal);white-space:nowrap;padding-top:.1rem}
.bwdb-topic{font-size:.92rem;color:var(--text-dark);font-weight:500}
.bwdb-topic small{display:block;font-weight:400;color:var(--text-light);font-size:.78rem;margin-top:.2rem;line-height:1.55}
.bwdb-rp{font-size:.78rem;color:var(--text-light);line-height:1.5}
.bwdb-rp strong{display:block;color:var(--text-dark);font-size:.8rem;font-weight:600}
.bwdb-break{background:#fafbfc}
.bwdb-break .bwdb-topic{color:var(--text-light);font-style:italic;font-weight:400;font-size:.85rem}
@media(max-width:820px){.blog-content .bwdb-sessions li{grid-template-columns:1fr;gap:.3rem}.bwdb-rp{padding-top:.25rem}}

/* Policy / topic cards ----------------------------------------------------- */
.bwdb-policy-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(265px,1fr));gap:1.1rem;margin:1.5rem 0 2rem}
.bwdb-policy-card{background:#fff;border:1px solid var(--border-color);border-radius:12px;padding:1.4rem 1.25rem 1.25rem;position:relative;overflow:hidden;transition:all .3s ease}
.bwdb-policy-card:hover{border-color:var(--water-teal);transform:translateY(-3px);box-shadow:0 10px 24px rgba(14,116,144,.1)}
.bwdb-policy-card .bwdb-policy-year{position:absolute;top:0;right:0;background:var(--water-teal);color:#fff;font-size:.7rem;font-weight:600;letter-spacing:.06em;padding:.3rem .65rem;border-radius:0 12px 0 10px}
.bwdb-policy-card h4{margin:0 0 .55rem;font-size:1rem;color:var(--text-dark);padding-right:3.5rem}
.blog-content .bwdb-policy-card p{font-size:.83rem;color:var(--text-light);margin:0;line-height:1.6}

/* Methodology chips -------------------------------------------------------- */
.bwdb-method-chips{display:flex;flex-wrap:wrap;gap:.6rem;margin:1.25rem 0 2rem}
.bwdb-method-chip{display:inline-flex;align-items:center;gap:.45rem;background:#f0fbfd;border:1px solid #cfeaf1;color:var(--water-deep);font-size:.82rem;font-weight:500;padding:.45rem .95rem;border-radius:50px}
.bwdb-method-chip i{color:var(--water-teal);font-size:.78rem}

/* Participant summary + roster --------------------------------------------- */
.bwdb-participants-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.85rem;margin:1.25rem 0 1.5rem}
.bwdb-part-card{background:linear-gradient(135deg,#f0fafd,#f8fdff);border:1px solid var(--border-color);border-radius:10px;padding:1rem 1.1rem}
.bwdb-part-card .bwdb-pp-num{font-size:1.55rem;font-weight:700;color:var(--water-teal);line-height:1.1}
.bwdb-part-card .bwdb-pp-label{font-size:.78rem;color:var(--text-light);margin-top:.3rem}
.bwdb-roster-toolbar{display:flex;align-items:center;justify-content:space-between;padding:.65rem .9rem;margin:.75rem 0 1rem;background:linear-gradient(135deg,#f7fdfe,#eef7fa);border:1px solid var(--border-color);border-radius:8px;font-size:.82rem;color:var(--text-dark);flex-wrap:wrap;gap:.5rem}
.bwdb-roster-toolbar strong{color:var(--water-teal)}
.bwdb-roster-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:.7rem;margin:.5rem 0 1.5rem}
.bwdb-roster-card{background:#fff;border:1px solid #eef1f5;border-radius:8px;box-shadow:0 2px 6px rgba(0,0,0,.03);padding:.8rem .9rem .75rem 1rem;transition:all .25s ease;position:relative;overflow:hidden}
.bwdb-roster-card::before{content:"";position:absolute;top:0;bottom:0;left:0;width:3px;background:linear-gradient(180deg,var(--water-teal),var(--secondary-blue))}
.bwdb-roster-card:hover{transform:translateY(-2px);box-shadow:0 6px 14px rgba(14,116,144,.12);border-color:var(--water-teal)}
.bwdb-roster-card .bwdb-rc-sl{position:absolute;top:.45rem;right:.55rem;font-size:.6rem;font-weight:700;color:var(--text-light);background:#f4f6f9;padding:.08rem .4rem;border-radius:50px;letter-spacing:.04em}
.bwdb-roster-card .bwdb-rc-name{font-size:.86rem;font-weight:600;color:var(--text-dark);line-height:1.3;margin:0 1.8rem .25rem 0;display:block}
.blog-content .bwdb-roster-card .bwdb-rc-desig{font-size:.72rem;color:var(--text-light);line-height:1.45;margin:0 0 .45rem}
.bwdb-roster-card .bwdb-rc-office{display:inline-block;padding:.14rem .55rem;border-radius:50px;font-size:.6rem;letter-spacing:.03em;font-weight:600;background:#eef7fa;color:var(--water-deep)}
.bwdb-roster-card .bwdb-rc-office.bwdb-field{background:#fff4e5;color:#8a4b00}
.bwdb-roster-card .bwdb-rc-office.bwdb-hq{background:#e8f1fd;color:#14417a}
.bwdb-roster-card .bwdb-rc-repeat{display:inline-block;margin-left:.3rem;padding:.14rem .5rem;border-radius:50px;font-size:.58rem;font-weight:600;background:#eaf7ef;color:#0f5132}

/* Gallery ------------------------------------------------------------------ */
.bwdb-gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin:1.5rem 0 2rem}
.bwdb-gallery-grid figure{margin:0;border-radius:10px;overflow:hidden;position:relative;background:#000}
.bwdb-gallery-grid img{width:100%;height:100%;aspect-ratio:16/9;object-fit:cover;transition:transform .5s ease,opacity .35s ease;display:block}
.bwdb-gallery-grid figure:hover img{transform:scale(1.06);opacity:.85}
.bwdb-gallery-grid figcaption{position:absolute;left:0;right:0;bottom:0;padding:1.5rem .85rem .7rem;color:#fff;font-size:.78rem;background:linear-gradient(to top,rgba(0,0,0,.82),rgba(0,0,0,0));font-style:normal;text-align:left;line-height:1.45}
/* An orphan final photo spans the full row instead of leaving a ragged grid */
.bwdb-gallery-grid figure:last-child:nth-child(3n+1){grid-column:1/-1}
.bwdb-gallery-grid figure:last-child:nth-child(3n+1) img{aspect-ratio:21/9}
@media(max-width:768px){.bwdb-gallery-grid{grid-template-columns:repeat(2,1fr)}.bwdb-gallery-grid figure:last-child:nth-child(3n+1) img{aspect-ratio:16/9}}
@media(max-width:480px){.bwdb-gallery-grid{grid-template-columns:1fr}}

/* Callouts ----------------------------------------------------------------- */
.bwdb-callout{background:linear-gradient(135deg,#eaf7fb,#f4fbfd);border-left:5px solid var(--water-teal);padding:1.25rem 1.5rem;border-radius:8px;margin:1.5rem 0;display:flex;gap:1rem;align-items:flex-start}
.bwdb-callout i{color:var(--water-teal);font-size:1.5rem;flex-shrink:0;margin-top:.15rem}
.blog-content .bwdb-callout p{margin:0;color:var(--text-dark);font-size:.92rem;line-height:1.65}
.bwdb-callout p strong{color:var(--water-deep)}
.bwdb-notice{margin:1.75rem 0 1rem;padding:1.25rem 1.5rem;border:1px dashed var(--water-teal);border-radius:10px;background:rgba(14,116,144,.045);font-size:.92rem;color:var(--text-dark);line-height:1.65}
.bwdb-notice strong{color:var(--water-deep)}

/* Series navigation (batch ↔ batch) ---------------------------------------- */
.bwdb-series-nav{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem;margin:2rem 0 1rem}
.blog-content .bwdb-series-link{display:block;border:1px solid var(--border-color);border-radius:10px;padding:1rem 1.15rem;background:#fff;border-bottom:1px solid var(--border-color) !important;transition:all .25s ease}
.blog-content .bwdb-series-link:hover{border-color:var(--water-teal);box-shadow:0 8px 20px rgba(14,116,144,.1);transform:translateY(-2px)}
.bwdb-series-link .bwdb-series-eyebrow{display:block;font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-light);font-weight:600;margin-bottom:.3rem}
.bwdb-series-link .bwdb-series-title{display:block;font-size:.9rem;font-weight:600;color:var(--text-dark);line-height:1.4}
.bwdb-series-link .bwdb-series-meta{display:block;font-size:.75rem;color:var(--water-teal);margin-top:.35rem}

/* FAQ (static, crawlable) -------------------------------------------------- */
.bwdb-faq{margin:1.5rem 0 2rem;display:grid;gap:.75rem}
.bwdb-faq details{border:1px solid var(--border-color);border-radius:10px;background:#fff;padding:0 1.25rem;transition:box-shadow .25s ease}
.bwdb-faq details[open]{box-shadow:0 6px 18px rgba(14,116,144,.08);border-color:var(--water-teal)}
.bwdb-faq summary{cursor:pointer;list-style:none;padding:1rem 0;font-weight:600;font-size:.95rem;color:var(--text-dark);display:flex;justify-content:space-between;align-items:center;gap:1rem}
.bwdb-faq summary::-webkit-details-marker{display:none}
.bwdb-faq summary::after{content:"\f067";font-family:"Font Awesome 6 Free";font-weight:900;font-size:.75rem;color:var(--water-teal);flex-shrink:0}
.bwdb-faq details[open] summary::after{content:"\f068"}
.blog-content .bwdb-faq p{margin:0 0 1rem;font-size:.9rem;color:var(--text-light);line-height:1.7}