/* ── Cards ─────────────────────────────────────────────────────
   The shared shell for project/article/offering/workspace cards -
   domain templates reuse this and .tag/.meta, they never define a
   parallel card style. White is the primary surface everywhere,
   including cards (Issue 34) - elevation (border + shadow) carries
   the "this is a distinct object" signal, not a grey fill. Brand
   color is reserved for action/emphasis (.cta-block, buttons,
   .eyebrow); it is not a card frame - .card and .workspace-card
   carry no brand-colored border at all.
*/
/* auto-fit, not auto-fill (Issue 33): auto-fill reserves a track for
   every column that *could* fit, even an empty one - on the wider
   canvas a short list (a handful of Featured Projects, an About
   index) left real cards squeezed into a fraction of the row with a
   dead gap filling the rest. auto-fit collapses the empty tracks so
   existing cards share the actual available width - composition, not
   a stretched card, and identical to auto-fill once a row has enough
   items to fill it anyway. */
.card-grid {
    display: grid;
    gap: var(--space-5);
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    margin-bottom: var(--space-4);
}

.card {
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-5);
    box-shadow: var(--shadow-card);
    transition: box-shadow var(--transition-base);
}

.card:hover {
    box-shadow: var(--shadow-hover);
}

.card h2, .card h3 {
    margin-bottom: var(--space-2);
}

.card p {
    color: var(--color-text-muted);
    font-size: var(--type-body-size);
}

.card-subtitle {
    color: var(--color-text-muted);
    font-size: var(--type-small-size);
}

.card-meta {
    display: flex;
    gap: var(--space-3);
    margin-top: var(--space-3);
    flex-wrap: wrap;
    align-items: center;
}

/* ── Featured Projects accent (Issue 45 v2's per-item Red/Blue split
   reverted) ──────────────────────────────────────────────────────
   Issue 45 v2 gave each Featured Project card its own top-edge
   color - Website Studio Red, the internal-platform project Blue -
   via `{% cycle %}` in home.html. That read as "Website Studio is a
   red Project" and "the other one is a blue Project," i.e. color
   identifying an individual entity rather than a UI/content role.
   Reverted: every Project card gets the same restrained dark-grey
   top border via --color-heading (the neutral/dark-grey semantic
   token, not a Projects-domain accent - Projects' domain color stays
   Blue everywhere else, per --accent-technical-*). No per-item
   modifier, no cycling - one shared rule for all Project cards, kept
   to a 3px top border only, no background fill. */
.card--project { border-top: 3px solid var(--color-heading); }

/* Inline metadata (reading time, dates, duration...) - small and muted so
   it always reads as secondary detail, never as a heading or a link. */
.meta {
    font-size: var(--type-caption-size);
    color: var(--color-text-muted);
}

/* ── CTA blocks - one step up from .card: a bordered surface with
   a brand accent, for a single primary call to action. The brand-
   colored top border stays here deliberately (Issue 34 keeps this
   one exception) - this block's entire purpose is the action it
   leads to, unlike a plain listing card. ─────────────────────────── */
.cta-block {
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-top: 3px solid var(--color-primary);
    border-radius: var(--radius-md);
    padding: var(--space-5);
}

/* ── Eyebrow - a small caps micro-label flagging a single deliberately
   selected item (e.g. "Featured Project") as distinct from an ordinary
   collection entry. Brand color by default, used sparingly - this and
   .btn-primary are the only places color alone carries meaning outside
   the semantic status system. Issue 45 revision: where the flagged
   item belongs to a specific content family that already has its own
   accent elsewhere in the system (Projects/Articles, matching Website
   Studio's dashboard-card accents), a modifier below picks that
   family's color instead of the generic brand default - see home.html
   ("Featured Project" / "Latest Article") and the decision doc's
   domain-accent table. ─────────────────────────────────────────────── */
.eyebrow {
    display: block;
    font-family: var(--font-mono);
    font-size: var(--type-caption-size);
    font-weight: var(--type-label-weight);
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: var(--space-2);
}

.eyebrow--technical { color: var(--accent-technical-fg); }
.eyebrow--editorial { color: var(--accent-editorial-fg); }

/* Small icon chip beside the eyebrow (Issue 45 v2, approved mockup) -
   the same "-strong tier, solid chip, white icon" treatment
   Website Studio's dashboard cards already use for the same content
   family (workspace.css's .workspace-card-icon), reused verbatim here
   per the shared-token architecture's own stated intent ("Articles'
   green is the same tokens on the Studio dashboard card and on a
   public article's feature panel" - see tokens/colors.css). Sits
   inline with .eyebrow, not stacked above it, matching the mockup. */
.feature-spotlight-eyebrow-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.feature-spotlight-eyebrow-row .eyebrow {
    margin-bottom: 0;
}

.feature-spotlight-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-md);
    color: #fff;
}

.feature-spotlight-icon--technical { background: var(--accent-technical-strong); }
.feature-spotlight-icon--editorial { background: var(--accent-editorial-strong); }

/* ── Feature spotlight (Issue 34) - a single collection item (Featured
   Project, Latest Article) presented as an editorial composition, not
   an oversized card. Deliberately not a bordered/shadowed box: a
   single top rule (neutral, not brand-colored - see .eyebrow for
   where brand color belongs here) is the only structural line, so
   the wide desktop canvas (Issue 33) reads as composition and
   whitespace rather than
   one giant panel. Deliberately a single controlled-width column, not
   centered or stretched to the canvas - the unused right-hand space
   on the homepage is intentional composition room for later content
   (a video, etc.), not a layout gap to fill with another component.
*/
.feature-spotlight {
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-border);
    margin-bottom: var(--space-6);
}

/* Deliberately no font-size override here: the default h3 rule
   (page.css - Heading M, "card/subsection title") is already the right
   size for an entity title. It previously overrode this to Heading XL -
   the same size as the page's own h1 - which read as a second H1 on
   the homepage (Issue 37). */
.feature-spotlight h3 {
    margin-bottom: var(--space-3);
}

.feature-spotlight .card-subtitle {
    font-size: var(--type-heading-m-size);
    margin-bottom: var(--space-3);
}

.feature-spotlight-summary {
    color: var(--color-text-muted);
    font-size: var(--type-body-lg-size);
    line-height: var(--type-body-lg-line-height);
    max-width: 60ch;
}

.feature-spotlight .card-meta {
    margin-top: var(--space-4);
}

.feature-spotlight .link-more {
    display: inline-block;
    margin-top: var(--space-4);
}

/* Issue 45 v2 (approved mockup): the action link picks up its own
   content family's color ("Read article ->" renders green inside the
   Articles panel) instead of inheriting plain body text - matching
   the same family-consistency the icon chip and border already use
   on this component. */
.feature-spotlight--technical .link-more { color: var(--accent-technical-fg); }
.feature-spotlight--editorial .link-more { color: var(--accent-editorial-fg); }

/* Narrow modifier - both Featured Project and Latest Article use this:
   a controlled reading measure instead of stretching to fill the row.
   They stay visually distinct through content, not column width -
   Project carries a subtitle and .tag/.meta metadata, Article carries
   a running byline (see .feature-spotlight-byline) instead. */
.feature-spotlight--narrow {
    max-width: 42rem;
}

/* Content-family identity (Issue 45 revision, third pass). The base
   .feature-spotlight is deliberately border-only (see above); these
   two modifiers give the single-item case (today's real homepage
   state: exactly one Featured Project, exactly one Latest Article) a
   framed, card-like presentation - white surface, a bold `-strong`
   left edge - so it reads as "this content family has its own
   identity," not just "a heading with a colored label above it." A
   pale full-background fill was tried and corrected (see the decision
   doc's Section 11): higher saturation on a small edge communicates
   the family more confidently than a diluted tint across the whole
   panel. Editorial (Articles) and Technical (Projects) reuse the
   exact same accent tokens their Website Studio dashboard-card icon
   and .eyebrow modifier already use - one set of tokens per content
   family, never a fourth new color. */
.feature-spotlight--editorial,
.feature-spotlight--technical {
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-top: none;
    border-radius: var(--radius-lg);
    padding: var(--space-6) var(--space-5);
    box-shadow: var(--shadow-card);
}

.feature-spotlight--editorial {
    border-left: 4px solid var(--accent-editorial-strong);
}

.feature-spotlight--technical {
    border-left: 4px solid var(--accent-technical-strong);
}

.feature-spotlight-byline {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    font-size: var(--type-small-size);
    color: var(--color-text-muted);
    margin-bottom: var(--space-3);
}

.feature-spotlight-byline span + span {
    padding-left: var(--space-2);
    border-left: 1px solid var(--color-border);
}

/* ── Service / offer cards - a denser grid variant of .card for
   listings of many similar-weight items. ─────────────────────────── */
.services {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    margin: var(--space-5) 0;
    align-items: stretch;
}

/* A small, bold commercial accent edge (Issue 45 revision, third pass:
   `-strong`, not `-fg` - the raw corporate hue, not its darker
   text-safe variant; Red as of Issue 45 v2) - Work With Me is the one section where every
   card genuinely shares one identity (the commercial/collaboration
   family), unlike Featured Projects' two-different-worlds treatment
   above, so every .service-item gets the same accent rather than an
   alternating one. */
.service-item {
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-top: 3px solid var(--accent-commercial-strong);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    height: 100%;
    box-shadow: var(--shadow-card);
    transition: box-shadow var(--transition-base);
}

.service-item:hover {
    box-shadow: var(--shadow-hover);
}

.service-item h3 {
    margin-bottom: var(--space-2);
}

.service-item p {
    font-size: var(--type-small-size);
    color: var(--color-text-muted);
}

/* ── Callout - the one place accent surface colors appear. For a
   single highlighted piece of content (an announcement, a featured
   course, a homepage callout) - not a status, not navigation, not
   a page background. Use restraint: one per page at most. ──────── */
.callout {
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    color: var(--color-heading);
}

.callout--sand { background: var(--surface-sand); }
.callout--pink { background: var(--surface-pink); }
.callout--blue { background: var(--surface-blue); }

/* ── Empty states - a dashed, muted variant of the card shell. ──── */
.empty-state {
    background: var(--color-surface-muted);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-6) var(--space-5);
    text-align: center;
    color: var(--color-text-muted);
}

/* ── Interactive Demos (Issue #50) - deliberately not .card-grid/.card:
   this row must read as visually secondary to Featured Projects above
   it, not a second, equally-weighted grid of full cards. Smaller
   padding, no elevation/shadow, a plain border only. ──────────────── */
.demo-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.demo-card {
    flex: 1 1 220px;
    max-width: 320px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
}

.demo-card h3 {
    font-size: var(--type-small-size);
    margin-bottom: var(--space-1);
}

.demo-card p {
    font-size: var(--type-caption-size);
    color: var(--color-text-muted);
    margin-bottom: var(--space-2);
}