/**
 * @info Who template — team & partners
 */

main[data-who] {

  display: block;
  max-width: none;
  padding-inline: 0;
  margin-block: 0;

  > section {
    padding-inline: var(--gutter);
    max-width: var(--content-max);
    margin-inline: auto;
  }

  .kicker {
    font-family: var(--font-display);
    font-size: var(--size-xs-s);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    max-width: none;
  }


  /*----------  Page head  ----------*/

  .page-head {

    padding-block-start: var(--size-xl-2xl);
    padding-block-end: var(--size-l);

    .kicker {
      margin-block-end: var(--size-s);
      color: var(--color-accent);
    }

    h1 {
      font-size: clamp(2.4rem, 1.2rem + 3vw, 4.6rem);
      font-weight: 600;
      line-height: 102%;
      max-width: 14ch;
      margin-block-end: var(--size-m-l);
    }

    .lede {
      font-family: var(--font-secondary);
      font-size: clamp(1.2rem, 1rem + 0.9vw, 1.6rem);
      font-weight: 420;
      line-height: 140%;
      max-width: 42ch;
    }

  }


  /*----------  Intro texts  ----------*/

  .intro {

    padding-block: var(--size-l);

    display: grid;
    gap: var(--size-l);

    border-top: 2px solid var(--color-text);

    @media (min-width: 900px) {
      grid-template-columns: repeat(3, 1fr);
      column-gap: var(--size-xl);
    }

    .intro__item p {
      font-family: var(--font-secondary);
      font-weight: var(--body-weight);
      line-height: var(--body-line-height);
      font-size: var(--size-s);
      max-width: 58ch;

      + p {
        margin-block-start: 0.75em;
      }
    }

  }


  /*----------  Team  ----------*/

  .team {

    padding-block: var(--size-2xl);

    h2 {
      font-size: clamp(1.75rem, 1.25rem + 2vw, 2.75rem);
      line-height: 102%;
      margin-block-end: var(--size-l);
    }

    .team__grid {

      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: var(--size-m) var(--size-s);

      @media (min-width: 640px) {
        grid-template-columns: repeat(3, 1fr);
      }

      @media (min-width: 1000px) {
        grid-template-columns: repeat(4, 1fr);
      }

      li {
        display: block;
      }

      img {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 1;
        object-fit: cover;
        margin-block-end: var(--size-2xs);
      }

    }

    .team__name {
      display: block;
      font-family: var(--font-display);
      font-size: clamp(1.2rem, 1rem + 0.8vw, 1.6rem);
      font-weight: 600;
      line-height: 110%;
      max-width: none;
    }

    .team__role {
      display: block;
      font-family: var(--font-primary);
      font-size: var(--size-xs);
      font-weight: 500;
      color: var(--color-gray-2);
      margin-block-start: 0.2em;
      max-width: none;
    }

    details {

      summary {
        cursor: pointer;
        list-style: none;

        &::-webkit-details-marker {
          display: none;
        }

        .team__name::after {
          content: " +";
          color: var(--color-accent);
        }

      }

      &[open] summary .team__name::after {
        content: " –";
      }

      .team__bio {

        margin-block-start: var(--size-2xs);

        .team__fullname {
          font-family: var(--font-display);
          font-size: var(--size-xs);
          font-weight: 500;
          letter-spacing: 0.05em;
          text-transform: uppercase;
          margin-block-end: 0.5em;
        }

        p:not(.team__fullname) {
          font-family: var(--font-secondary);
          font-weight: var(--body-weight);
          font-size: var(--size-xs);
          line-height: 145%;
          max-width: none;

          + p {
            margin-block-start: 0.6em;
          }
        }

      }

    }

  }


  /*----------  Partners  ----------*/

  .partners {

    padding-block-start: var(--size-l);
    padding-block-end: var(--size-2xl);

    h2 {
      font-size: clamp(1.5rem, 1.15rem + 1.4vw, 2.4rem);
      line-height: 102%;
      margin-block-end: var(--size-m);
    }

    .partners__grid {

      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
      gap: var(--size-2xs);

      li {
        display: block;
      }

      a, span {
        display: block;
        border: 2px solid var(--color-text);
        padding: var(--size-s);
        font-family: var(--font-display);
        font-size: var(--size-s);
        font-weight: 600;
        line-height: 110%;
        text-decoration: none;
        height: 100%;
      }

      span span, a span {
        border: none;
        padding: 0;
      }

      a:hover {
        background: var(--color-text);
        color: var(--color-background);
      }

    }

  }


  /*----------  Note  ----------*/

  .note {

    padding-block-end: var(--size-2xl);

    p {
      font-family: var(--font-secondary);
      font-style: italic;
      font-size: var(--size-s);
      color: var(--color-gray-2);
    }

  }

}