/**
 * responsive.css - Responsive Breakpoints & Adaptive Layouts
 * Mobile-First & Precision Density across Viewports (375px, 768px, 1024px, 1280px)
 */

/* ==========================================================================
   TABLET & SMALL DESKTOP BREAKPOINTS (max-width: 1024px)
   ========================================================================== */
@media (max-width: 1024px) {
  .calculator-terminal {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

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

/* ==========================================================================
   MOBILE & TABLET PORTRAIT (max-width: 768px)
   ========================================================================== */
@media (max-width: 768px) {
  .container {
    padding: 0 var(--space-4);
  }

  .nav-wrap {
    height: 3.75rem;
  }

  .brand-tagline {
    display: none;
  }

  .nav-links {
    display: none; /* Keep header clean, users focus on tool */
  }

  .tatkal-ticker {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
  }

  .ticker-note {
    font-size: var(--text-2xs);
  }

  .hero-section {
    padding: var(--space-6) 0 var(--space-5);
  }

  .hero-title {
    font-size: 1.65rem;
  }

  .hero-subtitle {
    font-size: var(--text-sm);
  }

  .terminal-panel,
  .voucher-panel {
    padding: var(--space-4);
    border-radius: var(--radius-lg);
  }

  .class-pills-row {
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
  }

  .class-pills-row.non-ac {
    grid-template-columns: repeat(2, 1fr);
  }

  .class-pill-label {
    padding: 0.5rem 2px;
  }

  .pill-code {
    font-size: var(--text-sm);
  }

  .pill-type {
    font-size: 9px;
  }

  .result-hero-amount {
    font-size: 2.35rem;
  }

  .matrix-table th,
  .matrix-table td {
    padding: 0.75rem var(--space-3);
    font-size: var(--text-xs);
  }

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

  .footer-links {
    flex-wrap: wrap;
    gap: var(--space-3);
  }

  .toast-notice {
    bottom: var(--space-4);
    left: var(--space-4);
    right: var(--space-4);
    justify-content: center;
  }
}

/* ==========================================================================
   COMPACT SMARTPHONES (max-width: 480px)
   ========================================================================== */
@media (max-width: 480px) {
  .class-pills-row {
    grid-template-columns: repeat(3, 1fr);
  }

  .class-pills-row.non-ac {
    grid-template-columns: repeat(2, 1fr);
  }

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

  .passenger-stepper {
    width: 100%;
    justify-content: space-between;
  }

  .step-btn {
    flex: 1;
  }

  .step-value {
    flex: 1;
  }


}