/* ==========================================================================
   Music — catálogo tipo Axwell + iconos de plataforma por renglón.
   La columna de listas se parte en dos (horizontal):
     arriba  MUSIC       lanzamientos oficiales
     abajo   MORE MUSIC  remixes y edits (SoundCloud, Bandcamp, remix oficial)
   Lo seleccionado se muestra en la otra columna: portada + datos + botones.
   ========================================================================== */

.music {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
  padding: 10px 0;
}

/* ---------- Listas ---------- */
.music__lists {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
}
.music__block .label { margin-bottom: 6px; }

.music__block--more {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  padding-top: 10px;
  border-top: 1px solid var(--ink); /* la línea que parte la columna en dos */
}

/* si hay muchos remixes y no caben, sólo esta lista se desplaza */
.music__rows--more {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.25) transparent;
}

/* ---------- Renglones ---------- */
.music__rows .row { --row-cols: 24px 3em 5.4em minmax(0, 1fr) auto; column-gap: 6px; }

/* botón de preview de 15 s */
.row__play {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  margin-left: -4px;
}
.play-btn {
  display: inline-grid;
  place-items: center;
  width: var(--hit);
  height: var(--hit);
  color: var(--accent);
  transition: color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.play-btn .icon { --icon: 12px; }
.row.is-selected .play-btn { color: var(--white); }
@media (hover: hover) {
  .play-btn:hover { transform: scale(1.2); }
}
.play-btn.is-loading .icon,
.detail__play.is-loading .icon { animation: pk-pulse 0.7s ease-in-out infinite alternate; }
@keyframes pk-pulse {
  from { opacity: 1; }
  to { opacity: 0.2; }
}

/* progreso del preview: línea en la base del renglón */
.row__progress {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: var(--accent);
  pointer-events: none;
}
.row.is-selected .row__progress { background: var(--white); }

/* en pantallas muy angostas se oculta el tipo para dejar lugar al título */
@media (max-width: 359px) {
  .music__rows .row { --row-cols: 24px 2.8em minmax(0, 1fr) auto; }
  .music__rows .row__type { display: none; }
}
.row__title { min-width: 0; }
.row__select { display: block; width: 100%; }
.row__actions { --hit: 26px; margin-right: -4px; }
.row__count {
  margin-right: 2px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.row__type--official { color: var(--accent); }
.row.is-selected .row__type--official { color: var(--white); }

@media (pointer: fine) and (min-width: 1024px) {
  .row__actions { --hit: 24px; }
}

/* ---------- Detalle de lo seleccionado ---------- */
.detail {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.detail__main {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}
.detail__cover img { animation: pk-in 420ms var(--ease) both; }

.detail__info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.detail__meta,
.detail__label { color: var(--muted); }
.detail__artist { color: var(--accent); }
.detail__title {
  font-family: var(--font-display);
  font-stretch: 125%;
  font-weight: 900;
  font-size: 18px;
  line-height: 0.95;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}
.detail__count {
  color: var(--accent);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.detail__desc { display: none; font-size: 13px; }
.detail__label { display: none; }

.detail__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.detail__btn { justify-content: flex-start; }

/* botón "Preview 15 s": se rellena conforme avanza */
.detail__play {
  --p: 0%;
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0.32) var(--p), transparent var(--p));
}
.detail__play .icon { --icon: 12px; }
/* con 4 o más plataformas, en el celular sólo se ve el icono */
.detail__actions--icons .detail__btn { justify-content: center; width: 44px; padding: 0; }
.detail__actions--icons .detail__btn span { display: none; }

/* teléfonos altos: portada y título más grandes, con descripción */
@media (min-height: 800px) and (max-width: 1023px) {
  .detail__main { grid-template-columns: 112px minmax(0, 1fr); }
  .detail__title { font-size: 22px; }
  .detail__desc { display: block; }
}
/* celulares de altura media: renglones un poco más compactos (siguen ≥ 24px para el dedo) */
@media (max-height: 760px) and (max-width: 1023px) {
  .music,
  .music__lists { gap: 10px; }
  .music__rows .row { min-height: 28px; }
}
@media (max-height: 600px) and (max-width: 1023px) {
  .music { gap: 8px; padding: 6px 0 8px; }
  .music__lists { gap: 8px; }
  .detail__main { grid-template-columns: 56px minmax(0, 1fr); }
}

/* ---------- Portada (escritorio) ---------- */
.music__media { display: none; }
.music__art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: clamp(20px, 6%, 64px);
  object-fit: contain;
  opacity: 0;
  transition: opacity 450ms var(--ease);
}
.music__art.is-active { opacity: 1; }
.music__caption {
  position: absolute;
  left: 12px;
  bottom: 8px;
  color: var(--white);
}

/* ==========================================================================
   Escritorio (y teléfonos en horizontal): listas | portada + detalle
   ========================================================================== */
@media (min-width: 1024px), (orientation: landscape) and (max-height: 480px) {
  .music {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--gutter);
    padding: 0;
  }

  /* la columna se parte en dos: 40 % lanzamientos, 60 % more music (tiene más renglones) */
  .music__lists {
    display: grid;
    grid-template-rows: minmax(0, 2fr) minmax(0, 3fr);
    gap: 0;
    padding: 10px 0;
  }
  .music__block { min-height: 0; }
  .music__block--more { padding-top: 14px; }

  .music__side {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 14px;
    min-height: 0;
    padding: 6px 0 10px;
  }
  .music__media { display: block; }

  .detail__main { grid-template-columns: minmax(0, 1fr); }
  .detail__cover { display: none; }
  .detail__title { font-size: clamp(24px, 2.6vw, 44px); }
  .detail__desc { display: block; font-size: 14px; }
  .detail__label { display: block; }
  .detail__actions--icons .detail__btn { width: auto; padding: 0 10px; justify-content: flex-start; }
  .detail__actions--icons .detail__btn span { display: inline; }
}

@media (orientation: landscape) and (max-height: 480px) {
  .music__lists { padding: 4px 0 6px; }
  .music__block .label { margin-bottom: 2px; }
  .music__block--more { padding-top: 6px; }
  .music__rows .row { min-height: 24px; }
  .music__side { gap: 6px; padding: 4px 0 6px; }
  .detail { gap: 6px; }
  .detail__desc,
  .detail__meta,
  .detail__artist,
  .detail__label { display: none; }
  .detail__title { font-size: 18px; }
  .detail__btn { height: 30px; }
}