/* ---------------------------------------------------------------------------
 * cms.css: the layout of everything the CMS draws on a site, published for every site next to embed.js and
 * lightbox.js (<CDN>/<domain>/cms/cms.css). The site loads it once, in <head>, before its own style sheet:
 *
 *   <link rel="stylesheet" href="https://<CDN>/<domain>/cms/cms.css">
 *
 * or the same file from the site's own address when its security policy allows only its own styles. gallery.html,
 * embed.js and lightbox.js carry no inline style at all: their layout is here, so a site's policy can say
 * style-src 'self' (NexVerto-Standards websites/CMS.md section 4). The scripts set only values they measure while the
 * page runs (the banner's height as the page's top padding, the poster card's distance from the header, the
 * lightbox's slide and zoom) through single style properties, which such a policy allows.
 *
 * Layout only: no colour, no typeface, no brand. The site gives every colour and font in its own style sheet and
 * through these variables (nothing here gives them a value; until the site sets them, what they colour has none):
 *   gallery   --cms-gal-gap, --cms-gal-min, --cms-gal-max, --cms-gal-ratio
 *   lightbox  --cms-lb-backdrop, --cms-lb-ink, --cms-lb-control, --cms-lb-control-ink, --cms-lb-radius
 *             (the control colours also dress the gallery carousel's arrows and counter)
 *   banner    --content-banner-bg, --content-banner-ink
 *   poster    --content-poster-card, --content-poster-ink, --content-poster-border, --content-poster-radius,
 *             --content-poster-font, --content-poster-scrim
 * A banner or poster drawn with data-styles="none" on the script tag carries data-cms-bare and gets none of this.
 * ------------------------------------------------------------------------- */

/* ----- the gallery (gallery.html) ------------------------------------------------------------------------------- */
.cms-gal-items{display:grid;gap:var(--cms-gal-gap,12px);margin:0 0 1.5em}
.cms-gal-item{margin:0}
.cms-gal-link{display:block;cursor:zoom-in}
.cms-gal-item img{display:block;width:100%;height:auto}
.cms-gal figcaption{margin-top:.4em}
.cms-gal--grid .cms-gal-items{grid-template-columns:repeat(auto-fill,minmax(var(--cms-gal-min,200px),1fr))}
.cms-gal--grid .cms-gal-item img{aspect-ratio:1/1;object-fit:cover}
.cms-gal--vertical .cms-gal-items,.cms-gal--vertical .cms-gal-album{grid-template-columns:1fr;max-width:var(--cms-gal-max,900px);margin-left:auto;margin-right:auto}
.cms-gal-car{max-width:var(--cms-gal-max,960px);margin:0 auto 1.5em}
.cms-gal-cstage{position:relative}
.cms-gal-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.cms-gal-slide{flex:0 0 100%;margin:0;scroll-snap-align:center}
.cms-gal-slide img{display:block;width:100%;height:auto;aspect-ratio:var(--cms-gal-ratio,3/2);object-fit:cover}

/* the carousel's controls, added by lightbox.js */
[data-cms-carousel].is-live .cms-gal-track{scrollbar-width:none}
[data-cms-carousel].is-live .cms-gal-track::-webkit-scrollbar{display:none}
.cms-gal-cbtn{position:absolute;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:44px;height:44px;border:0;border-radius:50%;background:var(--cms-lb-control);color:var(--cms-lb-control-ink);font-size:24px;line-height:1;cursor:pointer;z-index:2}
.cms-gal-cbtn:hover{opacity:.85}
.cms-gal-cbtn:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.cms-gal-cbtn[disabled]{opacity:.3;cursor:default}
.cms-gal-cprev{left:10px}
.cms-gal-cnext{right:10px}
.cms-gal-ccount{position:absolute;left:10px;top:10px;padding:3px 10px;border-radius:12px;background:var(--cms-lb-control);color:var(--cms-lb-control-ink);font-size:12px;z-index:2}
.cms-gal-cthumbs{display:flex;gap:8px;margin-top:10px;overflow-x:auto;padding:3px;scrollbar-width:thin}
.cms-gal-cthumb{flex:0 0 auto;padding:0;border:0;background:none;cursor:pointer;opacity:.5;transition:opacity .2s;border-radius:2px}
.cms-gal-cthumb:hover{opacity:.85}
.cms-gal-cthumb[aria-current="true"]{opacity:1;outline:2px solid currentColor;outline-offset:2px}
.cms-gal-cthumb img{display:block;width:84px;height:60px;object-fit:cover}
@media (max-width:640px){.cms-gal-cbtn{width:36px;height:36px;font-size:20px}.cms-gal-cthumb img{width:62px;height:46px}}

/* ----- pictures inside a post body: the size and side the editor chose (classes body_html carries) --------------- */
:is(.content-body,.cms-post-body) img.content-w25{width:25%}
:is(.content-body,.cms-post-body) img.content-w50{width:50%}
:is(.content-body,.cms-post-body) img.content-w75{width:75%}
:is(.content-body,.cms-post-body) img.content-w100{width:100%}
:is(.content-body,.cms-post-body) img.content-left{float:left;margin:0 16px 12px 0}
:is(.content-body,.cms-post-body) img.content-right{float:right;margin:0 0 12px 16px}
:is(.content-body,.cms-post-body) img.content-center{display:block;margin:12px auto}
:is(.content-body,.cms-post-body)::after{content:"";display:block;clear:both}

/* ----- the picture viewer (lightbox.js) ----------------------------------------------------------------------- */
.cms-lb{position:fixed;inset:0;width:100vw;height:100vh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:var(--cms-lb-backdrop);color:var(--cms-lb-ink);overflow:hidden;touch-action:none}
.cms-lb[open]{display:block;animation:cmsLbIn .22s ease}
@keyframes cmsLbIn{from{opacity:0}to{opacity:1}}
.cms-lb-stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;overflow:hidden}
.cms-lb-track{display:flex;height:100%;width:100%;will-change:transform}
.cms-lb-track.is-moving{transition:transform .32s cubic-bezier(.2,.7,.2,1)}
.cms-lb-slide{flex:0 0 100%;height:100%;display:flex;align-items:center;justify-content:center;padding:56px 16px 92px;box-sizing:border-box}
.cms-lb-img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;user-select:none;-webkit-user-drag:none;transform-origin:0 0;border-radius:var(--cms-lb-radius,2px)}
.cms-lb-img.is-zoomable{cursor:zoom-in}
.cms-lb.is-zoomed .cms-lb-img{cursor:grab}
.cms-lb-spin{position:absolute;width:34px;height:34px;border:3px solid currentColor;border-top-color:transparent;border-radius:50%;opacity:.6;animation:cmsLbSpin .8s linear infinite}
@keyframes cmsLbSpin{to{transform:rotate(360deg)}}
.cms-lb-btn{position:absolute;display:flex;align-items:center;justify-content:center;width:46px;height:46px;border:0;border-radius:50%;background:var(--cms-lb-control);color:var(--cms-lb-control-ink);font-size:26px;line-height:1;cursor:pointer;z-index:3;transition:opacity .15s}
.cms-lb-btn:hover{opacity:.85}
.cms-lb-btn:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.cms-lb-prev{left:14px;top:50%;margin-top:-23px}
.cms-lb-next{right:14px;top:50%;margin-top:-23px}
.cms-lb-close{right:14px;top:12px}
.cms-lb-count{position:absolute;left:18px;top:24px;font-size:13px;letter-spacing:.06em;opacity:.85;z-index:3}
.cms-lb-foot{position:absolute;left:0;right:0;bottom:0;padding:14px 18px 20px;text-align:center;z-index:3}
.cms-lb-cap{margin:0 auto;max-width:72ch;font-size:15px;line-height:1.45}
.cms-lb-link{display:inline-block;margin-top:8px;padding:7px 14px;border-radius:999px;background:var(--cms-lb-control);color:var(--cms-lb-control-ink);text-decoration:none;font-size:13px;letter-spacing:.08em;text-transform:uppercase}
.cms-lb-link:hover{opacity:.85}
.cms-lb-cap[hidden],.cms-lb-link[hidden]{display:none}
.cms-lb.is-single .cms-lb-prev,.cms-lb.is-single .cms-lb-next{display:none}
.cms-lb.is-zoomed .cms-lb-foot,.cms-lb.is-zoomed .cms-lb-prev,.cms-lb.is-zoomed .cms-lb-next{opacity:0;pointer-events:none}
html.cms-lb-lock{overflow:hidden}
@media (max-width:640px){.cms-lb-prev,.cms-lb-next{display:none}.cms-lb-slide{padding:52px 0 86px}}

/* ----- the banner (embed.js): a strip fixed to the top or the bottom of the page ------------------------------ */
.content-banner:not([data-cms-bare]){position:fixed;left:0;right:0;z-index:99998;padding:10px 44px 10px 16px;font-family:inherit;font-size:15px;line-height:1.4;text-align:center;background:var(--content-banner-bg);color:var(--content-banner-ink)}
.content-banner[data-position="top"]:not([data-cms-bare]){top:0}
.content-banner[data-position="bottom"]:not([data-cms-bare]){bottom:0}
.content-banner-link:not([data-cms-bare]){color:inherit;font-weight:600;text-decoration:underline}
.content-banner-close:not([data-cms-bare]){position:absolute;right:8px;top:6px;background:none;border:0;color:inherit;font-size:22px;line-height:1;cursor:pointer}

/* ----- the poster (embed.js): a flyer card in the corner the editor chose; the whole flyer opens on a click ---- */
.content-poster:not([data-cms-bare]){position:fixed;z-index:9990;width:168px;overflow:hidden;background:var(--content-poster-card);color:var(--content-poster-ink);border:1px solid var(--content-poster-border);border-radius:var(--content-poster-radius,8px)}
.content-poster-top-right:not([data-cms-bare]),.content-poster-bottom-right:not([data-cms-bare]){right:22px}
.content-poster-top-left:not([data-cms-bare]),.content-poster-bottom-left:not([data-cms-bare]){left:22px}
.content-poster-top-right:not([data-cms-bare]),.content-poster-top-left:not([data-cms-bare]){top:84px}
.content-poster-bottom-right:not([data-cms-bare]),.content-poster-bottom-left:not([data-cms-bare]){bottom:22px}
.content-poster-open:not([data-cms-bare]){display:block;width:100%;margin:0;padding:0;border:0;background:none;color:inherit;cursor:zoom-in;text-align:center}
.content-poster-open:not([data-cms-bare]) img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover}
.content-poster-tag:not([data-cms-bare]){display:block;padding:9px 8px;font-family:var(--content-poster-font);font-size:11px;font-weight:600;line-height:1.3;letter-spacing:.14em;text-transform:uppercase;border-top:1px solid var(--content-poster-border)}
.content-poster > .content-poster-close:not([data-cms-bare]){position:absolute;right:5px;top:5px;width:22px;height:22px;padding:0;border-radius:50%;border:0;background:var(--content-poster-card);color:var(--content-poster-ink);font-size:15px;line-height:22px;cursor:pointer}
@media (max-width:639.98px){
  .content-poster:not([data-cms-bare]){width:104px}
  .content-poster-top-right:not([data-cms-bare]),.content-poster-bottom-right:not([data-cms-bare]){right:10px}
  .content-poster-top-left:not([data-cms-bare]),.content-poster-bottom-left:not([data-cms-bare]){left:10px}
  .content-poster-top-right:not([data-cms-bare]),.content-poster-top-left:not([data-cms-bare]){top:64px}
  .content-poster-bottom-right:not([data-cms-bare]),.content-poster-bottom-left:not([data-cms-bare]){bottom:10px}
  .content-poster-tag:not([data-cms-bare]){padding:6px 4px;font-size:9px}
}

/* the whole flyer, when the page has no lightbox.js */
.content-poster-full:not([data-cms-bare]){position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;padding:16px;background:var(--content-poster-scrim)}
.content-poster-card:not([data-cms-bare]){position:relative;display:flex;flex-direction:column;max-width:min(620px,92vw);max-height:92vh;overflow:hidden;background:var(--content-poster-card);color:var(--content-poster-ink);border-radius:var(--content-poster-radius,8px)}
.content-poster-card:not([data-cms-bare]) img{display:block;max-width:100%;max-height:calc(92vh - 48px);width:auto;height:auto;margin:0 auto;object-fit:contain}
.content-poster-link:not([data-cms-bare]){display:block;padding:14px 16px;text-align:center;font-family:var(--content-poster-font);font-size:12px;font-weight:600;line-height:1.2;letter-spacing:.16em;text-transform:uppercase;color:inherit;text-decoration:none;border-top:1px solid var(--content-poster-border)}
.content-poster-card > .content-poster-close:not([data-cms-bare]){position:absolute;right:8px;top:8px;width:34px;height:34px;padding:0;border-radius:50%;border:0;background:var(--content-poster-card);color:var(--content-poster-ink);font-size:20px;line-height:34px;cursor:pointer}