/* hero section */
.hero-section {
  background-image: url(../assets/images/hero-image.jpg); /* background image */
  background-size: cover; /* make sure the image covers the entire section */
  background-repeat: no-repeat;
  background-position: center; /* centers the image */
  display: flex;
  flex-direction: column;
  width: var(--scalable-width);
  position: relative; /* keeps the section in normal flow */
}

.hero-section::before {
  content: ""; /* necessary for pseudo-elements */
  position: absolute; /* position it on top */
  width: var(--scalable-width);
  height: var(--scalable-height);
  background-color: rgba(0, 0, 0, 0.5); /* 50% black */
  z-index: 1;
}

.hero-text {
  display: flex; /* flexbox */
  flex-direction: column; /* stack text vertically */
  align-items: center; /* center text horizintally */
  text-align: center; /* center text */
  margin: 350px 0;
  z-index: 2;
}

.hero-text h1 {
  font-size: 60px;
  margin-bottom: 10px;
}

.hero-text p {
  font-size: 20px;
  font-weight: var(--font-light);
  width: 500px;
  margin-bottom: 20px;
}

/* best sellers section */
.best-sellers {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 50px;
  max-width: 1600px;
  width: var(--large-screen-width);
  margin: var(--centering);
  padding: 100px 0;
}

.best-sellers_text {
  font-weight: var(--font-regular);
  font-size: 36px;
}

.best-sellers_games {
  display: flex;
  gap: 20px;
}

.game-card {
  position: relative;
  overflow: hidden;
  height: 320px;
  width: 320px;
  border-radius: var(--border-radius-medium);
  transition: transform 0.3s ease;
}

.game-card_image {
  width: 320px;
  height: 320px;
  object-fit: cover;
  border-radius: var(--border-radius-medium);
}

/* Hover effect container */
.game-card_hover {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7); /* Semi-transparent dark overlay */
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  opacity: 0; /* Hidden by default */
  pointer-events: none; /* Prevent hover content from blocking the link */
  transition: opacity 0.3s ease;
}

@media (hover: hover) {
  .game-card:hover {
    transform: scale(1.05); /* Smooth hover zoom effect */
  }

  .game-card:hover .game-card_hover {
    opacity: 1; /* Show hover content on hover */
    pointer-events: auto; /* Allow interaction */
  }
}

.game-card_hover h3,
.game-card_hover p {
  margin: 5px 0;
}

/* newsletter section */
.newsletter-section {
  background: linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.3) 0%,
    rgba(255, 255, 255, 0.03) 100%
  ); /* "45deg": angle for the gradient, (255, 255, 255, 0.3): 30% white "0%" starts on one end "100%" ends in the other */
  display: flex;
  flex-direction: column;
  text-align: center;
  border-radius: var(--border-radius-big);
  padding: 50px;
  margin: var(--centering);
  width: fit-content;
  border: 1px solid rgba(255, 255, 255, 0.2);
  position: relative;
  z-index: 1;
}

.newsletter-section h3 {
  margin-bottom: 20px;
  font-size: 2em;
  font-weight: var(--font-medium);
  color: var(--pink);
}

.newsletter-section_type {
  display: flex;
  margin: 30px 0px;
  gap: 10px;
}

#email {
  width: 400px;
  font-weight: var(--font-regular);
  font-size: 0.8em;
  padding: 14px 20px;
  border: none;
  border-radius: var(--border-radius-big);
}

#email:focus {
  outline: 2px solid var(--pink);
}

.faded-text {
  color: rgba(255, 255, 255, 0.6);
}