/* =====================================================
   GENTRUST AI — PAGE-SPECIFIC RESPONSIVE LAYOUTS
   Handles inline-grid patterns that need breakpoints
   ===================================================== */

/* Two-column content split (used on Home & About) */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-7);
  align-items: center;
}

/* Contact page: narrow info col + wider form col */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: var(--sp-7);
  align-items: start;
}

/* Portfolio / stats 4-up mini grid */
.stats-mini {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
  text-align: center;
}

/* ── Tablet (≤1024px) ───────────────────────────── */
@media (max-width: 1024px) {
  .two-col        { gap: var(--sp-6); }
  .contact-layout { gap: var(--sp-6); }
}

/* ── Mobile (≤768px) ────────────────────────────── */
@media (max-width: 768px) {
  .two-col {
    grid-template-columns: 1fr;
    gap: var(--sp-5);
  }
  /* Reverse stacking: visual goes below text on mobile */
  .two-col > *:last-child { order: -1; }
  .two-col.text-first > *:last-child { order: unset; }

  .contact-layout {
    grid-template-columns: 1fr;
    gap: var(--sp-5);
  }

  .stats-mini {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-3);
  }
}

/* ── Small phones (≤480px) ──────────────────────── */
@media (max-width: 480px) {
  .stats-mini { grid-template-columns: repeat(2, 1fr); }
}