/* Solutions page — Problem -> Solution section. Scoped to .nx-problem-solution only. */

.nx-problem-solution{background:#0a1620;color:#fff;padding:92px 0 96px;overflow:hidden}

/* ---------- Intro panel ---------- */
.nx-problem-solution__intro{display:grid;grid-template-columns:minmax(0,1.92fr) minmax(0,1.1fr);gap:56px;align-items:stretch;margin-bottom:96px}
.nx-problem-solution__intro-copy .nx-kicker{color:#FD6262}
.nx-problem-solution__intro-copy h2{color:#fff;font-size:clamp(30px,2.7vw,42px);line-height:1.12;letter-spacing:-1px;margin:14px 0 18px}
.nx-problem-solution__intro-copy p{color:#b9c2ca;font-size:16px;line-height:1.65;margin:0 0 28px;}
.nx-problem-solution__intro-media{position:relative;border-radius:10px;overflow:hidden;min-height:0;border:0px solid rgba(255,255,255,.08)}
.nx-problem-solution__intro-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.nx-problem-solution__intro-label{position:absolute;z-index:1;right:28px;bottom:26px;text-align:right;color:#fff;font-size:11px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;line-height:1.6;opacity:.85}

/* ---------- Section header row ---------- */
/* Everything from the header row down (header + card grid) sits on its own
   full-bleed white background, separate from the dark intro panel above it.
   The white fill is a pseudo-element so it doesn't disturb the nx-wrap
   width/centering already applied to these elements. */
.nx-problem-solution__header{position:relative;z-index:1;width:100%;max-width:none;text-align:center;margin:0 auto 0;padding:80px 0 40px;}
.nx-problem-solution__header::before,
.nx-problem-solution__grid::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:100vw;transform:translateX(-50%);background:#fff;z-index:-1;}
.nx-problem-solution__header .nx-kicker{color:#FD6262;justify-content:center}
.nx-problem-solution__header h2{color:#171b21;font-size:clamp(28px,2.4vw,38px);line-height:1.12;letter-spacing:-1px;margin:12px 0 18px}
.nx-problem-solution__header p{color:#5b646c;font-size:16px;line-height:1.6;margin:0 auto;max-width:720px}
.nx-problem-solution__grid{position:relative;z-index:1;padding-bottom:96px;}

/* ---------- Card grid ---------- */
.nx-problem-solution__grid{display:grid;grid-template-columns:repeat(6,1fr);gap:18px}
.nx-problem-card{grid-column:span 2;position:relative;border:1px solid rgba(0,0,0,.08);border-radius:8px;background:#d4d4d4;overflow:hidden;display:flex;flex-direction:column;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.nx-problem-card:hover{transform:translateY(-4px);border-color:#FD6262;box-shadow:0 18px 36px rgba(0,0,0,.28)}
.nx-problem-card:focus-within{border-color:#FD6262}
.nx-problem-card__media{position:relative;height:145px;overflow:hidden}
.nx-problem-card__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease}
.nx-problem-card:hover .nx-problem-card__media img{transform:scale(1.035)}
.nx-problem-card__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(212,212,212,0) 45%,#d4d4d4 100%)}
.nx-problem-card__content{position:relative;flex:1;padding:18px 20px 20px;display:flex;flex-direction:column}
.nx-problem-card h3{font-size:17px!important;line-height:1.25;color:#171c22;margin:0 0 8px;font-weight:700}
.nx-problem-card__recommendation{font-size:13.5px!important;line-height:1.5;color:#565f66;margin:0 0 12px}
.nx-problem-card__recommendation strong{color:#20262c}

/* Row 2: wider cards, image-left / content-right for visual rhythm */
.nx-problem-card--wide{grid-column:span 3;flex-direction:row}
.nx-problem-card--wide .nx-problem-card__media{height:auto;flex:0 0 42%}
.nx-problem-card--wide .nx-problem-card__media::after{background:linear-gradient(90deg,rgba(212,212,212,0) 55%,#d4d4d4 100%)}
.nx-problem-card--wide .nx-problem-card__content{flex:1;padding:20px 24px}

@media(max-width:1100px){
  .nx-problem-solution__intro{grid-template-columns:1fr;gap:36px}
  .nx-problem-solution__intro-media,.nx-problem-solution__intro-media img{min-height:280px}
  .nx-problem-solution__grid{grid-template-columns:repeat(2,1fr)}
  .nx-problem-card{grid-column:span 1}
  .nx-problem-card--wide{grid-column:span 2;flex-direction:column}
  .nx-problem-card--wide .nx-problem-card__media{flex:0 0 145px;height:145px}
  .nx-problem-card--wide .nx-problem-card__media::after{background:linear-gradient(180deg,rgba(212,212,212,0) 45%,#d4d4d4 100%)}
}

@media(max-width:680px){
  .nx-problem-solution{padding:64px 0 68px}
  .nx-problem-solution__intro{margin-bottom:56px}
  .nx-problem-solution__intro-copy .nx-btn{width:100%}
  .nx-problem-solution__grid{grid-template-columns:1fr;gap:18px}
  .nx-problem-card--wide{grid-column:span 1}
}