/* MYCELX Produced Water page: hero, the three solution cards, and the dark Get Started 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). */

/* ---------- Hero (photo, centred dark headline) ---------- */
.mx-subhero{position:relative;overflow:hidden;isolation:isolate;margin-top:calc(-1 * (var(--mx-hdr-top) + var(--mx-hdr-h)) - env(safe-area-inset-top,0px));height:clamp(500px,72svh,640px);padding:calc(var(--mx-hdr-top) + var(--mx-hdr-h) + 56px) var(--mx-gutter) 40px;text-align:center;color:var(--mx-ink);background:#a4c8d4}
.mx-subhero-bg{position:absolute;inset:0;z-index:-1;transform-origin:50% 100%;background:#a4c8d4 url("../img/produced-water/produced-water-hero.webp") 62% 100%/cover no-repeat}
.mx-subhero h1{font:700 42px/1.06 var(--mx-font-head);max-width:12em;margin:0 auto;letter-spacing:0}

/* ---------- Solutions (three linked cards on the navy glow) ---------- */
.mx-solutions{padding:56px var(--mx-gutter) 64px;color:#fff;background:var(--mx-navy) url("../img/produced-water/produced-water-cards-background.webp") center/100% 100% no-repeat}
.mx-solutions-list{display:grid;gap:44px;list-style:none;max-width:420px;margin:0 auto}
.mx-solution{position:relative;text-align:center}
.mx-solution .mx-pl{aspect-ratio:1/1}
.mx-solution img{object-position:50% 40%}
.mx-solution h3{font:700 26px/1.15 var(--mx-font-head);margin:16px 0 8px;color:#fff}
.mx-solution h3 a{color:inherit;text-decoration:none;transition:color .25s ease}
.mx-solution h3 a::after{content:"";position:absolute;inset:0}   /* the whole card is the link; its accessible name is just the title */
.mx-solution h3 a:focus-visible{outline:0}
.mx-solution h3 a:focus-visible::after{outline:3px solid #ffb703;outline-offset:2px;border-radius:var(--mx-radius-img)}
.mx-solution p{font-size:15px;line-height:1.55;max-width:24em;margin:0 auto;color:#fff}
@media (hover:hover){.mx-solution:hover h3 a{color:var(--mx-blue-on-dark)}}
@media (prefers-reduced-motion:reduce){.mx-solution h3 a{transition:none}}

/* ---------- Get Started: dark variant of the shared component (values from the PSB) ---------- */
.mx-cta--produced-water{--mx-cta-wash:9,23,34;--mx-cta-bg:var(--mx-navy);--mx-cta-heading:#fff;--mx-cta-ink:#fff;--mx-cta-eyebrow:#fff;--mx-cta-phone:#fff;
  --mx-cta-h:671.8px;--mx-cta-x:502.7px;--mx-cta-top:187.5px;--mx-wx:.09}
.mx-cta--produced-water .mx-stage{--mx-asp:2000/933;--mx-px:.2}

/* ---------- Animation start states ---------- */
.mx-anim .mx-solution :is(h3,p){opacity:0}

/* ---- wide mobile (>= 550px): horizontal cards, image left ---- */
@media (min-width:550px){
  .mx.mx .mx-solutions-list{max-width:none;gap:40px}
  .mx.mx .mx-solution{display:grid;grid-template-columns:minmax(0,40%) minmax(0,1fr);column-gap:28px;align-content:center;text-align:left}
  .mx.mx .mx-solution .mx-ph{grid-row:1 / span 2}
  .mx.mx .mx-solution h3{align-self:end;margin:0 0 12px;font-size:24px}
  .mx.mx .mx-solution p{align-self:start;margin:0}
}

/* ---- tablet (>= 768px): three columns ---- */
@media (min-width:768px){
  .mx.mx .mx-subhero{height:clamp(560px,60svh,720px);padding-top:calc(var(--mx-hdr-top) + var(--mx-hdr-h) + 84px)}
  .mx.mx .mx-subhero h1{font-size:calc(42px + 22.5*(var(--mx-frame-w) - 390px)/810)}
  .mx.mx .mx-solutions{padding:88px var(--mx-gutter) 96px}
  .mx.mx .mx-solutions-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 24px;align-items:start}
  .mx.mx .mx-solution{display:block;align-content:start;text-align:center}   /* align-content:center from the 550px layout would centre each card's content vertically once the cards stretch to equal height */
  .mx.mx .mx-solution .mx-pl{aspect-ratio:364/479}
  .mx.mx .mx-solution h3{margin:22px 0 12px;font-size:calc(22px + 12.4*(var(--mx-frame-w) - 768px)/432)}
  .mx.mx .mx-solution p{margin:0 auto;font-size:calc(15px + 2.2*(var(--mx-frame-w) - 768px)/432)}
  .mx.mx .mx-cta--produced-water .mx-stage{--mx-px:.31}
}

/* ---- desktop (>= 1200px): the PSD ---- */
@media (min-width:1200px){
  .mx.mx .mx-subhero{height:calc(615.6px*var(--mx-m));padding:calc(147px*var(--mx-m)) var(--mx-side) 0}          /* 855 PSD px tall; headline glyphs start 217 PSD px down */
  .mx.mx .mx-subhero h1{font-size:calc(54px*var(--mx-m));line-height:1.054;max-width:10.5em}   /* QA: two lines (Produced Water / Treatment Solutions) */
  .mx.mx .mx-solutions{--mx-pw-side:calc((100% - min(calc(842.4px*var(--mx-m)),100% - 2*var(--mx-gutter)))/2);padding:calc(81px*var(--mx-m)) var(--mx-pw-side) calc(111px*var(--mx-m))}   /* container 1170 PSD px; 113 above / 154 below the content */
  .mx.mx .mx-solutions-list{gap:0 calc(28px*var(--mx-m))}
  .mx.mx .mx-solution h3{margin:calc(24px*var(--mx-m)) 0 calc(13px*var(--mx-m));font-size:calc(28.8px*var(--mx-m));line-height:1.2}
  .mx.mx .mx-solution p{padding:0 5%;font-size:calc(14.4px*var(--mx-m));line-height:1.5;max-width:none}
}

/* Hero foreground: the PSD puts a masked copy of the photo above the headline (the object overlaps the title). Same box and motion as the background (shares its class). */
.mx-hero-front{background-image:url("../img/produced-water/produced-water-hero-front.webp")!important}