/**
 * Home page only styles.
 *
 * Everything here comes straight from the page level <style> block in
 * design/home.html. Global rules stay in assets/css/site.css and are not
 * duplicated or overridden here. Loaded automatically on the front page by
 * sp_page_style_slugs() in inc/enqueue.php.
 */

/* Home page only: tablet and mobile refinements. Desktop (>1080px) is untouched. */
/* Research area: product vial cluster on the family tiles (fanned like the lead/wide tiles) */
.tile.sm{padding:24px;background:radial-gradient(240px 170px at 34% 30%,rgba(120,150,210,.16),transparent 70%),rgba(255,255,255,.035)}
.tile.sm .shots{position:relative;order:1;flex:none;height:118px;margin:8px 0 0;right:auto;bottom:auto;width:auto}   /* a band under the index row, clear of the arrow */
.tile.sm .tile-body{order:2;padding-top:12px}
.shots .fan{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center}
.shots .fan img{position:relative;flex:none;height:88%}
.shots .fan img+img{margin-left:-22px}
.shots .fan img:nth-child(2){height:100%;z-index:2}
.shots .fan img:first-child{transform:rotate(-8deg)}
.shots .fan img:last-child:not(:nth-child(2)){transform:rotate(8deg)}
.shots .fan img:nth-child(2):last-child{transform:rotate(6deg)}
.tile.sm:hover .shots img:first-child{transform:translateY(-8px) rotate(-12deg)}
.tile.sm:hover .shots img:nth-child(2){transform:translateY(-12px) rotate(0)}
.tile.sm:hover .shots img:last-child:not(:nth-child(2)){transform:translateY(-8px) rotate(12deg)}
/* CTA: small vial peeking from the card corner, mobile only */
.cta-peek{display:none}
@media (min-width:641px) and (max-width:1080px){
  /* Tablet: single-column hero, so the stage no longer needs to bleed past the edges */
  .hero-center{height:560px}
  .hero-stage{left:0;right:0}
  .vial-float{width:min(80%,380px)}
}
@media (max-width:760px){
  /* Hero: keep the floating vial inside its stage so it clears the intro copy */
  .hero-center{height:420px;margin-top:36px}
  .vial-float{width:80%}
  .hero-right{gap:36px;margin-top:40px;align-items:flex-start;text-align:left}
  .hero-right>div{align-self:stretch}
  .hero-right .intro,.hero-right .hero-title{text-align:left;margin-left:0;margin-right:0}
  /* Card sliders: equal-height slides, trimmed product shots */
  .bento.m-slider{align-items:stretch}
  .bento.m-slider .tile.lead .shots,.bento.m-slider .tile.wide .shots{height:190px}
  .bento.m-slider .tile.lead h3{font-size:34px}
  .flow.m-slider .rail{display:none}
  .flow.m-slider .node{display:none}   /* each card already shows its big 01/02/03 */
  .flow.m-slider .stp-card{margin-top:0;min-height:0}
  .why-cards.m-slider{align-items:stretch;padding-top:12px!important}  /* room for the card hover lift inside the scroller */
  .why-card .big-cap{line-height:1.5}
  /* Research area tiles in the slider: vials sit at the foot of the card like the lead/wide tiles and fill the spare height */
  .bento.m-slider .tile.sm{padding-bottom:0}
  .bento.m-slider .tile.sm .shots,.bento.m-slider .tile.sm .tile-body{order:0}
  .bento.m-slider .tile.sm .tile-body{padding-top:34px}
  .bento.m-slider .tile.sm .shots{flex:1 0 180px;height:auto;margin:20px 0 0}
  .bento.m-slider .tile.sm .fan{top:auto;height:min(100%,250px);justify-content:center;padding-left:0}
  .bento.m-slider .tile.sm .fan img+img{margin-left:-30px}
  /* CTA: copy leads, the hand shot is swapped for a small tilted vial on the corner */
  .cta-box{min-height:0}
  .cta-art{display:none}
  .cta-copy{padding-top:52px}
  .cta-copy h2{padding-right:44px}
  .cta-peek{display:block;position:absolute;z-index:2;top:-58px;right:14px;width:74px;pointer-events:none}
  .cta-peek img{display:block;width:100%;height:auto;transform:rotate(16deg);filter:drop-shadow(0 22px 24px rgba(5,14,31,.45))}
}
@media (max-width:380px){
  .hero-title{font-size:52px}
  .stats3{gap:20px}
  .stat b{font-size:30px}
  .stat>span{line-height:1.35}
  .talk{padding:36px 24px}
  .p-stat b{font-size:34px}
}

/* Product vials on the research area tiles.
   WordPress serves the real images at roughly 660x1350, so every rule here
   gives the image a box to fit inside rather than letting its intrinsic height
   decide the tile. Without this the lead vial alone is taller than its card.
   Counts follow the design: one shot on the lead tile, two on the wide tile,
   a fan of three on the family tiles. */
.shots img,
.shots .fan img{flex:none;width:auto;max-width:100%;object-fit:contain}
.tile.lead .tile-body,
.tile.wide .tile-body{position:relative;z-index:2}

@media (min-width:1081px){
  /* Lead tile: the vial stands on the floor of the card, clear of the arrow
     above it and of the copy column beside it. */
  .tile.lead .shots{right:4%;left:auto;top:auto;bottom:0;width:42%;height:66%;align-items:flex-end;justify-content:center}
  .tile.lead .shots img{height:100%;max-height:100%}

  /* Wide tile: the pair shares that floor line and overlaps slightly. */
  .tile.wide .shots{right:64px;left:auto;top:auto;bottom:0;width:40%;height:78%;align-items:flex-end;justify-content:flex-end}
  .tile.wide .shots img{height:100%;max-height:100%;max-width:52%}
  .tile.wide .shots img+img{height:86%;margin-left:-12%}

  /* Family tiles: the fan is capped to its band, never to the image. */
  .tile.sm .shots .fan img{max-height:100%}
}

@media (max-width:1080px){
  /* site.css turns .shots into a static item at the foot of the card here, so
     the cap is on the image itself. */
  .tile.lead .shots img,
  .tile.wide .shots img{height:100%;max-height:300px}
  .tile.wide .shots img+img{max-height:260px}
}

/* The wide "why" card is a two column grid in the design because the second
   column holds the sample COA ticket. Real COA data is never invented, so when
   no ticket is rendered the copy takes the whole card instead of leaving the
   right half empty. */
.why-card.wide:not(:has(.ticket)){grid-template-columns:1fr}