/* ==========================================================================
   Sonara Responsive Styles
   Mobile-first, thoroughly tested from 320px to 1920px+
   ========================================================================== */

/* Large Desktops / 4K (1440px - 1920px+) */
@media (min-width: 1440px) {
  .hero-headline {
    font-size: 4.5rem;
  }
  .player-mockup {
    max-width: 1140px;
  }
}

/* Laptops / Desktops (max-width: 1200px) */
@media (max-width: 1200px) {
  .bento-col-8 { grid-column: span 12; }
  .bento-col-7 { grid-column: span 12; }
  .bento-col-5 { grid-column: span 12; }
  .bento-col-4 { grid-column: span 6; }
  
  .other-platforms-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Tablets / Medium Screens (max-width: 992px) */
@media (max-width: 992px) {
  .hero-headline {
    font-size: var(--text-4xl);
  }

  .nav-menu {
    display: none;
  }

  .nav-mobile-toggle {
    display: flex;
  }

  /* Bento Grid Tablet -> 2 columns */
  .bento-col-6,
  .bento-col-4 {
    grid-column: span 6;
  }

  /* Showcase view */
  .showcase-album-grid {
    grid-template-columns: repeat(2, 1fr);
  }


  /* Philosophy */
  .philosophy-pillars {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .footer-top {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
  }
  
  .footer-brand-col {
    grid-column: span 2;
  }

  /* Mockup adjustment */
  .mockup-body {
    min-height: 380px;
  }
  
  .mockup-sidebar {
    width: 180px;
  }
}

/* Small Tablets & Large Phones (max-width: 768px) */
@media (max-width: 768px) {
  .section {
    padding: var(--space-16) 0;
  }

  .hero-section {
    padding-top: calc(var(--space-16) + 60px);
    padding-bottom: var(--space-12);
  }

  .hero-headline {
    font-size: 2.5rem;
  }

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

  .hero-cta-group {
    flex-direction: column;
    width: 100%;
    max-width: 340px;
  }

  .hero-cta-group .btn {
    width: 100%;
  }

  /* Bento Grid Mobile -> 1 column */
  .bento-grid {
    grid-template-columns: 1fr;
  }

  .bento-col-12,
  .bento-col-8,
  .bento-col-7,
  .bento-col-6,
  .bento-col-5,
  .bento-col-4 {
    grid-column: span 1;
  }

  /* Mockup transformation for mobile: hide sidebar and simplify */
  .mockup-sidebar {
    display: none;
  }

  .mockup-search-pill {
    display: none;
  }

  .mockup-playerbar {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
    padding: var(--space-3);
  }

  .player-track-info {
    min-width: unset;
  }

  .player-actions-right {
    display: none;
  }

  .player-controls-center {
    max-width: 100%;
  }

  .hero-mockup-tilt {
    transform: none !important;
  }

  .hero-visual-wrapper:hover .hero-mockup-tilt {
    transform: none !important;
  }

  /* Download highlight card */
  .download-highlight-card {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-6);
    padding: var(--space-6);
  }

  .download-highlight-action {
    width: 100%;
    align-items: stretch;
  }

  .download-highlight-action .btn {
    width: 100%;
  }

  .other-platforms-grid {
    grid-template-columns: 1fr;
  }

  /* GitHub card */
  .github-card {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-6);
    padding: var(--space-6);
  }

  .github-actions {
    width: 100%;
    justify-content: flex-start;
  }

  /* Segmented tabs horizontal scrollable on mobile */
  .tabs-container {
    overflow-x: auto;
    padding-bottom: var(--space-2);
    -webkit-overflow-scrolling: touch;
    justify-content: flex-start;
  }

  .segmented-tabs {
    flex-wrap: nowrap;
    white-space: nowrap;
  }

  .tab-btn {
    padding: 0.4rem 0.9rem;
    font-size: var(--text-xs);
  }

  /* Visualizer */
  .vis-canvas-container {
    height: 260px;
  }

  .visualizer-toolbar {
    flex-direction: column;
    align-items: flex-start;
  }

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

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

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

  .footer-brand-col {
    grid-column: span 1;
  }

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

/* Small Smart Phones (320px - 430px) */
@media (max-width: 430px) {
  .container {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }

  .navbar {
    padding: 0.5rem 0.85rem;
  }

  .hero-headline {
    font-size: 2.15rem;
  }

  .hero-badge {
    font-size: 11px;
    padding: 0.25rem 0.65rem;
  }

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

  .section-title {
    font-size: var(--text-2xl);
  }

  .philosophy-quote {
    font-size: 1.85rem;
  }

  .showcase-album-grid {
    grid-template-columns: 1fr;
  }

  .download-highlight-info {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }

  .detected-os-title {
    font-size: var(--text-xl);
  }
}