/*
 * AIOS MUSIC — PLAYLIST POLISH V1
 * Presentation only. Playback authority remains unchanged.
 */

.album-view__header {
  margin-bottom: clamp(1.25rem, 2.5vw, 2rem) !important;
}

.track-list {
  width: 100% !important;
  margin-top: 0 !important;
  overflow: hidden !important;
}

.track-list__head,
.track-row {
  grid-template-columns:
    44px
    minmax(0, 1fr)
    78px
    52px !important;
  column-gap: clamp(0.5rem, 1.25vw, 1rem) !important;
}

.track-list__head {
  min-height: 46px !important;
  padding-inline: clamp(0.65rem, 1.5vw, 1rem) !important;
}

.track-list__viewport {
  --track-row-height: 62px !important;
  max-height: min(
    calc(var(--track-row-height) * 8),
    55vh
  ) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

.track-row {
  width: 100% !important;
  min-height: var(--track-row-height) !important;
  height: auto !important;
  padding:
    0.4rem
    clamp(0.65rem, 1.5vw, 1rem) !important;
}

.track-row__title-wrap,
.track-row__title {
  min-width: 0 !important;
}

.track-row__title {
  display: block !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.track-row__duration {
  justify-self: end !important;
  text-align: right !important;
}

.track-row__actions {
  display: flex !important;
  grid-column: auto !important;
  width: auto !important;
  padding: 0 !important;
  justify-content: flex-end !important;
  flex-wrap: nowrap !important;
}

.track-row__actions .icon-btn {
  width: 42px !important;
  min-width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;
}

@media (hover: none), (pointer: coarse) {
  .track-row__index {
    opacity: 0 !important;
  }

  .track-row__play-icon {
    display: grid !important;
    opacity: 1 !important;
  }
}

@media (max-width: 760px) {
  .album-view__header {
    margin-bottom: 1.25rem !important;
  }

  .track-list__head {
    display: none !important;
  }

  .track-row {
    grid-template-columns:
      38px
      minmax(0, 1fr)
      62px
      46px !important;
    column-gap: 0.45rem !important;
  }

  .track-list__viewport {
    max-height: min(
      calc(var(--track-row-height) * 7),
      58vh
    ) !important;
  }
}

@media (max-width: 430px) {
  .track-row {
    grid-template-columns:
      34px
      minmax(0, 1fr)
      46px !important;
  }

  .track-row__duration {
    display: none !important;
  }

  .track-row__actions {
    grid-column: 3 !important;
  }

  .track-row__actions .icon-btn {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
  }
}


/*
 * AIOS MUSIC — PLAYLIST POSITION V2
 * Pull the real track library into the initial desktop viewport.
 * Landscape banner remains unchanged.
 */

.album-view__back {
  margin-bottom: clamp(0.65rem, 1.2vw, 1rem) !important;
}

.album-view__header {
  grid-template-columns:
    minmax(170px, 210px)
    minmax(0, 1fr) !important;
  gap: clamp(1.25rem, 2.5vw, 2.25rem) !important;
  align-items: center !important;
  margin-bottom: clamp(1rem, 1.8vw, 1.5rem) !important;
}

.album-view__cover {
  width: 100% !important;
  max-width: 210px !important;
}

.album-view__title {
  max-width: 20ch !important;
  font-size: clamp(2rem, 3.5vw, 3.5rem) !important;
  line-height: 1 !important;
}

.album-view__meta-row {
  margin-top: 0.65rem !important;
}

.album-view__desc {
  display: -webkit-box !important;
  max-width: 68ch !important;
  margin-top: 0.75rem !important;
  overflow: hidden !important;
  line-height: 1.5 !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
}

.album-view__actions {
  gap: 0.6rem !important;
  margin-top: 0.85rem !important;
}

.album-view__actions .btn {
  min-height: 42px !important;
  padding-block: 0.6rem !important;
}

@media (max-width: 760px) {
  .album-view__header {
    grid-template-columns: 150px minmax(0, 1fr) !important;
    gap: 1rem !important;
    text-align: left !important;
  }

  .album-view__cover {
    max-width: 150px !important;
    margin: 0 !important;
  }

  .album-view__title {
    font-size: clamp(1.7rem, 7vw, 2.5rem) !important;
  }

  .album-view__meta-row,
  .album-view__actions {
    justify-content: flex-start !important;
  }

  .album-view__desc {
    -webkit-line-clamp: 2 !important;
  }
}

@media (max-width: 520px) {
  .album-view__header {
    grid-template-columns: 110px minmax(0, 1fr) !important;
    align-items: start !important;
  }

  .album-view__cover {
    max-width: 110px !important;
  }

  .album-view__desc {
    display: none !important;
  }

  .album-view__actions {
    grid-column: 1 / -1 !important;
  }
}


/*
 * AIOS MUSIC — BANNER-FED ALBUM PREVIEW V4
 * One optimized landscape image feeds the banner and preview.
 */

.album-view__header {
  grid-template-columns:
    minmax(300px, 390px)
    minmax(0, 1fr) !important;
}

.album-view__cover--banner-fed {
  width: 100% !important;
  max-width: 390px !important;
  aspect-ratio: 16 / 9 !important;
  overflow: hidden !important;
  border-radius: clamp(16px, 2vw, 24px) !important;
}

.album-view__cover--banner-fed img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 16 / 9 !important;
  object-fit: cover !important;
  object-position: center !important;
}

@media (max-width: 760px) {
  .album-view__header {
    grid-template-columns: 1fr !important;
    text-align: left !important;
  }

  .album-view__cover--banner-fed {
    width: 100% !important;
    max-width: 520px !important;
    margin-inline: auto !important;
  }

  .album-view__meta-row,
  .album-view__actions {
    justify-content: flex-start !important;
  }
}