/* ==========================================================================
   Breakpoint overrides. Everything else in the component stylesheets is
   written mobile-first; this file is the single place that switches
   layout between the mobile full-screen nav and the desktop glass pill.
   ========================================================================== */

/* ---- Desktop: reveal the floating pill nav + CTA, hide hamburger.
   1024px (not ~768px) because the 5-item pill plus a full logo and CTA
   need more room than a typical tablet viewport has without colliding. ---- */
@media (min-width: 1024px) {
  .nav-shell {
    display: flex;
  }

  .cta-button {
    display: inline-flex;
  }

  .hamburger {
    display: none;
  }

  .mobile-nav {
    display: none;
  }
}

/* ---- Desktop: hero heading occupies ~60-70% of viewport width, per spec ---- */
@media (min-width: 1024px) {
  .hero__content {
    max-width: min(72vw, 1280px);
  }
}

/* ---- Desktop: About switches from stacked to a two-column split ---- */
@media (min-width: 1024px) {
  .about__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    align-items: center;
    gap: clamp(3rem, 6vw, 5.5rem);
  }
}

/* ---- Tablet: Services grid becomes 2 columns ---- */
@media (min-width: 640px) {
  .services__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---- Desktop: Services grid becomes 3 columns (3x2), per the reference UI ---- */
@media (min-width: 1024px) {
  .services__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ---- Tablet and up: Industries rows align into a single name | desc |
   arrow line instead of stacking name above description. ---- */
@media (min-width: 768px) {
  .industry-row__link {
    grid-template-columns: 220px minmax(0, 1fr) auto;
    grid-template-areas: "name desc arrow";
    column-gap: var(--space-6);
  }
}

/* ---- Desktop: Industries heading column sits beside the list instead of
   stacking above it, per the reference UI. Column is a proportion (not a
   fixed px cap) so it scales alongside the heading's own clamp()ed type
   size instead of forcing it to wrap one word per line. ---- */
@media (min-width: 1024px) {
  .industries__grid {
    grid-template-columns: minmax(280px, 34%) minmax(0, 1fr);
    align-items: start;
    gap: clamp(3rem, 6vw, 5rem);
  }
}

/* ---- Tablet and up: Contact form rows (name/email, company/phone) become
   2 columns instead of stacking. ---- */
@media (min-width: 640px) {
  .contact-form__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---- Desktop: Contact heading column sits beside the form instead of
   stacking above it — same proportional split as Industries. ---- */
@media (min-width: 1024px) {
  .contact__grid {
    grid-template-columns: minmax(280px, 34%) minmax(0, 1fr);
    align-items: start;
    gap: clamp(3rem, 6vw, 5rem);
  }
}

/* ---- Desktop: Footer becomes a single row — brand block beside all four
   link columns — instead of stacking brand above a 2-column link grid. ---- */
@media (min-width: 1024px) {
  .footer__grid {
    grid-template-columns: minmax(220px, 1.3fr) minmax(0, 1fr);
    align-items: start;
  }

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

/* ---- Small phones: tighten the container gutter and hero spacing ---- */
@media (max-width: 760) {
  .hero__portfolio-link {
    font-size: 1.1rem;
  }
}

@media (max-width: 580px) {
  .hero__portfolio-link {
    font-size: 1rem;
  }
}

@media (max-width: 440px) {
  .hero__portfolio-link {
    font-size: 0.9rem;
  }
}

/* ---- Desktop: service hero splits into a text column beside the
   isometric illustration, per the reference UI. ---- */
@media (min-width: 1024px) {
  .service-hero__grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: var(--space-7);
  }
}

/* ---- Tablet and up: service sidebar sits beside the detail panel +
   accordion instead of stacking above it. ---- */
@media (min-width: 768px) {
  .service-panel__layout {
    grid-template-columns: minmax(200px, 260px) minmax(0, 1fr);
    gap: var(--space-6);
  }

  .service-sidebar__item:not(.is-active) {
    display: flex;
  }

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

@media (min-width: 1024px) {
  .service-checklist {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ---- Reduced-height viewports (short laptop windows, landscape phones) ---- */
@media (max-height: 480px) and (min-width: 768px) {
  .hero {
    min-height: auto;
    padding-block: calc(var(--header-h) + var(--space-6)) var(--space-6);
  }
}