/**
 * premium-module-card.css — Reusable "flagship capability" card.
 *
 * Built for Resume Intelligence Home's three modules (Health Check / Tailor /
 * Create Resume) but written as a page-agnostic component per
 * docs/resume-intelligence-experience-v2/DESIGN_LANGUAGE.md §2 — future
 * surfaces (Dashboard, Skill Gap, AI Risk) can adopt the same block.
 *
 * Composes entirely from existing tokens (css/tokens.css) and existing
 * motion utilities (css/motion.css) — no new custom properties introduced.
 *
 * Usage:
 *   <button class="pm-card pm-card--accent-primary" data-reveal>
 *     <span class="pm-card__glow" aria-hidden="true"></span>
 *     <span class="pm-card__icon">...</span>
 *     <p class="pm-card__eyebrow">Module</p>
 *     <h3 class="pm-card__title">Title</h3>
 *     <p class="pm-card__desc">Description</p>
 *     <ul class="pm-card__points">...</ul>
 *     <span class="pm-card__cta">Call to action <svg>...</svg></span>
 *   </button>
 */

.pm-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  width: 100%;
  min-height: 280px;
  padding: var(--space-8) var(--space-6) var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
  transition:
    transform var(--duration-normal) var(--ease-out),
    box-shadow var(--duration-normal) var(--ease-out),
    border-color var(--duration-normal) var(--ease-out);
}

.pm-card:hover {
  transform: translateY(calc(var(--motion-lift) * 2));
  box-shadow: var(--shadow-xl);
  border-color: var(--color-primary-border);
}

.pm-card:active {
  transform: translateY(var(--motion-lift)) scale(var(--motion-press));
}

.pm-card:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .pm-card:hover,
  .pm-card:active { transform: none; }
}

/* ── Ambient glow — a soft radial bloom that intensifies on hover ───────── */

.pm-card__glow {
  position: absolute;
  top: -40%;
  right: -30%;
  width: 65%;
  height: 65%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--pm-accent-glow, var(--color-primary-light)) 0%, transparent 70%);
  opacity: 0.7;
  pointer-events: none;
  transition: opacity var(--duration-slow) var(--ease-out), transform var(--duration-slow) var(--ease-out);
}

.pm-card:hover .pm-card__glow {
  opacity: 1;
  transform: scale(1.15);
}

/* Faint grid texture, same signature as .dashboard-hero, at lower opacity
   since it sits behind a smaller card. */
.pm-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgb(15 23 42 / 0.02) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(15 23 42 / 0.02) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 100% 0%, #000 0%, transparent 70%);
          mask-image: radial-gradient(ellipse 70% 60% at 100% 0%, #000 0%, transparent 70%);
  pointer-events: none;
}

[data-theme="dark"] .pm-card::before {
  background-image:
    linear-gradient(to right, rgb(246 249 252 / 0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(246 249 252 / 0.035) 1px, transparent 1px);
}

.pm-card > * { position: relative; }

/* ── Accent variants — set the glow tint + icon chip color per module ──── */

.pm-card--accent-primary {
  --pm-accent: var(--color-primary);
  --pm-accent-glow: var(--color-primary-light);
  --pm-accent-border: var(--color-primary-border);
}

.pm-card--accent-ai {
  --pm-accent: var(--color-ai);
  --pm-accent-glow: var(--color-ai-light);
  --pm-accent-border: var(--color-ai-border);
}

.pm-card--accent-leading {
  --pm-accent: var(--color-band-leading);
  --pm-accent-glow: var(--color-band-leading-bg);
  --pm-accent-border: var(--color-band-leading-border);
}

.pm-card--accent-primary:hover,
.pm-card--accent-ai:hover,
.pm-card--accent-leading:hover {
  border-color: var(--pm-accent-border);
}

/* ── Icon chip ───────────────────────────────────────────────────────────── */

.pm-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-lg);
  background: var(--pm-accent-glow, var(--color-primary-light));
  color: var(--pm-accent, var(--color-primary));
  flex-shrink: 0;
  transition: transform var(--duration-normal) var(--ease-spring);
}

.pm-card:hover .pm-card__icon {
  transform: scale(1.08) rotate(-4deg);
}

@media (prefers-reduced-motion: reduce) {
  .pm-card:hover .pm-card__icon { transform: none; }
}

.pm-card__icon svg {
  width: 26px;
  height: 26px;
  stroke: currentColor;
  fill: none;
}

/* ── Copy ────────────────────────────────────────────────────────────────── */

.pm-card__eyebrow {
  margin: var(--space-2) 0 0;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--pm-accent, var(--color-text-tertiary));
}

.pm-card__title {
  margin: 0;
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--line-height-tight);
  color: var(--color-text-primary);
}

.pm-card__desc {
  margin: 0;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-secondary);
}

.pm-card__points {
  list-style: none;
  margin: var(--space-2) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.pm-card__points li {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
}

.pm-card__points li::before {
  content: "";
  flex: 0 0 5px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--pm-accent, var(--color-primary));
  transform: translateY(-2px);
}

/* ── CTA row (pinned to the card's base) ────────────────────────────────── */

.pm-card__cta {
  margin-top: auto;
  padding-top: var(--space-4);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--pm-accent, var(--color-primary));
}

.pm-card__cta svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  transition: transform var(--duration-fast) var(--ease-out);
}

.pm-card:hover .pm-card__cta svg {
  transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
  .pm-card:hover .pm-card__cta svg { transform: none; }
}

/* ── Ribbon badge (e.g. "Coming Soon") ──────────────────────────────────── */

.pm-card__ribbon {
  position: absolute;
  top: var(--space-5);
  right: var(--space-5);
  padding: 3px 10px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-secondary);
  background: var(--color-surface-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
}

/* ── Disabled / "coming soon" treatment ─────────────────────────────────── */

.pm-card--soon {
  cursor: default;
}

.pm-card--soon .pm-card__icon,
.pm-card--soon .pm-card__title,
.pm-card--soon .pm-card__desc,
.pm-card--soon .pm-card__points {
  opacity: 0.75;
}

.pm-card--soon:hover {
  transform: none;
  box-shadow: var(--shadow-md);
  border-color: var(--color-border);
}

.pm-card--soon .pm-card__cta {
  color: var(--color-text-tertiary);
}

/* ── Stagger reveal on load (pairs with .reveal-target from motion.css) ── */

.pm-card.reveal-target { --stagger-step: 80ms; }

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .pm-card {
    min-height: 0;
    padding: var(--space-6) var(--space-5) var(--space-5);
  }
}