/* ============================================================
   Responsive — works on phone, tablet, desktop, and PWA
   ============================================================
   Strategy: the app is mobile-first by design. On larger screens,
   we cap the visible area at a comfortable reading width and
   centre it, so the layout never stretches awkwardly.
   ============================================================ */

/* On phones (default) — fill the viewport */
.app {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
}

/* Tablet and up — cap the app width and centre it */
@media (min-width: 600px) {
  body {
    background:
      radial-gradient(ellipse at top, #2a1018 0%, #1a0a10 50%) fixed;
  }

  .app {
    max-width: 480px;
    box-shadow: 0 0 80px rgba(0, 0, 0, 0.5);
    border-left: 1px solid var(--brd);
    border-right: 1px solid var(--brd);
  }

  /* Bottom nav and topbar should match the capped width */
  .topbar,
  .bottom-nav {
    max-width: 480px;
    margin: 0 auto;
    width: 100%;
  }
}

/* Desktop — slightly more breathing room but still phone-shaped */
@media (min-width: 1024px) {
  .app {
    max-width: 520px;
  }
  .topbar,
  .bottom-nav {
    max-width: 520px;
  }

  /* Subtle background pattern on big screens so it doesn't feel empty */
  body::before {
    content: '';
    position: fixed;
    inset: 0;
    background:
      radial-gradient(circle at 20% 30%, rgba(232, 72, 104, 0.04), transparent 40%),
      radial-gradient(circle at 80% 70%, rgba(212, 168, 83, 0.03), transparent 40%);
    pointer-events: none;
    z-index: 0;
  }
}

/* iPad portrait specifically */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  .app {
    max-width: 500px;
  }
  .topbar,
  .bottom-nav {
    max-width: 500px;
  }
}

/* Landscape phones — let it use more vertical space */
@media (max-height: 500px) and (orientation: landscape) {
  .reader__title { font-size: 1.5rem; }
  .topbar { padding: 8px 20px 6px; padding-top: calc(8px + var(--st)); }
  .bottom-nav { padding: 4px 0; padding-bottom: calc(4px + var(--sb)); }
}

/* Featured card height fix — was stretching huge on wide viewports */
.feature-card__img,
.feature-card__placeholder {
  max-height: 320px;
}

/* Story card row should not stretch on wide screens */
.story-card {
  flex: 0 0 160px;
}
@media (min-width: 600px) {
  .story-card {
    flex: 0 0 170px;
  }
}

/* Video grid — adapt columns to width */
@media (min-width: 600px) {
  .video-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Modal — stays full-bleed on phone, capped on desktop */
@media (min-width: 600px) {
  .modal video {
    max-width: 80vw;
  }
}

/* High-DPI tweaks */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .feature-card,
  .story-card {
    box-shadow:
      0 8px 32px rgba(0, 0, 0, 0.3),
      0 1px 0 rgba(255, 255, 255, 0.03) inset;
  }
}

/* PWA standalone mode — extra safe-area padding */
@media (display-mode: standalone) {
  .topbar {
    padding-top: calc(20px + var(--st));
  }
}