/* ============================================================
   Photo Slideshow block.
   Cover: the photo fills the block (or shows whole, see below), text and
   controls over it.
   Framed: each photo whole, with a bar underneath in the theme's colours.
   ============================================================ */

.pp-ss {
  --pp-ss-fade: 1.2s;
  position: relative;
  container-type: inline-size;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
}

/* Heights. A theme can set --pp-ss-screen, e.g. to subtract its top bar. */
.pp-ss--h-screen { height: var(--pp-ss-screen, calc(100dvh - var(--admin-bar, 0px))); }
.pp-ss--h-tall   { height: min(80dvh, 960px); }
.pp-ss--cover.pp-ss--h-16-9 { aspect-ratio: 16 / 9; }
.pp-ss--cover.pp-ss--h-3-2  { aspect-ratio: 3 / 2; }
.pp-ss--framed.pp-ss--h-16-9 .pp-ss__stage { aspect-ratio: 16 / 9; }
.pp-ss--framed.pp-ss--h-3-2  .pp-ss__stage { aspect-ratio: 3 / 2; }
/* The editor canvas: a fixed height, since the window height means little there. */
.pp-ss--preview.pp-ss--h-screen, .pp-ss--preview.pp-ss--h-tall { height: 560px; }
.pp-ss:fullscreen { height: 100vh; width: 100vw; aspect-ratio: auto; }

/* Immersive: pinned to the window and the page doesn't scroll. A theme keeps
   its sidebar / top bar free with --pp-ss-inset-left / --pp-ss-inset-top. */
.pp-ss--immersive {
  --pp-ss-top: 0px;
  position: fixed;
  top: calc(var(--pp-ss-top) + var(--pp-ss-inset-top, 0px));
  right: 0; bottom: 0;
  left: var(--pp-ss-inset-left, 0px);
  width: auto; height: auto; max-width: none !important; margin: 0 !important;
  z-index: 100;
  touch-action: none; /* swipes change photos; nothing to scroll */
}
.admin-bar .pp-ss--immersive { --pp-ss-top: var(--admin-bar, 32px); }
@media (max-width: 782px) { .admin-bar .pp-ss--immersive { --pp-ss-top: var(--admin-bar, 46px); } }
html:has(.pp-ss--immersive), body:has(.pp-ss--immersive) { overflow: hidden; overscroll-behavior: none; }
.pp-ss--immersive:fullscreen { inset: 0; }
/* Framed normally takes its side margins from the page around it; pinned, it needs its own. */
.pp-ss--immersive.pp-ss--framed { background: var(--color-bg, #fff); }
.pp-ss--immersive.pp-ss--framed .pp-ss__bar { padding-inline: var(--container-pad, 24px); }
.pp-ss--framed:fullscreen { background: var(--color-bg); color: var(--color-text); }

/* Slides stack and cross-fade. */
.pp-ss__stage { position: relative; overflow: hidden; }
.pp-ss--cover .pp-ss__stage, .pp-ss__slide, .pp-ss__shade { position: absolute; inset: 0; }
.pp-ss .pp-ss__slide { margin: 0; } /* Beats themes' figure spacing. */
.pp-ss__slide { opacity: 0; visibility: hidden; transition: opacity var(--pp-ss-fade) ease, visibility 0s var(--pp-ss-fade); }
.pp-ss__slide.is-active { opacity: 1; visibility: visible; transition: opacity var(--pp-ss-fade) ease; z-index: 1; }
.pp-ss__slide img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }

/* ── Cover ── */
.pp-ss--cover { background: #0b0b0b; color: #fff; }
.pp-ss--cover .pp-ss__slide { background: var(--ph); }
.pp-ss--cover .pp-ss__slide img { transform-origin: var(--ox, 50%) var(--oy, 50%); }
/* Slow drift; the script picks a direction per photo. */
.pp-ss--motion .pp-ss__slide.is-active img,
.pp-ss--motion .pp-ss__slide.is-leaving img { animation: pp-ss-drift var(--drift, 9s) linear forwards; }
.pp-ss--motion[data-paused] .pp-ss__slide img { animation-play-state: paused; }
@keyframes pp-ss-drift { from { transform: scale(var(--s0, 1.02)); } to { transform: scale(var(--s1, 1.12)); } }
.pp-ss__shade { z-index: 2; pointer-events: none; transition: opacity .8s;
  background:
    linear-gradient(to top, rgba(0,0,0,.7), rgba(0,0,0,.2) 32%, transparent 55%),
    linear-gradient(to bottom, rgba(0,0,0,.35), transparent 20%); }

/* Cover, whole photo: a blurred copy of it fills the rest. */
.pp-ss__ambient { position: absolute; inset: -60px; background: center / cover no-repeat; filter: blur(40px) saturate(1.3) brightness(.55); opacity: 0; transition: opacity .6s; }
.pp-ss[data-fit] .pp-ss__ambient { opacity: 1; }
.pp-ss[data-fit] .pp-ss__slide img { object-fit: contain; top: 7%; left: 5%; width: 90%; height: 68%; filter: drop-shadow(0 20px 50px rgba(0,0,0,.5)); }
.pp-ss[data-fit] .pp-ss__slide.is-active img { animation: none; }

/* Match photos to the screen: a photo whose shape is far from the block's
   (slideshow.js marks it .is-whole) shows whole over a blurred copy; the
   others fill the block. Nothing shows until the script has picked the set. */
.pp-ss--match .pp-ss__slide.is-whole .pp-ss__ambient { opacity: 1; }
.pp-ss--match .pp-ss__slide.is-whole img { object-fit: contain; top: 6%; left: 5%; width: 90%; height: 66%; filter: drop-shadow(0 20px 50px rgba(0,0,0,.5)); animation: none; }
.pp-ss--match.pp-ss--autohide .pp-ss__slide.is-whole img { top: 5%; height: 90%; }

.pp-ss--cover .pp-ss__bar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  display: flex; align-items: flex-end; gap: 16px 28px;
  padding: 0 clamp(18px, 4cqi, 56px) clamp(20px, 4cqi, 44px);
  transition: transform .5s cubic-bezier(.2,.8,.2,1), opacity .8s;
}
.pp-ss--cover .pp-ss__caption { flex: 1; min-width: 0; gap: 10px; }
.pp-ss--cover .pp-ss__title { font-size: clamp(1.6rem, 5.4cqi, 5.5rem); font-weight: 600; letter-spacing: -.035em; line-height: .98; text-wrap: balance; text-shadow: 0 2px 30px rgba(0,0,0,.35); }
.pp-ss--cover .pp-ss__place { font-size: .75rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; display: flex; align-items: center; gap: 12px; color: rgba(255,255,255,.85); }
.pp-ss--cover .pp-ss__place:not(:empty)::before { content: ""; width: 28px; height: 1px; background: currentColor; }
.pp-ss--cover .pp-ss__exif, .pp-ss--cover .pp-ss__count { color: rgba(255,255,255,.62); }
.pp-ss--cover .pp-ss__count b { color: #fff; }
.pp-ss--cover .pp-ss__dots { padding-bottom: 17px; }
.pp-ss--cover .pp-ss__btn { background: rgba(255,255,255,.1); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.pp-ss--cover .pp-ss__btn:hover { background: rgba(255,255,255,.22); }
.pp-ss--cover .pp-ss__btn[aria-pressed="true"] { background: #fff; color: #000; }
.pp-ss--cover .pp-ss__link { background: #fff; color: #000; }
.pp-ss--cover .pp-ss__link:hover { color: #000; }
.pp-ss--cover .pp-ss__progress { position: absolute; top: 16px; left: clamp(18px, 4cqi, 56px); right: clamp(18px, 4cqi, 56px); z-index: 3; }
.pp-ss--cover .pp-ss__progress span { background: rgba(255,255,255,.25); }
.pp-ss--cover .pp-ss__progress i { background: #fff; }
.pp-ss--cover .pp-ss__edge { color: #fff; }
.pp-ss--cover .pp-ss__edge svg { filter: drop-shadow(0 2px 8px rgba(0,0,0,.5)); }
.pp-ss--cover[data-strip] .pp-ss__bar { transform: translateY(-96px); }

/* Title, place and camera line rise in with each photo. */
.pp-ss--cover .pp-ss__caption.is-in > * { animation: pp-ss-rise .9s cubic-bezier(.2,.8,.2,1) both; }
.pp-ss--cover .pp-ss__caption.is-in > :nth-child(2) { animation-delay: .1s; }
.pp-ss--cover .pp-ss__caption.is-in > :nth-child(3) { animation-delay: .2s; }
@keyframes pp-ss-rise { from { opacity: 0; transform: translateY(14px); } }

/* Cover, whole photo (setting): never cropped. Around it a blurred copy of the
   photo or a plain colour, light or dark with the page (the theme's
   data-theme="dark"); text and buttons follow in the page's text colour. */
.pp-ss--whole {
  --pp-ss-fill: var(--pp-ss-fill-light, var(--color-bg, #fafaf9));
  --pp-ss-ink: var(--color-text, #0c0c0c);
  --pp-ss-drop: rgba(0,0,0,.18);
  background: var(--pp-ss-fill); color: var(--pp-ss-ink);
}
[data-theme="dark"] .pp-ss--whole {
  --pp-ss-fill: var(--pp-ss-fill-dark, var(--color-bg, #0a0a0a));
  --pp-ss-ink: var(--color-text, #f0f0f0);
  --pp-ss-drop: rgba(0,0,0,.5);
}
.pp-ss--whole .pp-ss__slide { background: none; }
.pp-ss--whole .pp-ss__shade { display: none; }
.pp-ss--whole .pp-ss__ambient { opacity: .45; filter: blur(40px) saturate(1.2) brightness(1.15); }
[data-theme="dark"] .pp-ss--whole .pp-ss__ambient { opacity: 1; filter: blur(40px) saturate(1.3) brightness(.55); }
/* The photo stands just above the controls (--pp-ss-bar: their height, set by
   the script); spare room goes above it, not between photo and controls. */
.pp-ss--whole .pp-ss__slide img {
  --pp-ss-top: clamp(24px, 6%, 64px);
  --pp-ss-under: calc(var(--pp-ss-bar, 25%) + 8px);
  top: auto; bottom: var(--pp-ss-under); left: 0; right: 0; margin-inline: auto;
  width: auto; height: auto; max-width: 90%; max-height: calc(100% - var(--pp-ss-top) - var(--pp-ss-under));
  object-fit: contain; filter: drop-shadow(0 20px 50px var(--pp-ss-drop));
}
/* With auto-hide the controls come and go over the photo, so it doesn't keep
   room for them: centred in the full height, with a soft fade in the
   background colour behind the controls while they show. */
.pp-ss--whole.pp-ss--autohide .pp-ss__slide img { --pp-ss-under: var(--pp-ss-top); top: var(--pp-ss-top); margin-block: auto; }
.pp-ss--whole.pp-ss--autohide .pp-ss__shade {
  display: block;
  background: linear-gradient(to top, color-mix(in srgb, var(--pp-ss-fill) 85%, transparent), transparent calc(var(--pp-ss-bar, 25%) + 48px));
}
.pp-ss--whole.pp-ss--autohide[data-idle] .pp-ss__shade { opacity: 0; }
.pp-ss--whole .pp-ss__title { text-shadow: none; }
.pp-ss--whole .pp-ss__place { color: inherit; opacity: .8; }
.pp-ss--whole .pp-ss__exif, .pp-ss--whole .pp-ss__count { color: inherit; opacity: .65; }
.pp-ss--whole .pp-ss__count b { color: inherit; }
.pp-ss--whole .pp-ss__btn { background: color-mix(in srgb, currentColor 10%, transparent); }
.pp-ss--whole .pp-ss__btn:hover { background: color-mix(in srgb, currentColor 20%, transparent); }
.pp-ss--whole .pp-ss__btn[aria-pressed="true"], .pp-ss--whole .pp-ss__link, .pp-ss--whole .pp-ss__link:hover { background: var(--pp-ss-ink); color: var(--pp-ss-fill); }
.pp-ss--whole .pp-ss__progress span { background: color-mix(in srgb, currentColor 25%, transparent); }
.pp-ss--whole .pp-ss__progress i { background: currentColor; }
.pp-ss--whole .pp-ss__edge { color: inherit; }
.pp-ss--whole .pp-ss__edge svg { filter: none; }
.pp-ss--whole .pp-ss__strip { background: linear-gradient(transparent, color-mix(in srgb, var(--pp-ss-fill) 85%, transparent)); }
.pp-ss--whole .pp-ss__strip button[aria-selected="true"] { outline-color: currentColor; }

/* ── Framed ── */
.pp-ss--framed { display: flex; flex-direction: column; color: var(--color-text); }
.pp-ss--framed.pp-ss--h-screen .pp-ss__stage, .pp-ss--framed.pp-ss--h-tall .pp-ss__stage,
.pp-ss--framed:fullscreen .pp-ss__stage { flex: 1; min-height: 0; aspect-ratio: auto; }
.pp-ss--framed .pp-ss__slide img { object-fit: contain; }
.pp-ss--framed .pp-ss__bar { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 16px; padding: 14px 0 18px; }
.pp-ss--framed:fullscreen .pp-ss__bar { padding-inline: 24px; }
.pp-ss--framed .pp-ss__caption { gap: 2px; }
.pp-ss--framed .pp-ss__title { font-weight: 600; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-ss--framed .pp-ss__place, .pp-ss--framed .pp-ss__exif { font-size: .8125rem; color: var(--color-text-muted); }
.pp-ss--framed .pp-ss__count { color: var(--color-text-muted); }
.pp-ss--framed .pp-ss__dots { grid-column: 2; }
.pp-ss--framed .pp-ss__controls { grid-column: 3; }
.pp-ss--framed .pp-ss__btn { background: var(--color-chip); }
.pp-ss--framed .pp-ss__btn:hover { background: var(--color-hover); }
.pp-ss--framed .pp-ss__btn[aria-pressed="true"] { background: var(--color-btn-active); color: var(--color-btn-text-active); }
.pp-ss--framed .pp-ss__link, .pp-ss--framed .pp-ss__link:hover { color: var(--color-text); }
.pp-ss--framed .pp-ss__link { background: var(--color-chip); }
.pp-ss--framed .pp-ss__link:hover { background: var(--color-hover); }
.pp-ss--framed .pp-ss__progress { margin-top: 12px; }
.pp-ss--framed .pp-ss__progress span { background: var(--color-border); }
.pp-ss--framed .pp-ss__progress i { background: var(--color-text); }
.pp-ss--framed .pp-ss__edge span, .pp-ss--framed .pp-ss__edge svg { color: #fff; }
.pp-ss--framed .pp-ss__edge svg { width: 44px; height: 44px; padding: 9px; border-radius: 99px; background: rgba(0,0,0,.35); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.pp-ss--framed .pp-ss__strip { background: linear-gradient(transparent, rgba(0,0,0,.55)); }

/* ── Shared parts ── */
.pp-ss__caption { display: flex; flex-direction: column; min-width: 0; }
.pp-ss [hidden] { display: none !important; } /* Beats display: flex on switched-off parts. */
.pp-ss__exif { font-size: .8125rem; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.pp-ss__place:empty, .pp-ss__exif:empty { display: none; }
.pp-ss [hidden] { display: none !important; }

.pp-ss__controls { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex: none; }
.pp-ss__count { font-size: .8125rem; font-variant-numeric: tabular-nums; letter-spacing: .06em; margin-right: 8px; white-space: nowrap; }
.pp-ss__count b { font-size: 1.375rem; font-weight: 500; letter-spacing: -.02em; }
.pp-ss__btn { width: 40px; height: 40px; flex: none; padding: 0; border: 0; border-radius: 99px; display: grid; place-items: center; color: inherit; cursor: pointer; transition: background .2s; }
.pp-ss__btn svg { display: block; }
.pp-ss__icon-play, [data-paused-user] .pp-ss__icon-pause { display: none; }
[data-paused-user] .pp-ss__icon-play { display: block; }
.pp-ss .pp-ss__link { height: 40px; display: inline-flex; align-items: center; gap: 8px; padding: 0 18px; margin-left: 4px; border-radius: 99px; font-size: .875rem; font-weight: 600; text-decoration: none; white-space: nowrap; transition: gap .2s, background .2s; }
.pp-ss__link:hover { gap: 12px; }

.pp-ss__dots { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; max-width: 50cqi; }
.pp-ss__dots button { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 99px; background: currentColor; opacity: .3; cursor: pointer; transition: width .3s ease, opacity .3s ease; }
.pp-ss__dots button:hover { opacity: .6; }
.pp-ss__dots button[aria-selected="true"] { width: 20px; opacity: .95; }

.pp-ss__progress { display: flex; gap: 4px; }
.pp-ss__progress span { flex: 1; height: 2px; border-radius: 2px; overflow: hidden; }
.pp-ss__progress i, .pp-ss__timer i { display: block; height: 100%; width: 100%; transform: scaleX(0); transform-origin: left; }
.pp-ss__progress .is-done i { transform: none; }
.pp-ss__progress .is-now i, .pp-ss__timer.is-running i { animation: pp-ss-fill var(--pp-ss-interval, 6s) linear forwards; }
.pp-ss[data-paused] .pp-ss__progress i, .pp-ss[data-paused] .pp-ss__timer i { animation-play-state: paused; }
@keyframes pp-ss-fill { to { transform: none; } }
/* The timer is the slideshow's clock; with dots it also shows as a thin line. */
.pp-ss__timer { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; z-index: 4; pointer-events: none; }
.pp-ss__timer i { background: currentColor; opacity: .5; }
.pp-ss__timer.is-silent, .pp-ss[data-paused] .pp-ss__timer { opacity: 0; }

.pp-ss__edge { position: absolute; top: 15%; bottom: 25%; z-index: 3; width: 18%; border: 0; padding: 0 20px; background: none; display: flex; align-items: center; opacity: 0; transition: opacity .3s; cursor: pointer; }
.pp-ss--framed .pp-ss__edge { top: 0; bottom: 0; }
.pp-ss__edge svg { width: 34px; height: 34px; }
.pp-ss__edge--prev { left: 0; cursor: w-resize; }
.pp-ss__edge--next { right: 0; justify-content: flex-end; cursor: e-resize; }
.pp-ss__edge:hover, .pp-ss__edge:focus-visible { opacity: .9; }

.pp-ss__strip { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; display: flex; gap: 8px; align-items: center; height: 96px; padding: 0 clamp(18px, 4cqi, 56px) 16px; overflow-x: auto; scrollbar-width: none; transform: translateY(110%); transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.pp-ss[data-strip] .pp-ss__strip { transform: none; }
.pp-ss__strip button { flex: none; height: 60px; aspect-ratio: 3 / 2; padding: 0; border: 0; border-radius: 6px; overflow: hidden; background: var(--ph); opacity: .5; cursor: pointer; outline: 2px solid transparent; outline-offset: 2px; transition: opacity .25s, outline-color .25s, transform .25s; }
.pp-ss__strip button:hover { opacity: .85; transform: translateY(-2px); }
.pp-ss__strip button[aria-selected="true"] { opacity: 1; outline-color: #fff; }
.pp-ss__strip img { width: 100%; height: 100%; object-fit: cover; }

.pp-ss__empty { padding: 24px; margin: 0; color: var(--color-text-muted); }

/* Auto-hide: after a few still seconds only the photo is left. */
.pp-ss[data-idle] .pp-ss__bar, .pp-ss[data-idle] .pp-ss__progress, .pp-ss[data-idle] .pp-ss__edge { opacity: 0; pointer-events: none; }
.pp-ss[data-idle] .pp-ss__shade { opacity: .4; }
.pp-ss[data-idle], .pp-ss[data-idle] * { cursor: none !important; }
.pp-ss__progress { transition: opacity .8s; }

/* Narrow blocks and phones. */
@container (max-width: 640px) {
  .pp-ss--cover .pp-ss__bar { flex-direction: column; align-items: stretch; }
  .pp-ss--cover .pp-ss__dots { order: -1; justify-content: flex-start; padding: 0; max-width: none; }
  .pp-ss--cover .pp-ss__controls .pp-ss__count { margin-right: auto; }
  .pp-ss--framed .pp-ss__bar { grid-template-columns: minmax(0, 1fr) auto; }
  .pp-ss--framed .pp-ss__dots { display: none; }
  .pp-ss--framed .pp-ss__controls { grid-column: 2; }
  .pp-ss [data-pp-full] { display: none; }
  .pp-ss__edge { top: 10%; bottom: 35%; width: 30%; }
  .pp-ss__edge svg { display: none; }
}
@media (hover: none) {
  .pp-ss__edge svg { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pp-ss { --pp-ss-fade: .01s; }
  .pp-ss--motion .pp-ss__slide.is-active img, .pp-ss--motion .pp-ss__slide.is-leaving img,
  .pp-ss--cover .pp-ss__caption.is-in > * { animation: none; }
}

/* Short screens (phones held sideways): one compact line of controls. */
@media (max-height: 500px) {
  .pp-ss--cover .pp-ss__bar { flex-direction: row; align-items: flex-end; padding-bottom: 14px; }
  .pp-ss--cover .pp-ss__caption { gap: 4px; }
  .pp-ss--cover .pp-ss__title { font-size: clamp(1.15rem, 3.4cqi, 2rem); }
  .pp-ss--cover .pp-ss__dots { display: none; }
  .pp-ss--cover .pp-ss__controls .pp-ss__count { margin-right: 0; }
}