/* assets/css/components/card-investor-doc.css
 * @layer components — Investor document row
 *
 * Extends the .card framework. Shell (bg, border, radius, shadow, hover
 * lift) inherits from card.css. This file owns only what's unique to an
 * investor-doc row: the file-type chip, the meta line, the View pill,
 * and the hover-only left accent strip.
 *
 * Design system (Pencil: "Investor Pages — Design System"):
 *   - Elevation + gap rhythm (no zebra, no hairlines)
 *   - Warm secondary-family hover wash (doesn't clash with teal action)
 *   - 3px primary left-accent appears on hover only
 *   - Pill CTA "primes" on row-hover, fills on direct hover with arrow nudge
 *   - All timings via tokens, reduced-motion + hover-gate safe
 */

@layer components {

  .card-investor-doc {
    position: relative;
    overflow: hidden;
    background-color: var(--white);

    box-shadow:
      0 1px 2px  color-mix(in oklch, var(--secondary-dark) 8%,  transparent),
      0 4px 12px color-mix(in oklch, var(--secondary-dark) 10%, transparent);
    transition:
      background-color var(--duration-fast) var(--ease-default),
      border-color     var(--duration-fast) var(--ease-default),
      box-shadow       var(--card-transition),
      transform        var(--card-transition);
  }

  @media (hover: hover) {
    .card-investor-doc:hover {

      background-color: var(--white);
      border-color: var(--primary);
      box-shadow:
        0 6px 20px color-mix(in oklch, var(--primary) 14%, transparent),
        0 2px 4px  color-mix(in oklch, var(--primary) 8%,  transparent);
      transform: translateY(calc(var(--space-3xs) * -1));
    }
  }

  .card-investor-doc:active {
    transform: translateY(0);
    background-color: var(--primary-ultra-light);
    box-shadow:
      0 1px 2px color-mix(in oklch, var(--primary) 18%, transparent);
  }

  .card-investor-doc:has(:focus-visible) {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
  }

  .card-investor-doc__accent {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    inline-size: var(--space-3xs);
    background: var(--primary);
    transform: scaleY(0);
    transform-origin: center;
    transition: transform var(--card-transition);
  }

  @media (hover: hover) {
    .card-investor-doc:hover .card-investor-doc__accent {
      transform: scaleY(1);
    }
  }

  .card-investor-doc__body {
    flex-direction: row;
    align-items: center;
    /* --container-gap is the guaranteed breathing room between the title
       column and the View pill. With min-inline-size:0 on the content
       column, the title wraps within its own column and can never butt
       against View. */
    gap: var(--container-gap);
    padding: var(--space-m) var(--space-l);
  }

  .card-investor-doc__chip {
    flex-shrink: 0;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3xs);
    inline-size: var(--space-xl);
    block-size: var(--space-xl);
    padding-block: var(--space-3xs);

    background: var(--neutral-ultra-light);
    color: var(--primary);
    border-radius: var(--radius-s);
    transition:
      background-color var(--duration-fast) var(--ease-default),
      color            var(--duration-fast) var(--ease-default);
  }

  .card-investor-doc__chip-icon {
    inline-size: var(--icon-inline-m);
    block-size: var(--icon-inline-m);
    color: inherit;
  }

  .card-investor-doc__chip-label {
    font-size: var(--text-2xs);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-caps);
    line-height: 1;
    color: inherit;
  }

  @media (hover: hover) {
    .card-investor-doc:hover .card-investor-doc__chip {
      background: var(--primary-ultra-light);
      color: var(--primary-dark);
    }
  }

  .card-investor-doc__content {
    flex: 1;
    /* min-inline-size:0 lets the title wrap inside its own column instead of
       forcing the row wider — so it can never spill across the column-gap
       into the View pill. The gap (set on __body) owns the separation. */
    min-inline-size: 0;
    display: flex;
    flex-direction: column;
    gap: var(--stack-gap);
  }

  .card-investor-doc__title {
    margin: 0;
    font-size: var(--text-m);
    font-weight: var(--weight-semibold);
    /* --text-body (warm charcoal) instead of --text-main (near-black).
       Pure black on cream reads harsh; the slightly warmer charcoal
       lives in the palette without sacrificing legibility. WCAG AA
       contrast on --secondary-page-bg is 11.8:1 — well above 4.5. */
    color: var(--text-body);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-normal);
  }

  /* Stretched link — the whole card opens the PDF. The ::after overlay
     spans the card; the View pill is layered above it (z-index) so it
     stays independently clickable. No JS, no nested anchors. */
  .card-investor-doc__title-link {
    color: inherit;
    text-decoration: none;
  }

  .card-investor-doc__title-link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
  }

  @media (hover: hover) {
    .card-investor-doc:hover .card-investor-doc__title-link {
      color: var(--primary);
    }
  }

  /* No own outline here — the card-level .card-investor-doc:has(:focus-visible)
     rule already draws a single ring around the whole card when either the
     title-link or the CTA is keyboard-focused. Avoids a double outline. */

  .card-investor-doc__description {
    margin: 0;
    font-size: var(--text-s);
    color: var(--text-body);
    line-height: var(--leading-snug);
  }

  .card-investor-doc__meta {
    margin: 0;
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    color: var(--text-muted);
    letter-spacing: var(--tracking-wide);
  }

  .card-investor-doc__cta {
    flex-shrink: 0;
    /* Above the title-link's stretched ::after overlay so the pill stays
       independently clickable. */
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    padding-block: var(--space-2xs);
    padding-inline: var(--space-m);
    background: var(--white);
    color: var(--primary);
    font-size: var(--text-s);
    font-weight: var(--weight-semibold);
    text-decoration: none;
    border: 1px solid var(--primary-light);
    border-radius: var(--radius-full);
    transition:
      background-color var(--duration-fast) var(--ease-default),
      color            var(--duration-fast) var(--ease-default),
      border-color     var(--duration-fast) var(--ease-default);
  }

  .card-investor-doc__cta-icon {
    inline-size: var(--icon-inline-s);
    block-size: var(--icon-inline-s);
    transition: transform var(--duration-fast) var(--ease-default);
  }

  @media (hover: hover) {
    .card-investor-doc:hover .card-investor-doc__cta {
      background: var(--primary-ultra-light);
      border-color: var(--primary);
    }
  }

  .card-investor-doc__cta:hover,
  .card-investor-doc__cta:focus-visible {
    background: var(--primary);
    color: var(--text-on-primary);
    border-color: var(--primary);
  }

  .card-investor-doc__cta:hover .card-investor-doc__cta-icon,
  .card-investor-doc__cta:focus-visible .card-investor-doc__cta-icon {
    transform: translateX(var(--space-3xs));
  }

  .card-investor-doc__cta:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
  }

  @media (prefers-reduced-motion: reduce) {
    .card-investor-doc,
    .card-investor-doc__accent,
    .card-investor-doc__cta-icon {
      transition: background-color var(--duration-fast) var(--ease-default),
                  border-color     var(--duration-fast) var(--ease-default),
                  color            var(--duration-fast) var(--ease-default);
      transform: none !important;
    }
    .card-investor-doc:hover .card-investor-doc__accent {
      transform: scaleY(1) !important;
    }
  }

  @media (max-width: 40em) {
    /* Stack on small screens: chip + title share the top row, the View pill
       drops full-width below. flex-wrap + the content column growing to fill
       pushes the CTA (basis 100%) onto its own line — no fixed widths. */
    .card-investor-doc__body {
      flex-wrap: wrap;
      align-items: flex-start;
      padding: var(--space-m);
    }

    .card-investor-doc__content {
      flex-grow: 1;
    }

    .card-investor-doc__cta {
      flex: 1 1 100%;
      justify-content: center;
      margin-block-start: var(--space-2xs);
    }
  }

}