/* ============================================================================
   e-pao.net article/opinion pages (epPageExtractor / epSubPageExtractor)
   — mobile overlay (companion to js/epao-responsive-article.js)
   Same contract as the index/news overlays: EVERY layout rule lives inside
   @media (max-width: 1000px); desktop is untouched. Scoped under html.epao-art.

   The top-panel rules (.epao-rwd-topbar/-menubtn/-drawer/-scrim + #masthead)
   mirror css/epao-responsive.css so these pages match the index pixel-for-pixel
   — keep them in sync if the index top bar design changes.
   ============================================================================ */

.epao-rwd-topbar, .epao-rwd-scrim, .epao-rwd-drawer,
.epao-art-bar, .epao-art-share, .epao-art-scrim,
.epao-art-rail, .epao-art-tab, .epao-art-railscrim,
.epao-lightbox { display: none; }

@media (max-width: 1000px) {

  /* ---- 0. containers: drop the fixed 1000px desktop skeleton ---- */
  /* stop iOS Safari's automatic "font boosting" from inflating text blocks */
  html.epao-art { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  .epao-art body { margin: 0; }
  .epao-art #main_container,
  .epao-art #content_bg,
  .epao-art .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-art #content_bg { overflow-x: hidden; }
  .epao-art #gen_panel {
    width: auto !important; float: none !important;
    margin: 0 !important; padding: 0 12px !important; box-sizing: border-box;
  }
  /* the empty right panel + bottom jump start are re-homed / dropped */
  .epao-art #right_panel,
  .epao-art #jump_start,
  .epao-art #header,
  .epao-art #header_nav,
  .epao-art #header_navhead,
  .epao-art .header_nav_end { display: none !important; }

  /* ---- 1. index-style top bar (copied from epao-responsive.css) ---- */
  .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; }

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

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

  /* ---- 3. article body: readable, fluid ---- */
  .epao-art #gen_panel { font-size: 16px; line-height: 1.65; color: #22303d; }
  .epao-art #gen_panel p { text-align: left !important; font-size: 16px; line-height: 1.65; margin: 0 0 4px; }
  .epao-art #gen_panel .textblack,
  .epao-art #gen_panel .textblack p { font-size: 16px !important; line-height: 1.65 !important; }
  .epao-art #gen_panel .bodyboldgreen,
  .epao-art #gen_panel .bodybold { font-size: 17px; line-height: 1.4; }
  .epao-art #gen_panel h1, .epao-art #gen_panel h2, .epao-art #gen_panel h3 { line-height: 1.3; }
  .epao-art #gen_panel img {
    max-width: 100% !important; height: auto !important; display: block;
    margin: 8px auto; border: 0;
  }
  .epao-art #gen_panel table {
    max-width: 100% !important; width: auto !important;
    border-collapse: collapse; margin: 0 auto;
  }
  .epao-art #gen_panel td, .epao-art #gen_panel th { max-width: 100%; }
  /* the comment header + Disqus slot are not part of the mobile read
     (the ASP also gates the Disqus loaders off on mobile) */
  .epao-art #gen_panel .related-header,
  .epao-art #gen_panel .titlebrown,
  .epao-art #disqus_thread,
  .epao-art .sharewidget,
  .epao-art .addthis_toolbox { display: none !important; }

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

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

  /* ---- 4. floating "Latest" rail (fed by /latest.html) ---- */
  .epao-art-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: #fd6734; color: #fff; cursor: pointer;
    box-shadow: -2px 2px 10px rgba(20, 40, 70, .3);
  }
  .epao-art-tab__ico { display: inline-flex; }
  .epao-art-tab__ico svg { width: 17px; height: 17px; display: block; }
  .epao-art-tab__cap { font-size: 8px; font-weight: 600; line-height: 1; letter-spacing: .2px; }
  .epao-art-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-art-railscrim.is-on { opacity: 1; visibility: visible; }
  .epao-art-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-art-rail.is-open { transform: none; }
  .epao-art-rail__body {
    flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding: 6px 10px calc(12px + env(safe-area-inset-bottom));
  }
  .epao-art-item {
    display: flex; align-items: center; gap: 10px; padding: 10px 4px;
    border-bottom: 1px solid #e6edf4; text-decoration: none;
  }
  .epao-art-item:last-child { border-bottom: 0; }
  .epao-art-item__th {
    flex: 0 0 auto; width: 46px; height: 46px; object-fit: cover;
    border-radius: 6px; background: #dfe7ef; display: block;
  }
  .epao-art-item__t {
    flex: 1 1 auto; min-width: 0; font-size: 13.5px; line-height: 1.4;
    color: #254666; font-weight: bold;
  }
  /* non-gallery rows get a small bullet in place of a thumbnail */
  .epao-art-item:not(.epao-art-item--gal) .epao-art-item__t {
    position: relative; padding-left: 14px;
  }
  .epao-art-item:not(.epao-art-item--gal) .epao-art-item__t::before {
    content: ''; position: absolute; left: 2px; top: 6px;
    width: 5px; height: 5px; border-radius: 50%; background: #fd6734;
  }

  /* ---- 4b. tap-to-zoom lightbox for content photos ---- */
  .epao-lightbox {
    display: flex; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    z-index: 1700; background: rgba(0, 0, 0, .95);
    align-items: center; justify-content: center;
    opacity: 0; visibility: hidden; transition: opacity .2s;
  }
  .epao-lightbox.is-open { opacity: 1; visibility: visible; }
  .epao-lightbox img {
    max-width: 100vw; max-height: 100vh; width: auto !important;
    height: auto !important; object-fit: contain; margin: 0 !important;
  }
  .epao-lightbox__x {
    position: absolute; top: calc(8px + env(safe-area-inset-top)); right: 10px;
    width: 40px; height: 40px; border: 0; border-radius: 50%;
    background: rgba(255, 255, 255, .16); color: #fff;
    font-size: 24px; line-height: 1; cursor: pointer;
  }

  /* ---- 5. bottom bar: Home + Share ---- */
  .epao-art-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-art-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; cursor: pointer;
  }
  .epao-art-bar__share { background: #254666; color: #fff !important; border-color: #254666; }

  /* ---- 6. share fallback panel + scrim ---- */
  .epao-art-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-art-scrim.is-on { opacity: 1; pointer-events: auto; }
  .epao-art-share {
    display: block; position: fixed; z-index: 1601;
    left: 14px; right: 14px; bottom: calc(64px + 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-art-share.is-open { opacity: 1; pointer-events: auto; transform: none; }
  .epao-art-share a, .epao-art-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-art-share > :last-child { border-bottom: 0; }
}