/* NC Studio Premium Players v14
   Camada visual aditiva: preserva o HTML, SEO e integrações da exportacao original. */

.portfolio-audio-grid article {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 232px;
  border-color: rgba(var(--theme-rgb), .22);
  background:
    radial-gradient(circle at 88% -15%, rgba(var(--theme-rgb), .2), transparent 40%),
    linear-gradient(145deg, rgba(var(--theme-panel-a), .98), rgba(var(--theme-panel-b), .98));
  box-shadow: 0 18px 46px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .035);
  transition: transform .24s ease, border-color .24s ease, box-shadow .24s ease;
}

.portfolio-audio-grid article::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--theme-rgb), .7), transparent);
  opacity: .35;
}

.portfolio-audio-grid article:hover {
  border-color: rgba(var(--theme-rgb), .46);
  box-shadow: 0 24px 58px rgba(0, 0, 0, .34), 0 0 34px rgba(var(--theme-rgb), .08);
}

.portfolio-audio-grid article.active {
  border-color: rgba(var(--theme-rgb), .82);
  box-shadow:
    0 28px 66px rgba(0, 0, 0, .42),
    0 0 0 1px rgba(var(--theme-rgb), .15),
    0 0 46px rgba(var(--theme-rgb), .2),
    inset 0 1px 0 rgba(255, 255, 255, .08);
}

.portfolio-audio-grid article.active::before {
  height: 2px;
  opacity: 1;
}

.portfolio-audio-grid article > button {
  grid-template-columns: 56px minmax(0, 1fr) 48px;
  gap: 15px;
  min-height: 62px;
  border-radius: 14px;
  margin-top: auto;
  padding: 5px 7px 5px 3px;
  transition: background .2s ease, transform .2s ease;
}

.portfolio-audio-grid article > button:hover {
  background: rgba(255, 255, 255, .035);
}

.portfolio-audio-grid article > button:focus-visible,
.category-share-actions button:focus-visible,
.portfolio-filters button:focus-visible {
  outline: 2px solid var(--theme-accent);
  outline-offset: 3px;
}

.portfolio-audio-grid article > button > i {
  width: 54px;
  height: 54px;
  padding-left: 2px;
  border: 1px solid rgba(255, 255, 255, .24);
  font-size: 14px;
  box-shadow:
    0 12px 30px rgba(var(--theme-rgb), .3),
    inset 0 1px 0 rgba(255, 255, 255, .35);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.portfolio-audio-grid article > button:hover > i {
  transform: scale(1.055);
  filter: brightness(1.08);
}

.portfolio-audio-grid article.active > button > i {
  box-shadow:
    0 14px 36px rgba(var(--theme-rgb), .44),
    0 0 0 6px rgba(var(--theme-rgb), .1),
    inset 0 1px 0 rgba(255, 255, 255, .4);
}

.portfolio-wave {
  display: block;
  height: 34px;
  border-radius: 4px;
  background: repeating-linear-gradient(
    90deg,
    rgba(255, 255, 255, .2) 0 2px,
    transparent 2px 6px
  );
  clip-path: polygon(
    0 45%, 4% 32%, 8% 39%, 12% 17%, 16% 37%, 20% 8%, 24% 29%,
    28% 20%, 32% 42%, 36% 26%, 40% 12%, 44% 34%, 48% 23%, 52% 39%,
    56% 14%, 60% 29%, 64% 6%, 68% 34%, 72% 19%, 76% 40%, 80% 24%,
    84% 33%, 88% 15%, 92% 37%, 96% 27%, 100% 45%,
    100% 55%, 96% 73%, 92% 63%, 88% 85%, 84% 67%, 80% 76%,
    76% 60%, 72% 81%, 68% 66%, 64% 94%, 60% 71%, 56% 86%,
    52% 61%, 48% 77%, 44% 66%, 40% 88%, 36% 74%, 32% 58%,
    28% 80%, 24% 71%, 20% 92%, 16% 63%, 12% 83%, 8% 61%, 4% 68%, 0 55%
  );
  overflow: hidden;
}

.portfolio-wave b {
  height: 100%;
  background:
    linear-gradient(90deg, var(--theme-accent), var(--theme-secondary)),
    repeating-linear-gradient(90deg, #fff 0 2px, transparent 2px 6px);
  box-shadow: 8px 0 18px rgba(var(--theme-rgb), .75);
}

.portfolio-audio-grid article.active .portfolio-wave {
  background-color: rgba(var(--theme-rgb), .04);
  filter: drop-shadow(0 0 7px rgba(var(--theme-rgb), .24));
}

.portfolio-audio-grid time {
  color: #c5cede;
  text-align: center;
  background: rgba(255, 255, 255, .065);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 999px;
  padding: 7px 5px;
}

/* Compartilhamento da categoria de radio */
.category-share-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: -10px 0 30px;
}

.category-share-actions button {
  color: #dce8f7;
  cursor: pointer;
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(var(--theme-rgb), .28);
  border-radius: 11px;
  min-height: 44px;
  padding: 0 15px;
  font: 700 11px var(--font-geist-sans);
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}

.category-share-actions button:hover {
  transform: translateY(-2px);
  border-color: rgba(var(--theme-rgb), .68);
  background: rgba(var(--theme-rgb), .12);
}

.category-share-actions .category-share-primary {
  color: #fff;
  background: linear-gradient(135deg, rgba(var(--theme-rgb), .82), var(--theme-secondary));
  border-color: transparent;
}

.category-share-status {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.category-share-actions + .portfolio-audio-grid {
  margin-top: 0;
}

.portfolio-filters {
  scrollbar-width: none;
}

.portfolio-filters::-webkit-scrollbar {
  display: none;
}

/* Acabamento coerente nos demais players do site */
.sample-card,
.hero-player,
.political-track-grid article,
.track {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
}

.sample-card.active,
.hero-player:has(.track.active),
.political-track-grid article.active {
  box-shadow: 0 24px 58px rgba(0, 0, 0, .38), 0 0 38px rgba(124, 58, 237, .14);
}

.sample-play,
.sample-play-clean,
.track-play,
.political-track-grid article button {
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.sample-card button:hover .sample-play,
.sample-card button:hover .sample-play-clean,
.track:hover .track-play,
.political-track-grid article button:hover {
  transform: scale(1.06);
}

@media (max-width: 780px) {
  .portfolio-audio-grid article {
    min-height: 218px;
    padding: 20px;
  }

  .portfolio-audio-grid article > button {
    grid-template-columns: 52px minmax(0, 1fr) 44px;
    gap: 11px;
  }

  .portfolio-audio-grid article > button > i {
    width: 50px;
    height: 50px;
  }

  .portfolio-wave {
    height: 31px;
  }

  .category-share-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: 4px 0 26px;
  }

  .category-share-actions button {
    width: 100%;
    padding-inline: 10px;
  }
}

@media (max-width: 390px) {
  .category-share-actions {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .portfolio-audio-grid article,
  .portfolio-audio-grid article > button > i,
  .category-share-actions button {
    transition: none;
  }
}