/**
 * Page Designer — Showreel Block — frontend + canvas styles
 * v1.0.0 (introduced in PAGE_DESIGNER_VERSION 3.33.235)
 *
 * One block, thirteen ways to show a set of screenshots. Each screen holds a
 * picture, a title, a short line of text and an optional video link; the
 * Style setting decides how the same screens are drawn:
 *   tilt     — the first screen leans back and straightens as the page scrolls
 *   carousel — the same leaning screen, one at a time, with arrows and dots
 *   wheel    — screens ride a drum that turns as the page is scrolled
 *   coverflow— a row where the middle screen faces you and the rest angle away
 *   story    — the picture stays pinned while the words scroll past and swap it
 *   stack    — cards that slide up and stack on top of each other
 *   tabs     — a row of titles that plays through the screens by itself
 *   accordion— slim panels; the one pointed at opens wide
 *   tiles    — a grid of different-sized tiles
 *   cards    — a sideways row of tall cards that open up
 *   fan      — pictures fanned out like a hand of cards
 *   ring     — pictures round a slowly turning ring
 *   wall     — a slowly drifting wall of pictures
 * Finishing touches work across the styles: a lean towards the pointer,
 * a magnifying glass, a light travelling round the border, a slow zoom,
 * and screens that glide in as they are scrolled to. Pictures can also be
 * flipped over (a cover in front, or a message / second picture behind).
 * Every effect is plain CSS transforms — no 3D engine, nothing heavy.
 *
 * STRICT ISOLATION
 * ----------------
 *   - Every selector is namespaced `.pd-blk-shr*` / `data-pd-shr-*`.
 *   - The Style, shape, side, frame and text settings are read straight
 *     from the root's data attributes, so the saved markup alone decides
 *     the look. The runtime only adds movement (it writes
 *     --pd-blk-shr-p / -tilt / -speed and two state classes on the LIVE
 *     stage element, never on the saved page).
 *
 * COLOUR COMPLIANCE
 * -----------------
 *   Renders on the PUBLISHED page, so no admin `--at-color-*` tokens.
 *   Words inherit the theme's General Text; titles follow the theme's
 *   Header Text; every line, fill, shadow and glow is mixed from
 *   currentColor or the theme accent. Zero hardcoded colours.
 *
 * SIZES ITSELF FROM ITS OWN WIDTH
 * -------------------------------
 *   The root is a size container, so every layout below steps down by
 *   the block's own width (a narrow dashboard card behaves like a phone).
 */

/* ── Root ──────────────────────────────────────────────────────── */
.pd-blk-shr {
    --pd-blk-shr-ratio: 16 / 10;
    --pd-blk-shr-gap: 24px;
    --pd-blk-shr-p: 1;             /* scroll progress 0..1 (1 = settled flat) */
    --pd-blk-shr-tilt: 18deg;      /* how far the picture leans */
    --pd-blk-shr-speed: 40s;       /* one full drift of the wall */
    --pd-blk-shr-dwell: 5s;        /* how long a tab stays before the next */
    --pd-blk-shr-line: color-mix(in srgb, currentColor 16%, transparent);
    --pd-blk-shr-wash: color-mix(in srgb, currentColor 5%, transparent);
    position: relative;
    margin: 24px auto;
    max-width: 100%;
    color: inherit;
    font-family: inherit;
    box-sizing: border-box;
    container-type: inline-size;
    container-name: pd-blk-shr;
}
.pd-blk-shr[data-pd-shr-ratio="16-9"] { --pd-blk-shr-ratio: 16 / 9; }
.pd-blk-shr[data-pd-shr-ratio="4-3"]  { --pd-blk-shr-ratio: 4 / 3; }
.pd-blk-shr[data-pd-shr-ratio="1-1"]  { --pd-blk-shr-ratio: 1 / 1; }

.pd-blk-shr-stage { position: relative; box-sizing: border-box; }
.pd-blk-shr-item  { min-width: 0; box-sizing: border-box; }

/* ── The picture ───────────────────────────────────────────────── *
 * A background-image on a <div role="img"> (the address is written
 * inline by the panel). A div rather than an <img> sidesteps the
 * editor's image-placeholder stamping and never shows a broken-image
 * glyph. Screenshots are anchored to their top edge, where the page
 * heading and menus are. */
.pd-blk-shr-shot {
    display: block;
    width: 100%;
    aspect-ratio: var(--pd-blk-shr-ratio);
    box-sizing: border-box;
    border: 1px solid var(--pd-blk-shr-line);
    border-radius: 12px;
    background-color: var(--pd-blk-shr-wash);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
    background-origin: content-box;
    background-clip: content-box;
    box-shadow: 0 28px 60px -32px color-mix(in srgb, currentColor 45%, transparent);
    overflow: hidden;
    position: relative;
    --pd-blk-shr-rx: 0deg;         /* lean towards the pointer (set live) */
    --pd-blk-shr-ry: 0deg;
}

/* Finishing touch — lean towards the pointer. Kept at the same weight as
   the style rules below and placed before them, so the tilt and carousel
   (which fold the lean into their own movement) still win. */
.pd-blk-shr[data-pd-shr-lean="1"] .pd-blk-shr-shot {
    transform: perspective(1100px) rotateX(var(--pd-blk-shr-rx)) rotateY(var(--pd-blk-shr-ry));
    transition: transform 0.18s ease-out;
}

/* Browser frame — a slim bar with three dots above the picture. Drawn in
   the picture's own padding so it never covers the screenshot. */
.pd-blk-shr[data-pd-shr-frame="1"] .pd-blk-shr-shot {
    padding-top: 26px;
    background-color: color-mix(in srgb, currentColor 9%, transparent);
}
.pd-blk-shr[data-pd-shr-frame="1"] .pd-blk-shr-shot::before {
    content: "";
    position: absolute;
    left: 12px;
    top: 9px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: color-mix(in srgb, currentColor 34%, transparent);
    box-shadow: 14px 0 0 color-mix(in srgb, currentColor 34%, transparent),
                28px 0 0 color-mix(in srgb, currentColor 34%, transparent);
}

/* ── A screen with no picture yet ──────────────────────────────── *
 * On the page a visitor sees, a screen without a picture is left out
 * altogether — no empty box is ever shown. In the editor (where every
 * element carries data-gjs-type) it stays, with a prompt, so it can be
 * filled in. A screen that HAS a picture carries its address on
 * data-pd-shr-src (written by the panel beside the saved style), so the
 * test needs nothing but the saved markup. */
.pd-blk-shr .pd-blk-shr-item:not([data-gjs-type]):not([data-pd-shr-src]) {
    display: none;
}
.pd-blk-shr-item[data-gjs-type]:not([data-pd-shr-src]) .pd-blk-shr-shot {
    border-style: dashed;
    box-shadow: none;
}
.pd-blk-shr-item[data-gjs-type]:not([data-pd-shr-src]) .pd-blk-shr-shot::after {
    content: "Add an image in Settings";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    text-align: center;
    font-size: calc(var(--pd-general-size, 16px) * 0.85);
    color: color-mix(in srgb, currentColor 70%, transparent);
}

/* ── Words ─────────────────────────────────────────────────────── */
.pd-blk-shr-copy  { min-width: 0; }
.pd-blk-shr-title {
    margin: 0 0 6px;
    font-family: var(--pd-header-font, inherit);
    font-size: calc(var(--pd-general-size, 16px) * 1.25);
    font-weight: 700;
    line-height: 1.25;
    color: var(--pd-header-color, inherit);
    overflow-wrap: anywhere;
}
.pd-blk-shr-text {
    margin: 0;
    font-size: var(--pd-general-size, 16px);
    line-height: 1.55;
    color: inherit;
    overflow-wrap: anywhere;
}
.pd-blk-shr-title:empty,
.pd-blk-shr-text:empty { display: none; }

/* "Show text" off — tilt and tiles only (story needs its words, the wall
   never shows them). */
.pd-blk-shr[data-pd-shr-style="tilt"][data-pd-shr-captions="0"] .pd-blk-shr-copy,
.pd-blk-shr[data-pd-shr-style="carousel"][data-pd-shr-captions="0"] .pd-blk-shr-copy,
.pd-blk-shr[data-pd-shr-style="wheel"][data-pd-shr-captions="0"] .pd-blk-shr-copy,
.pd-blk-shr[data-pd-shr-style="coverflow"][data-pd-shr-captions="0"] .pd-blk-shr-copy,
.pd-blk-shr[data-pd-shr-style="tiles"][data-pd-shr-captions="0"] .pd-blk-shr-copy { display: none; }

/* ═════════════════════════════════════════════════════════════════
   STYLE 1 — TILT: the first screen leans back, straightens on scroll
   ═════════════════════════════════════════════════════════════════ */
.pd-blk-shr[data-pd-shr-style="tilt"] .pd-blk-shr-item { display: none; }
.pd-blk-shr[data-pd-shr-style="tilt"] .pd-blk-shr-item:first-child,
.pd-blk-shr[data-pd-shr-style="carousel"] .pd-blk-shr-item,
.pd-blk-shr[data-pd-shr-style="wheel"] .pd-blk-shr-item {
    display: flex;
    flex-direction: column-reverse;   /* words above the picture */
    align-items: center;
    gap: 32px;
    text-align: center;
    perspective: 1400px;
    position: relative;
}
.pd-blk-shr[data-pd-shr-style="tilt"] .pd-blk-shr-title,
.pd-blk-shr[data-pd-shr-style="carousel"] .pd-blk-shr-title,
.pd-blk-shr[data-pd-shr-style="wheel"] .pd-blk-shr-title {
    font-size: calc(var(--pd-general-size, 16px) * 1.75);
}
.pd-blk-shr[data-pd-shr-style="tilt"] .pd-blk-shr-shot,
.pd-blk-shr[data-pd-shr-style="carousel"] .pd-blk-shr-shot,
.pd-blk-shr[data-pd-shr-style="wheel"] .pd-blk-shr-shot {
    max-width: 1100px;
    transform-origin: center top;
    transform:
        translateY(calc((1 - var(--pd-blk-shr-p)) * 28px))
        rotateX(calc((1 - var(--pd-blk-shr-p)) * var(--pd-blk-shr-tilt) + var(--pd-blk-shr-rx)))
        rotateY(var(--pd-blk-shr-ry))
        scale(calc(0.88 + 0.12 * var(--pd-blk-shr-p)));
    transition: none;
    will-change: transform;
}
/* Soft glow behind the picture, in the theme accent. */
.pd-blk-shr[data-pd-shr-style="tilt"] .pd-blk-shr-item:first-child::before,
.pd-blk-shr[data-pd-shr-style="carousel"] .pd-blk-shr-item::before,
.pd-blk-shr[data-pd-shr-style="wheel"] .pd-blk-shr-item::before {
    content: "";
    position: absolute;
    left: 10%;
    right: 10%;
    bottom: 8%;
    height: 45%;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--pd-accent, currentColor) 32%, transparent), transparent);
    filter: blur(40px);
    pointer-events: none;
    z-index: 0;
}
.pd-blk-shr[data-pd-shr-style="tilt"] .pd-blk-shr-shot,
.pd-blk-shr[data-pd-shr-style="tilt"] .pd-blk-shr-copy,
.pd-blk-shr[data-pd-shr-style="carousel"] .pd-blk-shr-shot,
.pd-blk-shr[data-pd-shr-style="carousel"] .pd-blk-shr-copy,
.pd-blk-shr[data-pd-shr-style="wheel"] .pd-blk-shr-shot,
.pd-blk-shr[data-pd-shr-style="wheel"] .pd-blk-shr-copy { z-index: 1; }
.pd-blk-shr[data-pd-shr-style="tilt"] .pd-blk-shr-copy,
.pd-blk-shr[data-pd-shr-style="carousel"] .pd-blk-shr-copy,
.pd-blk-shr[data-pd-shr-style="wheel"] .pd-blk-shr-copy { position: relative; max-width: 100%; }

/* Carousel — one screen at a time. The row scrolls sideways and snaps, so
   a swipe works with no script; the runtime adds the arrows and dots. */
.pd-blk-shr[data-pd-shr-style="carousel"] .pd-blk-shr-list {
    display: flex;
    gap: var(--pd-blk-shr-gap);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding: 8px 0 44px;
    overscroll-behavior-x: contain;
}
.pd-blk-shr[data-pd-shr-style="carousel"] .pd-blk-shr-list::-webkit-scrollbar { display: none; }
.pd-blk-shr[data-pd-shr-style="carousel"] .pd-blk-shr-item { flex: 0 0 100%; scroll-snap-align: center; }

/* ═════════════════════════════════════════════════════════════════
   STYLE 2 — STORY: pinned picture, words scroll past and swap it
   ═════════════════════════════════════════════════════════════════ */
.pd-blk-shr[data-pd-shr-style="story"] .pd-blk-shr-list {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    column-gap: 48px;
    row-gap: 0;
    align-items: start;
}
.pd-blk-shr[data-pd-shr-style="story"][data-pd-shr-side="right"] .pd-blk-shr-list {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
}
/* The screens' own boxes step aside so pictures and words sit straight on
   the grid: every picture shares one pinned cell, each set of words gets
   its own row. */
.pd-blk-shr[data-pd-shr-style="story"] .pd-blk-shr-item { display: contents; }
.pd-blk-shr[data-pd-shr-style="story"] .pd-blk-shr-shot {
    grid-column: 1;
    grid-row: 1 / span 12;
    align-self: start;
    position: sticky;
    /* Held in the middle of the window (half the window, less about half
       the picture's own height), level with the words being read. */
    top: max(72px, calc(50vh - 17cqw));
    opacity: 0;
    transition: opacity 0.45s ease;
}
.pd-blk-shr[data-pd-shr-style="story"][data-pd-shr-side="right"] .pd-blk-shr-shot { grid-column: 2; }
.pd-blk-shr[data-pd-shr-style="story"] .pd-blk-shr-copy {
    grid-column: 2;
    /* Each set of words takes about the picture's own height — so the gap
       between them follows the picture, not the height of the window (a
       tall, upright screen used to leave most of a screen empty between
       them). */
    min-height: min(62vh, max(240px, 38cqw));
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 24px 0;
    transition: opacity 0.3s ease;
}
.pd-blk-shr[data-pd-shr-style="story"][data-pd-shr-side="right"] .pd-blk-shr-copy { grid-column: 1; }
.pd-blk-shr[data-pd-shr-style="story"] .pd-blk-shr-title {
    font-size: calc(var(--pd-general-size, 16px) * 1.5);
}
/* Before the runtime starts (or without it) the first picture shows. */
.pd-blk-shr[data-pd-shr-style="story"] .pd-blk-shr-item:first-child .pd-blk-shr-shot { opacity: 1; }
.pd-blk-shr[data-pd-shr-style="story"] .pd-blk-shr-live .pd-blk-shr-item .pd-blk-shr-shot { opacity: 0; pointer-events: none; }
.pd-blk-shr[data-pd-shr-style="story"] .pd-blk-shr-live .pd-blk-shr-item.pd-blk-shr-on .pd-blk-shr-shot { opacity: 1; pointer-events: auto; }
.pd-blk-shr[data-pd-shr-style="story"] .pd-blk-shr-live .pd-blk-shr-item .pd-blk-shr-copy { opacity: 0.4; }
.pd-blk-shr[data-pd-shr-style="story"] .pd-blk-shr-live .pd-blk-shr-item.pd-blk-shr-on .pd-blk-shr-copy { opacity: 1; }

/* ═════════════════════════════════════════════════════════════════
   STYLE 3 — TILES: a grid of different-sized tiles
   ═════════════════════════════════════════════════════════════════ */
.pd-blk-shr[data-pd-shr-style="tiles"] .pd-blk-shr-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pd-blk-shr-gap);
}
/* Each tile asks for a share of the row and then grows to fill it, so a
   row is always full — whatever the number of screens, and when a screen
   with no picture is left out. The shares below give the wide-narrow,
   three-across, narrow-wide rhythm. */
.pd-blk-shr[data-pd-shr-style="tiles"] .pd-blk-shr-item {
    flex: 1 1 calc(30% - var(--pd-blk-shr-gap));
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px;
    border: 1px solid var(--pd-blk-shr-line);
    border-radius: 16px;
    background: var(--pd-blk-shr-wash);
    transition: transform 0.25s ease, border-color 0.25s ease;
}
.pd-blk-shr[data-pd-shr-style="tiles"] .pd-blk-shr-item:nth-child(1),
.pd-blk-shr[data-pd-shr-style="tiles"] .pd-blk-shr-item:nth-child(7) { flex-basis: calc(58% - var(--pd-blk-shr-gap)); }
.pd-blk-shr[data-pd-shr-style="tiles"] .pd-blk-shr-item:nth-child(2),
.pd-blk-shr[data-pd-shr-style="tiles"] .pd-blk-shr-item:nth-child(6) { flex-basis: calc(38% - var(--pd-blk-shr-gap)); }
/* The picture takes up any spare height, so tiles in one row line up. */
.pd-blk-shr[data-pd-shr-style="tiles"] .pd-blk-shr-shot { flex: 1 1 auto; box-shadow: none; border-radius: 10px; }
.pd-blk-shr[data-pd-shr-style="tiles"] .pd-blk-shr-copy { flex: 0 0 auto; }
.pd-blk-shr[data-pd-shr-style="tiles"] .pd-blk-shr-title {
    font-size: calc(var(--pd-general-size, 16px) * 1.1);
}
.pd-blk-shr[data-pd-shr-style="tiles"] .pd-blk-shr-text {
    font-size: calc(var(--pd-general-size, 16px) * 0.92);
}
@media (hover: hover) {
    .pd-blk-shr[data-pd-shr-style="tiles"] .pd-blk-shr-item:hover {
        transform: translateY(-3px);
        border-color: color-mix(in srgb, var(--pd-accent, currentColor) 55%, transparent);
    }
}

/* ═════════════════════════════════════════════════════════════════
   STYLE 4 — WALL: a slowly drifting wall of pictures
   ═════════════════════════════════════════════════════════════════ */
/* Without the runtime: a plain, still grid of the pictures. */
.pd-blk-shr[data-pd-shr-style="wall"] .pd-blk-shr-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--pd-blk-shr-gap);
}
.pd-blk-shr[data-pd-shr-style="wall"] .pd-blk-shr-copy { display: none; }
.pd-blk-shr[data-pd-shr-style="wall"] .pd-blk-shr-shot { box-shadow: none; }
/* With it: the runtime builds the moving wall from copies of the pictures
   (live element only, never saved) and the still grid steps aside. */
.pd-blk-shr[data-pd-shr-style="wall"] .pd-blk-shr-live.pd-blk-shr-walled .pd-blk-shr-list { display: none; }
.pd-blk-shr-wall { display: none; }
.pd-blk-shr[data-pd-shr-style="wall"] .pd-blk-shr-wall {
    display: block;
    position: relative;
    height: clamp(260px, 54cqw, 660px);
    overflow: hidden;
    perspective: 1200px;
    -webkit-mask-image: linear-gradient(90deg, transparent, currentColor 12%, currentColor 88%, transparent);
            mask-image: linear-gradient(90deg, transparent, currentColor 12%, currentColor 88%, transparent);
}
.pd-blk-shr-wall-plane {
    position: absolute;
    left: -20%;
    right: -20%;
    top: 50%;
    display: flex;
    flex-direction: column;
    gap: var(--pd-blk-shr-gap);
    transform:
        translateY(-50%)
        rotateX(calc(var(--pd-blk-shr-tilt) * 1.6))
        rotateZ(calc(var(--pd-blk-shr-tilt) * -0.45));
    transform-style: preserve-3d;
}
.pd-blk-shr-wall-row {
    display: flex;
    gap: var(--pd-blk-shr-gap);
    width: max-content;
    animation: pd-blk-shr-drift var(--pd-blk-shr-speed) linear infinite;
    will-change: transform;
}
.pd-blk-shr-wall-row:nth-child(even) { animation-direction: reverse; }
.pd-blk-shr-wall-row .pd-blk-shr-shot {
    flex: 0 0 auto;
    width: clamp(180px, 30cqw, 420px);
}
.pd-blk-shr-wall:hover .pd-blk-shr-wall-row { animation-play-state: paused; }
@keyframes pd-blk-shr-drift {
    from { transform: translateX(0); }
    to   { transform: translateX(var(--pd-blk-shr-dist, -50%)); }
}

/* ═════════════════════════════════════════════════════════════════
   STYLE 5 — STACK: cards slide up and stack on top of each other
   ═════════════════════════════════════════════════════════════════ */
.pd-blk-shr[data-pd-shr-style="stack"] .pd-blk-shr-list { display: block; }
.pd-blk-shr[data-pd-shr-style="stack"] .pd-blk-shr-item {
    --pd-blk-shr-i: 0;             /* place in the pile (steps each card down a little) */
    --pd-blk-shr-c: 0;             /* how far the next card covers this one (set live) */
    position: sticky;
    top: calc(10vh + var(--pd-blk-shr-i) * 14px);
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 32px;
    align-items: center;
    padding: 28px;
    margin-bottom: 28px;
    border: 1px solid var(--pd-blk-shr-line);
    border-radius: 20px;
    /* A card must hide the one beneath it, so it wears the colour really
       painted behind the block (measured live — the runtime always finds a
       solid one), then the theme's page colour. Never the theme's SECTION
       colour: a theme may make that fully see-through over a gradient. */
    background: color-mix(in srgb, currentColor 6%, var(--pd-blk-shr-bg, var(--pd-color-bg, transparent)));
    transform: scale(calc(1 - 0.05 * var(--pd-blk-shr-c)));
    transform-origin: center top;
    filter: brightness(calc(1 - 0.14 * var(--pd-blk-shr-c)));
}
.pd-blk-shr[data-pd-shr-style="stack"] .pd-blk-shr-item:last-child { margin-bottom: 0; }
.pd-blk-shr[data-pd-shr-style="stack"] .pd-blk-shr-item:nth-child(2) { --pd-blk-shr-i: 1; }
.pd-blk-shr[data-pd-shr-style="stack"] .pd-blk-shr-item:nth-child(3) { --pd-blk-shr-i: 2; }
.pd-blk-shr[data-pd-shr-style="stack"] .pd-blk-shr-item:nth-child(4) { --pd-blk-shr-i: 3; }
.pd-blk-shr[data-pd-shr-style="stack"] .pd-blk-shr-item:nth-child(5) { --pd-blk-shr-i: 4; }
.pd-blk-shr[data-pd-shr-style="stack"] .pd-blk-shr-item:nth-child(6) { --pd-blk-shr-i: 5; }
.pd-blk-shr[data-pd-shr-style="stack"] .pd-blk-shr-item:nth-child(7) { --pd-blk-shr-i: 6; }
.pd-blk-shr[data-pd-shr-style="stack"] .pd-blk-shr-item:nth-child(8) { --pd-blk-shr-i: 7; }
.pd-blk-shr[data-pd-shr-style="stack"][data-pd-shr-side="right"] .pd-blk-shr-item { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
.pd-blk-shr[data-pd-shr-style="stack"][data-pd-shr-side="right"] .pd-blk-shr-shot { order: 2; }
.pd-blk-shr[data-pd-shr-style="stack"] .pd-blk-shr-shot { box-shadow: none; }
.pd-blk-shr[data-pd-shr-style="stack"] .pd-blk-shr-title {
    font-size: calc(var(--pd-general-size, 16px) * 1.5);
}

/* ═════════════════════════════════════════════════════════════════
   STYLE 6 — TABS: a row of titles that plays through by itself
   ═════════════════════════════════════════════════════════════════ */
/* Without the runtime: every screen, one under the other. */
.pd-blk-shr[data-pd-shr-style="tabs"] .pd-blk-shr-list {
    display: flex;
    flex-direction: column;
    gap: 40px;
}
.pd-blk-shr[data-pd-shr-style="tabs"] .pd-blk-shr-item {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.pd-blk-shr[data-pd-shr-style="tabs"] .pd-blk-shr-title {
    font-size: calc(var(--pd-general-size, 16px) * 1.35);
}
/* With it: one screen at a time, chosen by the row of titles. */
.pd-blk-shr[data-pd-shr-style="tabs"] .pd-blk-shr-live .pd-blk-shr-item:not(.pd-blk-shr-on) { display: none; }
.pd-blk-shr[data-pd-shr-style="tabs"] .pd-blk-shr-live .pd-blk-shr-item.pd-blk-shr-on { animation: pd-blk-shr-fade 0.4s ease both; }
@keyframes pd-blk-shr-fade {
    from { opacity: 0; translate: 0 10px; }
    to   { opacity: 1; translate: 0 0; }
}
.pd-blk-shr-tabs { display: none; }
.pd-blk-shr[data-pd-shr-style="tabs"] .pd-blk-shr-tabs {
    display: flex;
    gap: 10px;
    margin: 0 0 22px;
}
/* A tab is a real button; everything a site's own button styling might
   add is set back here so it reads as a plain title over a thin line. */
.pd-blk-shr-tabs .pd-blk-shr-tab {
    flex: 1 1 0;
    min-width: 0;
    min-height: 44px;
    position: relative;
    display: block;
    margin: 0;
    padding: 10px 2px 14px;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    -webkit-appearance: none;
            appearance: none;
    color: inherit;
    font-family: inherit;
    font-size: calc(var(--pd-general-size, 16px) * 0.95);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: normal;
    text-transform: none;
    text-align: left;
    overflow-wrap: anywhere;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.2s ease;
}
.pd-blk-shr-tabs .pd-blk-shr-tab:hover,
.pd-blk-shr-tabs .pd-blk-shr-tab.pd-blk-shr-tab-on { opacity: 1; }
.pd-blk-shr-tab-label { display: block; }
/* The thin line under each title, and the bar that fills it. */
.pd-blk-shr-tabs .pd-blk-shr-tab::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    border-radius: 3px;
    background: color-mix(in srgb, currentColor 18%, transparent);
}
.pd-blk-shr-tab-bar {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 1;
    width: 0;
    height: 3px;
    border-radius: 3px;
    background: var(--pd-accent, currentColor);
}
.pd-blk-shr-tab-on .pd-blk-shr-tab-bar { animation: pd-blk-shr-fill var(--pd-blk-shr-dwell) linear forwards; }
.pd-blk-shr-tabs-held .pd-blk-shr-tab-bar { animation-play-state: paused; }
/* Not playing by itself: the current tab simply shows a full bar. */
.pd-blk-shr-tabs-still .pd-blk-shr-tab-on .pd-blk-shr-tab-bar { animation: none; width: 100%; }
@keyframes pd-blk-shr-fill {
    from { width: 0; }
    to   { width: 100%; }
}

/* ═════════════════════════════════════════════════════════════════
   STYLE 7 — CARDS: a sideways row of tall cards that open up
   ═════════════════════════════════════════════════════════════════ */
.pd-blk-shr[data-pd-shr-style="cards"] .pd-blk-shr-list {
    display: flex;
    gap: var(--pd-blk-shr-gap);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    padding: 6px 2px 10px;
    overscroll-behavior-x: contain;
}
.pd-blk-shr[data-pd-shr-style="cards"] .pd-blk-shr-list::-webkit-scrollbar { display: none; }
.pd-blk-shr[data-pd-shr-style="cards"] .pd-blk-shr-item {
    flex: 0 0 clamp(230px, 30cqw, 380px);
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 14px;
    border: 1px solid var(--pd-blk-shr-line);
    border-radius: 20px;
    background: var(--pd-blk-shr-wash);
    transition: transform 0.25s ease, border-color 0.25s ease;
}
/* "Open in popup" is on: pictures show they can be opened. */
.pd-blk-shr-pops .pd-blk-shr-list .pd-blk-shr-shot,
.pd-blk-shr-pops .pd-blk-shr-wall .pd-blk-shr-shot { cursor: zoom-in; }
/* (The pointer cursor also matters on phones and tablets: some only pass
   a tap to an element that is marked as clickable.) */
.pd-blk-shr .pd-blk-shr-item[data-pd-shr-open] { cursor: pointer; }
.pd-blk-shr .pd-blk-shr-item[data-pd-shr-open]:focus-visible {
    outline: 2px solid var(--pd-accent, currentColor);
    outline-offset: 3px;
}
/* A tall picture, whatever the Picture shape setting — that is the look. */
.pd-blk-shr[data-pd-shr-style="cards"] .pd-blk-shr-shot {
    aspect-ratio: 4 / 5;
    background-position: top left;
    box-shadow: none;
}
.pd-blk-shr[data-pd-shr-style="cards"] .pd-blk-shr-title {
    font-size: calc(var(--pd-general-size, 16px) * 1.1);
}
.pd-blk-shr[data-pd-shr-style="cards"] .pd-blk-shr-text {
    font-size: calc(var(--pd-general-size, 16px) * 0.92);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
            line-clamp: 2;
    overflow: hidden;              /* the full text shows when the card is opened */
}
@media (hover: hover) {
    .pd-blk-shr[data-pd-shr-style="cards"] .pd-blk-shr-item:hover {
        transform: translateY(-3px);
        border-color: color-mix(in srgb, var(--pd-accent, currentColor) 55%, transparent);
    }
}

/* ═════════════════════════════════════════════════════════════════
   STYLE — WHEEL: screens ride a drum that turns as the page scrolls
   ═════════════════════════════════════════════════════════════════ */
/* Without the runtime: the screens one under the other. */
.pd-blk-shr[data-pd-shr-style="wheel"] .pd-blk-shr-list {
    display: flex;
    flex-direction: column;
    gap: 64px;
}
/* With it: the stage becomes a tall track (one stretch of scrolling per
   screen) and the screens are pinned in the middle of the window, all in
   one spot, each turned round the drum by its distance from the front. */
.pd-blk-shr[data-pd-shr-style="wheel"] .pd-blk-shr-wheeled {
    --pd-blk-shr-drum: min(44vh, 400px);
    height: calc(var(--pd-blk-shr-n, 1) * 72vh + 28vh);
    /* A screen swinging forward is drawn wider than the block for a
       moment; trim that at the sides so the page never scrolls sideways.
       (`clip` trims without becoming a scroll box, so the pinning holds.) */
    overflow-x: clip;
}
.pd-blk-shr[data-pd-shr-style="wheel"] .pd-blk-shr-wheeled .pd-blk-shr-list {
    position: sticky;
    top: 8vh;
    height: 84vh;
    display: grid;
    place-items: center;
    gap: 0;
    perspective: 1500px;
}
.pd-blk-shr[data-pd-shr-style="wheel"] .pd-blk-shr-wheeled .pd-blk-shr-item {
    --pd-blk-shr-d: 0;             /* places from the front (set live; below is +) */
    --pd-blk-shr-o: 0;             /* the same, as 0..1, for fading */
    grid-area: 1 / 1;
    width: 100%;
    perspective: none;
    transform:
        translateZ(calc(var(--pd-blk-shr-drum) * -1))
        rotateX(calc(var(--pd-blk-shr-d) * -56deg))
        translateZ(var(--pd-blk-shr-drum));
    opacity: calc(1 - var(--pd-blk-shr-o));
    backface-visibility: hidden;
    pointer-events: none;
    will-change: transform, opacity;
}
.pd-blk-shr[data-pd-shr-style="wheel"] .pd-blk-shr-wheeled .pd-blk-shr-item.pd-blk-shr-on { pointer-events: auto; }
/* Kept short enough that picture and words always fit the pinned area. */
.pd-blk-shr[data-pd-shr-style="wheel"] .pd-blk-shr-wheeled .pd-blk-shr-shot { max-width: min(1100px, 88vh); }
.pd-blk-shr[data-pd-shr-style="wheel"] .pd-blk-shr-wheeled .pd-blk-shr-item { gap: 20px; }

/* ═════════════════════════════════════════════════════════════════
   STYLE — COVER FLOW: the middle screen faces you, the rest angle away
   ═════════════════════════════════════════════════════════════════ */
.pd-blk-shr[data-pd-shr-style="coverflow"] .pd-blk-shr-list {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    /* Side room so the first and last screens can reach the middle. */
    padding: 34px 22% 40px;
    overscroll-behavior-x: contain;
}
.pd-blk-shr[data-pd-shr-style="coverflow"] .pd-blk-shr-list::-webkit-scrollbar { display: none; }
.pd-blk-shr[data-pd-shr-style="coverflow"] .pd-blk-shr-item {
    --pd-blk-shr-d: 0;             /* places from the middle (set live; right is +) */
    --pd-blk-shr-o: 0;
    position: relative;
    flex: 0 0 100%;
    scroll-snap-align: center;
    display: flex;
    flex-direction: column;
    gap: 16px;
    text-align: center;
    transform:
        perspective(1100px)
        translateX(calc(var(--pd-blk-shr-d) * var(--pd-blk-shr-pull, 18%) * -1))
        rotateY(calc(var(--pd-blk-shr-d) * -38deg))
        translateZ(calc(var(--pd-blk-shr-o) * -170px));
    opacity: calc(1 - var(--pd-blk-shr-o) * 0.4);
    will-change: transform;
}
.pd-blk-shr[data-pd-shr-style="coverflow"] .pd-blk-shr-copy { opacity: calc(1 - var(--pd-blk-shr-o) * 1.6); }
.pd-blk-shr[data-pd-shr-style="coverflow"] .pd-blk-shr-title {
    font-size: calc(var(--pd-general-size, 16px) * 1.3);
}

/* ═════════════════════════════════════════════════════════════════
   STYLE — ACCORDION: slim panels; the one pointed at opens wide
   ═════════════════════════════════════════════════════════════════ */
.pd-blk-shr[data-pd-shr-style="accordion"] .pd-blk-shr-list {
    position: relative;            /* the open panel's words sit under the whole row */
    display: flex;
    gap: 10px;
    height: clamp(240px, 40cqw, 520px);
    /* Room beneath for the open panel's words. */
    margin-bottom: calc(var(--pd-general-size, 16px) * 6.5);
}
.pd-blk-shr[data-pd-shr-style="accordion"] .pd-blk-shr-item {
    flex: 1 1 0;
    min-width: 0;
    transition: flex-grow 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
    cursor: pointer;
}
/* The open panel: the one under the pointer, else the one last chosen
   (the runtime marks the first to begin with). */
.pd-blk-shr[data-pd-shr-style="accordion"] .pd-blk-shr-list:not(:hover) .pd-blk-shr-item.pd-blk-shr-on,
.pd-blk-shr[data-pd-shr-style="accordion"] .pd-blk-shr-item:hover { flex-grow: 6; }
.pd-blk-shr[data-pd-shr-style="accordion"] .pd-blk-shr-shot {
    height: 100%;
    aspect-ratio: auto;
    background-position: top left;
    box-shadow: none;
}
.pd-blk-shr[data-pd-shr-style="accordion"] .pd-blk-shr-copy {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 16px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
}
.pd-blk-shr[data-pd-shr-style="accordion"] .pd-blk-shr-list:not(:hover) .pd-blk-shr-item.pd-blk-shr-on .pd-blk-shr-copy,
.pd-blk-shr[data-pd-shr-style="accordion"] .pd-blk-shr-item:hover .pd-blk-shr-copy { opacity: 1; visibility: visible; }

/* ═════════════════════════════════════════════════════════════════
   STYLE — FAN: pictures fanned out like a hand of cards
   ═════════════════════════════════════════════════════════════════ */
.pd-blk-shr[data-pd-shr-style="fan"] { --pd-blk-shr-n: 4; }
.pd-blk-shr[data-pd-shr-style="fan"][data-pd-shr-count="1"] { --pd-blk-shr-n: 1; }
.pd-blk-shr[data-pd-shr-style="fan"][data-pd-shr-count="2"] { --pd-blk-shr-n: 2; }
.pd-blk-shr[data-pd-shr-style="fan"][data-pd-shr-count="3"] { --pd-blk-shr-n: 3; }
.pd-blk-shr[data-pd-shr-style="fan"][data-pd-shr-count="5"] { --pd-blk-shr-n: 5; }
.pd-blk-shr[data-pd-shr-style="fan"][data-pd-shr-count="6"] { --pd-blk-shr-n: 6; }
.pd-blk-shr[data-pd-shr-style="fan"][data-pd-shr-count="7"] { --pd-blk-shr-n: 7; }
.pd-blk-shr[data-pd-shr-style="fan"][data-pd-shr-count="8"] { --pd-blk-shr-n: 8; }
.pd-blk-shr[data-pd-shr-style="fan"] .pd-blk-shr-list {
    display: grid;
    justify-items: center;
    padding: 8cqw 0 15cqw;
}
/* Every picture sits on the same spot and is swung round a point far
   below it, which spreads them along an arc. The screen's place (--k) and
   the number showing (--n) come from the markup, refined live. */
.pd-blk-shr[data-pd-shr-style="fan"] .pd-blk-shr-item {
    --pd-blk-shr-k: 0;
    grid-area: 1 / 1;
    width: clamp(170px, 37cqw, 500px);
    /* The turning point sits two and a half picture-heights down: far
       enough for a gentle arc, near enough that the whole hand still fits
       the block at this size. */
    transform-origin: 50% 255%;
    transform: rotate(calc((var(--pd-blk-shr-k) - (var(--pd-blk-shr-n) - 1) / 2) * min(12deg, 72deg / var(--pd-blk-shr-n))));
    transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.pd-blk-shr[data-pd-shr-style="fan"] .pd-blk-shr-item:nth-child(2) { --pd-blk-shr-k: 1; }
.pd-blk-shr[data-pd-shr-style="fan"] .pd-blk-shr-item:nth-child(3) { --pd-blk-shr-k: 2; }
.pd-blk-shr[data-pd-shr-style="fan"] .pd-blk-shr-item:nth-child(4) { --pd-blk-shr-k: 3; }
.pd-blk-shr[data-pd-shr-style="fan"] .pd-blk-shr-item:nth-child(5) { --pd-blk-shr-k: 4; }
.pd-blk-shr[data-pd-shr-style="fan"] .pd-blk-shr-item:nth-child(6) { --pd-blk-shr-k: 5; }
.pd-blk-shr[data-pd-shr-style="fan"] .pd-blk-shr-item:nth-child(7) { --pd-blk-shr-k: 6; }
.pd-blk-shr[data-pd-shr-style="fan"] .pd-blk-shr-item:nth-child(8) { --pd-blk-shr-k: 7; }
/* The one pointed at (or tapped) lifts out of the hand. */
.pd-blk-shr[data-pd-shr-style="fan"] .pd-blk-shr-item:hover {
    z-index: 20;
    transform: rotate(calc((var(--pd-blk-shr-k) - (var(--pd-blk-shr-n) - 1) / 2) * min(12deg, 72deg / var(--pd-blk-shr-n)))) scale(1.07);
}
.pd-blk-shr[data-pd-shr-style="fan"] .pd-blk-shr-copy { display: none; }

/* ═════════════════════════════════════════════════════════════════
   STYLE — RING: pictures round a slowly turning ring
   ═════════════════════════════════════════════════════════════════ */
/* Without the runtime (or with fewer than three pictures): a still grid. */
.pd-blk-shr[data-pd-shr-style="ring"] .pd-blk-shr-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--pd-blk-shr-gap);
}
.pd-blk-shr[data-pd-shr-style="ring"] .pd-blk-shr-text { display: none; }
.pd-blk-shr[data-pd-shr-style="ring"] .pd-blk-shr-copy { margin-top: 10px; text-align: center; }
.pd-blk-shr[data-pd-shr-style="ring"] .pd-blk-shr-title {
    margin: 0;
    font-size: calc(var(--pd-general-size, 16px) * 1.1);
}
.pd-blk-shr[data-pd-shr-style="ring"] .pd-blk-shr-shot { box-shadow: none; }
/* With it: the stage is the viewing window; the list is the ring itself,
   pushed back by its own radius so the nearest picture is life-size. */
.pd-blk-shr[data-pd-shr-style="ring"] .pd-blk-shr-ringed {
    /* The nearest picture takes about half the block's width; the ones
       either side swing away past the edges, where they fade out. */
    --pd-blk-shr-w: clamp(200px, 50cqw, 640px);
    --pd-blk-shr-r: 300px;         /* ring radius (measured live) */
    overflow: hidden;
    perspective: 1500px;
    padding: 40px 0 30px;
    -webkit-mask-image: linear-gradient(90deg, transparent, currentColor 9%, currentColor 91%, transparent);
            mask-image: linear-gradient(90deg, transparent, currentColor 9%, currentColor 91%, transparent);
}
.pd-blk-shr[data-pd-shr-style="ring"] .pd-blk-shr-ringed .pd-blk-shr-list {
    display: block;
    position: relative;
    width: var(--pd-blk-shr-w);
    height: calc(var(--pd-blk-shr-w) / (var(--pd-blk-shr-ratio)) + var(--pd-general-size, 16px) * 2.6);
    margin: 0 auto;
    transform-style: preserve-3d;
    transform: translateZ(calc(var(--pd-blk-shr-r) * -1));
    animation: pd-blk-shr-ring var(--pd-blk-shr-speed) linear infinite;
}
.pd-blk-shr[data-pd-shr-style="ring"] .pd-blk-shr-ringed .pd-blk-shr-item {
    --pd-blk-shr-k: 0;
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    transform: rotateY(calc(var(--pd-blk-shr-k) * 360deg / var(--pd-blk-shr-n, 3))) translateZ(var(--pd-blk-shr-r));
}
.pd-blk-shr[data-pd-shr-style="ring"] .pd-blk-shr-ringed:hover .pd-blk-shr-list { animation-play-state: paused; }
/* In the editor the ring keeps still so a screen can be picked. */
.pd-blk-shr[data-pd-shr-style="ring"] .pd-blk-shr-ringed .pd-blk-shr-list[data-gjs-type] { animation: none; }
@keyframes pd-blk-shr-ring {
    from { transform: translateZ(calc(var(--pd-blk-shr-r) * -1)) rotateY(0deg); }
    to   { transform: translateZ(calc(var(--pd-blk-shr-r) * -1)) rotateY(-360deg); }
}

/* ── Flip: the other side of a picture (runtime-built) ─────────── *
 * A solid face laid over the picture; the runtime turns the picture
 * edge-on, switches this face on or off, and turns it back. */
.pd-blk-shr-back {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 4;
    box-sizing: border-box;
    padding: 8%;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: inherit;
    /* A tint of the theme accent over the colour painted behind the block. */
    background-color: color-mix(in srgb, var(--pd-accent, currentColor) 16%, var(--pd-blk-shr-bg, var(--pd-color-bg, transparent)));
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    font-family: var(--pd-header-font, inherit);
    font-size: calc(var(--pd-general-size, 16px) * 1.2);
    font-weight: 700;
    line-height: 1.35;
    color: var(--pd-header-color, inherit);
    overflow: hidden;
    overflow-wrap: anywhere;
}
.pd-blk-shr-shot.pd-blk-shr-flipped > .pd-blk-shr-back { display: flex; }
.pd-blk-shr[data-pd-shr-flip="cover"] .pd-blk-shr-list .pd-blk-shr-shot,
.pd-blk-shr[data-pd-shr-flip="back"] .pd-blk-shr-list .pd-blk-shr-shot { cursor: pointer; }
/* Depth for the turn (a screen whose own box steps aside, as in the
   story, simply turns flat). */
.pd-blk-shr[data-pd-shr-flip="cover"] .pd-blk-shr-item,
.pd-blk-shr[data-pd-shr-flip="back"] .pd-blk-shr-item { perspective: 1300px; }

/* ── Finishing touch — slow zoom ───────────────────────────────── *
 * The picture drifts a little larger and back. --pd-blk-shr-z is the
 * width the picture is drawn at to cover its box (measured live), so the
 * drift starts from exactly the still picture. */
.pd-blk-shr-shot.pd-blk-shr-zooming {
    background-size: var(--pd-blk-shr-z) auto;
    animation: pd-blk-shr-zoom 16s ease-in-out infinite alternate;
}
@keyframes pd-blk-shr-zoom {
    from { background-size: var(--pd-blk-shr-z) auto; }
    to   { background-size: calc(var(--pd-blk-shr-z) * 1.16) auto; }
}

/* ── Arrows and dots (carousel + cards; runtime-built) ─────────── */
.pd-blk-shr-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 10px;
}
.pd-blk-shr[data-pd-shr-style="carousel"] .pd-blk-shr-nav { margin-top: -30px; position: relative; z-index: 2; }
.pd-blk-shr[data-pd-shr-style="coverflow"] .pd-blk-shr-nav { margin-top: -22px; position: relative; z-index: 2; }
.pd-blk-shr-nav.pd-blk-shr-nav-idle { display: none; }
.pd-blk-shr-nav .pd-blk-shr-arrow {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
    background: color-mix(in srgb, currentColor 6%, transparent);
    box-shadow: none;
    color: inherit;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.pd-blk-shr-nav .pd-blk-shr-arrow:hover {
    background: color-mix(in srgb, currentColor 16%, transparent);
    border-color: color-mix(in srgb, currentColor 38%, transparent);
}
.pd-blk-shr-arrow svg { width: 16px; height: 16px; display: block; }
.pd-blk-shr-dots { display: flex; align-items: center; gap: 18px; }
/* The dots. Written at this weight on purpose: the shared touch rule gives
   every button inside a block a 44px minimum height on tablets and phones,
   which stretched these into tall thin ovals. A dot keeps its own size
   here; the tap area round it (the ::before pad) is what grows. (That
   rule weighs three classes and a tag, so this one names four.) */
.pd-blk-shr .pd-blk-shr-nav .pd-blk-shr-dots button.pd-blk-shr-dot {
    position: relative;
    flex: 0 0 auto;
    box-sizing: border-box;
    width: 10px;
    height: 10px;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    box-shadow: none;
    -webkit-appearance: none;
            appearance: none;
    color: inherit;                /* a button's own text colour is not the page's */
    cursor: pointer;
    background: color-mix(in srgb, currentColor 30%, transparent);
    transition: background 0.15s, scale 0.15s, width 0.2s;
}
.pd-blk-shr .pd-blk-shr-nav .pd-blk-shr-dots button.pd-blk-shr-dot::before {
    content: "";
    position: absolute;
    left: -9px;
    right: -9px;
    top: 50%;
    height: 44px;
    transform: translateY(-50%);
}
.pd-blk-shr .pd-blk-shr-nav .pd-blk-shr-dots button.pd-blk-shr-dot.pd-blk-shr-dot-on {
    background: var(--pd-accent, currentColor);
    scale: 1.25;
}
/* Dot shape (the block's "Dot shape" setting; a circle when unset). */
.pd-blk-shr[data-pd-shr-dots="square"] .pd-blk-shr-nav .pd-blk-shr-dots button.pd-blk-shr-dot { border-radius: 0; }
.pd-blk-shr[data-pd-shr-dots="diamond"] .pd-blk-shr-nav .pd-blk-shr-dots button.pd-blk-shr-dot { border-radius: 1px; rotate: 45deg; }
.pd-blk-shr[data-pd-shr-dots="dash"] .pd-blk-shr-nav .pd-blk-shr-dots button.pd-blk-shr-dot { width: 20px; height: 6px; border-radius: 999px; }
.pd-blk-shr[data-pd-shr-dots="dash"] .pd-blk-shr-nav .pd-blk-shr-dots button.pd-blk-shr-dot.pd-blk-shr-dot-on { width: 34px; scale: 1; }
.pd-blk-shr[data-pd-shr-dots="line"] .pd-blk-shr-nav .pd-blk-shr-dots button.pd-blk-shr-dot { width: 28px; height: 3px; border-radius: 2px; }
.pd-blk-shr[data-pd-shr-dots="line"] .pd-blk-shr-nav .pd-blk-shr-dots button.pd-blk-shr-dot.pd-blk-shr-dot-on { scale: 1; height: 4px; }
.pd-blk-shr[data-pd-shr-dots="ring"] .pd-blk-shr-nav .pd-blk-shr-dots button.pd-blk-shr-dot {
    width: 12px;
    height: 12px;
    background: transparent;
    border: 2px solid color-mix(in srgb, currentColor 40%, transparent);
}
.pd-blk-shr[data-pd-shr-dots="ring"] .pd-blk-shr-nav .pd-blk-shr-dots button.pd-blk-shr-dot.pd-blk-shr-dot-on {
    background: var(--pd-accent, currentColor);
    border-color: var(--pd-accent, currentColor);
}

/* ── Play button (a screen with a video link; runtime-built) ───── */
.pd-blk-shr-shot .pd-blk-shr-play {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(48px, 9cqw, 76px);
    height: clamp(48px, 9cqw, 76px);
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    translate: -50% -50%;
    /* The theme's button pair: its fill and the ink made for that fill. */
    background: var(--pd-btn-bg, var(--pd-accent, currentColor));
    color: var(--pd-btn-color, var(--pd-blk-shr-bg, var(--pd-color-bg, inherit)));
    box-shadow: 0 10px 30px -10px color-mix(in srgb, currentColor 60%, transparent);
    cursor: pointer;
    transition: scale 0.2s ease;
}
.pd-blk-shr-shot .pd-blk-shr-play:hover { scale: 1.08; }
.pd-blk-shr-play svg { width: 44%; height: 44%; display: block; margin-left: 6%; }
.pd-blk-shr-wall .pd-blk-shr-play { display: none; }

/* ── Finishing touch — magnifying glass (runtime-built) ────────── */
.pd-blk-shr-lens {
    position: absolute;
    z-index: 2;
    width: clamp(110px, 16cqw, 170px);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    border: 2px solid color-mix(in srgb, currentColor 45%, transparent);
    background-color: var(--pd-blk-shr-bg, transparent);
    background-repeat: no-repeat;
    box-shadow: 0 12px 34px -12px color-mix(in srgb, currentColor 70%, transparent);
    pointer-events: none;
}

/* ── Finishing touch — a light travelling round the border ─────── *
 * A ring cut from a turning gradient (the mask keeps only the 2px edge).
 * Only on screens that have a picture, so the editor's "add a screenshot"
 * prompt keeps its place. */
@property --pd-blk-shr-a {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}
.pd-blk-shr[data-pd-shr-beam="1"] .pd-blk-shr-item[data-pd-shr-src] .pd-blk-shr-shot::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    padding: 2px;
    border-radius: inherit;
    background: conic-gradient(from var(--pd-blk-shr-a), transparent 0deg 240deg, var(--pd-accent, currentColor) 330deg, transparent 360deg);
    -webkit-mask: linear-gradient(currentColor 0 0) content-box, linear-gradient(currentColor 0 0);
    -webkit-mask-composite: xor;
            mask: linear-gradient(currentColor 0 0) content-box exclude, linear-gradient(currentColor 0 0);
    animation: pd-blk-shr-beam 5s linear infinite;
    pointer-events: none;
}
@keyframes pd-blk-shr-beam {
    to { --pd-blk-shr-a: 360deg; }
}

/* ── Finishing touch — screens glide in as they are scrolled to ── *
 * Only once the runtime is running (so a page without it shows
 * everything), and never in the editor. Uses `translate`, which adds to —
 * never replaces — a style's own transform. */
.pd-blk-shr[data-pd-shr-reveal="1"]:is([data-pd-shr-style="tilt"], [data-pd-shr-style="carousel"], [data-pd-shr-style="stack"], [data-pd-shr-style="tiles"], [data-pd-shr-style="cards"]) .pd-blk-shr-live .pd-blk-shr-item:not([data-gjs-type]),
.pd-blk-shr[data-pd-shr-reveal="1"][data-pd-shr-style="story"] .pd-blk-shr-live .pd-blk-shr-item:not([data-gjs-type]) .pd-blk-shr-copy {
    transition: opacity 0.7s ease, translate 0.7s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.25s ease, border-color 0.25s ease;
}
.pd-blk-shr[data-pd-shr-reveal="1"]:is([data-pd-shr-style="tilt"], [data-pd-shr-style="carousel"], [data-pd-shr-style="stack"], [data-pd-shr-style="tiles"], [data-pd-shr-style="cards"]) .pd-blk-shr-live .pd-blk-shr-item:not([data-gjs-type]):not(.pd-blk-shr-in),
.pd-blk-shr.pd-blk-shr[data-pd-shr-reveal="1"][data-pd-shr-style="story"] .pd-blk-shr-live .pd-blk-shr-item:not([data-gjs-type]):not(.pd-blk-shr-in) .pd-blk-shr-copy {
    opacity: 0;
    translate: 0 36px;
}
/* Neighbours follow one another in. Only the fade and glide are held
   back; a hover lift afterwards is not. */
.pd-blk-shr[data-pd-shr-reveal="1"] .pd-blk-shr-live .pd-blk-shr-item:nth-child(4n + 2) { transition-delay: 0.08s, 0.08s, 0s, 0s; }
.pd-blk-shr[data-pd-shr-reveal="1"] .pd-blk-shr-live .pd-blk-shr-item:nth-child(4n + 3) { transition-delay: 0.16s, 0.16s, 0s, 0s; }
.pd-blk-shr[data-pd-shr-reveal="1"] .pd-blk-shr-live .pd-blk-shr-item:nth-child(4n + 4) { transition-delay: 0.24s, 0.24s, 0s, 0s; }

/* ── Pop-up: a card opened up, or a video (runtime-built, on the page
   body — so it carries its own values, handed over by the runtime) ── */
.pd-blk-shr-box {
    --pd-blk-shr-line: color-mix(in srgb, currentColor 16%, transparent);
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
    background: color-mix(in srgb, var(--pd-blk-shr-bg, transparent) 90%, transparent);
    -webkit-backdrop-filter: blur(14px);
            backdrop-filter: blur(14px);
    opacity: 0;
    transition: opacity 0.3s ease;
    cursor: pointer;               /* tapping outside the picture closes it */
}
.pd-blk-shr-box.pd-blk-shr-box-on { opacity: 1; }
.pd-blk-shr-box.pd-blk-shr-box-going { pointer-events: none; transition-duration: 0.24s; }
.pd-blk-shr-box-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: min(1500px, 100%);
    max-height: 100%;
    padding-top: 54px;
    box-sizing: border-box;
    overflow-y: auto;
    cursor: auto;
    scale: 0.96;
    transition: scale 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.pd-blk-shr-box-on .pd-blk-shr-box-panel { scale: 1; }
.pd-blk-shr-box .pd-blk-shr-box-close {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
    background: color-mix(in srgb, currentColor 6%, transparent);
    box-shadow: none;
    color: inherit;
    cursor: pointer;
}
.pd-blk-shr-box-close svg { width: 18px; height: 18px; display: block; }
.pd-blk-shr-box-frame,
.pd-blk-shr-box-pic {
    display: block;
    box-sizing: border-box;
    border: 1px solid var(--pd-blk-shr-line);
    border-radius: 14px;
    background-color: color-mix(in srgb, currentColor 8%, transparent);
}
.pd-blk-shr-box-frame { width: 100%; aspect-ratio: 16 / 9; }
/* The opened picture: shown whole, as large as the window allows. */
.pd-blk-shr-box-pic {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: calc(100vh - 190px);
    transform-origin: center;
    box-shadow: 0 30px 80px -30px color-mix(in srgb, currentColor 55%, transparent);
}
.pd-blk-shr-box-words { width: 100%; max-width: 900px; text-align: center; }
.pd-blk-shr-box-words .pd-blk-shr-title { font-size: calc(var(--pd-general-size, 16px) * 1.5); }

/* ── Narrower blocks (by the block's own width) ────────────────── */
@container pd-blk-shr (max-width: 860px) {
    /* Two tiles across; the first takes a row of its own. */
    .pd-blk-shr.pd-blk-shr[data-pd-shr-style="tiles"] .pd-blk-shr-item:nth-child(n) { flex-basis: calc(46% - var(--pd-blk-shr-gap)); }
    .pd-blk-shr.pd-blk-shr[data-pd-shr-style="tiles"] .pd-blk-shr-item:first-child { flex-basis: 100%; }
    .pd-blk-shr[data-pd-shr-style="wall"] .pd-blk-shr-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Mid widths — a tablet held upright, or a block in a medium column.
   Every style still does its full effect here; only spacing and type are
   eased. (The switch to the simple versions is further down, at phone
   widths — it used to sit here, which turned the story, stack, tabs and
   opening panels off on an upright tablet.) */
@container pd-blk-shr (max-width: 720px) {
    .pd-blk-shr[data-pd-shr-style="tilt"] .pd-blk-shr-item:first-child,
    .pd-blk-shr[data-pd-shr-style="carousel"] .pd-blk-shr-item { gap: 20px; }
    .pd-blk-shr[data-pd-shr-style="tilt"] .pd-blk-shr-title,
    .pd-blk-shr[data-pd-shr-style="carousel"] .pd-blk-shr-title { font-size: calc(var(--pd-general-size, 16px) * 1.35); }
    .pd-blk-shr[data-pd-shr-style="wheel"] .pd-blk-shr-item { gap: 16px; }
    .pd-blk-shr[data-pd-shr-style="wheel"] .pd-blk-shr-title { font-size: calc(var(--pd-general-size, 16px) * 1.35); }
    /* The middle picture takes most of the width here, so the ones either
       side are pulled further in — enough to peek round its edges. */
    .pd-blk-shr[data-pd-shr-style="coverflow"] .pd-blk-shr-list { padding-left: 13%; padding-right: 13%; --pd-blk-shr-pull: 34%; }
    .pd-blk-shr[data-pd-shr-style="ring"] .pd-blk-shr-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pd-blk-shr[data-pd-shr-style="story"] .pd-blk-shr-list { column-gap: 28px; }
    .pd-blk-shr[data-pd-shr-style="story"] .pd-blk-shr-title { font-size: calc(var(--pd-general-size, 16px) * 1.25); }
    .pd-blk-shr[data-pd-shr-style="stack"] .pd-blk-shr-item { gap: 20px; padding: 20px; }
    .pd-blk-shr[data-pd-shr-style="stack"] .pd-blk-shr-title { font-size: calc(var(--pd-general-size, 16px) * 1.25); }
    .pd-blk-shr[data-pd-shr-style="tabs"] .pd-blk-shr-tabs { gap: 8px; }
    .pd-blk-shr-tabs .pd-blk-shr-tab { font-size: calc(var(--pd-general-size, 16px) * 0.85); }
    .pd-blk-shr[data-pd-shr-style="tabs"] .pd-blk-shr-title { font-size: calc(var(--pd-general-size, 16px) * 1.2); }
    .pd-blk-shr[data-pd-shr-style="accordion"] .pd-blk-shr-list { gap: 6px; height: clamp(240px, 52cqw, 520px); }
    .pd-blk-shr[data-pd-shr-style="story"] .pd-blk-shr-list { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: 22px; }
    .pd-blk-shr[data-pd-shr-style="story"][data-pd-shr-side="right"] .pd-blk-shr-list { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
    .pd-blk-shr[data-pd-shr-style="stack"] .pd-blk-shr-item,
    .pd-blk-shr[data-pd-shr-style="stack"][data-pd-shr-side="right"] .pd-blk-shr-item { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; padding: 16px; }
    /* More than five tabs: their titles would be squeezed to a word a
       line, so the row becomes plain bars (each screen's own title still
       shows beneath its picture). */
    .pd-blk-shr-tabs:has(.pd-blk-shr-tab:nth-child(6)) .pd-blk-shr-tab-label { display: none; }
}
/* Phone widths — the simple versions. (480, not wider: an upright
   tablet can be as little as 600 across, which leaves the block about 540.) */
@container pd-blk-shr (max-width: 480px) {
    /* Story stacks: each picture sits above its own words, nothing pinned. */
    .pd-blk-shr.pd-blk-shr[data-pd-shr-style="story"] .pd-blk-shr-list {
        display: flex;
        flex-direction: column;
        gap: 40px;
    }
    .pd-blk-shr[data-pd-shr-style="story"] .pd-blk-shr-item {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }
    .pd-blk-shr.pd-blk-shr[data-pd-shr-style="story"] .pd-blk-shr-stage .pd-blk-shr-item .pd-blk-shr-shot {
        position: static;
        opacity: 1;
        pointer-events: auto;
    }
    .pd-blk-shr.pd-blk-shr[data-pd-shr-style="story"] .pd-blk-shr-stage .pd-blk-shr-item .pd-blk-shr-copy {
        min-height: 0;
        padding: 0;
        opacity: 1;
    }
    /* Stack: plain cards one under the other — a tall card cannot pin on a
       small screen without hiding its own lower half. */
    .pd-blk-shr.pd-blk-shr[data-pd-shr-style="stack"] .pd-blk-shr-item {
        position: static;
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
        padding: 16px;
        margin-bottom: 20px;
        transform: none;
        filter: none;
    }
    .pd-blk-shr.pd-blk-shr[data-pd-shr-style="stack"] .pd-blk-shr-shot { order: 0; }
    /* Accordion: slim panels cannot be read at this width, so every
       screen is shown whole, one under the other. */
    .pd-blk-shr.pd-blk-shr[data-pd-shr-style="accordion"] .pd-blk-shr-list {
        flex-direction: column;
        gap: 32px;
        height: auto;
        margin-bottom: 0;
    }
    .pd-blk-shr.pd-blk-shr[data-pd-shr-style="accordion"] .pd-blk-shr-list .pd-blk-shr-item { flex: 0 0 auto; cursor: auto; }
    .pd-blk-shr.pd-blk-shr[data-pd-shr-style="accordion"] .pd-blk-shr-list .pd-blk-shr-shot { height: auto; aspect-ratio: var(--pd-blk-shr-ratio); background-position: top center; }
    .pd-blk-shr.pd-blk-shr[data-pd-shr-style="accordion"] .pd-blk-shr-list .pd-blk-shr-item .pd-blk-shr-copy {
        position: static;
        margin-top: 14px;
        opacity: 1;
        visibility: visible;
    }
    /* Cover flow: ONE screen at a time, centred, nothing peeking in from the
       sides (owner, 21 Oct 2026). The side room and the angled neighbours need
       a wide block; on a phone they pushed the middle screen off centre and
       cut the next one at the edge. Swiping and the arrows still step through. */
    .pd-blk-shr.pd-blk-shr[data-pd-shr-style="coverflow"] .pd-blk-shr-list {
        padding-left: 0;
        padding-right: 0;
        --pd-blk-shr-pull: 0%;
    }
    .pd-blk-shr.pd-blk-shr[data-pd-shr-style="coverflow"] .pd-blk-shr-list .pd-blk-shr-item {
        flex: 0 0 100%;
        transform: none;
        opacity: calc(1 - var(--pd-blk-shr-o) * 1.6);
    }
    /* Tabs: the titles would crowd, so the row becomes plain bars (the
       screen's own title still shows beneath its picture). */
    .pd-blk-shr-tabs .pd-blk-shr-tab-label { display: none; }
    .pd-blk-shr[data-pd-shr-style="tabs"] .pd-blk-shr-tabs { gap: 6px; margin-bottom: 12px; }
}
/* A very short window (a phone on its side): the pinned styles need
   height to work in, so they also take their simple versions here. */
@media (max-height: 480px) {
    /* Story stacks: each picture sits above its own words, nothing pinned. */
    .pd-blk-shr.pd-blk-shr[data-pd-shr-style="story"] .pd-blk-shr-list {
        display: flex;
        flex-direction: column;
        gap: 40px;
    }
    .pd-blk-shr[data-pd-shr-style="story"] .pd-blk-shr-item {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }
    .pd-blk-shr.pd-blk-shr[data-pd-shr-style="story"] .pd-blk-shr-stage .pd-blk-shr-item .pd-blk-shr-shot {
        position: static;
        opacity: 1;
        pointer-events: auto;
    }
    .pd-blk-shr.pd-blk-shr[data-pd-shr-style="story"] .pd-blk-shr-stage .pd-blk-shr-item .pd-blk-shr-copy {
        min-height: 0;
        padding: 0;
        opacity: 1;
    }
    /* Stack: plain cards one under the other — a tall card cannot pin on a
       small screen without hiding its own lower half. */
    .pd-blk-shr.pd-blk-shr[data-pd-shr-style="stack"] .pd-blk-shr-item {
        position: static;
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
        padding: 16px;
        margin-bottom: 20px;
        transform: none;
        filter: none;
    }
    .pd-blk-shr.pd-blk-shr[data-pd-shr-style="stack"] .pd-blk-shr-shot { order: 0; }
}
/* The pop-up sits on the page body, so it follows the window, not the block. */
@media (max-width: 720px) {
    .pd-blk-shr-box { padding: 10px; }
}
@container pd-blk-shr (max-width: 520px) {
    .pd-blk-shr { --pd-blk-shr-gap: 14px; }
    .pd-blk-shr.pd-blk-shr.pd-blk-shr[data-pd-shr-style="tiles"] .pd-blk-shr-item:nth-child(n) { flex-basis: 100%; }
    .pd-blk-shr[data-pd-shr-style="tiles"] .pd-blk-shr-item { padding: 12px; }
    /* The pinned glide needs room; on a small block the lean is dropped. */
    .pd-blk-shr.pd-blk-shr[data-pd-shr-style="tilt"] .pd-blk-shr-shot,
    .pd-blk-shr.pd-blk-shr[data-pd-shr-style="carousel"] .pd-blk-shr-shot,
    .pd-blk-shr.pd-blk-shr[data-pd-shr-style="wheel"] .pd-blk-shr-shot { transform: none; }
    .pd-blk-shr[data-pd-shr-style="cards"] .pd-blk-shr-item { flex-basis: 78cqw; }
    .pd-blk-shr[data-pd-shr-style="fan"] .pd-blk-shr-item { width: 40cqw; }
    .pd-blk-shr[data-pd-shr-style="ring"] .pd-blk-shr-ringed { --pd-blk-shr-w: 60cqw; }
    .pd-blk-shr-back { font-size: var(--pd-general-size, 16px); }
    .pd-blk-shr[data-pd-shr-frame="1"] .pd-blk-shr-shot { padding-top: 20px; }
    .pd-blk-shr[data-pd-shr-frame="1"] .pd-blk-shr-shot::before { top: 7px; left: 9px; width: 6px; height: 6px;
        box-shadow: 11px 0 0 color-mix(in srgb, currentColor 34%, transparent),
                    22px 0 0 color-mix(in srgb, currentColor 34%, transparent); }
}

/* ── Visitors who ask for less movement get a still version ────── */
@media (prefers-reduced-motion: reduce) {
    .pd-blk-shr.pd-blk-shr .pd-blk-shr-list .pd-blk-shr-shot { transform: none; transition: none; }
    .pd-blk-shr.pd-blk-shr[data-pd-shr-style="stack"] .pd-blk-shr-item { transform: none; filter: none; }
    .pd-blk-shr-wall-row { animation: none; }
    /* Wheel: back to the screens one under the other, nothing pinned. */
    .pd-blk-shr.pd-blk-shr[data-pd-shr-style="wheel"] .pd-blk-shr-wheeled { height: auto; }
    .pd-blk-shr.pd-blk-shr[data-pd-shr-style="wheel"] .pd-blk-shr-wheeled .pd-blk-shr-list {
        position: static;
        height: auto;
        display: flex;
        flex-direction: column;
        gap: 64px;
        perspective: none;
    }
    .pd-blk-shr.pd-blk-shr[data-pd-shr-style="wheel"] .pd-blk-shr-wheeled .pd-blk-shr-list .pd-blk-shr-item { transform: none; opacity: 1; pointer-events: auto; }
    .pd-blk-shr.pd-blk-shr[data-pd-shr-style="coverflow"] .pd-blk-shr-list .pd-blk-shr-item { transform: none; opacity: 1; }
    .pd-blk-shr.pd-blk-shr[data-pd-shr-style="coverflow"] .pd-blk-shr-list .pd-blk-shr-copy { opacity: 1; }
    .pd-blk-shr.pd-blk-shr[data-pd-shr-style="ring"] .pd-blk-shr-ringed .pd-blk-shr-list { animation: none; }
    .pd-blk-shr[data-pd-shr-style="accordion"] .pd-blk-shr-item,
    .pd-blk-shr[data-pd-shr-style="fan"] .pd-blk-shr-item { transition: none; }
    .pd-blk-shr-shot.pd-blk-shr-zooming { animation: none; }
    .pd-blk-shr.pd-blk-shr .pd-blk-shr-live .pd-blk-shr-item,
    .pd-blk-shr.pd-blk-shr .pd-blk-shr-live .pd-blk-shr-item .pd-blk-shr-copy { translate: none; transition: none; animation: none; }
    .pd-blk-shr.pd-blk-shr .pd-blk-shr-item .pd-blk-shr-shot::after { animation: none; }
    .pd-blk-shr-tab-on .pd-blk-shr-tab-bar { animation: none; width: 100%; }
    .pd-blk-shr[data-pd-shr-style="cards"] .pd-blk-shr-item:hover { transform: none; }
    .pd-blk-shr-box, .pd-blk-shr-box-panel, .pd-blk-shr-shot .pd-blk-shr-play { transition: none; }
    .pd-blk-shr-box-panel { scale: 1; }
    .pd-blk-shr[data-pd-shr-style="story"] .pd-blk-shr-shot,
    .pd-blk-shr[data-pd-shr-style="story"] .pd-blk-shr-copy,
    .pd-blk-shr[data-pd-shr-style="tiles"] .pd-blk-shr-item { transition: none; }
    .pd-blk-shr[data-pd-shr-style="tiles"] .pd-blk-shr-item:hover { transform: none; }
}

/* ── Edge to edge on an admin page (owner, 10 Oct) ───────────────────────
 * An admin page dresses each block as a card (.panel_s > .panel-body). The
 * rule: a style whose pictures travel off the side ON PURPOSE — the moving
 * wall, cover flow, the swipe cards and the carousel — gives up that card's
 * inner margin, so they leave at the card's edge and follow its corners,
 * not at an invisible line inside it. Every other style keeps the margin.
 * Each block has a card to itself, so no other block loses its margin; how
 * wide the block is stays the owner's choice of columns. The wall also
 * reaches the card's top and bottom; the other three keep the block's own
 * space there for their arrows, dots and words. */
html body .pd-dl-apb-card > .panel_s > .panel-body:has(> .pd-blk-shr:is([data-pd-shr-style="wall"], [data-pd-shr-style="coverflow"], [data-pd-shr-style="cards"], [data-pd-shr-style="carousel"])),
html body .pd-apb-pcard.panel_s > .panel-body:has(> .pd-blk-shr:is([data-pd-shr-style="wall"], [data-pd-shr-style="coverflow"], [data-pd-shr-style="cards"], [data-pd-shr-style="carousel"])) {
    padding: 0;
    border-radius: inherit;
    overflow: clip;
}
html body .pd-dl-apb-card > .panel_s > .panel-body > .pd-blk-shr[data-pd-shr-style="wall"],
html body .pd-apb-pcard.panel_s > .panel-body > .pd-blk-shr[data-pd-shr-style="wall"] {
    margin-top: 0;
    margin-bottom: 0;
}