/* ==========================================================================
   Rezomy — template showcase ([rezomy_template_showcase])
   Built on the Rezomy brand system: fog #CCD0CF · slate #253745 · mist #F3F5F4
   · soft #E7EAE9 · night #000. Cards follow the site's 28px content cards.
   ========================================================================== */
.rz-tpl-showcase{
  --rz-tpl-slate:var(--rz-brand-slate,#253745);
  --rz-tpl-night:var(--rz-brand-night,#000);
  --rz-tpl-mist:var(--rz-brand-mist,#F3F5F4);
  --rz-tpl-soft:var(--rz-brand-soft,#E7EAE9);
  --rz-tpl-fog:var(--rz-brand-fog,#CCD0CF);
  --rz-tpl-muted:var(--rz-brand-muted,#5E6D76);
  --rz-tpl-ease:var(--rz-ease,cubic-bezier(.2,.7,.2,1));
  position:relative;max-width:1160px;margin:0 auto clamp(70px,9vw,125px);color:var(--rz-tpl-slate);
}
.rz-tpl-showcase *,.rz-tpl-showcase *::before,.rz-tpl-showcase *::after{box-sizing:border-box}
/* page-content typography (entry headings, paragraph margins) must not reach into the component;
   the Rezomy skin itself guards its content cards the same way */
/* (the skin uses `.rezomy-child-theme .rz-entry-content h3{…!important}`, so these carry three selectors) */
.rz-tpl-showcase[data-rz-tpl-showcase][aria-label] :is(h2,h3,p,ul,li),
.rz-tpl-modal h3,.rz-tpl-modal p{max-width:none!important;margin-top:0!important;margin-bottom:0!important}
.rz-tpl-showcase[data-rz-tpl-showcase][aria-label] .rz-tpl-body h3{font-size:clamp(20px,1.7vw,24px)!important;line-height:1.35!important}
.rz-tpl-showcase[data-rz-tpl-showcase][aria-label] .rz-tpl-head h2{font-size:clamp(32px,4.6vw,62px)!important;line-height:1.18!important}
.rz-tpl-modal .rz-tpl-modal-title h3{font-size:clamp(17px,1.6vw,21px)!important;line-height:1.4!important}
.rz-tpl-showcase .rz-tpl-ico{width:18px;height:18px;flex:none}

/* ---------- header (same rhythm as the site's content hero) ---------- */
.rz-tpl-showcase .rz-tpl-head{max-width:860px;margin:0 auto clamp(34px,5vw,56px);text-align:center}
.rz-tpl-showcase[data-rz-tpl-showcase][aria-label] .rz-tpl-kicker{margin:0 0 13px!important;color:var(--rz-tpl-slate);font-size:13px;font-weight:750}
.rz-tpl-showcase .rz-tpl-head h2{margin:0;color:var(--rz-tpl-night);font-size:clamp(32px,4.6vw,62px);line-height:1.18;letter-spacing:-.04em;font-weight:800}
.rz-tpl-showcase[data-rz-tpl-showcase][aria-label] .rz-tpl-head p:last-child{margin:20px auto 0!important;max-width:680px;font-size:clamp(16px,1.4vw,19px);line-height:1.95;color:var(--rz-tpl-slate)}

/* ---------- category filter: segmented control with a sliding pill ---------- */
.rz-tpl-showcase .rz-tpl-filters{position:relative;display:flex;width:max-content;max-width:100%;margin:0 auto clamp(28px,4vw,44px);
  padding:5px;gap:2px;border-radius:999px;background:var(--rz-tpl-mist);border:1px solid rgba(0,0,0,.035);overflow-x:auto;scrollbar-width:none}
.rz-tpl-showcase .rz-tpl-filters::-webkit-scrollbar{display:none}
.rz-tpl-showcase .rz-tpl-filter-pill{position:absolute;top:5px;bottom:5px;inset-inline-start:0;width:0;border-radius:999px;background:#fff;
  box-shadow:0 8px 22px rgba(37,55,69,.12);transition:transform .45s var(--rz-tpl-ease),width .45s var(--rz-tpl-ease);pointer-events:none}
.rz-tpl-showcase .rz-tpl-filter{position:relative;z-index:1;display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:0 18px;border:0;border-radius:999px;
  background:transparent;color:var(--rz-tpl-muted);font:inherit;font-size:14px;font-weight:650;white-space:nowrap;cursor:pointer;transition:color .3s ease}
.rz-tpl-showcase .rz-tpl-filter i{font-style:normal;font-size:11px;font-weight:700;min-width:20px;height:20px;padding:0 6px;display:inline-grid;place-items:center;
  border-radius:999px;background:rgba(37,55,69,.08);color:var(--rz-tpl-slate)}
.rz-tpl-showcase .rz-tpl-filter[aria-pressed="true"]{color:var(--rz-tpl-night)}
.rz-tpl-showcase .rz-tpl-filter[aria-pressed="true"] i{background:var(--rz-tpl-slate);color:#fff}
.rz-tpl-showcase .rz-tpl-filter:focus-visible{outline:2px solid var(--rz-tpl-slate);outline-offset:2px}
.rz-tpl-showcase:not(.is-ready) .rz-tpl-filter[aria-pressed="true"]{background:#fff}

/* ---------- grid + card ---------- */
.rz-tpl-showcase .rz-tpl-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:stretch}
.rz-tpl-showcase .rz-tpl-card{position:relative;display:flex;flex-direction:column;border-radius:28px;background:var(--rz-tpl-mist);
  border:1px solid rgba(0,0,0,.035);padding:12px;transform:perspective(1100px) rotateX(var(--rz-tpl-rx,0deg)) rotateY(var(--rz-tpl-ry,0deg)) translateY(var(--rz-tpl-lift,0px));
  transition:transform .5s var(--rz-tpl-ease),box-shadow .5s ease,background .4s ease;will-change:transform}
.rz-tpl-showcase .rz-tpl-card:hover,.rz-tpl-showcase .rz-tpl-card:focus-within{--rz-tpl-lift:-6px;background:#fff;box-shadow:0 28px 70px rgba(37,55,69,.12)}
.rz-tpl-showcase .rz-tpl-card[hidden]{display:none}

/* browser window frame around the screenshot */
.rz-tpl-showcase .rz-tpl-media{position:relative;border-radius:20px;overflow:hidden;background:#fff;border:1px solid rgba(37,55,69,.08);isolation:isolate}
.rz-tpl-showcase .rz-tpl-window{display:flex;align-items:center;gap:6px;height:34px;padding:0 14px;background:#fff;border-bottom:1px solid rgba(37,55,69,.07)}
.rz-tpl-showcase .rz-tpl-window span{width:8px;height:8px;border-radius:50%;background:var(--rz-tpl-fog)}
.rz-tpl-showcase .rz-tpl-window span:first-child{background:var(--rz-tpl-accent,#253745);opacity:.55}
.rz-tpl-showcase .rz-tpl-window b{margin-inline-start:auto;max-width:62%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;direction:ltr;
  padding:3px 12px;border-radius:999px;background:var(--rz-tpl-mist);color:var(--rz-tpl-muted);font:500 11px/1.4 ui-sans-serif,system-ui,sans-serif}
.rz-tpl-showcase .rz-tpl-viewport{position:relative;aspect-ratio:4/4.3;overflow:hidden;background:var(--rz-tpl-soft)}
.rz-tpl-showcase .rz-tpl-viewport img{position:absolute;inset:0 0 auto 0;display:block;width:100%;height:auto;max-width:none;margin:0;border-radius:0;
  transform:translate3d(0,0,0);transition:transform var(--rz-tpl-return,.9s) var(--rz-tpl-ease)}
/* the page scrolls under the frame while the card is hovered */
.rz-tpl-showcase .rz-tpl-card.is-scrolling .rz-tpl-viewport img{transform:translate3d(0,var(--rz-tpl-scroll,0px),0);
  transition:transform var(--rz-tpl-scroll-dur,4s) cubic-bezier(.45,.05,.35,1)}
/* a single sheen passing over the glass */
.rz-tpl-showcase .rz-tpl-media::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.34) 48%,transparent 60%);transform:translateX(120%);opacity:0}
.rz-tpl-showcase .rz-tpl-card:hover .rz-tpl-media::after{animation:rz-tpl-sheen 1.1s var(--rz-tpl-ease) .08s 1}
@keyframes rz-tpl-sheen{0%{transform:translateX(120%);opacity:1}100%{transform:translateX(-120%);opacity:0}}

.rz-tpl-showcase .rz-tpl-plan{position:absolute;top:46px;inset-inline-end:12px;z-index:4;padding:5px 12px;border-radius:999px;background:rgba(255,255,255,.92);
  color:var(--rz-tpl-slate);font-size:11.5px;font-weight:750;box-shadow:0 6px 18px rgba(37,55,69,.12);backdrop-filter:blur(8px)}
.rz-tpl-showcase .rz-tpl-plan.is-pro{background:var(--rz-tpl-slate);color:#fff}
.rz-tpl-showcase .rz-tpl-live{position:absolute;left:50%;bottom:18px;z-index:4;display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:0 18px;
  border:1px solid rgba(37,55,69,.14);border-radius:999px;background:rgba(255,255,255,.94);color:var(--rz-tpl-night);font:inherit;font-size:13.5px;font-weight:700;
  cursor:pointer;box-shadow:0 14px 34px rgba(37,55,69,.18);backdrop-filter:blur(10px);opacity:0;transform:translate(-50%,12px) scale(.96);
  transition:opacity .35s ease,transform .45s var(--rz-tpl-ease),background .25s ease,color .25s ease}
.rz-tpl-showcase .rz-tpl-card:hover .rz-tpl-live,.rz-tpl-showcase .rz-tpl-live:focus-visible{opacity:1;transform:translate(-50%,0) scale(1)}
.rz-tpl-showcase .rz-tpl-live:hover{background:var(--rz-tpl-night);color:#fff}
.rz-tpl-showcase .rz-tpl-live:focus-visible{outline:2px solid var(--rz-tpl-slate);outline-offset:3px}

/* ---------- card text ---------- */
.rz-tpl-showcase .rz-tpl-body{flex:1;display:flex;flex-direction:column;gap:10px;padding:20px 12px 10px}
.rz-tpl-showcase .rz-tpl-tagline{display:flex;align-items:center;gap:8px;margin:0;color:var(--rz-tpl-slate);font-size:13px;font-weight:700;line-height:1.6}
.rz-tpl-showcase .rz-tpl-tagline i{width:8px;height:8px;border-radius:50%;flex:none;background:var(--rz-tpl-accent,#253745);box-shadow:0 0 0 4px rgba(37,55,69,.07)}
.rz-tpl-showcase .rz-tpl-body h3{margin:0;color:var(--rz-tpl-night);font-size:clamp(20px,1.7vw,24px);line-height:1.35;letter-spacing:-.02em;font-weight:800}
.rz-tpl-showcase .rz-tpl-desc{margin:0;color:var(--rz-tpl-slate);font-size:14.5px;line-height:1.9}
.rz-tpl-showcase[data-rz-tpl-showcase][aria-label] .rz-tpl-features{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 0!important;padding:0;list-style:none}
.rz-tpl-showcase .rz-tpl-features li{margin:0;padding:5px 11px;border-radius:999px;background:#fff;border:1px solid rgba(37,55,69,.1);color:var(--rz-tpl-slate);
  font-size:12px;font-weight:600;line-height:1.5;transition:background .3s ease,border-color .3s ease}
.rz-tpl-showcase .rz-tpl-card:hover .rz-tpl-features li{background:var(--rz-tpl-mist)}
.rz-tpl-showcase .rz-tpl-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:10px;flex-wrap:wrap}
.rz-tpl-showcase .rz-tpl-actions .rz-button{min-height:44px}
.rz-tpl-showcase .rz-tpl-text-button{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 6px;border:0;background:none;color:var(--rz-tpl-slate);
  font:inherit;font-size:14px;font-weight:700;cursor:pointer;border-radius:10px;transition:color .25s ease}
.rz-tpl-showcase .rz-tpl-text-button:hover{color:var(--rz-tpl-night)}
.rz-tpl-showcase .rz-tpl-text-button:focus-visible{outline:2px solid var(--rz-tpl-slate);outline-offset:2px}
.rz-tpl-showcase .rz-tpl-live-region{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- entrance: cards rise one after another (only once scripts are running) ---------- */
.rz-tpl-showcase.is-ready .rz-tpl-card:not(.is-in){opacity:0;--rz-tpl-lift:34px}
.rz-tpl-showcase.is-ready .rz-tpl-card.is-in{opacity:1;transition:transform .9s var(--rz-tpl-ease),opacity .7s ease,box-shadow .5s ease,background .4s ease;
  transition-delay:calc(var(--rz-tpl-d,0) * 90ms)}
.rz-tpl-showcase.is-ready .rz-tpl-card.is-in.is-settled{transition-delay:0ms}

/* ---------- live preview modal ---------- */
.rz-tpl-modal{position:fixed;inset:0;z-index:100000;display:grid;place-items:center;padding:clamp(10px,2.4vw,28px)}
.rz-tpl-modal[hidden]{display:none}
.rz-tpl-modal-backdrop{position:absolute;inset:0;background:rgba(25,40,50,.52);backdrop-filter:blur(10px);opacity:0;transition:opacity .35s ease}
.rz-tpl-modal.is-open .rz-tpl-modal-backdrop{opacity:1}
.rz-tpl-modal-panel{position:relative;display:flex;flex-direction:column;width:min(1320px,100%);height:min(900px,100%);border-radius:28px;background:#fff;overflow:hidden;
  box-shadow:0 40px 120px rgba(0,0,0,.28);opacity:0;transform:translateY(22px) scale(.97);transition:opacity .35s ease,transform .55s var(--rz-tpl-ease,cubic-bezier(.2,.7,.2,1));
  color:var(--rz-brand-slate,#253745);font-family:inherit}
.rz-tpl-modal.is-open .rz-tpl-modal-panel{opacity:1;transform:none}
.rz-tpl-modal-panel:focus{outline:none}
.rz-tpl-modal .rz-tpl-ico{width:18px;height:18px;flex:none}
.rz-tpl-modal-head{display:flex;align-items:center;gap:14px;padding:12px 14px 12px 18px;border-bottom:1px solid rgba(37,55,69,.08);flex-wrap:wrap}
.rz-tpl-modal-title{min-width:0;flex:1}
.rz-tpl-modal-title p{margin:0;color:var(--rz-brand-muted,#5E6D76);font-size:12px;font-weight:700;line-height:1.5}
.rz-tpl-modal-title h3{margin:0;color:#000;font-size:clamp(17px,1.6vw,21px);font-weight:800;letter-spacing:-.015em;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rz-tpl-devices{display:flex;gap:2px;padding:4px;border-radius:999px;background:var(--rz-brand-mist,#F3F5F4)}
.rz-tpl-devices button{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 14px;border:0;border-radius:999px;background:transparent;
  color:var(--rz-brand-muted,#5E6D76);font:inherit;font-size:13px;font-weight:650;cursor:pointer;transition:background .3s ease,color .3s ease,box-shadow .3s ease}
.rz-tpl-devices button[aria-pressed="true"]{background:#fff;color:#000;box-shadow:0 6px 16px rgba(37,55,69,.12)}
.rz-tpl-modal-actions{display:flex;align-items:center;gap:6px}
.rz-tpl-modal-actions .rz-button{min-height:40px;margin-inline:4px}
.rz-tpl-round{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid rgba(37,55,69,.14);background:#fff;
  color:var(--rz-brand-slate,#253745)!important;cursor:pointer;text-decoration:none!important;transition:background .25s ease,border-color .25s ease,transform .25s ease}
.rz-tpl-round:hover{background:var(--rz-brand-mist,#F3F5F4);border-color:var(--rz-brand-slate,#253745);transform:translateY(-1px)}
.rz-tpl-round:focus-visible,.rz-tpl-devices button:focus-visible{outline:2px solid var(--rz-brand-slate,#253745);outline-offset:2px}
.rz-tpl-stage{position:relative;flex:1;min-height:0;display:flex;justify-content:center;padding:18px;background:var(--rz-brand-soft,#E7EAE9);overflow:hidden}
.rz-tpl-device{position:relative;width:100%;height:100%;border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 18px 50px rgba(37,55,69,.16);
  transition:width .6s var(--rz-tpl-ease,cubic-bezier(.2,.7,.2,1)),border-radius .6s ease,border-width .6s ease;border:0 solid #111}
.rz-tpl-device[data-device="tablet"]{width:min(820px,100%);border-radius:26px;border-width:10px}
.rz-tpl-device[data-device="mobile"]{width:min(390px,100%);border-radius:40px;border-width:10px}
.rz-tpl-device iframe{display:block;width:100%;height:100%;border:0;background:#fff;opacity:0;transition:opacity .45s ease}
.rz-tpl-device iframe.is-loaded{opacity:1}
.rz-tpl-device .rz-tpl-still{display:block;width:100%;height:100%;overflow-y:auto;background:var(--rz-brand-soft,#E7EAE9)}
.rz-tpl-device .rz-tpl-still img{display:block;width:100%;height:auto;border-radius:0}
.rz-tpl-loading{position:absolute;inset:0;z-index:2;display:grid;place-content:center;justify-items:center;gap:14px;background:#fff;color:var(--rz-brand-muted,#5E6D76);
  font-size:13px;font-weight:650;transition:opacity .4s ease}
.rz-tpl-loading span{width:38px;height:38px;border-radius:50%;border:3px solid var(--rz-brand-soft,#E7EAE9);border-top-color:var(--rz-brand-slate,#253745);animation:rz-tpl-spin .9s linear infinite}
.rz-tpl-loading.is-done{opacity:0;pointer-events:none}
@keyframes rz-tpl-spin{to{transform:rotate(360deg)}}
html.rz-tpl-lock,html.rz-tpl-lock body{overflow:hidden}

/* ---------- responsive ---------- */
@media (max-width:1100px){.rz-tpl-showcase .rz-tpl-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:700px){
  .rz-tpl-showcase .rz-tpl-grid{grid-template-columns:1fr;gap:14px}
  .rz-tpl-showcase .rz-tpl-filters{justify-content:flex-start}
  .rz-tpl-showcase .rz-tpl-viewport{aspect-ratio:4/3.6}
  .rz-tpl-showcase .rz-tpl-live{opacity:1;transform:translate(-50%,0)}
  .rz-tpl-modal{padding:0}
  .rz-tpl-modal-panel{border-radius:0;height:100%}
  .rz-tpl-devices,.rz-tpl-modal-actions [data-rz-tpl-step],.rz-tpl-modal-actions [data-rz-tpl-external]{display:none}
  .rz-tpl-modal-actions .rz-button{padding-inline:14px;font-size:13px}
  .rz-tpl-stage{padding:0}
  .rz-tpl-device,.rz-tpl-device[data-device]{width:100%;border-radius:0;border-width:0}
}
@media (hover:none){.rz-tpl-showcase .rz-tpl-live{opacity:1;transform:translate(-50%,0)}}

/* ---------- reduced motion: everything still works, nothing travels ---------- */
@media (prefers-reduced-motion:reduce){
  .rz-tpl-showcase .rz-tpl-card,.rz-tpl-showcase.is-ready .rz-tpl-card:not(.is-in){transform:none!important;opacity:1!important;transition:background .2s ease,box-shadow .2s ease!important}
  .rz-tpl-showcase .rz-tpl-viewport img,.rz-tpl-showcase .rz-tpl-card.is-scrolling .rz-tpl-viewport img{transform:none!important;transition:none!important}
  .rz-tpl-showcase .rz-tpl-media::after{display:none}
  .rz-tpl-modal-panel,.rz-tpl-modal-backdrop,.rz-tpl-device,.rz-tpl-filter-pill{transition:none!important}
  .rz-tpl-loading span{animation-duration:2.4s}
}