/* ==========================================================================
   RADLABFORGE / PAYTRACE AI - RESPONSIVE STYLES (320px to 1920px)
   ========================================================================== */

/* Large Desktops (1440px and above) */
@media (min-width: 1440px) {
  :root {
    --text-hero: 4.8rem;
    --text-h1: 3.6rem;
    --text-h2: 2.8rem;
    --text-h3: 2.1rem;
  }
}

/* Standard Desktops (1280px to 1439px) */
@media (max-width: 1399px) {
  .console-body {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
  }
  .console-col:nth-child(3) {
    border-right: none;
  }
}

/* Laptops & Tablets Landscape (1024px to 1279px) */
@media (max-width: 1199px) {
  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid-12 {
    grid-template-columns: repeat(6, 1fr);
  }
  .footer-grid {
    grid-template-columns: 2fr 1fr 1fr;
    gap: var(--space-6);
  }
  .console-body {
    grid-template-columns: repeat(2, 1fr);
  }
  .console-col:nth-child(2) {
    border-right: none;
  }
}

/* Tablets Portrait (768px to 1023px) */
@media (max-width: 991px) {
  :root {
    --space-16: 72px;
    --space-12: 56px;
    --space-8: 36px;
  }
  
  .grid-2, .grid-3 {
    grid-template-columns: 1fr;
  }

  .nav-status {
    display: none;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  .console-body {
    grid-template-columns: 1fr;
    padding: var(--space-5);
  }

  .console-col {
    border-right: none;
    border-bottom: 1px solid var(--border-inverse);
    padding-bottom: var(--space-5);
    margin-bottom: var(--space-5);
  }

  .console-col:last-child {
    border-bottom: none;
    margin-bottom: 0;
  }

  .alert-row {
    grid-template-columns: 1fr auto;
    gap: var(--space-2);
  }
  .alert-row-meta {
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
  }
}

/* Mobile Devices (430px down to 320px) */
@media (max-width: 767px) {
  :root {
    --nav-height: 56px;
    --space-6: 20px;
    --space-8: 28px;
    --space-16: 56px;
  }

  .container, .container-wide, .container-narrow {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }

  .hero-title {
    font-size: 2.3rem;
  }
  .section-title {
    font-size: 1.85rem;
  }
  .subsection-title {
    font-size: 1.35rem;
  }

  .btn {
    width: 100%;
    padding: 12px 20px;
  }

  .btn-group-responsive {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    width: 100%;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .footer-bottom {
    flex-direction: column;
    gap: var(--space-4);
    text-align: center;
  }

  .drawer {
    width: 100%;
    max-width: 100vw;
  }

  .modal-content {
    padding: var(--space-4);
  }

  .console-header {
    padding: var(--space-4);
  }

  .console-footer {
    flex-direction: column;
    gap: var(--space-3);
    align-items: flex-start;
  }

  .hide-mobile {
    display: none !important;
  }
}

/* Small Phones (375px down to 320px) */
@media (max-width: 380px) {
  :root {
    --text-hero: 2rem;
    --text-h1: 1.7rem;
    --text-h2: 1.45rem;
  }

  .nav-brand-text {
    font-size: 0.95rem;
  }

  .nav-brand-badge {
    display: none;
  }

  .menu-trigger-btn {
    padding: 6px 12px;
    font-size: 0.75rem;
  }
}