/* Homepage Start Here, ribbons, and smooth pagination polish. */
.sonic-home-start {
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.sonic-home-start .sonic-sidebar-card {
  height: 100%;
}

.sonic-home-start .sonic-popular-list {
  gap: 1.15rem;
}

.sonic-home-start .sonic-popular-item {
  grid-template-columns: 92px minmax(0, 1fr);
}

.sonic-home-start .sonic-popular-thumb {
  width: 92px;
  height: 92px;
}

.sonic-ribbon,
.media-badge,
.season-tag {
  border-radius: 0;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%);
  padding-right: 1.05rem;
  box-shadow: 0 12px 24px rgba(15, 23, 42, .14);
}

.sonic-hero-badge.sonic-ribbon {
  left: 0;
  bottom: 1.25rem;
}

.card-image-wrap .media-badge {
  left: 0;
  bottom: 1rem;
}

.sonic-topic-card img {
  background: var(--color-surface-container-low);
}

#latest-episodes {
  scroll-margin-top: calc(var(--header-height) + 1rem);
}

#sonic-episodes-region {
  position: relative;
  transition: opacity .18s ease;
}

#sonic-episodes-region.is-loading .episodes-grid,
#sonic-episodes-region.is-loading .sonic-pagination {
  opacity: .42;
  pointer-events: none;
}

#sonic-episodes-region.is-loading::after {
  content: "";
  position: absolute;
  top: 4rem;
  left: 50%;
  width: 42px;
  height: 42px;
  margin-left: -21px;
  border: 3px solid rgba(255, 88, 12, .2);
  border-top-color: var(--color-primary);
  border-radius: 999px;
  animation: sonic-spin .8s linear infinite;
}

@keyframes sonic-spin {
  to { transform: rotate(360deg); }
}

.sonic-pagination a,
.sonic-pagination span {
  transition: transform .18s ease, background-color .18s ease, color .18s ease;
}

.sonic-pagination a:hover,
.sonic-pagination a:focus-visible {
  color: #fff;
  background: var(--color-primary);
  border-color: var(--color-primary);
  transform: translateY(-1px);
  outline: none;
}

@media (max-width: 640px) {
  .sonic-home-start .sonic-popular-item {
    grid-template-columns: 76px minmax(0, 1fr);
  }

  .sonic-home-start .sonic-popular-thumb {
    width: 76px;
    height: 76px;
  }
}