/* ============================================
   responsive.css — SkipTV Media Queries
   ============================================ */

/* ==========================================
   LARGE TABLET / SMALL DESKTOP  (max 1024px)
   ========================================== */

@media (max-width: 1024px) {

  /* Footer */
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }

  /* Stats */
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Pricing */
  .pricing-cards {
    grid-template-columns: 1fr;
    max-width: 480px;
    margin: 0 auto;
  }

  .pricing-card.featured {
    transform: none;
  }

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

  /* Blog */
  .blog-layout {
    grid-template-columns: 1fr;
  }

  .blog-sidebar {
    position: static;
  }

  .blog-sidebar-inner {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }

  .sidebar-widget {
    margin-bottom: 0;
  }

  /* Steps connector line */
  .steps-grid::before {
    display: none;
  }

  /* Devices */
  .devices-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Channels highlight */
  .channels-number {
    font-size: 64px;
  }

  /* Hero */
  .hero-title {
    font-size: 60px;
  }

  /* Comparison table */
  .comparison-table th:not(:first-child),
  .comparison-table td:not(:first-child) {
    width: 140px;
  }
}

/* ==========================================
   TABLET / MOBILE  (max 768px)
   ========================================== */

@media (max-width: 768px) {

  /* Navigation */
  .nav-links,
  .nav-cta {
    display: none;
  }

  .hamburger {
    display: flex;
  }

  /* Typography */
  h1 {
    font-size: 42px;
  }

  h2 {
    font-size: 32px;
  }

  h3 {
    font-size: 22px;
  }

  /* Hero */
  .hero-title {
    font-size: 42px;
  }

  .hero-subtitle {
    font-size: 17px;
  }

  /* Section spacing */
  .section-padding {
    padding: 60px 0;
  }

  .page-hero {
    padding: 120px 0 60px;
  }

  .pricing-hero {
    padding: 120px 0 60px;
  }

  .article-header {
    padding: 120px 0 40px;
  }

  .article-header h1 {
    font-size: 34px;
  }

  /* Grids - all collapse to 1 column */
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }

  /* Stats */
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Steps */
  .steps-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .steps-grid::before {
    display: none;
  }

  /* Testimonials */
  .testimonials-grid {
    grid-template-columns: 1fr;
  }

  /* Trust badges */
  .trust-badges {
    grid-template-columns: 1fr;
  }

  /* Devices */
  .devices-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Blog */
  .blog-grid {
    grid-template-columns: 1fr;
  }

  .blog-card.featured {
    flex-direction: column;
  }

  .blog-card.featured .blog-card-image {
    width: 100%;
    height: 200px;
    margin-bottom: 20px;
  }

  .blog-sidebar-inner {
    grid-template-columns: 1fr;
  }

  /* Related articles */
  .related-grid {
    grid-template-columns: 1fr;
  }

  /* Footer */
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .footer-brand {
    grid-column: auto;
  }

  .footer-brand p {
    max-width: 100%;
  }

  /* CTA Banner */
  .cta-banner {
    padding: 60px 0;
  }

  .cta-banner h2 {
    font-size: 32px;
  }

  .cta-banner p {
    font-size: 16px;
  }

  /* Section heading */
  .section-heading {
    margin-bottom: 40px;
  }

  /* Pricing */
  .pricing-cards {
    max-width: 100%;
  }

  .comparison-section {
    overflow-x: auto;
  }

  /* Stats strip */
  .stats-strip {
    padding: 40px 0;
  }

  /* Article */
  .article-body {
    padding: 40px 16px;
  }

  .article-body h2 {
    font-size: 26px;
    margin: 36px 0 16px;
  }

  .article-body h3 {
    font-size: 20px;
  }

  /* Channels highlight */
  .channels-highlight {
    padding: 32px 24px;
  }

  .channels-number {
    font-size: 56px;
  }

  /* Payment pills */
  .payment-methods {
    gap: 8px;
  }

  /* Mobile menu sidebar stack */
  .mobile-menu {
    width: 280px;
  }

  /* Nav container */
  .nav-container {
    gap: 16px;
  }
}

/* ==========================================
   SMALL MOBILE  (max 480px)
   ========================================== */

@media (max-width: 480px) {

  /* Hero */
  .hero-title {
    font-size: 36px;
  }

  .hero-subtitle {
    font-size: 16px;
  }

  /* Stats */
  .stat-number {
    font-size: 36px;
  }

  /* CTA buttons stack vertically */
  .hero-ctas {
    flex-direction: column;
    align-items: center;
  }

  .cta-banner .cta-buttons {
    flex-direction: column;
    align-items: center;
  }

  /* Button large size adjustments */
  .btn-lg {
    font-size: 16px;
    padding: 16px 28px;
  }

  /* Mobile menu full width */
  .mobile-menu {
    width: 100%;
  }

  /* Container padding tighter */
  .container {
    padding: 0 16px;
  }

  /* Cards */
  .card,
  .card-hover,
  .feature-card,
  .blog-card,
  .pricing-card,
  .trust-badge,
  .testimonial-card {
    padding: 24px;
  }

  /* Article header */
  .article-header h1 {
    font-size: 28px;
  }

  /* Footer bottom links */
  .footer-bottom-links {
    gap: 6px 14px;
  }

  /* Section padding tighter */
  .section-padding {
    padding: 48px 0;
  }

  /* Breadcrumb */
  .breadcrumb {
    padding: 16px 16px 0;
  }

  /* CTA box */
  .cta-box {
    padding: 28px 20px;
  }

  /* Devices - still 2 cols on smallest */
  .devices-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  /* Channels number */
  .channels-number {
    font-size: 44px;
  }

  /* Steps */
  .step-number {
    width: 60px;
    height: 60px;
    font-size: 24px;
  }

  /* H1 inside page hero */
  .page-hero h1 {
    font-size: 34px;
  }

  /* Pricing hero */
  .pricing-hero h1 {
    font-size: 34px;
  }

  /* Trust bar */
  .trust-bar {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }

  /* Author byline */
  .author-byline {
    padding: 24px 16px;
  }

  /* Related articles */
  .related-articles {
    padding: 0 16px;
  }

  /* Share bar */
  .share-bar {
    padding: 20px 16px;
  }

  /* Blog card image shorter on tiny screens */
  .blog-card-image {
    height: 160px;
  }

  /* Accordion */
  .accordion-header {
    font-size: 15px;
  }

  /* Table */
  .table-wrapper {
    border-radius: var(--radius-md);
  }

  th,
  td {
    padding: 12px 16px;
    font-size: 14px;
  }
}

/* ==========================================
   PRINT
   ========================================== */

@media print {
  #site-header,
  #site-footer,
  .blog-sidebar,
  .share-bar,
  .related-articles,
  .cta-box,
  .cta-banner,
  .scroll-indicator,
  .hamburger,
  .mobile-menu,
  .menu-overlay {
    display: none !important;
  }

  body {
    background: #ffffff;
    color: #000000;
  }

  .article-body {
    padding: 20px 0;
    max-width: 100%;
  }

  .article-body p,
  .article-body li {
    color: #333333;
  }

  a {
    color: #000000;
  }

  .container {
    max-width: 100%;
    padding: 0;
  }
}