/* The heroes roster (/heroes). */

.heroes {
  position: relative;
  isolation: isolate;
  padding-block: var(--space-5);

  /* A faded bazaar haze behind the roster header. */
  &::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 34rem;
    z-index: -1;
    background: url('/images/home/bazaar-street.webp') top center / cover no-repeat;
    -webkit-mask-image: linear-gradient(to bottom, #000, transparent);
    mask-image: linear-gradient(to bottom, #000, transparent);
    opacity: 0.4;
  }

  .head {
    max-width: 42rem;
    margin-inline: auto;
    margin-bottom: var(--space-5);
    text-align: center;
  }

  .lead {
    margin: var(--space-2) 0 0;
    color: var(--color-muted);
    font-size: var(--size-lead);
  }

  .roster {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .hero {
    /* Successive heroes are parted by a faded gold rule and a small diamond. */
    & + .hero {
      position: relative;
      margin-top: var(--space-5);
      padding-top: var(--space-5);
    }

    & + .hero::before {
      content: "";
      position: absolute;
      top: 0;
      left: max(0px, calc(50% - 22rem));
      right: max(0px, calc(50% - 22rem));
      height: 1px;
      background: linear-gradient(
        90deg,
        transparent,
        color-mix(in srgb, var(--color-accent) 50%, transparent) 18%,
        color-mix(in srgb, var(--color-accent) 50%, transparent) 82%,
        transparent
      );
    }

    /* The same lozenge site.css sets .mark in, sitting on the rule rather
       than after a heading -- so it is drawn here instead of reused. */
    & + .hero::after {
      content: "*";
      position: absolute;
      top: 0;
      left: 50%;
      transform: translate(-50%, -50%);
      color: var(--color-accent);
      font-family: var(--font-runes);
      font-size: 1.4rem;
      line-height: 1;
      text-shadow:
        0 0 10px color-mix(in srgb, var(--color-accent) 55%, transparent);
    }

    .row {
      display: flex;
      align-items: center;
      gap: clamp(var(--space-3), 5vw, var(--space-5));
    }

    .art,
    .body {
      flex: 1 1 0;
      min-width: 0;
    }

    .art {
      display: flex;
      justify-content: center;

      & > img {
        width: 100%;
        max-width: 25rem;
        height: auto;
        filter: drop-shadow(0 16px 24px rgba(0, 0, 0, 0.5));
      }

      .spine-stage {
        width: 100%;
        max-width: 26rem;
      }

      .spine-stage .frame {
        aspect-ratio: 450 / 565;
        filter: drop-shadow(0 16px 24px rgba(0, 0, 0, 0.5));
      }
    }

    /* Placeholder card for heroes without a portrait yet. */
    .pending {
      display: grid;
      place-content: center;
      gap: var(--space-2);
      width: 100%;
      max-width: 25rem;
      aspect-ratio: 450 / 565;
      border: 1px dashed color-mix(in srgb, var(--color-accent) 35%, transparent);
      border-radius: var(--radius);
      background:
        radial-gradient(
          ellipse at 50% 40%,
          color-mix(in srgb, var(--legendary) 13%, transparent),
          transparent 72%
        ),
        var(--color-surface);

      /* Off the scale on purpose: one letter used as ornament, not as a
         heading, so it is sized against the plate it sits on. */
      .monogram {
        font-family: var(--font-display);
        font-size: clamp(4rem, 10vw, 7rem);
        line-height: 1;
        text-align: center;
        color: color-mix(in srgb, var(--color-accent) 55%, transparent);
      }

      .note {
        color: var(--color-muted);
        font-size: var(--size-eyebrow);
        letter-spacing: 0.14em;
        text-align: center;
        text-transform: uppercase;
      }
    }

    .name {
      font-size: var(--size-h2);
    }

    .title {
      margin: var(--space-1) 0 0;
      color: var(--color-accent);
      font-size: var(--size-eyebrow);
      font-weight: 600;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      text-wrap: balance;
    }

    .blurb {
      margin-top: var(--space-3);
      max-width: 34ch;
      color: var(--color-muted);
      font-size: var(--size-lead);
      line-height: 1.6;

      p {
        margin: 0;
      }
    }

    /* Alternate rows mirror: art and text swap sides, text faces inward. */
    &:nth-child(even) .row {
      flex-direction: row-reverse;
    }

    &:nth-child(even) .body {
      text-align: right;
    }

    &:nth-child(even) .blurb {
      margin-left: auto;
    }
  }

  @media (max-width: 48rem) {
    .hero .row,
    .hero:nth-child(even) .row {
      flex-direction: column;
    }

    .hero .body,
    .hero:nth-child(even) .body {
      text-align: center;
    }

    .hero .blurb,
    .hero:nth-child(even) .blurb {
      margin-inline: auto;
    }
  }
}