/* The community + fan-kit page (/community). */

.community {
  /* --- join us ---
     The balloon stands on the section's base the way the heroes spread does
     on /game: the row ends where the fan kit's rule begins, so there is no
     floor left under the art to float above. Only the art meets that base --
     the text keeps its own centre, and its bottom padding is what holds the
     socials off the rule, here and in the stacked layout below where the text
     is what ends the section. */
  .join {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: clamp(var(--space-3), 5vw, var(--space-5));
    padding-block: var(--space-5) 0;

    .text {
      align-self: center;
      padding-bottom: var(--space-4);
    }

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

    .lead {
      max-width: 48ch;
      margin: var(--space-3) 0 0;
      color: var(--color-muted);
      font-size: var(--size-lead);
    }

    /* 28rem is 448px, just under the artwork's own 509px, so it reads as big
       as it can without being upscaled past what we have. */
    .art {
      width: min(28rem, 38vw);
      height: auto;
      filter: drop-shadow(0 16px 26px rgba(0, 0, 0, 0.45));
    }

    /* Icon-only social links — no chrome, just the recognisable marks. */
    .socials {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-4);
      margin: var(--space-4) 0 0;
      padding: 0;
      list-style: none;
    }

    .social {
      display: inline-flex;
      color: var(--color-muted);
      transition:
        color var(--transition),
        transform var(--transition);

      svg {
        width: 30px;
        height: 30px;
        fill: currentColor;
      }

      &:hover {
        color: var(--color-accent);
        transform: translateY(-3px);
      }
    }
  }

  /* --- fan kit --- */
  .fankit {
    padding-block: var(--space-4) var(--space-5);
    border-top: 0.5px solid var(--color-rule);

    .head {
      margin-bottom: var(--space-5);
      text-align: center;
    }

    .title {
      color: var(--color-accent);
      font-size: var(--size-h2);
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    .mark {
      margin-block: var(--space-2) 0;
    }

    .lead {
      max-width: 52ch;
      margin: var(--space-3) auto 0;
      color: var(--color-muted);
    }
  }

  /* each downloadable category */
  .cat {
    margin-top: var(--space-5);

    .title {
      margin: 0 0 var(--space-3);
      color: var(--parchment-300);
      font-size: var(--size-h3);
    }
  }

  /* the grid sizes its tiles per category */
  .gallery {
    display: grid;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;

    &.wallpapers {
      grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
    }

    &.mobile-wallpapers {
      grid-template-columns: repeat(auto-fill, minmax(min(100%, 10rem), 1fr));
    }

    &.avatars {
      grid-template-columns: repeat(auto-fill, minmax(min(100%, 8rem), 1fr));
    }

    &.twitter-banners {
      grid-template-columns: repeat(auto-fill, minmax(min(100%, 26rem), 1fr));
    }
  }

  .tile {
    overflow: hidden;
    border: 0.5px solid var(--color-rule);
    border-radius: var(--radius);
    background: var(--color-surface);
    transition:
      border-color var(--transition),
      transform var(--transition);

    /* The same pop the press thumbnails give on hover. */
    &:hover {
      transform: translateY(-3px);
      border-color: var(--color-accent);
    }

    /* The thumbnail is a link to the full-size file, which the lightbox
       takes over on a plain click. It holds nothing but the picture, so
       there is no link text here for the underline to sit under. */
    .shot {
      display: block;

      /* The tile clips to its rounded corners, so a focus ring drawn outside
         this box is cut off by the edge it is meant to be marking. Drawn
         inside instead. */
      &:focus-visible {
        outline-offset: -3px;
      }
    }

    img {
      display: block;
      width: 100%;
      height: auto;
    }

    .meta {
      display: flex;
      flex-direction: column;
      gap: 0.15rem;
      padding: 0.55rem 0.7rem;
    }

    .name {
      font-size: var(--size-small);
      font-weight: 500;
    }

    .downloads {
      display: flex;
      flex-wrap: wrap;
      gap: 0.6rem;
      font-size: var(--size-small);
    }
  }

  @media (max-width: 48rem) {
    .join {
      grid-template-columns: 1fr;
      justify-items: center;
      text-align: center;
    }

    .join .lead {
      margin-inline: auto;
    }

    .join .art {
      order: -1;
      width: min(14rem, 52vw);
    }

    .join .socials {
      justify-content: center;
    }
  }
}

/* --- the watch shelf: link-outs to the lore and art-spotlight films --- */
/* Kin to the fan kit above it -- same uppercase gold heading, same diamond --
   so the page reads as two shelves of the same cabinet rather than two ideas. */
.community .watch {
  padding-block: var(--space-4) var(--space-5);
  border-top: 0.5px solid var(--color-rule);

  .head {
    margin-bottom: var(--space-5);
    text-align: center;
  }

  .head .title {
    color: var(--color-accent);
    font-size: var(--size-h2);
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .mark {
    margin-block: var(--space-2) 0;
  }

  .head .lead {
    margin: var(--space-3) auto 0;
    max-width: 46rem;
    color: var(--color-muted);
    font-size: var(--size-lead);
  }

  .run + .run {
    margin-top: var(--space-5);
  }

  .run .title {
    font-size: var(--size-h3);
  }

  .run .blurb {
    margin: var(--space-1) 0 var(--space-3);
    max-width: var(--measure);
    color: var(--color-muted);
  }

  .films {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .film a {
    display: grid;
    gap: var(--space-1);
    color: var(--color-text);
    text-decoration: none;
  }

  /* The still holds the 16:9 box and the play badge sits on top of it. */
  .still {
    position: relative;
    display: block;
    overflow: hidden;
    border: 1px solid var(--color-rule);
    border-radius: var(--radius);
    background: var(--color-elevated);
  }

  .still img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    transition: transform var(--transition);
  }

  /* A gold disc, the same one the buttons are cut from. */
  .play {
    position: absolute;
    inset: 50% auto auto 50%;
    display: grid;
    place-content: center;
    width: 3.25rem;
    height: 3.25rem;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: linear-gradient(180deg, var(--gold-400), var(--gold-600));
    box-shadow:
      inset 0 1px 0 color-mix(in srgb, #fff 45%, transparent),
      0 6px 18px color-mix(in srgb, var(--night-950) 55%, transparent);
    transition:
      transform var(--transition),
      box-shadow var(--transition);
  }

  .play svg {
    width: 1.6rem;
    height: 1.6rem;
    margin-left: 2px; /* optically centre the triangle in the disc */
    fill: var(--color-on-accent);
  }

  .film a:hover .still img {
    transform: scale(1.04);
  }

  .film a:hover .play {
    transform: translate(-50%, -50%) scale(1.08);
    box-shadow:
      inset 0 1px 0 color-mix(in srgb, #fff 55%, transparent),
      0 8px 24px color-mix(in srgb, var(--gold-500) 45%, transparent);
  }

  .film a:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 4px;
    border-radius: var(--radius);
  }

  .film .name {
    font-weight: 600;
  }
}