/* ==========================================================================
   Bento box — "Not all data storage platforms are created equal" cards + stats
   ========================================================================== */

.bento-box{
  --bento-bg-color:var(--ps-color-neutral-2-000);
  --bento-card-border-color:var(--ps-color-neutral-2-300);
  --bento-card-hover-border-color:var(--ps-color-secondary-3-500);
  --bento-copy-color:var(--ps-color-neutral-3-500);
  --bento-padding:32px;
  --bento-scale-duration:.35s;
  --bento-scale-delay:0s;
  --bento-frame-duration:.25s;
  --bento-frame-delay:0s;
  --bento-translate-duration:.7s;
  --bento-opacity-duration:.7s;
  --bento-item-delay:.1s;
  display:flex;flex-direction:column;row-gap:20px;width:100%;
  padding-bottom:var(--ps-grid-gutter);
}

.bento-box__row{display:grid;grid-template-columns:repeat(var(--ps-grid-columns),minmax(0,1fr));column-gap:var(--ps-grid-gutter);row-gap:20px;padding-inline:var(--ps-grid-margin)}
.bento-box__content{grid-column-end:span var(--ps-grid-columns)}
.bento-box__nested{display:grid;grid-template-columns:repeat(var(--ps-grid-columns),minmax(0,1fr));column-gap:var(--ps-grid-gutter);row-gap:20px}

.bento-box__card{
  position:relative;border-radius:18px;
  border:2px solid var(--bento-card-border-color);
  grid-column-end:span var(--ps-grid-columns);
  opacity:1;translate:0 0;
  transition:scale var(--bento-scale-duration) var(--bento-scale-delay) ease-out,
             opacity var(--bento-opacity-duration) var(--bento-item-delay) linear,
             translate var(--bento-translate-duration) var(--bento-item-delay) linear;
  --bento-fg-img-h-align:left;
  --bento-fg-img-v-align:center;
}
.bento-box__row.is-hidden .bento-box__card{opacity:0;translate:0 30px}
.bento-box__card:nth-child(2){--bento-item-delay:.3s}
.bento-box__card:nth-child(3){--bento-item-delay:.5s}
.bento-box__card:nth-child(4){--bento-item-delay:.7s}
.bento-box__card--h-right{--bento-fg-img-h-align:right}

.bento-box__card-content{
  width:100%;height:100%;display:flex;flex-direction:column;justify-content:space-between;
  border-radius:16px;overflow:hidden;
}
.bento-box__card-bg{position:absolute;inset:0;border-radius:16px;overflow:hidden;background:var(--bento-bg-color)}
.bento-box__card-copy{
  padding:32px;position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:24px;
  color:var(--bento-copy-color);
}
.bento-box__card--stat .bento-box__card-copy{height:100%}
.bento-box__card-eyebrow{color:var(--ps-color-secondary-5-500);text-transform:uppercase}
.bento-box__card-link{position:absolute;inset:0;z-index:1;border-radius:18px}
.bento-box__cta{display:flex;justify-content:center;padding-top:8px}
.bento-box__card-heading{color:var(--ps-color-neutral-3-500)}
.bento-box__card-description p{margin:0}
.bento-box__card-ctas{display:flex;gap:16px;flex-wrap:wrap;align-items:baseline;z-index:2}

.bento-box__card-stat-value{color:var(--ps-color-brand-500)}
.bento-box__card--reserved .bento-box__card-stat-value{color:var(--ps-color-neutral-3-100)}
.bento-box__card--reserved{border-style:dashed}
.bento-box__card-stat-value p{margin:0}
.bento-box__card-stat-subheading{font-size:13px;line-height:18.57px;letter-spacing:.5px}

.bento-box__card-fg{position:relative;width:100%}
.bento-box__card-fg img{width:100%;height:auto;display:block}

/* hover: mint frame grows behind the card, card scales up */
@media (hover:hover) and (pointer:fine){
  .bento-box__card{z-index:1}
  .bento-box__card::before{
    content:"";position:absolute;inset:0;z-index:0;border-radius:24px;
    background:var(--bento-card-hover-border-color);
    transition:inset var(--bento-frame-duration) var(--bento-frame-delay) linear,
               border-radius var(--bento-frame-duration) var(--bento-frame-delay) linear;
  }
  .bento-box__card:hover,.bento-box__card:focus-within{
    scale:1.07;z-index:3;
    --bento-scale-delay:.15s;--bento-frame-delay:.15s;
  }
  .bento-box__card:hover::before,.bento-box__card:focus-within::before{inset:-12px;border-radius:24px}
}

@media (min-width:640px){
  .bento-box{--bento-padding:40px}
  .bento-box__nested{display:flex;flex-wrap:wrap}
  .bento-box__card{flex:1 1 0;min-width:calc(50% - 10px)}
  .bento-box__card--horizontal{min-width:100%}
  .bento-box__card--horizontal .bento-box__card-content{flex-direction:row;gap:var(--ps-grid-gutter)}
  .bento-box__card--horizontal .bento-box__card-copy,
  .bento-box__card--horizontal .bento-box__card-fg{flex:0 1 50%}
  .bento-box__card--horizontal .bento-box__card-fg{position:absolute;inset:0;display:flex}
  .bento-box__card--horizontal .bento-box__card-fg img{
    height:100%;object-fit:contain;
    object-position:var(--bento-fg-img-h-align) var(--bento-fg-img-v-align);
  }
}
@media (min-width:1024px){
  .bento-box{--bento-padding:64px}
  .bento-box__nested{display:grid}
  .bento-box__row--cards-3 .bento-box__card,
  .bento-box__row--cards-4 .bento-box__card{min-width:0}
  .bento-box__card--span-1{grid-column-end:span 3}
  .bento-box__card--span-2{grid-column-end:span 6}
  .bento-box__row--cards-3 .bento-box__card--horizontal:nth-child(n+4){grid-column-end:span 6}
  .bento-box__card--span-3{grid-column-end:span 9}
  .bento-box__card--stat{grid-column-end:span 3}
}
/* The bento grid is inset to 10 of 12 columns on wide viewports */
@media (min-width:1350px){
  .bento-box{
    --bento-grid-width:calc(min(100vw,var(--ps-grid-max-width)) - 2 * var(--ps-grid-margin));
    --bento-column-width:calc((var(--bento-grid-width) - 11 * var(--ps-grid-gutter)) / 12);
    width:calc(10 * var(--bento-column-width) + 9 * var(--ps-grid-gutter) + 2 * var(--ps-grid-margin));
    margin-inline:auto;
  }
}