/* ==========================================================================
   EMBURY: "What's included" board, real design documents
   Loaded by whats-included.html and the six service pages, on top of the
   flat-lay and detail panel styles in style.css (19f). Adds the 3D
   walkthrough video, document figures shown uncropped in the panels and
   the link under the service-page boards.
   ========================================================================== */

/* ---------- 3D walkthrough: the standout item ---------- */
.flatlay__sheet--video {
  position: relative;
  padding: 1.5%;
  background-color: var(--charcoal);
}

.flatlay__sheet video,
.pack-panel__figure video {
  display: block;
  width: 100%;
  height: auto;
  background-color: var(--charcoal);
}

/* Always-visible tag, so the walkthrough reads as the lead item */
.flatlay__badge {
  position: absolute;
  top: 14px;
  left: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background-color: var(--gold);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--charcoal);
  pointer-events: none;
}

.flatlay__badge svg {
  width: 9px;
  height: 9px;
  fill: currentColor;
}

/* ---------- Detail panel: drawings and boards are shown whole ---------- */
.pack-panel__figure--doc img {
  aspect-ratio: auto;
  object-fit: contain;
  background-color: var(--white);
  border: 1px solid var(--border);
}

/* ---------- Service pages: link to the full page ---------- */
.pack-board__more {
  margin-top: 32px;
}

/* ---------- Card layout below 961px ---------- */
@media (max-width: 960px) {
  /* With an odd card left over after the full-width lead, it spans the row */
  .flatlay__items > li:last-child:nth-child(even) {
    grid-column: 1 / -1;
  }

  .flatlay__badge {
    top: 10px;
    left: 10px;
  }
}