/* ─────────────────────────────────────────────────────────────────────────
   NewPrompt — Card System V3 (cards.css)

   The single unified content card. Spec: docs/CARD_SYSTEM_V3_DECISIONS.md.
   PHASE 0 — DORMANT: this stylesheet is loaded globally but NO live view uses
   `.np-card` yet. Every selector here is new (`np-card*`), so it cannot affect
   any existing card. Live cards migrate family-by-family in later phases.

   Anatomy (title-led):
     ① type line  (dot + lowercase label)        + arrow top-right
     ② title      (h3, dominant, clamp 2)
     ③ description (clamp 3 / 2 mobile)
     ④ flexible spacer (margin-top:auto on meta)
     ⑤ metadata   (one quiet row, pinned bottom)
   No pills. No persistent text CTA. Whole card is the link; arrow is the affordance.
   ───────────────────────────────────────────────────────────────────────── */

/* ── base ── */
.np-card {
    --card-accent: var(--np-text-muted);          /* overridden by tier modifier */
    position: relative;
    display: flex;
    flex-direction: column;
    /* As a grid/flex item the card must be allowed to shrink below its content's
       min-content size; otherwise a single-column `1fr` track floors at the card's
       min-content and the card overflows narrow containers (mobile browse grids +
       detail related grids). The title/description/meta already clip via overflow. */
    min-width: 0;
    min-height: var(--np-card-min-h);
    padding: var(--np-card-pad);
    background: var(--np-card-surface);
    border: 1px solid var(--np-card-border);
    border-radius: var(--np-radius);
    /* Hover timing matched to the homepage featured card (home.css .np-featured-card):
       border-color .15s · transform .12s · background .15s. */
    transition: border-color 0.15s ease, transform 0.12s ease, background 0.15s ease;
}

/* Filter/search JS toggles the [hidden] attribute; the display:flex above would otherwise
   override the UA [hidden]{display:none}, so re-assert it (matches the pattern in
   playbooks.css / resources.css for the legacy cards). */
.np-card[hidden] { display: none; }

/* ── tier modifiers (color only) ── */
.np-card--project  { --card-accent: var(--np-bp-accent); }
.np-card--workflow { --card-accent: var(--np-pb-accent); }
.np-card--resource { --card-accent: var(--np-res-accent); }
.np-card--tool     { --card-accent: var(--np-tool-accent); }

/* ── featured: 3px left stripe (not a badge) ── */
.np-card--featured::before {
    content: "";
    position: absolute;
    left: 0;
    top: 1.5px;
    bottom: 1.5px;
    width: 3px;
    border-radius: 1.5px 0 0 1.5px;
    background: var(--card-accent);
}

/* ── ① type line: dot + lowercase label ── */
.np-card__type {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 18px;
}
.np-card__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--card-accent);
    flex-shrink: 0;
}
.np-card__type-label {
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    color: var(--np-text-secondary);
    text-transform: lowercase;
}

/* ── arrow (affordance, top-right) — not a text CTA ── */
.np-card__arrow {
    position: absolute;
    top: var(--np-card-pad);
    right: var(--np-card-pad);
    width: 16px;
    height: 16px;
    color: var(--np-text-muted);
    transition: color 0.15s ease, transform 0.15s ease;
    pointer-events: none;
}

/* ── ② title (dominant) ── */
.np-card__title {
    margin: 14px 0 0;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--np-text-primary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── ③ description ── */
.np-card__description {
    margin: 10px 0 0;
    font-size: 13.5px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--np-text-secondary);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── ⑤ metadata (pinned bottom, one quiet row) ── */
.np-card__meta {
    margin-top: auto;            /* the flexible spacer — pins meta to the bottom */
    padding-top: 16px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
    overflow: hidden;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    color: var(--np-text-muted);
    white-space: nowrap;
}
.np-card__meta-sep { color: var(--np-text-muted); opacity: 0.6; }
.np-card__meta svg { width: 14px; height: 14px; flex-shrink: 0; }

/* ── whole-card stretched link ── */
/* All states pinned to no-underline: overrides the global `a:hover { text-decoration: underline }`
   (main.css) so the title never underlines on hover or focus. Title color stays inherited. */
.np-card__link,
.np-card__link:hover,
.np-card__link:focus,
.np-card__link:focus-visible {
    color: inherit;
    text-decoration: none;
}
.np-card__link::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--np-radius);
}

/* ── interaction (only interactive cards lift; hover-capable pointers only) ── */
@media (hover: hover) {
    /* Hover feel matched to the homepage featured card (home.css): softer 0.5-alpha
       accent border (color-mix derives it from the tier accent — identical to the
       featured card's rgba(accent,0.5)), a subtle surface lift, and -2px. */
    .np-card--link:hover {
        border-color: color-mix(in srgb, var(--card-accent) 50%, transparent);
        background: #181b26;
        transform: translateY(-2px);
    }
    .np-card--link:hover .np-card__arrow {
        color: var(--card-accent);
        transform: translateX(2px);
    }
}
.np-card__link:focus-visible::after {
    outline: 2px solid var(--np-border-focus);
    outline-offset: 2px;
}

/* ── soon / disabled ── */
.np-card--soon {
    opacity: 0.7;
    pointer-events: none;
}
.np-card--soon .np-card__dot {
    background: transparent;
    border: 1.4px solid var(--np-text-muted);
}
.np-card--soon .np-card__arrow { display: none; }

/* ── grid ── */
.np-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--np-card-grid-gap);
}

/* ── Discovery section (full-width detail-page card discovery: Blueprint / Playbook / Resource) ──
   Shared chrome used by all detail-page bottom discovery sections; cards self-colour by tier, so the
   section itself carries no per-entity colour. Generic class names keep it one shared system. */
/* Detail-section rhythm: each discovery block is a major section, so give back-to-back card
   sections real breathing room (48px desktop) instead of the old tight 32px "card wall".
   Detail-only class (no index/listing grid uses it), so this is safe to tune globally.
   Mobile tightens this back to 32px in the media block below. */
.np-disc { margin-top: 3rem; }
.np-disc-hdr { font-size: 1.25rem; font-weight: 700; margin: 0 0 1rem; }
.np-disc-sub { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--np-text-muted); margin: 1.5rem 0 0.8rem; }

/* ── mobile (≤ 639px): bigger title, tighter padding, 2-line desc, 1 column ── */
@media (max-width: 639px) {
    .np-card { padding: 16px; }
    .np-card__arrow { top: 16px; right: 16px; }
    .np-card__title { font-size: 18px; }
    .np-card__description { -webkit-line-clamp: 2; }
    .np-card-grid { grid-template-columns: 1fr; gap: 12px; }
    /* Tighten detail-section rhythm on mobile so the page doesn't grow too tall (48px → 32px). */
    .np-disc { margin-top: 2rem; }
}

/* ── reduced motion ── */
@media (prefers-reduced-motion: reduce) {
    .np-card, .np-card__arrow { transition: none; }
    .np-card--link:hover { transform: none; }
    .np-card--link:hover .np-card__arrow { transform: none; }
}