/* Pagime shared frontend styles: layout primitives and icons. Widget styles live in widgets/<id>/style.css. */
/* Pagime — widget base styles (frontend + builder canvas). Kept small and low-specificity
   so imported designs and theme styles stay in control. */
.rp-section { padding: 64px 24px; }
.rp-container { max-width: 1140px; margin-inline: auto; display: flex; flex-wrap: wrap; gap: 24px; }
.rp-container.rp-stack { flex-direction: column; }
.rp-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.rp-col-1-3 { flex: 1 1 0; }
.rp-col-2-3 { flex: 2 1 0; }
@media (max-width: 767px) { .rp-container { flex-direction: column; } }
@media (max-width: 767px) { .rp-col { flex-basis: auto; } }
.rp-document img { max-width: 100%; }
/* Navigation menu: toggle on small screens */
/* Media never wider than its container */
/* Pagime icons */
.pg-icon { display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em; flex: none; }
/* Pagime form fields */
/* Custom Posts widget: one wrapper for the list, one per record */

/* Widgets added since 2.9.7 fill their container by default. :where() keeps this at zero specificity, so the
   Style tab (width, max-width, alignment, per device) and each widget's own settings always win. */
:where(.pg-w-full) { width: 100%; max-width: 100%; box-sizing: border-box; }

/* ------------------------------------------------------------------
 * Image media effects (Image and Image gallery widgets, 2.9.7).
 * Settings set --pg-img-dur, --pg-img-ease and --pg-img-scale on the widget.
 * ------------------------------------------------------------------ */
.pg-img-media { position: relative; display: block; overflow: hidden; --pg-img-dur: 400ms; --pg-img-ease: ease; --pg-img-scale: 1.1; }
:where(.pg-img-media) img { display: block; width: 100%; height: auto; }
.pg-img-media img { transition: transform var(--pg-img-dur) var(--pg-img-ease), opacity var(--pg-img-dur) var(--pg-img-ease); }
.pg-img-media.is-clickable { cursor: pointer; }
.pg-img-media.is-clickable:focus-visible { outline: 3px solid currentColor; outline-offset: 2px; }
/* Hover zoom in / out (zoom out starts enlarged). A parent with Join Childs (data-pg-join) plays them too. */
[data-pg-hover="zoom-in"] .pg-img-media:hover img, [data-pg-hover="zoom-in"] .pg-img-media:focus-visible img, [data-pg-join]:hover [data-pg-hover="zoom-in"] .pg-img-media img { transform: scale(var(--pg-img-scale)); }
[data-pg-hover="zoom-out"] .pg-img-media img { transform: scale(var(--pg-img-scale)); }
[data-pg-hover="zoom-out"] .pg-img-media:hover img, [data-pg-join]:hover [data-pg-hover="zoom-out"] .pg-img-media img { transform: scale(1); }
/* Click zoom (toggled). */
.pg-img-media[data-pg-click="zoom-in"].is-zoomed img { transform: scale(var(--pg-img-scale)); }
.pg-img-media[data-pg-click="zoom-out"] img { transform: scale(var(--pg-img-scale)); }
.pg-img-media[data-pg-click="zoom-out"].is-zoomed img { transform: scale(1); }
/* Flip: front and back image; turned on hover or by a click (is-flipped). */
.pg-img-media.has-flip { overflow: visible; perspective: 1200px; }
.pg-img-flipper { position: relative; display: block; transform-style: preserve-3d; transition: transform var(--pg-img-dur) var(--pg-img-ease); }
.pg-img-flipper > img { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.pg-img-flipper > .pg-img-back { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: rotateY(180deg); }
.pg-flip-v .pg-img-flipper > .pg-img-back { transform: rotateX(180deg); }
[data-pg-hover="flip"] .pg-img-media:hover .pg-img-flipper, [data-pg-join]:hover [data-pg-hover="flip"] .pg-img-media .pg-img-flipper, .pg-img-media.is-flipped .pg-img-flipper { transform: rotateY(180deg); }
.pg-flip-v[data-pg-hover="flip"] .pg-img-media:hover .pg-img-flipper, [data-pg-join]:hover .pg-flip-v[data-pg-hover="flip"] .pg-img-media .pg-img-flipper, .pg-flip-v .pg-img-media.is-flipped .pg-img-flipper { transform: rotateX(180deg); }
@media (prefers-reduced-motion: reduce) { .pg-img-media img, .pg-img-flipper { transition-duration: 1ms !important; } }

/* Lightbox. */
.pg-lb { position: fixed; inset: 0; z-index: 100000; display: grid; grid-template: 1fr auto / 1fr; place-items: center; padding: 56px 72px 24px; opacity: 0; transition: opacity .2s ease; }
.pg-lb.has-thumbs { padding-bottom: 12px; }
.pg-lb.is-open { opacity: 1; }
.pg-lb-backdrop { position: absolute; inset: 0; background: rgba(9, 9, 11, .92); }
.pg-lb-stage { position: relative; margin: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 100%; max-height: 100%; min-height: 0; }
.pg-lb-img { display: block; max-width: min(1400px, 100%); max-height: calc(100vh - 160px); width: auto; height: auto; object-fit: contain; border-radius: 6px; box-shadow: 0 30px 80px rgba(0, 0, 0, .5); opacity: 0; transform: scale(.98); transition: opacity .25s ease, transform .25s ease; }
.pg-lb.has-thumbs .pg-lb-img { max-height: calc(100vh - 230px); }
.pg-lb-img.is-in { opacity: 1; transform: none; }
.pg-lb-cap { color: #e5e7eb; text-align: center; font: 15px/1.5 system-ui, sans-serif; max-width: 760px; display: flex; flex-direction: column; gap: 2px; }
.pg-lb-cap[hidden] { display: none; }
.pg-lb-title { font-weight: 600; }
.pg-lb-desc { opacity: .75; font-size: 14px; }
.pg-lb-desc:empty, .pg-lb-title:empty { display: none; }
.pg-lb button { position: absolute; display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; cursor: pointer; transition: background-color .2s ease; }
.pg-lb button:hover { background: rgba(255, 255, 255, .24); }
.pg-lb button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.pg-lb button svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pg-lb-close { top: 12px; right: 12px; }
.pg-lb-prev { left: 14px; top: 50%; margin-top: -23px; }
.pg-lb-next { right: 14px; top: 50%; margin-top: -23px; }
.pg-lb-count { position: absolute; top: 22px; left: 22px; color: #d4d4d8; font: 13px system-ui, sans-serif; }
.pg-lb-thumbs { position: relative; display: flex; gap: 8px; overflow-x: auto; max-width: 100%; padding: 8px 4px; }
.pg-lb-thumbs button { position: static; width: 64px; height: 48px; border-radius: 6px; overflow: hidden; flex: none; opacity: .5; background: none; }
.pg-lb-thumbs button[aria-current="true"] { opacity: 1; outline: 2px solid #fff; }
.pg-lb-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 640px) { .pg-lb { padding: 56px 8px 16px; } .pg-lb-prev, .pg-lb-next { top: auto; bottom: 18px; margin: 0; } .pg-lb-img { max-height: calc(100vh - 190px); } }
@media (prefers-reduced-motion: reduce) { .pg-lb, .pg-lb-img { transition: none; } }

/* Background video (2.9.8). Layers inside the section: its own background, then this video
   layer (poster and fallback colour first), then the overlay (::before), then the content. */
:where(.pg-has-bgvideo) { position: relative; isolation: isolate; }
.pg-bg-video { position: absolute; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; border-radius: inherit; background-size: var(--pg-bgv-fit, cover); background-position: var(--pg-bgv-pos, 50% 50%); background-repeat: no-repeat; }
.pg-bg-video[hidden] { display: none; }
.pg-bg-video .pg-bgv-media { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; margin: 0; border: 0; object-fit: var(--pg-bgv-fit, cover); object-position: var(--pg-bgv-pos, 50% 50%); opacity: 0; transition: opacity .6s ease; }
.pg-bg-video .pg-bgv-frame { inset: auto; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.pg-bg-video.is-playing .pg-bgv-media { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .pg-bg-video .pg-bgv-media { transition: none; } }

/* Custom fields of repeatable widgets (3.2.2). Zero specificity: widget and Style-tab styles override them. */
:where(.pg-cf) { margin: 0.4em 0 0; }
:where(img.pg-cf--image) { display: block; max-width: 100%; height: auto; }
:where(.pg-cf--icon) { display: inline-flex; line-height: 1; }
:where(.pg-cf--icon) svg { width: 1.25em; height: 1.25em; fill: currentColor; }
:where(.pg-cf--textarea) { white-space: pre-line; }