/**
 * DEFCON Level, Main Responsive Breakpoints
 * Tablet and mobile responsive rules for typography, layout, grids, hero sections, navigation, and cards.
 *
 * Part of the Defcon site CSS (builds on engine base theme).
 * Load order managed by config/site.php → site_css array.
 */

/* ================================================================
   RESPONSIVE - Mobile-First Approach
   Easy reading on all screen sizes
   ================================================================ */

/* Tablet (768px) */
@media (max-width: 768px) {
  h1 {
    font-size: var(--text-2xl);
  }

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

  h3 {
    font-size: var(--text-lg);
  }

  .level-big-number {
    font-size: 5rem;
  }


  .history-timeline {
    padding-left: var(--space-6);
  }

  .timeline-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }

  .article-header h1 {
    font-size: var(--text-2xl);
    line-height: 1.3;
  }

  /* Card grids become 2 columns */
  .commands-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Command card grid - 2 columns on tablet */
  .command-card-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
  }

  .command-card {
    padding: var(--space-5);
  }

  /* Level blocks stack on mobile */
  .level-block {
    flex-direction: column;
    text-align: center;
  }

  .level-badge-img {
    max-width: 90px;
    max-height: 90px;
    width: auto;
    height: auto;
    margin: 0 auto;
  }

  .level-meta {
    justify-content: center;
  }

  /* Current page hero stacks */
  .current-hero {
    grid-template-columns: 1fr;
  }

  .current-badge-container {
    order: -1;
  }
}

/* Mobile (480px and below) */
@media (max-width: 480px) {

  /* Base typography, 18px minimum for Journey/Mediavine compliance */
  body {
    font-size: 18px;
    /* iOS zoom prevention */
    line-height: 1.7;
    /* Better readability */
  }

  h1 {
    font-size: 1.5rem;
    line-height: 1.3;
    word-wrap: break-word;
  }

  h2 {
    font-size: 1.25rem;
  }

  h3 {
    font-size: 1.125rem;
  }

  /* Container padding for mobile */
  .container {
    padding: 0 var(--space-3);
  }

  .article-header {
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-3);
  }

  .lead {
    font-size: 1rem;
    line-height: 1.7;
  }

  /* Larger touch targets */
  .btn {
    padding: var(--space-4) var(--space-6);
    min-height: 44px;
    /* Apple HIG minimum */
  }

  .navbar-link {
    padding: var(--space-3) var(--space-4);
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /* Cards stack on mobile */
  .commands-grid,
  .platform-cards {
    grid-template-columns: 1fr;
  }

  /* Command card grid - 2 columns on mobile for better layout */
  .command-card-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
  }

  /* Level display */
  .level-big-number {
    font-size: 4rem;
  }

  .level-card {
    padding: var(--space-4);
  }

  .level-header {
    flex-direction: column;
    text-align: center;
    gap: var(--space-3);
  }

  /* Alert cards - tap-friendly */
  .alert-card {
    padding: var(--space-4);
    margin-bottom: var(--space-4);
  }

  .alert-card .alert-badge img {
    max-width: 90px !important;
    max-height: 90px !important;
    width: auto !important;
    height: auto !important;
  }

  .alert-card .alert-body {
    padding: var(--space-3);
  }

  .alert-card h3 {
    font-size: var(--text-base);
    line-height: 1.4;
    margin-bottom: var(--space-2);
  }

  .alert-card p {
    font-size: var(--text-sm);
    line-height: 1.6;
    margin-bottom: var(--space-3);
  }

  .alert-actions {
    flex-direction: column;
    gap: var(--space-2);
  }

  .alert-actions .btn {
    width: 100%;
    font-size: var(--text-sm);
  }

  /* Blips on mobile */
  .blip {
    padding: var(--space-3);
    margin-bottom: var(--space-3);
    flex-direction: column;
    align-items: flex-start;
  }

  .blip-logo {
    width: 50px;
    height: 50px;
    margin-bottom: var(--space-2);
    flex-shrink: 0;
  }

  .blip-logo img,
  .blip-command-logo {
    /* Ensure images load properly on mobile */
    display: block;
    max-width: 60px;
    max-height: 60px;
    width: auto;
    height: auto;
    object-fit: contain;
    object-position: center;
    /* Prevent image flashing/glitching on mobile */
    will-change: auto;
    transform: translateZ(0);
    backface-visibility: hidden;
  }

  .blip-meta {
    font-size: var(--text-xs);
    margin-bottom: var(--space-2);
    word-wrap: break-word;
    overflow-wrap: break-word;
    /* Prevent text flashing on mobile */
    will-change: auto;
    transform: translateZ(0);
    /* Prevent text truncation that causes flashing */
    white-space: normal;
    text-overflow: clip;
    overflow: visible;
  }

  .blip-text {
    font-size: var(--text-sm);
    line-height: 1.6;
    margin-bottom: var(--space-2);
    word-wrap: break-word;
    overflow-wrap: break-word;
    /* Prevent text flashing on mobile */
    will-change: auto;
    transform: translateZ(0);
    /* Prevent text truncation that causes flashing */
    white-space: normal;
    text-overflow: clip;
    overflow: visible;
  }

  .blip-links a {
    font-size: var(--text-xs);
    padding: var(--space-1) 0;
  }

  /* Command cards on mobile */
  .command-card {
    padding: var(--space-4);
    min-height: auto;
    gap: var(--space-2);
  }

  .command-card-logo {
    max-width: 95px;
    max-height: 95px;
    width: auto;
    height: auto;
    margin-bottom: var(--space-2);
    /* Better image rendering on mobile */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: auto;
  }

  .command-preview-logo {
    max-width: 95px;
    max-height: 95px;
    width: auto;
    height: auto;
    /* Better image rendering on mobile */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: auto;
  }

  .command-meta {
    text-align: center;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .command-meta h3 {
    font-size: var(--text-base);
    margin-bottom: var(--space-1);
    font-weight: 700;
    line-height: 1.3;
  }

  .command-meta p {
    font-size: var(--text-xs);
    line-height: 1.4;
    color: var(--text-secondary);
    margin: 0;
  }

  .command-level-badge {
    width: 32px;
    height: 32px;
    font-size: var(--text-sm);
    font-weight: 800;
    margin-top: var(--space-2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex-shrink: 0;
    /* Prevent badge from shrinking */
  }

  /* Ensure command card grid is properly constrained on mobile */
  .command-card-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
  }

  /* Prevent text overflow in command cards */
  .command-card {
    overflow: visible;
    word-wrap: break-word;
  }

  .command-meta h3,
  .command-meta p {
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
  }

  /* Home hero on mobile */
  .home-hero {
    padding: var(--space-4);
  }

  .hero-badge-img {
    max-width: 100px;
    max-height: 100px;
    width: auto;
    height: auto;
  }

  .home-quick-nav {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
  }

  .commands-preview-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
  }

  /* FAQ - comfortable spacing */
  .faq-item {
    padding: var(--space-4);
    margin-bottom: var(--space-4);
  }

  .faq-item h3 {
    font-size: 1rem;
  }

  /* Share buttons - larger for touch */
  .share-btn {
    width: 48px;
    height: 48px;
  }

  /* Footer - stacked layout */
  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  /* Breaking banner - wrap text */
  #breaking-banner .breaking-banner__inner {
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  #breaking-banner .breaking-banner__title {
    font-size: var(--text-sm);
  }
}

/* Extra small screens */
@media (max-width: 360px) {
  h1 {
    font-size: 1.375rem;
  }

  .container {
    padding: 0 var(--space-2);
  }

  .level-big-number {
    font-size: 3rem;
  }
}