/* ================================================
   ELEVASI STUDIO — Responsive CSS
   Breakpoints: 1280, 1024, 768, 430px
   ================================================ */

/* ---- DESKTOP LARGE (1600+) ---- */
@media (min-width: 1600px) {
  :root {
    --container-max: 1440px;
  }
}

/* ---- DESKTOP STANDARD (1280-1440) ---- */
@media (max-width: 1280px) {
  .philosophy-grid {
    gap: var(--space-4);
  }
  .panel-layout {
    gap: var(--space-12);
  }
}

/* ---- TABLET LANDSCAPE (1024px) ---- */
@media (max-width: 1024px) {
  /* Typography */
  :root {
    --text-hero: clamp(2.4rem, 6vw, 4rem);
  }

  /* Navbar */
  .nav-links { display: none; }
  .btn-nav   { display: none; }
  .nav-hamburger { display: flex; }

  /* Hero */
  .hero-content {
    max-width: 680px;
    padding-top: 68px;
  }

  /* Philosophy */
  .philosophy-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
  }
  .phil-card:last-child {
    grid-column: 1 / -1;
    max-width: 50%;
  }

  /* Services */
  .panel-layout {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
  .panel-preview {
    max-width: 480px;
  }

  /* Process */
  .process-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Footer */
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-10);
  }
  .footer-brand {
    grid-column: 1 / -1;
  }
}

/* ---- TABLET PORTRAIT (768px) ---- */
@media (max-width: 768px) {
  :root {
    --container-pad: 1.5rem;
  }

  /* Sections spacing */
  .philosophy  { padding: var(--space-20) 0 var(--space-16); }
  .services    { padding: var(--space-16) 0; }
  .process     { padding: var(--space-16) 0; }
  .testimonials { padding: var(--space-16) 0; }
  .cta-section { padding: var(--space-16) 0; }

  /* Hero */
  .hero-title {
    font-size: clamp(2.2rem, 8vw, 3.2rem);
  }
  .hero-desc {
    font-size: var(--text-sm);
  }

  /* Philosophy */
  .philosophy-title {
    font-size: clamp(1.6rem, 4vw, 2.2rem);
  }
  .philosophy-grid {
    grid-template-columns: 1fr;
  }
  .phil-card:last-child {
    grid-column: auto;
    max-width: 100%;
  }

  /* Services tabs scroll */
  .services-tabs {
    gap: 0;
  }
  .tab-btn {
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-xs);
  }

  /* Services title */
  .services-title {
    font-size: clamp(1.6rem, 4vw, 2.2rem);
  }
  .services-title br { display: none; }

  /* Process */
  .process-grid {
    grid-template-columns: 1fr;
    border-radius: var(--radius-md);
  }
  .process-title {
    font-size: clamp(1.6rem, 4vw, 2.2rem);
  }
  .process-title br { display: none; }

  /* Testimonials */
  .testimonials-title {
    font-size: clamp(1.6rem, 4vw, 2.2rem);
  }

  /* CTA */
  .cta-title {
    font-size: clamp(1.8rem, 6vw, 2.8rem);
  }
  .cta-title br { display: none; }

  /* Footer */
  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
  .footer-brand {
    grid-column: auto;
  }
  .footer-bottom {
    flex-direction: column;
    gap: var(--space-2);
    text-align: center;
  }
}

/* ---- MOBILE LARGE (430px) ---- */
@media (max-width: 430px) {
  /* Hero */
  .hero-title {
    font-size: clamp(2rem, 9vw, 2.8rem);
    letter-spacing: -0.03em;
  }
  .hero-content {
    padding-top: 80px;
  }
  .hero-desc {
    font-size: var(--text-sm);
    line-height: 1.65;
  }

  /* Philosophy */
  .philosophy-title {
    font-size: 1.65rem;
  }

  /* Process */
  .process-num {
    font-size: 2.5rem;
  }

  /* Services panel */
  .panel-layout {
    gap: var(--space-6);
  }
  .preview-img {
    aspect-ratio: 16/10;
  }

  /* Testimonials */
  .testi-card {
    padding: var(--space-6);
  }
  .testi-quote p {
    font-size: var(--text-base);
  }

  /* CTA */
  .cta-title {
    font-size: 1.9rem;
  }

  /* Footer */
  .footer-social {
    margin-top: var(--space-2);
  }
}

/* ---- MOBILE STANDARD (390px) ---- */
@media (max-width: 390px) {
  .btn-primary, .btn-secondary {
    font-size: var(--text-xs);
    padding: 0.65rem 1.25rem;
  }
  .hero-title {
    font-size: 1.9rem;
  }
  .section-label {
    font-size: 0.68rem;
  }
}

/* ---- MOBILE SMALL (375px) ---- */
@media (max-width: 375px) {
  :root {
    --container-pad: 1.25rem;
  }
  .nav-inner {
    padding: 0 1.25rem;
  }
  .hero-title {
    font-size: 1.8rem;
  }
  .tab-btn {
    padding: var(--space-2) var(--space-3);
    font-size: 0.7rem;
  }
}

/* ---- FINE-TUNING: PROCESS GRID BORDERS ---- */
@media (max-width: 768px) {
  .process-grid {
    background: var(--color-border);
    gap: 1px;
  }
  .process-card {
    border-radius: 0;
  }
}

/* ---- TABLET: TESTIMONIALS SWIPER ---- */
@media (max-width: 768px) {
  .testi-nav {
    justify-content: flex-start;
    margin-top: var(--space-4);
  }
}

/* ---- PRINT STYLES ---- */
@media print {
  .navbar,
  .hero-scroll-indicator,
  .cursor-glow,
  .scroll-progress { display: none; }

  body {
    background: white;
    color: black;
  }
}