/* ================================================
   CryptoSnap — Mobile-First Responsive Overrides
   Applied ONLY on small screens (≤ 768px)
   ================================================ */

/* ── Global ── */
@media (max-width: 768px) {
  body { overflow-x: hidden !important; }
  .container, .narrow {
    width: 100% !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    box-sizing: border-box !important;
  }

  /* ── Tape: hide on very small phones to save space ── */
  .tape { font-size: 11px !important; }

  /* ── HEADER ── */
  .header-inner {
    flex-wrap: nowrap !important;
    gap: .5rem !important;
    padding: .55rem 0 !important;
    align-items: center !important;
    min-height: 52px !important;
  }

  /* Logo stays small and aligned */
  .logo { flex-shrink: 0 !important; }
  .logo img { width: 28px !important; height: 28px !important; }
  .logo-text { font-size: 1rem !important; }

  /* Nav becomes a scrollable horizontal bar below header */
  .nav {
    order: 10 !important;
    width: 100% !important;
    flex: none !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    gap: .6rem !important;
    padding: .35rem 0 .5rem !important;
    border-top: 1px solid var(--line) !important;
    margin: 0 -1rem !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  .nav::-webkit-scrollbar { display: none !important; }
  .nav a {
    white-space: nowrap !important;
    font-size: .8rem !important;
    padding: .2rem .1rem !important;
    flex-shrink: 0 !important;
  }

  /* Header tools: compact on right */
  .header-tools {
    margin-left: auto !important;
    flex-shrink: 0 !important;
    gap: .25rem !important;
    flex-wrap: nowrap !important;
    position: relative !important;
  }
  
  /* Icon buttons compact */
  .icon-btn { width: 36px !important; height: 36px !important; }

  /* Header search opens BELOW the icon */
  .header-search { position: relative !important; }
  .header-search-panel {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    right: 0 !important;
    left: auto !important;
    width: min(300px, calc(100vw - 1.25rem)) !important;
    z-index: 90 !important;
  }
  #btnBuyCrypto { padding: .4rem .5rem !important; min-width: 36px !important; }
  #btnBuyCrypto .btn-label { display: none !important; }

  /* Dashboard */
  .dash { padding-left: .25rem !important; padding-right: .25rem !important; }
  .dash-row { flex-direction: column !important; align-items: flex-start !important; gap: .2rem !important; }
  .dash-card { padding: .9rem .85rem !important; }

  /* ── HERO / FEATURED GRID ── */
  .feat { grid-template-columns: 1fr !important; gap: .75rem !important; }
  .feat-main { min-height: 260px !important; }
  .feat-main img { min-height: 260px !important; }
  .feat-main h1 { font-size: 1.2rem !important; }
  .feat-side a { grid-template-columns: 88px 1fr !important; }
  .feat-side a img { height: 68px !important; }

  /* ── HOME CARD GRIDS ── */
  .home-grid { grid-template-columns: 1fr !important; }
  .home-card-grid,
  .home-card-grid-3 { grid-template-columns: 1fr 1fr !important; gap: .65rem !important; }
  .home-card-title { font-size: .82rem !important; }

  .home-two-col { grid-template-columns: 1fr !important; }
  .home-stack .home-card { flex-direction: row !important; }
  .home-stack .home-card-media { width: 100px !important; min-width: 100px !important; }

  /* ── NATIVE ADS (partner images) — CRITICAL FIX ── */
  .ca-partner-horiz,
  .ca-partner-slot,
  [class*="ca-partner"] {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }
  .ca-partner-horiz a,
  .ca-partner-slot a { display: block !important; width: 100% !important; }
  .ca-partner-horiz img,
  .ca-partner-slot img {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    min-height: 72px !important;
    border-radius: 10px !important;
    object-fit: contain !important;
    display: block !important;
  }

  /* ── ARTICLE LAYOUT ── */
  .article-layout {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    padding: 0 1rem !important;
    gap: 1.5rem !important;
    box-sizing: border-box !important;
  }
  .article-main { max-width: 100% !important; overflow: hidden !important; min-width: 0 !important; }
  .article-title { font-size: clamp(1.3rem, 6.2vw, 1.85rem) !important; line-height: 1.25 !important; }
  .article-dek { font-size: .95rem !important; }
  .article-meta-row { flex-wrap: wrap !important; gap: .35rem .7rem !important; font-size: .8rem !important; }
  .prose { overflow-wrap: break-word !important; word-wrap: break-word !important; max-width: 100% !important; font-size: 1.02rem !important; line-height: 1.7 !important; }
  .prose p, .prose li { font-size: 1.02rem !important; }
  /* Show sidebar below the article instead of hiding it */
  .article-sidebar { 
    display: block !important; 
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 1rem !important;
    order: 2 !important;
  }
  .sticky-wrapper { position: static !important; width: 100% !important; }
  .course-rail { display: none !important; }

  /* Article content images */
  .article-hero { border-radius: 8px !important; aspect-ratio: 16/9 !important; }
  .prose img { max-width: 100% !important; height: auto !important; border-radius: 8px !important; }
  .prose pre { overflow-x: auto !important; font-size: .78rem !important; }
  .prose h2 { font-size: 1.2rem !important; }
  .prose h3 { font-size: 1.05rem !important; }
  .premium-gate-card { padding: 1rem .9rem !important; }

  /* Share row: wrap nicely */
  .share-row { flex-wrap: wrap !important; gap: .4rem !important; }
  .share-btn { font-size: .75rem !important; padding: .45rem .7rem !important; }

  /* ── NEWSLETTER BLOCK ── */
  .newsletter-block { padding: 1rem !important; }

  /* ── MARKETS PAGE ── */
  .mkt-hero { grid-template-columns: 1fr !important; }
  .mkt-hero-chart { border-right: 0 !important; border-bottom: 1px solid var(--line) !important; }
  .markets-table-wrap { overflow-x: auto !important; }
  .markets-table th,
  .markets-table td { padding: .55rem .6rem !important; font-size: .8rem !important; }
  /* Hide some columns on mobile to avoid cramping */
  .markets-table .col-mcap,
  .markets-table .col-vol { display: none !important; }
  .ov-grid { grid-template-columns: 1fr 1fr !important; }
  .brief-grid { grid-template-columns: 1fr 1fr !important; gap: .55rem !important; }
  .brief-coins { grid-template-columns: 1fr 1fr !important; }
  .cours-hero { grid-template-columns: 1fr !important; }
  .mkt-overview { padding: .85rem .9rem !important; }

  /* ── TRENDING GRID ── */
  .trend-row { grid-template-columns: 1fr 1fr !important; gap: .75rem !important; }

  /* ── COURSES GRID ── */
  .course-grid,
  .course-grid-sm { grid-template-columns: 1fr !important; }
  .course-detail { grid-template-columns: 1fr !important; }
  .course-detail-cover { max-width: 100% !important; }

  /* ── LAST NEWS GRID ── */
  .ca-last-news-grid { grid-template-columns: 1fr !important; }
  .ca-lead { min-height: 280px !important; }
  .ca-lead img { min-height: 280px !important; }
  .ca-snd { grid-template-columns: 88px 1fr !important; gap: .6rem !important; }
  .ca-snd img, .ca-ph { width: 88px !important; height: 68px !important; }

  /* Guide grid */
  .ca-guide-grid { grid-template-columns: 1fr !important; }

  /* ── LIST ARTICLES ── */
  .list-articles li { grid-template-columns: 1fr !important; gap: .5rem !important; }
  .list-articles .thumb { width: 100% !important; height: 180px !important; }
  .list-articles h3 { font-size: .92rem !important; }

  /* ── FEEDBACK FORM ── */
  .feedback-card { grid-template-columns: 1fr !important; gap: .75rem !important; }
  .feedback-form { grid-template-columns: 1fr !important; }

  /* ── MARKET OVERVIEW ── */
  .ov-grid { 
    display: flex !important; 
    overflow-x: auto !important; 
    scroll-snap-type: x mandatory !important;
    gap: .75rem !important;
    padding-bottom: .5rem !important;
  }
  .ov-grid::-webkit-scrollbar { display: none !important; }
  .ov-card { flex: 0 0 85% !important; scroll-snap-align: center !important; }

  /* ── FOOTER ── */
  .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 1rem !important; }
  .site-footer { padding: 1.5rem 0 1rem !important; }

  /* ── MODALS ── */
  .modal-card {
    width: calc(100vw - 2rem) !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    padding: 1rem !important;
  }
  dialog#popNewsModalClassic {
    max-width: calc(100vw - 1.5rem) !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
  }

  /* ── MARKETS PAGER ── */
  .markets-pager { gap: .25rem !important; }
  .pg-btn { min-width: 2rem !important; height: 2rem !important; font-size: .75rem !important; }

  /* ── API DOCS ── */
  .api-pre { font-size: .72rem !important; padding: .75rem !important; }

  /* ── MISC ── */
  .section-head { margin: 1rem 0 .5rem !important; }
  .cat-filter { gap: .3rem !important; }
  .cat-chip { font-size: .74rem !important; padding: .3rem .6rem !important; }
  .search-page-form { flex-direction: column !important; max-width: 100% !important; }
  .search-page-form input { width: 100% !important; }

  /* Breadcrumbs */
  .breadcrumb { overflow-x: auto !important; white-space: nowrap !important; }

  /* TOC (table of contents) */
  .toc-block { margin: 1rem 0 !important; }
}

/* ── VERY SMALL PHONES (< 400px) ── */
@media (max-width: 400px) {
  .home-card-grid,
  .home-card-grid-3 { grid-template-columns: 1fr !important; }
  .trend-row { grid-template-columns: 1fr !important; }
  .brief-grid { grid-template-columns: 1fr !important; }
  .brief-coins { grid-template-columns: 1fr !important; }
  .ov-grid { grid-template-columns: 1fr !important; }
  .logo-text { display: none !important; } /* Just show logo icon on very tiny */
}

/* ── TABLET (768px - 1024px) ── */
@media (min-width: 769px) and (max-width: 1024px) {
  /* Native ads should always fill width */
  .ca-partner-horiz img {
    max-height: 100px !important;
    object-fit: contain !important;
  }
  .article-layout {
    grid-template-columns: minmax(0,1fr) 240px !important;
    gap: 1.5rem !important;
  }
}