/*
  pages/game-masters.css
  Game masters detail page: GM bios grid, sticky CTA wrap, and GM info section.
*/


/* .gm-info .inner padding is handled by the shared rule in layout.css */


/* ─── Sticky CTA bar ─────────────────────────────────────────────────────── */

.gm-cta-wrap {
  visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 0;
  padding: 0;
  border-bottom: 0.5rem solid var(--dirty-linen);
  background-color: var(--jade);
  position: sticky;
  top: -44px;
  z-index: 999;
  transition: all 125ms ease-out;

  &.is-sticky {
    visibility: visible;
    height: auto;
    padding: 10px 0;
    position: sticky;
    top: 0;
    transition: all 125ms ease-in;
  }

  & .cta--choose-gm {
    border: 0;
  }
}


/* ─── GM bios grid ───────────────────────────────────────────────────────── */

.game-masters {
  max-width: 1080px;
  margin: 0 auto;
  padding-top: 20px;

  @media screen and (max-width: 1023px) {
    padding-left: 20px;
    padding-right: 20px;
  }

  @media screen and (min-width: 1024px) {
    padding-top: 100px;
  }

  & .gm {
    display: grid;
    grid-template-columns: 200px 1fr;
    grid-template-rows: fit-content(200px) 1fr;
    grid-template-areas:
      "pic detail"
      "social detail";
    padding: 40px 0;
    border-bottom: 1px solid var(--jade);

    @media screen and (max-width: 600px) {
      grid-template-columns: 1fr;
      grid-auto-rows: min-content;
      grid-template-areas:
        "pic"
        "social"
        "detail";
      max-width: 400px;
      margin: 0 auto;
    }

    &:first-of-type {
      padding-top: 0;
    }

    &:last-of-type {
      border-bottom: 0;
    }
  }

  & .gm__pic {
    grid-area: pic;
    display: flex;
    align-items: center;
    justify-content: center;

    & img {
      @media screen and (max-width: 600px) {
        max-width: 230px;
      }
    }
  }

  & .gm__social {
    grid-area: social;
    display: flex;
    align-items: start;
    justify-content: center;
    gap: 20px;
    padding-top: 20px;
  }

  & .gm__detail {
    grid-area: detail;
    align-content: start;
    padding-left: 30px;

    @media screen and (max-width: 600px) {
      padding-top: 20px;
      padding-left: 0;
    }

    & h4 {
      margin: 0;
    }
  }
}