/* =========================================================
   TRYHARD — RELEASES COVERFLOW FINAL

   Portadas arriba / información debajo
   Archivo limpio: reemplaza COMPLETO el anterior
========================================================= */


/* =========================================================
   SECTION / CONTENT
========================================================= */

.releases {
  min-height: 650px;
}

.releases .section-title-block {
  position: relative;
  z-index: 40;
}

.releases .release-content {
  grid-column: 2;

  position: relative;

  width: 100%;
  min-width: 0;

  display: grid;

  grid-template-columns: minmax(0, 1fr);
  grid-template-rows:
    auto
    305px
    auto
    auto;

  row-gap: 0;

  align-items: start;

  overflow: visible;
}


/* =========================================================
   FILTERS
========================================================= */

.releases .release-filters {
  grid-column: 1;
  grid-row: 1;

  position: relative;

  z-index: 30;

  width: 100%;

  margin: 0;
  padding: 0 0 12px;

  display: flex;

  align-items: center;

  gap: 28px;

  border-bottom:
    1px solid rgba(5,5,5,.22);
}


/* =========================================================
   COVERFLOW — GEOMETRÍA
========================================================= */

.releases .coverflow--releases {
  grid-column: 1;
  grid-row: 2;

  position: relative;

  width:
    min(
      880px,
      calc(100% - 70px)
    );

  height: 305px;

  margin: 0 auto;

  align-self: start;

  overflow: visible;

  perspective: 1400px;

  perspective-origin:
    50% 46%;

  touch-action: pan-y;

  user-select: none;
  -webkit-user-select: none;
}


/* ESCENARIO */

.releases .coverflow--releases
.coverflow-stage,
.releases .coverflow--releases
.coverflow-track {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  transform-style:
    preserve-3d;
}


/* IMPORTANTE:
   el escenario no debe bloquear
   el click de las flechas */

.releases .coverflow--releases
.coverflow-stage,
.releases .coverflow--releases
.coverflow-track {
  pointer-events: none;
}


.releases .coverflow--releases
.coverflow-stage {
  z-index: 3;

  transform:
    translateY(18px);
}


/* =========================================================
   RELEASE ITEMS
========================================================= */

.releases .coverflow-item--release {
  position: absolute !important;

  top: 50% !important;
  left: 50% !important;

  width: 220px !important;
  height: 220px !important;

  aspect-ratio:
    1 / 1;

  margin: 0 !important;

  filter: none !important;

  backface-visibility:
    hidden;

  -webkit-backface-visibility:
    hidden;

  transform-origin:
    center center;

  pointer-events: auto;

  cursor: pointer;

  user-select: none;
  -webkit-user-select: none;
}


.releases .coverflow-item--release img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;

  filter: none !important;

  opacity: 1 !important;

  image-rendering:
    auto;

  backface-visibility:
    hidden;

  -webkit-backface-visibility:
    hidden;

  pointer-events: none;

  -webkit-user-drag:
    none;
}


/* =========================================================
   ACTIVE RELEASE
========================================================= */

.releases
.coverflow-item--release.is-active {
  transform:
    translate(-50%, -50%) !important;

  opacity: 1 !important;

  filter: none !important;

  z-index: 120 !important;

  box-shadow:
    0 24px 50px
    rgba(0,0,0,.18);
}


.releases
.coverflow-item--release.is-active img {
  transform: none !important;

  filter: none !important;
}


/* =========================================================
   LIGHT / PEDESTAL
========================================================= */

.releases
.coverflow--releases
.coverflow-spotlight {
  position: absolute;

  z-index: 0;

  left: 50% !important;
  top: 63% !important;

  width: 430px !important;
  height: 190px !important;

  transform:
    translate(-50%, -50%) !important;

  opacity: .40 !important;

  pointer-events: none;
}


.releases
.coverflow--releases
.coverflow-pedestal {
  position: absolute;

  z-index: 1;

  left: 50% !important;
  bottom: 0 !important;

  width: 230px !important;
  height: 30px !important;

  transform:
    translateX(-50%)
    rotateX(72deg) !important;

  opacity: .55 !important;

  pointer-events: none;
}


/* =========================================================
   ARROWS — SIEMPRE CLICKEABLES
========================================================= */

.releases
.coverflow--releases
.coverflow-prev,

.releases
.coverflow--releases
.coverflow-next {
  position: absolute !important;

  top: 50% !important;

  z-index: 300 !important;

  width: 44px;
  height: 44px;

  padding: 0;

  display: flex !important;

  align-items: center;
  justify-content: center;

  transform:
    translateY(-50%) !important;

  border: 0;

  border-radius: 50%;

  background:
    rgba(5,5,5,.58);

  color: #fff;

  cursor: pointer !important;

  pointer-events: auto !important;

  touch-action:
    manipulation;

  transition:
    background .2s ease,
    transform .2s ease,
    color .2s ease;
}


.releases
.coverflow--releases
.coverflow-prev {
  left: 3% !important;
}


.releases
.coverflow--releases
.coverflow-next {
  right: 3% !important;
}


.releases
.coverflow--releases
.coverflow-prev:hover,

.releases
.coverflow--releases
.coverflow-next:hover {
  background:
    #ff1717;

  color:
    #fff;
}


.releases
.coverflow--releases
.coverflow-prev:active,

.releases
.coverflow--releases
.coverflow-next:active {
  transform:
    translateY(-50%)
    scale(.94) !important;
}


/* =========================================================
   INFORMATION — DEBAJO DE LA TAPA ACTIVA
========================================================= */

.releases .release-info {
  grid-column: 1 !important;
  grid-row: 3 !important;

  position: relative;

  z-index: 20;

  width:
    min(680px, 84%);

  margin:
    0 auto !important;

  padding:
    0 !important;

  justify-self:
    center;

  align-self:
    start;

  text-align:
    center;
}


.releases .release-label {
  display: block;

  margin:
    0 0 6px;

  text-align:
    center;
}


.releases .release-info h3 {
  max-width:
    680px !important;

  margin:
    0 auto !important;

  font-size:
    clamp(
      30px,
      2.7vw,
      42px
    ) !important;

  line-height:
    .87 !important;

  text-align:
    center;
}


.releases .release-mix {
  margin-top:
    5px !important;

  text-align:
    center;
}


.releases .release-secondary {
  margin-top:
    7px;

  display: flex;

  align-items: center;
  justify-content: center;

  flex-wrap:
    wrap;

  gap: 9px;

  text-align:
    center;
}


.releases .platforms {
  margin-top:
    11px;

  display: flex;

  align-items: center;
  justify-content: center;

  flex-wrap:
    wrap;

  gap: 10px;
}


/* =========================================================
   COUNTER
========================================================= */

.releases .release-counter {
  grid-column: 1 !important;
  grid-row: 4 !important;

  width:
    min(680px, 84%);

  margin:
    14px auto 0 !important;

  padding:
    9px 0 0;

  justify-self:
    center;

  text-align:
    center;

  border-top:
    1px solid
    rgba(5,5,5,.20);

  border-bottom:
    0;
}


/* =========================================================
   TABLET
========================================================= */

@media
(min-width: 901px)
and
(max-width: 1120px) {

  .releases {
    min-height:
      620px;
  }


  .releases
  .release-content {
    grid-template-rows:
      auto
      285px
      auto
      auto;
  }


  .releases
  .coverflow--releases {
    width:
      min(
        760px,
        calc(100% - 34px)
      );

    height:
      285px;
  }


  .releases
  .coverflow--releases
  .coverflow-stage {
    transform:
      translateY(16px);
  }


  .releases
  .coverflow-item--release {
    width:
      205px !important;

    height:
      205px !important;
  }


  .releases
  .release-info {
    width:
      min(620px, 90%);
  }


  .releases
  .release-info h3 {
    max-width:
      620px !important;

    font-size:
      clamp(
        30px,
        4vw,
        40px
      ) !important;
  }


  .releases
  .release-filters {
    gap:
      18px;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media
(max-width: 900px) {

  .releases {
    min-height:
      auto;
  }


  .releases
  .release-content {
    grid-column:
      auto;

    width:
      100%;

    display:
      block;

    overflow:
      visible;
  }


  .releases
  .release-filters {
    width:
      100%;

    margin:
      0 0 16px;

    padding-bottom:
      10px;

    gap:
      20px;

    overflow-x:
      auto;

    white-space:
      nowrap;

    scrollbar-width:
      none;
  }


  .releases
  .release-filters::-webkit-scrollbar {
    display:
      none;
  }


  .releases
  .release-filter {
    flex:
      0 0 auto;
  }


  .releases
  .coverflow--releases {
    width:
      calc(100% + 28px);

    height:
      325px;

    margin-left:
      -14px;

    overflow:
      hidden;

    touch-action:
      pan-y;
  }


  .releases
  .coverflow--releases
  .coverflow-stage {
    transform:
      translateY(8px);
  }


  .releases
  .coverflow-item--release {
    width:
      min(
        62vw,
        260px
      ) !important;

    height:
      min(
        62vw,
        260px
      ) !important;
  }


  .releases
  .coverflow--releases
  .coverflow-spotlight {
    width:
      330px !important;

    height:
      170px !important;

    top:
      64% !important;
  }


  .releases
  .coverflow--releases
  .coverflow-pedestal {
    width:
      190px !important;
  }


  .releases
  .coverflow--releases
  .coverflow-prev {
    left:
      14px !important;

    z-index:
      300 !important;
  }


  .releases
  .coverflow--releases
  .coverflow-next {
    right:
      14px !important;

    z-index:
      300 !important;
  }


  .releases
  .release-info {
    width:
      100%;

    margin:
      8px auto 0 !important;

    padding:
      0 6px !important;
  }


  .releases
  .release-info h3 {
    max-width:
      100% !important;

    font-size:
      clamp(
        40px,
        11vw,
        62px
      ) !important;

    line-height:
      .88 !important;
  }


  .releases
  .release-counter {
    width:
      100%;

    margin-top:
      20px !important;
  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media
(max-width: 550px) {

  .releases
  .coverflow--releases {
    height:
      305px;
  }


  .releases
  .coverflow-item--release {
    width:
      min(
        64vw,
        235px
      ) !important;

    height:
      min(
        64vw,
        235px
      ) !important;
  }


  .releases
  .release-info h3 {
    font-size:
      clamp(
        38px,
        12vw,
        54px
      ) !important;
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media
(prefers-reduced-motion: reduce) {

  .releases
  .coverflow-item--release,

  .releases
  .release-info {
    transition:
      none !important;
  }

}
/* =========================================================
   04 — RELEASES / EDITORIAL DESKTOP V2
========================================================= */

@media (min-width: 901px) {

  /* =====================================================
     ESTRUCTURA GENERAL
  ===================================================== */

  #releases {
    min-height: 0 !important;

    --release-cover-size:
      clamp(255px, 20vw, 300px);

    display: grid !important;

    grid-template-columns:
      minmax(190px, 230px)
      minmax(0, 1fr) !important;

    column-gap:
      clamp(30px, 4vw, 64px) !important;

    align-items: start !important;

    padding:
      28px
      28px
      34px !important;
  }


  /* =====================================================
     COLUMNA IZQUIERDA
  ===================================================== */

  #releases .section-title-block {
    grid-column: 1 !important;

    width: 100%;
    max-width: 220px;

    padding-top: 14px !important;
  }

  #releases .section-title-block h2 {
    font-size:
      clamp(58px, 5vw, 76px) !important;

    line-height: .80 !important;
  }

  #releases .section-title-block .outline-button {
    margin-top: 22px !important;
  }


  /* =====================================================
     COLUMNA DERECHA
  ===================================================== */

  #releases .release-content {
    grid-column: 2 !important;

    width: 100% !important;

    display: grid !important;

    grid-template-columns:
      minmax(0, 1fr) !important;

    grid-template-rows:
      auto
      auto
      auto
      auto !important;

    row-gap: 0 !important;

    align-items: start !important;
  }


  /* FILTROS */
  #releases .release-filters {
    grid-column: 1 !important;
    grid-row: 1 !important;

    margin:
      0
      0
      12px !important;

    padding-bottom:
      10px !important;
  }


  /* =====================================================
     COVERFLOW
  ===================================================== */

  #releases .coverflow--releases {
    grid-column: 1 !important;
    grid-row: 2 !important;

    width: 100% !important;

    margin: 0 !important;
  }


  /* =====================================================
     CONTADOR JUSTO DEBAJO DEL CARRUSEL
  ===================================================== */

  #releases .release-counter {
    grid-column: 1 !important;
    grid-row: 3 !important;

    justify-self: center !important;

    margin:
      2px
      0
      0 !important;

    padding: 0 !important;

    font-size: 8px !important;
  }


  /* =====================================================
     INFO DEL RELEASE
  ===================================================== */

  #releases .release-info {
    grid-column: 1 !important;
    grid-row: 4 !important;

    width:
      min(100%, 720px) !important;

    justify-self: center !important;

    padding:
      12px
      0
      0 !important;

    text-align: center;
  }

  #releases .release-label {
    margin-bottom:
      7px !important;
  }


  /* ARTISTA — SECUNDARIO */
  #releases .release-artists {
    font-size:
      clamp(25px, 2.2vw, 36px) !important;

    line-height: .92 !important;
  }


  /* TRACK — PROTAGONISTA */
  #releases .release-track {
    font-size:
      clamp(38px, 3.4vw, 54px) !important;

    line-height: .86 !important;
  }

  #releases .release-info h3 {
    max-width: none !important;

    margin: 0 !important;

    line-height: .88 !important;
  }


  #releases .release-mix {
    margin-top:
      7px !important;
  }

  #releases .release-secondary {
    justify-content: center !important;

    margin-top:
      7px !important;
  }

  #releases .platforms {
    justify-content: center !important;

    margin-top:
      12px !important;
  }
}

/* =========================================================
   RELEASES — COMPACTO + GLOW REAL POR PORTADA
   OVERRIDE FINAL
========================================================= */

@media (min-width: 901px) {

  /* =====================================================
     1. COMPRIMIR TODA LA SECCIÓN
  ===================================================== */

  #releases {
    min-height: 0 !important;

    padding:
      18px
      28px
      18px !important;

    --release-cover-size:
      clamp(225px, 18vw, 255px) !important;
  }


  /* IZQUIERDA */
  #releases .section-title-block {
    padding-top: 4px !important;
  }

  #releases .section-title-block h2 {
    font-size:
      clamp(54px, 4.6vw, 70px) !important;

    line-height: .79 !important;
  }

  #releases .section-title-block .outline-button {
    margin-top: 14px !important;
  }


  /* =====================================================
     2. FILTROS MÁS CERCA DEL CARRUSEL
  ===================================================== */

  #releases .release-filters {
    margin:
      0
      0
      2px !important;

    padding-bottom:
      8px !important;
  }


  /* =====================================================
     3. COVERFLOW MÁS BAJO
  ===================================================== */

  #releases .coverflow--releases {
    position: relative !important;

    height: 270px !important;
    min-height: 270px !important;

    margin: 0 !important;

    overflow: visible !important;
  }

  #releases .coverflow-stage {
    height: 250px !important;
    min-height: 250px !important;

    overflow: visible !important;
  }

  #releases .coverflow-track {
    height: 100% !important;

    overflow: visible !important;
  }

  /* =====================================================
     6. INFORMACIÓN MÁS COMPACTA
  ===================================================== */

  #releases .release-info {
    padding-top:
      3px !important;

    width:
      min(100%, 660px) !important;
  }

  #releases .release-label {
    margin-bottom:
      5px !important;

    font-size:
      8px !important;
  }


  #releases .release-artists {
    font-size:
      clamp(23px, 2vw, 31px) !important;

    line-height:
      .88 !important;
  }


  #releases .release-track {
    font-size:
      clamp(31px, 2.8vw, 43px) !important;

    line-height:
      .84 !important;
  }


  #releases .release-info h3 {
    line-height:
      .84 !important;
  }


  #releases .release-mix {
    margin-top:
      4px !important;

    font-size:
      7px !important;
  }


  #releases .release-secondary {
    margin-top:
      4px !important;

    font-size:
      7px !important;
  }


  /* =====================================================
     7. BOTONES MÁS BAJOS
  ===================================================== */

  #releases .platforms {
    margin-top:
      8px !important;

    gap:
      8px !important;
  }

  #releases .platform-link {
    min-height:
      34px !important;

    padding:
      7px
      13px !important;

    font-size:
      7px !important;
  }


  /* =====================================================
     8. CONTADOR CERCA DEL CONTENIDO
  ===================================================== */

  #releases .release-counter {
    margin:
      7px
      0
      0 !important;

    padding:
      0 !important;

    font-size:
      8px !important;
  }
}
/* =========================================================
   RELEASES — PLATFORM BUTTONS / ICONS ALWAYS VISIBLE
========================================================= */

#releases .platform-link {
  min-width: 90px !important;
  min-height: 34px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  gap: 9px !important;

  padding: 7px 13px !important;

  background: transparent !important;
  border: 1px solid rgba(255,255,255,.28) !important;

  color: #f5f5f2 !important;
}


/* LOGO VISIBLE SIEMPRE SOBRE FONDO NEGRO */
#releases .platform-link img {
  width: 15px !important;
  height: 15px !important;

  object-fit: contain !important;

  opacity: 1 !important;

  filter:
    brightness(0)
    invert(1) !important;

  transition:
    filter .2s ease,
    opacity .2s ease !important;
}


/* HOVER */
#releases .platform-link:hover {
  background: #f5f5f2 !important;
  border-color: #f5f5f2 !important;

  color: #050505 !important;
}


/* AL PASAR EL MOUSE, LOGO NEGRO */
#releases .platform-link:hover img {
  filter:
    brightness(0)
    invert(0) !important;

  opacity: 1 !important;
}


/* MOBILE / TOUCH — SIEMPRE BLANCO */
@media (hover: none) {

  #releases .platform-link img {
    filter:
      brightness(0)
      invert(1) !important;
  }

  #releases .platform-link:hover img {
    filter:
      brightness(0)
      invert(1) !important;
  }
}
/* =========================================================
   RELEASES — PLATFORM BUTTONS FINAL
========================================================= */

#releases .platform-link {
  min-width: 90px !important;
  min-height: 34px !important;

  padding: 7px 13px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  gap: 9px !important;

  background: #f5f5f2 !important;
  border: 1px solid #f5f5f2 !important;

  color: #050505 !important;

  transition:
    transform .2s ease,
    background .2s ease,
    border-color .2s ease !important;
}


/* LOGOS NEGROS Y VISIBLES SIEMPRE */
#releases .platform-link img {
  display: block !important;

  width: 15px !important;
  height: 15px !important;

  opacity: 1 !important;

  filter: none !important;

  visibility: visible !important;
}


/* TEXTO */
#releases .platform-link span {
  color: #050505 !important;
}


/* HOVER SUTIL */
#releases .platform-link:hover {
  background: #ffffff !important;
  border-color: #ffffff !important;

  color: #050505 !important;

  transform: translateY(-2px);
}


/* EL LOGO SIGUE NEGRO EN HOVER */
#releases .platform-link:hover img {
  filter: none !important;
  opacity: 1 !important;
}