.hero--new {
  position: relative;
}

.hero--new-layout {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2.5fr);
  gap: var(--space-8);
  align-items: center;
}

.hero--new-copy {
  max-width: 32rem;
}

.hero--new-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.hero--new-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.hero--new-media {
  justify-self: flex-end;
}

.hero--new-image-wrapper {
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-elevated);
  border: 1px solid var(--color-border-subtle);
}

.hero--new-image-wrapper img {
  width: 100%;
  height: auto;
}

.dot {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 999px;
}

.dot--xbox {
  background: var(--color-primary-xbox);
  box-shadow: var(--shadow-glow-green);
}

.dot--ps {
  background: var(--color-primary-ps);
  box-shadow: var(--shadow-glow-blue);
}

.section-new-releases {
  background-color: var(--color-bg-elevated);
}

.section-new-releases .section-heading-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.new-releases-grid {
  margin-top: var(--space-4);
}

.section-cinematic-covers {
  background: radial-gradient(circle at top, rgba(25, 211, 255, 0.12), transparent 60%), var(--color-bg-muted);
}

.cinematic-layout {
  display: grid;
  grid-template-columns: minmax(0, 2.3fr) minmax(0, 3fr);
  gap: var(--space-8);
  align-items: center;
}

.cinematic-image-wrapper {
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-elevated);
  border: 1px solid var(--color-border-subtle);
}

.cinematic-copy {
  max-width: 36rem;
  margin-left: auto;
}

.cinematic-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.cinematic-list li {
  display: flex;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-soft);
}

.cinematic-list li::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  margin-top: 0.4rem;
  background: radial-gradient(circle, var(--color-accent-cyan), transparent 60%);
}

.cinematic-cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.section-genres {
  background-color: var(--color-bg-elevated);
}

.genre-grid {
  margin-top: var(--space-4);
}

.genre-card .genre-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.section-top5 {
  background-color: var(--color-bg-elevated-soft);
}

.top5-layout {
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) minmax(0, 3fr);
  gap: var(--space-8);
  align-items: flex-start;
}

.top5-image-wrapper {
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-elevated);
  border: 1px solid var(--color-border-subtle);
}

.top5-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.top5-card {
  padding: var(--space-4);
}

.section-upcoming {
  background-color: var(--color-bg-elevated);
}

.upcoming-layout {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2.3fr);
  gap: var(--space-8);
  align-items: center;
}

.upcoming-image-wrapper {
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-elevated);
  border: 1px solid var(--color-border-subtle);
}

.upcoming-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.upcoming-item {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 1.3fr);
  gap: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background-color: var(--color-bg-elevated-soft);
  border: 1px solid var(--color-border-subtle);
}

.upcoming-meta {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}

.upcoming-date {
  font-weight: 600;
  color: var(--color-accent-cyan);
  margin-bottom: var(--space-2);
}

.upcoming-cta {
  margin-top: var(--space-4);
}

.section-media {
  background-color: var(--color-bg-elevated-soft);
}

.media-layout {
  display: grid;
  grid-template-columns: minmax(0, 2.4fr) minmax(0, 3fr);
  gap: var(--space-8);
  align-items: center;
}

.media-image-wrapper {
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-elevated);
  border: 1px solid var(--color-border-subtle);
}

.media-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-4);
}

.media-card {
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background-color: var(--color-bg-elevated);
  border: 1px solid var(--color-border-subtle);
}

.media-card-header {
  margin-bottom: var(--space-2);
}

.media-card-meta {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.media-card-body {
  font-size: var(--font-size-sm);
  color: var(--color-text-soft);
  margin-bottom: var(--space-3);
}

.section-community {
  background-color: var(--color-bg-elevated);
}

.community-layout {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.community-content {
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) minmax(0, 2.4fr);
  gap: var(--space-8);
  align-items: flex-start;
}

.community-list {
  list-style: disc;
  padding-left: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.community-form-wrapper {
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background-color: var(--color-bg-elevated-soft);
  border: 1px solid var(--color-border-subtle);
}

.community-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.community-form label {
  font-size: var(--font-size-sm);
  font-weight: 600;
}

.community-form small {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.community-submit {
  align-self: flex-start;
}

.community-secondary-cta {
  margin-top: var(--space-4);
  font-size: var(--font-size-sm);
  color: var(--color-text-soft);
}

.platform-filter[aria-pressed="true"],
.platform-filter--active {
  border-color: rgba(25, 211, 255, 0.85);
  color: var(--color-accent-cyan);
}

@media (max-width: 1200px) {
  .hero--new-layout,
  .cinematic-layout,
  .top5-layout,
  .upcoming-layout,
  .media-layout,
  .community-content {
    gap: var(--space-6);
  }
}

@media (max-width: 960px) {
  .hero--new-layout,
  .cinematic-layout,
  .top5-layout,
  .upcoming-layout,
  .media-layout,
  .community-content {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero--new-media,
  .cinematic-copy,
  .upcoming-media,
  .media-visual {
    justify-self: stretch;
  }

  .hero--new-copy,
  .cinematic-copy {
    max-width: none;
  }

  .upcoming-item {
    grid-template-columns: minmax(0, 1fr);
  }

  .section-heading-actions {
    width: 100%;
    justify-content: flex-start;
  }
}

@media (max-width: 640px) {
  .hero--new-actions,
  .cinematic-cta {
    flex-direction: column;
    align-items: stretch;
  }

  .community-form-wrapper {
    padding: var(--space-3);
  }
}