/* jbl showcase — landing-only styles: equipment photo cards and the promo
   gallery carousel. Loaded after main.css; tokens come from there. */

/* ---------- equipment cards ----------
   Official press photography is cut out on white, so each photo sits on a plain
   white plate with a hairline rule — no gradient, tint or glow behind it. */
.gear-grid { align-items: stretch; }
.gear-card { display: flex; flex-direction: column; }
.gear-photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .75rem;
}
.gear-card h3 { margin-top: 1rem; }
.gear-facts { color: var(--muted); font-size: .92rem; margin: 0 0 .75rem; }
.gear-link { margin: auto 0 0; }

/* Spec-page lead photograph — same plain white plate as the gear cards. */
.specs-lead {
  display: block;
  width: min(520px, 100%);
  margin-inline: auto;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(.75rem, 2vw, 1.5rem);
}

/* ---------- promo gallery carousel ---------- */
.carousel-track {
  position: relative; /* slide.offsetLeft is measured against the track */
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;   /* browser easing for the 5s autoplay steps */
  /* no visible scrollbar — buttons, counter, swipe and autoplay are the affordance */
  scrollbar-width: none;
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-slide {
  scroll-snap-align: start;
  aspect-ratio: 4 / 3;
}
@media (min-width: 720px) {
  .carousel-slide { aspect-ratio: 16 / 9; }
}
.carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-lg);
  background: #000; /* press renders sit on black — hide letterbox seams */
}
/* Portrait render: show the whole speaker; its pure-black backdrop blends
   into the slide background, so the letterboxing is invisible. */
.carousel-slide.is-contain img { object-fit: contain; }
.car-ui {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  margin-top: .75rem;
}
.car-btn {
  min-width: 44px;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}
.car-btn:hover:not(:disabled) { border-color: var(--muted); }
.car-btn:disabled { opacity: .35; cursor: default; }
.car-play { font-size: 1rem; }
.car-play.is-paused { color: var(--accent-deep); border-color: var(--accent-deep); }
.car-count {
  margin: 0;
  min-width: 4.5ch;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: .95rem;
  font-variant-numeric: tabular-nums;
}
.promo-credit { color: var(--muted); font-size: .85rem; margin: .9rem 0 0; }

/* ---------- motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .carousel-track { scroll-behavior: auto; }
}