/* ClassJot Website Showcase — scoped only to the original ClassJot Gutenberg homepage. */
.cj-site .cj-showcase-hero-visual {
  position:relative;display:flex;align-items:center;justify-content:center;
  min-height:490px;padding:8px 14px 6px;isolation:isolate;overflow:visible;
}
.cj-site .cj-showcase-halo {position:absolute;display:block;border-radius:50%;z-index:-1;pointer-events:none}
.cj-site .cj-showcase-halo-one{width:460px;height:460px;inset:auto -16px 3% auto;background:radial-gradient(circle,#bed8fd 0%,#dcecff 46%,transparent 72%);}
.cj-site .cj-showcase-halo-two{width:180px;height:180px;top:9%;left:3%;background:radial-gradient(circle,#dfefff 0%,transparent 76%);}
.cj-site .cj-showcase-phone{position:relative;box-sizing:border-box;width:min(294px,83%);height:495px;flex:none;border:7px solid #162438;border-radius:38px;background:#101c2e;box-shadow:0 30px 55px rgba(24,45,75,.27),0 12px 18px rgba(24,45,75,.14), inset 0 0 0 1px #475669;overflow:hidden;transform:rotate(2.2deg);}
.cj-site .cj-showcase-phone-top{position:absolute;z-index:2;left:50%;top:7px;transform:translateX(-50%);width:77px;height:15px;border-radius:16px;background:#162438;box-shadow:0 0 0 1px rgba(255,255,255,.08);}
.cj-site .cj-showcase-phone-screen{position:absolute;inset:1px;border-radius:29px;overflow:hidden;background:#f5f8fd;}
.cj-site .cj-showcase-phone-screen img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center;max-width:none;border-radius:0;margin:0;}
.cj-site .cj-showcase-gallery{padding:73px max(24px,calc((100vw - 1200px)/2)) 80px;background:linear-gradient(180deg,#f6faff 0%,#eef5ff 100%);border-bottom:1px solid #deebf8;position:relative;}
.cj-site .cj-showcase-gallery-inner{max-width:1200px;margin:0 auto;}
.cj-site .cj-showcase-gallery-header{text-align:center;max-width:790px;margin:0 auto 35px;}
.cj-site .cj-showcase-gallery-header .cj-showcase-eyebrow{color:#1764e8;font-size:11px;font-weight:800;letter-spacing:.18em;margin:0 0 14px;line-height:1.6;}
.cj-site .cj-showcase-gallery-header h2{font-size:clamp(1.8rem,3.2vw,2.85rem);font-weight:780;line-height:1.16;letter-spacing:-.035em;margin:0 0 13px;color:#16263f;}
.cj-site .cj-showcase-gallery-header>p:not(.cj-showcase-eyebrow){color:#637a94;font-size:16px;margin:0;line-height:1.6;}
.cj-site .cj-showcase-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-bottom:29px;}
.cj-site .cj-showcase-card{background:white;border:1px solid #dce6f2;border-radius:18px;box-shadow:0 9px 22px rgba(28,62,104,.07);overflow:hidden;min-width:0;transition:transform .18s ease,box-shadow .18s ease;}
.cj-site .cj-showcase-card:hover{transform:translateY(-3px);box-shadow:0 15px 32px rgba(28,62,104,.12);}
.cj-site .cj-showcase-card-link{display:block;text-decoration:none;border:0;position:relative;}
.cj-site .cj-showcase-card-link:focus-visible{outline:3px solid #1764e8;outline-offset:-3px;}
.cj-site .cj-showcase-card-media{display:block;position:relative;height:225px;overflow:hidden;background:#f5f8ff;border-bottom:1px solid #e5ebf4;}
.cj-site .cj-showcase-card-media img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center;margin:0;border:0;max-width:none;}
.cj-site .cj-showcase-zoom{position:absolute;right:12px;bottom:11px;display:flex;width:30px;height:30px;align-items:center;justify-content:center;background:rgba(255,255,255,.94);border-radius:8px;color:#1764e8;font-weight:700;font-size:19px;box-shadow:0 3px 11px rgba(0,0,0,.1);}
.cj-site .cj-showcase-card-copy{padding:18px 19px 23px;}
.cj-site .cj-showcase-card-copy h3{font-size:17px;line-height:1.3;font-weight:750;color:#17283d;letter-spacing:-.015em;margin:0 0 8px;}
.cj-site .cj-showcase-card-copy p{color:#63758a;font-size:13px;line-height:1.65;margin:0;}
.cj-site .cj-showcase-demo-cta{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:24px 29px;background:#fff;border:1px solid #dce8f5;border-radius:20px;box-shadow:0 7px 20px rgba(28,62,104,.035);}
.cj-site .cj-showcase-demo-text{min-width:0;}
.cj-site .cj-showcase-demo-text strong{color:#213a5d;font-size:17px;font-weight:760;line-height:1.3;}
.cj-site .cj-showcase-spark{color:#1764e8;font-size:20px;margin-right:7px;}
.cj-site .cj-showcase-demo-text p{color:#637b92;font-size:13px;margin:6px 0 0;line-height:1.5;}
.cj-site .cj-showcase-coming-soon{font-size:11px;letter-spacing:.09em;font-weight:800;background:#edf4ff;color:#386eaf;padding:9px 15px;border-radius:999px;flex-shrink:0;}
.cj-site .cj-showcase-demo-button{display:inline-flex;padding:12px 17px;align-items:center;gap:8px;color:white;background:#1764e8;border-radius:11px;font-size:13px;font-weight:700;text-decoration:none;flex-shrink:0;}
.cj-site .cj-showcase-demo-button:hover,.cj-site .cj-showcase-demo-button:focus-visible{color:#fff;background:#0e54d0;text-decoration:none;}
.cj-showcase-lightbox[hidden]{display:none!important;}
.cj-showcase-lightbox{position:fixed;inset:0;z-index:2147483000;background:rgba(10,19,34,.88);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:45px 15px 25px;box-sizing:border-box;}
.cj-showcase-lightbox-title{font:700 17px/1.4 system-ui,sans-serif;color:#fff;margin-bottom:12px;}
.cj-showcase-lightbox img{max-height:calc(100vh - 120px);max-width:96vw;width:auto;height:auto;object-fit:contain;box-shadow:0 12px 45px rgba(0,0,0,.23);border-radius:12px;}
.cj-showcase-lightbox-close{position:absolute;right:16px;top:14px;cursor:pointer;border:1px solid rgba(255,255,255,.3);border-radius:11px;background:#fff;color:#17283d;padding:8px 13px;font:700 14px/1.25 system-ui,sans-serif;}
@media(max-width:1060px){.cj-site .cj-showcase-cards{grid-template-columns:repeat(2,minmax(0,1fr));}.cj-site .cj-showcase-card-media{height:230px;}.cj-site .cj-showcase-gallery{padding-inline:28px;}}
@media(max-width:781px){.cj-site .cj-showcase-hero-visual{min-height:420px;padding:0 0 25px;}.cj-site .cj-showcase-phone{height:420px;width:249px;transform:rotate(0);}.cj-site .cj-showcase-halo-one{width:350px;height:350px;right:auto;left:50%;transform:translateX(-50%);}.cj-site .cj-showcase-gallery{padding:52px 20px 58px;}.cj-site .cj-showcase-card-media{height:175px;}.cj-site .cj-showcase-demo-cta{align-items:flex-start;flex-direction:column;padding:22px;}.cj-site .cj-showcase-coming-soon{align-self:flex-start;}}
@media(max-width:520px){.cj-site .cj-showcase-cards{grid-template-columns:1fr;gap:16px;}.cj-site .cj-showcase-card-media{height:220px;}.cj-site .cj-showcase-gallery-header{margin-bottom:26px;}.cj-site .cj-showcase-gallery{padding-left:18px;padding-right:18px;}.cj-site .cj-showcase-card-copy{padding:15px 17px 19px;}}
@media(prefers-reduced-motion:reduce){.cj-site .cj-showcase-card{transition:none;}.cj-site .cj-showcase-card:hover{transform:none;}}
.cj-site .cj-showcase-gallery[dir="rtl"] .cj-showcase-demo-cta{text-align:right;}
.cj-site .cj-showcase-gallery[dir="rtl"] .cj-showcase-spark{margin-right:0;margin-left:7px;}
.cj-site .cj-showcase-gallery[dir="rtl"] .cj-showcase-zoom{right:auto;left:12px;}

/* v1.0.1: keep all original app screenshots proportionate in a real phone frame. */
.cj-site .cj-hero-columns > .cj-showcase-phone-column {
  display:flex; justify-content:center; align-items:center; min-width:0;
}
.cj-site .cj-hero-columns > .cj-showcase-phone-column .cj-showcase-hero-visual {
  width:100%; max-width:470px; min-height:490px; margin-inline:auto;
}
.cj-site .cj-hero-columns > .cj-showcase-phone-column .cj-showcase-phone {
  width:294px; max-width:80%; height:495px;
}
/* Previews: show a self-contained screen rather than an oversized cropped rectangle. */
.cj-site .cj-showcase-card-media {
  display:flex; align-items:flex-start; justify-content:center; padding:12px 17px 0;
  box-sizing:border-box; background:linear-gradient(150deg,#eff5ff,#f9fbfe);
}
.cj-site .cj-showcase-card-media img {
  display:block; width:auto; max-width:100%; height:100%; object-fit:contain;
  object-position:top center; margin:0 auto; border:1px solid #e2eaf4;
  border-radius:11px 11px 0 0; box-shadow:0 7px 19px rgba(24,53,88,.10);
}
@media(max-width:781px) {
  .cj-site .cj-hero-columns > .cj-showcase-phone-column .cj-showcase-hero-visual { min-height:420px; }
  .cj-site .cj-hero-columns > .cj-showcase-phone-column .cj-showcase-phone { width:249px; height:420px; max-width:83%; }
}

/* v1.0.2: clear the sticky header when an Explore link targets this gallery. */
.cj-site #classjot-in-action {scroll-margin-top:82px;}