/* ==========================================================================
   TSG AI - Responsive Breakpoints (Mobile-First)
   ========================================================================== */

/* ---------- Large Mobile (480px+) ---------- */
@media (min-width: 480px) {
  .problem__stats {
    grid-template-columns: repeat(3, 1fr);
  }

  .stats__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .progress-steps__label {
    display: block;
  }
}

/* ---------- Tablet (768px+) ---------- */
@media (min-width: 768px) {
  :root {
    --section-py: var(--space-20);
  }

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

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

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

  .grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Hero */
  .hero__heading {
    font-size: var(--text-4xl);
  }

  .hero__container {
    flex-direction: row;
    align-items: center;
  }

  .hero__content {
    flex: 1;
  }

  .hero__visual {
    flex: 0.8;
  }

  /* Services */
  .services__pillars {
    grid-template-columns: repeat(3, 1fr);
  }

  .services__details {
    grid-template-columns: repeat(2, 1fr);
  }

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

  /* Contact */
  .contact__grid {
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }

  /* Footer */
  .footer__grid {
    grid-template-columns: 2fr 1fr 1fr;
  }

  /* Framework - start horizontal transition */
  .framework__timeline {
    padding-left: 0;
  }

  .framework__line-vertical {
    display: none;
  }

  .framework__stages {
    flex-direction: row;
    gap: var(--space-6);
  }

  .framework__stage {
    flex: 1;
    text-align: center;
    padding-top: var(--space-16);
  }

  .framework__node {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
  }

  .framework__line-horizontal {
    display: block;
    position: absolute;
    top: 14px;
    left: 10%;
    right: 10%;
    height: 3px;
    background: var(--tsg-gray-200);
    border-radius: var(--radius-full);
    overflow: hidden;
  }

  .framework__line-horizontal-fill {
    width: 0;
    height: 100%;
    background: var(--gradient-teal);
    border-radius: var(--radius-full);
    transition: width 2s var(--ease-out-expo);
  }

  .framework--visible .framework__line-horizontal-fill {
    width: 100%;
  }

  .framework__stages {
    position: relative;
  }

  /* Discovery */
  .progress-steps__connector {
    width: 80px;
  }
}

/* ---------- Desktop (1024px+) ---------- */
@media (min-width: 1024px) {
  :root {
    --section-py: var(--space-24);
    --container-px: var(--space-8);
  }

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

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

  .grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Navigation - show full desktop nav */
  .nav__links {
    display: flex;
  }

  .nav__cta {
    display: inline-flex;
  }

  .nav__hamburger {
    display: none;
  }

  /* Hero */
  .hero__heading {
    font-size: var(--text-6xl);
  }

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

  .hero__content {
    flex: 1.2;
  }

  .hero__visual {
    flex: 1;
  }

  /* Problem quote */
  .problem__quote {
    font-size: var(--text-3xl);
  }

  /* Services */
  .services__connector {
    display: block;
  }

  /* Testimonials */
  .testimonials__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Contact */
  .contact__heading {
    font-size: var(--text-4xl);
  }

  /* Footer */
  .footer__grid {
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
  }
}

/* ---------- Large Desktop (1280px+) ---------- */
@media (min-width: 1280px) {
  .hero__heading {
    font-size: 4rem;
  }

  .grid--4 {
    grid-template-columns: repeat(4, 1fr);
  }

  .logo-carousel::before,
  .logo-carousel::after {
    width: 120px;
  }
}