/* ═══════════════════════════════════════════════════════
   10-RESPONSIVE.CSS — Mobile-First Breakpoints
   ═══════════════════════════════════════════════════════ */

/* ─── Tablet (768px and below) ─── */
@media (max-width: 1024px) {
  .pakiety-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
  }

  .hero {
    padding: var(--space-20) var(--space-4) var(--space-12);
  }

  .section {
    padding: var(--space-12) var(--space-4);
  }

  .product-grid {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  .site-logo {
    font-size: var(--text-base);
  }

  .btn {
    padding: var(--space-3) var(--space-5);
    font-size: var(--text-xs);
  }

  .manifesto-grid {
    grid-template-columns: 1fr;
  }

  .song-panel {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .o-mnie-grid {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }

  .opinie-grid {
    grid-template-columns: 1fr;
  }

  .form-container {
    padding: var(--space-8) var(--space-5);
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .credentials {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ─── Mobile (768px and below) ─── */
@media (max-width: 768px) {
  .premium-20-grid {
    grid-template-columns: 1fr;
  }

  .analyses-2x2-grid {
    grid-template-columns: 1fr;
  }

  .premium-featured-card .featured-title {
    font-size: var(--text-xl);
  }

  .btn {
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-xs);
  }

  .hero-content h1 {
    font-size: var(--text-4xl);
  }

  .section-title {
    font-size: var(--text-3xl);
  }

  .ecosystem-grid {
    grid-template-columns: 1fr;
  }

  .benefits-grid {
    grid-template-columns: 1fr;
  }

  .audience-grid {
    grid-template-columns: 1fr;
  }

  .hero-stats {
    flex-direction: column;
    gap: var(--space-4);
  }

  .hero-actions {
    flex-direction: column;
    width: 100%;
  }

  .hero-actions .btn {
    width: 100%;
  }
}

/* ─── Small Mobile (680px and below) ─── */
@media (max-width: 680px) {
  .pakiety-grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .hero-badges {
    grid-template-columns: 1fr;
  }

  .credentials {
    grid-template-columns: 1fr;
  }

  .sticky-cta {
    padding: var(--space-4);
    flex-direction: column;
    gap: var(--space-3);
    text-align: center;
  }
}

/* ─── Extra Small (480px and below) ─── */
@media (max-width: 480px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }

  .hero-content h1 {
    font-size: var(--text-3xl);
  }

  .article-title {
    font-size: var(--text-xl);
  }

  .ticker-title {
    min-width: 90px;
    font-size: var(--text-xs);
  }

  .categories-nav {
    display: none;
  }

  .song-tabs {
    gap: var(--space-1);
  }

  .song-tab {
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-xs);
  }

  .container {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }
}

/* ─── Print Styles ─── */
@media print {
  .site-header,
  .site-footer,
  .nav-toggle,
  #backToTop,
  .tickers-container,
  .announcement-bar {
    display: none !important;
  }

  body {
    background: white;
    color: black;
  }

  a {
    color: black;
    text-decoration: underline;
  }

  .card,
  .product-card,
  .eco-card {
    border: 1px solid #ccc;
    page-break-inside: avoid;
  }
}

/* ─── High Contrast Mode ─── */
@media (prefers-contrast: high) {
  :root {
    --border-default: rgba(255, 255, 255, 0.3);
    --border-hover: rgba(255, 255, 255, 0.5);
    --text-secondary: #cccccc;
  }
}

/* ─── Dark Mode (already default, but explicit) ─── */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
  }
}