/* ═══════════════════════════════════════════════════════════════════════════
   Ultra-Premium Responsive - Wave 3
   All responsive rules for mobile, tablet, and ultra-wide breakpoints.
   ═══════════════════════════════════════════════════════════════════════════ */

@layer components {

  /* --- 3.2 Mobile dashboard screenshot rules --- */
  @media (max-width: 767px) {
    .pcar__slide img,
    .ca-viewport img {
      object-fit: cover;
      object-position: top left;
      aspect-ratio: 4/3;
    }
  }

  /* --- 3.3 Carousel frame mobile fit --- */
  @media (max-width: 767px) {
    .ca-viewport {
      aspect-ratio: auto;
      height: auto;
    }
  }

  /* --- 3.4 Carousel caption mobile contrast --- */
  @media (max-width: 767px) {
    .pcar__caption,
    .ca-glass-premium p {
      font-size: 14px;
      background: rgba(0,0,0,0.6);
      padding: 12px 16px;
      border-radius: 6px;
    }
  }

  /* --- 3.6 Tablet breakpoint (768-1024px) --- */
  @media (min-width: 768px) and (max-width: 1024px) {
    .ca-sector-grid {
      grid-template-columns: repeat(2, 1fr);
    }
    .grid-cols-4,
    .lg\:grid-cols-4 {
      grid-template-columns: repeat(2, 1fr);
    }
    .grid-cols-3,
    .lg\:grid-cols-3 {
      grid-template-columns: repeat(2, 1fr);
    }
    a, button, [role="button"] {
      min-height: 44px;
      min-width: 44px;
    }
  }

  /* --- 3.7 Ultra-wide breakpoint (2560px+) --- */
  @media (min-width: 2560px) {
    .ca-container {
      max-width: 100rem;
    }
    :root {
      --space-section: calc(5rem * 1.25);
    }
    body {
      font-size: 1.125rem;
    }
    h1, .ca-hero-title, .cz-hero-title {
      font-size: clamp(4rem, 8vw, 7rem);
    }
    h2, .ca-section-title {
      font-size: clamp(2.5rem, 4vw, 4rem);
    }
  }

  /* --- 3.8 Blog page responsive rules --- */

  /* Blog responsive - single column on mobile, TOC below article */
  @media (max-width: 767px) {
    .lg\:col-span-4 {
      order: 2;
    }
    .lg\:col-span-8 {
      order: 1;
    }
    .sticky {
      position: static;
    }
    .article-body {
      font-size: clamp(1rem, 1.1rem + 0.2vw, 1.25rem);
    }
    .article-body img {
      max-width: 100%;
      height: auto;
    }
    .article-body h2 {
      font-size: 1.5rem;
    }
  }

  /* Blog tablet: TOC 3-col, article 9-col */
  @media (min-width: 768px) and (max-width: 1024px) {
    .lg\:col-span-4 {
      grid-column: span 3;
    }
    .lg\:col-span-8 {
      grid-column: span 9;
    }
  }

  /* Blog index grid responsive */
  @media (max-width: 767px) {
    .blog-grid {
      grid-template-columns: 1fr;
    }
  }
  @media (min-width: 768px) and (max-width: 1024px) {
    .blog-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  @media (min-width: 1025px) {
    .blog-grid {
      grid-template-columns: repeat(3, 1fr);
    }
  }

} /* end @layer components */