/* ============ Project slot: "Your project will be here" ============ */
/* An empty browser window shown in a portfolio grid where a project preview would be.
   It fills the card's image box: .medusa-works__visual (home), .svc-card__img (service pages),
   .mxd-demo-list__image (/projects/). Markup comes from tools/project-slot.js. */
.project-slot {
  --slot-glow: #00e5ff;
  --slot-violet: #b49cff;
  --slot-line: #e0e5ef24;
  position: absolute; inset: 0; z-index: 0;
  display: flex; flex-direction: column; overflow: hidden;
  font-family: var(--_font-default, inherit); color: #eafdff;
  background:
    radial-gradient(60% 70% at 78% 18%, #6d4bd633, transparent 70%),
    radial-gradient(55% 60% at 15% 90%, #00b4d42b, transparent 70%),
    linear-gradient(160deg, #111a30, #0a1122 70%);
}
/* Faint grid, like a layout being drawn. */
.project-slot::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: linear-gradient(#ffffff08 1px, transparent 1px), linear-gradient(90deg, #ffffff08 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(80% 80% at 50% 55%, #000, transparent);
  mask-image: radial-gradient(80% 80% at 50% 55%, #000, transparent);
}
.project-slot__bar {
  position: relative; display: flex; align-items: center; gap: 6px; flex: none;
  height: 30px; padding: 0 14px; border-bottom: 1px solid var(--slot-line); background: #ffffff06;
}
.project-slot__bar i { width: 7px; height: 7px; border-radius: 50%; background: #ffffff26; }
.project-slot__bar i:first-child { background: #00e5ffb3; }
.project-slot__url {
  margin-left: 10px; padding: 3px 12px; border: 1px solid var(--slot-line); border-radius: 20px;
  font-size: 10px; letter-spacing: .08em; color: #eafdff99; white-space: nowrap;
}
.project-slot__body {
  position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 18px 22px 64px; text-align: center;
}
/* Skeleton navigation across the top of the empty page. */
.project-slot__nav { position: absolute; top: 16px; left: 22px; right: 22px; display: flex; align-items: center; gap: 10px; }
.project-slot__nav span { height: 6px; border-radius: 4px; background: #ffffff14; }
.project-slot__nav span:first-child { width: 18%; background: #ffffff24; margin-right: auto; }
.project-slot__nav span:not(:first-child) { width: 9%; }
.project-slot__hex {
  position: relative; width: 58px; height: 66px; display: grid; place-items: center;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: linear-gradient(160deg, var(--slot-glow), var(--slot-violet));
  transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}
.project-slot__hex::before {
  content: ''; position: absolute; inset: 1.5px;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: repeating-linear-gradient(45deg, #0d1528 0 3px, #12203a 3px 6px);
}
.project-slot__hex svg { position: relative; width: 22px; height: 22px; }
.project-slot__title {
  font-size: clamp(18px, 1.6vw, 26px); font-weight: 300; line-height: 1.15; letter-spacing: -.01em; color: #fff;
}
.project-slot__title strong {
  font-weight: 500; background: linear-gradient(90deg, var(--slot-glow), var(--slot-violet));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.project-slot__lines { display: grid; justify-items: center; gap: 6px; width: 100%; }
.project-slot__lines span { height: 5px; border-radius: 4px; background: #ffffff12; }
.project-slot__lines span:first-child { width: 46%; }
.project-slot__lines span:last-child { width: 30%; }
a:hover .project-slot__hex, a:focus-visible .project-slot__hex { transform: translateY(-4px); }

/* Per-context fit. */
.medusa-works__visual--slot::before { opacity: 0 !important; }
.svc-card__img .project-slot__body { padding-bottom: 24px; }
.mxd-demo-list__image--slot { aspect-ratio: 1367 / 812; background: #0a1122; }
.mxd-demo-list__image--slot .project-slot__body { padding-bottom: 24px; }

@media (max-width: 767px) {
  .project-slot__hex { width: 46px; height: 52px; }
  .project-slot__hex svg { width: 18px; height: 18px; }
  .project-slot__body { gap: 10px; }
}
@media (prefers-reduced-motion: reduce) { .project-slot__hex { transition: none; } }