/* @file    nap-gesi.css
   @created 2026-06-14 by Claude
   @updated 2026-06-14 by Claude
   @desc    Scoped styles for the GESI page redesign ("ບົດບາດຍິງຊາຍ ແລະ ການມີສ່ວນຮ່ວມ
            - ໃໝ່" Claude Design handoff). All rules namespaced under .gesi-page.
            Tokens come from nap-header-footer.css :root (loaded globally by base.html). */

.gesi-page{font-family:'Noto Sans Lao',system-ui,sans-serif;color:var(--ink);line-height:1.6;--amber:#d99a2b;--sky:#2f7dba}
.gesi-page *{box-sizing:border-box}
.gesi-page a{text-decoration:none;color:inherit}
.gesi-page svg{display:block}

/* HERO CARD */
.gesi-page .hero{max-width:var(--maxw);margin:0 auto;padding:26px 32px 0}
.gesi-page .hero-inner{position:relative;overflow:hidden;border-radius:24px;background:linear-gradient(150deg,var(--green-800),var(--green-950));color:#fff;padding:42px 46px;box-shadow:var(--shadow-lg)}
.gesi-page .hero-inner::before{content:"";position:absolute;width:460px;height:460px;border-radius:50%;right:-150px;top:-200px;background:radial-gradient(circle,rgba(95,224,163,.2),transparent 68%);pointer-events:none}
.gesi-page .hero-inner::after{content:"";position:absolute;right:-70px;top:50%;transform:translateY(-50%);width:440px;height:440px;border-radius:50%;background:repeating-radial-gradient(circle at center,rgba(255,255,255,.06) 0 1.5px,transparent 1.5px 36px);-webkit-mask:radial-gradient(circle at center,#000 58%,transparent 72%);mask:radial-gradient(circle at center,#000 58%,transparent 72%);pointer-events:none}
.gesi-page .hero-inner>*{position:relative;z-index:1}
.gesi-page .hero-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--green-400)}
.gesi-page .hero-eyebrow svg{width:15px;height:15px}
.gesi-page .hero h1{margin:13px 0 12px;font-size:29px;font-weight:900;letter-spacing:-.3px;line-height:1.32;max-width:34ch;color:#fff}
.gesi-page .hero-line{display:block;width:56px;height:4px;border-radius:3px;background:var(--green-400);margin:0 0 14px}
.gesi-page .hero p{margin:0;color:#bfe0cd;font-size:14.5px;font-weight:500;max-width:72ch;line-height:1.85}

/* BODY */
.gesi-page .wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px}
.gesi-page .sec{padding:46px 0}
.gesi-page .sec + .sec{border-top:1px solid var(--line)}
.gesi-page .sec-head{display:flex;align-items:center;gap:13px;margin-bottom:8px}
.gesi-page .sec-kicker{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--green-600)}
.gesi-page .sec-kicker .k-ic{width:30px;height:30px;border-radius:9px;background:var(--green-50);color:var(--green-700);display:grid;place-items:center}
.gesi-page .sec-kicker .k-ic svg{width:16px;height:16px}
.gesi-page .sec h2{margin:0;font-size:25px;font-weight:900;color:var(--green-900);letter-spacing:-.2px;text-wrap:balance}
.gesi-page .sec .uline{width:56px;height:4px;border-radius:3px;background:var(--green-400);margin:12px 0 0}

/* OVERVIEW */
.gesi-page .overview{display:grid;grid-template-columns:360px 1fr;gap:38px;align-items:start;margin-top:26px}
.gesi-page .ov-media{position:sticky;top:96px}
.gesi-page .ov-media .ovimg{width:100%;border-radius:20px;box-shadow:var(--shadow-lg);overflow:hidden;aspect-ratio:4/5}
.gesi-page .ov-media .ovimg img{width:100%;height:100%;object-fit:cover;display:block}
.gesi-page .ov-stat{display:flex;align-items:center;gap:16px;margin-top:14px;background:linear-gradient(140deg,var(--green-800),var(--green-950));color:#fff;border-radius:16px;padding:18px 20px;box-shadow:var(--shadow-lg);position:relative;overflow:hidden}
.gesi-page .ov-stat::after{content:"";position:absolute;right:-40px;top:50%;transform:translateY(-50%);width:170px;height:170px;border-radius:50%;background:radial-gradient(circle,rgba(95,224,163,.18),transparent 68%)}
.gesi-page .ov-stat .sv{font-size:40px;font-weight:900;letter-spacing:-1.5px;line-height:1;color:var(--green-400);flex:0 0 auto;position:relative;z-index:1}
.gesi-page .ov-stat .sl{font-size:12.5px;color:#cfe6da;font-weight:600;line-height:1.6;position:relative;z-index:1}
.gesi-page .ov-text p{margin:0 0 16px;font-size:14.5px;color:var(--ink-soft);line-height:1.95;text-align:justify;text-wrap:pretty}
.gesi-page .ov-text p:first-child{font-size:15.5px;color:var(--ink)}
.gesi-page .ov-text p sup{font-size:10px;font-weight:800;color:var(--green-600);vertical-align:super;margin-left:1px}
.gesi-page .ov-text p strong{color:var(--green-800);font-weight:800}

/* VULNERABLE GROUPS CHIPS */
.gesi-page .vgroups{margin-top:8px}
.gesi-page .vgroups .vg-label{display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--green-600);margin-bottom:13px}
.gesi-page .vgroups .vg-label svg{width:14px;height:14px}
.gesi-page .vchips{display:flex;flex-wrap:wrap;gap:10px}
.gesi-page .vchip{display:inline-flex;align-items:center;gap:9px;background:var(--paper);border:1px solid var(--line);border-radius:13px;padding:11px 15px;box-shadow:var(--shadow);font-size:13.5px;font-weight:700;color:var(--green-900);transition:transform .16s,border-color .16s,box-shadow .16s}
.gesi-page .vchip:hover{transform:translateY(-2px);border-color:var(--green-100);box-shadow:var(--shadow-lg)}
.gesi-page .vchip .vci{width:30px;height:30px;flex:0 0 auto;border-radius:9px;background:var(--green-50);color:var(--green-700);display:grid;place-items:center}
.gesi-page .vchip .vci svg{width:17px;height:17px}

/* GESI FEATURE BLOCKS */
.gesi-page .gfeat{display:grid;grid-template-columns:1fr 1fr;gap:38px;align-items:center;margin-top:26px}
.gesi-page .gfeat.rev .gfeat-tx{order:2}
.gesi-page .gfeat-tx{position:relative}
.gesi-page .gfeat-tx .gnum{font-size:13px;font-weight:900;letter-spacing:1px;color:var(--green-500);margin-bottom:12px;display:flex;align-items:center;gap:10px}
.gesi-page .gfeat-tx .gnum::before{content:"";width:34px;height:2px;background:var(--green-400);border-radius:2px}
.gesi-page .gfeat-tx h3{margin:0;font-size:23px;font-weight:900;color:var(--green-900);letter-spacing:-.2px;line-height:1.45;text-wrap:balance}
.gesi-page .gfeat-tx .gline{display:block;width:56px;height:4px;border-radius:3px;background:var(--green-400);margin:18px 0 0}
.gesi-page .gfeat-tx .gnote{display:inline-flex;align-items:center;gap:9px;margin-top:20px;font-size:12.5px;font-weight:700;color:var(--green-700);background:var(--green-50);border:1px solid var(--green-100);padding:9px 15px;border-radius:999px}
.gesi-page .gfeat-tx .gnote svg{width:15px;height:15px;flex:0 0 auto}
.gesi-page .gfeat-img{position:relative;border-radius:20px;overflow:hidden;box-shadow:var(--shadow-lg);background:var(--green-100)}
.gesi-page .gfeat-img img{width:100%;height:auto;display:block}
.gesi-page .gfeat-img .tag{position:absolute;top:14px;left:14px;display:inline-flex;align-items:center;gap:7px;background:rgba(7,37,24,.74);color:#cfe6da;font-size:11px;font-weight:800;letter-spacing:.4px;padding:7px 12px;border-radius:999px;backdrop-filter:blur(3px)}
.gesi-page .gfeat-img .tag svg{width:13px;height:13px}

@media (max-width:980px){
  .gesi-page .overview{grid-template-columns:1fr;gap:24px}
  .gesi-page .ov-media{position:static}
  .gesi-page .ov-media .ovimg{aspect-ratio:16/9}
  .gesi-page .gfeat{grid-template-columns:1fr;gap:22px}
  .gesi-page .gfeat.rev .gfeat-tx{order:0}
}
@media (max-width:680px){
  .gesi-page .wrap{padding-left:18px;padding-right:18px}
  .gesi-page .hero{padding:18px 14px 0}
  .gesi-page .hero-inner{padding:30px 22px}
  .gesi-page .hero h1{font-size:22px}
  .gesi-page .sec h2{font-size:20px}
  .gesi-page .gfeat-tx h3{font-size:20px}
}