:root {
  /* Homepage overrides: taller header than the app */
  --header-block-size: 93px;
  --header-font-size: 22px;

  --title-font-size: 40px;
}

html,
body {
  margin: 0;
  padding: 0;
  background-color: var(--color-background);
  background-image: none;
}

.section {
  inline-size: 100%;
}

.section-inner {
  max-inline-size: 1200px;
  margin: 0 auto;
  padding-inline: 20px;
}

.homepage-header {
  display: flex;
  flex-direction: column;
  inline-size: 100%;
  background-color: var(--color-primary);
  background-image: url("/img/homepage/homepage-header.png");
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
  aspect-ratio: 2877 / 1824;
}

.homepage-welcome {
  flex-grow: 1;
  inline-size: 100%;
  color: var(--color-secondary-dark);

  h1 {
    margin-block-start: clamp(1rem, 6vw, 10rem);
    margin-block-end: 0;
    font-size: clamp(1rem, 4vw, 6rem);
    font-weight: 400;
  }

  h2 {
    margin-block-start: clamp(0.5rem, 1vw, 6rem);
    margin-block-end: 0;
    font-size: clamp(0.75rem, 2.5vw, 6rem);
    font-weight: 300;
  }
}

.homepage-about {
  --pieces-block-size: 310px;

  position: relative;

  .pieces {
    display: flex;
    block-size: var(--pieces-block-size);
    align-items: center;
    justify-content: space-around;
    padding-block: 20px;

    img {
      max-block-size: 260px;
      min-block-size: 100px;
      block-size: calc(20cqw);
    }
  }

  h2 {
    text-align: center;
    text-indent: 100px;
    font-size: var(--title-font-size);
    font-weight: 600;
    color: var(--color-secondary-dark);
    margin-block: clamp(1rem, 4vw, 6rem);
  }

  .trainer-cards {
    --card-image-inline-size: 240px;
    --card-image-block-size: 353px;

    display: flex;
    gap: 20px;
    justify-content: space-around;
    flex-wrap: wrap;

    .card {
      display: flex;
      gap: 20px;
      max-inline-size: 540px;
      box-shadow: 0px 4px 4px 0px #00000040;
      background-color: white;
      padding: 40px;

      .card-start {
        display: flex;
        gap: 10px;
        flex-direction: column;

        img {
          inline-size: var(--card-image-inline-size);
          block-size: var(--card-image-block-size);
          object-fit: cover;
        }
      }

      h3,
      h4 {
        margin-block: 0;
        color: var(--color-secondary-dark);
      }

      h3 {
        font-size: 20px;
        font-weight: 500;
      }

      h4 {
        font-size: 18px;
        font-weight: normal;
      }

      p {
        margin-block: 0;
      }
    }
  }

  .homepage-about-branch {
    position: absolute;
    inset-inline-start: 0;
    inline-size: 100%;
    aspect-ratio: 570 / 713;
    inset-block-start: var(--pieces-block-size);
    background-image: url("/img/homepage/branch.svg");
    background-repeat: no-repeat;
    background-size: 30%;
  }
}

.homepage-achievements {
  margin-block-start: 80px;

  .achievements-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 50px;
    justify-items: center;
    align-items: center;

    dl {
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      inline-size: 283px;
      block-size: 88px;
      background-color: white;
      border: 1px solid var(--color-secondary-lightest);
      margin: 0;
      text-align: center;
      padding-block-end: 5px;

      dt {
        font-size: 32px;
        color: var(--color-secondary-light);

        &:has(img) {
          font-size: 0;
        }
      }

      dd {
        font-size: 20px;
        color: var(--color-secondary);
        margin: 0;
      }
    }
  }

  h2 {
    font-size: 40px;
    font-weight: normal;
    color: var(--color-secondary-light);
    display: flex;
    align-items: center;
    justify-content: center;
    padding-inline-start: 20%;
    flex-wrap: wrap;
  }
}

.garland {
  background-image: url("../img/homepage/garland.png");
  background-repeat: repeat-x;
  block-size: 136px;
}

.homepage-benefits {
  h2 {
    margin-block: 80px;
    font-size: 40px;
    font-weight: 600;
    color: var(--color-secondary-dark);
    text-align: center;
  }

  dl {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;

    dt,
    dd {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      font-size: 14px;
      flex: 0 0 calc(50% - 10px);
      margin: 0;

      &:has(img) {
        align-items: center;
      }

      strong {
        font-size: 16px;
        font-weight: 500;
        text-align: center;
      }

      img {
        max-inline-size: 100%;
      }
    }
  }
}

.gallery-section {
  h2 {
    padding-block: 80px;
    margin: 0;
    font-size: 40px;
    font-weight: 600;
    color: var(--color-secondary-dark);
    text-align: center;
  }
}

.welcome-footer {
  background: var(--color-gray);
  color: var(--color-text-light);
  padding-block: 1rem;

  .footer-link {
    color: var(--color-text-light);
    text-decoration: none;
    transition: color 0.2s ease;

    &:hover {
      color: #adb5bd;
    }
  }
}

@media (max-width: 1024px) {
}

@media (max-width: 768px) {
  :root {
    --header-block-size: 50px;
    --header-font-size: 16px;
    --title-font-size: 30px;
  }

  .homepage-about {
    --pieces-block-size: 200px;
    padding-block: 10px;

    .trainer-cards {
      --card-image-inline-size: 180px;
      --card-image-block-size: 265px;
    }
  }

  .homepage-achievements {
    h2 {
      padding-inline-start: 0;
    }
  }

  .homepage-benefits {
    dl {
      dt,
      dd {
        align-items: center;
        flex-basis: 100%;

        p {
          padding-inline: 20px;
        }
      }

      &:nth-child(2n + 1) {
        flex-wrap: wrap-reverse;
      }
    }
  }
}

@media (max-width: 480px) {
  .homepage-about {
    .card {
      flex-wrap: wrap;
      flex-direction: column;
      align-items: center;
      text-align: center;
    }
  }
}