/* responsive.css — mobile breakpoints for junglesecure.ai
   Overrides inline React grids at 1024 / 768 / 480. */

/* ---------- Container padding scale ---------- */
@media (max-width: 768px) {
  [data-container] { padding-left: 24px !important; padding-right: 24px !important; }
}
@media (max-width: 480px) {
  [data-container] { padding-left: 16px !important; padding-right: 16px !important; }
}

/* ---------- Headings scale ---------- */
@media (max-width: 768px) {
  h1 { font-size: 44px !important; line-height: 1.05 !important; }
  h2 { font-size: 34px !important; line-height: 1.1 !important; }
  h3 { font-size: 22px !important; }
}
@media (max-width: 480px) {
  h1 { font-size: 32px !important; }
  h2 { font-size: 26px !important; }
}

/* ---------- Nav ---------- */
@media (max-width: 768px) {
  .js-nav-links, .js-nav-signin { display: none !important; }
}

/* ---------- Section vertical padding trim ---------- */
@media (max-width: 768px) {
  [data-section] > [data-container] { padding-top: 64px !important; padding-bottom: 64px !important; }
}

/* ---------- 2-column hero grids → stack ---------- */
@media (max-width: 1024px) {
  .js-hero-grid {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
}

/* ---------- Generic 2-col → 1-col at 768 ---------- */
@media (max-width: 1024px) {
  .js-2col { grid-template-columns: 1fr !important; gap: 32px !important; }
}

/* ---------- 3-col → 2-col at 1024, 1-col at 768 ---------- */
@media (max-width: 1024px) {
  .js-3col { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 768px) {
  .js-3col { grid-template-columns: 1fr !important; }
}

/* ---------- 4-col persona/card grid → 2-col / 1-col ---------- */
@media (max-width: 1024px) {
  .js-4col { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 768px) {
  .js-4col { grid-template-columns: 1fr !important; }
}

/* ---------- 5-col workflow → 2-col / 1-col ---------- */
@media (max-width: 1024px) {
  .js-5col { grid-template-columns: repeat(2, 1fr) !important; }
  .js-5col-line { display: none !important; }
}
@media (max-width: 768px) {
  .js-5col { grid-template-columns: 1fr !important; }
}

/* ---------- Comparison / OWASP tables → stack rows on mobile ---------- */
@media (max-width: 768px) {
  .js-table-row, .js-table-head { grid-template-columns: 1fr !important; gap: 6px !important; }
  .js-table-head span { font-size: 10px !important; }
}

/* ---------- Hero font trim ---------- */
@media (max-width: 1024px) {
  .js-hero-h1 { font-size: 52px !important; }
  .js-hero-sub { font-size: 17px !important; }
}
@media (max-width: 768px) {
  .js-hero-h1 { font-size: 40px !important; }
  .js-hero-sub { font-size: 16px !important; }
  .js-hero-num { font-size: 72px !important; }
  .js-hero-num-unit { font-size: 48px !important; }
}
@media (max-width: 480px) {
  .js-hero-h1 { font-size: 32px !important; }
  .js-hero-num { font-size: 56px !important; }
  .js-hero-num-unit { font-size: 36px !important; }
}

/* ---------- CTA buttons wrap ---------- */
@media (max-width: 480px) {
  .js-btn-row { flex-wrap: wrap !important; }
  .js-btn-row > * { flex: 1 1 auto !important; }
}

/* ---------- StatStrip mobile (GPU page keeps it? no, removed. Keep for Security.) ---------- */
@media (max-width: 768px) {
  .js-stat-num { font-size: 64px !important; }
}