/**
 * Responsive Design Styles
 * Author: Luis Gilberto
 * Version: 1.0
 * 
 * Comprehensive responsive breakpoints for optimal viewing
 * across all device types and screen sizes.
 */

/* ===== BREAKPOINT DEFINITIONS ===== */
/* Mobile: 320px - 767px */
/* Tablet: 768px - 1023px */
/* Desktop: 1024px+ */
/* Large Desktop: 1200px+ */

/* ===== TABLET STYLES (768px - 1023px) ===== */
@media (max-width: 1023px) and (min-width: 768px) {
  .container {
    padding: 0 1.5rem;
  }
  
  .content-grid {
    grid-template-columns: 60% 35%;
    gap: 5%;
  }
  
  h1 {
    font-size: 2.2rem;
  }
  
  h2 {
    font-size: 1.8rem;
  }
  

}

/* ===== MOBILE STYLES (320px - 767px) ===== */
@media (max-width: 767px) {
  .container {
    padding: 0 1rem;
  }
  
  /* Single column layout for mobile */
  .content-grid {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }
  
  .main-content, .visual-element {
    grid-column: 1;
  }
  
  /* Typography adjustments */
  html, body {
    font-size: 16px;
  }
  
  h1 {
    font-size: 2rem;
    margin-top: 1.5rem;
  }
  
  h2 {
    font-size: 1.6rem;
    margin-top: 2rem;
  }
  
  h3 {
    font-size: 1.3rem;
  }
  
  /* Drop cap adjustments */
  .drop-cap::first-letter {
    font-size: 3rem;
    padding-right: 6px;
    padding-top: 6px;
  }
  
  /* Pull quote adjustments */
  .pull-quote {
    font-size: 1.1rem;
    padding: var(--space-sm);
    margin: var(--space-sm) 0;
  }
  
  /* Footer adjustments */
  .footer-content {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }
  

  
  /* Data visualization adjustments */
  .data-visual {
    height: 180px;
  }
  
  .circular-progress {
    width: 100px;
    height: 100px;
  }
  
  .circular-progress-inner {
    width: 75px;
    height: 75px;
    font-size: 1.2rem;
  }
  
  /* Timeline adjustments */
  .timeline {
    padding-left: 15px;
  }
  
  .timeline-item::before {
    left: -20px;
    width: 8px;
    height: 8px;
  }
}

/* ===== SMALL MOBILE STYLES (320px - 479px) ===== */
@media (max-width: 479px) {
  .container {
    padding: 0 0.75rem;
  }
  
  html, body {
    font-size: 15px;
  }
  
  h1 {
    font-size: 1.8rem;
  }
  
  h2 {
    font-size: 1.5rem;
  }
  

  
  .data-visual {
    height: 160px;
  }
  
  .pull-quote {
    font-size: 1rem;
  }
}

/* ===== LARGE DESKTOP STYLES (1200px+) ===== */
@media (min-width: 1200px) {
  .container {
    max-width: 1400px;
    padding: 0 3rem;
  }
  
  .content-grid {
    grid-template-columns: 68% 27%;
    gap: 5%;
  }
  
  h1 {
    font-size: 2.8rem;
  }
  
  h2 {
    font-size: 2.2rem;
  }
  

}

/* ===== ULTRA-WIDE DESKTOP STYLES (1600px+) ===== */
@media (min-width: 1600px) {
  .container {
    max-width: 1600px;
    padding: 0 4rem;
  }
  
  .content-grid {
    grid-template-columns: 70% 25%;
    gap: 5%;
  }
}

/* ===== PRINT STYLES ===== */
@media print {

  
  .content-grid {
    grid-template-columns: 1fr;
  }
  
  .visual-element {
    break-inside: avoid;
    margin-bottom: var(--space-sm);
  }
  
  body {
    background: white !important;
    color: black !important;
  }
  
  .data-visual,
  .author-bio,
  .cta-card {
    border: 1px solid #ccc;
  }
}

/* ===== ACCESSIBILITY & MOTION PREFERENCES ===== */
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
  

}

/* High contrast mode support */
@media (prefers-contrast: high) {
  :root {
    --border-subtle: rgba(255, 255, 255, 0.3);
  }
  
  [data-theme="light"] {
    --border-subtle: rgba(0, 0, 0, 0.3);
  }
  

}