/*
 * Responsive typography and layout overrides for G4W.
 *
 * This stylesheet centralises viewport specific tweaks so that font sizes,
 * spacing and interactive hit areas can be fine-tuned without touching the
 * individual pages. The breakpoints cover the full range of devices used on
 * the website and reference the semantic and utility classes that appear
 * across the project (navigation, stacking cards, project grids, forms,
 * footer, etc.).
 */

:root {
  --g4w-body-line-height: 1.65;
  --g4w-heading-line-height: 1.15;
  --g4w-nav-letter-spacing: 0.02em;
}

body,
.text-base,
.prose,
[data-stack-card] p,
.project-card .project-caption,
.footer p,
.footer li,
footer p,
footer li {
  line-height: var(--g4w-body-line-height);
}

h1,
h2,
h3,
h4,
h5,
h6,
[data-stack-card] h3,
.critical-card h3,
.section-title,
.section-heading,
footer h2,
footer h3 {
  line-height: var(--g4w-heading-line-height);
}

.desktop-nav a,
header nav a,
.mobile-menu a,
footer nav a,
footer a,
.project-card .project-caption,
.number-label,
.badge,
span[data-count-to],
.contact-form label {
  letter-spacing: var(--g4w-nav-letter-spacing);
}

/* -------------------------------------------------------------------------- */
/*  Small phones (up to 480px)                                                */
/* -------------------------------------------------------------------------- */
@media (max-width: 480px) {
  html { font-size: clamp(15px, 4.4vw, 16px); }
  body { font-size: 0.98rem; }

  h1,
  .text-5xl,
  .text-6xl,
  .hero-title {
    font-size: clamp(2.35rem, 8vw, 2.7rem) !important;
  }

  h2,
  .text-4xl,
  .section-title,
  .section-heading {
    font-size: clamp(1.95rem, 6.6vw, 2.25rem) !important;
  }

  h3,
  .text-3xl,
  .project-card .project-title,
  [data-stack-card] h3,
  .critical-card h3,
  .number-orbitron {
    font-size: clamp(1.45rem, 5.6vw, 1.7rem) !important;
  }

  h4,
  .text-2xl,
  .badge,
  .section-subtitle,
  .contact-card h3 {
    font-size: clamp(1.2rem, 5vw, 1.4rem) !important;
  }

  h5,
  .text-xl,
  .desktop-nav a,
  header nav a,
  .mobile-menu a,
  .footer nav a,
  .footer a,
  footer a,
  .critical-carousel__control,
  .cta-animate,
  .number-label {
    font-size: clamp(1.05rem, 4.6vw, 1.2rem) !important;
  }

  h6,
  .text-lg,
  .text-base,
  body,
  p,
  .project-card .project-caption,
  [data-stack-card] p,
  .critical-card p,
  .contact-form label,
  .contact-form input,
  .contact-form textarea,
  .mobile-menu span,
  .footer p,
  footer p,
  footer li {
    font-size: clamp(0.98rem, 4.4vw, 1.08rem) !important;
  }

  .text-sm,
  .text-xs,
  small,
  .project-card .project-location,
  .mobile-menu small,
  .footer small {
    font-size: clamp(0.85rem, 3.9vw, 0.94rem) !important;
  }

  button,
  .group.inline-flex span,
  .mobile-menu a,
  .contact-card a,
  .cta-animate {
    padding-inline: clamp(0.9rem, 5.6vw, 1.1rem);
    padding-block: clamp(0.55rem, 3.6vw, 0.65rem);
  }

  header { padding-block: 0.35rem; }
  header .logo { max-width: 132px; }
  .project-grid { row-gap: 1.5rem; }
}

/* -------------------------------------------------------------------------- */
/*  Large phones / phablets (481px – 640px)                                   */
/* -------------------------------------------------------------------------- */
@media (min-width: 481px) and (max-width: 640px) {
  html { font-size: clamp(15.5px, 3.9vw, 16.5px); }
  body { font-size: 1rem; }

  h1,
  .text-5xl,
  .text-6xl,
  .hero-title {
    font-size: clamp(2.5rem, 7.5vw, 2.95rem) !important;
  }

  h2,
  .text-4xl,
  .section-title,
  .section-heading {
    font-size: clamp(2.1rem, 6.1vw, 2.5rem) !important;
  }

  h3,
  .text-3xl,
  [data-stack-card] h3,
  .critical-card h3,
  .number-orbitron {
    font-size: clamp(1.55rem, 5.1vw, 1.85rem) !important;
  }

  h4,
  .text-2xl,
  .badge,
  .project-card .project-title,
  .contact-card h3 {
    font-size: clamp(1.25rem, 4.8vw, 1.55rem) !important;
  }

  h5,
  .text-xl,
  .desktop-nav a,
  header nav a,
  .mobile-menu a,
  .footer nav a,
  footer a,
  .critical-carousel__control,
  .cta-animate,
  .number-label {
    font-size: clamp(1.1rem, 4.2vw, 1.3rem) !important;
  }

  h6,
  .text-lg,
  .text-base,
  body,
  p,
  [data-stack-card] p,
  .critical-card p,
  .project-card .project-caption,
  .contact-form label,
  .footer p,
  footer p,
  footer li {
    font-size: clamp(1rem, 3.9vw, 1.1rem) !important;
  }

  .text-sm,
  .text-xs,
  small,
  .project-card .project-location,
  .footer small {
    font-size: clamp(0.9rem, 3.4vw, 0.98rem) !important;
  }

  button,
  .group.inline-flex span,
  .cta-animate {
    padding-inline: clamp(1rem, 4.8vw, 1.2rem);
    padding-block: clamp(0.6rem, 3.4vw, 0.75rem);
  }
}

/* -------------------------------------------------------------------------- */
/*  Small tablets (641px – 768px)                                             */
/* -------------------------------------------------------------------------- */
@media (min-width: 641px) and (max-width: 768px) {
  html { font-size: clamp(16px, 3.2vw, 17px); }
  body { font-size: 1.03rem; }

  h1,
  .text-5xl,
  .text-6xl,
  .hero-title {
    font-size: clamp(2.7rem, 6.4vw, 3.2rem) !important;
  }

  h2,
  .text-4xl,
  .section-title,
  .section-heading {
    font-size: clamp(2.25rem, 5.4vw, 2.75rem) !important;
  }

  h3,
  .text-3xl,
  [data-stack-card] h3,
  .critical-card h3,
  .number-orbitron {
    font-size: clamp(1.7rem, 4.8vw, 2rem) !important;
  }

  h4,
  .text-2xl,
  .badge,
  .project-card .project-title,
  .contact-card h3 {
    font-size: clamp(1.35rem, 4.2vw, 1.65rem) !important;
  }

  h5,
  .text-xl,
  .desktop-nav a,
  header nav a,
  .mobile-menu a,
  .footer nav a,
  footer a,
  .critical-carousel__control,
  .number-label {
    font-size: clamp(1.15rem, 3.4vw, 1.35rem) !important;
  }

  h6,
  .text-lg,
  .text-base,
  body,
  p,
  [data-stack-card] p,
  .critical-card p,
  .project-card .project-caption,
  .contact-form label,
  .footer p,
  footer p,
  footer li {
    font-size: clamp(1.05rem, 3.2vw, 1.18rem) !important;
  }

  .text-sm,
  .text-xs,
  small,
  .project-card .project-location,
  .footer small {
    font-size: clamp(0.95rem, 2.8vw, 1.05rem) !important;
  }

  button,
  .group.inline-flex span,
  .cta-animate {
    padding-inline: clamp(1.1rem, 4.2vw, 1.3rem);
    padding-block: clamp(0.65rem, 2.9vw, 0.8rem);
  }
}

/* -------------------------------------------------------------------------- */
/*  Tablets / small laptops (769px – 1024px)                                  */
/* -------------------------------------------------------------------------- */
@media (min-width: 769px) and (max-width: 1024px) {
  html { font-size: clamp(16px, 2.6vw, 17.5px); }
  body { font-size: 1.05rem; }

  h1,
  .text-5xl,
  .text-6xl,
  .hero-title {
    font-size: clamp(2.9rem, 5.8vw, 3.4rem) !important;
  }

  h2,
  .text-4xl,
  .section-title,
  .section-heading {
    font-size: clamp(2.35rem, 4.8vw, 2.95rem) !important;
  }

  h3,
  .text-3xl,
  [data-stack-card] h3,
  .critical-card h3,
  .number-orbitron {
    font-size: clamp(1.8rem, 4.2vw, 2.15rem) !important;
  }

  h4,
  .text-2xl,
  .badge,
  .project-card .project-title,
  .contact-card h3 {
    font-size: clamp(1.4rem, 3.6vw, 1.75rem) !important;
  }

  h5,
  .text-xl,
  .desktop-nav a,
  header nav a,
  .mobile-menu a,
  .footer nav a,
  footer a,
  .critical-carousel__control,
  .number-label {
    font-size: clamp(1.2rem, 3vw, 1.4rem) !important;
  }

  h6,
  .text-lg,
  .text-base,
  body,
  p,
  [data-stack-card] p,
  .critical-card p,
  .project-card .project-caption,
  .contact-form label,
  .footer p,
  footer p,
  footer li {
    font-size: clamp(1.08rem, 2.8vw, 1.22rem) !important;
  }

  .text-sm,
  .text-xs,
  small,
  .project-card .project-location,
  .footer small {
    font-size: clamp(0.98rem, 2.4vw, 1.08rem) !important;
  }

  button,
  .group.inline-flex span,
  .cta-animate {
    padding-inline: clamp(1.15rem, 3.6vw, 1.4rem);
    padding-block: clamp(0.7rem, 2.6vw, 0.85rem);
  }
}

/* -------------------------------------------------------------------------- */
/*  Small desktops (1025px – 1280px)                                          */
/* -------------------------------------------------------------------------- */
@media (min-width: 1025px) and (max-width: 1280px) {
  html { font-size: clamp(16px, 2vw, 18px); }
  body { font-size: 1.07rem; }

  h1,
  .text-5xl,
  .text-6xl,
  .hero-title {
    font-size: clamp(3.1rem, 4.8vw, 3.6rem) !important;
  }

  h2,
  .text-4xl,
  .section-title,
  .section-heading {
    font-size: clamp(2.45rem, 4.1vw, 3.1rem) !important;
  }

  h3,
  .text-3xl,
  [data-stack-card] h3,
  .critical-card h3,
  .number-orbitron {
    font-size: clamp(1.9rem, 3.6vw, 2.3rem) !important;
  }

  h4,
  .text-2xl,
  .badge,
  .project-card .project-title,
  .contact-card h3 {
    font-size: clamp(1.45rem, 3.2vw, 1.85rem) !important;
  }

  h5,
  .text-xl,
  .desktop-nav a,
  header nav a,
  .mobile-menu a,
  .footer nav a,
  footer a,
  .critical-carousel__control,
  .number-label {
    font-size: clamp(1.22rem, 2.6vw, 1.45rem) !important;
  }

  h6,
  .text-lg,
  .text-base,
  body,
  p,
  [data-stack-card] p,
  .critical-card p,
  .project-card .project-caption,
  .contact-form label,
  .footer p,
  footer p,
  footer li {
    font-size: clamp(1.1rem, 2.4vw, 1.24rem) !important;
  }

  .text-sm,
  .text-xs,
  small,
  .project-card .project-location,
  .footer small {
    font-size: clamp(1rem, 2.1vw, 1.12rem) !important;
  }
}

/* -------------------------------------------------------------------------- */
/*  Large desktops (≥1281px)                                                  */
/* -------------------------------------------------------------------------- */
@media (min-width: 1281px) {
  html { font-size: clamp(16px, 1.6vw, 19px); }
  body { font-size: 1.08rem; }

  h1,
  .text-5xl,
  .text-6xl,
  .hero-title {
    font-size: clamp(3.2rem, 4.2vw, 3.8rem) !important;
  }

  h2,
  .text-4xl,
  .section-title,
  .section-heading {
    font-size: clamp(2.55rem, 3.6vw, 3.2rem) !important;
  }

  h3,
  .text-3xl,
  [data-stack-card] h3,
  .critical-card h3,
  .number-orbitron {
    font-size: clamp(2rem, 3.1vw, 2.4rem) !important;
  }

  h4,
  .text-2xl,
  .badge,
  .project-card .project-title,
  .contact-card h3 {
    font-size: clamp(1.5rem, 2.8vw, 1.95rem) !important;
  }

  h5,
  .text-xl,
  .desktop-nav a,
  header nav a,
  .mobile-menu a,
  .footer nav a,
  footer a,
  .critical-carousel__control,
  .number-label {
    font-size: clamp(1.24rem, 2.2vw, 1.5rem) !important;
  }

  h6,
  .text-lg,
  .text-base,
  body,
  p,
  [data-stack-card] p,
  .critical-card p,
  .project-card .project-caption,
  .contact-form label,
  .footer p,
  footer p,
  footer li {
    font-size: clamp(1.12rem, 2vw, 1.26rem) !important;
  }

  .text-sm,
  .text-xs,
  small,
  .project-card .project-location,
  .footer small {
    font-size: clamp(1.02rem, 1.8vw, 1.14rem) !important;
  }
}