/*
 * Homepage laboratories band.
 *
 * Five labs on one row, each on its own colour. The row is the whole point of
 * the section, so it has to survive being narrowed: five across on a desktop,
 * three on a tablet, two on a large phone and one on a small one, with the
 * numeral and the card staying locked together at every step.
 */

/* ==========================================================
   1. SECTION
   ========================================================== */
.fbi-lb{
  --l-ink:#0E2A52;
  --l-navy:#08203F;
  --l-mut:#54637A;
  --l-line:#DCE6F2;
  --l-bg1:#F4F8FD;
  --l-bg2:#EAF1FA;
  --l-cyan:#2EB0E7;
  --l-max:1240px;
  --l-pad:clamp(18px,4vw,32px);
  --l-gap:clamp(14px,1.6vw,22px);

  position:relative;isolation:isolate;overflow:hidden;
  padding:clamp(56px,7.5vw,104px) 0;
  background:linear-gradient(165deg,var(--l-bg1) 0%,var(--l-bg2) 58%,#E3EDF8 100%);
  color:var(--l-ink);
  font-family:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
/* a soft drape behind the row, so the flat wash has some movement */
.fbi-lb::before{content:"";position:absolute;z-index:0;pointer-events:none;
  inset:0;opacity:.5;
  background:
    radial-gradient(70% 50% at 18% 8%,rgba(255,255,255,.95),transparent 62%),
    radial-gradient(60% 45% at 86% 76%,rgba(46,176,231,.14),transparent 64%)}
.fbi-lb::after{content:"";position:absolute;z-index:0;pointer-events:none;
  left:-6%;right:-6%;top:22%;height:56%;opacity:.42;
  background:repeating-linear-gradient(102deg,transparent 0 38px,rgba(255,255,255,.9) 38px 76px);
  transform:skewY(-4deg)}

/* theme bleed guards (Astra and friends) */
.fbi-lb *{box-sizing:border-box}
.fbi-lb ol,.fbi-lb li{list-style:none;margin:0;padding:0}
.fbi-lb h2,.fbi-lb h3,.fbi-lb p{margin:0}
.fbi-lb a{text-decoration:none;box-shadow:none}

.fbi-lb-in{position:relative;z-index:1;
  max-width:var(--l-max);margin:0 auto;padding:0 var(--l-pad)}

/* ==========================================================
   2. HEAD
   ========================================================== */
.fbi-lb-head{text-align:center;max-width:820px;margin:0 auto clamp(34px,4.6vw,58px)}
.fbi-lb-badge{display:inline-flex;align-items:center;gap:9px;
  font-size:clamp(12px,1.1vw,13px);font-weight:600;letter-spacing:.02em;
  color:var(--l-navy);background:rgba(255,255,255,.82);
  border:1px solid var(--l-line);border-radius:100px;
  padding:8px 18px;margin-bottom:clamp(16px,2vw,22px);
  box-shadow:0 4px 14px rgba(8,32,63,.06)}
.fbi-lb-badge b{width:7px;height:7px;border-radius:50%;flex:0 0 7px;
  background:linear-gradient(135deg,var(--l-cyan),#0066CC)}
.fbi-lb h2{font-family:'IBM Plex Sans','Inter',sans-serif;
  font-size:clamp(25px,3.4vw,42px);font-weight:700;line-height:1.16;
  letter-spacing:-.02em;color:#0B5AA8;
  /* the heading has to break somewhere on a phone; balance keeps the two
     lines even rather than leaving one orphaned word */
  text-wrap:balance}
.fbi-lb-lede{margin-top:clamp(10px,1.4vw,16px);
  font-size:clamp(14.5px,1.25vw,16.5px);line-height:1.7;color:var(--l-mut)}

/* ==========================================================
   3. THE ROW
   Five items, each a numeral above a card. `auto-fit` would let the last row
   stretch and break the rhythm, so the count is stepped explicitly.
   ========================================================== */
.fbi-lb-labs{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--l-gap);
  align-items:stretch}

.fbi-lb-labs>li{display:flex;flex-direction:column;
  opacity:0;transform:translateY(18px);
  transition:opacity .6s ease,transform .6s cubic-bezier(.22,1,.36,1)}
.fbi-lb[data-inview="in"] .fbi-lb-labs>li{opacity:1;transform:none}
.fbi-lb-labs>li:nth-child(1){transition-delay:.04s}
.fbi-lb-labs>li:nth-child(2){transition-delay:.10s}
.fbi-lb-labs>li:nth-child(3){transition-delay:.16s}
.fbi-lb-labs>li:nth-child(4){transition-delay:.22s}
.fbi-lb-labs>li:nth-child(5){transition-delay:.28s}

.fbi-lb-no{display:block;font-family:'IBM Plex Sans','Inter',sans-serif;
  font-size:clamp(34px,4.4vw,54px);font-weight:700;line-height:1;
  letter-spacing:-.03em;color:var(--c);margin:0 0 10px 4px}

.fbi-lb-card{position:relative;overflow:hidden;flex:1 1 auto;
  display:flex;flex-direction:column;
  border-radius:16px;padding:clamp(18px,1.9vw,26px);
  background:linear-gradient(155deg,var(--c) 0%,var(--c2) 100%);
  color:#fff;
  box-shadow:0 10px 26px rgba(8,32,63,.16);
  transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s}
/* a quiet arc in the corner, the same mark the solution pages use */
.fbi-lb-card::after{content:"";position:absolute;right:-52px;bottom:-52px;
  width:126px;height:126px;border-radius:50%;
  border:14px solid rgba(255,255,255,.16);pointer-events:none}
.fbi-lb-card h3{font-family:'IBM Plex Sans','Inter',sans-serif;
  font-size:clamp(15px,1.35vw,17.5px);font-weight:700;line-height:1.3;
  letter-spacing:-.01em;
  /* long lab names must not push the card wider than its track */
  overflow-wrap:anywhere;hyphens:auto}
.fbi-lb-card p{margin-top:10px;font-size:clamp(12.8px,1.05vw,13.8px);
  line-height:1.6;color:rgba(255,255,255,.9)}
.fbi-lb-card .rule{width:34px;height:2px;border-radius:2px;margin:12px 0 0;
  background:rgba(255,255,255,.55)}

@media(hover:hover){
  .fbi-lb-labs>li:hover .fbi-lb-card{transform:translateY(-6px);
    box-shadow:0 20px 42px rgba(8,32,63,.24)}
}

/* ==========================================================
   4. FOOT
   ========================================================== */
.fbi-lb-foot{margin-top:clamp(26px,3.4vw,44px);text-align:center;
  font-size:clamp(13.5px,1.15vw,15px);line-height:1.7;color:var(--l-mut)}
.fbi-lb-foot b{color:var(--l-navy);font-weight:600}

/* ==========================================================
   5. RESPONSIVE
   Five equal tracks stop working long before the phone: at 1080px the card
   titles are wrapping to four lines. The row steps down rather than shrinking.
   ========================================================== */
@media(max-width:1080px){
  .fbi-lb-labs{grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,22px)}
}
@media(max-width:720px){
  .fbi-lb-labs{grid-template-columns:repeat(2,1fr)}
  .fbi-lb-no{font-size:clamp(30px,7vw,40px)}
}
@media(max-width:460px){
  /* One column, and the numeral moves beside the title instead of above it:
     stacked, five numerals each on their own line wasted most of the screen. */
  .fbi-lb-labs{grid-template-columns:1fr;gap:14px}
  .fbi-lb-labs>li{display:grid;grid-template-columns:auto 1fr;
    align-items:center;gap:14px}
  .fbi-lb-no{margin:0;font-size:32px;align-self:center}
  .fbi-lb-card{padding:16px 18px}
  .fbi-lb-card::after{right:-58px;bottom:-58px}
  .fbi-lb-card p{margin-top:7px}
  .fbi-lb-card .rule{display:none}
}
@media(prefers-reduced-motion:reduce){
  .fbi-lb-labs>li{opacity:1;transform:none;transition:none}
  .fbi-lb-card{transition:none}
}