/**
 * Fluid Theme - Card Component
 * @layer components
 *
 * Open by default: no box, padding, shadow or lift. Media in true colour at
 * its natural ratio (or data-aspect), then the body under an ink hairline:
 * eyebrow, serif title, dek, meta. In a .grid the cards share a hang line:
 * image bottoms and hairlines line up across a row whatever each image's
 * ratio, and the bodies hang from it. Hover underlines the title; nothing
 * moves. A card with no media carries the rule on its own top edge, so a
 * child theme that writes .card { border: … } replaces it.
 *
 * Usage:
 *   <article class="card">
 *     <img class="card__media" src="..." alt="..." width="800" height="600">
 *     <div class="card__content">            (.card__body works too)
 *       <p class="eyebrow">Essay</p>
 *       <h3 class="card__title">Title</h3>
 *       <p class="card__description">Dek</p>
 *       <p class="card__meta">12 May 2026</p>
 *     </div>
 *     <footer class="card__footer">Actions</footer>
 *   </article>
 *
 * Boxed cards: data-variant="outlined" (hairline box), "filled" (surface),
 * "elevated" (raised surface; a shadow only when --shadow-style is not 0).
 * Opt-ins: data-treatment="duotone" (hue from --accent; wrap the image in
 * .card__media-wrap), data-layout="horizontal", data-type="profile|stat|
 * feature|testimonial|pricing".
 */

@layer components {
  .card {
    container-name: card;
    position: relative;
    display: flex;
    flex-direction: column;
    min-inline-size: 0;
    color: inherit;
    background-color: var(--_card-bg, transparent);
    border: var(--border-width) solid var(--_card-border, transparent);
    /* Only a boxed card is rounded: an open card paints its top edge only,
       and a radius bent that hairline into an arc ("a smile") over it. */
    border-radius: var(--_card-radius, 0);
    box-shadow: var(--_card-shadow, none);
    overflow: clip;
    overflow-clip-margin: 4px;
  }

  .card[data-container] { container-type: inline-size; }


  /* ========================================
     BOXED VARIANTS
     ======================================== */

  .card:is([data-variant="outlined"], [data-variant="filled"], [data-variant="elevated"]) {
    --_card-pad: var(--space-m);
    --_card-rule: transparent;
    --_card-border: var(--color-border);
    --_card-radius: var(--radius-card);
  }

  .card[data-variant="filled"] { --_card-bg: var(--color-surface); --_card-border: transparent; }

  .card[data-variant="elevated"] {
    --_card-bg: var(--color-surface-raised);
    --_card-shadow: var(--shadow-md);
  }


  /* ========================================
     INTERACTIVE CARDS
     ======================================== */

  .card[data-interactive],
  a.card {
    cursor: pointer;
    text-decoration: none;
  }

  :is(.card[data-interactive], a.card):hover .card__title {
    text-decoration-line: underline;
    text-decoration-color: var(--accent-ink);
    text-decoration-thickness: 0.06em;
    text-underline-offset: 0.22em;
  }

  :is(.card[data-interactive], a.card):focus-visible {
    outline: var(--focus-ring-width) solid var(--color-focus);
    outline-offset: 2px;
  }


  /* ========================================
     STRUCTURE
     ======================================== */

  .card__media {
    inline-size: 100%;
    block-size: auto;
    flex-shrink: 0;
    border-radius: var(--radius-card);
  }

  :is(.card__media, .card__media-wrap) + :is(.card__content, .card__body) {
    margin-block-start: var(--_card-pad, var(--space-s));
    border-block-start: var(--border-width) solid var(--_card-rule, var(--color-border-strong));
  }

  /* An open card with no media: the rule is the card's own top edge. */
  .card:not([data-variant]):not(:has(> :is(.card__media, .card__media-wrap))) {
    border-block-start-color: var(--_card-rule, var(--color-border-strong));
  }

  :is(.card__content, .card__body) {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    padding: var(--_card-pad, 0);
    padding-block-start: var(--_card-pad, var(--space-s));
  }

  /* The hang line: in a .grid, a card with media spans two rows of the
     grid (three with a footer) as a subgrid, the media bottom-aligned in
     the first. Needs subgrid; without it cards keep the flex column. */
  @supports (grid-template-rows: subgrid) {
    .grid > .card:has(> .card__media, > .card__media-wrap):not([data-layout]) {
      display: grid;
      grid-row: span 2;
      grid-template-rows: subgrid;
      row-gap: 0;
    }

    .grid > .card:has(> .card__media, > .card__media-wrap):has(> .card__footer):not([data-layout]) { grid-row: span 3; }

    .grid > .card > :is(.card__media, .card__media-wrap) { align-self: end; }
  }

  .card :is(.eyebrow, p) { margin: 0; }

  .card__title {
    font-family: var(--font-heading);
    font-size: var(--step-1);
    font-weight: calc(var(--weight-medium) + var(--_dark-weight));
    line-height: var(--leading-heading);
    letter-spacing: var(--tracking-normal);
    text-wrap: balance;
    margin: 0;
  }

  /* A title link is not a link in running text: no underline at rest,
     the accent underline on hover and focus (spec §9). */
  .card__title a { text-decoration-color: transparent; }
  .card__title a:is(:hover, :focus-visible) { text-decoration-color: var(--accent-ink); }


  .card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    font-size: var(--step--1);
    color: var(--color-text-muted);
    font-variant-numeric: lining-nums proportional-nums;   /* tabular widens the comma */
  }

  .card__footer {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    padding-block: var(--space-s);
    padding-inline: var(--_card-pad, 0);
    border-block-start: var(--border-width) solid var(--color-border);
  }

  .card__footer[data-align="end"] { justify-content: flex-end; }
  .card__footer[data-align="between"] { justify-content: space-between; }

  .card[data-size="sm"] .card__title { font-size: var(--step-0); }
  .card[data-size="lg"] .card__title { font-size: var(--step-2); }

  @container card (min-width: 30rem) {
    .card[data-layout="horizontal"] { flex-direction: row; gap: var(--space-m); }
    .card[data-layout="horizontal"] .card__media { inline-size: 40%; max-inline-size: 16rem; }
    .card[data-layout="horizontal"] .card__media + :is(.card__content, .card__body) { margin-block-start: 0; }
  }


  /* ========================================
     DUOTONE (opt-in): the hue comes from --accent
     ======================================== */

  .card__media-wrap {
    position: relative;
    overflow: hidden;
  }

  .card[data-treatment="duotone"] .card__media { filter: grayscale(100%) contrast(1.1); }

  .card[data-treatment="duotone"] .card__media-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      135deg,
      var(--duotone-dark, oklch(from var(--accent) 0.3 c h)) 0%,
      var(--duotone-light, oklch(from var(--accent) 0.8 calc(c * 0.5) h)) 100%
    );
    mix-blend-mode: multiply;
    opacity: 0.85;
    pointer-events: none;
  }


  /* ========================================
     SPECIAL CARD TYPES
     ======================================== */

  .card[data-type="profile"] .card__media {
    inline-size: 6rem;
    block-size: 6rem;
    border-radius: var(--radius-full);
  }

  :is(.card[data-type="stat"] .card__value, .card[data-type="pricing"] .card__price) {
    font-family: var(--font-heading);
    font-size: var(--step-4);
    font-weight: calc(var(--weight-display) + var(--_dark-weight));
    line-height: 1;
    font-variant-numeric: lining-nums tabular-nums;
  }

  .card[data-type="feature"] .card__icon {
    inline-size: 2.5rem;
    block-size: 2.5rem;
    margin-block-end: var(--space-s);
    color: var(--accent-ink);
  }

  .card[data-type="testimonial"] .card__rating {
    display: flex;
    gap: 0.125rem;
    color: var(--color-rating);
  }

  .card[data-type="testimonial"] .card__quote {
    font-family: var(--font-heading);
    font-size: var(--step-1);
    font-style: italic;
    line-height: 1.4;
  }

  .card[data-type="testimonial"] .card__attribution {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--step--1);
  }

  .card[data-type="testimonial"] .card__author { font-weight: 600; font-style: normal; }
  .card[data-type="testimonial"] .card__role { color: var(--color-text-muted); }

  .card[data-type="pricing"] { overflow: visible; }

  .card[data-type="pricing"] .card__price-period {
    font-family: var(--font-body);
    font-size: var(--step--1);
    color: var(--color-text-muted);
  }

  .card[data-type="pricing"][data-featured] { --_card-border: var(--color-border-strong); border-width: var(--border-width-thick); }

  .card[data-type="pricing"][data-featured] > .badge {
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    margin-inline: auto;
    inline-size: fit-content;
    translate: 0 -50%;
  }

  .card[data-type="pricing"] .card__features {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .card[data-type="pricing"] .card__features li {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding-block: var(--space-2);
    margin: 0;
    border-block-end: var(--border-width) solid var(--color-border);
  }

  .card[data-type="pricing"] .card__features .check {
    color: var(--color-success);
    flex-shrink: 0;
  }


  /* ========================================
     CARD GROUPS
     ======================================== */

  .card-group {
    display: grid;
    gap: var(--space-l) var(--space-m);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--card-min-width, 18rem)), 1fr));
  }

  .card-group[data-equal-height] > .card { block-size: 100%; }
}