/* ── 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's own accent-top border (personal-homepage visual
   direction change: no more colored one-sided card borders, they read
   as dashboard/status-panel rather than editorial) was removed along
   with the class itself from home.html - .card's own full neutral
   border/shadow/radius already carries the "distinct object" signal.
   Verified via a repo-wide grep that .card--project had exactly one
   consumer (products/personal_website/templates/pages/home.html), so
   removing it here can't affect Website Studio or any other page. */

/* 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) gave the
   single-item case (today's real homepage state: exactly one Featured
   Project, exactly one Latest Article) a framed, card-like
   presentation with a bold `-strong` left edge - later removed
   (personal-homepage visual direction change: no more colored
   one-sided card borders). Now a plain full neutral border, same
   shape as .card elsewhere on the site - the family identity still
   reads through the icon chip, .eyebrow color, and .link-more color
   below, which is exactly the "small labels/icons/links may still
   carry color" line this system draws elsewhere. */
.feature-spotlight--editorial,
.feature-spotlight--technical {
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-6) var(--space-5);
    box-shadow: var(--shadow-card);
}

.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;
}

/* Used to carry a bold commercial-accent top edge (Issue 45 revision,
   third pass); removed (personal-homepage visual direction change: no
   more colored one-sided card borders - it read as a status panel, not
   a polished offerings presentation). Plain full neutral border now,
   same shape as .card. */
.service-item {
    background: var(--color-background);
    border: 1px solid var(--color-border);
    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);
}