/* ==========================================================================
   Collection Tiles — hero "real tile" showcase (marketing site only)
   --------------------------------------------------------------------------
   A single REAL app tile (rendered by CollectionTilesDemoAPI.renderTile, the
   same path as the live editor) that crossfades through the tile types beside
   the hero headline. Flanked by faint half product cards so it reads as a promo
   tile dropped into a product grid. Built by /assets/demo/tiles-hero.js.
   Scoped to .hero__inner--showcase so the shared .hero__inner (used on other
   pages) is untouched.
   ========================================================================== */

/* ---- CollectionTiles logo lockup (hero, on dark bg) ---------------------- */
/* Built from the tile MARK svg + a two-tone wordmark, adapted for the dark
   hero: "Collection" white, "Tiles" in the violet->blue accent gradient. */
.ct-lockup {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}
.ct-lockup__mark {
  width: 68px;
  height: auto;
  flex: none;
  border-radius: 16px;
  box-shadow: 0 4px 14px rgba(8, 14, 32, .35);
}
.ct-lockup__text { display: flex; flex-direction: column; line-height: 1; }
.ct-lockup__word {
  font-weight: 700;
  font-size: clamp(1.9rem, 4vw, 2.55rem);
  line-height: 1.15;
  letter-spacing: -.02em;
}
.ct-lockup__c { color: #fff; }
.ct-lockup__t {
  background: var(--accent-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.ct-lockup__by {
  margin-top: 5px;
  font-size: .86rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: #b8c4dc;
}
@media (max-width: 480px) {
  .ct-lockup__mark { width: 58px; }
}

/* Headline is smaller on this page's hero so the lockup reads as the brand. */
.hero__inner--showcase h1 { font-size: clamp(1.8rem, 3.6vw, 2.7rem); }

/* ---- Two-column hero (desktop) ------------------------------------------- */
.hero__inner--showcase {
  max-width: 1120px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 440px);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.hero__copy { max-width: 640px; }

/* Showcase is decorative — never intercept clicks or get announced. */
.hero__showcase { pointer-events: none; }

/* Stack underneath the copy on smaller screens. */
@media (max-width: 900px) {
  .hero__inner--showcase { grid-template-columns: 1fr; }
  .hero__showcase { margin-top: 16px; }
}

/* ---- Showcase: 3×3 mock product grid with the tile in the centre cell ----- */
/* The clip wrapper carries the width + crop: overflow:hidden establishes a BFC
   so the grid's negative top/bottom margins crop (not collapse), chopping the
   top row's top and the bottom row's lower half. Margins are % of this wrapper's
   width (= grid width), so the crop scales with the grid, not the hero column. */
.hero-show-clip {
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  overflow: hidden;
  /* Soft-fade the cropped top + bottom rows so the grid bleeds out of frame
     smoothly (more fade on the bottom, matching the deeper bottom crop). */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 72%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 72%, transparent 100%);
}
.hero-show {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  width: 100%;
  margin: -9% 0 -26%;   /* crop top-of-top-row + ~bottom-half-of-bottom-row */
  align-items: start;
}

/* Faint product-card placeholders surrounding the tile — pushed well back so
   the rotating centre tile reads as the star. */
.hero-show__card {
  opacity: .32;
  filter: saturate(.8);
}
.hero-show__card-img {
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: 10px;
  display: block;
  object-fit: cover;
}
.hero-show__card-bar {
  height: 9px;
  border-radius: 5px;
  background: rgba(255, 255, 255, .22);
  margin-top: 10px;
}
.hero-show__card-bar--short { width: 55%; }

/* ---- Tile stage + crossfade layers (mirrors the editor stage) ------------ */
.hero-show__stage {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  align-self: start;
  aspect-ratio: 3 / 4;     /* match the surrounding product thumbnails */
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: #0a1428;
  z-index: 1;
}
.hero-show__stage > .collection-tile-wrapper {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity .6s ease;
}
.hero-show__stage > .collection-tile-wrapper.is-active { opacity: 1; }

/* Like the editor: make a background-image tile cover the stage cleanly. */
.hero-show__stage .collection-tile__bg-img {
  width: 100% !important; height: 100% !important;
  object-fit: cover !important; object-position: center !important; margin: 0 !important;
}

/* ---- Reduced motion: swap instantly, no crossfade ------------------------ */
@media (prefers-reduced-motion: reduce) {
  .hero-show__stage > .collection-tile-wrapper { transition: none; }
}

/* ---- Small screens: keep the full grid, just tighten the gaps ------------ */
@media (max-width: 480px) {
  .hero-show { gap: 10px; }
}