/*
 * Librarium Militaris: the battle report card.
 *
 * The grid of them, the card itself, and the two pieces that only ever appear
 * inside one: the facet tag and the masked result.
 */

@layer components {
  .cardgrid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-24);

    @media (min-width: 768px) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    @media (min-width: 1024px) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    @media (min-width: 1280px) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  }

  /* ----------------------------------------------------------------- card -- */

  .card {
    --card-border: var(--color-border);
    --card-shadow: none;

    display: flex;
    flex-direction: column;
    background-color: var(--color-surface);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: border-color var(--transition-medium), box-shadow var(--transition-medium);
    box-shadow: var(--card-shadow);

    &:hover {
      --card-border: var(--color-accent-edge);
      --card-shadow: var(--shadow-card-hover);
    }
  }

  .card__thumb {
    display: block;
    position: relative;
    flex: none;
    aspect-ratio: 16 / 9;
    background-color: var(--color-void);
    cursor: pointer;
    overflow: hidden;

    & img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0.8;
      transition: opacity var(--transition-slow), transform var(--transition-slow);
    }

    .card:hover & img {
      opacity: 1;
      transform: scale(1.05);
    }
  }

  .card__play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-inset-soft);
    opacity: 0;
    transition: opacity var(--transition-fast);
  }

  .card:hover .card__play,
  .card__thumb:focus-visible .card__play {
    opacity: 1;
  }

  /* Sized rather than padded: the icon's optical offset would otherwise widen the
     box on one axis only and turn the circle into an ellipse. */
  .card__play span {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: var(--space-48);
    height: var(--space-48);
    background-color: var(--color-accent-solid);
    color: var(--color-on-accent);
    border-radius: var(--radius-pill);
    transform: scale(0.9);
    transition: transform var(--transition-fast);
  }

  .card:hover .card__play span { transform: scale(1); }

  /* No optical nudge: the icon path already carries one. Its vertices are
     (8,5) (8,19) (19,12), putting the centroid at x=11.67 in a 24-wide viewBox,
     so flex centring alone lands the triangle's visual mass on the circle's
     centre. Shifting it further is what made it look right-heavy. */
  .card__play svg {
    width: var(--space-24);
    height: var(--space-24);
  }

  .card__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    padding: var(--space-16);
  }

  /* -------------------------------------------------------------- matchup -- */

  .card__matchup {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    margin-bottom: var(--space-8);
    font-family: var(--font-heading);
    font-size: var(--text-14);
    line-height: var(--leading-20);
    letter-spacing: var(--tracking-2xs);
    text-transform: uppercase;
  }

  /* The army's own colour, handed in from the model as the dot's one variable. */
  .card__dot {
    --dot-color: transparent;

    width: var(--space-8);
    height: var(--space-8);
    flex: none;
    border-radius: var(--radius);
    background-color: var(--dot-color);
    box-shadow: 0 0 5px currentColor;
  }

  .card__faction {
    min-width: 0;
    color: var(--color-ink-strong);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color var(--transition-fast);

    &:hover { color: var(--color-ink-bright); }
  }

  .card__vs {
    flex: none;
    margin: 0 var(--space-4);
    color: var(--color-ink-faint);
    font-size: var(--text-12);
    line-height: var(--leading-16);
    font-style: italic;
    transition: color var(--transition-fast);

    &:hover { color: var(--color-accent); }
  }

  .card__faction:focus-visible,
  .card__vs:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
  }

  .card__title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: var(--space-12);
    color: var(--color-ink-bright);
    font-size: var(--text-16);
    font-weight: 500;
    line-height: var(--leading-snug);
    text-align: left;
    cursor: pointer;
    transition: color var(--transition-fast);

    &:hover { color: var(--color-accent); }

    &:focus-visible {
      outline: var(--focus-ring);
      outline-offset: var(--focus-ring-offset);
    }
  }

  /* ----------------------------------------------------------------- tags -- */

  .card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-6);
    /* Takes the slack, so the result and the meta row sit at the foot of every
       card in a row whatever the title above them did. */
    margin-bottom: auto;
  }

  .tag {
    display: inline-flex;
    align-items: center;
    gap: var(--space-4);
    max-width: 100%;
    padding: var(--space-2) var(--space-8);
    background-color: var(--color-canvas);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    color: var(--color-ink-soft);
    font-size: var(--text-12);
    line-height: var(--leading-16);
    transition: color var(--transition-fast), border-color var(--transition-fast);

    &:hover {
      color: var(--color-accent);
      border-color: var(--color-accent);
    }

    &:focus-visible {
      outline: var(--focus-ring);
      outline-offset: var(--focus-ring-offset);
    }

    & svg {
      width: var(--space-12);
      height: var(--space-12);
      flex: none;
      opacity: 0.7;
    }
  }

  .tag__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* --------------------------------------------------------------- result -- */

  .card__result {
    margin-top: var(--space-12);
    padding-top: var(--space-12);
    border-top: 1px solid var(--color-border-soft);
  }

  /* Both outcomes are in the markup; .archive-root--spoilers picks which one shows. */
  .card__result-open {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-8);
    font-size: var(--text-14);
    line-height: var(--leading-20);
  }

  /* Nothing to spoil when the outcome was never recorded, so it stays visible. */
  .archive-root--spoilers .card__result-open:not(.card__result-open--unknown) { display: none; }

  .card__result-placeholder {
    color: var(--color-ink-faint);
    font-family: var(--font-heading);
    letter-spacing: var(--tracking-xl);
    cursor: help;
  }

  .card__result-label {
    color: var(--color-ink-soft);
    flex: none;
  }

  /* The value names the commander as well as the army, so it is roughly twice the
     string it used to be. min-width lets it shrink inside the flex row instead of
     pushing the label out, and a long name wraps rather than leaving the card. */
  .card__result-value {
    color: var(--color-accent);
    font-family: var(--font-heading);
    font-weight: 700;
    text-transform: uppercase;
    text-align: right;
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .card__score {
    margin-left: var(--space-4);
    color: var(--color-ink-dim);
    font-family: var(--font-sans);
    font-size: var(--text-12);
    font-weight: 400;
    line-height: var(--leading-16);
    text-transform: none;
  }

  /* Masked until clicked, so browsing the index never spoils the outcome. */
  .spoiler {
    --spoiler-blur: 4px;

    display: none;
    align-items: center;
    justify-content: center;
    gap: var(--space-8);
    width: 100%;
    padding: var(--space-6) var(--space-8);
    background-color: var(--color-surface-sunken);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    color: var(--color-ink-dim);
    font-family: var(--font-heading);
    font-size: var(--text-12);
    line-height: var(--leading-16);
    letter-spacing: var(--tracking-sm);
    text-align: center;
    cursor: pointer;
    user-select: none;
    filter: blur(var(--spoiler-blur));
    transition: filter var(--transition-medium), color var(--transition-fast);

    &:hover {
      --spoiler-blur: 2px;

      color: var(--color-ink-muted);
    }

    & svg {
      width: var(--space-16);
      height: var(--space-16);
      flex: none;
    }

    /* Declared after the hover state, so a revealed result stays revealed while
       the pointer is on it. */
    &.is-revealed {
      --spoiler-blur: 0;

      cursor: default;
    }
  }

  .archive-root--spoilers .spoiler { display: flex; }

  .spoiler__prompt {
    display: inline-flex;
    align-items: center;
    gap: var(--space-8);
  }

  .spoiler__answer { display: none; }

  .spoiler.is-revealed .spoiler__prompt { display: none; }
  .spoiler.is-revealed .spoiler__answer { display: inline; }

  .spoiler__winner {
    color: var(--color-accent);
    font-weight: 700;
  }

  .spoiler__score { color: var(--color-ink-soft); }

  /* ----------------------------------------------------------------- meta -- */

  .card__meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-8);
    margin-top: var(--space-12);
    padding-top: var(--space-12);
    border-top: 1px solid var(--color-border-soft);
    color: var(--color-ink-dim);
    font-size: var(--text-12);
    line-height: var(--leading-16);
  }

  .card__channel {
    max-width: 50%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: inherit;
    transition: color var(--transition-fast);

    &:hover { color: var(--color-ink-bright); }
  }

  .card__stat {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-shrink: 0;

    & svg {
      width: var(--space-12);
      height: var(--space-12);
      flex: none;
    }
  }
}