/* =============================================================================
   Responsive - Breakpoints and responsive design utilities
   ============================================================================= */

/* ========== MOBILE FIRST BREAKPOINTS ========== */

/* Default: Mobile (320px and up) */
/* Covered by mobile-first base styles in other files */

/* Tablet (768px and up) */
@media (min-width: 768px) {
  body {
    font-size: 16px;
  }

  .container {
    max-width: var(--container-width-desktop);
    padding: 0 var(--spacing-lg);
  }

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

  .grid-cols-3-tablet {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Layout adjustments for tablet */
  .flex-tablet-row {
    flex-direction: row;
  }

  .flex-tablet-col {
    flex-direction: column;
  }

  /* Show/hide utilities for tablet */
  .hidden-tablet {
    display: none;
  }

  .show-tablet {
    display: block;
  }

  .show-tablet.flex {
    display: flex;
  }

  .show-tablet.grid {
    display: grid;
  }

  /* Spacing adjustments */
  .gap-md-tablet {
    gap: var(--spacing-md);
  }

  .gap-lg-tablet {
    gap: var(--spacing-lg);
  }
}

/* Desktop (1024px and up) */
@media (min-width: 1024px) {
  .container {
    max-width: var(--container-width-desktop);
  }

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

  .grid-cols-3-desktop {
    grid-template-columns: repeat(3, 1fr);
  }

  .grid-cols-4-desktop {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Layout adjustments for desktop */
  .flex-desktop-row {
    flex-direction: row;
  }

  .flex-desktop-col {
    flex-direction: column;
  }

  /* Show/hide utilities for desktop */
  .hidden-desktop {
    display: none;
  }

  .show-desktop {
    display: block;
  }

  .show-desktop.flex {
    display: flex;
  }

  .show-desktop.grid {
    display: grid;
  }

  /* Typography adjustments for larger screens */
  h1 {
    font-size: var(--font-size-h1);
  }

  h2 {
    font-size: var(--font-size-h2);
  }

  /* Two-column layouts on desktop */
  .two-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-lg);
  }

  .two-column-main {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--spacing-lg);
  }

  .two-column-sidebar {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: var(--spacing-lg);
  }
}

/* Wide desktop (1400px and up) */
@media (min-width: 1400px) {
  .container {
    max-width: var(--container-width-wide);
  }

  .grid-cols-4-wide {
    grid-template-columns: repeat(4, 1fr);
  }

  .grid-cols-5-wide {
    grid-template-columns: repeat(5, 1fr);
  }

  .grid-cols-6-wide {
    grid-template-columns: repeat(6, 1fr);
  }
}

/* ========== MOBILE-SPECIFIC (Below 768px) ========== */
@media (max-width: 767px) {
  /* Stack everything single-column on mobile */
  .flex-row {
    flex-direction: column;
  }

  .grid-cols-2, .grid-cols-3, .grid-cols-4,
  .grid-cols-2-tablet, .grid-cols-2-desktop,
  .grid-cols-3-tablet, .grid-cols-3-desktop {
    grid-template-columns: 1fr;
  }

  /* Larger touch targets on mobile */
  button, .button, input[type="button"], input[type="submit"] {
    min-height: 48px;
    min-width: 48px;
  }

  /* Reduce padding on mobile */
  .container {
    padding: 0 var(--spacing-md);
  }

  .chapter, .card, .evidence-box, .quote-box {
    padding: var(--spacing-md);
  }

  .accordion-header, .accordion-content.active {
    padding: var(--spacing-md);
  }

  /* Reduce margins on mobile */
  .m-lg, .m-xl, .m-2xl, .m-3xl {
    margin: var(--spacing-md);
  }

  .mb-lg, .mb-xl, .mb-2xl, .mb-3xl {
    margin-bottom: var(--spacing-md);
  }

  .mt-lg, .mt-xl, .mt-2xl, .mt-3xl {
    margin-top: var(--spacing-md);
  }

  /* Adjust typography on mobile */
  h1 {
    font-size: 1.8rem;
    margin-bottom: var(--spacing-md);
  }

  h2 {
    font-size: 1.4rem;
    margin-bottom: var(--spacing-md);
  }

  h3 {
    font-size: 1.2rem;
    margin-bottom: var(--spacing-sm);
  }

  /* Hide desktop-only content */
  .hidden-mobile {
    display: none !important;
  }

  .show-mobile {
    display: block !important;
  }

  .show-mobile.flex {
    display: flex !important;
  }

  .show-mobile.grid {
    display: grid !important;
  }

  /* Stack two-column layouts on mobile */
  .two-column, .two-column-main, .two-column-sidebar {
    grid-template-columns: 1fr;
  }

  /* Adjust form inputs on mobile */
  input, textarea, select {
    font-size: 16px; /* Prevents zoom on iOS */
  }

  /* Full-width buttons on mobile */
  .button-block {
    width: 100%;
  }
}

/* ========== SMALL MOBILE (Below 480px) ========== */
@media (max-width: 479px) {
  /* Aggressive spacing reduction on small screens */
  :root {
    --spacing-lg: 16px;
    --spacing-xl: 24px;
    --section-padding: var(--spacing-md);
  }

  body {
    font-size: 14px;
  }

  h1 {
    font-size: 1.5rem;
  }

  h2 {
    font-size: 1.2rem;
  }

  h3 {
    font-size: 1rem;
  }

  .chapter, .card, .evidence-box, .quote-box {
    padding: var(--spacing-sm);
  }

  .player-btn {
    min-width: 36px;
    min-height: 36px;
    padding: 8px;
  }

  .player-time-display {
    font-size: var(--font-size-xs);
  }
}

/* ========== ORIENTATION-SPECIFIC ========== */

/* Landscape orientation on small screens */
@media (max-width: 768px) and (orientation: landscape) {
  .chapter, .card, .evidence-box {
    padding: var(--spacing-md) var(--spacing-lg);
  }

  .accordion-header {
    padding: var(--spacing-sm) var(--spacing-lg);
  }

  h1, h2 {
    margin-bottom: var(--spacing-sm);
  }
}

/* ========== PRINT STYLES ========== */
@media print {
  * {
    background-color: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  body {
    font-size: 12pt;
    line-height: 1.4;
  }

  .container {
    max-width: 100%;
  }

  /* Hide non-printable elements */
  .nav-button, .player-controls, .player-meta,
  .resources-section, .trigger-warning {
    display: none !important;
  }

  /* Expand accordions for printing */
  .accordion-content {
    max-height: none !important;
    display: block !important;
  }

  details {
    break-inside: avoid;
  }

  details summary {
    display: list-item;
    cursor: default;
  }

  /* Preserve page breaks */
  .chapter, .evidence-box {
    page-break-inside: avoid;
    break-inside: avoid;
  }

  /* Remove shadows and transitions for print */
  button, .button, .card, .chapter {
    box-shadow: none !important;
    transition: none !important;
  }

  /* Links should be visible with color */
  a {
    color: #0066cc !important;
    text-decoration: underline !important;
  }

  /* Show URLs after links */
  a[href]:after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
  }
}

/* ========== REDUCED MOTION ========== */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  html {
    scroll-behavior: auto !important;
  }
}

/* ========== CONTRAST ========== */
@media (prefers-contrast: more) {
  :root {
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.4);
    --border-width-sm: 2px;
  }

  button:focus-visible {
    outline-width: 3px;
    outline-offset: 3px;
  }
}

/* ========== FORCED COLORS ========== */
@media (forced-colors: active) {
  button, .button {
    border: 2px solid;
  }

  .card, .chapter {
    border: 1px solid;
  }

  button:focus-visible, a:focus-visible {
    outline: 2px solid;
  }
}