/* =========================================================
   MBPK / MB ARTICLE GLOBAL CSS (Mostbet-like UI)
   Full replacement CSS for Elementor content blocks
   Includes:
   - Mostbet-like visual style
   - RTL (Urdu) support
   - Hero image always on top
   - Long two-column blocks: media pinned to top
   - Mobile table horizontal scroll (required)
   ========================================================= */

/* ---------- 1) Theme variables ---------- */
.mbpk-page,
.mb-article{
  --mb-bg:#edf1f5;
  --mb-card:#ffffff;
  --mb-soft:#f4f8fd;
  --mb-text:#163454;

  --mb-blue-950:#082f63;
  --mb-blue-900:#0c3f7c;
  --mb-blue-800:#1a5ea6;
  --mb-blue-700:#2d78bd;
  --mb-blue-600:#4f95d2;
  --mb-sky-400:#7ec6ea;

  --mb-orange:#ef6d18;
  --mb-orange-2:#d95c10;

  --mb-head:#184b93;
  --mb-border:#dbe7f3;
  --mb-border-2:#b8d6f1;

  --mb-radius:18px;
  --mb-radius-sm:14px;
  --mb-shadow:0 8px 24px rgba(8,47,99,.08);
  --mb-shadow-soft:0 4px 14px rgba(8,47,99,.06);

  direction:rtl;
  text-align:right;
  color:var(--mb-text);
  background:var(--mb-bg);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Naskh Arabic","Noto Sans Arabic",Arial,sans-serif;
}

/* ---------- 2) Base reset inside content ---------- */
.mbpk-page *,
.mbpk-page *::before,
.mbpk-page *::after,
.mb-article *,
.mb-article *::before,
.mb-article *::after{
  box-sizing:border-box;
}

.mbpk-page a,
.mb-article a{
  color:var(--mb-blue-800);
  text-decoration:none;
}

.mbpk-page img,
.mb-article img{
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
  border-radius:14px;
}

/* Prevent overflow inside grid/flex children */
.mbpk-page .mbpk-row > *,
.mbpk-page .mbpk-copy,
.mbpk-page .mbpk-media,
.mbpk-page .mbpk-section,
.mbpk-page .mbpk-card,
.mb-article .mb-row > *,
.mb-article .mb-copy,
.mb-article .mb-media,
.mb-article .mb-section,
.mb-article .mb-card{
  min-width:0;
}

/* ---------- 3) Main wrapper ---------- */
.mbpk-page,
.mb-article{
  max-width:1180px;
  margin:0 auto;
  padding:14px;
}

/* ---------- 4) White cards / sections ---------- */
.mbpk-page .mbpk-section,
.mbpk-page .mbpk-card,
.mbpk-page .mbpk-hero,
.mb-article .mb-section,
.mb-article .mb-card,
.mb-article .mb-hero{
  background:var(--mb-card);
  border:1px solid var(--mb-border);
  border-radius:var(--mb-radius);
  box-shadow:var(--mb-shadow-soft);
  padding:14px;
  margin:0 0 14px;
}

/* ---------- 5) Top bar / navigation (optional if these classes exist) ---------- */
.mbpk-page .mbpk-topbar,
.mb-article .mb-topbar{
  background:linear-gradient(180deg,var(--mb-blue-900),var(--mb-blue-950));
  color:#fff;
  border-radius:16px;
  padding:10px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  box-shadow:0 8px 20px rgba(7,44,92,.16);
}

.mbpk-page .mbpk-topbar .mbpk-brand,
.mb-article .mb-topbar .mb-brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:800;
  letter-spacing:.3px;
}

.mbpk-page .mbpk-topbar .mbpk-nav,
.mb-article .mb-topbar .mb-nav{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.mbpk-page .mbpk-topbar a,
.mb-article .mb-topbar a{
  color:#fff;
  font-weight:600;
  font-size:14px;
  padding:8px 12px;
  border-radius:999px;
  background:transparent;
  border:1px solid transparent;
  transition:.2s ease;
}

.mbpk-page .mbpk-topbar a:hover,
.mb-article .mb-topbar a:hover{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.14);
}

.mbpk-page .mbpk-topbar .is-primary,
.mb-article .mb-topbar .is-primary{
  background:linear-gradient(180deg,#6cc5ee,#4ba8db);
  color:#fff;
  border-color:rgba(255,255,255,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2);
}

.mbpk-page .mbpk-topbar .mbpk-menu,
.mb-article .mb-topbar .mb-menu{
  width:38px;
  height:38px;
  border-radius:10px;
  display:grid;
  place-items:center;
  background:var(--mb-orange);
  color:#fff;
  font-size:18px;
  border:none;
  cursor:pointer;
}

/* ---------- 6) Dual CTA row (orange + blue buttons) ---------- */
.mbpk-page .mbpk-dual-cta,
.mb-article .mb-dual-cta{
  background:var(--mb-card);
  border:1px solid var(--mb-border);
  border-radius:16px;
  padding:12px;
  margin:0 0 14px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.mbpk-page .mbpk-dual-cta a,
.mb-article .mb-dual-cta a{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  border-radius:12px;
  font-weight:700;
  font-size:15px;
  color:#fff;
  text-decoration:none;
  transition:transform .15s ease, box-shadow .2s ease, filter .2s ease;
  box-shadow:0 6px 16px rgba(8,47,99,.14);
}

.mbpk-page .mbpk-dual-cta a:first-child,
.mb-article .mb-dual-cta a:first-child{
  background:linear-gradient(180deg,#f47b20,#e76711);
}

.mbpk-page .mbpk-dual-cta a:last-child,
.mb-article .mb-dual-cta a:last-child{
  background:linear-gradient(180deg,#2e76bb,#15569f);
}

.mbpk-page .mbpk-dual-cta a:hover,
.mb-article .mb-dual-cta a:hover{
  transform:translateY(-1px);
  filter:brightness(1.03);
}

/* ---------- 7) Main content row (two columns) ---------- */
.mbpk-page .mbpk-row,
.mb-article .mb-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:14px;
  align-items:start !important; /* IMPORTANT: no equal-height stretching */
}

/* Keep media pinned to top in long sections */
.mbpk-page .mbpk-media,
.mb-article .mb-media{
  align-self:start !important;
  height:auto !important;
}

/* If media has a wrapper, do not stretch it */
.mbpk-page .mbpk-media > a,
.mbpk-page .mbpk-media > div,
.mb-article .mb-media > a,
.mb-article .mb-media > div{
  display:block;
  height:auto !important;
}

/* Image side */
.mbpk-page .mbpk-media a,
.mb-article .mb-media a{
  display:block;
  border-radius:14px;
  overflow:hidden;
  box-shadow:var(--mb-shadow-soft);
}

/* IMPORTANT: images keep natural ratio (no crop / no forced height) */
.mbpk-page .mbpk-media img,
.mb-article .mb-media img{
  width:100%;
  height:auto !important;
  object-fit:contain !important;
  background:#fff;
  border:1px solid var(--mb-border);
  border-radius:14px;
}

/* Text side */
.mbpk-page .mbpk-copy,
.mb-article .mb-copy{
  background:linear-gradient(180deg,#f7fbff,#eef5fc);
  border:1px solid var(--mb-border-2);
  border-radius:14px;
  padding:14px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}

/* ---------- 8) HERO FIX: image always on top (desktop + mobile) ---------- */
/* Works for both:
   - .mbpk-hero .mbpk-row
   - .mbpk-hero.mbpk-row (if hero itself is the row) */
.mbpk-page .mbpk-hero .mbpk-row,
.mbpk-page .mbpk-hero.mbpk-row,
.mb-article .mb-hero .mb-row,
.mb-article .mb-hero.mb-row{
  grid-template-columns:1fr !important;
  align-items:start !important;
}

.mbpk-page .mbpk-hero .mbpk-media,
.mbpk-page .mbpk-hero.mbpk-row .mbpk-media,
.mb-article .mb-hero .mb-media,
.mb-article .mb-hero.mb-row .mb-media{
  order:1 !important;
  align-self:start !important;
  margin-bottom:2px;
}

.mbpk-page .mbpk-hero .mbpk-copy,
.mbpk-page .mbpk-hero.mbpk-row .mbpk-copy,
.mb-article .mb-hero .mb-copy,
.mb-article .mb-hero.mb-row .mb-copy{
  order:2 !important;
}

/* ---------- 9) Headings ---------- */
.mbpk-page h1,
.mbpk-page h2,
.mbpk-page h3,
.mbpk-page h4,
.mb-article h1,
.mb-article h2,
.mb-article h3,
.mb-article h4{
  margin:0 0 10px;
  line-height:1.25;
  color:var(--mb-head);
  font-weight:800;
  position:relative;
}

.mbpk-page h1,
.mb-article h1{
  font-size:clamp(28px,3vw,42px);
  letter-spacing:-.2px;
}

.mbpk-page h2,
.mb-article h2{
  font-size:clamp(22px,2.2vw,32px);
}

.mbpk-page h3,
.mb-article h3{
  font-size:clamp(18px,1.7vw,24px);
}

.mbpk-page h4,
.mb-article h4{
  font-size:clamp(16px,1.3vw,20px);
}

/* Orange underline accent */
.mbpk-page h1::after,
.mbpk-page h2::after,
.mbpk-page h3::after,
.mb-article h1::after,
.mb-article h2::after,
.mb-article h3::after{
  content:"";
  display:block;
  width:78px;
  height:4px;
  margin-top:8px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--mb-orange),#f89a4e);
}

/* ---------- 10) Typography ---------- */
.mbpk-page p,
.mbpk-page li,
.mb-article p,
.mb-article li{
  margin:0 0 10px;
  line-height:1.8;
  color:var(--mb-text);
  font-size:15px;
}

.mbpk-page ul,
.mbpk-page ol,
.mb-article ul,
.mb-article ol{
  margin:0 0 10px;
  padding:0 18px 0 0;
}

.mbpk-page ul li::marker,
.mbpk-page ol li::marker,
.mb-article ul li::marker,
.mb-article ol li::marker{
  color:var(--mb-blue-700);
}

/* ---------- 11) CTA blocks / buttons ---------- */
.mbpk-page .mbpk-cta,
.mb-article .mb-cta{
  background:var(--mb-card);
  border:1px solid var(--mb-border);
  border-radius:16px;
  padding:14px;
  margin:14px 0;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  justify-content:space-between;
  box-shadow:var(--mb-shadow-soft);
}

.mbpk-page .mbpk-cta p,
.mb-article .mb-cta p{
  margin:0;
  font-weight:700;
  color:var(--mb-blue-900);
}

.mbpk-page .mbpk-btn,
.mbpk-page .mbpk-cta a,
.mb-article .mb-btn,
.mb-article .mb-cta a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:10px 16px;
  border-radius:12px;
  border:1px solid transparent;
  font-weight:700;
  font-size:14px;
  text-decoration:none;
  transition:.2s ease;
}

.mbpk-page .mbpk-btn--primary,
.mbpk-page .mbpk-cta a,
.mb-article .mb-btn--primary,
.mb-article .mb-cta a{
  color:#fff;
  background:linear-gradient(180deg,var(--mb-blue-700),var(--mb-blue-900));
  box-shadow:0 8px 18px rgba(10,63,124,.18);
}

.mbpk-page .mbpk-btn--accent,
.mb-article .mb-btn--accent{
  color:#fff;
  background:linear-gradient(180deg,#f47b20,#e46814);
  box-shadow:0 8px 18px rgba(239,109,24,.22);
}

.mbpk-page .mbpk-btn--ghost,
.mb-article .mb-btn--ghost{
  color:var(--mb-blue-900);
  background:#eef6ff;
  border-color:var(--mb-border-2);
}

.mbpk-page .mbpk-btn:hover,
.mbpk-page .mbpk-cta a:hover,
.mb-article .mb-btn:hover,
.mb-article .mb-cta a:hover{
  transform:translateY(-1px);
  filter:brightness(1.02);
}

/* ---------- 12) Slot grid / cards (optional classes) ---------- */
.mbpk-page .mbpk-slot-grid,
.mb-article .mb-slot-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}

.mbpk-page .mbpk-slot-card,
.mb-article .mb-slot-card{
  background:#fff;
  border:1px solid var(--mb-border);
  border-radius:14px;
  overflow:hidden;
  box-shadow:var(--mb-shadow-soft);
}

.mbpk-page .mbpk-slot-card .title,
.mb-article .mb-slot-card .title{
  padding:10px 12px;
  font-weight:700;
  color:var(--mb-blue-900);
  font-size:14px;
}

/* ---------- 13) FAQ accordion ---------- */
.mbpk-page .mbpk-faq details,
.mb-article .mb-faq details{
  background:#fff;
  border:1px solid var(--mb-border);
  border-radius:14px;
  margin:0 0 10px;
  overflow:hidden;
  box-shadow:var(--mb-shadow-soft);
}

.mbpk-page .mbpk-faq summary,
.mb-article .mb-faq summary{
  list-style:none;
  cursor:pointer;
  padding:12px 14px;
  font-weight:700;
  color:var(--mb-blue-900);
  position:relative;
  background:linear-gradient(180deg,#ffffff,#f6fbff);
}

.mbpk-page .mbpk-faq summary::-webkit-details-marker,
.mb-article .mb-faq summary::-webkit-details-marker{
  display:none;
}

.mbpk-page .mbpk-faq summary::before,
.mb-article .mb-faq summary::before{
  content:"+";
  position:absolute;
  left:12px; /* visually correct for RTL */
  top:50%;
  transform:translateY(-50%);
  width:22px;
  height:22px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#edf6ff;
  color:var(--mb-blue-900);
  font-weight:800;
}

.mbpk-page .mbpk-faq details[open] summary::before,
.mb-article .mb-faq details[open] summary::before{
  content:"−";
}

.mbpk-page .mbpk-faq .faq-content,
.mb-article .mb-faq .faq-content{
  padding:0 14px 12px;
  color:var(--mb-text);
  background:#fff;
}

/* ---------- 14) Tables (desktop/default) ---------- */
.mbpk-page table,
.mb-article table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  background:#fff;
  color:var(--mb-text);
  margin:14px 0 18px;
  border:1px solid var(--mb-border);
  border-radius:14px;
  overflow:hidden;
  table-layout:auto;
}

.mbpk-page caption,
.mb-article caption{
  caption-side:top;
  text-align:right;
  color:var(--mb-blue-900);
  font-weight:800;
  padding:10px 12px 8px;
}

.mbpk-page th,
.mbpk-page td,
.mb-article th,
.mb-article td{
  padding:10px 12px;
  border-bottom:1px solid #eaf1f8;
  border-left:1px solid #eef4fa; /* column separators for RTL */
  text-align:right;
  vertical-align:top;
  font-size:14px;
}

.mbpk-page th:last-child,
.mbpk-page td:last-child,
.mb-article th:last-child,
.mb-article td:last-child{
  border-left:none;
}

.mbpk-page tr:last-child td,
.mb-article tr:last-child td{
  border-bottom:none;
}

.mbpk-page thead th,
.mb-article thead th{
  background:linear-gradient(180deg,#f7fbff,#eef5fc);
  color:var(--mb-blue-900);
  font-weight:800;
}

/* Preferred wrapper for tables */
.mbpk-page .mbpk-table-wrap,
.mb-article .mb-table-wrap{
  margin:14px 0 18px;
  padding-bottom:2px;
}

.mbpk-page .mbpk-table-wrap > table,
.mb-article .mb-table-wrap > table{
  margin:0;
}

/* ---------- 15) Mobile table scroll (REQUIRED) ---------- */
@media (max-width: 767px){

  /* Primary method: wrapper */
  .mbpk-page .mbpk-table-wrap,
  .mb-article .mb-table-wrap{
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    border-radius:14px;
  }

  .mbpk-page .mbpk-table-wrap > table,
  .mb-article .mb-table-wrap > table{
    min-width:560px;
    width:max-content;
    max-width:none;
  }

  /* Fallback method: table inserted without wrapper */
  .mbpk-page .mbpk-copy > table,
  .mbpk-page .mbpk-section > table,
  .mbpk-page .mbpk-card > table,
  .mb-article .mb-copy > table,
  .mb-article .mb-section > table,
  .mb-article .mb-card > table{
    display:block;
    width:100%;
    max-width:100%;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    border-radius:14px;
    margin:14px 0 18px;
  }

  /* Force internal table width for horizontal scrolling */
  .mbpk-page .mbpk-copy > table > thead,
  .mbpk-page .mbpk-copy > table > tbody,
  .mbpk-page .mbpk-copy > table > tfoot,
  .mbpk-page .mbpk-section > table > thead,
  .mbpk-page .mbpk-section > table > tbody,
  .mbpk-page .mbpk-section > table > tfoot,
  .mbpk-page .mbpk-card > table > thead,
  .mbpk-page .mbpk-card > table > tbody,
  .mbpk-page .mbpk-card > table > tfoot,
  .mb-article .mb-copy > table > thead,
  .mb-article .mb-copy > table > tbody,
  .mb-article .mb-copy > table > tfoot,
  .mb-article .mb-section > table > thead,
  .mb-article .mb-section > table > tbody,
  .mb-article .mb-section > table > tfoot,
  .mb-article .mb-card > table > thead,
  .mb-article .mb-card > table > tbody,
  .mb-article .mb-card > table > tfoot{
    display:table;
    width:560px;
    table-layout:auto;
  }

  .mbpk-page th,
  .mbpk-page td,
  .mb-article th,
  .mb-article td{
    white-space:nowrap;
    font-size:13px;
    padding:9px 10px;
  }
}

/* ---------- 16) Tablet / mobile general layout ---------- */
@media (max-width: 991px){
  /* All rows become one column on tablet/mobile */
  .mbpk-page .mbpk-row,
  .mb-article .mb-row{
    grid-template-columns:1fr !important;
    align-items:start !important;
  }

  /* Media always above text on mobile/tablet */
  .mbpk-page .mbpk-media,
  .mb-article .mb-media{
    order:1 !important;
    align-self:start !important;
  }

  .mbpk-page .mbpk-copy,
  .mb-article .mb-copy{
    order:2 !important;
  }

  .mbpk-page .mbpk-cta,
  .mb-article .mb-cta{
    align-items:stretch;
  }

  .mbpk-page .mbpk-cta a,
  .mb-article .mb-cta a{
    width:100%;
  }
}

@media (max-width: 767px){
  .mbpk-page,
  .mb-article{
    padding:10px;
  }

  .mbpk-page .mbpk-section,
  .mbpk-page .mbpk-card,
  .mbpk-page .mbpk-hero,
  .mb-article .mb-section,
  .mb-article .mb-card,
  .mb-article .mb-hero{
    border-radius:14px;
    padding:10px;
    margin-bottom:10px;
  }

  .mbpk-page .mbpk-copy,
  .mb-article .mb-copy{
    padding:12px;
    border-radius:12px;
  }

  .mbpk-page .mbpk-dual-cta,
  .mb-article .mb-dual-cta{
    grid-template-columns:1fr;
    padding:10px;
    gap:8px;
  }

  .mbpk-page .mbpk-topbar,
  .mb-article .mb-topbar{
    flex-wrap:wrap;
    border-radius:14px;
  }

  .mbpk-page h1,
  .mb-article h1{
    font-size:24px;
  }

  .mbpk-page h2,
  .mb-article h2{
    font-size:20px;
  }

  .mbpk-page h3,
  .mb-article h3{
    font-size:17px;
  }

  .mbpk-page .mbpk-slot-grid,
  .mb-article .mb-slot-grid{
    grid-template-columns:1fr;
  }
}

/* ---------- 17) Optional badges ---------- */
.mbpk-page .mbpk-badge,
.mb-article .mb-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  background:#edf6ff;
  border:1px solid var(--mb-border-2);
  color:var(--mb-blue-900);
  font-weight:700;
  font-size:12px;
}
/* =========================================================
   SLOTS SECTION: 2-column grid (desktop), 1-column (mobile)
   Add class to parent wrapper: .mbpk-slots-grid-2 / .mb-slots-grid-2
   ========================================================= */

/* 1) Parent grid */
.mbpk-page .mbpk-slots-grid-2,
.mb-article .mb-slots-grid-2{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:14px;
  align-items:start;
}

/* 2) If children are direct .mbpk-row / .mb-row */
.mbpk-page .mbpk-slots-grid-2 > .mbpk-row,
.mb-article .mb-slots-grid-2 > .mb-row{
  display:grid !important;
  grid-template-columns:1fr !important; /* image top, text bottom */
  gap:10px;
  align-items:start !important;

  background:#fff;
  border:1px solid var(--mb-border);
  border-radius:16px;
  padding:10px;
  box-shadow:var(--mb-shadow-soft);
}

/* 3) If children are .mbpk-card / .mb-card (and row is inside) */
.mbpk-page .mbpk-slots-grid-2 > .mbpk-card,
.mb-article .mb-slots-grid-2 > .mb-card{
  margin:0;
  height:100%;
}

.mbpk-page .mbpk-slots-grid-2 > .mbpk-card .mbpk-row,
.mb-article .mb-slots-grid-2 > .mb-card .mb-row{
  display:grid !important;
  grid-template-columns:1fr !important; /* image top, text bottom */
  gap:10px;
  align-items:start !important;
}

/* 4) Force image first, text second */
.mbpk-page .mbpk-slots-grid-2 .mbpk-media,
.mb-article .mb-slots-grid-2 .mb-media{
  order:1 !important;
  align-self:start !important;
  margin:0 !important;
}

.mbpk-page .mbpk-slots-grid-2 .mbpk-copy,
.mb-article .mb-slots-grid-2 .mb-copy{
  order:2 !important;
}

/* 5) Clean image sizing */
.mbpk-page .mbpk-slots-grid-2 .mbpk-media img,
.mb-article .mb-slots-grid-2 .mb-media img{
  width:100%;
  height:auto !important;
  object-fit:contain !important;
  display:block;
  border-radius:12px;
}

/* 6) Compact text card look inside slot cards */
.mbpk-page .mbpk-slots-grid-2 .mbpk-copy,
.mb-article .mb-slots-grid-2 .mb-copy{
  padding:10px 12px;
  border-radius:12px;
  min-height:auto;
}

.mbpk-page .mbpk-slots-grid-2 .mbpk-copy h3,
.mbpk-page .mbpk-slots-grid-2 .mbpk-copy h4,
.mb-article .mb-slots-grid-2 .mb-copy h3,
.mb-article .mb-slots-grid-2 .mb-copy h4{
  margin-bottom:8px;
  font-size:clamp(16px,1.2vw,20px);
}

.mbpk-page .mbpk-slots-grid-2 .mbpk-copy p,
.mb-article .mb-slots-grid-2 .mb-copy p{
  font-size:14px;
  line-height:1.6;
  margin-bottom:8px;
}

/* 7) Mobile / tablet: one column */
@media (max-width: 991px){
  .mbpk-page .mbpk-slots-grid-2,
  .mb-article .mb-slots-grid-2{
    grid-template-columns:1fr;
  }
}
/* =========================================================
   SLOTS SECTION ORDER:
   Intro image first -> intro text -> slots grid
   Works only inside .mbpk-slots-section / .mb-slots-section
   ========================================================= */

/* Parent section order */
.mbpk-page .mbpk-slots-section,
.mb-article .mb-slots-section{
  display:flex;
  flex-direction:column;
  gap:14px;
}

/* Make sure intro row goes before grid (safety) */
.mbpk-page .mbpk-slots-section > .mbpk-slots-intro,
.mbpk-page .mbpk-slots-section > .mbpk-row:first-of-type,
.mb-article .mb-slots-section > .mb-slots-intro,
.mb-article .mb-slots-section > .mb-row:first-of-type{
  order:1;
}

.mbpk-page .mbpk-slots-section > .mbpk-slots-grid-2,
.mb-article .mb-slots-section > .mb-slots-grid-2{
  order:2;
}

/* Intro row: force one column so image goes on top, text below */
.mbpk-page .mbpk-slots-section > .mbpk-row,
.mb-article .mb-slots-section > .mb-row{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:12px;
  align-items:start !important;
}

/* Intro image first */
.mbpk-page .mbpk-slots-section > .mbpk-row .mbpk-media,
.mb-article .mb-slots-section > .mb-row .mb-media{
  order:1 !important;
  align-self:start !important;
  margin:0 !important;
}

/* Intro text second */
.mbpk-page .mbpk-slots-section > .mbpk-row .mbpk-copy,
.mb-article .mb-slots-section > .mb-row .mb-copy{
  order:2 !important;
}

/* Keep intro image fully visible */
.mbpk-page .mbpk-slots-section > .mbpk-row .mbpk-media img,
.mb-article .mb-slots-section > .mb-row .mb-media img{
  width:100%;
  height:auto !important;
  object-fit:contain !important;
  display:block;
}

/* Optional: a little spacing under intro text before grid */
.mbpk-page .mbpk-slots-section > .mbpk-row .mbpk-copy,
.mb-article .mb-slots-section > .mb-row .mb-copy{
  margin-bottom:2px;
}
.mb-article .mb-cta{
  justify-content:flex-start; /* instead of space-between */
  gap:10px;
}

.mb-article .mb-cta p{
  width:100%;          /* text on its own row */
  margin:0 0 8px;
}
/* =========================================================
   Slots grid alignment fix
   Image on top, text block pinned to bottom
   ========================================================= */

/* 1) Stretch grid items to equal height */
.mb-article .mb-slots-grid-2,
.mbpk-page .mbpk-slots-grid-2{
  align-items:stretch;
}

/* 2) Support both structures:
      - direct .mb-row inside grid
      - .mb-card/.mbpk-card with row inside */
.mb-article .mb-slots-grid-2 > .mb-row,
.mbpk-page .mbpk-slots-grid-2 > .mbpk-row,
.mb-article .mb-slots-grid-2 > .mb-card,
.mbpk-page .mbpk-slots-grid-2 > .mbpk-card{
  height:100%;
}

/* 3) If card wrapper exists, make it a flex container */
.mb-article .mb-slots-grid-2 > .mb-card,
.mbpk-page .mbpk-slots-grid-2 > .mbpk-card{
  display:flex;
  flex-direction:column;
}

/* 4) Main inner row: image row + flexible text row */
.mb-article .mb-slots-grid-2 > .mb-row,
.mbpk-page .mbpk-slots-grid-2 > .mbpk-row,
.mb-article .mb-slots-grid-2 > .mb-card .mb-row,
.mbpk-page .mbpk-slots-grid-2 > .mbpk-card .mbpk-row{
  display:grid !important;
  grid-template-columns:1fr !important;
  grid-template-rows:auto 1fr !important; /* image top, text fills rest */
  align-items:stretch !important;
  height:100%;
}

/* 5) Keep image pinned to top */
.mb-article .mb-slots-grid-2 .mb-media,
.mbpk-page .mbpk-slots-grid-2 .mbpk-media{
  order:1 !important;
  align-self:start !important;
}

/* 6) Push text block to bottom and keep full height */
.mb-article .mb-slots-grid-2 .mb-copy,
.mbpk-page .mbpk-slots-grid-2 .mbpk-copy{
  order:2 !important;
  height:100%;
  margin-top:auto;
  display:flex;
  flex-direction:column;
  justify-content:flex-start; /* change to flex-end if you want text inside box at bottom */
}
/* =========================================================
   Equal height for 2-column content rows
   Text card stretches to image height (desktop)
   ========================================================= */

@media (min-width: 992px){

  /* 1) Stretch items only in regular content rows */
  .mb-article .mb-section > .mb-row:not(.mb-row--stack),
  .mbpk-page .mbpk-section > .mbpk-row:not(.mbpk-row--stack){
    align-items:stretch !important;
  }

  /* 2) Text block fills full row height */
  .mb-article .mb-section > .mb-row:not(.mb-row--stack) > .mb-copy,
  .mbpk-page .mbpk-section > .mbpk-row:not(.mbpk-row--stack) > .mbpk-copy{
    height:100%;
    display:flex;
    flex-direction:column;
    justify-content:flex-start; /* use space-between if needed */
  }

  /* 3) Optional: make media wrapper fill row too (image remains uncropped) */
  .mb-article .mb-section > .mb-row:not(.mb-row--stack) > .mb-media,
  .mbpk-page .mbpk-section > .mbpk-row:not(.mbpk-row--stack) > .mbpk-media{
    align-self:stretch !important;
  }
}
/* =========================================================
   Vertical center image in regular 2-column rows (desktop)
   ========================================================= */
@media (min-width: 992px){

  /* Keep equal-height row */
  .mb-article .mb-section > .mb-row:not(.mb-row--stack),
  .mbpk-page .mbpk-section > .mbpk-row:not(.mbpk-row--stack){
    align-items:stretch !important;
  }

  /* Text block stretches to full row height */
  .mb-article .mb-section > .mb-row:not(.mb-row--stack) > .mb-copy,
  .mbpk-page .mbpk-section > .mbpk-row:not(.mbpk-row--stack) > .mbpk-copy{
    height:100%;
    display:flex;
    flex-direction:column;
  }

  /* Media column stretches, but image inside is centered vertically */
  .mb-article .mb-section > .mb-row:not(.mb-row--stack) > .mb-media,
  .mbpk-page .mbpk-section > .mbpk-row:not(.mbpk-row--stack) > .mbpk-media{
    align-self:stretch !important;
    display:flex;
    align-items:center;      /* vertical center */
  }

  /* Keep image/link width normal */
  .mb-article .mb-section > .mb-row:not(.mb-row--stack) > .mb-media > a,
  .mbpk-page .mbpk-section > .mbpk-row:not(.mbpk-row--stack) > .mbpk-media > a{
    width:100%;
  }
}
/* =========================================================
   Stack layout modifier for long content sections
   Image top, text bottom (desktop + mobile safe)
   ========================================================= */

/* MB */
.mb-article .mb-row.mb-row--stack{
  grid-template-columns:1fr !important;
  align-items:start !important;
}

.mb-article .mb-row.mb-row--stack > .mb-media{
  order:1 !important;
  align-self:start !important;
}

.mb-article .mb-row.mb-row--stack > .mb-copy{
  order:2 !important;
}

/* MBPK */
.mbpk-page .mbpk-row.mbpk-row--stack{
  grid-template-columns:1fr !important;
  align-items:start !important;
}

.mbpk-page .mbpk-row.mbpk-row--stack > .mbpk-media{
  order:1 !important;
  align-self:start !important;
}

.mbpk-page .mbpk-row.mbpk-row--stack > .mbpk-copy{
  order:2 !important;
}
/* =========================================================
   Auto vertical centering for regular 2-column sections
   (desktop only)
   - Centers text vertically in short/normal rows
   - Does NOT affect stack rows, hero, slots grid cards
   ========================================================= */
@media (min-width: 992px){

  /* Only regular content rows inside .mb-section */
  .mb-article .mb-section > .mb-row:not(.mb-row--stack):not(.mb-slots-intro){
    align-items:stretch !important;
  }

  /* Text column: vertical center */
  .mb-article .mb-section > .mb-row:not(.mb-row--stack):not(.mb-slots-intro) > .mb-copy{
    height:100%;
    display:flex;
    flex-direction:column;
    justify-content:center; /* vertical center */
  }

  /* Media column: keep image column stretched, image centered */
  .mb-article .mb-section > .mb-row:not(.mb-row--stack):not(.mb-slots-intro) > .mb-media{
    align-self:stretch !important;
    display:flex;
    align-items:center; /* center image vertically */
  }

  /* Keep media link width normal */
  .mb-article .mb-section > .mb-row:not(.mb-row--stack):not(.mb-slots-intro) > .mb-media > a{
    width:100%;
  }
}