/* ---------- Templates showcase (peeking carousel, true relative scale) ----------
   One custom property, --tpl-in (CSS px per physical inch), drives every image width.
   --tpl-gap is the horizontal space between the active card and its peeking neighbours. */
:root { --tpl-in: 180px; --tpl-gap: 24px; }

.tpl-carousel { display: grid; justify-items: center; gap: 24px; }

.tpl-stage {
  position: relative;
  width: 100%;
  height: calc(var(--tpl-in) * 3.4); /* tall enough for the stacked bread pair and the chalkboard label */
  background: var(--panel);
  border-radius: var(--r-card);
  overflow: hidden; /* clips the peeking neighbours at the panel edge */
}

.tpl-img {
  position: absolute;
  top: 50%;
  left: 0;
  width: calc(var(--tpl-in) * var(--w));
  height: auto;
  transition: transform 250ms ease, opacity 250ms ease;
}
@media (prefers-reduced-motion: reduce) {
  .tpl-img { transition: none; }
}

.tpl-img[data-state="active"] { opacity: 1; z-index: 2; }
.tpl-img[data-state="prev"],
.tpl-img[data-state="next"] { opacity: 0.45; cursor: pointer; }
.tpl-img[data-state="hidden"] { visibility: hidden; opacity: 0; }

.tpl-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 24px;
}
.tpl-status {
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  min-width: 12ch;
  text-align: center;
}

.tpl-captions { display: grid; width: 100%; }
.tpl-caption {
  margin-top: 16px;
  text-align: center;
  color: var(--muted);
}

#templates .note { text-align: center; }

@media (max-width: 768px) {
  /* Narrow the physical-inch unit so the widest label (4.2") still fits the phone width,
     leaving room for the peeking neighbours at the panel edges. Margin raised from 80px to
     120px on 2026-09-17: with two 4.2" cards (peach, pixel) now adjacent in the lineup, 80px
     left only 1.5-8.5px of peek when either was active, under the 16px floor. */
  :root { --tpl-in: calc((100vw - 120px) / 4.2); --tpl-gap: 16px; }

  /* Status line on its own row above Previous/Next, so neither button is clipped at narrow widths. */
  .tpl-controls {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .tpl-status {
    grid-column: 1 / -1;
    order: -1;
    min-width: 0;
    text-align: center;
  }
  .tpl-controls [data-tpl-prev],
  .tpl-controls [data-tpl-next] {
    width: 100%;
  }
}