/* Card treatment for the product tiles — home page ("Products" grid), /products (both
   collection lists) and the home page's "Recent Builds" thumbnails.

   PURE CSS, targeting the Webflow classes already in the ported markup: no template, no
   content and no markup changes, so this is removable by deleting the <link>. The original
   stylesheet (static/css/webflow.css) stays untouched.

   Same visual language as the /videos gallery (static/css/videos.css): a 1px #e6e6e6 border,
   rounded corners, and a soft shadow that lifts on hover.

   The three groups this styles:
     1. /products            .collection-item-product   (12 cards, inside .w-col columns)
     2. home "Products"      .grid-arcades-images .div-block-arcade   (3 tiles)
     3. home "Recent Builds" a.lightbox-link            (7 thumbnails, each a lightbox)

   SPACING NOTE. Webflow's grid puts the gutter in the column's own padding
   (.w-container .w-row { margin: 0 -10px } + .w-col { padding: 0 10px }), so the columns'
   *boxes* touch: the 20px gutter exists only between their contents. A card whose border and
   background sit on the column box would therefore butt up against its neighbour. So the
   column's padding is dropped here and the separation is rebuilt with a margin on the card
   plus a matching width reduction, which keeps two cards per row and leaves the outer edges
   aligned. Below 768px Webflow stacks the columns at 100% width (webflow.css's <=767px
   block), so the horizontal margin is dropped again and only the vertical gap is kept. */

/* ------------------------------------------------------------------ card chrome */
.collection-item-product,
.grid-arcades-images .div-block-arcade,
a.lightbox-link {
  background-color: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 12px;
  overflow: hidden;
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}

.collection-item-product:hover,
.collection-item-product:focus-within,
.grid-arcades-images .div-block-arcade:hover,
.grid-arcades-images .div-block-arcade:focus-within,
a.lightbox-link:hover,
a.lightbox-link:focus-visible {
  border-color: #d3d3d3;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .11);
  transform: translateY(-2px);
}

/* ------------------------------------------------------------------ /products cards */
/* The card is the Webflow column itself; move its gutter padding inside so the product
   image can sit flush to the top edge, and rebuild the gutter as a margin (see header). */
.collection-item-product {
  padding: 0 0 18px;
  margin: 0 0 24px;
  align-content: start;
}

.collection-item-product .img-block-builds {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  margin-bottom: 18px;
  background-color: #f5f5f5;
  border-bottom: 1px solid #ededed;
}

.collection-item-product .img-block-builds img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.collection-item-product .heading-arcade-product,
.collection-item-product .label-arcade,
.collection-item-product .label-arcade-dim,
.collection-item-product .w-richtext {
  padding-left: 22px;
  padding-right: 22px;
}

.collection-item-product .heading-arcade-product {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #6b6b6b;
}

.collection-item-product .label-arcade {
  padding-top: 0;
  padding-bottom: 4px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
}

.collection-item-product .label-arcade-dim {
  font-size: 13px;
  letter-spacing: .02em;
  color: #6b6b6b;
}

.collection-item-product .w-richtext {
  margin-top: 14px;
}

.collection-item-product .w-richtext ul {
  margin: 0;
  padding-left: 18px;
}

.collection-item-product .w-richtext li {
  margin-bottom: 6px;
  font-size: 14px;
  line-height: 1.45;
}

/* Two-up (w-col-6) and three-up (w-col-4) hold from 768px up: webflow.css keeps the w-col-*
   widths and only drops .w-col to 100% in its <=767px block. Its -10px row margin is
   declared as `.w-container .w-row`, and the rows on /products are not inside a
   .w-container, so the row margin is supplied here; that is what keeps the outer card edges
   aligned with the container instead of inset by 10px. (Both are re-checked by
   measurement: two cards per row with a 20px gap at 768-1440, single column below.) */
@media screen and (min-width: 768px) {
  .collection-item-product {
    margin-left: 10px;
    margin-right: 10px;
  }

  .collection-item-product.w-col-6 {
    width: calc(50% - 20px);
  }

  .collection-item-product.w-col-4 {
    width: calc(33.3333% - 20px);
  }

  .collection-list {
    margin-left: -10px;
    margin-right: -10px;
  }
}

/* ------------------------------------------------- home page "Products" (3-up tiles) */
.grid-arcades-images {
  gap: 20px;
}

.grid-arcades-images .div-block-arcade {
  padding: 0;
}

.grid-arcades-images .div-block-arcade img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  padding: 18px;
  background-color: #f5f5f5;
  border-bottom: 1px solid #ededed;
  object-fit: contain;
}

.grid-arcades-images .div-block-arcade .label-arcade {
  padding: 16px 18px 18px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  text-align: left;
}

.grid-arcades-images .div-block-arcade .label-arcade a {
  color: inherit;
  text-decoration: none;
}

/* --------------------------------------------- home page "Recent Builds" thumbnails */
a.lightbox-link img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* ---------------------------------------------------------------------- responsive */
@media screen and (max-width: 991px) {
  .collection-item-product .heading-arcade-product,
  .collection-item-product .label-arcade,
  .collection-item-product .label-arcade-dim,
  .collection-item-product .w-richtext {
    padding-left: 18px;
    padding-right: 18px;
  }
}

@media screen and (max-width: 767px) {
  .collection-item-product,
  .grid-arcades-images .div-block-arcade,
  a.lightbox-link {
    border-radius: 10px;
  }

  .collection-item-product {
    padding-bottom: 14px;
    margin-bottom: 18px;
  }

  .collection-item-product .img-block-builds {
    aspect-ratio: 4 / 3;
    margin-bottom: 14px;
  }

  .collection-item-product .label-arcade {
    font-size: 21px;
  }

  .grid-arcades-images {
    gap: 14px;
  }

  .grid-arcades-images .div-block-arcade img {
    padding: 12px;
  }

  .grid-arcades-images .div-block-arcade .label-arcade {
    padding: 12px 14px 14px;
    font-size: 15px;
  }
}

/* don't animate for anyone who asked for less motion */
@media (prefers-reduced-motion: reduce) {
  .collection-item-product,
  .grid-arcades-images .div-block-arcade,
  a.lightbox-link {
    transition: none;
  }
  .collection-item-product:hover,
  .grid-arcades-images .div-block-arcade:hover,
  a.lightbox-link:hover {
    transform: none;
  }
}