/* Digital signage page. Overrides and extends theme.css. */

/* Hero tint: warm amber and pink */
.page-digital-signage { --hero-a: var(--amber-wash); --hero-b: var(--pink-wash);  --ring-a: var(--ring-gold); --ring-b: var(--ring-coral); }

/* The TV picture under the hero text (a glow shows around it, so no fade) */
.page-visual { width: 100%; max-width: 62rem; height: auto; margin: var(--space-5) auto 0; }

/* The small venue cards carry a picture along the bottom edge */
.cards-small.cards-three p { margin-bottom: var(--space-3); }
.cards-small.cards-three .card-image { border-radius: 0; margin-bottom: calc(var(--pad) * -1); }

/* The hero picture is a template shown on a thin-bezel display (a signage screen) with a warm glow.
   The bezel is drawn with box-shadow rings, not a border, so the picture area stays exactly 16:9 and nothing is cropped. */
.slideshow-wrap { --bezel: clamp(0.4rem, 0.9vw, 0.7rem); padding: var(--bezel); }
.tv {
  border-radius: 0.2rem;
  box-shadow:
    0 0 0 var(--bezel) var(--ink),
    0 0 0 calc(var(--bezel) + 1px) color-mix(in srgb, var(--white) 28%, transparent),
    0 2.5rem 6rem -1rem color-mix(in srgb, var(--hero-b) 90%, transparent),
    0 1rem 3rem -1rem color-mix(in srgb, var(--ink) 50%, transparent);
}

/* Template gallery: screens in rounded frames with a caption under each */
.template-grid { display: grid; gap: var(--gutter); grid-template-columns: 1fr; list-style: none; margin: 0; padding: 0; }
.template-grid figure { margin: 0; }
.template-grid img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 3px; background: var(--ink); box-shadow: 0 0.75rem 2rem -1rem color-mix(in srgb, var(--ink) 45%, transparent); }
.template-grid figcaption { margin-top: var(--space-1); font-size: 0.9rem; font-weight: 500; }
@container content (min-width: 36rem) {
  .template-grid { grid-template-columns: repeat(2, 1fr); }
}
@container content (min-width: 60rem) {
  .template-grid { grid-template-columns: repeat(4, 1fr); }
}

/* Slideshow in the TV: five template screens that cross-fade (CSS only, no JavaScript).
   Each slide shows for about 5 seconds and the whole loop takes 25 seconds.
   The new slide fades in on top while the old one stays solid underneath, so there is no dip in brightness.
   Without animation (reduced motion, or an older browser) it just shows the first slide. */
.slideshow { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.slideshow .slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; z-index: 1; }
.slideshow .slide:first-child { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .slideshow .slide { animation: slide-show 25s linear infinite both; }
  .slideshow .slide:nth-child(1) { animation-delay: -0.75s; }
  .slideshow .slide:nth-child(2) { animation-delay: 4.25s; }
  .slideshow .slide:nth-child(3) { animation-delay: 9.25s; }
  .slideshow .slide:nth-child(4) { animation-delay: 14.25s; }
  .slideshow .slide:nth-child(5) { animation-delay: 19.25s; }
  /* Progress bar under the TV: fills over the 5 s each slide is shown, then restarts as the next slide lands */
  .slideshow-wrap { position: relative; padding-bottom: calc(var(--bezel) + 1.75rem); }
  .slideshow-wrap::before, .slideshow-wrap::after { content: ""; position: absolute; left: 37.5%; bottom: 0.5rem; height: 0.4rem; border-radius: 1rem; }
  .slideshow-wrap::before { right: 37.5%; background: color-mix(in srgb, var(--ink) 15%, transparent); }
  .slideshow-wrap::after { width: 25%; background: var(--ink); transform-origin: left; animation: slide-progress 5s linear infinite; }
  @keyframes slide-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  @keyframes slide-show {
    0%      { opacity: 0; z-index: 2; }
    3%      { opacity: 1; z-index: 2; }
    3.01%   { opacity: 1; z-index: 1; }
    23%     { opacity: 1; z-index: 1; }
    23.01%  { opacity: 0; z-index: 1; }
    100%    { opacity: 0; z-index: 1; }
  }
}