/* ============================================================
   Web Wizard — showcase.css (Showcase and Portfolio). Mobile-first.
   ============================================================ */
.demo-grid{ display:grid; gap:36px 28px; }
.demo-card{ display:flex; flex-direction:column; gap:18px; }
.demo-card .shot img{ aspect-ratio:16 / 10; object-fit:cover; object-position:top; }
.demo-body{ display:grid; gap:10px; justify-items:start; padding-inline:4px; }
.demo-body p{ color:var(--muted); font-size:.9375rem; }
.demo-links{ display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; }
.demo-card .icon-card{ aspect-ratio:16 / 10; border-radius:calc(var(--r-md) - 8px); }
@media (min-width:700px){ .demo-grid{ grid-template-columns:1fr 1fr; } }
@media (min-width:1100px){ .demo-grid{ grid-template-columns:repeat(3, 1fr); } }

.demo-card .shot{ cursor:pointer; }

/* the "what it has" pop-up for each example site */
.ex-dialog{
  width:min(1000px, calc(100vw - 32px)); max-height:calc(100dvh - 32px); overflow:auto; overscroll-behavior:contain;
  padding:0; margin:auto; border-radius:var(--r-md);
  border:1px solid var(--hairline-strong); background:var(--panel); color:var(--text); box-shadow:var(--shadow-lift), var(--shadow-glow);
}
.ex-dialog::backdrop{ background:var(--shade); }
.ex-inner{ position:relative; display:grid; gap:22px; padding:clamp(18px, 3.5vw, 32px); }
.ex-inner:focus{ outline:none; }
.ex-close{
  position:absolute; top:12px; right:12px; z-index:2; width:44px; height:44px; border-radius:50%; display:grid; place-items:center;
  background:var(--void); border:1px solid var(--hairline-strong); color:var(--ink); cursor:pointer;
  transition:background-color var(--dur-fast) linear, transform var(--dur-fast) var(--ease-out);
}
.ex-close svg{ width:20px; height:20px; }
@media (hover:hover){ .ex-close:hover{ background:var(--panel-raised); } }
.ex-close:active{ transform:scale(.94); }
.ex-close:focus-visible{ outline:2px solid var(--glint); outline-offset:3px; }

.ex-media{ position:relative; display:grid; grid-template-columns:1fr; padding-right:clamp(0px, 9vw, 110px); padding-bottom:clamp(18px, 4vw, 40px); }
.ex-desk{ border-radius:var(--r-sm); overflow:hidden; border:1px solid var(--hairline); background:var(--void); }
.ex-desk img{ display:block; width:100%; height:auto; aspect-ratio:16 / 10; max-height:min(44vh, 460px); object-fit:cover; object-position:top; }
.ex-phone{
  position:absolute; right:0; bottom:0; width:clamp(78px, 17%, 168px); border-radius:18px; overflow:hidden;
  border:5px solid var(--void); outline:1px solid var(--hairline-strong); background:var(--void); box-shadow:var(--shadow-lift);
}
.ex-phone img{ display:block; width:100%; height:auto; aspect-ratio:520 / 1125; object-fit:cover; object-position:top; }

.ex-head{ display:grid; gap:8px; justify-items:start; }
.ex-title{ font-family:var(--font-display); font-size:clamp(1.6rem, 4vw, 2.3rem); font-weight:420; line-height:1.1; letter-spacing:-.02em; color:var(--ink); }
.ex-desc{ color:var(--muted); font-size:.9375rem; max-width:62ch; }

.ex-cols{ display:grid; gap:18px; }
.ex-kicker{ font-size:.75rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--glint); margin-bottom:8px; }
.ex-main{ display:grid; align-content:start; gap:6px; }
.ex-standout{ padding:16px 18px; border-radius:var(--r-sm); background:var(--glint-soft); border:1px solid var(--hairline-strong); margin-bottom:12px; }
.ex-standout-text{ color:var(--ink); font-size:1rem; line-height:1.55; }
.ex-features{ display:grid; gap:9px; list-style:none; padding:0; }
.ex-features li{ position:relative; padding-left:22px; font-size:.9375rem; line-height:1.5; }
.ex-features li::before{ content:""; position:absolute; left:2px; top:.5em; width:8px; height:8px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 3px var(--gold-soft); }

.ex-side{ display:grid; gap:14px; align-content:start; }
.ex-price, .ex-look{ padding:16px 18px; border-radius:var(--r-sm); background:var(--void); border:1px solid var(--hairline); }
.ex-prices{ display:grid; gap:8px; margin:0; }
.ex-prices div{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding-bottom:8px; border-bottom:1px solid var(--hairline); }
.ex-prices div:last-child{ border-bottom:0; padding-bottom:0; }
.ex-prices dt{ color:var(--muted); font-size:.875rem; }
.ex-prices dd{ margin:0; color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums; }
.ex-note{ margin-top:10px; color:var(--muted); font-size:.8125rem; line-height:1.5; }
.ex-look p:not(.ex-kicker){ font-size:.9375rem; }
.ex-swatches{ display:flex; gap:8px; margin:10px 0; }
.ex-swatch{ width:34px; height:34px; border-radius:50%; border:1px solid var(--hairline-strong); }
.ex-look .ex-fonts{ color:var(--muted); font-size:.875rem; }

.ex-info{ display:grid; gap:22px; }
.ex-actions{ display:flex; flex-wrap:wrap; gap:10px; justify-content:flex-end; border-top:1px solid var(--hairline); padding-top:18px; }
@media (max-width:540px){ .ex-actions .btn{ width:100%; } }
@media (min-width:820px) and (max-width:999px){ .ex-cols{ grid-template-columns:1.15fr .85fr; gap:24px; } }

/* desktop: nearly full screen, screenshots on the left, everything else
   on the right, sized to the window so nothing needs scrolling */
@media (min-width:1000px){
  .ex-dialog{ width:calc(100vw - 48px); max-width:1560px; height:calc(100dvh - 48px); max-height:none; overflow:hidden; }
  .ex-inner{ height:100%; grid-template-columns:minmax(0, 1.05fr) minmax(0, 1fr); grid-template-rows:minmax(0, 1fr) auto auto minmax(0, 1fr); grid-template-areas:". info" "media info" "actions info" ". info";
    align-items:center; gap:clamp(14px, 2.4vh, 26px) clamp(28px, 3vw, 52px); padding:clamp(22px, 3.2vh, 40px) clamp(28px, 3vw, 48px); }
  .ex-close{ top:16px; right:16px; }
  .ex-media{ grid-area:media; padding-right:clamp(40px, 6vw, 96px); padding-bottom:clamp(30px, 6vh, 70px); align-self:center; min-height:0; }
  .ex-desk img{ max-height:calc(100dvh - 48px - 2 * clamp(22px, 3.2vh, 40px) - clamp(30px, 6vh, 70px) - clamp(14px, 2.4vh, 26px) - 56px); }
  .ex-phone{ width:clamp(110px, 22%, 210px); border-width:6px; border-radius:22px; }
  .ex-info{ grid-area:info; gap:clamp(10px, 1.9vh, 20px); align-content:center; align-self:center; min-height:0; max-height:100%; padding-right:24px; }
  .ex-head{ gap:6px; }
  .ex-title{ font-size:clamp(1.5rem, 3.6vh, 2.4rem); }
  .ex-desc{ font-size:clamp(.8125rem, 1.7vh, .9375rem); }
  .ex-cols{ gap:clamp(10px, 1.9vh, 18px); }
  .ex-kicker{ margin-bottom:clamp(4px, .8vh, 8px); font-size:.6875rem; }
  .ex-standout{ padding:clamp(10px, 1.6vh, 16px) 16px; margin-bottom:clamp(4px, 1vh, 10px); }
  .ex-standout-text{ font-size:clamp(.875rem, 1.85vh, 1rem); line-height:1.5; }
  .ex-features{ grid-template-columns:1fr 1fr; gap:clamp(4px, 1vh, 9px) 20px; }
  .ex-features li{ font-size:clamp(.8125rem, 1.7vh, .9375rem); line-height:1.4; padding-left:18px; }
  .ex-features li::before{ width:7px; height:7px; top:.45em; }
  .ex-side{ grid-template-columns:1.1fr .9fr; gap:12px; align-items:stretch; }
  .ex-price, .ex-look{ padding:clamp(10px, 1.6vh, 16px) 16px; }
  .ex-prices{ gap:6px; }
  .ex-prices div{ padding-bottom:6px; }
  .ex-prices dd{ font-size:clamp(.875rem, 1.85vh, 1rem); }
  .ex-note{ margin-top:8px; font-size:clamp(.6875rem, 1.45vh, .8125rem); line-height:1.45; }
  .ex-look p:not(.ex-kicker){ font-size:clamp(.8125rem, 1.7vh, .9375rem); line-height:1.45; }
  .ex-swatches{ margin:clamp(6px, 1vh, 10px) 0; }
  .ex-swatch{ width:clamp(24px, 3.4vh, 32px); height:clamp(24px, 3.4vh, 32px); }
  .ex-look .ex-fonts{ font-size:clamp(.75rem, 1.55vh, .875rem); }
  .ex-actions{ grid-area:actions; align-self:start; border-top:0; padding-top:0; justify-content:flex-start; }
}
/* narrower desktops: give the details more of the width */
@media (min-width:1000px) and (max-width:1300px){ .ex-inner{ grid-template-columns:minmax(0, .88fr) minmax(0, 1.12fr); } }
/* short desktop windows: the description repeats the standout, so it goes */
@media (min-width:1000px) and (max-height:820px){ .ex-desc{ display:none; } }
/* "what do you like about it?", over the example pop-up */
.ex-likes{
  width:min(560px, calc(100vw - 32px)); max-height:calc(100dvh - 32px); overflow:auto; overscroll-behavior:contain;
  padding:0; margin:auto; border-radius:var(--r-md);
  border:1px solid var(--hairline-strong); background:var(--panel); color:var(--text); box-shadow:var(--shadow-lift), var(--shadow-glow);
}
.ex-likes::backdrop{ background:rgb(5 6 9 / .55); }
.ex-likes-inner{ display:grid; gap:14px; padding:clamp(20px, 4vw, 28px); }
.ex-likes-title{ font-family:var(--font-display); font-size:clamp(1.35rem, 4vw, 1.7rem); font-weight:420; letter-spacing:-.02em; color:var(--ink); }
.ex-likes-lead{ color:var(--muted); font-size:.875rem; line-height:1.5; }
.ex-like-list{ display:grid; gap:8px; }
.ex-like{
  display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:start; padding:11px 14px; cursor:pointer;
  border-radius:var(--r-sm); border:1px solid var(--hairline); background:var(--void);
  transition:border-color var(--dur-fast) linear, background-color var(--dur-fast) linear;
}
@media (hover:hover){ .ex-like:hover{ border-color:var(--hairline-strong); } }
.ex-like:has(input:checked){ border-color:var(--glint); background:var(--glint-soft); }
.ex-like input{ width:20px; height:20px; margin-top:1px; accent-color:var(--gold); cursor:pointer; }
.ex-like input:focus-visible{ outline:2px solid var(--glint); outline-offset:2px; }
.ex-like-text{ display:grid; gap:2px; font-size:.9rem; line-height:1.45; }
.ex-like-text strong{ color:var(--ink); font-weight:560; }
.ex-like-text > span{ color:var(--muted); font-size:.8125rem; }
.ex-like .ex-swatches{ margin:6px 0 0; }
.ex-like .ex-swatch{ width:22px; height:22px; }
.ex-likes-actions{ position:sticky; bottom:0; display:flex; flex-wrap:wrap; gap:10px; justify-content:flex-end;
  margin:0 calc(-1 * clamp(20px, 4vw, 28px)) calc(-1 * clamp(20px, 4vw, 28px)); padding:12px clamp(20px, 4vw, 28px) clamp(16px, 3vw, 24px);
  background:var(--panel); border-top:1px solid var(--hairline); }
@media (max-width:480px){ .ex-likes-actions .btn{ width:100%; } }
@media (min-width:760px){
  .ex-likes{ width:min(880px, calc(100vw - 48px)); }
  .ex-like-list{ grid-template-columns:1fr 1fr; }
  .ex-like{ padding:9px 12px; }
  .ex-like:first-child{ grid-column:1 / -1; }
}

@media (prefers-reduced-motion:no-preference){
  .ex-likes[open]{ animation:ex-in .3s var(--ease-out); }
  .ex-dialog[open]{ animation:ex-in .4s var(--ease-out); }
  .ex-dialog[open]::backdrop{ animation:ex-fade .35s linear; }
  .ex-dialog[open] .ex-phone{ animation:ex-phone .6s var(--ease-out) .12s both; }
}
@keyframes ex-in{ from{ opacity:0; transform:translateY(16px) scale(.97); } }
@keyframes ex-fade{ from{ opacity:0; } }
@keyframes ex-phone{ from{ transform:translateY(18px) rotate(4deg); } }

/* portfolio: honest empty state until real client sites are listed */
.pf-empty{ display:grid; gap:18px; justify-items:start; padding:clamp(30px, 6vw, 64px); }
.pf-empty p{ color:var(--muted); max-width:58ch; }
.pf-empty .h-lg{ max-width:22ch; }
.pf-empty-icon{ width:64px; height:64px; border-radius:50%; display:grid; place-items:center; background:var(--glint-soft); color:var(--glint); }
.pf-empty .btn-row{ margin-top:10px; }
.pf-grid{ margin-top:8px; }

.demo-card .shot:focus-visible{ outline:2px solid var(--glint); outline-offset:4px; }