/* =============================================================================
   Cobranzo brand · cards
   ─────────────────────────────────────────────────────────────────────────────
   `.cob-card` and variants — opt-in via the `cob-` prefix so they don't replace
   the legacy `.card` in cards.css.

   Each card declares itself a container (`container-type: inline-size`) so its
   internals adapt to the card's own width, not the viewport. A card placed in
   a narrow grid column will collapse to compact mode even on a wide screen,
   and a card in a hero slot will breathe even on mobile if the slot is wide.
   ============================================================================= */

@layer components {
  .cob-card {
    background: var(--cob-card-background, var(--cob-bg-3));
    border: 1px solid var(--cob-card-border-color, var(--cob-border));
    border-radius: var(--cob-card-border-radius, var(--cob-r-lg));
    color: var(--cob-card-color, var(--cob-fg-1));
    container-name: cob-card;
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    gap: var(--cob-card-gap, var(--cob-s-2));
    overflow: clip;                                 /* keeps edge-to-edge media inside the radius */
    padding: var(--cob-card-padding, clamp(var(--cob-s-4), 4cqi, var(--cob-s-5)));

    /* Card with media as first child: let it bleed to the edges */
    &:has(> img:first-child),
    &:has(> picture:first-child),
    &:has(> .cob-card__media:first-child) {
      padding-block-start: 0;
      padding-inline: 0;

      > :where(:not(img, picture, .cob-card__media)) {
        padding-inline: var(--cob-card-padding, clamp(var(--cob-s-4), 4cqi, var(--cob-s-5)));
      }
    }

    /* KPI card: when there's a .cob-num inside, lean into the data-card vibe */
    &:has(.cob-num) {
      --cob-card-gap: var(--cob-s-3);
    }
  }

  .cob-card--cream { --cob-card-background: var(--cob-cream); }

  .cob-card--dark {
    --cob-card-background:   var(--cob-navy);
    --cob-card-border-color: transparent;
    --cob-card-color:        var(--cob-fg-on-dark);

    :where(.cob-h1, .cob-h2, .cob-h3, .cob-h4, .cob-display) {
      color: var(--cob-fg-on-dark);
    }

    :where(.cob-body, .cob-caption) {
      color: var(--cob-fg-on-dark-2);
    }
  }

  .cob-card--lift-1 { box-shadow: var(--cob-shadow-1); }
  .cob-card--lift-2 { box-shadow: var(--cob-shadow-2); }
  .cob-card--lift-3 { box-shadow: var(--cob-shadow-3); }
  .cob-card--lift-4 { box-shadow: var(--cob-shadow-4); }

  .cob-card--interactive {
    cursor: pointer;
    transition: box-shadow var(--cob-dur-base) var(--cob-ease-out),
                transform  var(--cob-dur-base) var(--cob-ease-out);

    @media (any-hover: hover) {
      &:hover { box-shadow: var(--cob-shadow-2); }
    }
  }

  /* KPI numeral inside a card. `cqi` (1% of the container's inline size) lets
     it scale with the card width. Fallback bounds keep it readable. */
  .cob-card .cob-num {
    color: inherit;
    font-family: var(--cob-font-display);
    font-size: clamp(28px, 8cqi, 48px);
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    letter-spacing: -0.02em;
  }

  /* Container query — when the card itself has room, breathe */
  @container cob-card (width >= 28rem) {
    .cob-card {
      --cob-card-gap:     var(--cob-s-3);
      --cob-card-padding: var(--cob-s-6);
    }
  }

  @container cob-card (width >= 40rem) {
    .cob-card {
      --cob-card-padding: var(--cob-s-7);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .cob-card--interactive { transition: none; }
  }
}