@media (prefers-color-scheme: dark) {
  :root {
    --text-color: #ffffff;
    --bg-color: #000000;
  }
}

/* === CONTAINER QUERIES (when supported) === */
@container (max-width: 400px) {
  .project-card {
    min-width: 100%;
    margin-bottom: 1rem;
  }
}

@media (max-width: 768px) {
  .editorial-container {
    grid-template-columns: 1fr min(95%, 50ch) 1fr;
    gap: var(--spacing-sm);
    padding: 0 var(--spacing-sm);
  }

  .editorial-sidebar {
    grid-column: 1;
    padding-left: 0;
    margin-top: var(--spacing-md);
  }

  .content-block-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-xs);
  }

  /* Drop-cap styles moved to global design-tokens.css with responsive sizing */

  .flex-2col {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .section-header {
    padding-left: 1rem;
    text-align: center;
  }

  .hero-text-wrapper {
    padding-left: 1rem;
    max-width: 100%;
    text-align: center;
  }

  .content-column,
  .image-column {
    border-radius: 1rem;
  }

  .content-column {
    padding: 1.5rem;
  }
}

/* Mobile responsive for SubHero CTA */
@media (max-width: 768px) {
  .subhero-cta-layout {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 1.5rem !important;
  }
  
  .frame-content {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 1.5rem !important;
  }
  
  .subhero-text-content {
    max-width: 100% !important;
  }
  
  .subhero-cta-content {
    width: 100% !important;
  }
  
  .btn-editorial-inline {
    width: 100% !important;
  }
}


/* === MOBILE BLUR OVERLAY === */
@media (max-width: 768px) {
  .parallax-section {
    position: relative;
    padding: 3rem 1rem;
  }
  
  .mobile-blur-overlay {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    background: rgba(0,0,0,0.22);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    overflow: visible;
  }
  
  .mobile-blur-overlay::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 32px;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0) 100%);
    width: 100%;
    z-index: 2;
    display: block;
  }
  
  .mobile-blur-overlay ~ * {
    position: relative;
    z-index: 2;
  }
}

/* === ADDITIONAL MOBILE OPTIMIZATIONS === */
@media (max-width: 480px) {
  /* Typography scaling for small screens */
  .hero-title-editorial {
    font-size: clamp(2rem, 8vw, 3rem) !important;
    line-height: 0.9 !important;
  }
  
  .editorial-heading {
    font-size: clamp(2.5rem, 8vw, 3.5rem) !important;
    line-height: 1.1 !important;
  }
  
  .editorial-body {
    font-size: clamp(0.95rem, 2vw, 1.05rem) !important;
  }
  
  /* Spacing adjustments */
  .parallax-section {
    padding: 2rem 1rem !important;
  }
  
  .content-block {
    margin-bottom: 2rem !important;
  }
  
  .text-frame {
    padding: 1.2rem !important;
    margin: 1rem 0 !important;
  }
  
  /* Interactive elements touch-friendly */
  .btn-editorial,
  .btn-explore,
  .cookie-btn {
    min-height: 48px !important;
    padding: 0.8rem 1.5rem !important;
    font-size: 0.9rem !important;
  }
  
  /* Card spacing */
  .project-card,
  .ethics-card {
    padding: 1.2rem !important;
    margin-bottom: 1rem !important;
  }
  
  /* FAQ adjustments */
  .faq-container {
    width: 98% !important;
    max-height: 90vh !important;
    margin: 0 1% !important;
  }
}

/* === LANDSCAPE PHONE ORIENTATION === */
@media (max-width: 768px) and (orientation: landscape) {
  .hero {
    min-height: 100vh !important;
    padding: 1rem 0 !important;
  }
  
  .hero-content-editorial {
    padding: 1rem !important;
  }
  
  .hero-title-editorial {
    font-size: clamp(2.5rem, 6vw, 3.5rem) !important;
    margin: 0.5rem 0 !important;
  }
}

/* === ACCESSIBILITY IMPROVEMENTS === */
@media (max-width: 768px) {
  /* Larger tap targets */
  .hamburger-trigger {
    width: 56px !important;
    height: 56px !important;
    top: 0.5rem !important;
    right: 0.5rem !important;
  }
  
  /* Better focus visibility */
  .btn-editorial:focus-visible,
  .btn-explore:focus-visible {
    outline: 3px solid var(--brand-cyan) !important;
    outline-offset: 4px !important;
  }
  
  /* Improved readability */
  .pullquote {
    font-size: clamp(1.2rem, 4vw, 1.5rem);
    padding: 1.5rem 2rem;
    margin: 2rem auto;
    text-align: center;
  }
}

/* === PERFORMANCE OPTIMIZATIONS FOR MOBILE === */
@media (max-width: 768px) {
  /* Reduce animations on mobile for better performance */
  .project-card,
  .ethics-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  }
  
  /* Simplify hover effects on touch devices */
  @media (hover: none) {
    .project-card:hover,
    .ethics-card:hover {
      transform: none !important;
      box-shadow: none !important;
    }
    
    .btn-editorial:hover {
      transform: none !important;
    }
  }
}