/* MYCELX Product Materials page: centred hero, application filter, document groups (brochure row + scrolling card rows), video band, Get Started.
   Desktop values are PSD px x --mx-u (see mx-product.css); shared hero base (.mx-chero) comes from mx-product.css. */
.mx [hidden]{display:none !important}
.mx-chero-bg{background-image:url("../img/product-materials/product-materials-hero.webp");background-position:50% 50%}

/* ---------- Hero ---------- */
.mx-pm-hero{min-height:clamp(420px,58svh,520px)}
.mx-pm-hero .mx-eyebrow{line-height:1;text-indent:.4em}
.mx-pm-hero h1{max-width:none}
.mx-pm-hero-text{margin:16px auto 0;max-width:24em;font-size:16px;line-height:1.5;color:#fff}

/* ---------- Documents ---------- */
.mx-pm-docs{padding:56px var(--mx-gutter) 72px}
.mx-pm-filter .mx-eyebrow{line-height:1}
.mx-pm-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.mx-pm-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-pm-chip[aria-pressed="true"]{background:var(--mx-blue);color:#fff}
@media (hover:hover){.mx-pm-chip[aria-pressed="false"]:hover{background:#e0e0e0;color:var(--mx-ink)}}

.mx-pm-group{margin-top:52px}
.mx-pm-ghead{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 14px}
.mx-pm-ghead h2{font:700 28px/1.1 var(--mx-font-head);color:var(--mx-ink);letter-spacing:0}
.mx-pm-count{font:400 13px/1 var(--mx-font-body);text-transform:uppercase;color:var(--mx-grey)}
.mx-pm-nav{display:flex;gap:10px;margin-left:auto;align-self:center}
.mx-pm-arrow{display:block;width:36px;height:36px;padding:0;border:0;background:none;color:var(--mx-blue-text);cursor:pointer;transition:color .25s ease}
.mx-pm-arrow svg{display:block;width:100%;height:100%}
.mx-pm-arrow:disabled{color:#bebebe;cursor:default}

/* card rows scroll sideways (snap); the arrows move one card */
.mx-pm-track{list-style:none;display:grid;grid-auto-flow:column;grid-auto-columns:78%;gap:16px;margin:20px calc(-1*var(--mx-gutter)) 0;padding:0 var(--mx-gutter);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--mx-gutter);scrollbar-width:none;overscroll-behavior-x:contain}
.mx-pm-track::-webkit-scrollbar{display:none}
.mx-pm-doc{scroll-snap-align:start;display:flex;flex-direction:column;min-height:236px;padding:26px 28px 26px;border-radius:var(--mx-radius-img);background:#ededed}
.mx-pm-file{display:block;width:26px;height:auto;aspect-ratio:30/40;color:var(--mx-blue)}
.mx-pm-doc-body{margin-top:auto;padding-top:28px}
.mx-pm-doc h3,.mx-pm-brochure h3{font:700 20px/1.2 var(--mx-font-head);color:var(--mx-navy);letter-spacing:0}
.mx-pm-meta{display:flex;align-items:baseline;gap:.5em;margin-top:8px;font-size:14px;line-height:1.3;color:var(--mx-grey)}
.mx-pm-dlink{display:inline-flex;align-items:center;gap:.5em;margin-top:22px;font:700 14px/1.3 var(--mx-font-body);color:var(--mx-blue-text);text-decoration:none;transition:color .25s ease}
.mx-pm-dlink .mx-pm-dl{flex:none;width:1em;height:1em}
@media (hover:hover){.mx-pm-dlink:hover{color:var(--mx-navy)}.mx-pm-arrow:not(:disabled):hover{color:var(--mx-navy)}}

/* brochure: image left, copy right */
.mx-pm-brochure{display:flex;flex-direction:column;margin-top:20px;border-radius:var(--mx-radius-img);background:#ededed;overflow:hidden}
.mx-pm-brochure-img img{display:block;width:100%;height:auto}
.mx-pm-brochure-body{padding:26px 28px 30px}
.mx-pm-brochure h3{font-size:24px}
.mx-pm-brochure .mx-pm-dlink{margin-top:26px}
.mx-pm-empty{margin-top:40px;font-size:16px;color:var(--mx-grey)}

/* ---------- Videos ---------- */
.mx-pm-videos{padding:64px var(--mx-gutter) 72px;color:#fff;background:var(--mx-navy) url("../img/product-materials/product-materials-videos-background.webp") center/cover no-repeat}
.mx-pm-videos .mx-eyebrow{line-height:1;color:var(--mx-blue-on-dark)}
.mx-pm-vgrid{display:grid;gap:20px;margin-top:24px}
.mx-pm-vside{display:grid;gap:20px}
.mx-pm-video{position:relative;display:block;overflow:hidden;border-radius:var(--mx-radius-img);color:#fff;text-decoration:none;background:transparent}
.mx-pm-video img{display:block;width:100%;height:auto;aspect-ratio:934/518;object-fit:cover}
.mx-pm-video--small img{aspect-ratio:437/245}
.mx-pm-vtitle{position:absolute;left:16px;top:14px;right:16px;font:700 18px/1.15 var(--mx-font-body);text-shadow:0 1px 6px rgba(0,0,0,.35)}
.mx-pm-video--main .mx-pm-vtitle{font-size:22px}
.mx-pm-play{position:absolute;left:50%;top:50%;width:64px;height:64px;transform:translate(-50%,-50%);transition:transform .3s ease;filter:drop-shadow(0 2px 10px rgba(0,0,0,.25))}
.mx-pm-video--main .mx-pm-play{width:20%;height:auto}
.mx-pm-video--small .mx-pm-play{width:21.7%;height:auto}
.mx-pm-video:focus-visible{outline:3px solid #ffb703;outline-offset:3px}
@media (hover:hover){.mx-pm-video:hover .mx-pm-play{transform:translate(-50%,-50%) scale(1.06)}}
.mx-pm-more{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;padding:32px 24px;border:1.5px solid var(--mx-blue);border-radius:var(--mx-radius-img);text-align:center}
.mx-pm-more h3{font:700 32px/1.05 var(--mx-font-head);color:var(--mx-blue-on-dark);letter-spacing:0}
.mx-pm-more .mx-btn{width:100%;max-width:324px}

/* ---------- Get Started (values from the PSB: dark heading, black copy on the warm photo) ---------- */
.mx-cta--pm{--mx-cta-wash:255,244,230;--mx-cta-bg:#f0dfca;--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:525px;--mx-cta-top:154.3px;--mx-wx:.2}
.mx-cta--pm .mx-stage{--mx-asp:2000/934;--mx-px:.12}

/* ---------- Animation start states ---------- */
.mx-anim :is(.mx-pm-hero-text,.mx-pm-chip,.mx-pm-ghead>*,.mx-pm-doc,.mx-pm-brochure,.mx-pm-video,.mx-pm-more){opacity:0}

/* ---- wide mobile (>= 550px) ---- */
@media (min-width:550px){
  .mx.mx .mx-pm-track{grid-auto-columns:calc((100% - 2*16px - 2*var(--mx-gutter))/2.4)}
  .mx.mx .mx-pm-brochure{flex-direction:row}
  .mx.mx .mx-pm-brochure-img{flex:0 0 42%}
  .mx.mx .mx-pm-brochure-img img{height:100%;object-fit:cover}
  .mx.mx .mx-pm-brochure-body{display:flex;flex-direction:column;justify-content:center;padding:28px}
  .mx.mx .mx-pm-vgrid{gap:24px}
  .mx.mx .mx-pm-vside{grid-template-columns:1fr 1fr;gap:24px}
  .mx.mx .mx-pm-vside .mx-pm-video--small img{height:100%;aspect-ratio:auto}
}

/* ---- tablet (>= 768px) ---- */
@media (min-width:768px){
  .mx.mx .mx-pm-hero{min-height:clamp(500px,52svh,600px)}
  .mx.mx .mx-pm-hero-text{font-size:calc(16px + 1.2*(var(--mx-frame-w) - 768px)/432);margin-top:22px}
  .mx.mx .mx-pm-docs{padding:88px var(--mx-gutter) 104px}
  .mx.mx .mx-pm-chips{gap:12px;margin-top:24px}
  .mx.mx .mx-pm-chip{min-width:130px;font-size:16px}
  .mx.mx .mx-pm-group{margin-top:68px}
  .mx.mx .mx-pm-ghead h2{font-size:calc(30px + 6*(var(--mx-frame-w) - 768px)/432)}
  .mx.mx .mx-pm-count{font-size:14px}
  .mx.mx .mx-pm-nav{gap:14px}
  .mx.mx .mx-pm-arrow{width:40px;height:40px}
  .mx.mx .mx-pm-track{grid-auto-columns:calc((100% - 2*20px - 2*var(--mx-gutter))/3);gap:20px;margin-top:24px}
  .mx.mx .mx-pm-doc{min-height:250px;padding:30px 30px 28px}
  .mx.mx .mx-pm-file{width:30px}
  .mx.mx .mx-pm-doc h3{font-size:22px}
  .mx.mx .mx-pm-meta{font-size:15px}
  .mx.mx .mx-pm-dlink{font-size:15px}
  .mx.mx .mx-pm-brochure{margin-top:24px}
  .mx.mx .mx-pm-brochure-body{padding:36px 44px}
  .mx.mx .mx-pm-brochure h3{font-size:calc(26px + 6*(var(--mx-frame-w) - 768px)/432)}
  .mx.mx .mx-pm-videos{padding:96px var(--mx-gutter) 104px}
  .mx.mx .mx-pm-vtitle{left:22px;top:20px;font-size:20px}
  .mx.mx .mx-pm-video--main .mx-pm-vtitle{font-size:calc(26px + 6*(var(--mx-frame-w) - 768px)/432)}
  .mx.mx .mx-pm-more h3{font-size:36px}
  .mx.mx .mx-cta--pm .mx-stage{--mx-px:.14}
}

/* ---- tablet landscape (>= 1024px): four cards across, video grid like the PSD ---- */
@media (min-width:1024px){
  .mx.mx .mx-pm-track{grid-auto-columns:calc((100% - 3*20px - 2*var(--mx-gutter))/4)}
  .mx.mx .mx-pm-vgrid{grid-template-columns:minmax(0,934fr) minmax(0,426fr)}
  .mx.mx .mx-pm-vside{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .mx.mx .mx-pm-vside .mx-pm-video--small img{height:auto;aspect-ratio:437/245}
  .mx.mx .mx-pm-vtitle{left:2.9%;top:4.2%}
}

/* ---- desktop (>= 1200px): the PSD ---- */
@media (min-width:1200px){
  .mx.mx{--mx-chero-h:600;--mx-chero-top:255}
  .mx.mx .mx-pm-hero-text{margin-top:calc(var(--mx-u)*32);font-size:calc(var(--mx-u)*20);line-height:1.4;max-width:none}
  .mx.mx .mx-pm-hero h1{margin-top:calc(var(--mx-u)*15)}

  .mx.mx .mx-pm-docs{padding:calc(var(--mx-u)*62) var(--mx-side) calc(var(--mx-u)*114)}
  .mx.mx .mx-pm-chips{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:calc(var(--mx-u)*22);margin-top:calc(var(--mx-u)*46)}
  .mx.mx .mx-pm-chip{min-width:0;min-height:calc(var(--mx-u)*46);padding:0;font-size:calc(var(--mx-u)*16)}
  .mx.mx .mx-pm-group{margin-top:calc(var(--mx-u)*105)}
  .mx.mx .mx-pm-filter+.mx-pm-group{margin-top:calc(var(--mx-u)*109)}
  .mx.mx .mx-pm-ghead{gap:0 calc(var(--mx-u)*17)}
  .mx.mx .mx-pm-ghead h2{font-size:calc(var(--mx-u)*40);line-height:1}
  .mx.mx .mx-pm-count{font-size:calc(var(--mx-u)*16)}
  .mx.mx .mx-pm-nav{gap:calc(var(--mx-u)*20)}
  .mx.mx .mx-pm-arrow{width:calc(var(--mx-u)*40);height:calc(var(--mx-u)*40)}
  .mx.mx .mx-pm-track{grid-auto-columns:calc((100% - 3*var(--mx-u)*29)/4);gap:calc(var(--mx-u)*29);margin:calc(var(--mx-u)*24) 0 0;padding:0;scroll-padding-inline:0}
  .mx.mx .mx-pm-doc{min-height:calc(var(--mx-u)*269);padding:calc(var(--mx-u)*29) calc(var(--mx-u)*32) calc(var(--mx-u)*30)}
  .mx.mx .mx-pm-file{width:calc(var(--mx-u)*30)}
  .mx.mx .mx-pm-doc-body{padding-top:calc(var(--mx-u)*20)}
  .mx.mx .mx-pm-doc h3{font-size:calc(var(--mx-u)*25);line-height:1.1}
  .mx.mx .mx-pm-meta{margin-top:calc(var(--mx-u)*10);font-size:calc(var(--mx-u)*16)}
  .mx.mx .mx-pm-dlink{margin-top:calc(var(--mx-u)*28);font-size:calc(var(--mx-u)*16)}

  .mx.mx .mx-pm-brochure{margin-top:calc(var(--mx-u)*28);height:calc(var(--mx-u)*275)}
  .mx.mx .mx-pm-brochure-img{flex:0 0 39.1%}
  .mx.mx .mx-pm-brochure-body{justify-content:flex-start;padding:calc(var(--mx-u)*40) calc(var(--mx-u)*62) calc(var(--mx-u)*46)}
  .mx.mx .mx-pm-brochure h3{font-size:calc(var(--mx-u)*40);line-height:1.1}
  .mx.mx .mx-pm-brochure .mx-pm-meta{margin-top:calc(var(--mx-u)*14)}
  .mx.mx .mx-pm-brochure .mx-pm-dlink{margin-top:auto}

  .mx.mx .mx-pm-videos{padding:calc(var(--mx-u)*132) var(--mx-side) calc(var(--mx-u)*200)}
  .mx.mx .mx-pm-vgrid{grid-template-columns:minmax(0,934fr) minmax(0,426fr);gap:calc(var(--mx-u)*49);margin-top:calc(var(--mx-u)*46)}
  .mx.mx .mx-pm-vside{gap:calc(var(--mx-u)*44)}
  .mx.mx .mx-pm-vtitle{left:calc(var(--mx-u)*28);top:calc(var(--mx-u)*30);font-size:calc(var(--mx-u)*20);line-height:1.05}
  .mx.mx .mx-pm-video--small .mx-pm-vtitle{left:calc(var(--mx-u)*19);top:calc(var(--mx-u)*24)}
  .mx.mx .mx-pm-video--main .mx-pm-vtitle{font-size:calc(var(--mx-u)*40);line-height:1.1}
  .mx.mx .mx-pm-more{gap:calc(var(--mx-u)*28);padding:calc(var(--mx-u)*30) calc(var(--mx-u)*50);border-width:calc(var(--mx-u)*2)}
  .mx.mx .mx-pm-more h3{font-size:calc(var(--mx-u)*40);line-height:1}
  .mx.mx .mx-pm-more .mx-btn{max-width:none;width:100%;min-height:calc(var(--mx-u)*44);font-size:calc(var(--mx-u)*16)}

  .mx.mx .mx-cta--pm .mx-stage{--mx-px:.12}
  .mx.mx .mx-cta--pm .mx-body{background:none}
  .mx.mx .mx-cta--pm h2{white-space:nowrap}
}