/* mp-card — photo (4:5, words over the image), stacked (3:2 image above words),
   plain (words only, with a scheme). Contract: COMPONENTS.md §7.18. */
@layer components {
  .mp-card {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    gap: var(--mp-space-3xs);
    border-radius: var(--mp-radius-lg);
    overflow: hidden;
    background-color: var(--mp-color-surface);
    text-decoration: none;
  }
  .mp-card__title { font-size: var(--mp-fs-display-xs); }
  .mp-card__text {
    color: var(--mp-color-text-2);
    font-size: var(--mp-fs-sm);
    line-height: var(--mp-lh-snug);
  }
  .mp-card__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--mp-space-xs);
    margin-block-start: auto;
    padding-block-start: var(--mp-space-xs);
    font: var(--mp-weight-ui) var(--mp-fs-xs) / var(--mp-lh-tight) var(--mp-font-ui);
  }
  .mp-card__arrow {
    flex: none;
    margin-inline-start: auto; /* end of the row with or without meta words */
    inline-size: var(--mp-h-btn-sm);
    block-size: var(--mp-h-btn-sm);
    padding: var(--mp-space-2xs);
    border-radius: var(--mp-radius-round);
    background-color: var(--mp-color-inverse);
    color: var(--mp-color-on-inverse);
    transition: translate var(--mp-dur-fast) var(--mp-ease-out);
  }
  .mp-card[href]:hover .mp-card__arrow { translate: var(--mp-space-3xs) 0; }

  /* Photo */
  .mp-card--photo {
    aspect-ratio: var(--mp-ratio-card);
    justify-content: flex-end;
    padding: var(--mp-space-card);
  }
  .mp-card--photo .mp-card__img {
    position: absolute;
    inset: 0;
    z-index: -1;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    object-position: var(--mp-focus, 50% 50%);
    transition: scale var(--mp-dur-reveal) var(--mp-ease-out);
  }
  .mp-card--photo::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: var(--mp-scrim-bottom);
  }
  .mp-card--photo[href]:hover .mp-card__img { scale: 1.04; }
  .mp-card--photo .mp-card__title { font-size: var(--mp-fs-display-s); }

  /* Stacked */
  .mp-card--stacked {
    padding-block-end: var(--mp-space-card);
    box-shadow: inset 0 0 0 var(--mp-border) var(--mp-color-line);
  }
  .mp-card--stacked .mp-card__img {
    inline-size: 100%;
    aspect-ratio: var(--mp-ratio-photo);
    object-fit: cover;
    object-position: var(--mp-focus, 50% 50%);
    margin-block-end: var(--mp-space-xs);
  }
  .mp-card--stacked .mp-card__title,
  .mp-card--stacked .mp-card__text,
  .mp-card--stacked .mp-card__meta { margin-inline: var(--mp-space-card); }
  .mp-card--stacked[href]:hover { box-shadow: inset 0 0 0 var(--mp-border) var(--mp-color-line-hover); }

  /* Plain: words on a scheme panel; a soft wash on hover. */
  .mp-card--plain {
    justify-content: space-between;
    gap: var(--mp-space-2xs);
    min-block-size: calc(var(--mp-space-3xl) * 1.5);
    padding: var(--mp-space-m);
  }
  .mp-card--plain::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-color: var(--mp-color-accent-soft);
    opacity: 0;
    transition: opacity var(--mp-dur-fast) var(--mp-ease-out);
  }
  .mp-card--plain[href]:hover::before { opacity: 1; }
  .mp-card--plain .mp-card__arrow { background-color: transparent; color: inherit; padding: 0; inline-size: var(--mp-icon-s); block-size: var(--mp-icon-s); }
  /* Lanes: words on the raised panel (ink-raised on an ink page), the eyebrow green, the link
     words and their arrow at the foot. */
  .mp-card--lanes { gap: var(--mp-space-xs); padding: var(--mp-space-panel); background-color: var(--mp-color-surface-2); }
  .mp-card--lanes .mp-card__title { font-size: var(--mp-fs-display-xs); }
  .mp-card--lanes .mp-card__text { font-size: var(--mp-fs-base); }
  .mp-card__more { display: flex; align-items: center; gap: var(--mp-space-2xs); margin-block-start: auto; padding-block-start: var(--mp-space-xs); color: var(--mp-color-accent-text); font-weight: var(--mp-weight-ui); }
  .mp-card__price { margin-inline-end: auto; color: var(--mp-color-text); font: var(--mp-weight-display) var(--mp-fs-display-2xs) / 1 var(--mp-font-display); letter-spacing: var(--mp-track-display); }
  .mp-card--lanes { min-block-size: calc(var(--mp-space-3xl) * 2.1); }
  .mp-card__more .mp-card__arrow { inline-size: var(--mp-icon-s); block-size: var(--mp-icon-s); margin-inline-start: 0; padding: 0; background-color: transparent; color: inherit; }
  .mp-card--lanes[href]:hover .mp-card__title { text-decoration: underline; text-decoration-thickness: var(--mp-border); text-underline-offset: .12em; }
  .mp-card--outline { background-color: transparent; box-shadow: inset 0 0 0 var(--mp-border) var(--mp-color-line); }
  .mp-band .mp-card.mp-card--outline:not([class*="mp-scheme-"]) { background-color: transparent; } /* not the band's raised card */
  .mp-card__eyebrow { margin-block-end: calc(-1 * var(--mp-space-3xs)); }
  .mp-card--stacked .mp-card__eyebrow { margin-inline: var(--mp-space-card); }
  .mp-card__link { margin-inline-start: auto; color: var(--mp-color-accent-text); }
  .mp-card__link + .mp-card__arrow { margin-inline-start: 0; }
  /* Coaches on a phone: wider rail cards, so a long bio stays a few lines. */
  @media (width < 48rem) { .mp-rail.mp-rail--wide > * { flex-basis: 78%; } }
  /* A coach with no photo: initials in an ink circle, green. */
  .mp-card__monogram { display: grid; place-items: center; inline-size: calc(var(--mp-tap) * 1.3); aspect-ratio: 1; margin: var(--mp-space-card) var(--mp-space-card) var(--mp-space-xs); border-radius: var(--mp-radius-round); font: var(--mp-weight-display) var(--mp-fs-display-2xs) / 1 var(--mp-font-display); letter-spacing: var(--mp-track-display); }
  .mp-card__initials { color: var(--mp-color-accent-text); } /* green on the circle's ink, on any page */
}