/* ==========================================================================
   NorthLabs -- responsive.css
   Fluid type scale, hero/CTA layout shifts, and small-screen refinements
   (component-level breakpoints live alongside their components.css rules)
   ========================================================================== */

/* ---- Fluid heading scale ---- */
.hero h1 {
  font-size: clamp(2.25rem, 5.5vw + 1rem, var(--fs-5xl));
}

.section-head h2 {
  font-size: clamp(1.65rem, 2.6vw + 1rem, var(--fs-3xl));
}

.cta-band h2 {
  font-size: clamp(1.6rem, 3vw + 1rem, var(--fs-3xl));
}

/* ---- Hero layout ---- */
.hero {
  padding-top: clamp(7rem, 14vw, 10rem);
  padding-bottom: var(--space-9);
}

.hero-inner {
  max-width: 820px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.hero-actions .btn {
  flex: 1 1 auto;
}

@media (min-width: 560px) {
  .hero-actions .btn {
    flex: 0 1 auto;
  }
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border-soft);
}

.hero-meta-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.hero-meta-item svg {
  width: 15px;
  height: 15px;
  color: var(--color-accent-cyan);
}

/* ---- Small screen container tightening ---- */
@media (max-width: 480px) {
  .approach-item {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  .approach-item__num {
    font-size: var(--fs-xl);
    opacity: 0.7;
  }

  .cta-band {
    padding: var(--space-8) var(--space-4);
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ---- Case studies: stack media/body naturally on small screens (default),
   ensure comfortable tap targets ---- */
@media (max-width: 640px) {
  .btn {
    padding: 0.85rem 1.4rem;
  }

  .nav-actions .btn-secondary {
    display: none;
  }
}

/* ---- Large screens: constrain line length for readability ---- */
@media (min-width: 1440px) {
  .section-head p,
  .hero p {
    font-size: var(--fs-lg);
  }
}

/* ---- Print ---- */
@media print {
  .site-header,
  .mobile-nav,
  .hero-visual,
  .hero-glow-a,
  .hero-glow-b,
  .cta-band__actions,
  .nav-toggle {
    display: none !important;
  }

  body {
    background: #fff;
    color: #111;
  }

  /* The gallery keeps three of its four clients collapsed on screen. On paper
     there is nothing to advance, so show them all. */
  .gallery-item__panel {
    grid-template-rows: 1fr !important;
  }

  .gallery-item__panel-inner {
    opacity: 1 !important;
  }

  .gallery-item__chevron,
  .gallery-item__progress,
  .gallery-media {
    display: none !important;
  }

  .gallery-item__media-inline {
    display: block !important;
  }

  .gallery-item {
    break-inside: avoid;
  }
}