/* ============================================================
   PIEDRASANTA.SPACE — Responsive
   Mobile-first breakpoints
   ============================================================ */

/* ── Tablet: ≥ 768px ── */
@media (min-width: 768px) {
  .nav__hamburger { display: none; }
  .nav__links     { display: flex; }
  .nav__drawer    { display: none !important; }
}

/* ── Mobile: < 768px ── */
@media (max-width: 767px) {
  :root {
    --gutter: 1.25rem;
  }

  .nav__links { display: none; }
  .nav__cta   { display: none; }
  .nav__hamburger { display: flex; }
  .nav__drawer    { display: flex; }

  /* Hero */
  .hero__headline { max-width: 100%; }
  .hero__sub      { font-size: var(--text-base); }
  .hero__actions  { flex-direction: column; align-items: flex-start; }
  .hero__actions .btn { width: 100%; justify-content: center; }

  /* Stat bar */
  .stat-bar__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-6);
  }

  .stat-bar__item { border-left: 1px solid var(--border-mid); padding-left: var(--sp-4); }
  .stat-bar__item:nth-child(1),
  .stat-bar__item:nth-child(2) { border-left: none; padding-left: 0; }

  /* Services */
  .services { padding-block: var(--sp-16); }
  .services__grid { grid-template-columns: 1fr; }

  /* Portfolio */
  .portfolio { padding-block: var(--sp-16); }
  .portfolio__header { flex-direction: column; align-items: flex-start; }
  .portfolio__grid { grid-template-columns: 1fr; }
  .portfolio__grid .portfolio-card:first-child {
    grid-column: span 1;
    aspect-ratio: 4/3;
  }

  /* Contact */
  .contact { padding-block: var(--sp-16); }
  .contact__inner { grid-template-columns: 1fr; gap: var(--sp-12); }
  .contact__form-row { grid-template-columns: 1fr; }

  /* Footer */
  .footer__grid {
    grid-template-columns: 1fr;
    gap: var(--sp-8);
  }

  .footer__bottom {
    flex-direction: column;
    gap: var(--sp-3);
    text-align: center;
  }
}

/* ── Small tablet: 768px–1023px ── */
@media (min-width: 768px) and (max-width: 1023px) {
  .services__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .portfolio__grid .portfolio-card:first-child {
    grid-column: span 2;
  }

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

  .footer__grid > *:first-child { grid-column: span 2; }
}

/* ── Large: ≥ 1024px ── */
@media (min-width: 1024px) {
  .services__grid { grid-template-columns: repeat(3, 1fr); }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}