/* MYCELX Blog page: hero, application filter, featured article, article cards, newsletter band, Get Started (light-sky variant).
   Values marked "reference" are PSD px x 0.72 (the 1440 design); the desktop layout multiplies them by --mx-m (see mx-core.js). */

.mx [hidden]{display:none !important}

/* ---------- Hero (ripple photo, dark copy on the left) ---------- */
.mx-blog-hero{position:relative;overflow:hidden;isolation:isolate;margin-top:calc(-1 * (var(--mx-hdr-top) + var(--mx-hdr-h)) - env(safe-area-inset-top,0px));min-height:clamp(520px,78svh,640px);padding:calc(var(--mx-hdr-top) + var(--mx-hdr-h) + 56px) var(--mx-gutter) 56px;color:var(--mx-ink);background:#8fb1c4}
.mx-blog-hero-bg{position:absolute;inset:0;z-index:-1;transform-origin:50% 100%;background:#8fb1c4 url("../img/blog/blog-hero.webp") 40% 50%/cover no-repeat}
.mx-blog-hero-copy{max-width:520px}
.mx-blog-hero .mx-eyebrow{line-height:1}
.mx-blog-hero h1{font:700 42px/1.06 var(--mx-font-head);margin:12px 0 18px;letter-spacing:0}
.mx-blog-intro{font-size:16px;line-height:1.55;max-width:26em}

/* ---------- Articles section ---------- */
.mx-articles{padding:56px var(--mx-gutter) 64px}
.mx-articles .mx-eyebrow{line-height:1}
.mx-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.mx-chip{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:96px;padding:0 24px;border:0;border-radius:999px;background:#ededed;color:var(--mx-grey);font:400 15px/1.25 var(--mx-font-body);cursor:pointer;transition:background-color .25s ease,color .25s ease}
.mx-chip[aria-pressed="true"]{background:var(--mx-blue);color:#fff}
@media (hover:hover){.mx-chip[aria-pressed="false"]:hover{background:#e0e0e0;color:var(--mx-ink)}}

/* article card (shared by the featured article and the grid) */
.mx-art{position:relative;display:flex;flex-direction:column;background:#ededed;border-radius:var(--mx-radius-img);overflow:hidden}
.mx-art .mx-ph{border-radius:0}
.mx-art .mx-pl{aspect-ratio:450/285}
.mx-art img{object-position:50% 50%}
.mx-art-body{display:flex;flex-direction:column;flex:1;padding:24px 24px 22px}
.mx-art h3{font:700 24px/1.2 var(--mx-font-head);color:var(--mx-ink);letter-spacing:0}
.mx-art h3 a{color:inherit;text-decoration:none;transition:color .25s ease}
.mx-art h3 a::after{content:"";position:absolute;inset:0;z-index:2}   /* the whole card is the link; its accessible name is the title */
.mx-art h3 a:focus-visible{outline:0}
.mx-art h3 a:focus-visible::after{outline:3px solid #ffb703;outline-offset:-3px;border-radius:var(--mx-radius-img)}
.mx-art-cat{font:700 13px/1 var(--mx-font-body);letter-spacing:.02em;text-transform:uppercase;color:var(--mx-blue-text)}
.mx-art-excerpt{margin-top:8px;font-size:15px;line-height:1.6;color:var(--mx-grey)}
.mx-art-meta{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-top:auto;padding-top:14px;border-top:1px solid #555;font-size:14px;line-height:1.5;color:var(--mx-grey)}
.mx-art-body>.mx-art-excerpt+.mx-art-meta{margin-top:24px}
.mx-art-read{color:var(--mx-blue-text);white-space:nowrap}
@media (hover:hover){.mx-art:hover h3 a{color:var(--mx-blue-text)}}
@media (prefers-reduced-motion:reduce){.mx-art h3 a{transition:none}.mx-chip{transition:none}}
/* thumbnail tag: sits on the photo (PSB), on a light pill so it reads on any picture */
.mx-art:not(.mx-feature)>.mx-art-cat{position:absolute;z-index:1;top:16px;left:16px;padding:6px 10px 5px;border-radius:999px;background:rgba(255,255,255,.92)}

/* featured */
.mx-feature{margin-top:32px}
.mx-feature .mx-art-body{padding:26px 24px 24px}
.mx-feature h3{font-size:26px;margin-top:10px}
.mx-feature .mx-art-excerpt{margin-top:12px}

/* latest */
.mx-latest{margin-top:48px}
.mx-art-list{list-style:none;display:grid;gap:24px;margin-top:20px}
.mx-art-list>li{display:flex}
.mx-art-list .mx-art{width:100%}
.mx-empty{margin-top:40px;font-size:16px;color:var(--mx-grey)}
.mx-more{display:flex;justify-content:center;margin-top:36px}

/* ---------- Newsletter ---------- */
.mx-nl{padding:56px var(--mx-gutter);color:#fff;text-align:center;background:var(--mx-navy) url("../img/blog/blog-newsletter-background.webp") center/cover no-repeat}
.mx-nl-box{max-width:640px;margin:0 auto;padding:40px 24px 36px;border:1.5px solid #226cf2;border-radius:var(--mx-radius-img);background:var(--mx-navy)}
.mx-nl h2{font:700 30px/1.15 var(--mx-font-head);letter-spacing:0;color:#fff}
.mx-nl-copy{margin:14px auto 0;max-width:24em;font-size:15px;line-height:1.55}
.mx-nl-form{margin:28px auto 0;max-width:460px}
.mx-nl-field{display:grid;gap:12px}
.mx-nl-field input{width:100%;min-height:48px;padding:0 24px;border:1px solid #226cf2;border-radius:999px;background:#fff;color:#000;font:400 16px/1.25 var(--mx-font-body)}
.mx-nl-field input::placeholder{color:var(--mx-grey);opacity:1}
.mx-nl-field .mx-btn{width:100%}
.mx-nl-field input:focus-visible{outline:3px solid #ffb703;outline-offset:2px}

/* ---------- Get Started: light-sky variant of the shared component (values from the PSB) ---------- */
.mx-cta--blog{--mx-cta-wash:226,236,246;--mx-cta-bg:#9dbad6;--mx-cta-heading:var(--mx-navy);--mx-cta-ink:#000;--mx-cta-eyebrow:var(--mx-blue-text);--mx-cta-phone:var(--mx-blue-text);
  --mx-cta-h:671.8px;--mx-cta-x:425.2px;--mx-cta-top:181px;--mx-wx:.07}
.mx-cta--blog .mx-stage{--mx-asp:2000/934;--mx-px:.1}

/* ---------- Animation start states ---------- */
.mx-anim .mx-blog-intro,.mx-anim .mx-chip,.mx-anim .mx-more,.mx-anim .mx-nl-copy,.mx-anim .mx-nl-form{opacity:0}
.mx-anim .mx-nl h2{visibility:hidden}
.mx-anim .mx-art :is(h3,.mx-art-excerpt,.mx-art-meta,.mx-art-cat){opacity:0}

/* ---- wide mobile (>= 550px): rows, image left; newsletter form becomes one pill ---- */
@media (min-width:550px){
  .mx.mx .mx-art-list{gap:24px}
  .mx.mx .mx-art-list .mx-art{flex-direction:row}
  .mx.mx .mx-art-list .mx-art .mx-ph{flex:0 0 42%}
  .mx.mx .mx-art-list .mx-art .mx-pl{height:100%;aspect-ratio:auto;min-height:220px}
  .mx.mx .mx-art-list .mx-art-body{justify-content:center;padding:26px 28px}
  .mx.mx .mx-nl-box{padding:52px 40px 48px}
  .mx.mx .mx-nl-field{display:flex;gap:0;background:#fff;border:1px solid #226cf2;border-radius:999px;overflow:hidden}
  .mx.mx .mx-nl-field input{border:0;border-radius:0;background:transparent;min-width:0;flex:1}
  .mx.mx .mx-nl-field .mx-btn{width:auto;flex:none;margin:-1px}
}

/* ---- tablet (>= 768px) ---- */
@media (min-width:768px){
  .mx.mx .mx-blog-hero{min-height:clamp(560px,64svh,700px);padding:calc(var(--mx-hdr-top) + var(--mx-hdr-h) + 84px) var(--mx-gutter) 64px}
  .mx.mx .mx-blog-hero h1{font-size:calc(42px + 22.5*(var(--mx-frame-w) - 390px)/810);margin-bottom:22px}
  .mx.mx .mx-blog-intro{font-size:calc(16px + 1.2*(var(--mx-frame-w) - 768px)/432)}
  .mx.mx .mx-articles{padding:88px var(--mx-gutter) 96px}
  .mx.mx .mx-chips{margin-top:24px}
  .mx.mx .mx-chip{min-width:130px;font-size:16px}
  .mx.mx .mx-feature{margin-top:44px;flex-direction:row;min-height:340px}
  .mx.mx .mx-feature .mx-ph{flex:0 0 48.8%}
  .mx.mx .mx-feature .mx-pl{height:100%;aspect-ratio:auto}
  .mx.mx .mx-feature .mx-art-body{justify-content:flex-start;padding:40px 40px 34px}
  .mx.mx .mx-feature h3{font-size:calc(26px + 8.3*(var(--mx-frame-w) - 390px)/810)}
  .mx.mx .mx-feature .mx-art-excerpt{font-size:calc(16px + 1.2*(var(--mx-frame-w) - 768px)/432)}
  .mx.mx .mx-latest{margin-top:64px}
  .mx.mx .mx-art-list .mx-art h3{font-size:calc(22px + 3.4*(var(--mx-frame-w) - 768px)/432)}
  .mx.mx .mx-art-list .mx-art-excerpt{font-size:calc(15px + 1*(var(--mx-frame-w) - 768px)/432)}
  .mx.mx .mx-more{margin-top:44px}
  .mx.mx .mx-nl{padding:96px var(--mx-gutter)}
  .mx.mx .mx-nl-box{max-width:calc(560px + 126*(var(--mx-frame-w) - 768px)/432);padding:64px 48px 60px}
  .mx.mx .mx-nl h2{font-size:calc(30px + 9*(var(--mx-frame-w) - 768px)/432)}
  .mx.mx .mx-nl-copy{font-size:calc(16px + 1.2*(var(--mx-frame-w) - 768px)/432);max-width:26em}
  .mx.mx .mx-cta--blog .mx-stage{--mx-px:.12}
}

/* ---- tablet landscape (>= 1024px): three columns ---- */
@media (min-width:1024px){
  .mx.mx .mx-art-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
  .mx.mx .mx-art-list .mx-art{flex-direction:column}
  .mx.mx .mx-art-list .mx-art .mx-ph{flex:none}
  .mx.mx .mx-art-list .mx-art .mx-pl{height:auto;aspect-ratio:450/285;min-height:0}
  .mx.mx .mx-art-list .mx-art-body{justify-content:flex-start;padding:26px 28px 24px}
}

/* ---- desktop (>= 1200px): the PSD ---- */
@media (min-width:1200px){
  .mx.mx .mx-blog-hero{min-height:0;height:calc(612px*var(--mx-m));padding:calc(158px*var(--mx-m)) var(--mx-side) 0}          /* 850 PSD px tall; BLOG label glyphs start 223 PSD px down */
  .mx.mx .mx-blog-hero-copy{padding-left:calc(83px*var(--mx-m));max-width:none}       /* copy starts at x 411 = 116 PSD px inside the 1409 column */
  .mx.mx .mx-blog-hero h1{font-size:calc(54px*var(--mx-m));line-height:1.054;max-width:calc(370px*var(--mx-m));margin:calc(9px*var(--mx-m)) 0 calc(16px*var(--mx-m))}
  .mx.mx .mx-blog-intro{font-size:calc(14.4px*var(--mx-m));line-height:1.4;max-width:calc(360px*var(--mx-m))}

  .mx.mx .mx-articles{padding:calc(77px*var(--mx-m)) var(--mx-side) calc(89px*var(--mx-m))}
  .mx.mx .mx-chips{gap:calc(11.5px*var(--mx-m));margin-top:calc(28px*var(--mx-m))}
  .mx.mx .mx-chip{width:calc(146px*var(--mx-m));min-width:0;min-height:calc(32.4px*var(--mx-m));padding:0;font-size:calc(11.52px*var(--mx-m))}

  .mx.mx .mx-feature{margin-top:calc(55px*var(--mx-m));height:calc(325.4px*var(--mx-m));min-height:0}   /* 1412 x 452 */
  .mx.mx .mx-feature .mx-ph{flex:0 0 48.8%}
  .mx.mx .mx-feature .mx-art-body{padding:calc(53px*var(--mx-m)) calc(51px*var(--mx-m)) calc(40px*var(--mx-m)) calc(55.4px*var(--mx-m))}
  .mx.mx .mx-feature .mx-art-cat{font-size:calc(11.52px*var(--mx-m))}
  .mx.mx .mx-feature h3{font-size:calc(28.8px*var(--mx-m));line-height:1.15;margin-top:calc(5px*var(--mx-m))}
  .mx.mx .mx-feature .mx-art-excerpt{margin-top:calc(16px*var(--mx-m));font-size:calc(14.4px*var(--mx-m));line-height:1.4;max-width:calc(377px*var(--mx-m))}
  .mx.mx .mx-art-meta{font-size:calc(11.52px*var(--mx-m));padding-top:calc(11px*var(--mx-m))}
  .mx.mx .mx-art-body>.mx-art-excerpt+.mx-art-meta{margin-top:auto}

  .mx.mx .mx-latest{margin-top:calc(70px*var(--mx-m))}
  .mx.mx .mx-art-list{gap:calc(20.2px*var(--mx-m));margin-top:calc(31px*var(--mx-m))}
  .mx.mx .mx-art-list .mx-art{min-height:calc(413px*var(--mx-m))}
  .mx.mx .mx-art-list .mx-art-body{padding:calc(27px*var(--mx-m)) calc(28.8px*var(--mx-m)) calc(24.5px*var(--mx-m))}
  .mx.mx .mx-art:not(.mx-feature)>.mx-art-cat{top:calc(24px*var(--mx-m));left:calc(23px*var(--mx-m));padding:calc(5px*var(--mx-m)) calc(8px*var(--mx-m)) calc(4px*var(--mx-m));font-size:calc(11.52px*var(--mx-m))}
  .mx.mx .mx-art-list .mx-art h3{font-size:calc(19.44px*var(--mx-m))}
  .mx.mx .mx-art-list .mx-art-excerpt{margin-top:calc(6px*var(--mx-m));font-size:calc(11.52px*var(--mx-m));line-height:1.625}
  .mx.mx .mx-more{margin-top:calc(54px*var(--mx-m))}
  .mx.mx .mx-more .mx-btn{width:calc(233px*var(--mx-m));min-height:calc(31px*var(--mx-m));font-size:calc(11.52px*var(--mx-m))}

  .mx.mx .mx-nl{padding:calc(86px*var(--mx-m)) var(--mx-side)}
  .mx.mx .mx-nl-box{max-width:none;width:calc(687px*var(--mx-m));margin:0 auto;padding:calc(45px*var(--mx-m)) 0 calc(50px*var(--mx-m));border-width:calc(1.44px*var(--mx-m));border-radius:calc(14.4px*var(--mx-m))}
  .mx.mx .mx-nl h2{font-size:calc(28.8px*var(--mx-m))}
  .mx.mx .mx-nl-copy{margin-top:calc(14px*var(--mx-m));max-width:calc(400px*var(--mx-m));font-size:calc(14.4px*var(--mx-m));line-height:1.4}
  .mx.mx .mx-nl-form{margin-top:calc(30px*var(--mx-m));max-width:calc(320px*var(--mx-m))}
  .mx.mx .mx-nl-field input{min-height:calc(31.7px*var(--mx-m));padding:0 calc(23.8px*var(--mx-m));font-size:calc(11.52px*var(--mx-m))}
  .mx.mx .mx-nl-field .mx-btn{min-height:calc(31px*var(--mx-m));font-size:calc(11.52px*var(--mx-m));padding:0 calc(28.8px*var(--mx-m))}

  .mx.mx .mx-cta--blog .mx-stage{--mx-px:.12}
  .mx.mx .mx-cta--blog .mx-body{background:none}   /* the PSB puts the dark copy straight on the sky */
  .mx.mx .mx-cta--blog h2{white-space:nowrap}
}