/* "What the work includes" as a bento (template-parts/service-sections.php, DESIGN.md
   "Bento"). Plinth cards with a hairline edge; each card opens with a drawn scene that
   fills it edge to edge, sits on a faint dot grid and melts into the card at the sides
   and the bottom. The first card is large and spans two rows, the next two stand beside
   it, the rest share the last row. The loops are GSAP timelines (assets/js/bento.js);
   the printed SVG is their finished frame. The card answers the cursor with light, not
   lift. */

/* The section keeps .svc-section's spacing; only the title gets more room below. */
.bento-section .svc-section__title {
  margin-bottom: 5.6rem;
}

.bento {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bento__card {
  position: relative;
  display: flex;
  flex-direction: column;
  grid-column: span 4;
  min-width: 0;
  overflow: hidden;
  border: 0.1rem solid rgba(255, 255, 255, 0.08);
  border-radius: 1.6rem;
  background: #111318;
  transition: border-color 0.4s ease;
}

.bento__card:first-child {
  grid-column: span 7;
  grid-row: span 2;
}

.bento__card:nth-child(2),
.bento__card:nth-child(3) {
  grid-column: span 5;
}

.bento--rest-2 .bento__card:nth-child(n + 4) { grid-column: span 6; }
.bento--rest-4 .bento__card:nth-child(n + 4) { grid-column: span 3; }

@media (hover: hover) and (pointer: fine) {
  .bento__card:hover {
    border-color: rgba(229, 176, 128, 0.4);
  }
}

.bento__art {
  position: relative;
  flex: 0 0 auto;
  aspect-ratio: 560 / 340;
  -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 100%),
    linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, #000 70%, transparent 100%),
    linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-composite: intersect;
}

.bento__card:first-child .bento__art {
  flex: 1 1 auto;
  aspect-ratio: auto;
  min-height: 52rem;
}

.bento__art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.07) 1px, transparent 1.3px) 0 0 / 16px 16px;
  -webkit-mask-image: radial-gradient(70% 70% at 50% 45%, #000 30%, transparent 100%);
  mask-image: radial-gradient(70% 70% at 50% 45%, #000 30%, transparent 100%);
  pointer-events: none;
}

.bento__art svg {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
}

.bento__copy {
  position: relative;
  padding: 0 3.2rem 3.2rem;
}

.bento__title {
  margin: 0 0 0.8rem;
  color: #fff;
  font-size: clamp(2rem, calc(1.4rem + 0.5vw), 2.4rem);
  font-weight: 500;
  line-height: 1.2;
}

.bento__link {
  color: inherit;
  text-decoration: none;
}

/* A card that is a link (the industries hub): the whole card takes the click. */
.bento__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
}

.bento__link:focus-visible {
  outline: none;
}

.bento__card:has(.bento__link:focus-visible) {
  border-color: #e5b080;
}

.bento__text {
  max-width: 52ch;
  margin: 0;
  color: #989898;
  font-size: 1.6rem;
  line-height: 1.5;
}

.bento__text a {
  position: relative;
  z-index: 3;
  color: #e5b080;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
  transition: text-decoration-color 0.3s ease;
}

.bento__text a:hover,
.bento__text a:focus-visible {
  text-decoration-color: transparent;
}

@media (max-width: 1199px) {
  .bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bento .bento__card {
    grid-column: auto;
    grid-row: auto;
  }

  .bento .bento__card:first-child,
  .bento .bento__card:last-child:nth-child(even) {
    grid-column: span 2;
  }

  .bento .bento__card:first-child .bento__art {
    min-height: 0;
    aspect-ratio: 800 / 560;
  }

  /* A last card left alone on its row: drawing and copy side by side. */
  .bento .bento__card:last-child:nth-child(even) {
    flex-direction: row;
    align-items: flex-end;
  }

  .bento .bento__card:last-child:nth-child(even) .bento__art {
    flex: 0 0 56%;
    order: 2;
  }

  .bento .bento__card:last-child:nth-child(even) .bento__copy {
    flex: 1 1 auto;
    padding-top: 3.2rem;
  }
}

@media (max-width: 767px) {
  .bento-section .svc-section__title {
    margin-bottom: 3.2rem;
  }

  .bento {
    grid-template-columns: minmax(0, 1fr);
  }

  .bento .bento__card:first-child,
  .bento .bento__card:last-child:nth-child(even) {
    grid-column: auto;
  }

  .bento .bento__card:first-child .bento__art {
    aspect-ratio: 800 / 700;
  }

  .bento .bento__card:last-child:nth-child(even) {
    flex-direction: column;
    align-items: stretch;
  }

  .bento .bento__card:last-child:nth-child(even) .bento__art {
    flex-basis: auto;
    order: 0;
  }

  .bento__copy,
  .bento .bento__card:last-child:nth-child(even) .bento__copy {
    padding: 0 2.4rem 2.4rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bento__card,
  .bento__text a {
    transition: none;
  }
}