/**
 * Principle Cards — matched-pair tinted content cards.
 *
 * Reusable across About Us landing, Vision & Values, Philosophy, Our Credo,
 * and any other About Us sub-page that uses the mint/blush matched-pair
 * pattern for principles-style content.
 *
 * Built on the canonical .card framework (card.css). This file only adds
 * what's pattern-specific: section background, grid layout, tinted variant
 * backgrounds on the inner <article>, the icon chip, the bulleted-list
 * alignment fix. Everything else (shell, shadow, hover lift, transitions,
 * container-query heading scaling, .card__body padding, .card__title typography)
 * inherits from the base .card classes.
 *
 * Tokens only — no raw values. Constraint B honored.
 *
 * @package Vimta
 */

@layer components {

  /* ── Section wrapper (standalone mode — when embedded=false) ── */
  .principle-cards {
    background: var(--white);
  }

  /* ── Grid layout — auto-fit matched pair, scales to any number of cards ── */
  .principle-cards__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    gap: var(--grid-gap);
    align-items: stretch;
  }

  /* Inner <article> must fill the grid-stretched outer .card so the tinted
     background reaches the bottom edge when the sibling card is taller.
     Make the outer .card a flex column so the article stretches reliably —
     block-size: 100% on a grid-stretched parent is inconsistent across engines
     and leaves a white dead-block at the foot of the shorter card. */
  .principle-cards__card {
    display: flex;
  }

  .principle-cards__card > article {
    flex: 1;
  }

  /* Grid gets a top margin when rendered inside a section with a header,
     to separate the cards from the section-header above. When embedded
     (no section wrapper), the caller controls surrounding spacing. */
  .principle-cards .principle-cards__grid {
    margin-block-start: var(--container-gap);
  }


  /* ════════════════════════════════════════════════════════════════════
     VARIANT — MINT (cool primary tint)
     Overrides the canonical --card-bg on the inner <article>. The outer
     .card shell keeps its shadow + hover lift from the framework.
     ════════════════════════════════════════════════════════════════════ */

  .principle-cards__card--mint > article {
    background-color: var(--primary-ultra-light);
    border-color: color-mix(in oklch, var(--primary) 12%, transparent);
  }

  .principle-cards__card--mint .principle-cards__icon {
    background: var(--primary);
    color: var(--white);
  }

  .principle-cards__card--mint .card__title {
    color: var(--primary-dark);
  }


  /* ════════════════════════════════════════════════════════════════════
     VARIANT — BLUSH (warm secondary tint)
     ════════════════════════════════════════════════════════════════════ */

  /* Blush bg mixes --secondary-semi-dark (unchanged, visibly peach) with
     white so this variant still reads as a warm tint next to the mint
     sibling. The v2 --secondary-light is near-white and lost its identity. */
  .principle-cards__card--blush > article {
    background-color: color-mix(in oklch, var(--secondary-semi-dark) 35%, var(--white));
    border-color: color-mix(in oklch, var(--secondary-dark) 30%, transparent);
  }

  .principle-cards__card--blush .principle-cards__icon {
    background: var(--secondary-dark);
    color: var(--white);
  }

  .principle-cards__card--blush .card__title {
    color: var(--secondary-ultra-dark);
  }


  /* ════════════════════════════════════════════════════════════════════
     ICON CHIP
     All sizing/padding/radius/align handled by the icon framework via
     [data-icon-style="boxed"] on the wrapper span. This file only sets
     per-variant background + colour (see .principle-cards__card--mint
     and --blush rules above).
     ════════════════════════════════════════════════════════════════════ */


  /* ════════════════════════════════════════════════════════════════════
     PROSE CONTENT
     Wysiwyg-derived body HTML rendered inside .card__text. Base typography
     (font-size, colour, line-height) comes from .card__text in card.css.
     This block only handles:
       - Paragraph rhythm (first-child margin reset + paragraph stacking)
       - List alignment (custom pseudo-bullets so text aligns cleanly with
         the heading's left edge, wrapped lines flow naturally, no default
         browser list indent pushing text right)
     ════════════════════════════════════════════════════════════════════ */

  .principle-cards__prose > *:first-child {
    margin-block-start: 0;
  }

  .principle-cards__prose p {
    margin: 0;
  }

  .principle-cards__prose p + p {
    margin-block-start: var(--stack-gap);
  }

  .principle-cards__prose ul,
  .principle-cards__prose ol {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--stack-gap);
  }

  .principle-cards__prose li {
    position: relative;
    padding-inline-start: var(--space-m);
    line-height: var(--leading-relaxed);
  }

  .principle-cards__prose li::before {
    content: '';
    position: absolute;
    inset-inline-start: var(--space-3xs);
    inset-block-start: 0.625em;
    inline-size: var(--space-2xs);
    block-size: var(--space-2xs);
    border-radius: var(--radius-full);
    background-color: currentColor;
    opacity: var(--opacity-subdued);
  }

}