/* ============================================================
   SLOT CARD — reusable conversion card pattern.
   Originally lived in work.css. Extracted here so the home page
   process steps and other surfaces can share the exact same
   component for visual harmony across the site.

   Public API (class names kept as `.work-card` for back-compat
   with existing work.html markup; semantically these are
   generic slot/feature cards):

     .work-grid              — 3-column responsive grid
     .work-card              — base card
     .work-card.is-orange    — accent variant (vivid orange fill)
     .work-card.is-dark      — primary cream/dark surface
     .work-card.is-muted     — tertiary (waitlist / least-active)
     .work-card.is-featured  — always-on outer glow
     .work-card--1::before   — diagonal stripe overlay (variant 1)
     .work-card__head        — top row: eyebrow + number
     .work-card__eyebrow     — small uppercase label
     .work-card__status-dot  — animated availability dot
     .work-card__status-tag  — "Open" / "Waitlist" word
     .work-card__num         — "/01" slot identifier
     .work-card__illus       — 84x84 SVG illustration
     .work-card__badge       — corner "Most Popular" pill
     .work-card__title       — display-font headline
     .work-card__desc        — body text
     .work-card__bottom      — value + CTA row
     .work-card__price       — large display value
     .work-card__cta         — text-arrow link
   ============================================================ */

.work-grid {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 980px) { .work-grid { grid-template-columns: 1fr; } }

.work-card {
  position: relative;
  padding: 32px;
  min-height: 380px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow: hidden;
  isolation: isolate;
  border-radius: 14px;
  border: 1px solid var(--border-dark);
  transition: transform 360ms cubic-bezier(0.32, 0.72, 0, 1),
              box-shadow 360ms cubic-bezier(0.32, 0.72, 0, 1),
              border-color 360ms cubic-bezier(0.32, 0.72, 0, 1);
}
.work-card:hover,
.work-card:active,
.work-card:focus-visible {
  transform: translateY(-3px);
}
.work-card { -webkit-tap-highlight-color: transparent; }

.work-card__head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 12px;
}
.work-card__illus {
  margin: 18px 0 20px;
  width: 84px;
  height: 84px;
  color: var(--orange);
  transition: transform 420ms cubic-bezier(0.32, 0.72, 0, 1);
  transform-origin: center;
}
.work-card__illus svg { width: 100%; height: 100%; }
.work-card:hover .work-card__illus,
.work-card:focus-within .work-card__illus {
  transform: scale(1.08) rotate(-3deg);
}
.work-card.is-orange .work-card__illus { color: white; }
.work-card.is-muted .work-card__illus { color: rgba(255,255,255,0.45); }

/* Featured badge — same vibe as bento "Most Popular" */
.work-card__badge {
  position: absolute;
  top: 18px; right: 18px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--orange);
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  z-index: 2;
  box-shadow: 0 6px 14px -6px rgba(0,0,0,0.35);
}

/* Decorative orange-tinted surface accents, varied per card */
.work-card--1::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    repeating-linear-gradient(
      -45deg,
      transparent, transparent 5px,
      rgba(0,0,0,0.06) 5px, rgba(0,0,0,0.06) 6px
    );
}
/* Featured card glow */
/* Cursor spotlight — opt-in via data-spotlight + js/hover-spotlight.js.
   Uses ::after (the ::before is the variant-1 stripe). */
.work-card[data-spotlight]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(var(--spot-size, 360px) circle at var(--mx, 50%) var(--my, 50%),
    var(--spot-color, rgba(232, 84, 10, 0.14)), transparent 60%);
  transition: opacity 0.42s cubic-bezier(0.32, 0.72, 0, 1);
}
.work-card[data-spotlight]:hover::after { opacity: 1; }
.work-card[data-spotlight] > * { position: relative; z-index: 1; }

.work-card.is-featured {
  box-shadow:
    0 0 0 1px rgba(232, 84, 10, 0.0),
    0 20px 40px -20px rgba(232, 84, 10, 0.45);
}
.work-card.is-featured:hover,
.work-card.is-featured:focus-within {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.18),
    0 28px 56px -22px rgba(232, 84, 10, 0.6),
    0 8px 22px -10px rgba(0,0,0,0.4);
}

/* Card 1 — orange priority */
.work-card.is-orange {
  background:
    repeating-linear-gradient(
      -45deg,
      transparent, transparent 4px,
      rgba(0,0,0,0.07) 4px, rgba(0,0,0,0.07) 5px
    ),
    var(--orange);
  border-color: var(--orange);
}

/* Card 2 — dark surface (open, second priority) */
.work-card.is-dark {
  background: linear-gradient(160deg, #1f1f21 0%, #131315 100%);
  border-color: rgba(255, 255, 255, 0.08);
}
.work-card.is-dark:hover,
.work-card.is-dark:active,
.work-card.is-dark:focus-visible {
  border-color: rgba(232, 84, 10, 0.45);
  box-shadow:
    0 18px 36px -22px rgba(0,0,0,0.6),
    0 8px 20px -10px rgba(232, 84, 10, 0.35);
}

/* Card 3 — muted waitlist */
.work-card.is-muted {
  background: #1c1c1e;
  border-color: rgba(255, 255, 255, 0.05);
}
.work-card.is-muted:hover,
.work-card.is-muted:active,
.work-card.is-muted:focus-visible {
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow:
    0 16px 32px -22px rgba(0, 0, 0, 0.6),
    0 4px 14px -8px rgba(232, 84, 10, 0.18);
}


.work-card__eyebrow {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
}
.work-card.is-muted .work-card__eyebrow { color: rgba(255, 255, 255, 0.45); }

/* Animated open-status dot */
.work-card__status-dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #4ADE80;
  margin-right: 8px;
  flex-shrink: 0;
  animation: work-slot-pulse 2s ease-in-out infinite;
}
.work-card.is-orange .work-card__status-dot { background: #FFFFFF; }

@keyframes work-slot-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(0.8); }
}
@media (prefers-reduced-motion: reduce) {
  .work-card__status-dot { animation: none; }
}

/* Status tag (the "Open" / "Waitlist" word in the eyebrow) */
.work-card__status-tag {
  color: var(--orange);
  font-weight: 700;
}
.work-card.is-orange .work-card__status-tag { color: white; }
.work-card__status-tag--muted {
  color: rgba(255, 255, 255, 0.45);
}

.work-card__num {
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.20em;
  color: rgba(255, 255, 255, 0.50);
}
.work-card.is-orange .work-card__num { color: rgba(255, 255, 255, 0.75); }
.work-card.is-muted .work-card__num { color: rgba(255, 255, 255, 0.30); }

.work-card__title {
  font-family: var(--font-display);
  font-size: clamp(30px, 3.6vw, 48px);
  letter-spacing: -0.02em;
  line-height: 0.95;
  text-transform: uppercase;
  color: white;
  margin: 20px 0 14px;
}
.work-card.is-muted .work-card__title { color: rgba(255, 255, 255, 0.55); }

.work-card__desc {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.55;
  max-width: 30ch;
  margin: 0 0 28px;
}
.work-card.is-orange .work-card__desc { color: rgba(255, 255, 255, 0.92); }
.work-card.is-muted .work-card__desc { color: rgba(255, 255, 255, 0.45); }

.work-card__bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
  margin-top: auto;
}
.work-card__price {
  font-family: var(--font-display);
  font-size: clamp(32px, 3vw, 40px);
  color: var(--orange);
  line-height: 1;
}
.work-card.is-orange .work-card__price { color: white; }
.work-card.is-muted .work-card__price { color: rgba(255, 255, 255, 0.55); }
.work-card__cta {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--orange);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
.work-card__cta:hover,
.work-card__cta:active,
.work-card__cta:focus-visible { transform: translateX(3px); }
.work-card__cta { -webkit-tap-highlight-color: transparent; }
.work-card.is-orange .work-card__cta { color: white; }
.work-card.is-dark .work-card__cta { color: var(--orange); }
.work-card.is-muted .work-card__cta { color: rgba(255, 255, 255, 0.50); }

/* Mobile tap-target padding for the CTA — matches work.css media block.
   On mobile the CTA gets a real button affordance (subtle tint + 44px). */
@media (max-width: 768px) {
  .work-card__cta {
    display: inline-block;
    padding: 13px 16px;
    min-height: 46px;
    line-height: 20px;
    box-sizing: border-box;
    border-radius: 8px;
  }
  .work-card.is-orange .work-card__cta {
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.20);
  }
  .work-card.is-dark .work-card__cta {
    background: rgba(232, 84, 10, 0.08);
    border: 1px solid rgba(232, 84, 10, 0.22);
  }
  .work-card.is-muted .work-card__cta {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
  }
}