/* ==========================================================================
   responsive.css — MR ANALYSIS 360 DESIGN SYSTEM
   --------------------------------------------------------------------------
   Responsive breakpoint adaptations:
   - 320px  (Base narrow mobile)
   - 375px  (Standard mobile)
   - 390px  (Modern iOS mobile)
   - 414px  (Large mobile)
   - 768px  (Tablet portrait / Desktop shell switch)
   - 1024px (Tablet landscape / Compact desktop)
   - 1280px (Standard desktop)
   - 1440px+ (Large desktop / Ultra-wide rhythm)
   ========================================================================== */

/* --------------------------------------------------------------------------
   320px — Ultra-narrow mobile safety
   -------------------------------------------------------------------------- */
@media (max-width: 359px) {
  :root {
    --gutter: var(--space-3);
  }

  .btn {
    padding-inline: var(--space-3);
    font-size: var(--text-xs);
  }

  .site-header__actions .btn {
    display: none;
  }

  /* The three mono axis labels cannot share one line at this width, so they
     wrap left-aligned instead of colliding. */
  .hero-visual__nodes {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: var(--space-2) var(--space-4);
  }
}

/* --------------------------------------------------------------------------
   375px & 390px & 414px — Standard through large mobile
   Ensure fluid grid behavior and prevent any horizontal overflow
   -------------------------------------------------------------------------- */
@media (min-width: 375px) {
  .cta-block__actions {
    flex-direction: row;
  }
}

/* --------------------------------------------------------------------------
   768px — Tablet & Navigation Switch
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  :root {
    --gutter: var(--space-6);
    --section-y: var(--space-20);
    --section-y-lg: var(--space-28);
    --header-height: 5rem;
  }

  /* Reveal desktop nav, hide mobile hamburger */
  .site-nav {
    display: block;
  }

  .menu-toggle {
    display: none;
  }

  /* Desktop: the drawer is unreachable, so it is forced closed here — with a
     rule rather than an !important, because the system avoids them. */
  .mobile-drawer,
  .mobile-drawer.is-open {
    display: none;
  }

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

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

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

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

  .site-footer__bottom {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  /* Typography scale up */
  .h1 {
    font-size: var(--text-5xl);
  }

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

/* --------------------------------------------------------------------------
   1024px — Desktop Foundation
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  :root {
    --gutter: var(--space-8);
    --section-y: var(--space-24);
    --section-y-lg: var(--space-32);
  }

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

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

  .site-footer__grid {
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
  }

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

/* --------------------------------------------------------------------------
   1280px — Standard Wide Desktop
   -------------------------------------------------------------------------- */
@media (min-width: 1280px) {
  :root {
    --container-max: 1280px;
  }
}

/* --------------------------------------------------------------------------
   1440px+ — Ultra-wide Viewports
   -------------------------------------------------------------------------- */
@media (min-width: 1440px) {
  :root {
    --container-wide: 1400px;
    --section-y-lg: var(--space-36);
  }
}


/* --------------------------------------------------------------------------
   Additional Homepage Breakpoints (Hero, Challenge, Framework, Founder)
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .challenge-grid {
    grid-template-columns: repeat(2, 1fr);
  }

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

@media (min-width: 1024px) {
  .hero__grid {
    grid-template-columns: 1.1fr 0.9fr;
    gap: var(--space-12);
  }

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

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

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

  .founder-profile {
    grid-template-columns: 360px 1fr;
    gap: var(--space-12);
  }
}



@media (min-width: 1024px) {
  .contact-layout {
    grid-template-columns: 1.2fr 0.8fr;
    gap: var(--space-12);
  }

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

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