/* ============================================================================
   e-pao.net news pages (GP.asp / GPM.asp / GPM2.asp) — mobile overlay
   (companion to js/epao-responsive-news.js)
   Same contract as the index/gallery overlays: EVERY layout rule lives inside
   @media (max-width: 1000px); desktop rendering is untouched. Rules are
   scoped under html.epao-news, which the JS only adds on mobile builds.

   The top panel (.epao-rwd-topbar / -menubtn / -drawer / #masthead rules) is
   COPIED from css/epao-responsive.css so the news pages match the index page
   pixel-for-pixel — keep the two in sync when the index design changes.
   ============================================================================ */

/* Injected chrome stays hidden outside the breakpoint */
.epao-news-bar, .epao-news-share, .epao-news-scrim, .epao-news-more,
.epao-news-acc__chev, .epao-rwd-topbar, .epao-rwd-scrim, .epao-rwd-drawer,
.epao-news-rail, .epao-news-rail-tab, .epao-news-railscrim { display: none; }

@media (max-width: 1000px) {

  /* ---- 0. containers: kill the fixed 1000px desktop skeleton ---- */
  .epao-news body { margin: 0; }
  .epao-news #main_container,
  .epao-news #content_bg,
  .epao-news .inner_container {
    width: 100% !important; min-width: 0 !important; max-width: none !important;
    margin: 0 !important; padding-left: 0 !important; padding-right: 0 !important;
    float: none !important; box-sizing: border-box;
  }
  .epao-news #content_bg { overflow-x: hidden; } /* clamp any 1-digit residue */
  .epao-news #gen_panel {
    width: auto !important; float: none !important;
    margin: 0 !important; padding: 0 10px !important; box-sizing: border-box;
  }
  /* right panel + bottom jump start are fully re-homed (rail / Start drawer) */
  .epao-news #right_panel,
  .epao-news #jump_start,
  .epao-news #header { display: none; }

  /* ---- 1. index-style top bar (copied from epao-responsive.css 3b/3c) ---- */
  .epao-rwd-topbar {
    display: flex; align-items: center; gap: 8px; flex-wrap: nowrap;
    padding: 7px 10px; background: #fff; border-bottom: 1px solid #e0e0e0;
  }
  .epao-rwd-logo { display: inline-flex; align-items: center; flex: 0 1 auto; min-width: 0; }
  .epao-rwd-topbar .epao-rwd-logo img {
    height: 34px !important; width: auto !important; max-width: 38vw !important;
    object-fit: contain; display: block; border: 0;
  }
  .epao-rwd-menus { margin-left: auto; flex: 0 0 auto; display: flex; gap: 4px; }
  .epao-rwd-menubtn {
    display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; min-width: 40px; padding: 5px 5px 4px; border-radius: 8px;
    background: #254666; color: #fff; border: 0; cursor: pointer; flex-shrink: 0;
  }
  .epao-rwd-menubtn--services  { background: #3097d1; }
  .epao-rwd-menubtn--jumpstart { background: #2e7d32; }
  .epao-rwd-menubtn__ico { display: inline-flex; }
  .epao-rwd-menubtn__ico svg { width: 16px; height: 16px; display: block; }
  .epao-rwd-menubtn__cap {
    font-size: 8px; font-weight: 600; line-height: 1; letter-spacing: .2px; color: #fff;
  }
  .epao-rwd-scrim {
    display: block;
    position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 1550;
    background: rgba(8, 18, 33, .72);
    opacity: 0; visibility: hidden; transition: opacity .25s;
  }
  .epao-rwd-scrim.is-open { opacity: 1; visibility: visible; }
  .epao-rwd-drawer {
    display: flex;
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 1551;
    width: min(96vw, 360px); background: #fff;
    flex-direction: column; overflow-y: auto;
    transform: translateX(-100%); transition: transform .28s ease;
    box-shadow: 0 10px 40px rgba(20, 40, 70, .3);
  }
  .epao-rwd-drawer.is-open { transform: none; }
  .epao-rwd-drawer__head {
    display: flex; align-items: center; justify-content: space-between;
    background: #254666; color: #fff; padding: 14px 16px;
    font-weight: bold; font-size: 16px; flex: 0 0 auto;
  }
  .epao-rwd-close {
    background: none; border: 0; color: #fff;
    font-size: 26px; line-height: 1; cursor: pointer;
  }
  .epao-rwd-drawer a {
    display: block; padding: 14px 16px; border-bottom: 1px solid #e0e0e0;
    color: #254666 !important; font-weight: bold; font-size: 15px;
    text-decoration: none; white-space: normal;
  }
  .epao-rwd-drawer a:active { background: #eaf1f7; }

  /* nav link rows are re-homed into the drawers */
  .epao-news #header_nav,
  .epao-news #header_navhead { display: none !important; }
  .epao-news .header_nav_end { display: none !important; }

  /* ---- 2. utility bar: Ask-AI + search on ONE line (index 3b) ---- */
  .epao-news #masthead {
    width: auto !important; max-width: 100%; box-sizing: border-box;
    height: auto !important; padding: 4px 8px !important; white-space: normal;
    display: flex !important; flex-wrap: nowrap; align-items: center;
    justify-content: center; gap: 4px; overflow: hidden;
  }
  .epao-news #masthead > *:not(script):not(style) {
    float: none !important; vertical-align: middle; min-width: 0;
  }
  .epao-news #masthead .date_txt { display: none !important; }
  .epao-news #masthead .socialnet { display: none !important; }
  .epao-news #masthead form input[type="text"] { width: 64px !important; min-width: 0 !important; }
  .epao-news #masthead #epaoQuery { width: 56px !important; }
  /* the AI-pill span/form carry inline padding/margins sized for desktop */
  .epao-news #masthead > span[style] { padding: 0 !important; }
  .epao-news #masthead form { margin: 0 !important; }

  .epao-news .breadcrumbs {
    width: auto; margin: 0; padding: 7px 10px;
    font-size: 11px; line-height: 1.4;
  }

  /* ---- 3. article typography ----
     The feeder emits text BOTH in <p>s and as bare text nodes after the
     photo tables, so the reading size goes on the article wrapper div. */
  .epao-news #gen_panel > div:not(.breadcrumbs) {
    font-size: 16px; line-height: 1.65;
  }
  .epao-news #gen_panel p {
    text-align: left !important;
    font-size: 16px; line-height: 1.65;
  }
  .epao-news #gen_panel .newsheader {
    display: block; font-size: 20px; line-height: 1.35;
    padding: 4px 0 2px;
  }
  /* Mayek: the legacy Ratha / Kanglei Fajaba glyphs need generous sizing */
  .epao-news #gen_panel .hlmheader {
    display: block; font-size: 26px; line-height: 1.55; padding: 4px 0 2px;
  }
  .epao-news #gen_panel .hlmheadlines {
    font-size: 19px; line-height: 1.85;
  }

  /* photo tables: the feeder hard-codes width=610 tables / width=600 imgs */
  .epao-news #gen_panel table {
    width: 100% !important; max-width: 100% !important;
    margin: 0; border-collapse: collapse;
  }
  .epao-news #gen_panel table img {
    width: 100% !important; max-width: 100% !important; height: auto !important;
    display: block; border: 0;
  }
  .epao-news #gen_panel .capbox td[align="center"],
  .epao-news #gen_panel table td[align="center"] {
    font-size: 12.5px; color: #5a6b7d; line-height: 1.45; padding: 5px 4px 2px;
  }

  .epao-news .footer_linksred { font-size: 11px; line-height: 1.5; }

  /* comment chrome + Disqus slot: not part of the mobile read
     (the ASP also gates the Disqus loader itself off on mobile) */
  .epao-news #gen_panel .related-header,
  .epao-news #gen_panel .titlebrown,
  .epao-news #disqus_thread { display: none; }

  /* ---- 4. right-edge rail: floating tab + slide-in panel ---- */
  .epao-news-rail-tab {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    position: fixed; right: 0; top: 42%; z-index: 1450;
    padding: 9px 7px 8px; border: 0; border-radius: 10px 0 0 10px;
    background: #254666; color: #fff; cursor: pointer;
    box-shadow: -2px 2px 10px rgba(20, 40, 70, .3);
  }
  .epao-news-rail-tab__ico { display: inline-flex; }
  .epao-news-rail-tab__ico svg { width: 17px; height: 17px; display: block; }
  .epao-news-rail-tab__cap {
    font-size: 8px; font-weight: 600; line-height: 1; letter-spacing: .2px;
  }
  .epao-news-railscrim {
    display: block; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    z-index: 1552; background: rgba(8, 18, 33, .72);
    opacity: 0; visibility: hidden; transition: opacity .25s;
  }
  .epao-news-railscrim.is-on { opacity: 1; visibility: visible; }
  .epao-news-rail {
    display: flex;
    position: fixed; top: 0; bottom: 0; right: 0; z-index: 1553;
    width: min(92vw, 400px); background: #f6f9fc;
    flex-direction: column;
    transform: translateX(102%); transition: transform .28s ease;
    box-shadow: 0 10px 40px rgba(20, 40, 70, .3);
  }
  .epao-news-rail.is-open { transform: none; }
  .epao-news-rail__body {
    flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding: 10px 10px calc(12px + env(safe-area-inset-bottom));
  }

  /* widget panels inside the rail */
  .epao-news .epao-news-acc { margin: 0 0 8px; }
  .epao-news .epao-news-acc,
  .epao-news .epao-news-acc .wigets-feeds,
  .epao-news .epao-news-acc .wigets-feeds_header,
  .epao-news .epao-news-acc .wigets-feeds_content,
  .epao-news .epao-news-acc .wigets-feeds_content_org {
    width: auto !important; float: none !important; box-sizing: border-box;
  }
  .epao-news .epao-news-acc .wigets-feeds_header {
    display: flex; align-items: center; height: auto;
    padding: 10px 12px; border-radius: 8px; cursor: pointer;
  }
  .epao-news .epao-news-acc.epao-news-open .wigets-feeds_header {
    border-radius: 8px 8px 0 0;
  }
  .epao-news .epao-news-acc .wigets-feeds_header_text {
    flex: 1 1 auto; float: none; width: auto; padding: 0;
    font-size: 13px !important;
  }
  .epao-news-acc__chev {
    display: block; flex: 0 0 auto; font-size: 18px; line-height: 1;
    transition: transform .2s;
  }
  .epao-news .epao-news-acc.epao-news-open .epao-news-acc__chev {
    transform: rotate(180deg);
  }
  .epao-news .epao-news-acc .wigets-feeds_content,
  .epao-news .epao-news-acc .wigets-feeds_content_org { display: none; }
  .epao-news .epao-news-acc.epao-news-open .wigets-feeds_content,
  .epao-news .epao-news-acc.epao-news-open .wigets-feeds_content_org {
    display: block; padding: 4px 12px 10px; background: #fff;
    border-radius: 0 0 8px 8px;
  }
  .epao-news .epao-news-acc li {
    list-style: none; margin: 0; padding: 0;
    border: 0 !important; background: none !important;
  }
  .epao-news .epao-news-acc li a {
    display: flex; align-items: flex-start; padding: 7px 0;
    font-size: 13.5px; line-height: 1.45; text-decoration: none;
    border: 0 !important; background: none !important;
  }
  .epao-news .epao-news-acc li a::before {
    content: ''; flex: 0 0 auto; width: 5px; height: 5px; border-radius: 50%;
    background: #254666; margin: 7px 8px 0 1px;
  }

  /* link-wall sections inside the rail (RELATED NEWS / TIMELINES / ...) */
  .epao-news-wallacc__hdr {
    display: flex; align-items: center; width: 100%;
    padding: 10px 12px; border: 0; border-radius: 8px;
    background: #dde8f3; color: #254666; cursor: pointer;
    font-size: 13px; font-weight: bold; text-align: left; box-sizing: border-box;
  }
  .epao-news-wallacc__hdr > span:first-child { flex: 1 1 auto; min-width: 0; }
  .epao-news .epao-news-wallacc.epao-news-open .epao-news-wallacc__hdr {
    border-radius: 8px 8px 0 0;
  }
  .epao-news-wallacc__body { display: none; }
  .epao-news .epao-news-wallacc.epao-news-open .epao-news-wallacc__body {
    display: block; background: #fff; border-radius: 0 0 8px 8px;
    padding: 4px 12px 8px;
  }
  .epao-news [id="related_news"] { width: auto; padding: 2px 0 6px; }
  .epao-news [id="related_news"] a {
    display: block; padding: 7px 0 7px 14px; position: relative;
    font-size: 13.5px; line-height: 1.45; text-decoration: none;
    border: 0 !important; background-image: none !important;
  }
  .epao-news [id="related_news"] a::before {
    content: ''; position: absolute; left: 2px; top: 13px;
    width: 5px; height: 5px; border-radius: 50%; background: #254666;
  }
  .epao-news [id="related_news"] a.epao-news-extra { display: none; }
  .epao-news [id="related_news"].epao-news-expanded a.epao-news-extra { display: block; }
  .epao-news-more {
    display: block; width: 100%; padding: 9px 0; margin: 2px 0 4px;
    background: none; border: 0; text-align: left;
    color: #3097d1; font-size: 13px; font-weight: bold; cursor: pointer;
  }

  .epao-news #footer { width: auto; padding: 10px; font-size: 11px; }

  /* room for the fixed bottom bar */
  .epao-news body { padding-bottom: 64px; }

  /* ---- 5. sticky bottom bar: ‹ Prev · share · Next › ---- */
  .epao-news-bar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1500;
    align-items: center; gap: 9px;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, .97); border-top: 1px solid #d7e0e9;
    box-shadow: 0 -2px 10px rgba(20, 40, 70, .08);
  }
  .epao-news-bar__btn {
    flex: 1 1 0; text-align: center; padding: 11px 0;
    background: #f2f6fa; border: 1px solid #c9d6e2; border-radius: 9px;
    color: #254666 !important; font-size: 15px !important; font-weight: bold;
    text-decoration: none !important; line-height: 1;
  }
  .epao-news-bar__btn.is-disabled { opacity: .35; pointer-events: none; }
  .epao-news-bar__round {
    flex: 0 0 auto; width: 40px; height: 40px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: #254666; border: 0; border-radius: 50%;
    color: #fff; cursor: pointer;
  }

  /* ---- 6. share fallback panel + scrim ---- */
  .epao-news-scrim {
    display: block; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    z-index: 1600; background: rgba(8, 18, 33, .45);
    opacity: 0; pointer-events: none; transition: opacity .25s;
  }
  .epao-news-scrim.is-on { opacity: 1; pointer-events: auto; }
  .epao-news-share {
    display: block; position: fixed; z-index: 1601;
    left: 14px; right: 14px; bottom: calc(72px + env(safe-area-inset-bottom));
    background: #fff; border-radius: 14px;
    box-shadow: 0 6px 28px rgba(20, 40, 70, .35); overflow: hidden;
    opacity: 0; pointer-events: none; transform: translateY(10px);
    transition: opacity .2s, transform .2s;
  }
  .epao-news-share.is-open { opacity: 1; pointer-events: auto; transform: none; }
  .epao-news-share a,
  .epao-news-share button {
    display: block; width: 100%; box-sizing: border-box; text-align: left;
    padding: 14px 18px; background: none; border: 0;
    border-bottom: 1px solid #edf1f5;
    color: #254666 !important; font-size: 15px; font-weight: bold;
    text-decoration: none !important; cursor: pointer;
  }
  .epao-news-share > :last-child { border-bottom: 0; }
}