/* The video card and its reel (METIS-pub#499) — a still that plays in place.
 *
 * Graduated from the front page's camp card (`.fp-video`, METIS-pub#390) when
 * a person's conversations needed the same thing on the public profile and on
 * the CRM person page. Markup: `includes/video_card.html`; behaviour:
 * `crm/js/video_card.js`. Linked from `shell/_tokens_css.html`, so every
 * surface has it.
 *
 * One component, two shapes — never two components:
 *   --portrait  9:16, the camps' phone-shot videos
 *   --wide      16:9, conversations' landscape recordings
 * and one treatment on either shape:
 *   --bare      the still alone, no shade and no caption (a camp's own page,
 *               METIS-pub#490, names the camp beside it)
 * and `.video-card-slot`, for a card with a second link under it.
 *
 * The card reads the ground it sits on (`--color-bg`, `--color-text`), so it is
 * dark on the front page's forest band and light on the profile's canvas
 * without a modifier. `.lift` (public site only) supplies its hover rise; the
 * CRM has no lift and the card simply does not rise there.
 *
 * The camp logo's hexagon is the brand's, drawn by `view/css/front.css`, the
 * only page that passes a logo.
 */
@layer components {
  /* ── The rail ─────────────────────────────────────────────────────── */
  .video-reel {
    display: flex;
    /* Top-aligned: a card with an event link under it is taller, and a
       stretched plain card beside it would drop its caption and play mark. */
    align-items: start;
    gap: var(--space-3);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    padding-bottom: var(--space-3);
    scrollbar-width: thin;
    scrollbar-color: color-mix(in oklab, var(--color-text) 30%, transparent) transparent;
    /* A flex child of a grid or flex column would otherwise grow to its
       content, and a reel of twelve cards would widen the page. */
    min-width: 0;
    max-width: 100%;
  }

  /* ── The card ─────────────────────────────────────────────────────── */
  .video-card {
    position: relative;
    flex: 0 0 auto;
    border-radius: var(--radius-lg);
    overflow: hidden;
    isolation: isolate;
    scroll-snap-align: start;
    background: var(--color-bg);
    color: var(--color-text);
    text-decoration: none;
  }

  .video-card--portrait,
  .video-card-slot--portrait { flex-basis: 12.25rem; }

  .video-card--wide,
  .video-card-slot--wide { flex-basis: min(22rem, 85vw); }

  .video-card--portrait { aspect-ratio: 9 / 16; }

  .video-card--wide { aspect-ratio: 16 / 9; }

  /* A card with a second link under it (`link_url`, METIS-pub#501). The card
     is itself a link, so the second one cannot go inside it: the slot takes
     the card's place in the reel — its basis from the same modifier — and the
     card fills the slot's width as a grid item, where its own flex-basis no
     longer applies. */
  .video-card-slot {
    /* Not the `flex` shorthand: it would reset the basis the --portrait and
       --wide slot rules above set, and the slot would size to its caption. */
    flex-grow: 0;
    flex-shrink: 0;
    display: grid;
    align-content: start;
    gap: var(--space-1);
    min-width: 0;
    scroll-snap-align: start;
  }

  .video-card-slot__link {
    justify-self: start;
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    text-decoration: underline;
  }

  .video-card-slot__link:hover { color: var(--color-text); }

  .video-card__media {
    position: absolute;
    inset: 0;
  }

  .video-card__media img,
  .video-card__media iframe {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 0;
  }

  .video-card__shade {
    position: absolute;
    inset: auto 0 0;
    height: 58%;
    background: linear-gradient(
      to top,
      color-mix(in oklab, var(--color-bg) 95%, transparent) 0%,
      color-mix(in oklab, var(--color-bg) 60%, transparent) 45%,
      transparent 100%
    );
  }

  .video-card__play {
    position: absolute;
    left: 50%;
    top: 42%;
    width: var(--space-12);
    height: var(--space-12);
    transform: translate(-50%, -50%);
    display: grid;
    place-items: center;
    border-radius: var(--radius-full);
    background: color-mix(in oklab, var(--color-text) 88%, transparent);
    color: var(--color-bg);
    transition: background-color var(--dur-base) var(--ease-out);
  }

  .video-card__play svg {
    width: var(--space-4);
    height: var(--space-4);
    margin-left: calc(var(--space-1) * 0.75);
  }

  .video-card:hover .video-card__play { background: var(--color-text); }

  .video-card__foot {
    position: absolute;
    inset: auto var(--space-3) var(--space-3);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }

  .video-card__name {
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: var(--text-lg);
    line-height: 1.2;
    /* A camp name can be a paragraph; three lines is what a tall card holds. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* A wide card is short: two lines of title leave the picture visible. */
  .video-card--wide .video-card__name { -webkit-line-clamp: 2; }

  .video-card__meta {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted);
  }

  /* Playing: the embed fills the card; the caption and the play mark go. */
  .video-card[data-playing="1"] :is(.video-card__shade, .video-card__play, .video-card__foot) {
    display: none;
  }

  /* Wide: the caption sits under the picture, not over it. A conversation's
     YouTube still carries its own printed title, so a caption laid over it
     reads as two titles on top of each other; and on a light page the shade
     fades into the canvas rather than darkening the picture. The portrait camp
     card keeps its overlay — its stills are footage, on the front page's dark
     band. */
  .video-card--wide {
    aspect-ratio: auto;
    display: grid;
    overflow: visible;
    border-radius: 0;
    background: transparent;
  }

  .video-card--wide > :is(.video-card__media, .video-card__play) { grid-area: 1 / 1; }

  .video-card--wide .video-card__media {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-lg);
    overflow: hidden;
  }

  .video-card--wide .video-card__shade { display: none; }

  .video-card--wide .video-card__play {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    align-self: center;
    justify-self: center;
  }

  .video-card--wide .video-card__foot {
    position: static;
    grid-area: 2 / 1;
    gap: var(--space-1);
    padding-top: var(--space-3);
  }

  /* Playing, a wide card keeps its caption: it is under the video, not on it. */
  .video-card--wide[data-playing="1"] .video-card__foot { display: flex; }

  /* Bare: the still with nothing on it. The caption stays in the markup,
     hidden, because the click-to-play script names the iframe from it; the
     link's `aria-label` names the card. `.video-card.video-card--bare` so it
     also beats the wide card's playing rule above, which shows the caption. */
  .video-card.video-card--bare :is(.video-card__shade, .video-card__foot) { display: none; }

  /* The play mark sits in the middle of a bare card: there is no caption
     below it to leave room for. */
  .video-card--bare:not(.video-card--wide) .video-card__play { top: 50%; }

  /* The phone breakpoint the front page had this rule under (front.css). */
  @media (max-width: 48rem) {
    .video-card--portrait,
    .video-card-slot--portrait { flex-basis: 10.5rem; }
  }
}