/* ========================================
   AVANTI - Responsive Breakpoints
   responsive.css - Mobile First
   ======================================== */

/* --- Tablet (768px+) --- */
@media (min-width: 768px) {
  .container { padding: 0 var(--space-8); }
  .section { padding: var(--space-16) 0; }
  
  .hero-title { font-size: clamp(var(--text-5xl), 10vw, var(--text-7xl)); }
  .hero-subtitle { font-size: var(--text-2xl); }
  
  .work-grid { grid-template-columns: repeat(2, 1fr); }
  .news-grid { grid-template-columns: repeat(2, 1fr); }
  
  .footer-inner { flex-wrap: nowrap; }
}

/* --- Desktop (1024px+) --- */
@media (min-width: 1024px) {
  .container { max-width: 1440px; }
  
  .hero-content { padding: var(--space-12); max-width: 1400px; }
  .hero-title { font-size: var(--text-7xl); }
  
  .work-grid { grid-template-columns: repeat(3, 1fr); }
  .news-grid { grid-template-columns: repeat(3, 1fr); }
  
  .section-header h2 { font-size: var(--text-4xl); }
}

/* --- Large Desktop (1440px+) --- */
@media (min-width: 1440px) {
  .hero-title { font-size: var(--text-7xl); }
  .cta-title { font-size: var(--text-6xl); }
}

/* --- Mobile Menu (max 767px) --- */
@media (max-width: 767px) {
  .nav-toggle { display: block; }
  
  .nav-list {
    position: fixed;
    top: 72px;
    left: 0;
    right: 0;
    background: var(--color-white);
    flex-direction: column;
    padding: var(--space-6);
    gap: var(--space-4);
    border-bottom: 1px solid var(--color-gray-300);
    transform: translateY(-150%);
    transition: transform var(--transition-base);
    z-index: var(--z-header);
  }
  .nav-list.active { transform: translateY(0); }
  
  .nav-toggle[aria-expanded="true"] .nav-toggle-line:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
  }
  .nav-toggle[aria-expanded="true"] .nav-toggle-line:nth-child(2) {
    transform: rotate(-45deg) translate(5px, -5px);
  }
  
  .hero-content { padding: var(--space-6); }
  .hero-actions { flex-direction: column; align-items: flex-start; }
  .btn { width: 100%; max-width: 300px; }
  
  .work-grid, .news-grid { grid-template-columns: 1fr; }
  
  .footer-inner { flex-direction: column; text-align: center; }
  .footer-nav { justify-content: center; }
  .footer-bottom .container { flex-direction: column; text-align: center; }
  .footer-legal { justify-content: center; }
  
  .cookie-banner { flex-direction: column; text-align: center; }
}

/* --- High DPI --- */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .logo img { image-rendering: -webkit-optimize-contrast; }
}