/* Block 7: Serials row (like blocks 1-2) */
.adja-row--serials{
  width: 100%;
  margin: 22px 0;

  --row-gap: 18px;
  --row-visible: 7; /* desktop visible count */
  --row-radius: 12px;
}

.adja-row--serials .adja-row__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  margin-bottom: 16px;
}

.adja-row--serials .adja-row__left{
  display:flex;
  align-items:center;
  gap: 18px;
  min-width: 0;
}

.adja-row--serials .adja-row__title{
  margin:0;
  font-size: 20px;
  font-weight: 400;
  color: #ddd;
  white-space: nowrap;
}
.adja-row__tab:not(.is-active) {
    color: var(--dark) !important
}
.adja-row--serials .adja-row__title-link{
  color: var(--gray);
  text-decoration: none;
}
.adja-row--serials .adja-row__title-link:hover{
  text-decoration: none;
}

.adja-row--serials .adja-row__tabs{
  display:flex;
  align-items:center;
  gap: 10px;
}

.adja-row--serials .adja-row__tab{
  appearance:none;
  border:0;
  background:none;
  color:#D5DDF5;
  font-size:14px;
  font-weight:400;
  padding: 6px 10px;
  border-radius: 6px;
  cursor:pointer;
  line-height:1;
}
.adja-row--serials .adja-row__tab.is-active{
  background: var(--adjaranet-color);
  color:#fff;
}

.adja-row--serials .adja-row__arrows{
  display:flex;
  gap:10px;
  align-items:center;
}
.adja-row--serials .adja-row__arrow{
  width: 30px;
  height: 30px;
  border:0;
  background: transparent;
  color: var(--heading-color);
  font-size: 28px;
  line-height: 1;
  cursor:pointer;
  opacity: .9;
}
.adja-row--serials .adja-row__arrow:hover{
  color: var(--adjaranet-color);
}

/* Panels */
.adja-row--serials .adja-row__panel[hidden]{ display:none; }

/* Viewport/track */
.adja-row--serials .adja-row__viewport{
  width: 100%;
  overflow: hidden; /* desktop: hide overflow */
}

.adja-row--serials .adja-row__track{
  display:flex;
  gap: var(--row-gap);
  align-items: stretch;
  /* mobile scroll uses scrollLeft; keep it flex always */
}

/* Item sizing (7 desktop, 5 tablet, 3 mobile) */
.adja-row--serials .adja-row__item{
  flex: 0 0 calc((100% - (var(--row-gap) * (var(--row-visible) - 1))) / var(--row-visible));
  border-radius: var(--row-radius);
}

/* Make posters/cards uniform */
.adja-row--serials .adja-row__item{
  aspect-ratio: 2 / 3; /* uniform poster shape */
}

.adja-row--serials .adja-card,
.adja-row--serials .adja-card__poster,
.adja-row--serials .adja-card__poster img,
.adja-row--serials .adja-card img{
  width:100% !important;
  height:100% !important;
}
.adja-row--serials .adja-card__poster img,
.adja-row--serials img{
  object-fit: cover;
  display:block;
}

/* Empty */
.adja-row--serials .adja-row__empty{
  margin: 10px 0;
  color: #fff;
  opacity: .85;
}

/* Responsive */
@media (max-width: 1100px){
  .adja-row--serials{
    --row-visible: 5;
    --row-gap: 14px;
  }
  .adja-row--serials .adja-row__title{ font-size: 18px; }
}

@media (max-width: 768px){
  .adja-row--serials{
    --row-visible: 3;     /* ✅ mobile: 3 visible */
    --row-gap: 12px;
  }

  .adja-row--serials .adja-row__head{
    align-items:flex-start;
  }
  .adja-row--serials .adja-row__left{
    flex-direction: column;
    align-items:flex-start;
  }

  /* ✅ mobile: allow horizontal scroll */
  .adja-row--serials .adja-row__viewport{
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;

    /* scrollbar style (fits your style) */
    scrollbar-width: thin;
    scrollbar-color: var(--adjaranet-color) rgba(255,255,255,.14);
  }
  .adja-row--serials .adja-row__viewport::-webkit-scrollbar{ height: 8px; }
  .adja-row--serials .adja-row__viewport::-webkit-scrollbar-track{
    background: rgba(255,255,255,.14);
    border-radius: 999px;
  }
  .adja-row--serials .adja-row__viewport::-webkit-scrollbar-thumb{
    background: var(--adjaranet-color);
    border-radius: 999px;
    border: 2px solid rgba(0,0,0,.25);
  }

  .adja-row--serials .adja-row__item{
    scroll-snap-align: start;
  }
}
