/*************************/
/*music card pro horizontal*/
/**************************/
.music-card-hz {
  display: flex;

  flex-direction: column;
  gap: 2.4rem;
  border: 1px solid var(--br-neutral-500);
  border-radius: 3.2rem;
  padding: 1.6rem;
  transition: var(--anim);
}
/*
.music-card-hz__image {
  border-radius: 1.6rem;
  overflow: hidden;
}

.music-card-hz__image img {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--bg-neutral-500);
  object-fit: cover;
}
*/
.music-card-hz__content {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
}

.music-card-hz__info-right {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.music-card-hz__view,
.music-card-hz__info-right .item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 50vw;
  font-size: var(--fs-12);
  background: var(--bg-neutral-150);
  transition: var(--anim);
  font-weight: bold;
  height: 3rem;
  user-select: none;
  -webkit-user-select: none;
  font-weight: bold;
}

.music-card-hz__playlist-btn {
  padding: 0.8rem;
}

.music-card-hz__play-btn {
  padding: 0.35rem;
  padding-left: 1rem;
}

.music-card-hz__playlist-btn i {
  color: var(--c-primary);
  font-size: 1.8rem;
}

.music-card-hz__album {
  padding: 0.5rem;
}

.music-card-hz__album i {
  color: var(--c-primary);
  font-size: 1.4rem;
}

.music-card-hz__play-btn i {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-white);
  background-color: var(--c-primary);
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 50%;
  font-size: 1.1rem;
}

.music-card-hz__comments {
  padding: 0.8rem;
  padding-left: 1rem;
}

.music-card-hz__comments i {
  color: var(--c-primary);
  font-size: 1.4rem;
}

.music-card-hz__rating {
  padding: 0.8rem;
  padding-left: 1.2rem;
}

.music-card-hz__rating i {
  color: var(--c-primary);
  font-size: 1.4rem;
}

.music-card-hz__download {
  padding: 0.8rem;
  padding-left: 1.2rem;
}

.music-card-hz__download i {
  color: var(--c-primary);
  font-size: 1.4rem;
}

.music-card-hz__download {
  padding: 0.3rem 1rem;
}

.music-card-hz__info-left {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
}

.music-card-hz__title {
  display: inline-block;
  font-size: var(--fs-20);
}

.music-card-hz__right {
  display: flex;
  flex-direction: column;
  gap: 1.3rem;
}

.music-card-hz__left {
  display: flex;
  flex-direction: row;
  gap: 1.3rem;
  flex-wrap: wrap;
}

.music-card-hz__info-left .item {
  border: 1px solid var(--br-neutral-350);
  font-size: var(--fs-12);
  border-radius: 50vw;
  height: 3rem;
  display: flex;
  align-items: center;
  padding: 0.8rem;
  gap: 0.5rem;
  background: var(--bg-white-100);
  font-weight: bold;
}

.music-card-hz__format i {
  color: var(--c-primary);
  font-size: 2rem;
}

.music-card-hz__date i {
  color: var(--c-primary);
  font-size: 1.7rem;
}

.music-card-hz__view {
  padding: 0.3rem 0.3rem 0.3rem 0.8rem;
}

.music-card-hz__view i {
  width: 2.4rem;
  height: 2.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: var(--c-primary);
  color: var(--c-white);
  font-size: 1.4rem;
}

.music-card-hz__play-btn,
.music-card-hz__playlist-btn,
.music-card-hz__download,
.music-card-hz__view {
  border: 1px solid transparent;
}

/*************************/
/*music card pro*/
/**************************/
.music-card-pro {
  border: 1px solid var(--br-neutral-500);
  border-radius: 3.2rem;
  padding: 1.6rem;
  background: var(--bg-white-200);
  transition: var(--anim);
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* .music-card-pro:hover {
  border-color: var(--c-primary);
} */

.music-card-pro__image {
  position: relative;
  display: block;
  border-radius: 2.4rem;
  overflow: hidden;
  margin-bottom: 1.6rem;
}

.music-card-pro__image img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: var(--bg-neutral-250);
}

.music-card-pro__badges {
  position: absolute;
  inset: 1.2rem 1.2rem auto;
  display: flex;
  gap: 0.8rem;
  z-index: 2;
  justify-content: space-between;
}

.music-card-pro__content {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.music-card-pro__date,
.music-card-pro__format {
  background: var(--bg-white-200);
  padding: 0.5rem 1rem;
  border-radius: 5rem;
  font-size: var(--fs-12);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: bold;
}

.music-card-pro__date {
  padding: 0.5rem 0.7rem;
}

.music-card-pro__format {
  padding: 0.5rem;
  padding-left: 0.9rem;
}

.music-card-pro__date i {
  color: var(--c-primary);
  font-size: 1.8rem;
}

.music-card-pro__format i {
  color: var(--c-primary);
  font-size: 2rem;
  vertical-align: top;
}

.music-card-pro__controls {
  position: absolute;
  left: 1.2rem;
  bottom: 1.2rem;
  display: flex;
  gap: 0.5rem;
  z-index: 2;
  background: #ffffff78;
  backdrop-filter: blur(10px);
  border-radius: 4rem;
  padding: 0.5rem;
}

[data-theme="dark"] .music-card-pro__controls {
  background: #3f3f3f78;
}

.music-card-pro__play-btn,
.music-card-pro__playlist-btn {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  transition: var(--anim);
  box-shadow: 0 5px 10px transparent;
}

.music-card-pro__playlist-btn i {
  vertical-align: bottom;
}

.music-card-pro__play-btn {
  background: var(--c-primary);
  color: var(--c-white);
  font-size: 1.8rem;
}

.music-card-pro__playlist-btn {
  background: var(--c-primary-100);
  color: var(--c-primary);
  font-size: 2.3rem;
}

.music-card-pro__title {
  font-size: var(--fs-18);
  font-weight: bold;
  margin-bottom: 1.2rem;
  display: block;
}

.music-card-pro__info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding-top: 1.5rem;
  margin-top: auto;
}

.music-card-pro__info-left {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.music-card-pro__album,
.music-card-pro__download,
.music-card-pro__view,
.music-card-pro__comments,
.music-card-pro__rating {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 50vw;
  font-size: var(--fs-12);
  background: var(--bg-neutral-150);
  transition: var(--anim);
  font-weight: bold;
  height: 3rem;
  user-select: none;
  -webkit-user-select: none;
  white-space: nowrap;
}

.music-card-pro__comments i,
.music-card-pro__rating i {
  color: var(--c-primary);
  font-size: 1.5rem;
}

.music-card-pro__download i {
  font-size: 1.3rem;
  color: var(--c-primary);
}

/* .music-card-pro__playlist-btn i {
  color: var(--c-primary);
  font-size: 1.8rem;
} */
.music-card-pro__album {
  padding: 0.5rem;
}

.music-card-pro__album i {
  font-size: 1.3rem;
  color: var(--c-primary);
}

.music-card-pro__view i {
  width: 2.4rem;
  height: 2.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: var(--c-primary);
  color: var(--c-white);
  font-size: 1.4rem;
}

.music-card-pro__comments {
  padding: 0.3rem 0.7rem;
  min-width: 4.5rem;
}

.music-card-pro__rating {
  padding: 0.3rem 0.9rem;
  min-width: 5rem;
}

.music-card-pro__download {
  padding: 0.3rem 1rem;
}

.music-card-pro__view {
  padding: 0.3rem 0.3rem 0.3rem 0.8rem;
}

.music-card-pro__download,
.music-card-pro__view {
  border: 1px solid transparent;
}

/* mobile */
.card-mobile .music-card-pro__badges {
  position: static;
  margin-bottom: 1rem;
}

.card-mobile.music-card-pro {
  flex-direction: row;
  padding: 0.5rem;
}

.card-mobile .music-card-pro__content {
  padding: 1rem;
}

.card-mobile .music-card-pro__image {
  margin-bottom: 0;
  width: 16rem;
  flex: none;
}

.card-mobile .music-card-pro__rating,
.card-mobile .music-card-pro__comments {
  padding: 0.3rem 0.7rem;
  min-width: 4.5rem;
  position: absolute;
  z-index: 2;
  background: #ffffff78;
  backdrop-filter: blur(10px);
  top: 1rem;
}

[data-theme="dark"] .card-mobile .music-card-pro__rating,
[data-theme="dark"] .card-mobile .music-card-pro__comments {
  background: #3f3f3f78;
}

.card-mobile .music-card-pro__rating {
  right: 1rem;
}

.card-mobile .music-card-pro__comments {
  left: 1rem;
}

.card-mobile .music-card-pro__date,
.card-mobile .music-card-pro__format {
  font-size: 1.2rem;
  padding: 0;
}

.card-mobile .music-card-pro__title {
  font-size: 1.6rem;
}

/*************************/
/*music sm cards */
/**************************/
#special .swiper-slide {
  width: 13rem;
}

.music-sm-thumbnail {
  border-radius: 2.4rem;
  overflow: hidden;
  border: 1px solid transparent;
  display: block;
  transition: var(--anim);
  box-shadow: 0 23px 22px -12px transparent;
}

.music-sm-thumbnail img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  background-color: var(--bg-neutral-500);
}

.music-sm-content {
  text-align: center;
}

.music-sm-title {
  font-size: var(--fs-18);
  margin-top: 1.5rem;
  display: block;
  transition: var(--anim);
  font-weight: bold;
}

.music-sm-card .music-artist {
  font-size: 1.4rem;
  margin-top: 0.6rem;
  display: block;
  opacity: 0.8;
  transition: var(--anim);
}

/*************************/
/* cards  blog*/
/**************************/
.section--blog .swiper-slide {
  width: 34rem;
}

.desktop .section--blog .swiper-slide {
  width: 41.7rem;
}

.mag-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.mobile .cards-mag .mag-card__img {
  width: 30%;
  flex: none;
}

.mobile .cards-mag .mag-card {
  flex-direction: row;
  gap: 1rem;
  align-items: center;
}

.mag-card__img {
  display: block;

  position: relative;
}

.mag-card__img::before {
  content: "\e912";
  font-family: var(--ff-icon);
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 50%;
  color: var(--c-primary);
  background-color: var(--bg-neutral-200);
  transition: var(--anim);
  position: absolute;
  z-index: 2;
  bottom: 0;
  left: 5rem;
  transform: translateY(50%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
}

.mobile .cards-mag .mag-card__img::before {
  display: none;
}

.mag-card__img img {
  width: 100%;
  object-fit: cover;
  aspect-ratio: 3 / 2;
  border-radius: 3rem;
}

.mobile .cards-mag .mag-card__img img {
  border-radius: 2rem;
}

.mag-card--detail {
  padding: 2rem 1rem 0;
}

.mobile .cards-mag .mag-card--detail {
  padding: 0;
  flex: 1;
}

.desktop .mag-card--detail {
  padding: 3.5rem 2rem 0;
}

.mag-card__title {
  font-size: var(--fs-20);
  font-weight: bold;
}

.mag-card__desc {
  margin-top: 0.7rem;
  color: var(--text-neutral-650);
  font-size: var(--fs-14);
  line-height: 2;
}

/*************************/
/* cards artist */
/**************************/
.artist-card__image {
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 50%;
  position: relative;
  transition: all 0.5s ease-in-out;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.artist-card:hover .artist-card__image {
  box-shadow: 0 32px 24px -12px rgba(var(--c-primary-rgb), 0.15);
}

.artist-card__image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at bottom,
      rgba(var(--c-primary-rgb), 0.2) 0%,
      transparent 70%);
  opacity: 0;
  transition: opacity 0.5s ease-out;
}

.artist-card:hover .artist-card__image::after {
  opacity: 1;
}

.artist-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.5s ease-out;
  filter: grayscale(1);
  transform: scale(1);
  transform-origin: top;
  background-color: var(--bg-neutral-500);
}

.artist-card:hover .artist-card__image img {
  filter: grayscale(0);
  transform: scale(1.08);
}

.artist-card__border {
  position: absolute;
  inset: -2px;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  fill: none;
  stroke: var(--c-primary);
  stroke-width: 1;
  stroke-dasharray: 302;
  stroke-dashoffset: 302;
  transition: stroke-dashoffset 0.8s ease-in-out;
  pointer-events: none;
}

.artist-card:hover .artist-card__border {
  stroke-dashoffset: 0;
}

.artist-card__name {
  padding: 1.5rem 0 0;
  text-align: center;
  font-size: var(--fs-20);
  font-weight: bold;
  display: block;
  transition: color 0.3s ease;
}

.artist-card:hover .artist-card__name {
  color: var(--c-primary);
}

.sw--artists .swiper-slide {
  width: min(16.5rem, 40vw);
}

.mobile .btns__artists {
  justify-content: center;
}

/*************************/
/* cards playlist*/
/**************************/
.mobile .btns__playlists {
  justify-content: center;
}

.sw--playlists .swiper-slide {
  width: min(24.1rem, 40vw);
  height: auto;
}

.playlist-card {
  height: 100%;
  text-align: center;
}

.playlist-card__image {
  position: relative;
  overflow: hidden;
  border-radius: 1.6rem;
  display: block;
  transition: 0.4s ease-out;
  box-shadow: 0 22px 25px -12px transparent;
}

.playlist-card__image img {
  aspect-ratio: 1/1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 0.4s ease-out;
  background-color: var(--bg-neutral-500);
}

.playlist-card__title {
  font-size: var(--fs-20);
  font-weight: bold;
  margin-top: 1.6rem;
  display: block;
}

/* Responsive */

.playlist-card__title a:active {
  color: var(--c-primary);
}

.playlist-card:active .playlist-card__image img {
  transform: scale(1.05);
}

.playlist-card:active .playlist-card__image {
  box-shadow: 0 22px 25px -12px rgba(var(--c-primary-rgb), 0.5);
}

/*************************/
/* cards  pagination*/
/**************************/
.page-numbers {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-16);
  font-weight: bold;
}
.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
/* .page-numbers i {
  vertical-align: middle;
} */
ul.page-numbers {
  margin-top: min(4rem, 7vw);
  padding-bottom: 1rem;
}

.page-numbers li {
  margin: 0 0.3rem;
}

.page-numbers li a,
.page-numbers li span {
  line-height: 1;
  height: 3.2rem;
  min-width: 3.2rem;
  padding: 0.8rem;
  border-radius: 100vw;
  border: 1px solid transparent;
  transition: var(--anim);
  white-space: nowrap;
  background: var(--bg-neutral-450);
}

.prev.page-numbers,
.next.page-numbers {
  width: 3.2rem;
  height: 3.2rem;
  min-width: auto;
  border: 1.5px solid var(--c-primary);
  color: var(--c-primary);
  font-size: 1rem;
}

.desktop .prev.page-numbers,
.desktop .next.page-numbers {
  width: 2.2rem;
  height: 2.2rem;
}

.page-numbers.dots {
  all: unset;
  display: block;
  font-weight: bold;
}

.page-numbers li span.current {
  pointer-events: none;
}

.last.page-numbers,
.first.page-numbers {
  padding: 0 min(2.3rem, 3vw);
}

.page-numbers li span.current {
  border-color: var(--br-white-100);
  color: var(--c-white);
  box-shadow: 0 4px 6px #cd6c5854;
  background: var(--c-primary);
}

/*************************/
/* desktop */
/*************************/
.desktop .music-card-pro__content {
  padding: 0 1rem;
}

.desktop .music-card-hz__left {
  flex-direction: column;
}

.desktop .music-card-hz__left {
  align-items: end;
}

.desktop .music-card-hz__image {
  width: 13rem;
  flex: none;
}

.desktop .music-card-hz {
  flex-direction: row;
  align-items: center;
}

.desktop .music-card-hz__content {
  grid-template-columns: 1fr auto;
}

.desktop #special .swiper-slide {
  width: 19.8rem;
}

/*************************/
/*  hovers */
/**************************/
.playlist-card__title a:active,
.desktop .playlist-card__title a:hover {
  color: var(--c-primary);
}

.playlist-card:active.playlist-card__image img,
.desktop .playlist-card:hover .playlist-card__image img {
  transform: scale(1.05);
}

.playlist-card:active .playlist-card__image,
.desktop .playlist-card:hover .playlist-card__image {
  box-shadow: 0 22px 25px -12px rgba(var(--c-primary-rgb), 0.5);
}

.music-card-hz__format:active,
.music-card-hz__play-btn:active,
.music-card-hz__playlist-btn:active,
.music-card-hz__download:active,
.music-card-hz__view:active,
.desktop .music-card-hz__format:hover,
.desktop .music-card-hz__play-btn:hover,
.desktop .music-card-hz__playlist-btn:hover,
.desktop .music-card-hz__download:hover,
.desktop .music-card-hz__view:hover {
  border-color: var(--c-primary);
}

.music-card-pro__format:active,
.desktop .music-card-pro__format:hover {
  color: var(--c-primary);
}

.music-card-pro__play-btn:active,
.music-card-pro__playlist-btn:active,
.desktop .music-card-pro__play-btn:hover,
.desktop .music-card-pro__playlist-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 7px 17px #e12a5a6b;
}

.music-card-pro__download:active,
.music-card-pro__view:active,
.desktop .music-card-pro__download:hover,
.desktop .music-card-pro__view:hover {
  border-color: var(--c-primary);
}

.mag-card:active .mag-card__title,
.desktop .mag-card:hover .mag-card__title {
  color: var(--c-primary);
}

.mag-card:active .mag-card__img::before,
.desktop .mag-card:hover .mag-card__img::before {
  color: var(--c-white);
  background-color: var(--c-primary);
}

.prev.page-numbers:active,
.next.page-numbers:active,
.desktop .prev.page-numbers:hover,
.desktop .next.page-numbers:hover {
  color: var(--c-white);
  background: var(--c-primary);
}

.page-numbers li a:active,
.desktop .page-numbers li a:hover {
  border-color: var(--c-primary);
  color: var(--c-primary);
}

.page-numbers a:is(:active, :focus-visible),
.desktop .page-numbers a:is(:hover, :focus-visible) {
  color: var(--c-secondary);
}

.music-card-pro__title:active,
.music-card-hz__title:active,
.desktop .music-card-pro__title:hover,
.desktop .music-card-hz__title:hover {
  color: var(--c-primary);
}

.music-sm-card:active .music-sm-thumbnail,
.desktop .music-sm-card:hover .music-sm-thumbnail {
  border-color: var(--c-primary);
  box-shadow: 0 23px 22px -12px #e12a5a4f;
}

a.music-sm-title:active,
a.music-artist:active,
.desktop a.music-sm-title:hover,
.desktop a.music-artist:hover {
  color: var(--c-primary);
}


/* */
.music-card-hz__image {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 1.6rem;
  overflow: hidden;
  background-color: var(--bg-neutral-500);
  contain: layout paint;
}

.music-card-hz__image a {
  display: block;
  width: 100%;
  height: 100%;
}

.music-card-hz__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.music-card-hz [class^="icon-"], 
.music-card-hz [class*=" icon-"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  min-width: 1em;
  min-height: 1em;
}