/* MYCELX Case Studies: centred hero, application filter, six photo cards, "More" button, Get Started (white copy on the pumpjack photo).
   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 (dark blue gradient, centred copy) ---------- */
.mx-cs-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(440px,64svh,520px);padding:calc(var(--mx-hdr-top) + var(--mx-hdr-h) + 56px) var(--mx-gutter) 56px;color:#fff;text-align:center;background:#091722}
.mx-cs-hero-bg{position:absolute;inset:0;z-index:-1;transform-origin:50% 100%;background:#091722 url("../img/case-studies/case-studies-hero.webp") 50% 50%/cover no-repeat}
.mx-cs-hero-copy{max-width:640px;margin:0 auto}
.mx-cs-hero .mx-eyebrow{line-height:1;color:var(--mx-blue-on-dark)}
.mx-cs-hero h1{font:700 42px/1.06 var(--mx-font-head);margin:14px 0 18px;letter-spacing:0;color:#fff}
.mx-cs-intro{font-size:16px;line-height:1.55;max-width:24em;margin:0 auto}

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

.mx-cs-grid{list-style:none;display:grid;grid-template-columns:minmax(0,1fr);gap:24px;margin-top:32px}
.mx-cs-grid>li{display:flex}
.mx-cs-card{position:relative;isolation:isolate;display:flex;width:100%;aspect-ratio:451/627;min-height:420px;overflow:hidden;border-radius:var(--mx-radius-img);background:#ededed;color:#fff}
.mx-cs-card .mx-ph{position:absolute;inset:0;z-index:-1;border-radius:0}
.mx-cs-card .mx-pl{height:100%}
.mx-cs-card--light .mx-ph::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(9,23,34,.75) 0,rgba(9,23,34,.62) 40%,rgba(9,23,34,0) 72%);pointer-events:none}   /* readability: the card photos are client uploads of any brightness, so the copy gets a fade in its contrast tone */
.mx-cs-card--dark .mx-ph::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(255,255,255,.88) 0,rgba(255,255,255,.72) 40%,rgba(255,255,255,0) 72%);pointer-events:none}
.mx-cs-card--dark{color:var(--mx-ink)}
.mx-cs-copy{position:relative;display:flex;flex-direction:column;align-items:flex-start;width:100%;padding:24px 24px 24px}
.mx-cs-tag{font:700 12px/1 var(--mx-font-body);letter-spacing:.06em;text-transform:uppercase;color:inherit}
.mx-cs-card--dark .mx-cs-tag{color:var(--mx-blue-text)}
.mx-cs-card h3{margin-top:10px;font:700 26px/1.1 var(--mx-font-head);letter-spacing:0;color:inherit}
.mx-cs-loc{margin-top:16px;font-size:15px;line-height:1.35;color:inherit}
.mx-cs-copy .mx-btn{margin-top:auto;min-height:44px;padding:0 24px;font-size:15px}
.mx-cs-card .mx-cs-loc+.mx-btn{margin-top:auto}
.mx-cs-empty{margin-top:40px;font-size:16px;color:var(--mx-grey)}
.mx-cs-more{display:flex;justify-content:center;margin-top:36px}

/* ---------- Get Started (white copy; values from the PSB) ---------- */
.mx-cta--cs{--mx-cta-wash:9,23,34;--mx-cta-heading:#fff;--mx-cta-ink:#fff;--mx-cta-eyebrow:#fff;--mx-cta-phone:#fff;--mx-cta-h:671.8px;--mx-cta-x:424.6px;--mx-cta-top:204px;--mx-wx:.02}
.mx-cta--cs .mx-stage{--mx-asp:2000/933;--mx-px:.14}

/* ---------- Animation start states ---------- */
.mx-anim .mx-cs-intro,.mx-anim .mx-cs-chip,.mx-anim .mx-cs-more{opacity:0}
.mx-anim .mx-cs-card :is(.mx-cs-tag,h3,.mx-cs-loc,.mx-btn){opacity:0}

/* ---- wide mobile (>= 550px): two columns ---- */
@media (min-width:550px){
  .mx.mx .mx-cs-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
  .mx.mx .mx-cs-copy{padding:26px 26px 26px}
}

/* ---- tablet (>= 768px) ---- */
@media (min-width:768px){
  .mx.mx .mx-cs-hero{min-height:clamp(480px,54svh,560px);padding:calc(var(--mx-hdr-top) + var(--mx-hdr-h) + 84px) var(--mx-gutter) 64px}
  .mx.mx .mx-cs-hero h1{font-size:calc(42px + 22.5*(var(--mx-frame-w) - 390px)/810);margin-bottom:22px}
  .mx.mx .mx-cs-intro{font-size:calc(16px + 1.2*(var(--mx-frame-w) - 768px)/432)}
  .mx.mx .mx-cs{padding:88px var(--mx-gutter) 96px}
  .mx.mx .mx-cs-chips{margin-top:24px}
  .mx.mx .mx-cs-chip{font-size:16px;padding:0 26px}
  .mx.mx .mx-cs-grid{margin-top:44px;gap:28px}
  .mx.mx .mx-cs-copy{padding:30px 30px 30px}
  .mx.mx .mx-cs-tag{font-size:13px}
  .mx.mx .mx-cs-card h3{font-size:calc(28px + 2*(var(--mx-frame-w) - 768px)/432)}
  .mx.mx .mx-cs-loc{font-size:16px}
  .mx.mx .mx-cs-more{margin-top:52px}
}

/* ---- tablet landscape (>= 1024px): three columns ---- */
@media (min-width:1024px){
  .mx.mx .mx-cs-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
  .mx.mx .mx-cs-copy{padding:26px 22px 24px}
  .mx.mx .mx-cs-card h3{font-size:calc(22px + 3*(var(--mx-frame-w) - 1024px)/176)}
  .mx.mx .mx-cs-loc{font-size:14px}
  .mx.mx .mx-cs-copy .mx-btn{padding:0 20px;font-size:14px}
}

/* ---- desktop (>= 1200px): the PSD ---- */
@media (min-width:1200px){
  .mx.mx .mx-cs-hero{min-height:0;height:calc(432px*var(--mx-m));padding:calc(175px*var(--mx-m)) var(--mx-side) 0}       /* 600 PSD px; RESOURCES glyphs start 257 PSD px down */
  .mx.mx .mx-cs-hero-copy{max-width:none}
  .mx.mx .mx-cs-hero h1{font-size:calc(54px*var(--mx-m));line-height:1.054;margin:calc(7px*var(--mx-m)) 0 calc(27px*var(--mx-m))}
  .mx.mx .mx-cs-intro{font-size:calc(14.4px*var(--mx-m));line-height:1.4;max-width:calc(440px*var(--mx-m))}

  .mx.mx .mx-cs{padding:calc(63px*var(--mx-m)) var(--mx-side) calc(83px*var(--mx-m))}
  .mx.mx .mx-cs-chips{flex-wrap:nowrap;gap:calc(16px*var(--mx-m));margin-top:calc(29px*var(--mx-m))}
  .mx.mx .mx-cs-chip{flex:1 1 0;min-width:0;min-height:calc(33px*var(--mx-m));padding:0 calc(8px*var(--mx-m));font-size:calc(11.52px*var(--mx-m))}
  .mx.mx .mx-cs-chip[data-filter="all"]{flex:0 0 calc(100px*var(--mx-m))}

  .mx.mx .mx-cs-grid{gap:calc(28px*var(--mx-m)) calc(20.5px*var(--mx-m));margin-top:calc(60px*var(--mx-m))}
  .mx.mx .mx-cs-card{min-height:0}
  .mx.mx .mx-cs-copy{padding:calc(22px*var(--mx-m)) calc(19.4px*var(--mx-m)) calc(21px*var(--mx-m))}
  .mx.mx .mx-cs-tag{font-size:calc(8.64px*var(--mx-m))}
  .mx.mx .mx-cs-card h3{margin-top:calc(6px*var(--mx-m));font-size:calc(28.8px*var(--mx-m));line-height:1}
  .mx.mx .mx-cs-loc{margin-top:calc(20px*var(--mx-m));font-size:calc(11.52px*var(--mx-m));line-height:1.25}
  .mx.mx .mx-cs-copy .mx-btn{min-height:calc(31px*var(--mx-m));width:calc(171px*var(--mx-m));padding:0;font-size:calc(11.52px*var(--mx-m))}
  .mx.mx .mx-cs-more{margin-top:calc(62px*var(--mx-m))}
  .mx.mx .mx-cs-more .mx-btn{width:calc(233px*var(--mx-m));min-height:calc(31.7px*var(--mx-m));font-size:calc(11.52px*var(--mx-m))}

  .mx.mx .mx-cta--cs h2{white-space:nowrap}
}