/* Story Wall demo (/demo/story-wall/).
   DEMO PARITY — Production reference: assets/css/client-slideshow.css
   (.live-event-slideshow-page / .live-story-wall-page / .client-slideshow-tv-display rules).
   Everything a viewer sees on the wall (tile shapes, gaps, caption styles, poster overlays,
   control bar, icons, fonts and colours) uses the real values. scripts/demo-gallery-parity-qa.js
   cascades both stylesheets at phone and desktop widths and fails when they differ, so update
   this file whenever the real Story Wall changes. */
@font-face{font-family:'PhotoUpload Comic';src:url('../fonts/ComicNeue-Regular.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}

/* Demo page around the screen */
.demo-wall-page{background:#f5f7f4;color:#173d33}
.demo-wall-main{width:min(1160px,calc(100% - 32px));margin:36px auto 70px}
.demo-wall-intro{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:22px}
.demo-wall-intro>div{max-width:720px}
.demo-wall-intro h1{margin:4px 0 9px;font:700 clamp(2rem,4vw,3.5rem)/1.07 'Fraunces',Georgia,serif}
.demo-wall-intro p:last-child{margin:0;color:#536860;line-height:1.55}
.demo-wall-tools{display:grid;grid-template-columns:220px 1fr;gap:24px;align-items:start;margin:25px 0;padding:22px;border:1px solid #dce5df;border-radius:16px;background:#fff}
.demo-wall-tools strong{font-size:1.15rem}
.demo-wall-tools p{margin:5px 0;color:#536860;line-height:1.45}
.demo-wall-tools form{display:flex;flex-wrap:wrap;align-items:end;gap:10px}
.demo-wall-tools label{display:grid;flex:1 1 170px;gap:6px;font-size:.8rem;font-weight:800}
.demo-wall-tools input{width:100%;min-height:42px;border:1px solid #ccd9d1;border-radius:9px;padding:8px 10px;font:inherit}
.demo-wall-tools .demo-wall-file{flex:1 1 210px}
.demo-wall-tools input[type=file]{padding:8px;font-size:.75rem}
.demo-wall-status{flex:1 0 100%;font-size:.82rem}
.demo-wall-status.is-error{color:#a02837}
.demo-wall-explain{max-width:770px;margin:38px auto;text-align:center}
.demo-wall-explain h2{font:700 1.8rem 'Fraunces',Georgia,serif}
.demo-wall-explain p{color:#526960;line-height:1.55}
.demo-wall-explain a{font-weight:800;color:#1c6753}

/* The screen. --wall-background is the Story Wall colour setting (real: wall_background). */
.demo-wall-frame{--wall-background:#000;position:relative;aspect-ratio:16/9;overflow:hidden;border:10px solid #17221e;border-radius:18px;background:var(--wall-background,#000000);box-shadow:0 22px 48px #0c2b2133}
.demo-wall-frame:fullscreen{width:100vw;height:100vh;max-width:none;border:0;border-radius:0}

/* Wall: columns, lanes and tiles (real: .slideshow-wall-layer / -column / -track / -tile). */
.demo-wall-columns{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--wall-gap,clamp(6px,.65vw,12px));height:100%;padding:var(--wall-gap,clamp(6px,.65vw,12px));box-sizing:border-box;background:var(--wall-background,#000000)}
.demo-wall-lane{width:100%;height:100%;min-width:0;overflow:hidden;container-type:inline-size}
.demo-wall-track{display:flex;flex-direction:column;animation:demo-wall-flow var(--lane-time,160s) linear infinite;animation-play-state:running;will-change:transform;backface-visibility:hidden;transform:translateZ(0)}
.demo-wall-frame.is-paused .demo-wall-track{animation-play-state:paused}
@keyframes demo-wall-flow{to{transform:translateY(-50%)}}
/* Two identical groups make the seamless loop; the space after each group equals the lane gap. */
.demo-wall-group{display:flex;flex-direction:column;gap:var(--wall-gap,clamp(6px,.65vw,12px));padding-bottom:var(--wall-gap,clamp(6px,.65vw,12px))}
.demo-wall-tile{position:relative;flex:none;min-height:0;overflow:hidden;border-radius:5px;background:rgba(255,255,255,.08);contain:layout paint style}
/* Each tile keeps its real shape: demo-story-wall.js sets the photo or video's own aspect ratio. */
.demo-wall-tile img{display:block;width:100%;height:auto;aspect-ratio:auto;object-fit:contain;object-position:center;background-color:var(--wall-background,#000000)}
/* Until its metadata arrives a video holds the real 4:3 placeholder, then takes its own shape. */
.demo-wall-tile video{display:block;width:100%;height:auto;aspect-ratio:4 / 3;object-fit:contain;background-color:var(--wall-background,#000000);position:relative;z-index:1}

/* Contributor name on the photo (real: name-only .slideshow-wall-attribution). */
.demo-wall-caption{position:absolute;z-index:3;left:clamp(3px,3cqi,6px);bottom:clamp(3px,3cqi,6px);right:auto;display:block;box-sizing:border-box;width:auto;max-width:calc(100% - 12px);max-height:45%;padding:clamp(2px,2.4cqi,5px) clamp(3px,3.4cqi,7px);border-radius:clamp(3px,3cqi,6px);overflow:hidden;text-align:left;color:#fff;background:rgba(8,29,26,.7);box-shadow:0 2px 9px rgba(0,0,0,.12);font:600 clamp(4px,4.2cqi,13px)/1.2 'DM Sans',system-ui,sans-serif}
.demo-wall-caption strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#fff;font-size:inherit}
.demo-wall-caption em{display:block}
/* Guest caption docked under the photo (real: below_image attribution with a caption). */
.demo-wall-caption.has-caption{position:relative;left:auto;bottom:auto;display:block;width:100%;max-width:none;max-height:none;padding:clamp(2px,1.5cqi,8px) clamp(2px,2cqi,10px);border-radius:0 0 5px 5px;overflow:hidden;text-align:left;color:#111;background:#fff;box-shadow:none}
.demo-wall-caption.has-caption strong{display:block;color:#333;font:italic 500 clamp(4px,4.3cqi,14px)/1.2 'DM Sans',system-ui,sans-serif}
.demo-wall-caption.has-caption em{display:block;margin-top:2px;color:#111;overflow-wrap:break-word;font:700 clamp(5px,6.2cqi,21px)/1.2 'DM Sans',system-ui,sans-serif}
/* Captions off: the name returns to the photo and the caption text is hidden. */
.demo-wall-frame.hide-captions .demo-wall-caption.has-caption{position:absolute;left:6px;bottom:6px;display:block;width:auto;max-width:calc(100% - 12px);max-height:45%;padding:5px 7px;border-radius:6px;overflow:hidden;text-align:left;color:#fff;background:rgba(8,29,26,.7);box-shadow:0 2px 9px rgba(0,0,0,.12);font:600 clamp(4px,4.2cqi,13px)/1.2 'DM Sans',system-ui,sans-serif}
.demo-wall-frame.hide-captions .demo-wall-caption.has-caption strong{color:#fff;font-size:inherit}
.demo-wall-frame.hide-captions .demo-wall-caption.has-caption em{display:none}

/* Start overlay and new-photo toast (demo only). */
.demo-wall-start-overlay{position:absolute;inset:0;z-index:12;display:grid;place-items:center;padding:18px;background:#092820}
.demo-wall-start-overlay[hidden]{display:none}
.demo-wall-start-overlay>div{max-width:460px;text-align:center;color:#fff}
.demo-wall-start-overlay strong{font:700 clamp(1.25rem,2.5vw,2rem)/1.1 'Fraunces',Georgia,serif}
.demo-wall-start-overlay p{margin:12px auto 18px;line-height:1.4}
.demo-wall-toast{position:absolute;right:16px;top:16px;z-index:4;padding:10px 14px;border-radius:10px;color:#163a2e;background:#fff;opacity:0;transform:translateY(-12px);transition:opacity .3s,transform .3s;pointer-events:none}
.demo-wall-toast.is-visible{opacity:1;transform:none}

/* QR poster interludes: the real fixed 16:9 artwork with per-page overlay slots.
   Do not stretch posters across a fullscreen display of another aspect ratio.
   Production reference: .live-story-wall-page .live-poster-page and .live-event-slideshow-page .live-poster-* */
.demo-wall-poster{position:absolute;inset:0;z-index:7;display:block;padding:0;background:#0b1f18}
.demo-wall-poster[hidden]{display:none}
.demo-wall-poster-art{position:absolute;inset:auto;left:50%;top:50%;width:100%;height:auto;aspect-ratio:16/9;transform:translate(-50%,-50%);background-size:100% 100%;background-position:center;container-type:inline-size}
.demo-wall-frame:fullscreen .demo-wall-poster-art{width:min(100vw,177.77778vh);height:min(100vh,56.25vw)}
.demo-wall-qr{position:absolute;display:block;width:15.9%;height:auto;aspect-ratio:1;border:0;border-radius:0;background:#fff}
.demo-wall-poster-art[data-page="1"] .demo-wall-qr{left:42.1%;top:51.6%;width:15.9%}
.demo-wall-poster-art[data-page="2"] .demo-wall-qr{left:67.3%;top:30.7%;width:20.2%}
.demo-wall-poster-art[data-page="3"] .demo-wall-qr{left:61.3%;top:27.2%;width:22.4%}
.demo-wall-qr img,.demo-wall-qr canvas{display:block;width:100%!important;height:100%!important}
.demo-wall-poster-brand{position:absolute;z-index:4;display:flex;align-items:center;justify-content:center;gap:1cqw;min-height:0;max-width:65%;padding:0;background:transparent;color:var(--poster-overlay-colour,#08392E);text-shadow:var(--poster-overlay-shadow,none)}
.demo-wall-poster-brand img{display:block;width:5.1cqw;height:5.1cqw;object-fit:contain;border-radius:1.1cqw}
.demo-wall-poster-brand strong{max-width:none;color:inherit;font:750 2.1cqw/1.05 'DM Sans',system-ui,sans-serif;white-space:normal;overflow:hidden;overflow-wrap:anywhere}
/* As on the real posters (client-slideshow.css): the bare camera in the poster's colour, ".app" in its accent. */
.demo-wall-poster-brand .brand-mark{display:block;flex:none;width:5.1cqw;height:4.46cqw;color:inherit;background:none;border:0;border-radius:0;box-shadow:none}
.demo-wall-poster-brand .brand-mark svg{display:block;width:100%;height:100%;overflow:visible}
.demo-wall-poster-brand .brand-name-tld{color:var(--poster-accent-colour,#C49A5F)}
.demo-wall-poster-art[data-page="1"] .demo-wall-poster-brand{left:50%;top:6.7%;transform:translateX(-50%)}
.demo-wall-poster-art[data-page="2"] .demo-wall-poster-brand{left:50%;top:9.4%;transform:translateX(-50%)}
.demo-wall-poster-art[data-page="3"] .demo-wall-poster-brand{left:50%;top:3.2%;transform:translateX(-50%)}
.demo-wall-poster-event-name{position:absolute;z-index:4;bottom:auto;display:grid;place-items:center;max-width:none;padding:0;background:transparent;color:var(--poster-overlay-colour,#08392E);text-shadow:var(--poster-overlay-shadow,none);font:650 var(--poster-event-font,3cqw)/.99 'Fraunces',Georgia,serif;letter-spacing:-.035em;text-align:center;text-wrap:balance;white-space:normal;overflow:hidden}
.demo-wall-poster-event-name span{color:inherit}
.demo-wall-poster-art[data-page="1"] .demo-wall-poster-event-name{left:9%;top:17.8%;width:82%;height:16.5%;--poster-event-font:5.3cqw;white-space:nowrap}
.demo-wall-poster-art[data-page="1"] .demo-wall-poster-event-name span{min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.demo-wall-poster-art[data-page="2"] .demo-wall-poster-event-name{left:15%;top:auto;bottom:9.1%;width:70%;height:5%;--poster-event-font:1.8cqw;display:flex;align-items:center;justify-content:center;gap:1.3cqw;color:var(--poster-overlay-colour,#08392E);font:700 var(--poster-event-font,1.8cqw)/1.1 'DM Sans',system-ui,sans-serif;letter-spacing:.15em;text-transform:uppercase;white-space:nowrap}
.demo-wall-poster-art[data-page="2"] .demo-wall-poster-event-name span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.demo-wall-poster-art[data-page="3"] .demo-wall-poster-event-name{display:none}

/* Display control bar (real: .client-slideshow-tv-display .slideshow-controls). */
.demo-wall-controls{position:absolute;z-index:10;left:50%;bottom:max(18px,env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:center;width:max-content;max-width:calc(100% - 36px);gap:5px;padding:6px;border:1px solid rgba(255,255,255,.14);border-radius:999px;background:rgba(7,12,11,.72);box-shadow:0 10px 32px rgba(0,0,0,.24);transform:translateX(-50%);opacity:1;visibility:visible;transition:opacity .32s ease,visibility 0s linear}
.demo-wall-controls.is-idle{transform:translateX(-50%);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .32s ease,visibility 0s linear .32s}
.demo-wall-controls button{display:grid;place-items:center;flex:none;width:46px;min-width:46px;height:46px;min-height:46px;padding:0;border:0;border-radius:50%;color:#fff;background:rgba(255,255,255,.08);font:inherit;font-size:1rem;font-weight:750;box-shadow:none;cursor:pointer}
.demo-wall-controls button:hover,.demo-wall-controls button:focus-visible{background:rgba(255,255,255,.18)}
.demo-wall-controls button.demo-wall-play{color:#101614;background:rgba(255,255,255,.94)}
.demo-wall-controls button.demo-wall-text-control{width:46px;min-width:46px;padding:0;font-size:1.15rem}
.demo-wall-controls svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.demo-wall-controls .demo-wall-play svg{display:block;width:21px;height:21px;fill:currentColor;stroke:none}

/* Settings panel (real: .client-slideshow-tv-display.live-event-slideshow-page .slideshow-extra-controls). */
.demo-wall-settings{position:absolute;z-index:11;left:50%;bottom:84px;transform:translateX(-50%);box-sizing:border-box;width:min(360px,calc(100vw - 28px));max-height:calc(100% - 96px);overflow:auto;padding:12px;border:1px solid rgba(255,255,255,.18);border-radius:16px;background:rgba(8,13,12,.97);color:#fff;box-shadow:0 16px 48px #0006}
.demo-wall-settings[hidden]{display:none}
.demo-wall-settings header{display:flex;justify-content:space-between;align-items:center;min-height:28px;margin-bottom:8px;font-size:14px}
.demo-wall-settings header button{width:32px;min-width:32px;height:28px;min-height:28px;padding:0;border:1px solid rgba(255,255,255,.2);border-radius:50%;background:rgba(255,255,255,.08);color:#fff;font-size:20px;line-height:1;cursor:pointer}
.demo-wall-settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.demo-wall-settings-grid label{display:grid;grid-template-columns:1fr;gap:3px;min-width:0;padding:8px 10px;border:1px solid rgba(255,255,255,.16);border-radius:10px;background:rgba(255,255,255,.05);font-size:12px;line-height:16px;color:rgba(255,255,255,.7)}
.demo-wall-settings-grid select{width:100%;min-width:0;min-height:28px;height:28px;padding:2px 22px 2px 0;border:0;border-radius:0;background-color:transparent;color:#fff;font:inherit;font-size:14px;line-height:20px}
.demo-wall-settings-grid select option{color:#fff;background:#18201e}
.demo-wall-settings-grid button{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;min-width:0;min-height:36px;height:36px;margin:0;padding:6px 10px;border:1px solid rgba(255,255,255,.2);border-radius:10px;background:rgba(255,255,255,.06);color:#fff;font:inherit;font-size:14px;line-height:20px;cursor:pointer}
.demo-wall-settings-grid button[aria-pressed="true"]{background:rgba(228,190,112,.2);border-color:#e4be70}

/* Small screens: only the page around the screen changes; the wall itself keeps the real values. */
@media(max-width:750px){
 .demo-wall-intro{display:block}
 .demo-wall-intro>.button{margin-top:16px}
 .demo-wall-frame{border-width:5px}
 .demo-wall-tools{grid-template-columns:1fr}
 .demo-wall-start-overlay{padding:8px}
 .demo-wall-start-overlay strong{font-size:clamp(.95rem,4vw,1.3rem)}
 .demo-wall-start-overlay p{margin:4px auto 7px;font-size:.65rem}
 .demo-wall-start-overlay .button{padding:5px 10px;font-size:.7rem}
 /* A phone-sized 16:9 screen is short: the panel uses the space above the control bar and scrolls. */
 .demo-wall-settings{top:6px;bottom:84px;max-height:none}
}
@media(max-width:760px){
 /* Real: .slideshow-controls .slideshow-icon-control svg at the same breakpoint. */
 .demo-wall-controls svg{width:19px;height:19px}
}
@media(prefers-reduced-motion:reduce){.demo-wall-track{animation:none}}

/* A guest's written message, as on the real wall (assets/css/client-slideshow.css .slideshow-message-card). Sized to its column, like the captions, so it shrinks with the wall on a phone. */
.demo-wall-message{display:flex;flex-direction:column;justify-content:center;gap:.7em;min-height:clamp(40px,90cqi,220px);padding:clamp(4px,7cqi,22px);color:#f7f0e3;background:color-mix(in srgb,#1d4a3e 55%,#151413);border:1px solid rgba(255,255,255,.06);font-size:clamp(4px,4.8cqi,17px)}
.demo-wall-message p{position:relative;margin:0;font-family:var(--display,Georgia,serif);font-size:1.25em;line-height:1.3;overflow-wrap:break-word}
.demo-wall-message-mark{position:absolute;top:-.1em;right:.12em;color:rgba(216,182,124,.34);font:400 5em/1 var(--display,Georgia,serif);pointer-events:none}
.demo-wall-message-by{position:relative;color:#d8b67c;font-weight:700;font-size:.78em;letter-spacing:.03em}