/* fixes-mobile.css — Forge Studio Agency Template
   Mobile-first responsive overrides */

/* ─── Show/hide mobile toggle ─────────────────────── */

@media (max-width: 1080px) {
  .header__nav {
    display: none;
  }

  .header__mobile-toggle {
    display: inline-flex;
  }
}

/* ─── Hero responsive ─────────────────────────────── */

@media (max-width: 900px) {
  .hero {
    background-attachment: scroll;
    min-height: auto;
    padding-top: clamp(3rem, 10vw, 5rem);
    padding-bottom: clamp(3rem, 10vw, 5rem);
  }

  .hero__grid {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }

  .hero__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: var(--space-6);
  }
}

@media (max-width: 600px) {
  .hero__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
  }
}

/* ─── Trust bar ─────────────────────────────────── */

@media (max-width: 760px) {
  .trust-bar__grid,
  .badge-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 420px) {
  .trust-bar__grid,
  .badge-row {
    grid-template-columns: 1fr;
  }
}

/* ─── Services grid ──────────────────────────────── */

@media (max-width: 900px) {
  .services-grid,
  .features-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .services-grid,
  .features-grid {
    grid-template-columns: 1fr;
  }
}

/* ─── Work portfolio grid ────────────────────────── */

@media (max-width: 900px) {
  .work-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .work-grid {
    grid-template-columns: 1fr;
  }
}

/* ─── Metrics row ─────────────────────────────────── */

@media (max-width: 900px) {
  .metrics-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .metrics-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ─── Team grid ─────────────────────────────────── */

@media (max-width: 760px) {
  .team-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .team-grid {
    grid-template-columns: 1fr;
  }
}

/* ─── Section header split ──────────────────────── */

@media (max-width: 760px) {
  .section__header--split {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
}

/* ─── Story / About layout ──────────────────────── */

@media (max-width: 820px) {
  .story-grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .story-image {
    order: -1;
  }
}

/* ─── Contact layout ─────────────────────────────── */

@media (max-width: 820px) {
  .contact-layout {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
}

/* ─── Pricing grid ─────────────────────────────── */

@media (max-width: 900px) {
  .pricing-grid {
    grid-template-columns: 1fr;
    max-width: 520px;
    margin-inline: auto;
  }
}

/* ─── Values grid ─────────────────────────────────── */

@media (max-width: 640px) {
  .values-grid {
    grid-template-columns: 1fr;
  }
}

/* ─── Testimonials ─────────────────────────────── */

@media (max-width: 900px) {
  .testimonials-grid {
    grid-template-columns: 1fr;
  }
}

/* ─── Form row ─────────────────────────────────── */

@media (max-width: 600px) {
  .form-row {
    grid-template-columns: 1fr;
  }
}

/* ─── Footer grid ─────────────────────────────── */

@media (max-width: 900px) {
  .footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8) var(--space-6);
  }
}

@media (max-width: 540px) {
  .footer__grid {
    grid-template-columns: 1fr;
  }

  .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }
}

/* ─── Header CTA button ─────────────────────────── */

@media (max-width: 560px) {
  .header__cta {
    display: none;
  }
}

/* ─── General mobile padding tweaks ──────────────── */

@media (max-width: 480px) {
  .section,
  .page-hero,
  .hero {
    padding-block: clamp(var(--space-10), 8vw, var(--space-16));
  }

  .service-card,
  .feature-card,
  .value-card,
  .step-card,
  .plan-card {
    padding: var(--space-5);
  }

  .contact-form,
  .contact-sidebar {
    padding: var(--space-5);
  }

  .hero-card {
    padding: var(--space-5);
  }
}

/* ─── Overflow prevention ────────────────────────── */

@media (max-width: 480px) {
  .hero__title {
    font-size: clamp(1.9rem, 8vw, 2.5rem);
    max-width: 100%;
  }

  .section__title,
  .page-hero__title {
    font-size: clamp(1.4rem, 6vw, 2rem);
  }

  .plan-price strong {
    font-size: clamp(1.8rem, 6vw, 2.5rem);
  }
}

/* ─── Mobile nav body lock ─────────────────────── */

body.nav-open {
  overflow: hidden;
}