/* ============================================================
   EGD LIVE — MOBILE EXPERIENCE LAYER
   ============================================================ */

/* Cinema Pulse drawer link — hidden on desktop */
.egd-drawer-cinema-pulse {
  display: none;
}

/* --- Refresh status + pull indicator --- */
.egd-refresh-status {
  display: none;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
  padding: 4px 12px 0;
}

.egd-pull-refresh {
  display: none;
  position: fixed;
  top: 56px;
  left: 50%;
  transform: translateX(-50%) translateY(-120%);
  z-index: 950;
  background: #0f172a;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  transition: transform 0.2s ease, opacity 0.2s ease;
  opacity: 0;
  pointer-events: none;
}

.egd-pull-refresh.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.egd-pull-refresh.spinning svg {
  animation: egdSpin 0.8s linear infinite;
}

@keyframes egdSpin {
  to { transform: rotate(360deg); }
}

/* --- Since you were here --- */
.egd-since-banner {
  display: none;
  margin: 0 0 14px;
  padding: 12px 14px;
  border-radius: 12px;
  background: linear-gradient(135deg, #eff6ff 0%, #f0fdf4 100%);
  border: 1px solid #bfdbfe;
  font-size: 13px;
  font-weight: 600;
  color: #1e3a5f;
  cursor: pointer;
}

.egd-since-banner strong {
  color: #bb1919;
}

/* --- Trending rail --- */
.egd-trending-wrap {
  display: none;
  margin-bottom: 16px;
}

.egd-trending-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  padding: 0 2px;
}

.egd-trending-head h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 800;
  color: #0f172a;
}

.egd-trending-live {
  font-size: 10px;
  font-weight: 800;
  color: #16a34a;
  background: #dcfce7;
  padding: 2px 8px;
  border-radius: 999px;
}

.egd-trending-rail {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.egd-trending-rail::-webkit-scrollbar {
  display: none;
}

.egd-trending-card {
  flex: 0 0 72vw;
  max-width: 280px;
  text-decoration: none;
  color: inherit;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 12px;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
  scroll-snap-align: start;
}

.egd-trending-card h4 {
  margin: 0 0 6px;
  font-size: 13.5px;
  line-height: 1.35;
  font-weight: 700;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.egd-trending-meta {
  font-size: 10.5px;
  color: #64748b;
  font-weight: 600;
}

/* --- Mobile hero swipe carousel --- */
.egd-hero-dots {
  display: none;
  justify-content: center;
  gap: 6px;
  margin: -8px 0 16px;
}

.egd-hero-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #cbd5e1;
  border: none;
  padding: 0;
  cursor: pointer;
}

.egd-hero-dot.active {
  background: #bb1919;
  width: 18px;
  border-radius: 999px;
}

/* --- Category accent borders --- */
/* --- Category accent (mobile list cards only) --- */
@media (max-width: 768px) {
  .egd-cat-main { border-left: 3px solid #64748b !important; }
  .egd-cat-world { border-left: 3px solid #2563eb !important; }
  .egd-cat-business { border-left: 3px solid #059669 !important; }
  .egd-cat-tech { border-left: 3px solid #7c3aed !important; }
  .egd-cat-entertainment { border-left: 3px solid #db2777 !important; }
  .egd-cat-science { border-left: 3px solid #0891b2 !important; }
  .egd-cat-sports { border-left: 3px solid #ea580c !important; }
  .egd-cat-geopolitics { border-left: 3px solid #4f46e5 !important; }
  .egd-cat-climate { border-left: 3px solid #16a34a !important; }
  .egd-cat-techreviews { border-left: 3px solid #0d9488 !important; }

  .bbc-four-col-grid .egd-cat-main,
  .bbc-four-col-grid .egd-cat-world,
  .bbc-four-col-grid .egd-cat-business,
  .bbc-four-col-grid .egd-cat-tech,
  .bbc-four-col-grid .egd-cat-entertainment,
  .bbc-four-col-grid .egd-cat-science,
  .bbc-four-col-grid .egd-cat-sports,
  .bbc-four-col-grid .egd-cat-geopolitics,
  .bbc-four-col-grid .egd-cat-climate,
  .bbc-four-col-grid .egd-cat-techreviews {
    border-left: none !important;
  }
}

/* --- Card share / save actions --- */
.egd-card-actions {
  display: none;
  gap: 8px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid #f1f5f9;
}

.egd-card-action-btn {
  flex: 1;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #334155;
  font-size: 11px;
  font-weight: 700;
  padding: 6px 8px;
  border-radius: 8px;
  cursor: pointer;
}

.egd-card-action-btn.saved {
  background: #fef2f2;
  border-color: #fecaca;
  color: #bb1919;
}

/* --- Bottom navigation --- */
.egd-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid #e2e8f0;
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
  box-shadow: 0 -4px 20px rgba(15, 23, 42, 0.08);
}

.egd-bottom-nav-inner {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  max-width: 520px;
  margin: 0 auto;
}

.egd-bottom-nav-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  border: none;
  background: transparent;
  color: #64748b;
  font-size: 9.5px;
  font-weight: 700;
  padding: 6px 4px;
  border-radius: 10px;
  cursor: pointer;
}

.egd-bottom-nav-btn svg {
  width: 20px;
  height: 20px;
}

.egd-bottom-nav-btn.active {
  color: #bb1919;
  background: #fef2f2;
}

/* --- Feed enter animation --- */
.egd-feed-enter .bbc-hero-module,
.egd-feed-enter .egd-trending-wrap,
.egd-feed-enter .bbc-four-col-grid {
  animation: egdFadeUp 0.35s ease both;
}

@keyframes egdFadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   MOBILE BREAKPOINT ACTIVATION
   ============================================================ */
@media (max-width: 768px) {
  .bbc-subnav-clean-wrap {
    display: none !important;
  }

  .egd-refresh-status,
  .egd-card-actions {
    display: block;
  }

  .egd-card-actions {
    display: flex;
  }

  /* Bottom nav removed on mobile — use header menu instead */
  .egd-bottom-nav {
    display: none !important;
  }

  .egd-cp-mobile-chip {
    display: none !important;
  }

  .bbc-main-container {
    padding-bottom: calc(20px + env(safe-area-inset-bottom)) !important;
  }

  /* Brighter mobile reading surface */
  html,
  body {
    background: #ffffff !important;
    background-image: none !important;
    color: #0f172a !important;
  }

  .bbc-main-container,
  #output {
    background: #ffffff !important;
    background-image: none !important;
  }

  .bbc-hero-module,
  .bbc-quad-card,
  .bbc-grid-tile,
  .bbc-grid-card,
  .bbc-hero-trio-card,
  .bbc-hero-lead-card,
  .bbc-sec-card,
  .footer-column-card {
    background: #ffffff !important;
    background-image: none !important;
    border-color: #e5e7eb !important;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.06) !important;
  }

  .bbc-hero-lead-headline,
  .bbc-hero-trio-headline,
  .bbc-grid-headline,
  .bbc-quad-content h3 {
    color: #0a0a0a !important;
  }

  .bbc-grid-summary,
  .bbc-card-footer,
  .bbc-article-meta,
  .bbc-article-meta-hero,
  .bbc-article-meta-trio,
  .egd-refresh-status {
    color: #334155 !important;
  }

  .bbc-meta-topic span,
  .bbc-meta-topic-hero span {
    color: var(--egd-nav-red) !important;
    font-weight: 800 !important;
  }

  .bbc-hero-lead-img-wrap img,
  .bbc-hero-trio-img-wrap img,
  .bbc-grid-img-wrap img {
    filter: none !important;
    opacity: 1 !important;
  }

  .egd-feed-enter .bbc-hero-module,
  .egd-feed-enter .bbc-four-col-grid {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  /* Keep header bright when scrolling (no black shrink bar on phones) */
  #bbcStickyTopBar.is-scrolled,
  .bbc-top-bar-clean.is-scrolled {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border-bottom: 1px solid #e5e7eb !important;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.08) !important;
  }

  #bbcStickyTopBar.is-scrolled .egd-brand-badge-left,
  .bbc-top-bar-clean.is-scrolled .egd-brand-badge-left {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
  }

  #bbcStickyTopBar.is-scrolled .egd-brand-badge-left .bbc-brand-title,
  .bbc-top-bar-clean.is-scrolled .egd-brand-badge-left .bbc-brand-title {
    color: #000000 !important;
  }

  .bbc-top-bar-clean.is-scrolled .bbc-nav-icon-btn svg,
  .bbc-top-bar-clean.is-scrolled .bbc-nav-icon-btn svg line,
  .bbc-top-bar-clean.is-scrolled .bbc-nav-icon-btn svg circle {
    stroke: #000000 !important;
  }

  .egd-since-banner {
    display: block;
  }

  /* Editorial hero — full width stacked on mobile */
  .bbc-editorial-hero,
  .bbc-hero-module,
  .egd-mobile-hero.bbc-hero-module {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .bbc-hero-top,
  .bbc-hero-trio {
    display: block !important;
    width: 100% !important;
  }

  .bbc-hero-latest {
    display: none !important;
  }

  .egd-trending-wrap {
    display: none !important;
  }

  .bbc-hero-trio {
    margin-top: 16px !important;
  }

  .bbc-hero-trio-card {
    margin-bottom: 16px;
  }

  .bbc-quad-grid,
  .egd-mobile-hero .bbc-quad-grid {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
  }

  .bbc-quad-card,
  .egd-mobile-hero .bbc-quad-card {
    flex: none !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .egd-hero-dots {
    display: none !important;
  }

  .bbc-wire-rail {
    display: none !important;
  }

  #output {
    width: 100%;
    max-width: 100%;
  }

  .back-to-top-btn {
    bottom: calc(20px + env(safe-area-inset-bottom));
    right: 18px;
    width: 44px;
    height: 44px;
  }

  .egd-drawer-cinema-pulse {
    display: block;
    color: #9a3412;
    font-weight: 700;
  }

  /* Cinema Pulse — mobile bottom sheet (menu access only) */
  .egd-cp-mobile-overlay {
    position: fixed;
    inset: 0;
    z-index: 10050;
    background: rgba(8, 4, 10, 0.55);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, visibility 0.25s ease;
  }

  .egd-cp-mobile-overlay.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .egd-cp-mobile-sheet {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: min(88vh, 720px);
    border-radius: 18px 18px 0 0;
    background: #12081a;
    box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.35);
    transform: translateY(100%);
    transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
    overflow: hidden;
  }

  .egd-cp-mobile-overlay.is-open .egd-cp-mobile-sheet {
    transform: translateY(0);
  }

  .egd-cp-mobile-handle {
    width: 42px;
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.28);
    margin: 10px auto 6px;
  }

  .egd-cp-mobile-close {
    position: absolute;
    top: 10px;
    right: 12px;
    z-index: 3;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(212, 175, 55, 0.35);
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);
    color: #f5e6b8;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
  }

  .egd-cp-mobile-body {
    max-height: calc(min(88vh, 720px) - 24px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 12px calc(16px + env(safe-area-inset-bottom));
  }

  .egd-cinema-pulse--mobile-sheet {
    margin-bottom: 0;
  }

  .egd-cinema-pulse--mobile-sheet .egd-cp-strip-item {
    min-width: 58px;
    max-width: 72px;
  }

  .egd-cp-mobile-empty {
    margin: 24px 12px 40px;
    text-align: center;
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
  }

  body.egd-cp-mobile-open {
    overflow: hidden;
  }
}

@media (prefers-color-scheme: dark) {
  @media (max-width: 768px) {
    html,
    body,
    .bbc-main-container,
    #output {
      background: #ffffff !important;
      background-image: none !important;
      color: #0f172a !important;
    }

    .egd-bottom-nav,
    .egd-cp-mobile-chip {
      display: none !important;
    }

    .egd-trending-card,
    .egd-mobile-hero .bbc-quad-card,
    .bbc-hero-trio-card,
    .bbc-grid-tile,
    .bbc-hero-lead-card {
      background: #ffffff !important;
      background-image: none !important;
      border-color: #e5e7eb !important;
      color: #0f172a !important;
      box-shadow: 0 1px 4px rgba(15, 23, 42, 0.06) !important;
    }

    .bbc-hero-lead-headline,
    .bbc-hero-trio-headline,
    .bbc-grid-headline {
      color: #0a0a0a !important;
    }

    .bbc-grid-summary,
    .bbc-card-footer,
    .bbc-article-meta {
      color: #334155 !important;
    }
  }
}