/* assets/css/components/card-family.css
 * @layer components — Unified card family (resource / job / case-study / blog)
 * ════════════════════════════════════════════════════════════════════
 * Shared design language across four content types so the Insights Hub
 * and archive pages render consistently. All four cards share:
 *
 *   .card-{type}__id-bar        — teal identity zone at the top
 *   .card-{type}__accent-strip  — 5px blush family marker
 *   .card-{type}__body          — content region (inherits .card__body)
 *   .card-{type}__footer        — CTA row
 *
 * The .card framework (card.css) owns all shell, shadow, radius, hover
 * lift, body padding, and typography. This file only styles what is
 * unique to each content type plus the shared identity-bar treatment.
 *
 * Event card lives in its own file (page-events.css) because it owns
 * richer container-query breakpoints for the archive listing. The API
 * naming here matches the event card so data/shape is interchangeable.
 *
 * All values come from tokens.css — no raw colour, spacing, or px.
 * ════════════════════════════════════════════════════════════════════ */

@layer components {

  /* ════════════════════════════════════════════════════════════════════
     SHELL — self-contained card shell following the team-member card
     pattern (card.css:823). The card family does NOT inherit .card's
     gap/rhythm because the children are structural layers (id-bar,
     accent strip, media, body) that must sit flush against each other,
     not rhythmically spaced via gap.

     Following the team-member precedent:
     • Own display/flex/column/background/border/radius/shadow/overflow.
     • NO flex gap between children — strip sits flush by default.
     • Children own their own internal padding (id-bar, body).

     Higher specificity (.card.card-*) beats .card's base (from card.css)
     so our no-gap shell wins cleanly without !important.
     ════════════════════════════════════════════════════════════════════ */

  .card.card-resource,
  .card.card-job,
  .card.card-case-study,
  .card.card-blog {
    display: flex;
    flex-direction: column;
    gap: 0;                                  /* flush layers, no rhythm */
    /* Pure white background for clean consistency across all family
       types — matches .blog-card's override in home.css. The default
       --card-bg is --surface-raised (off-white) which reads as tinted
       against the tinted Insights Hub section background. */
    --card-bg: var(--white);
    background: var(--card-bg);
    border: var(--card-border);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    overflow: hidden;
    transition:
      box-shadow var(--card-transition),
      transform  var(--card-transition);
  }

  .card.card-resource:hover,
  .card.card-job:hover,
  .card.card-case-study:hover,
  .card.card-blog:hover {
    box-shadow: var(--card-shadow-hover);
    transform: translateY(calc(var(--space-3xs) * -1));
  }


  /* ════════════════════════════════════════════════════════════════════
     SHARED IDENTITY BAR — mixin-style rule applied to every family card.

     All four cards have the same structural top: 64px teal bar with a
     left cluster (icon + eyebrow + secondary label) and an optional
     right-side badge. The body sits below a 5px blush accent strip.

     Uses attribute selector so we don't repeat 4 identical rule blocks.
     ════════════════════════════════════════════════════════════════════ */

  .card-resource__id-bar,
  .card-job__id-bar,
  .card-case-study__id-bar,
  .card-blog__id-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-m);
    /* Slightly more generous horizontal padding so content breathes
       away from the card edges. Vertical padding stays tight because
       the bar height is fixed (64px) and content is a 32px icon chip. */
    padding: var(--space-s) var(--space-l);
    background: var(--primary-dark);
    /* FIXED block-size (not min) so all 4 card types have identical
       identity-bar height regardless of internal icon chip sizing.
       The padding fits inside this fixed 64px height. */
    block-size: var(--space-3xl);           /* 64px — fixed visual parity */
    overflow: hidden;
    /* Ensure the identity bar stretches edge-to-edge inside the card. */
    inline-size: 100%;
    margin-inline: 0;
    box-sizing: border-box;
  }

  /* Resource uses the primary gradient (primary-dark → primary-ultra-dark)
     as its identity bar — visually distinguishes files from the flat-teal
     identity bars on case-study/blog/job while staying in the primary
     teal family. Uses the existing --card-gradient-primary token so
     the value is maintained in tokens.css, not hardcoded here. */
  .card-resource__id-bar {
    background: var(--card-gradient-primary);
  }

  /* Reset inherited padding/gap from legacy .card-resource rule in
     card.css (a separate horizontal-row resource card that used to live
     on archive pages before the unification). The unified card now
     controls its own padding via __id-bar + __body rules — any outer
     padding inset the identity bar from the card edges and made the
     gradient bar look "inset" instead of edge-to-edge. */
  .card-resource {
    padding: 0;
    gap: 0;
  }

  .card-resource__id-bar .card-resource__doc-icon,
  .card-job__id-bar .card-job__dept-icon,
  .card-case-study__id-bar .card-case-study__icon,
  .card-blog__id-bar .card-blog__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: var(--space-xl);            /* 32px chip */
    block-size: var(--space-xl);
    border-radius: var(--radius-full);
    background: color-mix(in oklch, var(--white) 12%, transparent);
    color: var(--white);
    flex-shrink: 0;
  }

  .card-resource__id-bar .card-resource__doc-icon svg,
  .card-job__id-bar .card-job__dept-icon svg,
  .card-case-study__id-bar .card-case-study__icon svg,
  .card-blog__id-bar .card-blog__icon svg {
    inline-size: var(--icon-ui-s);
    block-size: var(--icon-ui-s);
  }

  .card-resource__id-left,
  .card-job__id-left,
  .card-case-study__id-left,
  .card-blog__id-left {
    display: flex;
    align-items: center;
    gap: var(--space-s);
    min-inline-size: 0;                       /* allow labels to truncate */
  }

  .card-resource__id-stack,
  .card-job__id-stack,
  .card-case-study__id-stack,
  .card-blog__id-stack {
    display: flex;
    flex-direction: column;
    /* Eyebrow ↔ secondary label — 4px felt cramped against the tight
       line-height, pulled apart to 6-8px so the two lines read as
       distinct typographic lines instead of crowding. */
    gap: var(--space-2xs);
    min-inline-size: 0;
  }

  /* Eyebrow: white caps — same typographic treatment across types */
  .card-resource__eyebrow,
  .card-job__eyebrow,
  .card-case-study__eyebrow,
  .card-blog__eyebrow {
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    line-height: var(--leading-tight);
    color: color-mix(in oklch, var(--white) 65%, transparent);
  }

  /* Secondary identity label: client for case-study, category for blog,
     dept for job, meta line for resource. Slightly softer white. */
  .card-resource__meta-line,
  .card-job__dept-label,
  .card-case-study__client-label,
  .card-blog__category-label {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    line-height: var(--leading-tight);
    color: color-mix(in oklch, var(--white) 80%, transparent);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Right-side badge: pill with semi-transparent white bg */
  .card-resource__format-badge,
  .card-job__positions-badge,
  .card-case-study__industry-badge,
  .card-blog__read-time {
    display: inline-flex;
    align-items: center;
    padding: var(--space-3xs) var(--space-xs);
    border-radius: var(--radius-full);
    background: color-mix(in oklch, var(--white) 18%, transparent);
    color: var(--white);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-caps);
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* Resource format badge (PDF) uses a feedback-error accent — the red
     PDF corner is a familiar document convention. */
  .card-resource__format-badge {
    background: var(--feedback-error);
    border-radius: var(--radius-xs);
    letter-spacing: 0.05em;
  }

  /* Job positions badge uses success green — multi-position hiring
     signals opportunity. Only renders when positions_count > 1. */
  .card-job__positions-badge {
    background: var(--feedback-success);
    border-radius: var(--radius-xs);
  }


  /* ════════════════════════════════════════════════════════════════════
     SHARED ACCENT STRIP — 5px blush rectangle below the id-bar.

     This is the family marker. Same height + colour + placement across
     all four cards. Matches the event card's mobile blush strip
     (page-events.css) so the whole card system reads as one family.
     ════════════════════════════════════════════════════════════════════ */

  .card-resource__accent-strip,
  .card-job__accent-strip,
  .card-case-study__accent-strip,
  .card-blog__accent-strip {
    block-size: var(--space-2xs);            /* 5px */
    background: var(--secondary-semi-dark);
    flex-shrink: 0;
    inline-size: 100%;
    /* No negative margin needed — the card shell (above) uses gap:0
       so children sit flush. Matches card-team-member__gradient-strip
       precedent in card.css. */
  }


  /* ════════════════════════════════════════════════════════════════════
     BODY TIGHTENING — the id-bar already provides top separation, so
     body padding-top shrinks (same pattern card.css uses when .card__media
     precedes .card__body).
     ════════════════════════════════════════════════════════════════════ */

  .card:has(> .card-resource__accent-strip) > .card-resource__body,
  .card:has(> .card-job__accent-strip) > .card-job__body,
  .card:has(> .card-case-study__accent-strip) > .card-case-study__body,
  .card:has(> .card-blog__accent-strip) > .card-blog__body {
    padding-block-start: var(--space-m);
  }


  /* ════════════════════════════════════════════════════════════════════
     FOOTER — CTA row with optional leading element.

     Resource: single trailing CTA
     Job: leading closing-date urgency + trailing Apply CTA
     Case Study: leading outcome stat + trailing Read CTA
     Blog: trailing Read CTA (author row lives above in body)
     ════════════════════════════════════════════════════════════════════ */

  .card-resource__footer,
  .card-job__footer,
  .card-case-study__footer,
  .card-blog__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-s);
    margin-block-start: auto;                /* push footer to card bottom */
    padding-block-start: var(--space-s);
    border-block-start: 1px solid var(--border-subtle);
  }

  /* When there's only one child (CTA alone), right-align it */
  .card-resource__footer:has(> :only-child),
  .card-blog__footer:has(> :only-child) {
    justify-content: flex-end;
  }


  /* ════════════════════════════════════════════════════════════════════
     TYPE-SPECIFIC DETAIL — minimal overrides per content type.
     ════════════════════════════════════════════════════════════════════ */

  /* ── RESOURCE ─────────────────────────────────────────────────────── */

  .card-resource__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3xs);
    padding: var(--space-3xs) var(--space-xs);
    background: var(--primary-ultra-light);
    color: var(--primary-dark);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    border-radius: var(--radius-full);
    align-self: flex-start;
  }

  .card-resource__lock {
    inline-size: var(--icon-inline-s);
    block-size: var(--icon-inline-s);
  }

  .card-resource__date {
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin: 0;
  }


  /* ── JOB ──────────────────────────────────────────────────────────── */

  .card-job__top-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-s);
  }

  .card-job__ref-code {
    font-size: var(--text-xs);
    color: var(--text-muted);
    white-space: nowrap;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
  }

  .card-job__ref-label {
    font-weight: var(--weight-semibold);
    color: var(--text-subtle);
    letter-spacing: var(--tracking-caps);
    margin-inline-end: var(--space-3xs);
  }

  .card-job__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-m);
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .card-job__meta-item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    font-size: var(--text-s);
    color: var(--text-muted);
  }

  .card-job__meta-item svg {
    flex-shrink: 0;
  }

  .card-job__closing {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    font-size: var(--text-s);
    font-weight: var(--weight-semibold);
    color: var(--feedback-error);
  }


  /* ── CASE STUDY ───────────────────────────────────────────────────── */

  .card-case-study__outcome {
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-2xs);
  }

  .card-case-study__outcome-value {
    font-family: var(--font-heading);
    font-size: var(--text-l);
    font-weight: var(--weight-bold);
    color: var(--text-accent);
    line-height: 1;
  }

  .card-case-study__outcome-label {
    font-size: var(--text-xs);
    color: var(--text-muted);
  }


  /* ── BLOG ─────────────────────────────────────────────────────────── */

  .card-blog__author-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2xs);
    font-size: var(--text-xs);
    color: var(--text-muted);
  }

  .card-blog__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: var(--space-l);             /* 24px */
    block-size: var(--space-l);
    border-radius: var(--radius-full);
    background: var(--primary);
    color: var(--white);
    overflow: hidden;
    flex-shrink: 0;
  }

  .card-blog__avatar-img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  .card-blog__avatar-initials {
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    letter-spacing: 0;
  }

  .card-blog__author-name {
    font-weight: var(--weight-semibold);
    color: var(--text-body);
  }

  .card-blog__author-sep {
    color: var(--border-strong);
  }


  /* ════════════════════════════════════════════════════════════════════
     --FEATURED MODIFIER — horizontal landscape card.
     ─────────────────────────────────────────────────────────────────────
     Image on the left (240px, full card height) + content body on the
     right + edge-to-edge blush accent strip at the bottom. Used in the
     Insights Hub Row 1 (two cards side-by-side). Below desktop width
     the modifier disengages and the card falls back to its default
     vertical layout.

     Works now because we removed `container-type: inline-size` from
     `.card` base. The cascade is plain and predictable — no container
     queries fighting each other, no self-referential queries failing
     silently. Pure descendant selectors + one viewport media query.
     ════════════════════════════════════════════════════════════════════ */

  @media (min-width: 60em) {

    /* Flip the card to horizontal row layout.
       Scoped by .home-insights__row-featured parent so the specificity
       (0-3-0) is higher than the shell block `.card.card-{type}`
       (0-2-0) — guarantees the featured variant wins over the shell's
       flex-direction: column, regardless of file order or @layer. */
    .home-insights__row-featured .card.card-resource--featured,
    .home-insights__row-featured .card.card-job--featured,
    .home-insights__row-featured .card.card-case-study--featured,
    .home-insights__row-featured .card.card-blog--featured,
    .home-insights__row-featured .card.card-event--featured {
      flex-direction: row;
      min-block-size: var(--card-featured-min-height);
      position: relative;                  /* for ::after accent bar */
      padding-block-end: var(--space-2xs); /* room for the 5px accent */
    }

    /* Bottom blush accent strip — absolutely pinned to the outer card
       so it reaches edge-to-edge across the card, across the border
       radius, not nested inside a padded body that would indent it. */
    .home-insights__row-featured .card-resource--featured::after,
    .home-insights__row-featured .card-job--featured::after,
    .home-insights__row-featured .card-case-study--featured::after,
    .home-insights__row-featured .card-blog--featured::after,
    .home-insights__row-featured .card-event--featured::after {
      content: '';
      position: absolute;
      inset-block-end: 0;
      inset-inline: 0;
      block-size: var(--space-2xs);       /* 5px blush strip */
      background: var(--secondary-semi-dark);
      z-index: 2;
    }

    /* Hide the default identity bar + its inline accent strip —
       featured variant uses an inline eyebrow at top of body, not a
       teal identity column on the left. */
    .home-insights__row-featured .card-resource--featured > .card-resource__id-bar,
    .home-insights__row-featured .card-job--featured > .card-job__id-bar,
    .home-insights__row-featured .card-case-study--featured > .card-case-study__id-bar,
    .home-insights__row-featured .card-blog--featured > .card-blog__id-bar,
    .home-insights__row-featured .card-resource--featured > .card-resource__accent-strip,
    .home-insights__row-featured .card-job--featured > .card-job__accent-strip,
    .home-insights__row-featured .card-case-study--featured > .card-case-study__accent-strip,
    .home-insights__row-featured .card-blog--featured > .card-blog__accent-strip {
      display: none;
    }

    /* Image column pinned to the left of the card. */
    .home-insights__row-featured .card-resource--featured .card-resource__cover-image,
    .home-insights__row-featured .card-case-study--featured .card-case-study__media,
    .home-insights__row-featured .card-blog--featured .card-blog__media {
      flex-shrink: 0;
      inline-size: 15rem;                 /* 240px */
      align-self: stretch;
      aspect-ratio: auto;
      order: -1;                           /* pin to beginning */
    }

    .home-insights__row-featured .card-resource--featured .card-resource__cover-image img,
    .home-insights__row-featured .card-case-study--featured .card-case-study__media img,
    .home-insights__row-featured .card-blog--featured .card-blog__media img {
      inline-size: 100%;
      block-size: 100%;
      object-fit: cover;
      display: block;
    }

    /* Body fills remaining width with generous padding. */
    .home-insights__row-featured .card-resource--featured > .card-resource__body,
    .home-insights__row-featured .card-job--featured > .card-job__body,
    .home-insights__row-featured .card-case-study--featured > .card-case-study__body,
    .home-insights__row-featured .card-blog--featured > .card-blog__body {
      flex: 1;
      min-inline-size: 0;
      padding: var(--space-l) var(--space-xl);
      justify-content: center;
    }

    /* ── Event featured — reuse same pattern using card-event's own slots.
       Hide the teal date column and show the image column instead. */
    .home-insights__row-featured .card-event--featured > .card-event__id-bar {
      display: none;
    }

    .home-insights__row-featured .card-event--featured .card-event__image {
      display: block;
      flex-shrink: 0;
      inline-size: 15rem;
      align-self: stretch;
      order: -1;
      overflow: hidden;
    }

    .home-insights__row-featured .card-event--featured .card-event__image img {
      inline-size: 100%;
      block-size: 100%;
      object-fit: cover;
      display: block;
    }

    .home-insights__row-featured .card-event--featured > .card__body {
      flex: 1;
      min-inline-size: 0;
      padding: var(--space-l) var(--space-xl);
      justify-content: center;
    }

    /* Remove the mobile separator pseudo-element in featured context. */
    .home-insights__row-featured .card-event--featured .card-event__id-bar + .card__body::before {
      display: none;
    }

    /* Event top row — clean inline eyebrow + meta, no logo slot. */
    .home-insights__row-featured .card-event--featured .card-event__top {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: var(--space-m);
    }

    .home-insights__row-featured .card-event--featured .card-event__top .card-event__badge {
      background: transparent;
      padding: 0;
      color: var(--primary);
      font-weight: var(--weight-bold);
      letter-spacing: var(--tracking-caps);
      text-transform: uppercase;
      font-size: var(--text-xs);
    }

    .home-insights__row-featured .card-event--featured .card-event__top .card-event__logo {
      display: none;
    }
  }



  /* ════════════════════════════════════════════════════════════════════
     MEDIA — inherits from .card__media in card.css; only specific
     overrides live here.
     ════════════════════════════════════════════════════════════════════ */

  /* Media band sits below the accent strip, before the body.
     Landscape 16:9 ratio — 4:3 looked too square and made the image
     dominate the card height; 16:9 balances image + body for the
     teaser format.

     Scoped to :not(--featured) so the horizontal featured variant's
     image column can set its own aspect-ratio (auto → full-card height)
     without being clobbered by this later-in-file rule. */
  .card-resource:not(.card-resource--featured) .card-resource__cover-image,
  .card-case-study:not(.card-case-study--featured) .card-case-study__media,
  .card-blog:not(.card-blog--featured) .card-blog__media {
    flex-shrink: 0;
    overflow: hidden;
    aspect-ratio: var(--ratio-landscape);
  }

  .card-resource__cover-image img,
  .card-case-study__media img,
  .card-blog__media img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    display: block;
  }

}