/* ==========================================================================
   02 Problem (#problem). Boards m02b-problem-v2 (390) and d02b-problem-v2
   (1280), v353. Mobile first. Phones (to 767px): the cards one under another
   in normal flow, each a photo with its caption on glass at the .89 floor.
   768 and up: three cards in a row, the side photos lower so all three end on
   one line, the photo tiles floating (as d02b). Glows clipped by the section.
   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.
   ========================================================================== */

#problem{
  --pc-h:clamp(500px,128.2vw,600px);   /* phone card height: 500 at 390 (m02b), growing gently on wider phones */
  position:relative;overflow:clip;background:transparent;padding:var(--section-y) 0   /* D-174: the body's navy */
}
#problem a{color:var(--blue-300)}
#problem a:hover{color:var(--bone)}

/* Glow pools (decorative). Phone positions from m02b, left-anchored. */
#problem .pb-glows{position:absolute;inset:0;z-index:0;pointer-events:none}
#problem .pb-glows .glow{position:absolute;border-radius:50%;filter:blur(32px)}
#problem .pb-g1{left:-185px;top:-200px;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%)}
#problem .pb-g2,#problem .pb-g3{background:radial-gradient(circle,rgba(0,95,214,.22) 0%,rgba(0,95,214,.09) 40%,rgba(0,95,214,0) 70%)}
#problem .pb-g2{left:-330px;top:693px;width:640px;height:640px}
#problem .pb-g3{left:90px;top:1331px;width:560px;height:560px}

#problem .pb-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))}

#problem .pb-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}

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

/* Card 3: four drivers, four days */
#problem .pb-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:2px;
  width:100%;height:calc(var(--pc-h) * .764);
  -webkit-mask-image:linear-gradient(#000 calc(100% - 48px),transparent);mask-image:linear-gradient(#000 calc(100% - 48px),transparent)}
#problem .pb-tile{position:relative;overflow:hidden}
#problem .pb-tile img{position:absolute;left:0;top:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:70% 50%}
#problem .pb-day{position:absolute;left:8px;top:8px;padding:4px 8px;border-radius:var(--radius);
  background:rgba(4,16,39,.89);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  font-family:var(--font-display);font-size:12px;font-weight:500;line-height:1.2;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-img)}
#problem .pb-day--today{color:var(--bone)}

/* Caption on glass, the .89 floor */
#problem .pb-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%)}
#problem .pb-head{display:flex;align-items:center;gap:10px}
#problem .pb-icon{display:flex;flex-shrink:0;color:var(--blue-300)}
#problem .pb-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}
#problem .pb-text p{margin-top:10px;font-size:16px;line-height:1.55;color:var(--muted);text-wrap:pretty}

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

/* --------------------------------------------------------------------------
   768 and up: d02b. The row is 1064 wide at 1280 (320, 360, 320, gaps of 32)
   and scales below that. Side cards drop by 53px at 1280 (16.5625% of their
   width) so all three photos end on one line.
   -------------------------------------------------------------------------- */
@media (min-width:768px){
  #problem .pb-g1{left:calc(50% - 450px);top:-120px;width:900px;height:900px}
  #problem .pb-g2{left:calc(50% - 840px);top:560px;width:640px;height:640px}
  #problem .pb-g3{left:calc(50% + 200px);top:700px;width:560px;height:560px}

  #problem .pb-h2{max-width:480px;margin-inline:auto;line-height:1.08;text-align:center}   /* d02b sets 640, but "can't" (D-159) is shorter than the board's "cannot": 480 keeps its three lines */

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

  #problem .pb-media{position:relative;inset:auto;aspect-ratio:320/427;overflow:hidden;border-radius:var(--radius);background:var(--navy-900)}
  #problem .pb-card--2 .pb-media{aspect-ratio:3/4}
  #problem .pb-card--3 .pb-media{background:var(--navy)}
  #problem .pb-media > img,#problem .pb-card--2 .pb-media > img{position:static;height:100%;-webkit-mask-image:none;mask-image:none}
  #problem .pb-grid{height:100%;-webkit-mask-image:none;mask-image:none}
  #problem .pb-day{top:auto;bottom:8px}

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

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