/* =====================================================================
   OSE · Card (base) · styles/components/card.css
   ---------------------------------------------------------------------
   A hairline box with the 14px brand radius: no fill, no shadow. Use a
   card ONLY where the whole card is one link (a programme, a blog post);
   static content is set as type on rules instead (feature-list, steps).
   course-card, blog-card and teacher-card add their own file on top of
   this one, so load card.css first. Component tokens only: --card-*.

   Markup
     <article class="card card--interactive">
       <div class="card__media">                    optional, FIRST child
         <img src="…" alt="…" width="…" height="…" loading="lazy">
       </div>
       <p class="card__meta">…</p>                  mono data label
       <h3 class="card__title"><a class="card__link" href="…">…</a></h3>
       <p>…</p>
       <div class="card__footer">…</div>            optional, pinned to the bottom
     </article>

   Static card: drop .card--interactive and the link (title is plain text).
   Kept for the rare boxed note; prefer rules for static content.
   Interactive card: the whole card is ONE link. The title link stretches
   over the card with ::after, so there is a single tab stop and the link
   name is the title. Keep other focusable elements out of an interactive
   card. Don't give a wrapper between the card and the title a position.

   States (interactive)
     hover      the hairline darkens a little (--card-border-hover). Nothing
                moves, no shadow, no underline.
     focus      ring drawn around the whole card by the link's ::after
                (transparent outline there too, for forced-colors mode)
     active     the hairline darkens fully (--card-border-active)
     disabled   <a class="card__link" aria-disabled="true"> without href:
                dimmed, not-allowed cursor
   Motion: colour only (the transform property stays free for scroll
   scenes). No JS.
   ===================================================================== */

@layer components {
  .card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--card-gap);
    min-inline-size: 0;
    padding: var(--card-padding);
    border: var(--card-border-width) solid var(--card-border);
    border-radius: var(--card-radius);
    background-color: var(--card-bg);
    box-shadow: var(--card-shadow);
    color: var(--card-text);
  }

  /* Full-bleed media: cancels the card padding, keeps the card's rounded top. */
  .card__media {
    position: relative;
    flex: none;
    overflow: hidden;
    aspect-ratio: var(--card-media-ratio);
    margin-block-start: calc(var(--card-padding) * -1);
    margin-inline: calc(var(--card-padding) * -1);
    margin-block-end: calc(var(--card-padding) - var(--card-gap));
    border-start-start-radius: calc(var(--card-radius) - var(--card-border-width));
    border-start-end-radius: calc(var(--card-radius) - var(--card-border-width));
    background-color: var(--card-media-bg);
  }

  .card__media > img {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  .card__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--card-gap);
  }

  .card__meta {
    font: var(--card-meta-font);
    letter-spacing: var(--card-meta-tracking);
    color: var(--card-text-muted);
    font-variant-numeric: tabular-nums;
  }

  .card__title {
    font: var(--card-title-font);
    letter-spacing: var(--card-title-tracking);
    color: inherit;
  }

  .card__link {
    color: inherit;
    text-decoration-line: none;
  }

  /* The stretched hit area: covers the whole card, border included. */
  .card__link::after {
    content: "";
    position: absolute;
    inset: calc(var(--card-border-width) * -1);
    border-radius: var(--card-radius);
  }

  .card__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--card-gap);
    margin-block-start: auto;
    padding-block-start: var(--card-gap);
    border-block-start: var(--card-border-width) solid var(--card-border);
  }

  /* ------------------------------------------------------ interactive */
  .card--interactive {
    transition: border-color var(--card-duration) var(--card-ease);
  }

  @media (hover: hover) {
    .card--interactive:hover {
      border-color: var(--card-border-hover);
    }
  }

  .card--interactive:active {
    border-color: var(--card-border-active);
  }

  /* Focus: the ring moves from the title link to the card outline. */
  .card__link:focus-visible {
    outline: none;
    box-shadow: none;
  }

  .card__link:focus-visible::after {
    outline: var(--focus-ring-width) solid transparent;
    outline-offset: var(--focus-ring-offset);
    box-shadow: var(--card-focus-ring);
  }

  /* Disabled: a link without href, marked aria-disabled="true". */
  .card--interactive:has(.card__link[aria-disabled="true"]) {
    border-color: var(--card-border);
    opacity: var(--card-opacity-disabled);
    cursor: not-allowed;
  }
}