/* ══════════════════ ROWS ══════════════════ */

.rows { padding-top: 20px; }

.row { margin-bottom: var(--row-gap); }

.row__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 25px;
  margin-bottom: 10px;
}

.row__title {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding-left: 5px;
  font-size: 19.2px;
  line-height: 1.2;
  font-weight: 600;
  color: var(--ink-strong);
}

.row__title img { width: 19px; height: 19px; }

.row__tools { display: flex; align-items: center; gap: 3px; }

.row__all {
  display: inline-flex;
  align-items: center;
  height: 25px;
  padding-inline: 10px;
  border-radius: 5px;
  background: var(--indigo);
  font-size: 12px;
  color: #fff;
  white-space: nowrap;
}

.row__nav { display: flex; gap: 3px; }

.row__arrow {
  width: 25px;
  height: 25px;
  padding: 0;
  border-radius: 5px;
  background: var(--indigo) center / 25px 25px no-repeat;
  transition: opacity .15s;
}

.row__arrow--prev { background-image: url("../assets/icons/arrow-prev.svg"); }
.row__arrow--next { background-image: url("../assets/icons/arrow-next.svg"); rotate: 180deg; }
.row__arrow.swiper-button-disabled { opacity: .4; cursor: default; }
.row__arrow.swiper-button-lock { display: none; }

.row__swiper { overflow: hidden; }
.row__swiper .swiper-slide { height: auto; }

/* ── cards ─────────────────────────────────── */

.card {
  position: relative;
  display: block;
  height: 100%;
  border-radius: var(--radius-card);
  overflow: hidden;
}

.card__media { position: relative; display: block; overflow: hidden; }

.card__overlay {
  position: absolute;
  inset: 0;
  background: url("../assets/icons/play.svg") center / 40px auto no-repeat, rgba(17, 17, 26, .8);
  opacity: 0;
  transition: opacity .18s;
}

.card:hover .card__overlay,
.ranked__item:hover .card__overlay { opacity: 1; }

/* poster / wide — artwork only */
.card--poster img { width: 100%; aspect-ratio: 190.4 / 279.58; object-fit: cover; }
.card--wide   img { width: 100%; aspect-ratio: 389.59 / 168.36; object-fit: cover; }

/* thumbnail + caption */
.card--thumb { background: #fff; }

.card--thumb .card__media {
  border-radius: var(--radius-card) var(--radius-card) 0 0;
}

.card--thumb img { width: 100%; aspect-ratio: 190.4 / 142.5; object-fit: cover; }

.card__caption {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-height: 47px;
  padding: 8px 10px;
}

.card__name,
.card__provider {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink);
}

.card__name     { font-size: 12.8px; }
.card__provider { font-size: 11.2px; opacity: .8; }

/* progressive jackpot — the artwork deliberately breaks out of the frame,
   so the media box stays transparent */
.card--jackpot { border-radius: 0; padding-bottom: 5px; overflow: visible; }

.card--jackpot .card__media { border-radius: 20px; }

.card--jackpot img { width: 100%; aspect-ratio: 190.4 / 279.17; object-fit: cover; }

/* board shows these six tiles with the artwork missing — keep the slot legible */
.card__fallback {
  display: grid;
  place-items: start;
  aspect-ratio: 190.4 / 279.17;
  padding: 14px 16px;
  background: linear-gradient(160deg, #33365a, var(--ink));
  font-size: 16px;
  line-height: 18.4px;
  color: #fff;
}

.card__jackpot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  place-items: center;
  min-height: 35px;
  padding: 10px;
  border-radius: 0 0 6px 6px;
  background: var(--pink);
  font-size: 12.8px;
  line-height: 14.72px;
  color: #fff;
}

/* studio tile */
.card--studio {
  position: relative;
  padding: 10px;
  background: var(--ink);
  isolation: isolate;
}

.card--studio::before {                 /* decorative corner glow from the board */
  content: "";
  position: absolute;
  top: -50px;
  left: -50px;
  width: 100px;
  height: 100px;
  background: linear-gradient(141.8deg, #fff 53.97%, #1638b1 86%);
  filter: blur(34px);
  z-index: -1;
}

.card__logo { display: block; padding-bottom: 5px; }
.card__logo img { width: 100%; aspect-ratio: 168.4 / 50; object-fit: contain; }

.card__slot { position: relative; display: block; padding-bottom: 5px; }
.card__slot > img { width: 100%; aspect-ratio: 168.4 / 70; object-fit: cover; }

.card__overlay--pink {
  inset: 0 0 5px 0;
  background: url("../assets/icons/play-pink.svg") center / 40px auto no-repeat, rgba(17, 17, 26, .55);
}

.card--studio:hover .card__overlay--pink { opacity: 1; }

.card__studio-name {
  display: block;
  padding: 10px 5px;
  border-radius: 100px;
  font-size: 12px;
  text-align: center;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── "Top novedades" ranked row ─────────────── */

.ranked {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  padding-left: 48px;
}

.ranked__item {
  position: relative;
  display: block;
  border-radius: var(--radius-card);
}

.ranked__num {
  position: absolute;
  left: -48px;
  top: 8%;
  width: 50px;
  text-align: center;
  font-size: 108.8px;
  line-height: 125px;
  font-weight: 700;
  letter-spacing: -16px;
  color: var(--ink);
  opacity: .2;
  pointer-events: none;
}

.ranked__media {
  position: relative;
  display: block;
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  overflow: hidden;
}

.ranked__media img { width: 100%; aspect-ratio: 190 / 141.67; object-fit: cover; }

.ranked__num-inline,
.ranked__play { display: none; }

.ranked__caption {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-height: 46px;
  padding: 8px 10px;
  border-radius: 0 0 var(--radius-card) var(--radius-card);
  background: radial-gradient(circle at 50% 0, var(--surface), #fff 70%);
}