/* ==========================================================================
 *
 * MBRIDGE BLOG REDESIGN — TABLE OF CONTENTS
 *
 *   1. Tokens (CSS variables)
 *   2. Blog wrapper + content typography
 *   3. Play bar (Posłuchaj + share)
 *   4. Lead / intro paragraph
 *   5. Cover image
 *   6. Section navigation (tabs + H3 dropdown)
 *   7. Side prev/next
 *   8. Hero
 *   9. Share
 *  10. Related posts
 *  11. Post navigation
 *  12. Team CTA (mb_team_cta widget — bottom section)
 *  13. Full-bleed image (mb_full_image widget)
 *  14. Elementor widgets (mb_expert_cta, mb_feature_list, mb_spotlight_crawlcore)
 *  15. Responsive media queries
 *  16. Editor visual hints (.ed-lead)
 *  17. Spotlight uniwersalny (mb_spotlight widget)
 *
 * All custom rules are prefixed `mb-` (BEM).
 * Tokens via CSS variables on :root — change once, propagates everywhere.
 *
 * ========================================================================== */

/* ==========================================================================
   mbridge design system — tokens
   ========================================================================== */

:root {
  /* Colors */
  --mb-color-orange: #ff6900;
  --mb-color-text: #2c323a;
  --mb-color-text-muted: #72807d;
  --mb-color-blue: #3d43ff;
  --mb-color-purple: #9f7ce5;
  --mb-color-cream: #fff3e6;
  --mb-color-bg: #f7f7f7;
  --mb-color-white: #ffffff;
  --mb-color-black: #202124;
  --mb-color-border: #e5e7eb;

  /* Typography */
  --mb-font-sans: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  /* Display font — Neue Machina (mbridge licensed, self-hosted in child theme).
     Same family name as used on mbridge.pl production for consistency. */
  --mb-font-display: 'Neue Machina', 'Space Grotesk', system-ui, -apple-system, sans-serif;
  --mb-fs-body: 16px;
  --mb-fs-small: 14px;
  --mb-fs-h3: 24px;
  --mb-fs-h2: 32px;
  --mb-fs-h1: 40px;
  --mb-lh-body: 1.6;
  --mb-lh-heading: 1.2;

  /* Layout — width system from design
     • Page max: 1440px (overall container — informacyjna, w razie potrzeby
       można zastosować do .mb-blog wrapper)
     • Body text:  792px (kolumna paragrafów w treści wpisu)
     • Mid content: 1140px (= 1440 − 150·2 padding — domyślna treść po bokach)
     • Wide widgets: 1300px (Spotlight CrawlCore, Related grid, Team CTA itp. —
       wystają ponad standardowy 150 padding) */
  --mb-page-max:       1440px;
  --mb-content-width:  792px;
  --mb-container-mid:  1140px;
  --mb-container-max:  1300px;
  --mb-radius-pill: 30px;
  --mb-radius-card: 24px;
  --mb-radius-sm: 12px;

  /* Spacing scale */
  --mb-sp-2: 8px;
  --mb-sp-3: 12px;
  --mb-sp-4: 16px;
  --mb-sp-6: 24px;
  --mb-sp-8: 32px;
  --mb-sp-12: 48px;
  --mb-sp-16: 64px;
  --mb-sp-20: 80px;
}

/* Body background and base font for new template pages */
body.single-post.mb-blog-page {
  background: var(--mb-color-bg);
  font-family: var(--mb-font-sans);
  color: var(--mb-color-text);
  overflow-x: hidden;             /* defensive — block horizontal page scroll */
}

/* ==========================================================================
   mbridge blog — wrapper + content typography
   ========================================================================== */

.mb-blog {
  background: var(--mb-color-bg);
  padding-top: var(--clb-header-height, 90px);   /* compensate for Ohio fixed header */
  padding-bottom: var(--mb-sp-20);
  position: relative; /* anchor for side-floating prev/next */
}

.mb-blog-content {
  max-width: var(--mb-container-mid);  /* 1140px — szerszy content area */
  margin: 0 auto;
  padding: 0 var(--mb-sp-4);
  font-family: var(--mb-font-sans);
  font-size: var(--mb-fs-body);  /* 16px */
  font-weight: 400;
  line-height: var(--mb-lh-body);
  letter-spacing: 0;
  color: var(--mb-color-text);
}

/* Headings and paragraphs in the article body are intentionally NOT sized or
   spaced here — typography is controlled by the editor (Elementor per-element /
   Global Fonts) or inherited from the main theme. We keep only the wrapper
   baseline above and the H2/H3 anchor scroll-offset further down. */

.mb-blog-content a {
  color: var(--mb-color-orange);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.mb-blog-content a:hover {
  color: var(--mb-color-orange);
  filter: brightness(0.9);
}

/* Override Ohio's links-underline animation in our blog template — it conflicts
   with our native text-decoration underline and produces a flickering gradient. */
body.mb-blog-page .mb-blog a:not(.button):not(.tag):hover,
body.mb-blog-page .mb-blog a:not(.button):not(.tag).-dashed {
  animation: none !important;
  background-image: none !important;
  background: transparent !important;
}

/* Ohio header — białe tło + zaokrąglone dolne rogi, tylko na wpisach blogowych */
body.mb-blog-page #masthead,
body.mb-blog-page .header.header-1 {
  background: #ffffff !important;
  border-bottom-left-radius: 24px;
  border-bottom-right-radius: 24px;
}

/* Article-body typography for native Elementor widgets (heading, text-editor)
   is fully editor-controlled — per-element settings + the Elementor → Site
   Settings → Global Fonts kit. We intentionally do NOT force font-family /
   color / spacing / line-height here, so editors keep full freedom (e.g. using
   Neue Machina on a heading). Brand defaults belong in the Elementor global kit,
   not in this stylesheet. Our own mb_* widgets and the PHP frame keep their
   styling below. */

.mb-blog-content strong {
  font-weight: 700;
}

.mb-blog-content img {
  max-width: 100%;
  height: auto;
  display: block;
}

.mb-blog-content ul,
.mb-blog-content ol {
  margin: 0 0 var(--mb-sp-4) var(--mb-sp-6);
  padding: 0;
}

.mb-blog-content li {
  margin-bottom: var(--mb-sp-2);
  padding-left: var(--mb-sp-2);
}

.mb-blog-content ul li::marker {
  color: var(--mb-color-orange);
  font-size: 1.2em;
}

.mb-blog-content ol li::marker {
  color: var(--mb-color-orange);
  font-weight: 700;
}

/* When inside Elementor's mb_feature_list widget, reset native list styles */
.mb-blog-content .mb-widget-features li {
  padding-left: 0;
  margin-bottom: 0;
}

.mb-blog-content blockquote {
  border-left: 4px solid var(--mb-color-orange);
  padding: var(--mb-sp-4) var(--mb-sp-6);
  margin: var(--mb-sp-8) 0;
  background: var(--mb-color-white);
  font-size: 18px;
  line-height: 1.5;
  color: var(--mb-color-text);
}

.mb-blog-content blockquote p:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   Play bar (Posłuchaj + reading time + share-telegram)
   ========================================================================== */

.mb-play-bar {
  padding: var(--mb-sp-6) var(--mb-sp-4) 0;  /* top 48 → 24 */
  background: var(--mb-color-bg);
}

.mb-play-bar__inner {
  max-width: var(--mb-container-mid);
  margin: 0 auto;
  display: flex;
  gap: var(--mb-sp-6);
  align-items: center;
  justify-content: center;
}

.mb-play-bar__listen {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: var(--mb-sp-3) var(--mb-sp-6);
  background: var(--mb-color-orange);
  color: var(--mb-color-white);
  border: 0;
  border-radius: var(--mb-radius-pill);
  font-family: var(--mb-font-sans);
  font-weight: 500;
  font-size: var(--mb-fs-small);
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease;
  line-height: 1;
}

.mb-play-bar__listen:hover {
  transform: translateY(-1px);
  color: var(--mb-color-white);
}

.mb-play-bar__listen[aria-pressed="true"] {
  background: var(--mb-color-black);
}

.mb-play-bar__listen-icon {
  display: inline-flex;
  align-items: center;
}

.mb-play-bar__listen-time {
  opacity: 0.76;
  font-weight: 500;
}

/* Share button — naked icon, no bg/border, matches design */
.mb-play-bar__share-wrap {
  position: relative;
}

.mb-play-bar__share {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--mb-color-text);
  transition: color 0.15s ease, transform 0.15s ease;
}

.mb-play-bar__share:hover,
.mb-play-bar__share[aria-expanded="true"] {
  color: var(--mb-color-orange);
}

.mb-play-bar__share:active {
  transform: scale(0.92);
}

/* Share dropdown menu */
.mb-share-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 50;
  min-width: 220px;
  background: var(--mb-color-white);
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(30, 41, 59, 0.18);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mb-share-menu[hidden] { display: none; }

.mb-share-menu__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: transparent;
  border: 0;
  color: var(--mb-color-text);
  font-family: var(--mb-font-sans);
  font-size: var(--mb-fs-small);
  font-weight: 500;
  text-decoration: none;
  text-align: left;
  cursor: pointer;
  width: 100%;
  transition: background 0.15s ease, color 0.15s ease;
}

.mb-share-menu__item:hover {
  background: var(--mb-color-bg);
  color: var(--mb-color-orange);
}

.mb-share-menu__icon {
  display: inline-flex;
  flex-shrink: 0;
}

.mb-share-menu__item--copy.is-copied {
  background: var(--mb-color-orange);
  color: var(--mb-color-white);
}

/* ==========================================================================
   Lead / intro paragraph
   ========================================================================== */

.mb-lead {
  padding: var(--mb-sp-12) var(--mb-sp-4) 0;
  background: var(--mb-color-bg);
}

.mb-lead__inner {
  max-width: 910px;
  margin: 0 auto;
  text-align: center;
  font-family: var(--mb-font-sans);
  font-size: var(--mb-fs-body);
  line-height: 1.6;
  color: var(--mb-color-text);
}

.mb-lead__inner p {
  margin: 0 0 var(--mb-sp-4) 0;
}

.mb-lead__inner p:last-child {
  margin-bottom: 0;
}

/* Lead może się składać z kilku oznaczonych elementów — ostatni z nich
   nie powinien odstawać od dołu slotu. */
.mb-lead__inner > :last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   Cover image (full-bleed, 2:1)
   ========================================================================== */

.mb-cover {
  padding: var(--mb-sp-12) var(--mb-sp-4) 0;
  margin: 0;
}

.mb-cover__inner {
  max-width: var(--mb-container-mid);
  margin: 0 auto;
  border-radius: var(--mb-radius-card);
  overflow: hidden;
  aspect-ratio: 2 / 1;
  background: var(--mb-color-bg);
}

.mb-cover__img,
.mb-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ==========================================================================
   Section navigation (horizontal tabs with H3 dropdown)
   ========================================================================== */

.mb-section-nav {
  background: var(--mb-color-bg);
  padding: 100px var(--mb-sp-4) 0;
  /* Initial overflow state is set server-side via the `is-scrollable` class
     on .mb-section-nav (PHP heuristic in section-nav.php). Footer JS confirms
     and corrects after layout — see assets/js/mb-blog.js. No render-blocking
     JS, no FOUC for the typical case. */
}

.mb-section-nav__inner {
  max-width: var(--mb-container-max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 16px;              /* breathing room between arrows and tab strip */
}

.mb-section-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: nowrap;
  flex: 1 1 auto;
  min-width: 0;
  /* Default (tabs fit): no overflow, dropdowns can free-escape vertically. */
}

/* When JS detects the tabs don't fit, this modifier flips the list into
   a horizontal scroller, hides the scrollbar, and reveals the arrow
   buttons. Dropdowns are disabled in this mode (clipping context). */
.mb-section-nav.is-scrollable .mb-section-nav__list {
  justify-content: flex-start;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;     /* iOS momentum */
  scrollbar-width: none;                  /* Firefox */
  -ms-overflow-style: none;               /* IE/Edge */
}

.mb-section-nav.is-scrollable .mb-section-nav__list::-webkit-scrollbar {
  display: none;
}

/* In is-scrollable mode the __list has overflow-x:auto which clips the
   dropdown. JS (mb-blog.js) promotes each dropdown to position:fixed
   with runtime coords and toggles the .is-open class. */
.mb-section-nav__sub.is-open {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
  z-index: 9999;
}

.mb-section-nav__item {
  flex: 0 0 250px;                        /* fixed width per design */
  max-width: 260px;
  position: relative;
  scroll-snap-align: start;
}

.mb-section-nav__tab {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 64px;
  padding: var(--mb-sp-4) 10px;
  border-bottom: 1px solid var(--mb-color-text-muted);
  font-family: var(--mb-font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.3;
  color: var(--mb-color-black);
  text-align: center;
  text-decoration: none;
  transition: color 0.15s ease, border-color 0.15s ease, border-width 0.15s ease;
  cursor: pointer;
}

.mb-section-nav__tab:hover {
  color: var(--mb-color-orange);
}

.mb-section-nav__item.is-active > .mb-section-nav__tab {
  border-bottom: 4px solid var(--mb-color-orange);
  font-weight: 700;
  color: var(--mb-color-black);
}

.mb-section-nav__label {
  display: block;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* Sub-list (H3 dropdown) — floats over content on hover/focus, doesn't push layout */
.mb-section-nav__sub {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 250px;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 20;
  background: var(--mb-color-bg);
  box-shadow: 0 16px 32px rgba(30, 41, 59, 0.12);
  border-radius: 0 0 8px 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
  pointer-events: none;
}

.mb-section-nav__item:hover > .mb-section-nav__sub,
.mb-section-nav__item:focus-within > .mb-section-nav__sub {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.mb-section-nav__sub-item {
  margin: 0;
}

.mb-section-nav__sub-link {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 64px;
  padding: var(--mb-sp-4) 10px;
  border-bottom: 1px solid var(--mb-color-text-muted);
  font-family: var(--mb-font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.3;
  color: var(--mb-color-black);
  text-align: center;
  text-decoration: none;
  transition: color 0.15s ease, background 0.15s ease;
}

.mb-section-nav__sub-item:last-child .mb-section-nav__sub-link {
  border-bottom: 0;
  border-radius: 0 0 8px 8px;
}

.mb-section-nav__sub-link:hover {
  color: var(--mb-color-orange);
  background: var(--mb-color-white);
}

/* Mobile: collapse to a horizontal scrolling row of pills */
@media (max-width: 768px) {
  .mb-section-nav {
    padding: var(--mb-sp-8) var(--mb-sp-4) 0;
    overflow: hidden;                      /* clip any item overflow */
  }

  .mb-section-nav__list {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;     /* iOS momentum swipe */
    scroll-snap-type: x mandatory;
    scrollbar-width: none;                 /* hidden scrollbar */
    -ms-overflow-style: none;
    justify-content: flex-start;
    max-width: 100%;
  }

  .mb-section-nav__list::-webkit-scrollbar {
    display: none;
    height: 0;
  }

  .mb-section-nav__item {
    flex: 0 0 200px;
    min-width: 200px;
    max-width: 200px;
    scroll-snap-align: start;
  }

  .mb-section-nav__sub {
    display: none !important; /* No dropdowns on mobile */
  }

  .mb-section-nav__tab {
    height: 56px;
  }
}

/* Scroll arrows — flex siblings of the list, naked icons (no bg/border).
   Visible only when .is-scrollable is set on the nav (JS toggles it). */
.mb-section-nav__arrow {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--mb-color-text);
  cursor: pointer;
  transition: color 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
}

/* Default: HTML `hidden` attribute removes the arrow from layout entirely
   (used when the nav isn't scrollable at all — no overflow, no arrows). */
.mb-section-nav__arrow[hidden] {
  display: none;
}

/* When nav IS scrollable, an arrow at a scroll boundary becomes invisible
   but KEEPS its slot — so the tab strip never shifts sideways as you
   scroll to either end. */
.mb-section-nav.is-scrollable .mb-section-nav__arrow[hidden] {
  display: inline-flex;
  visibility: hidden;
  pointer-events: none;
}

.mb-section-nav__arrow:hover {
  color: var(--mb-color-orange);
}

.mb-section-nav__arrow:active {
  transform: scale(0.9);
}

.mb-section-nav__arrow:disabled {
  opacity: 0.35;
  cursor: default;
}

/* Smooth scroll for anchor links */
html {
  scroll-behavior: smooth;
}

/* Make H2/H3 anchor targets scroll past header */
.mb-blog-content h2,
.mb-blog-content h3 {
  scroll-margin-top: 80px;
}

/* ==========================================================================
   Side-floating prev/next nav (desktop only)
   ========================================================================== */

.mb-side-nav {
  display: none;
}

@media (min-width: 1024px) {
  .mb-side-nav {
    display: block;
    position: absolute;
    top: 240px;
    left: 0;
    right: 0;
    pointer-events: none;
    z-index: 5;
  }

  .mb-side-nav__link {
    pointer-events: auto;
    position: absolute;
    top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 93px;
    text-decoration: none;
    color: var(--mb-color-black);
    transition: transform 0.15s ease;
  }

  .mb-side-nav__link:hover {
    transform: translateY(-2px);
    color: var(--mb-color-black);
  }

  /* Stay within the 1440px template box on wide viewports:
     - viewport ≤ 1440px: keep 32px gutter from the viewport edge
     - viewport > 1440px: anchor 32px inside the template edge
       ((viewport − 1440) / 2) + 32px  =  50vw − 720px + 32px  =  50vw − 688px */
  .mb-side-nav__link--prev {
    left: max(32px, calc(50vw - 688px));
  }

  .mb-side-nav__link--next {
    right: max(32px, calc(50vw - 688px));
  }

  .mb-side-nav__thumb {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: var(--mb-radius-sm);
    overflow: hidden;
    background: var(--mb-color-bg);
    display: block;
  }

  .mb-side-nav__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .mb-side-nav__thumb-placeholder {
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--mb-color-bg) 0%, var(--mb-color-cream) 100%);
  }

  .mb-side-nav__label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }

  .mb-side-nav__icon {
    display: inline-flex;
    color: var(--mb-color-black);
  }

  .mb-side-nav__link:hover .mb-side-nav__icon {
    color: var(--mb-color-orange);
  }

  .mb-side-nav__text {
    font-family: var(--mb-font-sans);
    font-weight: 500;
    font-size: 12px;
    color: var(--mb-color-black);
    text-align: center;
    white-space: nowrap;
  }
}

/* ==========================================================================
   Hero
   ========================================================================== */

.mb-blog-hero {
  padding: var(--mb-sp-20) var(--mb-sp-4) var(--mb-sp-8);  /* bottom 64 → 32 */
  background: var(--mb-color-bg);
}

.mb-blog-hero__inner {
  max-width: 910px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--mb-sp-4);
  text-align: center;
}

.mb-blog-hero__meta {
  display: flex;
  align-items: center;
  gap: var(--mb-sp-6);
  flex-wrap: wrap;
  justify-content: center;
}

.mb-blog-hero__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--mb-sp-2);
  text-decoration: none;
  color: inherit;
  transition: opacity 0.15s ease;
}

a.mb-blog-hero__brand:hover {
  opacity: 0.75;
  color: inherit;
}

/* Stacked avatars — overlapping circles when multi-author */
.mb-blog-hero__avatars {
  display: inline-flex;
  align-items: center;
}

.mb-blog-hero__avatars .mb-blog-hero__logo {
  border: 2px solid var(--mb-color-bg);  /* matches hero bg, creates clean overlap */
  margin-left: -12px;
  position: relative;
}

.mb-blog-hero__avatars .mb-blog-hero__logo:first-child {
  margin-left: 0;
}

/* Subtle stacking z-index so first avatar sits on top */
.mb-blog-hero__avatars .mb-blog-hero__logo:nth-child(1) { z-index: 4; }
.mb-blog-hero__avatars .mb-blog-hero__logo:nth-child(2) { z-index: 3; }
.mb-blog-hero__avatars .mb-blog-hero__logo:nth-child(3) { z-index: 2; }
.mb-blog-hero__avatars .mb-blog-hero__logo:nth-child(n+4) { z-index: 1; }

.mb-blog-hero__logo {
  width: 39px;
  height: 39px;
  border-radius: 150px;
  object-fit: cover;
  display: block;
}

.mb-blog-hero__brand-name {
  font-family: var(--mb-font-sans);
  font-weight: 500;
  font-size: var(--mb-fs-small);
  color: var(--mb-color-black);
}

.mb-blog-hero__chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: var(--mb-sp-3) var(--mb-sp-6);
  border-radius: var(--mb-radius-pill);
  font-family: var(--mb-font-sans);
  font-weight: 500;
  font-size: var(--mb-fs-small);
  color: var(--mb-color-black);
  text-decoration: none;
  white-space: nowrap;
  line-height: 1;
}

.mb-blog-hero__chip--ghost {
  border: 2px solid var(--mb-color-black);
  background: transparent;
}

.mb-blog-hero__chip--ghost:hover {
  background: var(--mb-color-black);
  color: var(--mb-color-white);
}

.mb-blog-hero__chip--filled {
  background: var(--mb-color-cream);
  border: none;
}

.mb-blog-hero__chip svg {
  flex-shrink: 0;
}

.mb-blog-hero__title {
  font-family: var(--mb-font-sans);
  font-weight: 400;
  font-size: var(--mb-fs-h1);
  line-height: var(--mb-lh-heading);
  color: var(--mb-color-black);
  text-align: center;
  margin: 0;
  max-width: 910px;
}

.mb-blog-hero__cover {
  width: 100%;
  margin: var(--mb-sp-8) 0 0;
  border-radius: var(--mb-radius-card);
  overflow: hidden;
  aspect-ratio: 16 / 9;
}

.mb-blog-hero__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ==========================================================================
   Related posts — section "Pozostałe artykuły"
   (heading + tabs + featured card + list of item cards)
   ========================================================================== */

.mb-widget-related {
  background: var(--mb-color-white);
  padding: var(--mb-sp-20) var(--mb-sp-6);
  margin-top: var(--mb-sp-16);
  /* Full-bleed white background — break out of the Elementor column. */
  width: 100vw;
  position: relative;
  left: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

.mb-widget-related__inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 var(--clb-grid-gutter, 15px);
}

.mb-widget-related__heading {
  font-family: var(--mb-font-sans) !important;
  font-weight: 400;
  font-size: var(--mb-fs-h2);
  line-height: var(--mb-lh-heading);
  letter-spacing: 0;
  color: var(--mb-color-text);
  margin: 0 0 54px 0;
  max-width: var(--mb-content-width);
}

/* --- Tabs ----------------------------------------------------------------- */

.mb-widget-related .mb-widget-related__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mb-sp-3);
  margin-top: 54px;
  margin-bottom: var(--mb-sp-12);
}

.mb-widget-related__tab {
  display: inline-flex;
  align-items: center;
  padding: 12px 24px;
  border: 1px solid var(--mb-color-border);
  border-radius: var(--mb-radius-pill);
  background: transparent;
  color: var(--mb-color-text);
  font-family: var(--mb-font-sans);
  font-size: var(--mb-fs-small);
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.mb-widget-related__tab:hover {
  border-color: var(--mb-color-text-muted);
}

.mb-widget-related__tab.is-active {
  color: var(--mb-color-text);
  background: var(--mb-color-white);
  /* 6px orange ring rendered INSIDE the button replaces the default 1px
     border (which we hide with transparent so geometry stays identical).
     +1px padding on each side bumps the button 2px to absorb the visual
     space the ring takes. */
  border-color: transparent;
  padding: 13px 25px;
  box-shadow: inset 0 0 0 6px var(--mb-color-orange);
}

/* --- Featured card -------------------------------------------------------- */

.mb-widget-related__featured {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 39px;
  align-items: center;
  text-decoration: none;
  color: inherit;
  margin-bottom: 32px;
}

.mb-widget-related__featured.is-hidden {
  display: none;
}

.mb-widget-related .mb-widget-related__featured-media img {
  display: block;
  width: 100%;
  height: 294px;
  object-fit: cover;
  border-radius: var(--mb-radius-card);
}

.mb-widget-related .mb-widget-related__featured-placeholder {
  width: 100%;
  height: 294px;
  border-radius: var(--mb-radius-card);
  background: linear-gradient(135deg, var(--mb-color-cream) 0%, var(--mb-color-bg) 100%);
}

.mb-widget-related__featured-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}

.mb-widget-related .mb-widget-related__featured-title {
  font-family: var(--mb-font-sans);
  font-weight: 500;
  font-size: 32px;
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--mb-color-text);
  margin: 0;
}

.mb-widget-related .mb-widget-related__featured-cta {
  display: inline-flex;
  align-items: center;
  padding: 14px 24px;
  background: var(--mb-color-orange);
  color: var(--mb-color-white);
  border-radius: var(--mb-radius-pill);
  font-family: var(--mb-font-sans);
  font-weight: 500;
  font-size: 16px;
  line-height: 1;
  margin: 0;
  transition: filter 0.15s ease;
}

/* CTA brightens when hovering anywhere on the featured card.
   The CTA itself is a <span>, so Ohio's a:hover reset doesn't touch it. */
.mb-widget-related__featured:hover .mb-widget-related__featured-cta {
  filter: brightness(1.1);
}

/* --- List items ----------------------------------------------------------- */

.mb-widget-related .mb-widget-related__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.mb-widget-related .mb-widget-related__item {
  /* hidden state managed via [data-mb-tabs] + JS.
     Reset Ohio theme li margin/padding that would inflate the gap. */
  margin: 0;
  padding: 0;
}

.mb-widget-related__item.is-hidden {
  display: none;
}

.mb-widget-related__item-link {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 25px;
  align-items: center;
  text-decoration: none;
  color: inherit;
}

.mb-widget-related .mb-widget-related__item-media img {
  display: block;
  width: 100%;
  height: 111px;
  object-fit: cover;
  border-radius: var(--mb-radius-card);
}

.mb-widget-related .mb-widget-related__item-placeholder {
  width: 100%;
  height: 111px;
  border-radius: var(--mb-radius-card);
  background: linear-gradient(135deg, var(--mb-color-bg) 0%, var(--mb-color-cream) 100%);
}

.mb-widget-related .mb-widget-related__item-title {
  font-family: var(--mb-font-sans);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--mb-color-text);
  margin: 0;
}

/* ==========================================================================
   Post navigation (prev/next)
   ========================================================================== */

.mb-post-nav {
  padding: var(--mb-sp-12) var(--mb-sp-4);
  background: var(--mb-color-bg);
}

.mb-post-nav__inner {
  max-width: var(--mb-container-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--mb-sp-8);
}

.mb-post-nav__link {
  display: flex;
  align-items: center;
  gap: var(--mb-sp-4);
  text-decoration: none;
  color: var(--mb-color-text);
  padding: var(--mb-sp-4);
  border-radius: var(--mb-radius-sm);
  transition: background 0.15s ease;
}

.mb-post-nav__link:hover {
  background: var(--mb-color-cream);
  color: var(--mb-color-text);
}

.mb-post-nav__link--next {
  flex-direction: row-reverse;
  text-align: right;
  justify-content: flex-end;
}

.mb-post-nav__icon {
  flex-shrink: 0;
  display: inline-flex;
}

.mb-post-nav__label {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mb-post-nav__direction {
  font-family: var(--mb-font-sans);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--mb-color-text-muted);
}

.mb-post-nav__title {
  font-family: var(--mb-font-sans);
  font-weight: 500;
  font-size: var(--mb-fs-body);
  color: var(--mb-color-text);
}

/* ==========================================================================
   Team CTA (mb_team_cta widget) — bottom CTA section.
   Mosaic of specialist avatars on the left, heading + CTA on the right.
   ========================================================================== */

.mb-widget-team-cta {
  padding: var(--mb-sp-20) 0;
  background: transparent;        /* inherit surrounding section colour */
}

/* Cancel Elementor's default column gutter padding around this widget so
   the full-bleed avatar mosaic + decor can reach the viewport edges
   (otherwise --clb-grid-gutter pushes the widget away from the edge). */
.elementor-element-populated:has(.mb-widget-team-cta) {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.mb-widget-team-cta__inner {
  max-width: 1142px;
  margin: 0 auto;
  display: grid;
  /* Mosaic side is wider than text side (~2:1) to match the Figma layout
     where the 'm' decor + avatars occupy the dominant left area. */
  grid-template-columns: 2fr 1fr;
  gap: 60px;
  align-items: center;
}

/* --- Avatar mosaic (left side) ------------------------------------------- */

.mb-widget-team-cta__avatars {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
}

/* Background decoration — pre-cut SVG asset.
   - Anchored to the RIGHT edge of the avatar container.
   - Width grows leftward up to the left edge of the template (1440px max).
     Formula on desktop:
       lower bound = 100% (never narrower than container)
       preferred   = 50vw + 100% − 571px  (extend to viewport.left)
       upper bound = 100% + 149px         (cap at template padding 149px)
   - On mobile the avatar container itself is 100vw + left-anchored to the
     viewport, so the same clamp drops to 100% = 100vw — vector covers
     full viewport width.
   - SVG inside uses preserveAspectRatio="xMinYMid meet" — vector fits
     entirely (no top/bottom crop), pinned LEFT, vertically centered.
     If the box is wider than the SVG 807/721 ratio, void appears on the
     right (avatars overlay it, so visually fine). */
.mb-widget-team-cta__decor {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: clamp(100%, calc(50vw + 100% - 571px), calc(100% + 149px));
  z-index: 0;
  display: block;
  pointer-events: none;
}

.mb-widget-team-cta__avatar {
  position: absolute;
  border-radius: 14%;             /* squircle look */
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(32, 33, 36, 0.10);
  aspect-ratio: 1 / 1;
  z-index: 1;
}

.mb-widget-team-cta .mb-widget-team-cta__avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;               /* squircle clip is on the wrapper */
}

.mb-widget-team-cta__avatar-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #d8d8d8 0%, #b5b5b5 100%);
}

/* Fixed positions per avatar index (max 8) — from Figma 180:51 */
.mb-widget-team-cta__avatar--1 { width: 14%; top: 17%;  left: -5%;  }
.mb-widget-team-cta__avatar--2 { width: 28%; top: 11%;  left: 32%;  }
.mb-widget-team-cta__avatar--3 { width: 18%; top: 46%;  left: 5%;   }
.mb-widget-team-cta__avatar--4 { width: 10%; top: 51%;  left: 63%;  }
.mb-widget-team-cta__avatar--5 { width: 18%; top: 82%;  left: 72%;  }
.mb-widget-team-cta__avatar--6 { width: 18%; top: 72%;  left: 40%;  }
.mb-widget-team-cta__avatar--7 { width: 24%; top: 72%;  left: -13%; }
.mb-widget-team-cta__avatar--8 { width: 13%; top: 47%;  left: 40%;  }

/* --- Body (heading + sub + CTA) ----------------------------------------- */

.mb-widget-team-cta__body {
  display: flex;
  flex-direction: column;
  gap: 28px;
  align-items: flex-start;
  /* Stacking context so the heading negative margin renders above the
     avatar/decor column. */
  position: relative;
  z-index: 2;
  /* Bleed rightward up to the template edge (max 1440px), mirroring the
     vector's leftward bleed. The formula gives:
        viewport ≥ 1440: -149px (= half of 1440 − 1142 template padding)
        viewport 1300:   -79px
        viewport 1142:   0
     Mobile breakpoint resets this. */
  margin-right: calc((1142px - min(100vw, 1440px)) / 2);
}

.mb-widget-team-cta .mb-widget-team-cta__heading {
  font-family: var(--mb-font-display) !important;
  font-weight: 400;
  font-size: 60px;
  line-height: 1.06;
  letter-spacing: 0;
  color: var(--mb-color-black);
  margin: 0 0 0 -195px;
}

.mb-widget-team-cta .mb-widget-team-cta__subheading {
  font-family: var(--mb-font-sans);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.2;
  color: var(--mb-color-text);
  margin: 0 0 0 -80px;
}

.mb-widget-team-cta .mb-widget-team-cta__btn {
  display: inline-flex;
  align-items: center;
  margin-left: -80px;
  padding: 14px 24px;
  background: var(--mb-color-orange);
  color: var(--mb-color-white);
  border-radius: var(--mb-radius-pill);
  font-family: var(--mb-font-sans);
  font-weight: 500;
  font-size: 16px;
  line-height: 1;
  text-decoration: none;
  transition: filter 0.15s ease;
}

/* Force white text/icon even when Ohio's content-link colours kick in. */
.mb-widget-team-cta .mb-widget-team-cta__btn,
.mb-widget-team-cta .mb-widget-team-cta__btn span,
.mb-widget-team-cta .mb-widget-team-cta__btn svg {
  color: var(--mb-color-white);
}

/* Match the mb_expert_cta hover style: light brightness, no lift.
   Specificity 0,6,1 (body + 5 classes + :hover) beats Ohio's
   a:not(.button):not(.tag):hover at 0,5,2 (B-level dominates). */
body.mb-blog-page .mb-blog .mb-widget-team-cta .mb-widget-team-cta__inner .mb-widget-team-cta__body .mb-widget-team-cta__btn:hover {
  background: var(--mb-color-orange) !important;
  background-image: none !important;
  filter: brightness(1.1);
  color: var(--mb-color-white);
  transform: none;
}

/* Responsive: stack columns below 1024px, smaller type on mobile */
@media (max-width: 1336px) {
  .mb-widget-team-cta__inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  /* Cancel the desktop overlap margins — on stacked layout the heading,
     subheading and CTA would slip past the viewport's left edge. */
  .mb-widget-team-cta .mb-widget-team-cta__heading,
  .mb-widget-team-cta .mb-widget-team-cta__subheading,
  .mb-widget-team-cta .mb-widget-team-cta__btn {
    margin-left: 0;
  }

  /* On stacked layout: body (text + CTA) goes ABOVE the avatar mosaic,
     with horizontal padding matching the rest of the blog content
     and a tighter vertical rhythm between heading/sub/CTA. */
  .mb-widget-team-cta__body {
    order: -1;
    padding: 0 var(--mb-sp-4);
    gap: var(--mb-sp-4);
    margin-right: 0;            /* cancel desktop rightward bleed */
  }

  /* Trigger the mobile/stacked layout earlier than 1024px because once
     the viewport drops below ~1330px the desktop 2fr/1fr grid no longer
     leaves enough room on the left for avatars with negative-left
     positions (--1, --7) — they'd slip outside the viewport.

     The container is narrower than the viewport AND offset to the right,
     so avatars with negative-left positions still land inside the screen,
     and all avatars shrink proportionally. The decor SVG stretches
     leftward to fill the resulting gap, keeping the 'm' shape anchored
     to the viewport edge. */
  .mb-widget-team-cta__avatars {
    width: 80vw;
    margin: 0;
    position: relative;
    left: calc(50% - 50vw + 15vw);
  }

  .mb-widget-team-cta__decor {
    width: calc(100% + 15vw);
  }

  .mb-widget-team-cta .mb-widget-team-cta__heading {
    font-size: 48px;
  }
}

@media (max-width: 640px) {
  /* Tighter vertical rhythm on mobile, no horizontal padding so the
     full-bleed avatar mosaic + decor reach the viewport edges. */
  .mb-widget-team-cta {
    padding: var(--mb-sp-12) 0;
  }

  .mb-widget-team-cta .mb-widget-team-cta__heading {
    font-size: 36px;
  }

  .mb-widget-team-cta__subheading {
    font-size: 18px;
  }
}

/* ==========================================================================
   Full-bleed image widget — capped at the 1440px template on desktop,
   no side gutters/padding/margins on mobile.
   ========================================================================== */

.mb-widget-full-image {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: min(100vw, 1440px);
  margin: var(--mb-sp-12) 0;
  padding: 0;
  display: block;
  box-sizing: border-box;
}

.mb-widget-full-image img {
  display: block;
  width: 100%;
  height: auto;
}

.mb-widget-full-image--rounded img {
  border-radius: var(--mb-radius-card);
}

/* Cancel Elementor column gutter so the centering trick works against the
   section center rather than a padding-shifted column center. */
.elementor-element-populated:has(.mb-widget-full-image) {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ==========================================================================
   Elementor widgets — mbridge
   ========================================================================== */

/* --- Expert CTA — two layouts:
   .mb-widget-expert--vertical : purple-bordered card 326×470 (Maciej, design 1:547)
   .mb-widget-expert--horizontal : full-width banner 1142×233 (Mateusz, design 180:47)
   --- */
.mb-widget-expert {
  margin: 0;
  background: var(--mb-color-bg);
  border: 4px solid var(--mb-color-purple);
  border-radius: var(--mb-radius-card);
  font-family: var(--mb-font-sans);
  color: var(--mb-color-text);
  box-sizing: border-box;
}

.mb-widget-expert--vertical {
  display: flex;
  flex-direction: column;
  gap: var(--mb-sp-6);
  width: 326px;
  max-width: 100%;
  min-height: 470px;
  padding: 40px var(--mb-sp-6) var(--mb-sp-6);
  background: transparent;
}

.mb-widget-expert--border-orange { border-color: var(--mb-color-orange); }
.mb-widget-expert--border-grey   { border-color: var(--mb-color-text-muted); }
.mb-widget-expert--border-cream  { border-color: var(--mb-color-cream); }
.mb-widget-expert--border-dark   { border-color: var(--mb-color-black); }
.mb-widget-expert--border-text   { border-color: var(--mb-color-text); }
.mb-widget-expert--border-purple { border-color: var(--mb-color-purple); }
.mb-widget-expert--border-blue   { border-color: var(--mb-color-blue); }

/* Optional background fill (border colors mirrored as backgrounds).
   Placed after .mb-widget-expert--vertical so they override its transparent bg. */
.mb-widget-expert--bg-orange { background: var(--mb-color-orange); }
.mb-widget-expert--bg-grey   { background: var(--mb-color-text-muted); }
.mb-widget-expert--bg-cream  { background: var(--mb-color-cream); }
.mb-widget-expert--bg-dark   { background: var(--mb-color-black); }
.mb-widget-expert--bg-text   { background: var(--mb-color-text); }
.mb-widget-expert--bg-purple { background: var(--mb-color-purple); }
.mb-widget-expert--bg-blue   { background: var(--mb-color-blue); }

/* Dark fills → light text for readability (button keeps its own colors). */
.mb-widget-expert--on-dark .mb-widget-expert__heading,
.mb-widget-expert--on-dark .mb-widget-expert__desc,
.mb-widget-expert--on-dark .mb-widget-expert__name,
.mb-widget-expert--on-dark .mb-widget-expert__role {
  color: var(--mb-color-white);
}

/* --- Horizontal layout — Mateusz style banner 1142×233 --- */
.mb-widget-expert--horizontal {
  display: flex;
  align-items: center;
  gap: var(--mb-sp-6);
  max-width: var(--mb-container-mid);  /* 1140px */
  min-height: 233px;
  padding: var(--mb-sp-6);
  margin-left: auto;
  margin-right: auto;
}

.mb-widget-expert--horizontal .mb-widget-expert__photo {
  width: 185px;
  height: 185px;
  border-radius: var(--mb-radius-sm);
  overflow: hidden;
  flex-shrink: 0;
}

.mb-widget-expert--horizontal .mb-widget-expert__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mb-widget-expert--horizontal .mb-widget-expert__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: var(--mb-sp-3);
  min-width: 0;
}

.mb-widget-expert--horizontal .mb-widget-expert__heading {
  font-family: var(--mb-font-display) !important;
  font-size: 28px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.005em;
  margin: 0;
  color: var(--mb-color-text);
}

.mb-widget-expert--horizontal .mb-widget-expert__row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 20px;
  margin-top: var(--mb-sp-2);
  flex-wrap: wrap;
}

/* In horizontal layout person shouldn't grow — keep CTA right after it. */
.mb-widget-expert--horizontal .mb-widget-expert__person {
  flex: 0 0 auto;
}

.mb-widget-expert--horizontal .mb-widget-expert__btn {
  align-self: center;
}

@media (max-width: 768px) {
  .mb-widget-expert--horizontal {
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
  }
  /* Keep desktop avatar size on mobile, pinned to the left edge. */
  .mb-widget-expert--horizontal .mb-widget-expert__photo {
    align-self: flex-start;
  }
  .mb-widget-expert--horizontal .mb-widget-expert__heading { font-size: 22px; }
  .mb-widget-expert--horizontal .mb-widget-expert__row {
    flex-direction: column;
    align-items: stretch;
  }
}

.mb-widget-expert .mb-widget-expert__heading {
  font-family: var(--mb-font-display) !important;
  font-size: 32px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--mb-color-text);
}

.mb-widget-expert .mb-widget-expert__desc {
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
  color: var(--mb-color-text);
}

.mb-widget-expert__row {
  display: flex;
  align-items: flex-start;
  gap: var(--mb-sp-4);
  margin-top: auto;
}

.mb-widget-expert__photo {
  width: 79px;
  height: 97px;
  flex-shrink: 0;
}

.mb-widget-expert .mb-widget-expert__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 16px;
}

.mb-widget-expert__person {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14px;
  line-height: 1.4;
  display: flex;
  flex-direction: column;
  gap: 0;
  align-items: flex-start;
}

/* Restore spacing only between the text block and the CTA below. */
.mb-widget-expert__person .mb-widget-expert__btn {
  margin-top: var(--mb-sp-3);
}

.mb-widget-expert .mb-widget-expert__name {
  font-weight: 700;
  margin: 0;
  color: var(--mb-color-text);
}

.mb-widget-expert .mb-widget-expert__role {
  font-weight: 400;
  margin: 0;
  color: var(--mb-color-text);
}

.mb-widget-expert .mb-widget-expert__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  align-self: flex-start;
  padding: 12px 20px;
  background: var(--mb-color-orange);
  color: var(--mb-color-white);
  border-radius: var(--mb-radius-pill);
  font-weight: 500;
  font-size: 14px;
  text-decoration: none;
  transition: filter 0.15s ease;
  white-space: nowrap;
}

.mb-widget-expert .mb-widget-expert__btn,
.mb-widget-expert .mb-widget-expert__btn span,
.mb-widget-expert .mb-widget-expert__btn svg {
  color: var(--mb-color-white);
}

/* Button fill — brand colors. Cream keeps dark text; the rest stay white. */
.mb-widget-expert--btn-orange .mb-widget-expert__btn { background: var(--mb-color-orange); }
.mb-widget-expert--btn-grey   .mb-widget-expert__btn { background: var(--mb-color-text-muted); }
.mb-widget-expert--btn-cream  .mb-widget-expert__btn { background: var(--mb-color-cream); }
.mb-widget-expert--btn-dark   .mb-widget-expert__btn { background: var(--mb-color-black); }
.mb-widget-expert--btn-text   .mb-widget-expert__btn { background: var(--mb-color-text); }
.mb-widget-expert--btn-purple .mb-widget-expert__btn { background: var(--mb-color-purple); }
.mb-widget-expert--btn-blue   .mb-widget-expert__btn { background: var(--mb-color-blue); }

.mb-widget-expert--btn-cream .mb-widget-expert__btn,
.mb-widget-expert--btn-cream .mb-widget-expert__btn span,
.mb-widget-expert--btn-cream .mb-widget-expert__btn svg {
  color: var(--mb-color-text);
}

/* Ohio resets a:not(.button):not(.tag):hover background to transparent
   with !important (selector specificity 0,5,2). We bump our specificity
   above that with body.mb-blog-page + .mb-blog + .mb-widget-expert + variant +
   .mb-widget-expert__btn + :hover = 0,6,1 (the B-level dominates) and add
   !important to lock in. */
body.mb-blog-page .mb-blog .mb-widget-expert.mb-widget-expert--vertical .mb-widget-expert__btn:hover,
body.mb-blog-page .mb-blog .mb-widget-expert.mb-widget-expert--horizontal .mb-widget-expert__btn:hover {
  background: var(--mb-color-orange) !important;
  background-image: none !important;
  filter: brightness(1.1);
  color: var(--mb-color-white);
  transform: none;
}

/* =========================================================================
   Banner CTA (mb_banner_cta) — flexible promo banner.
   Image position left/right/top/bottom + size presets S/M/L, full brand
   palette for border/background/button, no expert footer.
   ========================================================================= */
.mb-widget-banner {
  display: flex;
  gap: var(--mb-sp-6);
  align-items: center;
  margin: var(--mb-sp-6) 0;
  padding: var(--mb-sp-6);
  border: 4px solid transparent;
  border-radius: var(--mb-radius-card);
  background: transparent;
  font-family: var(--mb-font-sans);
  color: var(--mb-color-text);
  box-sizing: border-box;
}

.mb-widget-banner--img-left   { flex-direction: row; }
.mb-widget-banner--img-right  { flex-direction: row-reverse; }
.mb-widget-banner--img-top    { flex-direction: column; }
.mb-widget-banner--img-bottom { flex-direction: column-reverse; }

/* Body */
.mb-widget-banner__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--mb-sp-4);
}
.mb-widget-banner--align-center .mb-widget-banner__body { align-items: center; text-align: center; }
.mb-widget-banner--align-left   .mb-widget-banner__body { align-items: flex-start; text-align: left; }

/* Media */
.mb-widget-banner__media { flex: 0 0 auto; overflow: hidden; }
.mb-widget-banner__media img { display: block; }

/* Side layouts (left/right): fixed-width column, natural height. */
.mb-widget-banner--img-left.mb-widget-banner--imgsize-small  .mb-widget-banner__media,
.mb-widget-banner--img-right.mb-widget-banner--imgsize-small .mb-widget-banner__media { width: 140px; }
.mb-widget-banner--img-left.mb-widget-banner--imgsize-medium .mb-widget-banner__media,
.mb-widget-banner--img-right.mb-widget-banner--imgsize-medium .mb-widget-banner__media { width: 220px; }
.mb-widget-banner--img-left.mb-widget-banner--imgsize-large  .mb-widget-banner__media,
.mb-widget-banner--img-right.mb-widget-banner--imgsize-large .mb-widget-banner__media { width: 320px; }
.mb-widget-banner--img-left .mb-widget-banner__media img,
.mb-widget-banner--img-right .mb-widget-banner__media img { width: 100%; height: auto; }

/* Top/bottom layouts: full-width strip, height by preset. */
.mb-widget-banner--img-top .mb-widget-banner__media,
.mb-widget-banner--img-bottom .mb-widget-banner__media { width: 100%; }
.mb-widget-banner--img-top .mb-widget-banner__media img,
.mb-widget-banner--img-bottom .mb-widget-banner__media img { width: 100%; object-fit: cover; }
.mb-widget-banner--img-top.mb-widget-banner--imgsize-small  .mb-widget-banner__media img,
.mb-widget-banner--img-bottom.mb-widget-banner--imgsize-small .mb-widget-banner__media img { height: 140px; }
.mb-widget-banner--img-top.mb-widget-banner--imgsize-medium .mb-widget-banner__media img,
.mb-widget-banner--img-bottom.mb-widget-banner--imgsize-medium .mb-widget-banner__media img { height: 220px; }
.mb-widget-banner--img-top.mb-widget-banner--imgsize-large  .mb-widget-banner__media img,
.mb-widget-banner--img-bottom.mb-widget-banner--imgsize-large .mb-widget-banner__media img { height: 300px; }

.mb-widget-banner--rounded .mb-widget-banner__media { border-radius: 16px; }

/* Typography */
.mb-widget-banner .mb-widget-banner__heading {
  font-family: var(--mb-font-display) !important;
  font-size: 28px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--mb-color-text);
}
.mb-widget-banner .mb-widget-banner__desc {
  font-size: 15px;
  line-height: 1.5;
  margin: 0;
  color: var(--mb-color-text);
}

/* Border colors */
.mb-widget-banner--border-orange { border-color: var(--mb-color-orange); }
.mb-widget-banner--border-grey   { border-color: var(--mb-color-text-muted); }
.mb-widget-banner--border-cream  { border-color: var(--mb-color-cream); }
.mb-widget-banner--border-dark   { border-color: var(--mb-color-black); }
.mb-widget-banner--border-text   { border-color: var(--mb-color-text); }
.mb-widget-banner--border-purple { border-color: var(--mb-color-purple); }
.mb-widget-banner--border-blue   { border-color: var(--mb-color-blue); }

/* Background fills */
.mb-widget-banner--bg-orange { background: var(--mb-color-orange); }
.mb-widget-banner--bg-grey   { background: var(--mb-color-text-muted); }
.mb-widget-banner--bg-cream  { background: var(--mb-color-cream); }
.mb-widget-banner--bg-dark   { background: var(--mb-color-black); }
.mb-widget-banner--bg-text   { background: var(--mb-color-text); }
.mb-widget-banner--bg-purple { background: var(--mb-color-purple); }
.mb-widget-banner--bg-blue   { background: var(--mb-color-blue); }

/* Dark fills → light text (button keeps its own colors). */
.mb-widget-banner--on-dark .mb-widget-banner__heading,
.mb-widget-banner--on-dark .mb-widget-banner__desc {
  color: var(--mb-color-white);
}

/* Button */
.mb-widget-banner .mb-widget-banner__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  align-self: flex-start;
  padding: 12px 20px;
  background: var(--mb-color-orange);
  color: var(--mb-color-white);
  border-radius: var(--mb-radius-pill);
  font-weight: 500;
  font-size: 14px;
  text-decoration: none;
  transition: filter 0.15s ease;
  white-space: nowrap;
}
.mb-widget-banner--align-center .mb-widget-banner__btn { align-self: center; }
.mb-widget-banner .mb-widget-banner__btn,
.mb-widget-banner .mb-widget-banner__btn span,
.mb-widget-banner .mb-widget-banner__btn svg { color: var(--mb-color-white); }
.mb-widget-banner__btn-icon { display: inline-flex; }

.mb-widget-banner--btn-orange .mb-widget-banner__btn { background: var(--mb-color-orange); }
.mb-widget-banner--btn-grey   .mb-widget-banner__btn { background: var(--mb-color-text-muted); }
.mb-widget-banner--btn-cream  .mb-widget-banner__btn { background: var(--mb-color-cream); }
.mb-widget-banner--btn-dark   .mb-widget-banner__btn { background: var(--mb-color-black); }
.mb-widget-banner--btn-text   .mb-widget-banner__btn { background: var(--mb-color-text); }
.mb-widget-banner--btn-purple .mb-widget-banner__btn { background: var(--mb-color-purple); }
.mb-widget-banner--btn-blue   .mb-widget-banner__btn { background: var(--mb-color-blue); }
.mb-widget-banner--btn-cream .mb-widget-banner__btn,
.mb-widget-banner--btn-cream .mb-widget-banner__btn span,
.mb-widget-banner--btn-cream .mb-widget-banner__btn svg { color: var(--mb-color-text); }

/* Ohio resets a:hover background to transparent !important — re-assert per
   button color with higher specificity (see expert note above). */
body.mb-blog-page .mb-blog .mb-widget-banner .mb-widget-banner__btn:hover {
  background-image: none !important;
  filter: brightness(1.1);
  transform: none;
}
body.mb-blog-page .mb-blog .mb-widget-banner.mb-widget-banner--btn-orange .mb-widget-banner__btn:hover { background: var(--mb-color-orange) !important; }
body.mb-blog-page .mb-blog .mb-widget-banner.mb-widget-banner--btn-grey   .mb-widget-banner__btn:hover { background: var(--mb-color-text-muted) !important; }
body.mb-blog-page .mb-blog .mb-widget-banner.mb-widget-banner--btn-cream  .mb-widget-banner__btn:hover { background: var(--mb-color-cream) !important; }
body.mb-blog-page .mb-blog .mb-widget-banner.mb-widget-banner--btn-dark   .mb-widget-banner__btn:hover { background: var(--mb-color-black) !important; }
body.mb-blog-page .mb-blog .mb-widget-banner.mb-widget-banner--btn-text   .mb-widget-banner__btn:hover { background: var(--mb-color-text) !important; }
body.mb-blog-page .mb-blog .mb-widget-banner.mb-widget-banner--btn-purple .mb-widget-banner__btn:hover { background: var(--mb-color-purple) !important; }
body.mb-blog-page .mb-blog .mb-widget-banner.mb-widget-banner--btn-blue   .mb-widget-banner__btn:hover { background: var(--mb-color-blue) !important; }

/* Mobile: side layouts stack with image on top. */
@media (max-width: 768px) {
  .mb-widget-banner { padding: var(--mb-sp-6); }
  .mb-widget-banner--img-left,
  .mb-widget-banner--img-right { flex-direction: column; }
  .mb-widget-banner--img-left .mb-widget-banner__media,
  .mb-widget-banner--img-right .mb-widget-banner__media { width: 100%; }
  .mb-widget-banner--img-left .mb-widget-banner__media img,
  .mb-widget-banner--img-right .mb-widget-banner__media img { width: 100%; height: auto; }
}

/* --- "Poznaj nasze treści" — 3-column post link grid --- */
.mb-pnt {
  padding: var(--mb-sp-16) var(--mb-sp-4) var(--mb-sp-12);
  background: var(--mb-color-bg);
}

.mb-pnt__inner {
  max-width: var(--mb-container-max);
  margin: 0 auto;
}

.mb-pnt__heading {
  font-family: var(--mb-font-sans);
  font-weight: 400;
  font-size: var(--mb-fs-body);
  color: var(--mb-color-text);
  margin: 0 0 var(--mb-sp-6) 0;
}

.mb-pnt__columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--mb-sp-8);
}

.mb-pnt__col {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.mb-pnt__item { margin: 0; }

.mb-pnt__link {
  font-family: var(--mb-font-sans);
  font-weight: 500;
  font-size: var(--mb-fs-body);
  line-height: 1.4;
  color: var(--mb-color-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.mb-pnt__link:hover {
  color: var(--mb-color-orange);
}

@media (max-width: 768px) {
  .mb-pnt__columns {
    grid-template-columns: 1fr;
    gap: var(--mb-sp-4);
  }
}

/* --- Feature List — branded bullets with circular icon markers --- */
.mb-blog-content .mb-widget-features {
  list-style: none;
  margin: var(--mb-sp-6) 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.mb-widget-features--gap-tight  { gap: 16px; }
.mb-widget-features--gap-normal { gap: 24px; }
.mb-widget-features--gap-loose  { gap: 32px; }

/* WYSIWYG content wraps text in <p>; zero the margin so list items don't get
   extra space from the theme's global paragraph spacing. */
.mb-widget-features .mb-widget-features__body p {
  margin: 0;
}

.mb-widget-features__item {
  display: flex;
  align-items: center;
  gap: 15px;
  margin: 0;
  padding: 0;
  font-family: var(--mb-font-sans);
  font-size: 14px;
  line-height: 1;
  color: var(--mb-color-text);
}

.mb-widget-features__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: var(--mb-color-black);  /* icon stroke color */
}

.mb-widget-features__icon svg {
  width: auto;
  height: auto;
}

/* Icon background colors */
.mb-widget-features--color-orange .mb-widget-features__icon { background: var(--mb-color-orange); color: var(--mb-color-black); }
.mb-widget-features--color-blue   .mb-widget-features__icon { background: var(--mb-color-blue);   color: #ffffff; }
.mb-widget-features--color-dark   .mb-widget-features__icon { background: var(--mb-color-black);  color: #ffffff; }
.mb-widget-features--color-cream  .mb-widget-features__icon { background: var(--mb-color-cream);  color: var(--mb-color-black); }
.mb-widget-features--color-purple .mb-widget-features__icon { background: var(--mb-color-purple); color: #ffffff; }

.mb-widget-features__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.mb-widget-features__title {
  font-size: var(--mb-fs-body);
  line-height: 1.5;
  color: var(--mb-color-text);
}


/* --- Spotlight CrawlCore (case-study card) — pixel mapping from Figma 1:851
   Container max 1440×500 (template width), padding 122px top / 32px sides.
   Text col 632 / Image col 702. Chips overflow top of container.
   Breaks out of Elementor column (~1140) to reach the template max-width.
   Centering trick: left:50% + translateX(-50%) snaps it to parent center,
   which is also the section/viewport center. --- */
.mb-widget-spotlight {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  /* Cap at 1376px and stay there as long as there's room — the gutter only
     kicks in once the banner would otherwise touch the viewport edges, so
     it never narrows prematurely. */
  width: min(100vw - (var(--mb-sp-6) * 2), 1376px);
  margin: var(--mb-sp-16) 0;
  display: flex;
  flex-direction: column;
  border-radius: var(--mb-radius-card);
  padding: 4px;
  box-sizing: border-box;
}

/* Cancel Elementor column gutter around the spotlight so the centering
   trick (left:50% + translateX(-50%)) works against the section center,
   not a padding-shifted column center. */
.elementor-element-populated:has(.mb-widget-spotlight) {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Inner card with the heading, image, button and chips.
   Sits on the coloured spotlight background with a small inset. */
.mb-widget-spotlight__card {
  position: relative;
  border-radius: var(--mb-radius-card);
  overflow: visible;        /* chips overflow top */
  min-height: 500px;
  box-sizing: border-box;
}

.mb-widget-spotlight__inner {
  display: grid;
  grid-template-columns: 632fr 702fr;
  column-gap: 26px;           /* small natural gap (632+702=1334 vs 1334 inner) */
  padding: 122px 32px 0 32px;
  position: relative;
  min-height: 500px;
  box-sizing: border-box;
}

.mb-widget-spotlight__text {
  display: flex;
  flex-direction: column;
  gap: 32px;
  max-width: 632px;
}

.mb-widget-spotlight .mb-widget-spotlight__heading {
  font-family: var(--mb-font-display) !important;
  font-weight: 400;
  font-size: 50px;
  line-height: 1.06;
  letter-spacing: -0.005em;
  margin: 0;
  color: inherit;
}

.mb-widget-spotlight__subheading {
  font-family: var(--mb-font-sans);
  font-weight: 400;
  font-size: 32px;
  line-height: 1.1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin: 0;
  color: inherit;
}

.mb-widget-spotlight__btn-wrap {
  margin: 0;
}

.mb-widget-spotlight .mb-widget-spotlight__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  background: var(--mb-color-orange);
  color: var(--mb-color-white);
  border-radius: 30px;
  font-family: var(--mb-font-sans);
  font-weight: 500;
  font-size: 16px;
  text-decoration: none;
  transition: filter 0.15s ease;
  white-space: nowrap;
}

/* Force white text/icon even when Ohio's content-link colours kick in. */
.mb-widget-spotlight .mb-widget-spotlight__btn,
.mb-widget-spotlight .mb-widget-spotlight__btn span,
.mb-widget-spotlight .mb-widget-spotlight__btn svg {
  color: var(--mb-color-white);
}

/* Brightness hover (no lift). Specificity 0,6,1 beats Ohio's
   a:not(.button):not(.tag):hover at 0,5,2. */
body.mb-blog-page .mb-blog .mb-widget-spotlight .mb-widget-spotlight__card .mb-widget-spotlight__text .mb-widget-spotlight__btn:hover {
  background: var(--mb-color-orange) !important;
  background-image: none !important;
  filter: brightness(1.1);
  color: var(--mb-color-white);
  transform: none;
}

.mb-widget-spotlight__media {
  position: relative;
  align-self: stretch;        /* span full container height */
  overflow: visible;          /* chips overflow */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;  /* push image to the bottom (= against footer) */
}

/* Plain mockup image sitting in the right column of the banner —
   natural width with rounded corners. */
.mb-widget-spotlight__image {
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
}

.mb-widget-spotlight__image img {
  display: block;
  width: 100%;
  height: auto;
}

/* Floating feature chips — overflow top of card */
.mb-widget-spotlight__chip {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 260px;
  min-height: 77px;
  padding: 14px 20px;
  border-radius: 18px;
  box-shadow: 0 27px 40px 0 rgba(30, 41, 59, 0.17);
  font-family: var(--mb-font-sans);
  font-size: 18px;
  line-height: 1.2;
  z-index: 5;
}

.mb-widget-spotlight__chip strong {
  font-weight: 700;
  display: block;
  color: inherit;
}

.mb-widget-spotlight__chip span {
  font-weight: 400;
  display: block;
  color: inherit;
}

/* Chip color variants */
.mb-widget-spotlight__chip--white     { background: #ffffff;                color: var(--mb-color-text); }
.mb-widget-spotlight__chip--blue      { background: var(--mb-color-blue);   color: #ffffff; }
.mb-widget-spotlight__chip--lightblue { background: #99a7ff;                color: #ffffff; }
.mb-widget-spotlight__chip--orange    { background: var(--mb-color-orange); color: #ffffff; }
.mb-widget-spotlight__chip--cream     { background: var(--mb-color-cream);  color: var(--mb-color-text); }
.mb-widget-spotlight__chip--dark      { background: var(--mb-color-black);  color: #ffffff; }

/* Chip positions — exact mapping from Figma 1:851 (container 1376×500)
   Page→container conversion: container_left=32 → all left/right values
   relative to .mb-widget-spotlight outer (width 1376).
   Pill 1 (white):     L:726 / T:23 / W:252  → left:52.8% / top:+23
   Pill 2 (lightblue): L:993 / T:-20 / W:262 → right:8.8% / top:-20  (overflows top)
   Pill 3 (blue):      L:993 / T:71 / W:294  → right:6.5% / top:+71
*/
.mb-widget-spotlight__chip--pos-1 { top: 23px;   left: 53%;   width: 250px; }
.mb-widget-spotlight__chip--pos-2 { top: -25px;  right: 7.5%; width: 268px; }
.mb-widget-spotlight__chip--pos-3 { top: 71px;   right: 6.5%;  width: 294px; }
.mb-widget-spotlight__chip--pos-4 { top: 130px;  left: 52.8%; width: 252px; }

/* Coloured outer = the brand colour; inner card stays light. */
.mb-widget-spotlight--blue {
  background: var(--mb-color-blue);
}

.mb-widget-spotlight--blue .mb-widget-spotlight__card {
  background: #f1f5f9;
  color: var(--mb-color-black);
}

/* --- Footer strip with brand logo + "by mbridge" — sits directly on
   the spotlight's coloured background (no own bg/radius). */
.mb-widget-spotlight__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 30px 20px;
}

.mb-widget-spotlight .mb-widget-spotlight__brand-logo {
  height: clamp(20px, 4vw, 36px);
  width: auto;
  max-width: 50%;
  display: block;
}

.mb-widget-spotlight .mb-widget-spotlight__by-logo {
  height: clamp(16px, 2.8vw, 25px);
  width: auto;
  max-width: 40%;
  display: block;
  margin-top: 32px;
}

.mb-widget-spotlight--orange {
  background: var(--mb-color-cream);
  border: 4px solid var(--mb-color-orange);
  color: var(--mb-color-black);
}

.mb-widget-spotlight--dark {
  background: var(--mb-color-black);
  border: 0;
  color: #ffffff;
}

.mb-widget-spotlight--cream {
  background: var(--mb-color-cream);
  border: 0;
  color: var(--mb-color-black);
}

.mb-widget-spotlight--gray {
  background: var(--mb-color-bg);
  border: 0;
  color: var(--mb-color-black);
}

/* Responsive */
@media (max-width: 1200px) {
  .mb-widget-spotlight__heading    { font-size: 40px; }
  .mb-widget-spotlight__subheading { font-size: 24px; }
  .mb-widget-spotlight__chip       { width: auto; min-width: 200px; font-size: 16px; }
  .mb-widget-spotlight__chip--pos-1 { width: auto; min-width: 200px; max-width: 220px; }
  .mb-widget-spotlight__chip--pos-2 { width: auto; min-width: 200px; max-width: 220px; }
  .mb-widget-spotlight__chip--pos-3 { width: auto; min-width: 220px; max-width: 240px; }
}

@media (max-width: 1024px) {
  /* Standard side gutter so the banner doesn't touch the viewport edges.
     Drop the desktop full-bleed centering trick — on mobile we want a
     plain block with real margins. */
  .mb-widget-spotlight {
    position: static;
    left: auto;
    transform: none;
    width: auto;
    margin-left: var(--mb-sp-4);
    margin-right: var(--mb-sp-4);
    min-height: 0;
  }

  /* Stack order: text → chips → mockup. We use display:contents on the
     inner grid so its children (text + media) become direct flex children
     of the card, alongside chips, and `order` puts chips between them. */
  .mb-widget-spotlight__card {
    display: flex;
    flex-direction: column;
  }

  .mb-widget-spotlight__inner {
    display: contents;
  }

  .mb-widget-spotlight__text  { order: 1; padding: var(--mb-sp-12) var(--mb-sp-6) 0; }
  .mb-widget-spotlight__chips { order: 2; }
  .mb-widget-spotlight__media { order: 3; }

  .mb-widget-spotlight__heading    { font-size: 36px; }
  .mb-widget-spotlight__subheading { font-size: 22px; }
  .mb-widget-spotlight__btn-wrap   { margin-top: var(--mb-sp-8); }

  .mb-widget-spotlight__media {
    margin-top: 0;
    padding-bottom: 0;
  }

  /* Chips row between text and mockup — bigger gap above, tight below. */
  .mb-widget-spotlight__chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mb-sp-3);
    padding: var(--mb-sp-8) var(--mb-sp-6) var(--mb-sp-4);
  }

  .mb-widget-spotlight__chip {
    position: static !important;
    transform: none !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    flex: 1 1 calc(50% - var(--mb-sp-3));
  }
}

@media (max-width: 640px) {
  .mb-widget-spotlight__heading    { font-size: 28px; }
  .mb-widget-spotlight__subheading { font-size: 18px; }
  .mb-widget-spotlight__chip { flex: 1 1 100%; }

}

@media (max-width: 768px) {
  .mb-widget-expert__row {
    flex-direction: column;
    align-items: flex-start;
  }

  .mb-widget-expert__btn {
    width: 100%;
    justify-content: center;
  }
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1024px) {
  .mb-blog-hero {
    padding: var(--mb-sp-16) var(--mb-sp-4) var(--mb-sp-12);
  }

  .mb-blog-hero__title {
    font-size: 36px;
  }

  .mb-widget-related__featured {
    grid-template-columns: 1fr;
    gap: var(--mb-sp-4);
  }

  /* Featured: drop fixed 294px height when single-column —
     scale proportionally with viewport width instead. */
  .mb-widget-related .mb-widget-related__featured-media img,
  .mb-widget-related .mb-widget-related__featured-placeholder {
    height: auto;
    aspect-ratio: 2 / 1;
  }

  .mb-widget-related__item-link {
    grid-template-columns: 140px 1fr;
    gap: var(--mb-sp-4);
  }
}

@media (max-width: 640px) {
  .mb-blog-hero {
    padding: var(--mb-sp-12) var(--mb-sp-4) var(--mb-sp-8);
  }

  .mb-blog-hero__meta {
    gap: var(--mb-sp-3);
  }

  .mb-blog-hero__title {
    font-size: 28px;
  }

  .mb-widget-related {
    padding: var(--mb-sp-12) var(--mb-sp-6);
  }

  .mb-widget-related__inner {
    padding: 0;
  }

  .mb-widget-related__heading {
    font-size: 24px;
  }

  .mb-widget-related__tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-left: calc( var(--mb-sp-6) * -1 );
    margin-right: calc( var(--mb-sp-6) * -1 );
    padding: 0 var(--mb-sp-6) var(--mb-sp-2);
    scrollbar-width: none;
  }
  .mb-widget-related__tabs::-webkit-scrollbar { display: none; }

  .mb-widget-related__tab {
    flex-shrink: 0;
  }

  .mb-widget-related__featured {
    margin-bottom: 60px;
  }

  .mb-widget-related__featured-title {
    font-size: 22px;
  }

  /* Mobile: stack thumbnail above title (no side-by-side) */
  .mb-widget-related__item-link {
    grid-template-columns: 1fr;
    gap: 25px;
  }

  /* Mobile: thumbnail at 50% of viewport width, not full column */
  .mb-widget-related .mb-widget-related__item-media img,
  .mb-widget-related .mb-widget-related__item-placeholder {
    width: 50vw;
    height: 111px;
  }

  .mb-widget-related .mb-widget-related__item-title {
    font-size: 20px;
  }

  .mb-post-nav__inner {
    grid-template-columns: 1fr;
    gap: var(--mb-sp-3);
  }

  .mb-post-nav__title {
    font-size: var(--mb-fs-small);
  }
}
/* ==========================================================================
   Editor visual hint for `.ed-lead` marker.

   Scoped to `body.mb-ed-hints`, which PHP adds ONLY inside the Elementor
   preview iframe (see mb_is_elementor_preview() in inc/helpers.php).
   Never keyed off `.ed-lead` alone: the front-end can legitimately still
   contain such an element — the editor may mark several, and extraction
   moves only the first — and the hint would then render inside the article.
   ========================================================================== */

.mb-ed-hints .ed-lead {
  outline: 3px dashed #ff6900 !important;
  outline-offset: 6px !important;
  position: relative;
}

.mb-ed-hints .ed-lead::before {
  content: '🔝 Lead — na froncie pojawi się pod paskiem „Posłuchaj"';
  position: absolute;
  top: -32px;
  left: 0;
  background: #ff6900;
  color: #fff;
  padding: 5px 12px;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  border-radius: 6px;
  z-index: 9999;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(255,105,0,0.3);
}

/* ==========================================================================
   Spotlight uniwersalny (widget mb_spotlight)
   Wariant brand-agnostyczny. Wszystko, co w CrawlCore siedzi w klasach
   modyfikujących, przychodzi tu zmiennymi CSS ze stylu inline widgetu.
   Reguły bazowe (.mb-widget-spotlight, __card, __inner, __chip …) są wspólne
   z wariantem CrawlCore i celowo nie są tu powtarzane.
   ========================================================================== */

.mb-widget-spotlight--universal {
  background: var(--mb-sp-brand, var(--mb-color-blue));
}

.mb-widget-spotlight--universal .mb-widget-spotlight__card {
  background: #f1f5f9;
  color: var(--mb-color-black);
}

/* Wariant z obwódką (Google AIO Analyser).
   Bez niej kartę otacza 4-pikselowy margines w kolorze belki — to on tworzy
   wizualną ramkę u pozostałych marek. Z obwódką ten margines znika, kartę
   otacza prawdziwy border, a styk karty z belką dostaje linię tego samego
   koloru. Dlatego to osobna klasa, a nie sam kolor w zmiennej. */
.mb-widget-spotlight--universal.is-framed {
  padding: 0;
  border: var(--mb-sp-border-w, 2px) solid var(--mb-sp-border, transparent);
}

/* Linia podziału to DOLNA KRAWĘDŹ KARTY, a nie górna krawędź belki — dzięki
   temu obrysowuje zaokrąglone narożniki karty, zamiast ciąć baner prostą
   kreską. W projekcie karta jest osobnym zaokrąglonym pudełkiem z własnym
   obrysem; jej boki pokrywają się z obwódką całości, więc ujemne marginesy
   nakładają je dokładnie na siebie i widać jedną linię.
   Dolna grubość jest osobna — domyślnie równa obwódce. */
.mb-widget-spotlight--universal.is-framed .mb-widget-spotlight__card {
  margin: calc(-1 * var(--mb-sp-border-w, 2px)) calc(-1 * var(--mb-sp-border-w, 2px)) 0;
  border: var(--mb-sp-border-w, 2px) solid var(--mb-sp-border, transparent);
  border-bottom-width: var(--mb-sp-divider-w, var(--mb-sp-border-w, 2px));
  border-radius: var(--mb-radius-card);
}

/* Szerokość kolumny tekstu musi sterować TOREM SIATKI, nie tylko elementem.
   Reguła bazowa dzieli kartę na `632fr 702fr`; samo `max-width` na elemencie
   potrafiło tor zwęzić, ale nigdy poszerzyć — więc każda wartość powyżej ~632
   px była bez efektu (w tym 834 px z presetu AUTOAUDYT).

   `minmax(0, …)` zamiast sztywnej szerokości: tor rośnie do zadanej wartości,
   gdy jest miejsce, a przy węższym banerze oddaje przestrzeń zamiast wypychać
   obraz poza kartę. */
.mb-widget-spotlight--universal .mb-widget-spotlight__inner {
  grid-template-columns: minmax(0, var(--mb-sp-text-w, 632px)) minmax(0, 1fr);
  /* Reguła bazowa ma tu 122 px na sztywno — to wartość CrawlCore'a, a
     pozostałe marki mają w projekcie 88,67 px, AIO nawet 57,67 px. */
  padding-top: var(--mb-sp-pad-top, 122px);
}

.mb-widget-spotlight--universal .mb-widget-spotlight__text {
  max-width: 100%;
  /* Odstępy rozbite na dwa osobne, regulowane — jeden `gap` na kolumnie
     nie pozwalał ustawić innej przerwy nad przyciskiem niż pod nagłówkiem. */
  gap: 0;
}

.mb-widget-spotlight--universal .mb-widget-spotlight__heading {
  font-size: var(--mb-sp-fs-head, 50px);
}

.mb-widget-spotlight--universal .mb-widget-spotlight__subheading {
  font-size: var(--mb-sp-fs-sub, 30px);
}

/* :not(:first-child) — gdy nagłówek jest pusty, podnagłówek nie ma od czego
   się odsuwać. */
.mb-widget-spotlight--universal .mb-widget-spotlight__subheading:not(:first-child) {
  margin-top: var(--mb-sp-gap-head, 32px);
}

.mb-widget-spotlight--universal .mb-widget-spotlight__btn-wrap:not(:first-child) {
  margin-top: var(--mb-sp-gap-btn, 32px);
}

/* Logo marki: reguła bazowa ścina wysokość na 36 px, a w projekcie marki mają
   od 35 do 72 px. Dolna granica clamp pilnuje czytelności na telefonie, środek
   skaluje logo razem z banerem, górna to wartość z projektu. */
.mb-widget-spotlight--universal .mb-widget-spotlight__brand-logo {
  height: clamp(16px, var(--mb-sp-logo-vw, 4vw), var(--mb-sp-logo-h, 36px));
  max-width: 46%;
}

/* Przebarwiony podpis „by mbridge”. Element bez własnej treści — kolor daje
   tło, a kształt wycina maska z tego samego pliku SVG. Proporcje z viewBox
   (121×25), bo span nie ma wymiarów własnych jak <img>. */
.mb-widget-spotlight--universal .mb-widget-spotlight__by-logo--tint {
  aspect-ratio: 121 / 25;
  background-color: var(--mb-sp-by-color, #ffffff);
  -webkit-mask: var(--mb-sp-by-mask) no-repeat center / contain;
  mask: var(--mb-sp-by-mask) no-repeat center / contain;
}

/* Kolor przycisku jest per marka: większość ma pomarańczowy, ale Manago AI
   ma szarozielony, a Kalendarz Marketera fioletowy na pomarańczowej belce. */
.mb-widget-spotlight--universal .mb-widget-spotlight__btn {
  background: var(--mb-sp-cta, var(--mb-color-orange));
}

/* Chipy: pozycja i kolory wyłącznie ze zmiennych, żeby reguła mobilna
   niżej mogła je unieważnić. Styl inline ustawiający wprost `left`
   wygrałby z arkuszem i chipy zostałyby pozycjonowane absolutnie
   także na telefonie. */
.mb-widget-spotlight--universal .mb-widget-spotlight__chip {
  left: var(--mb-chip-x, 55%);
  top: var(--mb-chip-y, 5%);
  width: var(--mb-chip-w, 253px);
  background: var(--mb-chip-bg, #ffffff);
  color: var(--mb-chip-fg, var(--mb-color-text));
}

/* Dopisek przy CTA — mała pigułka, np. „Bez podpinania karty”.
   W designie (Mapstic) nie stoi obok przycisku, tylko jest wsunięty w jego
   prawy dolny róg: nachodzi 61 px w poziomie i ~10 px w pionie.
   Kotwiczymy go od prawej i dolnej krawędzi przycisku, żeby ta relacja
   przetrwała zmianę długości etykiety CTA. */
.mb-widget-spotlight--universal .mb-widget-spotlight__btn-wrap {
  position: relative;
  align-self: flex-start;   /* bez tego flexowa kolumna rozciąga wrapper
                               na całą szerokość i 100% przestaje znaczyć
                               „szerokość przycisku” */
}

.mb-widget-spotlight--universal .mb-widget-spotlight__note {
  position: absolute;
  left: calc(100% - var(--mb-sp-note-dx, 61px));
  top: calc(100% - var(--mb-sp-note-dy, 10px));
  z-index: 3;
  white-space: nowrap;
  padding: 7px 22px;
  border-radius: 999px;
  background: #ffffff;
  color: var(--mb-color-text);
  font-family: var(--mb-font-sans);
  font-size: 14px;
  line-height: 1.2;
  box-shadow: 0 8px 18px rgba(30, 41, 59, 0.12);
}

/* Obraz w trybie swobodnym: warstwa na całą kartę, obraz pozycjonowany
   w jej środku. Przycinanie siedzi na tej warstwie, nigdy na karcie —
   karta musi zostać overflow:visible, bo chipy wystają nad jej krawędź. */
.mb-widget-spotlight--universal .mb-widget-spotlight__media--free {
  position: absolute;
  inset: 0;
  border-radius: var(--mb-radius-card);
  pointer-events: none;
  z-index: 1;
}

.mb-widget-spotlight--universal .mb-widget-spotlight__media--free.is-clipped {
  overflow: hidden;
}

/* Kotwiczenie od DOLNEJ krawędzi karty. Wysokość obrazu wynika z jego
   szerokości i proporcji, a karta na froncie rośnie w dół wraz z długością
   tekstu — przy kotwiczeniu od góry pod mockupem przybywałaby pustka
   i wyglądałby na przyklejony do górnej krawędzi. */
.mb-widget-spotlight--universal .mb-widget-spotlight__free-img {
  position: absolute;
  left: var(--mb-img-x, 26%);
  top: auto;
  bottom: var(--mb-img-b, 0%);
  width: var(--mb-img-w, 97%);
  height: auto;
  max-width: none;
  display: block;
}

/* Tekst i CTA muszą zostać nad warstwą obrazu.
   UWAGA: tego NIE wolno rozszerzyć na `.mb-widget-spotlight__chips`. Chipy są
   pozycjonowane absolutnie i odnoszą się do najbliższego pozycjonowanego
   przodka. Kontener `__chips` to pusty blok zerowej wysokości tuż pod
   `__inner` — gdyby stał się układem odniesienia, wszystkie chipy zlepiłyby
   się przy dolnej krawędzi, a procentowe `top` nie miałoby od czego liczyć.
   Układem odniesienia ma być `.mb-widget-spotlight__card` (position: relative,
   min-height: 500px) — czyli dokładnie pudełko, względem którego przeliczone
   są procenty z Figmy. Chipy wychodzą nad obraz własnym z-index: 5. */
.mb-widget-spotlight--universal .mb-widget-spotlight__inner {
  position: relative;
  z-index: 2;
}

@media (max-width: 1200px) {
  /* Reguły bazowe zmniejszają tu tekst sztywnymi wartościami, ale mają niższą
     specyficzność niż selektory wariantu uniwersalnego — więc skalujemy
     zmienne tymi samymi proporcjami, zamiast wpisywać piksele. */
  .mb-widget-spotlight--universal .mb-widget-spotlight__heading {
    font-size: calc(var(--mb-sp-fs-head, 50px) * 0.8);
  }
  .mb-widget-spotlight--universal .mb-widget-spotlight__subheading {
    font-size: calc(var(--mb-sp-fs-sub, 30px) * 0.75);
  }
}

@media (max-width: 1024px) {
  /* Poniżej tego progu baner jest zwykłą kolumną: tekst → chipy → obraz.
     Zdejmujemy pozycjonowanie absolutne wprowadzone zmiennymi. */
  .mb-widget-spotlight--universal .mb-widget-spotlight__media--free {
    position: static;
    order: 3;
    overflow: visible;
  }

  .mb-widget-spotlight--universal .mb-widget-spotlight__free-img {
    position: static;
    bottom: auto;
    width: 100%;
  }

  /* Na wąskim ekranie nachodzenie nie ma sensu — dopisek ląduje
     zwyczajnie pod przyciskiem. */
  .mb-widget-spotlight--universal .mb-widget-spotlight__heading {
    font-size: calc(var(--mb-sp-fs-head, 50px) * 0.72);
  }

  .mb-widget-spotlight--universal .mb-widget-spotlight__subheading {
    font-size: calc(var(--mb-sp-fs-sub, 30px) * 0.6875);
  }

  .mb-widget-spotlight--universal .mb-widget-spotlight__note {
    position: static;
    display: inline-block;
    margin-top: var(--mb-sp-3);
    white-space: normal;
  }
}

/* Telefon. Ten blok MUSI stać po blokach 1200px i 1024px: selektory mają
   identyczną specyficzność, więc przy równym starcie decyduje kolejność
   w pliku, a nie węższy zakres media query. */
@media (max-width: 640px) {
  .mb-widget-spotlight--universal .mb-widget-spotlight__heading {
    font-size: calc(var(--mb-sp-fs-head, 50px) * 0.56);
  }

  .mb-widget-spotlight--universal .mb-widget-spotlight__subheading {
    font-size: calc(var(--mb-sp-fs-sub, 30px) * 0.5625);
  }
}

/* ==========================================================================
   404 page
   ========================================================================== */
body.mb-404-page {
  background: #fff;
  overflow-x: hidden;
}

body.mb-404-page #colophon { display: none !important; }

.mb-404 {
  position: relative;
  font-family: 'Neue Machina', 'PP Neue Machina', 'DM Sans', system-ui, sans-serif;
  color: #000;
}

.mb-404__hero {
  position: fixed;
  left: 57%;
  bottom: 0;
  transform: translateX(-50%);
  /* width capped by both viewport width and viewport height
     so the whole composition shrinks uniformly.
     The 220px buffer = Ohio header (~140) + visual breathing room (~80). */
  width: min(135%, 1925px, calc((100dvh - 220px) * 1925 / 778));
  aspect-ratio: 1925 / 778;
  z-index: 1;
  pointer-events: none;
  container-type: inline-size;
  container-name: mb404;
}

.mb-404__hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: bottom center;
}

.mb-404__cta {
  position: absolute;
  right: 33%;
  top: 62%;
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: calc(16 / 1440 * 100cqw);
  padding: calc(11 / 1440 * 100cqw) calc(22 / 1440 * 100cqw);
  background: #fff;
  color: #000;
  border: 1px solid #000;
  border-radius: 999px;
  font-family: 'Neue Machina', 'PP Neue Machina', sans-serif;
  font-weight: 500;
  font-size: calc(17 / 1440 * 100cqw);
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  z-index: 2;
}
.mb-404__cta,
.mb-404__cta:hover,
.mb-404__cta:focus,
.mb-404__cta:active,
.mb-404__cta:visited {
  background: #fff !important;
  color: #000 !important;
  text-decoration: none !important;
  opacity: 1 !important;
  border-color: #000 !important;
}
.mb-404__cta:hover .mb-404__cta-arrow img,
.mb-404__cta:focus .mb-404__cta-arrow img {
  filter: none !important;
  opacity: 1 !important;
}

.mb-404__text {
  position: absolute;
  font-family: 'Neue Machina', 'PP Neue Machina', sans-serif;
  /* 22px @ 1440px container → scales proportionally with hero */
  font-size: calc(22 / 1440 * 100cqw);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0;
  color: #000;
  margin: 0;
  z-index: 2;
  pointer-events: none;
}
.mb-404__text--1 { top: 14%; right: 27.5%; }
.mb-404__text--2 { top: 19%; right: 40%; }
.mb-404__text--3 { top: 19%; right: 27.5%; }
.mb-404__text--4 { top: 23%; right: 24.8%; color: #FF6900; }
.mb-404__text--5 { top: -12%; left: 19%; font-size: calc(25 / 1440 * 100cqw); }
.mb-404__text--6 { top: -7%;  left: 22%; font-size: calc(25 / 1440 * 100cqw); color: #FF6900; text-transform: uppercase; }

.mb-404__strip {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: calc(24 / 1440 * 100cqw);
  padding: calc(14 / 1440 * 100cqw) calc(24 / 1440 * 100cqw);
  overflow: hidden;
  white-space: nowrap;
  font-family: 'Neue Machina', 'PP Neue Machina', sans-serif;
  font-size: calc(18 / 1440 * 100cqw);
  font-weight: 400;
  letter-spacing: 0;
  color: #fff;
  z-index: 2;
  pointer-events: none;
}
.mb-404__strip-item,
.mb-404__strip-sep {
  flex: 0 0 auto;
  color: #fff;
}
.mb-404__cta-arrow {
  display: inline-flex;
  width: calc(26 / 1440 * 100cqw);
  height: auto;
  flex: 0 0 auto;
}
.mb-404__cta-label {
  display: inline-block;
  transform: translateY(3px);
}
.mb-404__cta-arrow img {
  width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 720px) {
  .mb-404__hero {
    top: 50%;
    bottom: auto;
    transform: translate(-50%, -50%);
    max-height: calc(100dvh - 120px);
    width: 180%;
    max-width: none;
  }
  .mb-404__cta {
    padding: 9px 16px;
    gap: 10px;
    left: 45%;
    right: auto;
    transform: translateX(-50%);
    top: auto;
    bottom: 18%;
    font-size: 14px;
  }
  .mb-404__strip {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    font-size: 12px;
    padding: 8px 16px;
    gap: 14px;
  }
  .mb-404__text--3 {
    top: 52%;
    right: 40.6%;
  }
  .mb-404__text--4 {
    top: 56%;
    right: 38%;
    color: #000;
  }
}