/* ==========================================================================
   03 Solution (#solution). Boards m02c-solution (390) and d02c-solution
   (1280), v353. Mobile first, and the same card system as 02 Problem (kept
   separate so each section stands alone). Phones (to 767px): the cards one
   under another in normal flow, captions on glass at the .89 floor. 768 and
   up: three cards in a row, side photos lower, tiles floating (as d02c).
   D-186 (Bobby, 11 Oct): no scroll animation here at any width, no sticky
   stack, no dwell and no reveal: the cards scroll by freely.
   ========================================================================== */

#solution{
  --sc-h:clamp(540px,138.4vw,640px);   /* phone card height: 540 at 390 (m02c), growing gently on wider phones */
  position:relative;overflow:clip;background:transparent;   /* D-174: the body's navy */
  padding:clamp(24px,calc(20.5px + .9vw),32px) 0 var(--section-y)   /* 24 phone, 32 desktop: it follows Problem directly */
}
#solution a{color:var(--blue-300)}
#solution a:hover{color:var(--bone)}

/* Glow pools (decorative). Phone positions from m02c, left-anchored. */
#solution .sl-glows{position:absolute;inset:0;z-index:0;pointer-events:none}
#solution .sl-glows .glow{position:absolute;border-radius:50%;filter:blur(32px)}
#solution .sl-g1{left:-185px;top:-260px;width:760px;height:760px;
  background:radial-gradient(circle,rgba(23,212,208,.12) 0%,rgba(0,95,214,.20) 30%,rgba(0,95,214,.08) 50%,rgba(0,95,214,0) 70%)}
#solution .sl-g2,#solution .sl-g3{background:radial-gradient(circle,rgba(0,95,214,.22) 0%,rgba(0,95,214,.09) 40%,rgba(0,95,214,0) 70%)}
#solution .sl-g2{left:90px;top:712px;width:640px;height:640px}
#solution .sl-g3{left:-300px;top:1406px;width:560px;height:560px}

#solution .sl-inner{position:relative;z-index:1;
  padding-left:max(var(--gutter),env(safe-area-inset-left));padding-right:max(var(--gutter),env(safe-area-inset-right))}

#solution .sl-h2{font-family:var(--font-display);font-size:var(--fs-h2);line-height:1.1;font-weight:700;letter-spacing:-.02em;color:var(--bone);text-wrap:balance}
#solution .sl-lede{margin-top:16px;font-size:17px;line-height:1.55;color:var(--muted);text-wrap:pretty}

/* Phone: the cards, a plain list 20px apart (the stack's gaps, D-186). The box inside each li carries size and positioning. */
#solution .sl-cards{list-style:none;margin:40px 0 0;padding:0;display:flex;flex-direction:column;gap:20px}
#solution .sl-box{position:relative;height:var(--sc-h);border-radius:var(--radius);overflow:hidden;background:var(--navy-900)}
#solution .sl-media{position:absolute;inset:0;border-radius:inherit}
#solution .sl-media > img{position:absolute;left:0;top:0;width:100%;max-width:none;height:calc(var(--sc-h) * .8648);
  object-fit:cover;object-position:50% 50%;
  -webkit-mask-image:linear-gradient(#000 calc(100% - 48px),transparent);mask-image:linear-gradient(#000 calc(100% - 48px),transparent)}
#solution .sl-card--1 .sl-media > img{top:calc(var(--sc-h) * -.063);
  -webkit-mask-image:linear-gradient(#000 calc(100% - 45px),transparent);mask-image:linear-gradient(#000 calc(100% - 45px),transparent)}

/* Caption on glass, the .89 floor */
#solution .sl-text{position:absolute;left:12px;right:12px;bottom:12px;z-index:3;padding:16px 16px 18px;border-radius:var(--radius);
  background:rgba(4,16,39,.89);-webkit-backdrop-filter:blur(16px) saturate(120%);backdrop-filter:blur(16px) saturate(120%)}
#solution .sl-head{display:flex;align-items:center;gap:10px}
#solution .sl-icon{display:flex;flex-shrink:0;color:var(--blue-300)}
#solution .sl-text h3{font-family:var(--font-display);font-size:20px;line-height:1.1;font-weight:500;letter-spacing:-.01em;color:var(--bone);text-wrap:balance}
#solution .sl-text p{margin-top:10px;font-size:16px;line-height:1.55;color:var(--muted);text-wrap:pretty}

@media (max-width:767px){
  #solution .float{animation:none}                                  /* the phone board does not float */
}

/* --------------------------------------------------------------------------
   768 and up: d02c. Same row as Problem: 1064 wide at 1280, scaling below.
   -------------------------------------------------------------------------- */
@media (min-width:768px){
  #solution .sl-g1{left:calc(50% - 400px);top:-200px;width:800px;height:800px}
  #solution .sl-g2{left:calc(50% - 840px);top:480px;width:640px;height:640px}
  #solution .sl-g3{left:calc(50% + 220px);top:560px;width:560px;height:560px}

  #solution .sl-intro{text-align:center}
  #solution .sl-h2{max-width:622px;margin-inline:auto;line-height:1.08}
  #solution .sl-lede{max-width:554px;margin:16px auto 0;font-size:16.64px;text-wrap:wrap}   /* d02c's inherited size */

  #solution .sl-cards{display:grid;grid-template-columns:320fr 360fr 320fr;column-gap:32px;align-items:start;
    max-width:1064px;margin:64px auto 0}
  #solution .sl-card--1,#solution .sl-card--3{padding-top:16.5625%}
  #solution .sl-box{height:auto;overflow:visible;background:none;border-radius:0}

  #solution .sl-media{position:relative;inset:auto;aspect-ratio:320/427;overflow:hidden;border-radius:var(--radius);background:var(--navy-900)}
  #solution .sl-card--2 .sl-media{aspect-ratio:3/4}
  #solution .sl-media > img,#solution .sl-card--1 .sl-media > img{position:static;height:100%;-webkit-mask-image:none;mask-image:none}

  #solution .sl-text{position:static;margin-top:24px;padding:0;border-radius:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none}
  #solution .sl-text.rim::before{display:none}
  #solution .sl-text h3{line-height:1.08}
  #solution .sl-text p{font-size:15px;text-wrap:wrap}
}

@media (min-width:768px) and (max-width:1023px){
  #solution .sl-cards{column-gap:24px}
  #solution .sl-text h3{font-size:18px}
}