/* The press & media kit (/press). */

.press {
  /* --- intro plaque with the fact sheet --- */
  .intro {
    position: relative;
    isolation: isolate;
    padding-block: var(--space-5) var(--space-4);

    /* The legacy market stall, already faded for backdrops, sets the
       scene behind the plaque before the kit begins. */
    &::before {
      content: '';
      position: absolute;
      inset: 0;
      z-index: -2;
      background: url('/images/market-stall.webp') center / cover no-repeat;
    }

    /* Settle the stall into the page below. */
    &::after {
      content: '';
      position: absolute;
      inset: 0;
      z-index: -1;
      background: linear-gradient(
        to bottom,
        color-mix(in srgb, var(--night-950) 55%, transparent),
        var(--color-bg)
      );
    }

    .inner {
      width: min(54rem, 100% - 2.5rem);
      margin-inline: auto;
      text-align: center;
    }

    h1 {
      margin: 0;
      font-size: var(--size-h1);
    }

    .lead {
      margin: var(--space-3) auto 0;
      max-width: 48ch;
      color: var(--parchment-300);
      font-size: var(--size-lead);
      line-height: 1.6;

      strong {
        color: var(--color-text);
      }
    }

    /* A fact sheet: a row of label / value pairs. */
    .facts {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: var(--space-3) var(--space-4);
      margin: var(--space-4) 0 0;
      padding: var(--space-3) 0 0;
      border-top: 1px solid var(--color-rule);
    }

    .facts div {
      display: flex;
      flex-direction: column;
      gap: 3px;
    }

    .facts dt {
      color: var(--color-muted);
      font-size: var(--size-eyebrow);
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    .facts dd {
      margin: 0;
      font-family: var(--font-display);
      font-size: var(--size-h3);
      color: var(--color-accent-strong);
    }

    .contact {
      margin: var(--space-4) 0 0;
      color: var(--color-muted);

      a {
        font-weight: 600;
      }
    }
  }

  /* --- each asset section --- */
  .kit {
    padding-block: var(--space-4);

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

    /* A small gold diamond, the site's section motif. */
    .mark {
      margin-block: 0 var(--space-3);
    }

    h2 {
      margin: 0;
      font-size: var(--size-h2);
      color: var(--color-accent);
    }

    .blurb {
      margin: var(--space-2) auto 0;
      max-width: 48ch;
      color: var(--color-muted);
    }

    .items {
      display: grid;
      gap: var(--space-4) var(--space-3);
      padding: 0;
      list-style: none;
    }
  }

  /* Column widths per section kind: big cards, and a logo's size pills always
     sit on one line. Heroes stay their current size — already big enough. */
  .video .items {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  }

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

  .art .items {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr));
  }

  .hero .items {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  }

  .item {
    display: flex;
    flex-direction: column;
  }

  .item h3 {
    margin: var(--space-2) 0 var(--space-1);
    font-family: var(--font-display);
    font-size: var(--size-h3);
    font-weight: 500;
  }

  /* --- the thumbnail frame (aspect + fit vary by section kind) --- */
  .thumb {
    display: block;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--color-rule);
    border-radius: var(--radius);
    background: var(--color-elevated);
    transition:
      border-color var(--transition),
      transform var(--transition);
  }

  .thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Every thumbnail pops on hover — the video links and the plain image
     frames alike. */
  .thumb:hover {
    transform: translateY(-3px);
    border-color: var(--color-accent);
  }

  .video .thumb,
  .art .thumb {
    aspect-ratio: 16 / 9;
  }

  .hero .thumb {
    aspect-ratio: 1 / 1;
  }

  /* Logos are transparent — contain them on a soft panel with breathing room. */
  .logo .thumb {
    aspect-ratio: 16 / 10;
    background:
      radial-gradient(
        120% 120% at 50% 0%,
        color-mix(in srgb, var(--gold-500) 8%, transparent),
        transparent 60%
      ),
      var(--color-surface);
  }

  .logo .thumb img {
    object-fit: contain;
    padding: var(--space-3);
  }

  /* A play badge over video thumbnails. */
  .play {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--night-950) 55%, transparent);
    border: 2px solid color-mix(in srgb, #fff 80%, transparent);
    transition:
      background var(--transition),
      transform var(--transition);
  }

  .play::after {
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0.7rem 0 0.7rem 1.15rem;
    border-color: transparent transparent transparent #fff;
    transform: translateX(3px);
  }

  a.thumb:hover .play {
    background: var(--color-accent);
    transform: scale(1.08);
  }

  /* --- download pills + watch link --- */
  .downloads {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
  }

  .dl {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.7rem;
    border: 1px solid var(--color-rule);
    border-radius: 999px;
    color: var(--parchment-300);
    font-size: var(--size-small);
    text-decoration: none;
    transition:
      border-color var(--transition),
      color var(--transition),
      background var(--transition);
  }

  .dl:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
    background: color-mix(in srgb, var(--gold-500) 10%, transparent);
  }

  .watch {
    align-self: flex-start;
    font-size: var(--size-small);
    font-weight: 600;
  }

}