/*
 * Librarium Militaris: the versus banner.
 *
 * The two liveries meet on a hard diagonal, with the commanders' names over
 * them. The colours arrive from the model as --faction-a and --faction-b; the
 * veils over them are what keep the names legible whichever pair turns up.
 */

@layer components {
  /* A minimum rather than a height: some factions are two words long and the
     banner has to grow around them instead of clipping them. */
  .vsbanner {
    --vsbanner-height: 8rem;

    position: relative;
    display: flex;
    min-height: var(--vsbanner-height);
    overflow: hidden;
    border-radius: var(--radius);
    background-image: linear-gradient(105deg, var(--faction-a) 50%, var(--faction-b) 50%);

    @media (min-width: 768px) { --vsbanner-height: 12rem; }
  }

  .vsbanner__veil,
  .vsbanner__shade {
    position: absolute;
    inset: 0;
    z-index: 0;
  }

  .vsbanner__veil {
    background-image: linear-gradient(to top, var(--color-veil-strong), var(--color-inset), var(--color-veil-soft));
  }

  .vsbanner__shade {
    background-color: var(--color-inset-soft);
    mix-blend-mode: multiply;
  }

  .vsbanner__side {
    position: relative;
    z-index: 10;
    width: 50%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    padding: var(--space-16);

    @media (min-width: 768px) { padding: var(--space-32); }
  }

  /* Full names wrap to three or four lines on a phone, and the widest of those
     lines used to run under the VS badge. The inner edge keeps clear of it. */
  .vsbanner__side--a {
    padding-right: var(--space-36);

    @media (min-width: 768px) { padding-right: var(--space-48); }
  }

  .vsbanner__side--b {
    align-items: flex-end;
    text-align: right;
    padding-left: var(--space-36);

    @media (min-width: 768px) { padding-left: var(--space-48); }
  }

  /* The people who played the game lead; the army they brought is the caption
     under them. A name is what a reader recognises and what they came here for.

     Full names run far longer than faction names did, so the headline size is a
     step down from the old one and steps down again on narrow screens rather
     than stacking into four lines. */
  .vsbanner__player {
    max-width: 100%;
    overflow-wrap: break-word;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--text-24);
    line-height: var(--leading-30);
    color: var(--color-ink-bright);
    text-transform: uppercase;
    letter-spacing: var(--tracking-sm);
    text-shadow: var(--text-shadow-strong);

    @media (max-width: 479px) {
      font-size: var(--text-20);
      line-height: var(--leading-26);
    }

    @media (min-width: 768px) {
      font-size: var(--text-36);
      line-height: var(--leading-40);
    }
  }

  .vsbanner__faction {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    max-width: 100%;
    margin-top: var(--space-6);
    color: var(--color-ink-muted);
    font-family: var(--font-heading);
    font-size: var(--text-14);
    line-height: var(--leading-20);
    letter-spacing: var(--tracking-xl);
    text-transform: uppercase;
    text-shadow: var(--text-shadow-soft);

    /* The dot always sits on the outside edge, so it reads as that side's colour. */
    .vsbanner__side--b & { flex-direction: row-reverse; }

    @media (max-width: 479px) {
      font-size: var(--text-12);
      line-height: var(--leading-16);
    }

    @media (min-width: 768px) {
      font-size: var(--text-16);
      line-height: var(--leading-24);
    }
  }

  /* Two-word liveries share half a phone with the dot, so the livery wraps onto a
     second line there rather than eliding to "Emperor's Chil...". */
  .vsbanner__name {
    min-width: 0;
    overflow-wrap: break-word;
  }

  .vsbanner__dot {
    --dot-color: transparent;

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

  .vsbanner__badge {
    --vsbanner-badge-size: var(--space-48);

    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--vsbanner-badge-size);
    height: var(--vsbanner-badge-size);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-pill);
    background-color: var(--color-canvas);
    box-shadow: var(--shadow-badge);

    & span {
      font-family: var(--font-imperial);
      font-weight: 700;
      font-style: italic;
      font-size: var(--text-20);
      line-height: var(--leading-28);
      color: var(--color-accent);
    }

    @media (min-width: 768px) {
      --vsbanner-badge-size: var(--space-64);

      & span {
        font-size: var(--text-24);
        line-height: var(--leading-32);
      }
    }
  }
}