/* Channels List page components (.mx-*) — reuses the .mh design system. */

/* ---------- Hero ---------- */
body .mh.mx-hero h1.elementor-heading-title { font-size: 54px; line-height: 1.04; letter-spacing: -.015em; color: #fff; }
body .mh .mx-hero__highlight .elementor-heading-title { font-family: var(--mode-font-display); font-size: 22px; font-weight: 700; line-height: 1.3; color: var(--mode-sky); }
body .mh.mx-hero--split { position: relative; overflow: hidden; isolation: isolate; background: var(--mode-ink); color: #fff; padding: calc(var(--mh-header) + 88px) 0 104px; }
body .mh.mx-hero--split::before {
  content: ""; position: absolute; z-index: -1; inset: 0; opacity: 1; border-radius: 0;
  background: radial-gradient(ellipse 46% 60% at 76% 50%, rgba(0, 85, 164, .3), rgba(0, 85, 164, 0) 70%),
    radial-gradient(ellipse 30% 40% at 8% 100%, rgba(143, 178, 242, .08), rgba(143, 178, 242, 0) 70%);
}
body .mh.mx-hero--split::after {
  content: ""; position: absolute; z-index: -1; top: var(--mh-header); right: -60px; bottom: -40px; width: 220px;
  background: var(--mode-navy-card); opacity: .55; transform: skewX(-14deg);
}
body .mh .mx-hero__grid { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 560px); gap: 56px; align-items: center; }
body .mh .mx-hero__copy { display: flex; flex-direction: column; gap: 26px; min-width: 0; }
body .mh.mx-hero--split .mh-hero__lead { max-width: 640px !important; }
body .mh .mx-collage { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding-bottom: 28px; }
body .mh .mx-collage img {
  display: block; width: 100%; height: auto; max-width: none; aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: 16px; box-shadow: 0 20px 40px rgba(0, 0, 0, .35);
}
body .mh .mx-collage__img--2, body .mh .mx-collage__img--4 { transform: translateY(28px); }
body .mh .mx-collage__img--2 img { object-position: 100% 50%; }
@media (max-width: 1199px) {
  body .mh .mx-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 40px; }
  body .mh.mx-hero h1.elementor-heading-title { font-size: 48px; }
}
@media (max-width: 1024px) {
  body .mh.mx-hero--split { padding: calc(var(--mh-header) + 64px) 0 72px; }
  body .mh .mx-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  body .mh .mx-collage { max-width: 560px; }
  body .mh.mx-hero h1.elementor-heading-title { font-size: 42px; }
  body .mh.mx-hero--split::after { display: none; }
}
@media (max-width: 640px) {
  body .mh.mx-hero--split { padding: calc(var(--mh-header) + 40px) 0 56px; }
  body .mh.mx-hero h1.elementor-heading-title { font-size: 34px; line-height: 1.08; }
  body .mh .mx-hero__copy { gap: 22px; }
  body .mh .mx-hero__highlight .elementor-heading-title { font-size: 19px; }
  body .mh .mx-collage { gap: 10px; padding-bottom: 16px; }
  body .mh .mx-collage img { border-radius: 10px; }
  body .mh .mx-collage__img--2, body .mh .mx-collage__img--4 { transform: translateY(16px); }
}

/* ---------- Full list split ---------- */
body .mh .mx-split__media { flex: 0 0 560px !important; width: 560px !important; min-width: 0; }
body .mh .mx-split__media img { display: block; width: 100%; height: auto; aspect-ratio: 750 / 503; object-fit: cover; border-radius: 20px; box-shadow: 0 28px 56px -32px rgba(13, 22, 51, .4); }
body .mh .mx-callout { font-size: 17px; font-weight: 700; line-height: 1.5; color: var(--mode-text); }
@media (max-width: 1199px) { body .mh .mx-split__media { flex-basis: 460px !important; width: 460px !important; } }
@media (max-width: 1024px) { body .mh .mx-split__media { flex: none !important; width: 100% !important; max-width: 560px; margin-inline: auto !important; } }

/* ---------- Categories ---------- */
body .mh .mx-benefits__grid { display: grid !important; grid-template-columns: minmax(0, 540px) minmax(0, 1fr); gap: 60px; align-items: center; }
body .mh .mx-benefits__body { display: flex; flex-direction: column; gap: 36px; min-width: 0; }
body .mh .mx-benefits__items { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
body .mh .mx-benefit {
  display: flex; flex-direction: row; gap: 16px; align-items: flex-start; padding: 22px;
  background: var(--mode-paper); border: 1px solid var(--mode-line); border-radius: var(--mode-radius-card);
}
body .mh .mx-benefit > .mx-benefit__body { width: auto; flex: 1 1 auto; }
body .mh .mx-benefit__icon { flex: 0 0 46px; width: 46px !important; }
body .mh .mx-benefit__icon .elementor-icon-wrapper { display: flex; line-height: 0; }
body .mh .mx-benefit__icon .elementor-icon {
  width: 46px; height: 46px; border-radius: 12px; background: var(--mode-tint); color: var(--mode-blue);
  display: flex; align-items: center; justify-content: center; font-size: 22px;
}
body .mh .mx-benefit__icon svg { width: 22px; height: 22px; }
body .mh .mx-benefit__title .elementor-heading-title { font-size: 19px; line-height: 1.25; color: var(--mode-text); }
body .mh .mx-benefit__text { margin-top: 6px !important; font-size: 14.5px; line-height: 1.6; color: var(--mode-muted); }
@media (max-width: 1199px) { body .mh .mx-benefits__grid { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 44px; } }
body .mh.mx-benefits--wide .mx-benefits__grid { grid-template-columns: minmax(0, 1fr); }
body .mh.mx-benefits--wide .mx-benefits__body { gap: 44px; }
body .mh.mx-benefits--wide .mh-intro { align-items: center; text-align: center; margin-inline: auto; max-width: 800px !important; }
body .mh.mx-benefits--wide .mh-intro .mh-eyebrow .elementor-heading-title { justify-content: center; }
body .mh.mx-benefits--wide .mx-benefits__items { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
body .mh.mx-benefits--wide .mx-benefit { padding: 28px; }
@media (max-width: 1024px) {
  body .mh .mx-benefits__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  body .mh.mx-benefits--wide .mx-benefits__items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  body .mh .mx-benefits__items, body .mh.mx-benefits--wide .mx-benefits__items { grid-template-columns: minmax(0, 1fr); }
  body .mh.mx-benefits--wide .mx-benefit { padding: 22px; }
}