/*
 * Capabilities (/capabilities/) — the flat list of everything we make.
 *
 * No static counterpart: this page is new (2026-08-24) and has no frozen
 * build to stay diffable against, so unlike brands.css / entertainment.css it
 * is written rather than lifted. It leans on the shared components in
 * assets/styles.css wherever one exists — .page-hero, .section, .btn,
 * .cta-section, .rfn-note — and only defines the card grid those don't cover.
 *
 * Enqueued only on its own page — see refinery_enqueue_assets().
 */

    /* ── Hero ─────────────────────────────────────────────────────────────── */

    /* No sub-nav on this page, so the hero only needs to clear the fixed main
       nav — not the --subnav-height that the division pages also allow for. */
    .cap-hero {
      padding: calc(var(--nav-height) + 4.5rem) 0 3.5rem;
    }

    .cap-hero-intro {
      color: rgba(255, 255, 255, 0.65);
      max-width: 620px;
      margin: 1.5rem 0 0;
    }

    .cap-hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 1rem;
      margin-top: 2.5rem;
    }

    /* ── The list ─────────────────────────────────────────────────────────── */

    /* auto-fit rather than a fixed column count: the group count is data (see
       refinery_capability_groups()) and will change as the real copy lands, so
       the grid must not assume a multiple of anything. minmax's floor is wide
       enough that a two-word capability never wraps mid-item. */
    .cap-groups {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 1.25rem;
    }

    .cap-group {
      position: relative;
      padding: 2rem 1.75rem 1.75rem;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 12px;
      transition: border-color var(--transition-fast), background var(--transition-fast);
    }

    .cap-group:hover {
      border-color: rgba(219, 225, 32, 0.5);
      background: rgba(255, 255, 255, 0.06);
    }

    /* Matches .capability-number on the Brands cards — same component, same
       counter treatment, so the two pages read as one system. */
    .cap-group-number {
      display: block;
      font-size: 0.75rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      color: var(--chartreuse);
      margin-bottom: 0.85rem;
      font-variant-numeric: tabular-nums;
    }

    .cap-group-title {
      font-size: 1.25rem;
      font-weight: 700;
      line-height: 1.25;
      letter-spacing: -0.01em;
      color: var(--white);
      margin: 0 0 0.75rem;
    }

    /* A fact about the group, not a second heading — quieter than everything
       around it at every state. Same reasoning as .cs-division-count. */
    .cap-group-badge {
      display: inline-block;
      font-size: 0.625rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, 0.55);
      border: 1px solid rgba(255, 255, 255, 0.18);
      border-radius: 999px;
      padding: 0.25rem 0.6rem;
      margin-bottom: 1rem;
    }

    .cap-group-intro {
      font-size: 0.9375rem;
      line-height: 1.55;
      color: rgba(255, 255, 255, 0.6);
      margin: 0 0 1.25rem;
    }

    .cap-group-list {
      list-style: none;
      margin: 0;
      padding: 0;
      border-top: 1px solid rgba(255, 255, 255, 0.08);
    }

    .cap-group-list li {
      font-size: 0.9375rem;
      line-height: 1.4;
      color: rgba(255, 255, 255, 0.75);
      padding: 0.6rem 0 0.6rem 1.1rem;
      border-bottom: 1px solid rgba(255, 255, 255, 0.06);
      position: relative;
    }

    .cap-group-list li:last-child {
      border-bottom: 0;
      padding-bottom: 0;
    }

    /* A chartreuse tick rather than a bullet glyph, so the marker sits on the
       cap height of the first line instead of the baseline. */
    .cap-group-list li::before {
      content: '';
      position: absolute;
      left: 0;
      top: 1.15rem;
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: var(--chartreuse);
    }

    .cap-group-list li:last-child::before {
      top: 1.15rem;
    }

    /* ── Placeholder marker ───────────────────────────────────────────────── */

    /* Dashed chartreuse, exactly like .brand-reel-pending: this site marks
       "not real yet" the same way everywhere, so nobody has to learn a second
       signal. Delete it with the block in page-capabilities.php. */
    .cap-placeholder-note {
      margin: 3rem 0 0;
      padding: 0.85rem 1.25rem;
      border: 1px dashed var(--chartreuse);
      border-radius: 6px;
      color: var(--chartreuse);
      font-size: 0.75rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      line-height: 1.5;
    }

    @media (max-width: 640px) {
      .cap-hero {
        padding: calc(var(--nav-height) + 3rem) 0 2.5rem;
      }
      .cap-group {
        padding: 1.5rem 1.25rem;
      }
    }