/* ═══════════════════════════════════════════════════════
   PERWEB SOLUTIONS — RESPONSIVE EXTRAS
   Fixes for page-specific inline grid layouts
   Applied via JS class injection + CSS rules
   ═══════════════════════════════════════════════════════ */

/* ── Runtime-injected responsive classes ── */

/* 2-column grid → 1 col on tablet/mobile */
.rg-2col{display:grid !important;grid-template-columns:1fr 1fr}
.rg-hero-split{display:grid !important;grid-template-columns:1fr 420px}
.rg-3col{display:grid !important;grid-template-columns:repeat(3,1fr)}
.rg-4col{display:grid !important;grid-template-columns:repeat(4,1fr)}
.rg-stat-row{display:flex !important;flex-wrap:wrap;gap:32px;justify-content:center}

/* Table scroll wrapper injected by JS */
.rg-table-wrap{overflow-x:auto !important;-webkit-overflow-scrolling:touch;width:100%}
.rg-table-wrap table,.rg-table-wrap .compare-table,.rg-table-wrap .skill-table,
.rg-table-wrap .milestone-table,.rg-table-wrap .currency-table,.rg-table-wrap .hours-table,
.rg-table-wrap .wa-compare-table{margin-top:0 !important}

/* ── 1100px ── */
@media(max-width:1100px){
  .rg-hero-split{grid-template-columns:1fr !important;max-width:740px;margin-left:auto;margin-right:auto}
  .rg-2col{grid-template-columns:1fr !important}
  .rg-3col{grid-template-columns:1fr 1fr !important}
  .rg-4col{grid-template-columns:repeat(2,1fr) !important}

  /* Service page 2-col (why choose us + card) */
  .why-us-grid{grid-template-columns:1fr !important}

  /* About page office cards */
  .office-cards{grid-template-columns:1fr !important}

  /* Expertise methodology */
  .methodology-grid{grid-template-columns:1fr !important}
}

/* ── 768px ── */
@media(max-width:768px){
  .rg-2col{grid-template-columns:1fr !important;gap:28px !important}
  .rg-3col{grid-template-columns:1fr !important;gap:18px !important}
  .rg-4col{grid-template-columns:repeat(2,1fr) !important;gap:14px !important}
  .rg-stat-row{gap:20px !important}

  /* Values grid on about page */
  .values-grid{grid-template-columns:1fr !important;gap:16px !important}

  /* Contact grid */
  .contact-grid{grid-template-columns:1fr !important}

  /* Industry grid */
  .industry-grid{grid-template-columns:repeat(2,1fr) !important}

  /* Achievement strip */
  .achievement-strip{grid-template-columns:1fr !important;gap:12px !important}

  /* Blog grid */
  .blog-grid{grid-template-columns:1fr !important}

  /* Hero inner (homepage) */
  .hero-inner{grid-template-columns:1fr !important;max-width:640px;margin:0 auto}

  /* Why split (homepage) */
  .why-split{grid-template-columns:1fr !important}

  /* Expertise skill table override */
  .skill-table th,.skill-table td{padding:10px 12px !important;font-size:12.5px !important}
  .skill-bar{max-width:80px !important}

  /* Form rows on contact page */
  .form-row{grid-template-columns:1fr !important}

  /* Homepage stat row (hero area) */
  .rg-stat-row{gap:16px !important}

  /* WA packages */
  .wa-packages{grid-template-columns:1fr !important}
  .wa-hero-inner{grid-template-columns:1fr !important;max-width:640px;margin:0 auto}

  /* How steps */
  .how-steps{grid-template-columns:repeat(2,1fr) !important;row-gap:28px !important}
  .how-steps::before{display:none !important}

  /* usecase-grid */
  .usecase-grid{grid-template-columns:1fr 1fr !important}

  /* Office cards contact page */
  .office-cards{grid-template-columns:1fr !important}

  /* Payment method grid */
  .payment-method-grid{grid-template-columns:1fr !important}
}

/* ── 480px ── */
@media(max-width:480px){
  .rg-4col{grid-template-columns:repeat(2,1fr) !important}
  .rg-stat-row > div{min-width:100px}
  .industry-grid{grid-template-columns:repeat(2,1fr) !important}
  .usecase-grid{grid-template-columns:1fr !important}
  .how-steps{grid-template-columns:1fr 1fr !important}
  .wa-packages{grid-template-columns:1fr !important}
  .achievement-strip{grid-template-columns:1fr !important}
  .cert-grid{grid-template-columns:1fr !important}

  /* About values on very small */
  .values-grid{grid-template-columns:1fr !important}

  /* Expertise methodology */
  .methodology-grid{grid-template-columns:1fr !important}

  /* Contact form row */
  .form-row{grid-template-columns:1fr !important}

  /* Homepage hero btns */
  .hero-btns{flex-direction:column !important;align-items:stretch !important}
  .hero-btns a,.hero-btns button{justify-content:center !important}

  /* CTA buttons full width */
  .cta-btns a{max-width:100% !important}

  /* Page hero CTA buttons */
  .page-hero-ctas{flex-direction:column !important}
  .page-hero-ctas a{width:100% !important;justify-content:center !important;text-align:center !important}

  /* Timeline stacking */
  .timeline::before{left:16px !important}
  .timeline-item{grid-template-columns:1fr !important;gap:16px !important}
  .timeline-dot{left:16px !important}

  /* Stat row on about page */
  .rg-stat-row{gap:10px !important}
  .rg-stat-row > div{padding:14px 10px !important}
}

/* ── Global table fix (all pages) ── */
table{max-width:100%}
.rg-table-wrap{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ── Announcement strip mobile ── */
@media(max-width:600px){
  .announcement-strip{font-size:11.5px;padding:9px 12px;line-height:1.5}
  .announcement-strip br{display:none}
}

/* ── Marquee mobile ── */
@media(max-width:480px){
  .marquee-item{font-size:12px;padding:0 18px}
  .marquee-section{padding:14px 0}
}

/* ── Chat mockup on WA page ── */
@media(max-width:480px){
  .product-demo{padding:24px 18px}
  .chat-msg{font-size:11.5px;padding:7px 10px}
  .wa-hero-inner{padding:0 16px}
}

/* ── About hero stats row ── */
@media(max-width:600px){
  .about-hero-stats-row{flex-direction:column !important;gap:12px !important;align-items:center !important}
  .about-hero-stats-row .stat-sep{display:none !important}
}

/* ── Expertise skill bars ── */
@media(max-width:480px){
  .skill-level{flex-direction:column;align-items:flex-start;gap:4px}
  .skill-bar{max-width:100% !important;width:100%}
  .skill-pct{font-size:11px}
  .skill-exp{font-size:11px}
  .exp-cat-header{flex-direction:column;align-items:flex-start;gap:10px}
}

/* ── Payment page ── */
@media(max-width:600px){
  .payment-card{padding:22px 18px}
  .security-badges{gap:10px}
  .sec-badge{font-size:12px;padding:10px 16px}
  .milestone-table th,.milestone-table td{padding:10px 12px;font-size:12.5px}
  .currency-table th,.currency-table td{padding:10px 12px;font-size:12.5px}
}

/* ── Contact page ── */
@media(max-width:600px){
  .contact-card{padding:20px 18px;flex-direction:column;gap:12px}
  .cc-icon{width:44px;height:44px;font-size:17px}
  .big-form{padding:24px 18px}
  .wa-cta-box{padding:24px 18px}
  .support-hours{padding:24px 18px}
}

/* ── Wide 2-col layout splits (rg-2col-layout) ── */
.rg-2col-layout{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:start}
@media(max-width:1024px){
  .rg-2col-layout{grid-template-columns:1fr !important;gap:40px !important;max-width:720px;margin-left:auto;margin-right:auto}
}
@media(max-width:640px){
  .rg-2col-layout{gap:28px !important}
}