/* ── ResidentLens Responsive CSS ──────────────────────── */
/* Breakpoints: 768px (mobile), 1024px (tablet)           */

/* ── Base resets ── */
*, *::before, *::after { box-sizing: border-box; }
img { max-width: 100%; }

/* ── Container ── */
@media (max-width: 768px) {
  .rl-container { padding-left: 20px !important; padding-right: 20px !important; }
}

/* ── Nav ── */
@media (max-width: 768px) {
  .rl-nav { padding: 16px 20px !important; }
  .rl-nav-links { display: none !important; }
  .rl-nav-cta { font-size: 12px !important; padding: 10px 14px !important; }
}

/* ── Hero ── */
@media (max-width: 1024px) {
  .rl-hero-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
  .rl-hero-right { display: none !important; }
  .rl-hero-h1 { font-size: 38px !important; }
  .rl-hero-section { padding: 80px 0 60px !important; }
  .rl-stat-strip { flex-wrap: wrap !important; gap: 12px !important; }
}
@media (max-width: 768px) {
  .rl-hero-h1 { font-size: 30px !important; line-height: 1.1 !important; }
  .rl-hero-sub { font-size: 15px !important; }
  .rl-hero-section { padding: 60px 0 48px !important; }
}

/* ── Section headings (generic 2-col) ── */
@media (max-width: 768px) {
  .rl-grid-2 { grid-template-columns: 1fr !important; gap: 24px !important; }
  .rl-grid-3 { grid-template-columns: 1fr !important; gap: 20px !important; }
  .rl-section-h2 { font-size: 32px !important; }
  .rl-section-h3 { font-size: 24px !important; }
}

/* ── Problem / Before-After table ── */
@media (max-width: 768px) {
  .rl-problem-grid { grid-template-columns: 1fr !important; }
  .rl-problem-table { font-size: 12px !important; }
  .rl-bar-chart { display: none !important; }
}

/* ── Audiences / Role cards ── */
@media (max-width: 1024px) {
  .rl-roles-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 768px) {
  .rl-roles-grid { grid-template-columns: 1fr !important; }
}

/* ── Modules grid ── */
@media (max-width: 1024px) {
  .rl-modules-grid { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 768px) {
  .rl-modules-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .rl-dna-grid { grid-template-columns: 1fr !important; }
}

/* ── Product screenshots — Admin showcase ── */
@media (max-width: 768px) {
  .rl-admin-main-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  .rl-admin-thumb-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .rl-admin-header-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
}

/* ── Product screenshots — mobile duo ── */
@media (max-width: 768px) {
  .rl-mobile-duo { grid-template-columns: 1fr !important; gap: 32px !important; }
  .rl-phones-row { gap: 12px !important; }
  .rl-phone-main { width: 160px !important; }
  .rl-phone-second { width: 110px !important; }
}

/* ── Product screenshots — vendor showcase ── */
@media (max-width: 768px) {
  .rl-vendor-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  .rl-vendor-header { grid-template-columns: 1fr !important; gap: 16px !important; }
}

/* ── Map section ── */
@media (max-width: 768px) {
  .rl-map-header { grid-template-columns: 1fr !important; gap: 20px !important; }
  .rl-map-body { grid-template-columns: 1fr !important; }
  .rl-map-h2 { font-size: 30px !important; }
}

/* ── Compliance ── */
@media (max-width: 768px) {
  .rl-compliance-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
  .rl-compliance-cards { grid-template-columns: 1fr !important; }
  .rl-compliance-doc { display: none !important; }
}

/* ── Contact form ── */
@media (max-width: 768px) {
  .rl-contact-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
  .rl-form-2col { grid-template-columns: 1fr !important; }
}

/* ── Screenshot section header ── */
@media (max-width: 768px) {
  .rl-showcase-header { grid-template-columns: 1fr !important; gap: 16px !important; }
}

/* ── Guard / mobile-duo-right ── */
@media (max-width: 768px) {
  .rl-guard-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
  .rl-guard-phones { order: -1; }
}

/* ── Platform DNA strip ── */
@media (max-width: 768px) {
  .rl-dna-cards { grid-template-columns: 1fr !important; }
  .rl-dna-h3 { font-size: 26px !important; }
}

/* ── Footer ── */
@media (max-width: 768px) {
  .rl-footer-bar { flex-direction: column !important; gap: 12px !important; align-items: flex-start !important; }
}

/* ── Map tabs ── */
@media (max-width: 768px) {
  .rl-map-layout { grid-template-columns: 1fr !important; }
  .rl-map-tabs { margin-bottom: 0 !important; }
}