/* ============================================================
   MOBILE — Inline style overrides for page templates
   Covers: about, faq, expertise, single, archive grid sections
   ============================================================ */

/* ── ABOUT PAGE ── */
@media (max-width: 1024px) {
  .ab-hero { grid-template-columns: 1fr !important; }
  .ab-hero-right { display: none !important; }
  .ab-two-col { grid-template-columns: 1fr !important; gap: 40px !important; }
  .ab-values-grid { grid-template-columns: 1fr 1fr !important; }
  .ab-team-grid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 768px) {
  .ab-hero { padding: 40px 16px !important; }
  .ab-section { padding: 40px 16px !important; }
  .ab-values-grid { grid-template-columns: 1fr !important; }
  .ab-team-grid { grid-template-columns: 1fr !important; }
  .ab-timeline-item { gap: 12px !important; }
}

/* ── FAQ PAGE ── */
@media (max-width: 1024px) {
  .faq-layout { grid-template-columns: 1fr !important; }
  .faq-sidebar { position: static !important; padding-left: 0 !important; border-left: none !important; border-top: 1px solid #e0e0e0 !important; padding-top: 32px !important; }
}
@media (max-width: 768px) {
  .faq-hero { padding: 40px 16px !important; }
  .faq-hero h1 { font-size: 28px !important; }
  .faq-layout { padding: 32px 16px !important; }
  .faq-tabs-inner { padding: 0 16px !important; }
  .faq-question { font-size: 14px !important; }
}

/* ── EXPERTISE PAGE ── */
@media (max-width: 1024px) {
  .exp-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .exp-bottom { grid-template-columns: 1fr !important; }
}
@media (max-width: 768px) {
  .exp-hero { padding: 40px 16px !important; }
  .exp-hero h1 { font-size: 28px !important; }
  .exp-grid-wrap { padding: 24px 16px !important; }
  .exp-grid { grid-template-columns: 1fr !important; }
  .exp-bottom { padding: 40px 16px !important; }
  .exp-filter-inner { padding: 0 16px !important; }
}

/* ── SINGLE POST/TECH ── */
@media (max-width: 768px) {
  div[style*="max-width:900px"] { padding: 40px 16px !important; }
  div[style*="grid-template-columns:repeat(3,1fr)"] { grid-template-columns: 1fr !important; }
  div[style*="height:400px"] { height: 240px !important; margin: -40px -16px 32px !important; }
}

/* ── ALL ARCHIVE/PAGE CTA STRIPS ── */
@media (max-width: 768px) {
  div[style*="display:grid;grid-template-columns:1fr auto"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
    padding: 40px 16px !important;
  }
  div[style*="display:flex;flex-shrink:0"] {
    flex-direction: column !important;
  }
  div[style*="display:flex;flex-shrink:0"] a { margin-left: 0 !important; }
}

/* ── GENERIC GRID OVERRIDES ── */
@media (max-width: 768px) {
  /* Any 3 or 4 col grid with inline styles */
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns:repeat(4,1fr)"] {
    grid-template-columns: 1fr !important;
  }
  [style*="grid-template-columns:repeat(2,1fr)"] {
    grid-template-columns: 1fr !important;
  }
  /* Padding resets */
  [style*="padding:48px"] { padding: 24px 16px !important; }
  [style*="padding:64px 48px"] { padding: 40px 16px !important; }
  [style*="padding:56px 48px"] { padding: 32px 16px !important; }
  [style*="padding:72px 48px"] { padding: 40px 16px !important; }
  [style*="padding:40px 48px"] { padding: 32px 16px !important; }
  [style*="padding:32px 48px"] { padding: 24px 16px !important; }
  [style*="padding:0 48px"] { padding: 0 16px !important; }
}

/* Prevent horizontal scroll */
html, body { overflow-x: hidden !important; max-width: 100vw !important; }
img { max-width: 100% !important; height: auto; }