/* =========================================================
   KAJO BOARDROOM — mobile.css
   Responsive overrides for all kb-* block files.
   All layouts are HTML tables — use display:block to stack.
   ========================================================= */


/* ─────────────────────────────────────────────────────────
   TABLET — ≤ 980px
   ───────────────────────────────────────────────────────── */
@media (max-width: 980px) {

  /* ── Container horizontal padding ── */
  .kb-container {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  /* ── Section vertical + horizontal padding ── */
  .kb-subhero { padding: 72px 24px 56px !important; }
  .kb-light   { padding: 64px 24px !important; }
  .kb-soft    { padding: 64px 24px !important; }
  .kb-dark    { padding: 64px 24px !important; }
  .kb-final   { padding: 72px 24px !important; }
  .kb-fnav    { padding: 48px 24px !important; }

  /* ── Headings ── */
  .kb-subhero h1 { font-size: 36px !important; }
  .kb-h2         { font-size: 30px !important; }

  /* ─────────────────────────────────────────
     TABLE LAYOUTS → stack (display block)
     ───────────────────────────────────────── */

  /* 2-col splits */
  .kb-split,
  .kb-avail,
  .kb-two-col,
  .kb-contact-grid {
    display: block !important;
  }
  .kb-split tr,
  .kb-avail tr,
  .kb-two-col tr,
  .kb-contact-grid tr {
    display: block !important;
  }
  .kb-split td,
  .kb-avail td,
  .kb-two-col td {
    display: block !important;
    width: 100% !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
    margin-bottom: 32px !important;
  }
  .kb-contact-form-col,
  .kb-contact-aside {
    display: block !important;
    width: 100% !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
    margin-bottom: 32px !important;
  }
  .kb-contact-aside { position: static !important; }

  /* 3-col: help cards, top features, pricing */
  .kb-help-cards,
  .kb-top-features,
  .kb-pricing-grid {
    display: block !important;
  }
  .kb-help-cards tr,
  .kb-top-features tr,
  .kb-pricing-grid tr {
    display: block !important;
  }
  .kb-help-cards td,
  .kb-top-features td,
  .kb-pricing-grid td {
    display: block !important;
    width: 100% !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
    margin-bottom: 16px !important;
  }

  /* 4-col audiences → 2 col using inline-block */
  .kb-audiences-grid { display: block !important; }
  .kb-audiences-grid tr { display: block !important; }
  .kb-audiences-grid td {
    display: inline-block !important;
    width: calc(50% - 12px) !important;
    vertical-align: top !important;
    margin-bottom: 16px !important;
  }
  .kb-audiences-grid td:nth-child(odd)  { margin-right: 12px !important; }
  .kb-audiences-grid td:nth-child(even) { margin-left: 12px !important; }

  /* 4-col feature nav → 2 col */
  .kb-fnav-grid { display: block !important; }
  .kb-fnav-grid tr { display: block !important; }
  .kb-fnav-grid td {
    display: inline-block !important;
    width: calc(50% - 1px) !important;
    vertical-align: top !important;
    margin-bottom: 0 !important;
  }

  /* Case study: meta + body */
  .kb-case { display: block !important; }
  .kb-case tr { display: block !important; }
  .kb-case-meta {
    display: block !important;
    width: 100% !important;
    padding-right: 0 !important;
    margin-bottom: 32px !important;
    position: static !important;
  }
  .kb-case-body {
    display: block !important;
    width: 100% !important;
    padding-left: 0 !important;
  }

  /* Comparison table — horizontal scroll wrapper */
  .kb-compare {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .kb-compare table { min-width: 600px !important; }

  /* CSS grid: .kb-models (partners page) */
  .kb-models {
    grid-template-columns: 1fr !important;
  }

  /* ── Buttons ── */
  .kb-ctas,
  .kb-dark-ctas,
  .kb-final-ctas {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  .kb-ctas .kb-btn,
  .kb-dark-ctas .kb-btn,
  .kb-final-ctas .kb-btn {
    text-align: center !important;
    width: 100% !important;
  }

  /* ── Feature nav prev / next ── */
  .kb-prevnext {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    text-align: center !important;
  }

  /* ── Pull quote ── */
  .kb-pull-quote { font-size: 22px !important; }
}


/* ─────────────────────────────────────────────────────────
   PHONE — ≤ 640px
   ───────────────────────────────────────────────────────── */
@media (max-width: 640px) {

  .kb-container { padding-left: 20px !important; padding-right: 20px !important; }

  .kb-subhero { padding: 56px 20px 40px !important; }
  .kb-light, .kb-soft, .kb-dark { padding: 48px 20px !important; }
  .kb-final  { padding: 56px 20px !important; }
  .kb-fnav   { padding: 40px 20px !important; }

  .kb-subhero h1 { font-size: 28px !important; line-height: 1.2 !important; }
  .kb-h2         { font-size: 24px !important; }
  .kb-lead       { font-size: 16px !important; }
  .kb-pull-quote { font-size: 18px !important; padding-left: 16px !important; }

  /* 4-col tables → 1 col on phone */
  .kb-audiences-grid td,
  .kb-fnav-grid td {
    display: block !important;
    width: 100% !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    margin-bottom: 8px !important;
  }

  /* Forms — prevent iOS auto-zoom */
  .kb-form input,
  .kb-form select,
  .kb-form textarea { font-size: 16px !important; }
}


/* ─────────────────────────────────────────────────────────
   FLATSOME HEADER — mobile nav dark styling
   ───────────────────────────────────────────────────────── */
@media (max-width: 849px) {
  .header-main .nav-dropdown,
  .header-main .nav > li > ul {
    background: #1f2d3d !important;
  }
  .header-main .nav-dropdown a,
  .header-main .nav > li > ul a {
    color: #e8e3d3 !important;
    border-bottom-color: rgba(184,153,104,0.12) !important;
  }
}


/* ─────────────────────────────────────────────────────────
   GLOBAL overflow guard
   ───────────────────────────────────────────────────────── */
@media (max-width: 980px) {
  body          { overflow-x: hidden !important; }
  .entry-content,
  .page-content { overflow-x: hidden !important; }
}