/* ===========================================================
   KalkiWeb — device & UI mockup system
   Self-sufficient product shots: real interfaces rendered in
   CSS inside device frames. No photography required.
   =========================================================== */

/* ---------- shared frame ---------- */
.device{position:relative;width:100%;--chrome:#1A2024;--screen:#070A0B}

/* ---------- browser window ---------- */
.device.browser{
  border-radius:11px;overflow:hidden;background:var(--chrome);
  border:1px solid rgba(255,255,255,.09);
  box-shadow:0 30px 70px -18px rgba(0,0,0,.9),0 0 0 1px rgba(0,0,0,.5);
}
.device.browser .bar{
  height:32px;display:flex;align-items:center;gap:7px;padding:0 12px;
  background:linear-gradient(180deg,#222A2F,#1A2024);
  border-bottom:1px solid rgba(0,0,0,.45);
}
.device.browser .dots{display:flex;gap:5px}
.device.browser .dots i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.17)}
.device.browser .dots i:nth-child(1){background:#FF5F57}
.device.browser .dots i:nth-child(2){background:#FEBC2E}
.device.browser .dots i:nth-child(3){background:#28C840}
.device.browser .url{
  flex:1;height:18px;border-radius:5px;background:rgba(0,0,0,.35);
  display:flex;align-items:center;padding:0 9px;margin-left:8px;
  font:500 8.5px/1 var(--mono);letter-spacing:.06em;color:rgba(247,244,238,.42);
  overflow:hidden;white-space:nowrap;
}
.device.browser .screen{background:var(--screen);aspect-ratio:16/10;overflow:hidden;position:relative}

/* ---------- phone ---------- */
.device.phone{
  width:100%;max-width:210px;margin:0 auto;
  border-radius:26px;padding:7px;background:#12181B;
  border:1px solid rgba(255,255,255,.11);
  box-shadow:0 26px 56px -14px rgba(0,0,0,.92);
}
.device.phone .screen{
  border-radius:20px;overflow:hidden;background:var(--screen);
  aspect-ratio:9/19;position:relative;
}
.device.phone .notch{
  position:absolute;top:0;left:50%;translate:-50% 0;z-index:3;
  width:38%;height:15px;border-radius:0 0 9px 9px;background:#12181B;
}

/* ---------- laptop ---------- */
.device.laptop .lid{
  border-radius:9px 9px 0 0;overflow:hidden;background:var(--chrome);
  border:1px solid rgba(255,255,255,.09);border-bottom:0;padding:8px 8px 0;
}
.device.laptop .screen{background:var(--screen);aspect-ratio:16/10;overflow:hidden;position:relative;border-radius:4px}
.device.laptop .base{
  height:11px;border-radius:0 0 12px 12px;
  background:linear-gradient(180deg,#252D32,#161B1E);
  border:1px solid rgba(255,255,255,.08);border-top:0;position:relative;
}
.device.laptop .base:after{
  content:"";position:absolute;top:0;left:50%;translate:-50% 0;
  width:16%;height:3px;border-radius:0 0 4px 4px;background:rgba(0,0,0,.5);
}

/* =======================================================
   MINIATURE UI — rendered interfaces inside the screens
   ======================================================= */
.ui{position:absolute;inset:0;display:flex;flex-direction:column;font-size:6px;line-height:1}

/* top nav bar */
.ui .u-nav{
  height:11%;display:flex;align-items:center;justify-content:space-between;
  padding:0 6%;border-bottom:1px solid rgba(255,255,255,.06);flex:none;
}
.ui .u-logo{display:flex;align-items:center;gap:3px}
.ui .u-logo b{width:9px;height:9px;border-radius:2px;background:var(--gold);display:block}
.ui .u-logo s{width:24px;height:4px;border-radius:2px;background:rgba(255,255,255,.34);text-decoration:none;display:block}
.ui .u-links{display:flex;gap:5px}
.ui .u-links i{width:14px;height:3px;border-radius:2px;background:rgba(255,255,255,.17)}
.ui .u-pill{width:30px;height:9px;border-radius:9px;background:var(--gold);flex:none}

/* hero block */
.ui .u-hero{padding:7% 6% 5%;display:flex;flex-direction:column;gap:4px;flex:none}
.ui .u-hero .h1{height:9px;width:72%;border-radius:3px;background:rgba(255,255,255,.82)}
.ui .u-hero .h2{height:9px;width:52%;border-radius:3px;background:var(--gold)}
.ui .u-hero .p{height:3.5px;width:64%;border-radius:2px;background:rgba(255,255,255,.2);margin-top:3px}
.ui .u-hero .p.s{width:48%}
.ui .u-hero .cta{display:flex;gap:4px;margin-top:5px}
.ui .u-hero .cta b{width:34px;height:10px;border-radius:10px;background:var(--gold);display:block}
.ui .u-hero .cta s{width:30px;height:10px;border-radius:10px;border:1px solid rgba(255,255,255,.22);display:block;text-decoration:none}

/* card row */
.ui .u-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:0 6% 5%}
.ui .u-cards div{
  border-radius:3px;background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.06);aspect-ratio:1/.78;
  display:flex;flex-direction:column;gap:2px;padding:4px;
}
.ui .u-cards div:before{content:"";height:3px;width:60%;border-radius:2px;background:rgba(255,255,255,.4)}
.ui .u-cards div:after{content:"";height:2px;width:85%;border-radius:2px;background:rgba(255,255,255,.14)}

/* media band */
.ui .u-band{flex:1;margin:0 6% 6%;border-radius:4px;position:relative;overflow:hidden;
  background:linear-gradient(135deg,rgba(255,193,102,.20),rgba(126,154,174,.16))}
.ui .u-band:after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse at 66% 40%,rgba(255,193,102,.32),transparent 62%);
}

/* dashboard variant */
.ui.dash{flex-direction:row}
.ui.dash .u-side{
  width:20%;border-right:1px solid rgba(255,255,255,.06);
  padding:6% 4%;display:flex;flex-direction:column;gap:4px;flex:none;
}
.ui.dash .u-side i{height:3px;border-radius:2px;background:rgba(255,255,255,.16);display:block}
.ui.dash .u-side i:first-child{background:var(--gold);width:70%}
.ui.dash .u-main{flex:1;padding:5%;display:flex;flex-direction:column;gap:5px}
.ui.dash .u-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.ui.dash .u-stats div{
  border-radius:3px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07);
  padding:4px;display:flex;flex-direction:column;gap:2px;
}
.ui.dash .u-stats div:before{content:"";height:6px;width:52%;border-radius:2px;background:rgba(255,255,255,.72)}
.ui.dash .u-stats div:after{content:"";height:2px;width:76%;border-radius:2px;background:rgba(255,255,255,.16)}
.ui.dash .u-chart{
  flex:1;border-radius:3px;background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.06);position:relative;overflow:hidden;
}
.ui.dash .u-chart:after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:62%;
  background:
    linear-gradient(180deg,rgba(255,193,102,.28),transparent),
    repeating-linear-gradient(90deg,transparent 0 9px,rgba(255,255,255,.05) 9px 10px);
  clip-path:polygon(0 74%,11% 58%,23% 66%,35% 40%,47% 52%,59% 26%,71% 38%,84% 16%,100% 28%,100% 100%,0 100%);
}
.ui.dash .u-rows{display:flex;flex-direction:column;gap:3px}
.ui.dash .u-rows i{height:5px;border-radius:2px;background:rgba(255,255,255,.07);display:block}

/* ecommerce variant */
.ui.shop .u-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:5% 6%;flex:1}
.ui.shop .u-grid div{
  border-radius:3px;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.07);display:flex;flex-direction:column;
}
.ui.shop .u-grid div:before{
  content:"";flex:1;border-radius:3px 3px 0 0;
  background:linear-gradient(140deg,rgba(255,193,102,.16),rgba(126,154,174,.13));
}
.ui.shop .u-grid div:after{content:"";height:9px;flex:none}

/* mobile app variant */
.ui.app{padding-top:15px}
.ui.app .u-top{padding:8% 8% 5%;display:flex;flex-direction:column;gap:4px;flex:none}
.ui.app .u-top .t{height:8px;width:62%;border-radius:3px;background:rgba(255,255,255,.82)}
.ui.app .u-top .s{height:3px;width:80%;border-radius:2px;background:rgba(255,255,255,.2)}
.ui.app .u-list{flex:1;padding:0 8%;display:flex;flex-direction:column;gap:5px}
.ui.app .u-list div{
  border-radius:5px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07);
  height:30px;display:flex;align-items:center;gap:5px;padding:0 6px;
}
.ui.app .u-list div:before{content:"";width:16px;height:16px;border-radius:4px;background:rgba(255,193,102,.35);flex:none}
.ui.app .u-list div:after{content:"";height:3px;width:52%;border-radius:2px;background:rgba(255,255,255,.24)}
.ui.app .u-tab{
  height:34px;margin-top:6px;border-top:1px solid rgba(255,255,255,.07);
  display:flex;align-items:center;justify-content:space-around;padding:0 10%;flex:none;
}
.ui.app .u-tab i{width:10px;height:10px;border-radius:3px;background:rgba(255,255,255,.16)}
.ui.app .u-tab i:first-child{background:var(--gold)}

/* ---------- showcase layouts ---------- */
.showcase{position:relative;display:grid;gap:20px;align-items:center}
.showcase.split{grid-template-columns:1.05fr .95fr}
.showcase.split.flip{direction:rtl}
.showcase.split.flip>*{direction:ltr}
@media(max-width:900px){.showcase.split{grid-template-columns:1fr}}

/* stacked cluster: browser with a phone overlapping */
.cluster{position:relative;padding-bottom:8%}
.cluster .device.phone{
  position:absolute;right:-2%;bottom:0;width:26%;max-width:none;z-index:3;
}
@media(max-width:640px){.cluster{padding-bottom:0}.cluster .device.phone{display:none}}

/* device gets a subtle lift on hover */
.tilt{transition:transform .9s var(--e-std)}
.showcase:hover .tilt,.proj:hover .tilt{transform:translateY(-6px)}

/* full-bleed showcase band */
.bleed{padding-left:0;padding-right:0}
.bleed .rowtrack{
  display:flex;gap:22px;padding:0 var(--pad);overflow-x:auto;
  scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;
}
.bleed .rowtrack::-webkit-scrollbar{display:none}
.bleed .rowtrack>*{flex:0 0 clamp(280px,42vw,560px);scroll-snap-align:center}

/* project card gets a device instead of a gradient */
.proj .shot.has-ui{background:linear-gradient(150deg,#12171A,#070A0B);padding:9% 8% 0}
.proj .shot.has-ui .device.browser{box-shadow:0 18px 40px -12px rgba(0,0,0,.85)}

@media(prefers-reduced-motion:reduce){
  .tilt{transition:none}
}