/* cards — the shared .b-card body; loads after blocks.css (same-specificity ties) */

@scope (.b-card) {
  :scope {
    /* fluid card: 340px floor, 520px cap */
    max-inline-size: 32.5rem;
    min-inline-size: 21.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    /* narrow phones: zero min + definite 100% width keep nowrap titles from widening the card */
    @media (width <= 480px) {
      min-inline-size: 0;
      inline-size: 100%;
      gap: 0.75rem;
    }
  }
  /* skeleton padding; is-tag-row opts out */
  :scope:not(.is-tag-row) {
    padding-block-start: 1rem;
    padding-inline: 2px;
  }

  /* row 1: the solution card's mono meta line (ACCESS · LEVEL) */
  .card-kicker {
    inline-size: 100%;
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--text-tertiary);
  }
  .kicker-meta {
    display: inline-flex;
    align-items: baseline;
    gap: 0.5rem;
    min-inline-size: 0;
    overflow: hidden;
  }
  .kicker-meta [data-access] + [data-level]::before,
  .kicker-meta [data-level] + [data-sections]:not(:empty)::before {
    content: "·";
    margin-inline-end: 0.5rem;
    font-weight: 400;
  }

  /* row 2: the title, linking the card's own page */
  .card-title-row {
    inline-size: 100%;
    display: flex;
    align-items: center;
    gap: 0.625rem;
  }
  .card-title-row h3 {
    flex: 1;
    min-inline-size: 0;
    color: var(--text-primary);
    font-size: 1.4375rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.3;
    /* the link inherits the heading's voice; hover lives in interactive.css */
    & a {
      color: inherit;
      text-decoration: none;
      transition: color 0.15s ease;
    }
    /* mobile: single line, ellipsis */
    @media (width <= 480px) {
      font-size: 1.25rem;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
  /* title-row icon door (solution ↗): gray, brand on hover */
  .card-title-row > a {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    color: var(--fg-quaternary);
    cursor: pointer;
    transition: color 0.15s ease;
  }
  .card-title-row > a:hover,
  .card-title-row > a:focus-visible {
    color: var(--text-brand-secondary);
  }

  /* row 3: the full-bleed thumbnail anchor */
  .card-thumb {
    position: relative;
    display: block;
    inline-size: 100%;
    border-radius: 0.625rem;
    overflow: hidden;
  }
  .card-thumb img {
    display: block;
    inline-size: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    object-position: 50%;
  }
  /* row 4: the one-line footer, refs on the start edge, tags on the end */
  .card-foot {
    inline-size: 100%;
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    column-gap: 0.875rem;
    padding-block-end: 1rem;
    font-size: 0.71875rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  /* refs zone: mono uppercase page links */
  .card-refs {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
    /* the parent ref never shrinks; the tag zone scrolls instead */
    flex-shrink: 0;
  }
  /* display-only markers (tech labels, category, Product): boxed mono chips */
  .card-refs > span,
  .card-tags > span {
    font-family: var(--font-mono);
    color: var(--text-secondary);
    background: var(--bg-primary);
    border: 1px solid var(--border-secondary);
    border-radius: 0.5rem;
    padding: 0.3125rem 0.625rem;
  }
  /* Product is the one brand-tinted chip */
  .card-tags > [data-product] {
    background: var(--utility-brand-50);
    border-color: transparent;
    color: var(--utility-brand-700);
  }
  /* tag zone: scrolls sideways when crowded, thin scrollbar on hover devices */
  .card-tags {
    margin-inline-start: auto;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
    min-inline-size: 0;
    overflow-x: auto;
    scrollbar-width: none;
    @media (hover: hover) {
      scrollbar-width: thin;
      scrollbar-color: var(--fg-quaternary) transparent;
    }
  }
  .card-ref {
    font-family: var(--font-mono);
    color: var(--utility-blue-light-700);
    text-decoration: none;
  }
  .card-ref:hover,
  .card-ref:focus-visible {
    text-decoration: underline;
  }
  /* # tags: mono lowercase, tinted by badges.js's --badge-* vars (brand without JS) */
  .card-tag {
    font-family: var(--font-mono);
    color: color-mix(in oklch,
      var(--utility-brand-700) var(--badge-mix, 100%),
      var(--badge-to, var(--utility-brand-700)));
    text-decoration: none;
    text-transform: lowercase;
  }
  .card-tag::before {
    content: "# ";
  }
  .card-tag:hover,
  .card-tag:focus-visible {
    text-decoration: underline;
  }
}