/* A complete screen-height native gallery, enhanced in place. */
.patternpaste-warp-reel {
  --patternpaste-reel-height: 100svh;
  --patternpaste-reel-width: 64%;
  --patternpaste-reel-image-height: var(--patternpaste-reel-height);
  position: relative;
  min-width: 0;
  color: inherit;
  background: inherit;
}
/* Pin this inner viewport, never the theme's alignfull layout child.
   Containment belongs here too: containing the root breaks fixed pinning. */
.patternpaste-warp-reel__viewport {
  position: relative; min-width: 0; width: 100%;
  overflow: clip; isolation: isolate; container-type: inline-size;
  color: inherit; background: inherit;
}
.patternpaste-warp-reel, .patternpaste-warp-reel * { box-sizing: border-box; }
.patternpaste-warp-reel__intro {
  position: absolute; z-index: 3; top: 1.5rem; left: clamp(1.25rem, 3vw, 3rem);
  max-width: min(18rem, calc(100% - 2.5rem));
  color: inherit; background: inherit;
}
.patternpaste-warp-reel__intro > * { margin-block: 0 .5rem; }
.patternpaste-warp-reel__stage { position: relative; overflow: hidden; min-width: 0; }
.patternpaste-warp-reel__source {
  display: grid; grid-auto-flow: column; grid-auto-columns: 100%;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  align-items: stretch;
}
.patternpaste-warp-reel__source::-webkit-scrollbar { display: none; }
.patternpaste-warp-reel__project { min-width: 0; scroll-snap-align: start; }
.patternpaste-warp-reel__project > .wp-block-group {
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(var(--patternpaste-reel-image-height), auto);
  max-width: none; margin: 0; padding: 0;
}
.patternpaste-warp-reel__project > .wp-block-group > .wp-block-image:first-child {
  grid-area: 1 / 1; width: 100%; max-width: none; margin: 0;
}
.patternpaste-warp-reel__project > .wp-block-group > .wp-block-image:first-child img {
  width: var(--patternpaste-reel-width); height: var(--patternpaste-reel-image-height);
  display: block; margin-inline: auto; object-fit: cover;
}
/* The author owns this opaque core Group, including its foreground and ground.
   It survives deactivation as an ordinary caption below the picture. */
.patternpaste-warp-reel__project > .wp-block-group > .wp-block-group {
  grid-area: 1 / 1; align-self: end; justify-self: center;
  position: relative; z-index: 2;
  width: min(36rem, calc(var(--patternpaste-reel-width) - 3rem));
  max-width: calc(100% - 2.5rem);
  margin: 0 0 5.5rem;
}
.patternpaste-warp-reel__surface { display: none; }
.patternpaste-warp-reel.is-live .patternpaste-warp-reel__surface {
  display: block; position: absolute; inset: 0;
  height: var(--patternpaste-reel-image-height); z-index: 1;
  cursor: auto; touch-action: pan-y pinch-zoom;
}
.patternpaste-warp-reel.is-dragging .patternpaste-warp-reel__surface { cursor: grabbing; }
.patternpaste-warp-reel.is-drag-reel .patternpaste-warp-reel__surface { cursor: grab; }
.patternpaste-warp-reel.is-scroll-reel .patternpaste-warp-reel__surface { pointer-events: none; }
.patternpaste-warp-reel__surface canvas { display: block; width: 100%; height: 100%; pointer-events: none; }
/* Keep the whole DOM overlay in its own stacking context above WebGL.
   Splitting individual plate layers produced mirrored occlusion rectangles. */
.patternpaste-warp-reel.is-live .patternpaste-warp-reel__source {
  position: relative; z-index: 2; pointer-events: none;
  overflow: hidden; grid-auto-flow: row;
}
.patternpaste-warp-reel.is-live .patternpaste-warp-reel__project { grid-area: 1 / 1; }
/* Opacity retains the active photograph's alt text. Only the overlay plate
   intercepts input; the rest of the project must not cover the drag surface. */
.patternpaste-warp-reel.is-live .patternpaste-warp-reel__project { pointer-events: none; }
.patternpaste-warp-reel.is-live .patternpaste-warp-reel__project > .wp-block-group > .wp-block-group { pointer-events: auto; }
.patternpaste-warp-reel.is-live .patternpaste-warp-reel__project > .wp-block-group > .wp-block-image:first-child { opacity: 0; pointer-events: none; }
.patternpaste-warp-reel__controls {
  position: absolute; z-index: 3; inset: auto 0 0;
  display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap;
  gap: .75rem; padding: 1rem clamp(1.25rem, 3vw, 3rem);
  visibility: hidden;
  font-size: max(.875rem, var(--wp--preset--font-size--small, .875rem));
  color: inherit; background: inherit;
}
.patternpaste-warp-reel.is-live .patternpaste-warp-reel__controls { visibility: visible; }
.patternpaste-warp-reel__hint { margin-right: auto; visibility: visible; }
.patternpaste-warp-reel__hint-live, .patternpaste-warp-reel__hint-drag, .patternpaste-warp-reel__hint-scroll, .patternpaste-warp-reel__hint-touch { display: none; }
.patternpaste-warp-reel.is-live .patternpaste-warp-reel__hint-touch,
.patternpaste-warp-reel.is-drag-reel:not([data-patternpaste-wheel="false"]) .patternpaste-warp-reel__hint-live,
.patternpaste-warp-reel.is-drag-reel[data-patternpaste-wheel="false"] .patternpaste-warp-reel__hint-drag,
.patternpaste-warp-reel.is-scroll-reel .patternpaste-warp-reel__hint-scroll { display: inline; }
.patternpaste-warp-reel.is-live .patternpaste-warp-reel__hint-rest,
.patternpaste-warp-reel:is(.is-drag-reel, .is-scroll-reel) .patternpaste-warp-reel__hint-touch { display: none; }
.patternpaste-warp-reel__hint, .patternpaste-warp-reel [data-patternpaste-count] {
  padding: .25rem .5rem;
  color: var(--wp--preset--color--contrast, var(--wp--preset--color--black));
  background: var(--wp--preset--color--base, var(--wp--preset--color--white));
}
.patternpaste-warp-reel__controls button {
  font: inherit; font-size: 1.25rem;
  color: var(--wp--preset--color--contrast, var(--wp--preset--color--black));
  background: var(--wp--preset--color--base, var(--wp--preset--color--white));
  border: 1px solid currentColor; border-radius: 50%;
  width: 2.75rem; height: 2.75rem; padding: 0; cursor: pointer;
}
.patternpaste-warp-reel__controls button[aria-disabled="true"] { cursor: default; border-style: dashed; }
.patternpaste-warp-reel :is(button, a, [tabindex]):focus-visible { outline: 2px solid currentColor; outline-offset: -3px; }
.patternpaste-warp-reel__status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); margin: 0; }
.patternpaste-warp-reel__canvas { display: grid; gap: 2rem; padding: 1.25rem; }
.patternpaste-warp-reel__canvas > [data-type="core/group"] { border: 1px solid currentColor; padding: 1rem; min-width: 0; }
.patternpaste-warp-reel__canvas > :not([data-type="core/group"]) { border-left: 3px solid currentColor; padding-left: 1rem; }
.patternpaste-warp-reel.is-editing .wp-block-image img { max-height: 20rem; width: 100%; object-fit: cover; }
@media (max-width: 600px) { .patternpaste-warp-reel { --patternpaste-reel-width: 94%; } }
@container (max-width: 600px) {
  .patternpaste-warp-reel__controls { gap: .5rem; padding: .75rem 1.25rem; }
  .patternpaste-warp-reel__hint { flex-basis: 100%; }
  .patternpaste-warp-reel__project > .wp-block-group > .wp-block-group { width: calc(100% - 2.5rem); }
}
/* A wide caption reads as a compact title/action row, then its description.
   Typography, padding and paired colours remain the author's core-block styles. */
@container (min-width: 700px) {
  .patternpaste-warp-reel__project > .wp-block-group > .wp-block-group {
    display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem;
  }
  .patternpaste-warp-reel__project > .wp-block-group > .wp-block-group > * { margin: 0; }
  .patternpaste-warp-reel__project > .wp-block-group > .wp-block-group > :is(h1,h2,h3,h4,h5,h6) { flex: 1 1 12rem; }
  .patternpaste-warp-reel__project > .wp-block-group > .wp-block-group > .wp-block-buttons { order: 1; }
  .patternpaste-warp-reel__project > .wp-block-group > .wp-block-group > p { order: 2; flex-basis: 100%; }
}
/* Narrow screens use native photos. Their compact height follows the width,
   never the desktop screen-height control. The next photo peeks into view. */
@media (max-width: 781px) {
  .patternpaste-warp-reel { --patternpaste-reel-image-height: clamp(12rem, 62vw, 24rem); }
  .patternpaste-warp-reel__source { grid-auto-columns: 92%; gap: 1rem; scrollbar-width: thin; }
  .patternpaste-warp-reel__source::-webkit-scrollbar { display: block; height: .35rem; }
  .patternpaste-warp-reel__project > .wp-block-group > .wp-block-image:first-child img { width: 100%; }
  .patternpaste-warp-reel__intro { position: relative; inset: auto; max-width: none; padding: 1rem 1.25rem; }
  .patternpaste-warp-reel__intro > :last-child { margin-bottom: 0; }
  .patternpaste-warp-reel__project > .wp-block-group { grid-template-rows: var(--patternpaste-reel-image-height) auto; }
  .patternpaste-warp-reel__project > .wp-block-group > .wp-block-group {
    grid-area: 2 / 1; align-self: start; width: 100%; max-width: none; margin: 0;
  }
  .patternpaste-warp-reel__controls { position: relative; inset: auto; display: block; padding: .5rem 1.25rem; }
  .patternpaste-warp-reel__controls button, .patternpaste-warp-reel [data-patternpaste-count] { display: none; }
  /* Reserve the same hint row before and after enhancement. The native hint
     is longer; letting only that label wrap causes a layout shift at boot. */
  .patternpaste-warp-reel__hint { flex-basis: 100%; }
}
@media print {
  .patternpaste-warp-reel__source { display: block !important; overflow: visible !important; }
  .patternpaste-warp-reel__project { visibility: visible !important; break-inside: avoid; }
  .patternpaste-warp-reel__project > .wp-block-group { display: block; }
  .patternpaste-warp-reel.is-live .patternpaste-warp-reel__project > .wp-block-group > .wp-block-image:first-child { opacity: 1; }
  .patternpaste-warp-reel__project > .wp-block-group > .wp-block-group { margin: 0 auto; }
  .patternpaste-warp-reel__surface, .patternpaste-warp-reel__controls, .patternpaste-warp-reel__intro { display: none !important; }
}

/* Guidance is optional; navigation and accessible names are independent. */
.patternpaste-warp-reel[data-patternpaste-instructions="false"] .patternpaste-warp-reel__hint { display: none; }
@media (max-width: 781px) {
  .patternpaste-warp-reel[data-patternpaste-instructions="false"] .patternpaste-warp-reel__controls { display: none; }
}