/* design-system/mobile.css
   @media (max-width: 768px) mobile-safe fallback.
   NOT a full mobile-first redesign — that is tracked as P4 plan.
   Goal here: offer.bisovka.co opens on iPhone and remains readable +
   CTA-tappable, instead of a broken zoom-out of a 1920×1080 deck. */

@media screen and (max-width: 768px) {
  /* Slide container: release fixed dimensions, let content flow. */
  section.slide {
    width: 100%;
    height: auto;
    min-height: auto;
    padding: 40px 20px;
    page-break-after: auto;
  }

  /* Typography: fluid scales. */
  .title       { font-size: clamp(32px, 8vw, 64px); line-height: 1.05; }
  .title-md    { font-size: clamp(28px, 7vw, 48px); }
  .title-sm    { font-size: clamp(24px, 6vw, 40px); }
  .lead        { font-size: clamp(18px, 4vw, 24px); }
  .body        { font-size: clamp(16px, 3.5vw, 20px); }
  .small       { font-size: clamp(14px, 3vw, 18px); }

  /* Layout: collapse multi-column grids to single column. */
  .grid-2,
  .grid-3,
  .grid-4,
  .grid-6       { grid-template-columns: 1fr; gap: 16px; }
  .scenarios    { grid-template-columns: 1fr; gap: 0; }

  /* Components: adapt to narrow viewport. */
  .agent-card   { padding: 20px; }
  .tool-card    { padding: 18px; }
  .timeline     { grid-template-columns: 1fr; border-left: 2px solid var(--ink); border-right: none; border-top: none; border-bottom: none; }
  .timeline .tcell { border-right: none; border-bottom: 1px solid var(--ink); padding: 16px 20px; }
  .timeline .tcell:last-child { border-bottom: none; }
  .pain         { grid-template-columns: 1fr; gap: 8px; padding: 20px 0; }
  .pain .pcost  { text-align: left; }
  .pain .pcost b { font-size: 22px; }
  .toc-item     { grid-template-columns: 40px 1fr; }
  .toc-item .toc-range { grid-column: 2; font-size: 14px; color: var(--ink-4); }
  .kpi-row      { grid-template-columns: 1fr; }
  .ba-col       { padding: 16px; }

  /* Header/footer: shrink + reposition. */
  .slide-header { margin-bottom: 24px; font-size: 13px; flex-wrap: wrap; gap: 8px; }
  .footer       { position: static; left: auto; right: auto; bottom: auto; margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--rule-soft); font-size: 13px; }
  .slide.dark .footer { border-top-color: rgba(255,255,255,0.2); }
}