/**
 *
 * Banner Section
 *
 */

.banner-section {
  aspect-ratio: 184 / 80;
  background-image: var(--background-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 10px;
  margin-inline: 40px;

  @media (1024px <= width) {
    border-radius: 20px;
  }
}

/**
 *
 * Introduction Section
 *
 */

.introduction-section {
  padding-top: 40px;

  @media (1024px <= width) {
    padding-top: 80px;
  }
}

.routes-and-map-container {
  margin-top: 31px;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;

  @media (1024px <= width) {
    gap: 30px;
  }
}

.routes-container {
  grid-column: 1 / -1;
  display: flex;
  gap: 30px;

  @media (1024px <= width) {
    grid-column: span 6;
  }
}

.routes-list-and-motorcycle-icon-container {
  flex: 1;
}

.motorcycle-icon-track {
  width: 100%;
  height: 60px;
}

.motorcycle-icon-container {
  width: 60px;
  height: 60px;
}

.routes-list {
  display: flex;
  justify-content: space-between;
  gap: 30px;
}

.routes-and-location-container {
  display: flex;
  flex-direction: column;
  align-items: center;

  &:has(input[name="route"]:not(:checked)) {
    .motorcycle-icon-container {
      opacity: 0;
    }

    .motorcycle-dot {
      background-color: transparent;
    }

    .day-index {
      background-color: #eaeaea;
    }

    .day {
      color: var(--text-color);
    }

    .location-name {
      background-color: #F8F8F8;
      color: #859389;
    }
  }

  &:has(input[name="route"]:checked) {
    .motorcycle-icon-container {
      opacity: 1;
    }

    .motorcycle-dot {
      background-color: var(--primary-color);
    }

    .day-index {
      background-color: var(--primary-color);
    }

    .day {
      color: var(--secondary-color);
    }

    .location-name {
      background-color: #254441;
      color: var(--secondary-color);
    }
  }
}

.motorcycle-icon-container {
  transition: all 0.3s;
  width: 60px;
  height: 60px;
}

.motorcycle-dot {
  width: 16px;
  height: 16px;
  border: 2px solid var(--primary-color);
  border-radius: 50%;
  transition: all 0.3s;
}

input[name="route"] {
  display: none;
}

.day-index {
  margin-top: 20px;
  padding: 13.5px 60px;
  border-radius: 10px;
  transition: all 0.3s;
}

.day {
  font-weight: 700;
  transition: all 0.3s;
}

.distance {
  margin-block: 10px;
  font-weight: 700;
  color: var(--text-color);
}

.locations-list {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.location-name-container {
  display: flex;
  flex-direction: column;
  align-items: center;

  &:not(:first-child)::before {
    content: '';
    display: block;
    width: 2px;
    height: 40px;
    border-left: 1px dashed #859389;
    border-right: 1px dashed #859389;
    margin-block: 5px;
  }
}

.location-name {
  width: 100%;
  text-align: center;
  padding: 8px;
  border-radius: 10px;
  transition: all 0.3s;
}

.routes-button-container {
  width: 36px;
  padding-top: 100px;
}

.routes-button {
  width: 36px;
  height: 36px;
  background-color: var(--secondary-color);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0px 1px 2px rgba(60, 64, 67, 0.3), 0px 2px 6px 2px rgba(60, 64, 67, 0.15);

  &::before {
    content: '';
    width: 36px;
    height: 36px;
    background-size: 10px 16px;
    background-repeat: no-repeat;
    background-position: center;
  }
}

.routes-previous-button::before {
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='16' viewBox='0 0 10 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.000102294 8.10366L8.3156 -8.30218e-08L9.25757 0.969014L1.95165 8.09014L9.25306 15.0175L8.3201 16L0.000102294 8.10366Z' fill='%231A1E1C'/%3E%3C/svg%3E%0A");
}

.routes-next-button::before {
  background-image: url("data:image/svg+xml,%3Csvg width='9' height='16' viewBox='0 0 9 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 7.89634L0.915774 16L8.16913e-08 15.031L7.10273 7.90986L0.00438306 0.982535L0.911394 8.26245e-08L9 7.89634Z' fill='%231A1E1C'/%3E%3C/svg%3E%0A");
}

.map-container {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;

  @media (1024px <= width) {
    grid-column: span 6;
  }
}

.map {
  border-radius: 15px;
  width: 100%;
  aspect-ratio: 675 / 450;
}

/**
 *
 * Media Section
 *
 */

.media-section {
  padding-top: 40px;

  @media (1024px <= width) {
    padding-top: 80px;
  }
}

.medias-list {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
}

.media-container {
  display: var(--display);
  grid-column: var(--col-span);
  grid-row: var(--row-span);
  overflow: hidden;
  border-radius: 10px;
  aspect-ratio: var(--aspect);

  &:hover {
    .media-image {
      transform: scale(1.1);
    }
  }
}

.media-link {
  display: block;
  width: 100%;
  height: 100%;
}

.media-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.3s;
}