/* Block 6: Trending */
.adja-trend{
  width:100%;
  overflow:hidden;
  margin: 22px 0;
  margin-bottom: 40px;

  --trend-gap: 12px;

  /* small poster row height (max ~274px) */
  --trend-row: clamp(140px, 16vw, 274px);
}

.adja-trend__inner{
  background: linear-gradient(90deg, rgba(10,30,34,.88), rgba(14,55,70,.88));
  border-radius: 10px;
  padding: 18px 18px 16px;
}

.adja-trend__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom: 20px;
}

.adja-trend__left{
  display:flex;
  align-items:center;
  gap:18px;
  min-width:0;
}

.adja-trend__title{
  margin:0;
  font-size: 20px;
  font-weight: 400;
  color: #ddd;
  white-space:nowrap;
}

.adja-trend__title-link{
  color: inherit;
  text-decoration: none;
}
.adja-trend__title-link:hover{ text-decoration: none; }

.adja-trend__tabs{
  display:flex;
  align-items:center;
  gap:10px;
}

.adja-trend__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-trend__tab.is-active{
  background: var(--adjaranet-color);
  color:#fff;
}

.adja-trend__arrows{
  display:flex;
  gap:10px;
  align-items:center;
}
.adja-trend__arrow{
  width: 30px;
  height: 30px;
  border:0;
  background: transparent;
  color:#fff;
  font-size: 28px;
  line-height: 1;
  cursor:pointer;
  opacity: .9;
}
.adja-trend__arrow:hover{ color: var(--adjaranet-color); }
.adja-trend__arrow[disabled]{ opacity:.35; cursor:not-allowed; }

/* Panels */
.adja-trend__panel{ outline:none; }
.adja-trend__panel[hidden]{ display:none; }

/* Carousel viewport/track/pages (desktop: transform carousel) */
.adja-trend__viewport{
  width:100%;
  overflow:hidden;
}
.adja-trend__track{
  display:flex;
  width:100%;
  transition: transform .35s ease;
  will-change: transform;
}
.adja-trend__page{ flex: 0 0 100%; }

/* Grid */
.adja-trend__grid{
  display:grid;
  gap: var(--trend-gap);
}

/* First page mosaic + next pages normal */
.adja-trend__grid--mosaic,
.adja-trend__grid--normal{
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-auto-rows: var(--trend-row);
  align-content:start;
}

.adja-trend__cell{
  border-radius: 8px;
  overflow: visible; /* panel can go outside */
  min-width: 0;
}

/* big (2x2 => ~562px max) */
.adja-trend__cell.is-big{
  grid-column: 1 / span 2;
  grid-row: 1 / span 2;
  min-height: calc(var(--trend-row) * 2 + var(--trend-gap));
}

/* =========================
   IMPORTANT FIXES (your screenshot)
   ========================= */

/* 1) DO NOT force all images/svgs to 100% height (that was causing huge white blocks/icons)
   We only force the POSTER image to fill the poster box */
.adja-trend .adja-card{
  display:block;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  position: relative;
}

/* keep poster clipped with radius */
.adja-trend .adja-card__poster{
  width:100% !important;
  height:100% !important;
  border-radius: 8px;
  overflow:hidden;
  background: rgba(255,255,255,.06); /* nicer placeholder */
}

/* Only poster img fills the box */
.adja-trend .adja-card__poster > img{
  width:100% !important;
  height:100% !important;
  display:block;
  object-fit: cover;
}

/* avoid svg/icon stretching inside card/panel */
.adja-trend svg,
.adja-trend .menu-item-icon,
.adja-trend .adja-card__panel svg{
  width:auto !important;
  height:auto !important;
  max-width:100%;
  max-height:100%;
}



/* show on hover/focus */
.adja-trend .adja-card:hover .adja-card__panel,
.adja-trend .adja-card:focus-within .adja-card__panel{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform: translateX(0);
}

/* open panel to LEFT for last columns (7-col layout) */
.adja-trend__grid--mosaic .adja-trend__cell:nth-child(7n)  .adja-card__panel,
.adja-trend__grid--mosaic .adja-trend__cell:nth-child(7n-1) .adja-card__panel,
.adja-trend__grid--normal .adja-trend__cell:nth-child(7n)  .adja-card__panel,
.adja-trend__grid--normal .adja-trend__cell:nth-child(7n-1) .adja-card__panel{
  left:auto !important;
  right: calc(100% + 12px);
  transform: translateX(-8px);
}
.adja-trend__grid--mosaic .adja-trend__cell:nth-child(7n):hover .adja-card__panel,
.adja-trend__grid--mosaic .adja-trend__cell:nth-child(7n-1):hover .adja-card__panel,
.adja-trend__grid--normal .adja-trend__cell:nth-child(7n):hover .adja-card__panel,
.adja-trend__grid--normal .adja-trend__cell:nth-child(7n-1):hover .adja-card__panel{
  transform: translateX(0);
}

/* Empty */
.adja-trend__empty{
  margin: 18px 0;
  color:#fff;
  opacity:.85;
}

/* Tablet */
@media (max-width: 1100px){
  .adja-trend__left{ gap:12px; }
  .adja-trend__title{ font-size: 18px; }

  .adja-trend__grid--mosaic,
  .adja-trend__grid--normal{
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  /* adjust "open to left" for 5 columns */
  .adja-trend__grid--mosaic .adja-trend__cell:nth-child(5n)  .adja-card__panel,
  .adja-trend__grid--mosaic .adja-trend__cell:nth-child(5n-1) .adja-card__panel,
  .adja-trend__grid--normal .adja-trend__cell:nth-child(5n)  .adja-card__panel,
  .adja-trend__grid--normal .adja-trend__cell:nth-child(5n-1) .adja-card__panel{
    left:auto !important;
    right: calc(100% + 12px);
    transform: translateX(-8px);
  }
}

/* =========================
   MOBILE: show 3 posters, scroll horizontally
   ========================= */
@media (max-width: 768px){

  /* hide arrows on mobile (scroll instead) */
  .adja-trend__arrows{ display:none; }

  /* make viewport a horizontal scroller */
  .adja-trend__viewport{
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .adja-trend__viewport::-webkit-scrollbar{ display:none; }

  /* disable transform carousel on mobile */
  .adja-trend__track{
    transform:none !important;
    transition:none !important;
    will-change: auto;
    display:block;
  }

  /* flatten pages so items become one continuous row */
  .adja-trend__page{ display: contents; }

  /* one-row flex */
  .adja-trend__grid{
    display:flex;
    flex-wrap:nowrap;
    gap: var(--trend-gap);
    padding-bottom: 6px;
  }

  /* 3 visible cards */
  .adja-trend__cell{
    flex: 0 0 calc((100% - (var(--trend-gap) * 2)) / 3);
    scroll-snap-align: start;
  }

  /* mobile: all same size */
  .adja-trend__cell.is-big{
    flex-basis: calc((100% - (var(--trend-gap) * 2)) / 3);
    min-height: unset;
  }

  /* consistent poster ratio */
  .adja-trend .adja-card,
  .adja-trend .adja-card__poster{
    height:auto !important;
  }
  .adja-trend .adja-card__poster{
    aspect-ratio: 2 / 3;
  }
  .adja-trend .adja-card__poster > img{
    height:100% !important;
  }

  /* panel off on mobile (hover doesn’t make sense) */
  .adja-trend .adja-card__panel{ display:none !important; }

  /* header stack */
  .adja-trend__head{ align-items:flex-start; }
  .adja-trend__left{
    flex-direction:column;
    align-items:flex-start;
  }
}


/* keep your requested clamp */
.adja-trend{
  --trend-row: clamp(140px, 18vw, 274px);
}

/* Mosaic grid: horizontal scroll + styled scrollbar */
@media (max-width: 768px){

  /* only mosaic should scroll */
  .adja-trend__grid.adja-trend__grid--mosaic{
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;

    /* optional: nicer inner spacing for the bar */
    padding-bottom: 10px;

    /* snap feels good on mobile */
    scroll-snap-type: x mandatory;

    /* Firefox scrollbar */
    scrollbar-width: thin;
    scrollbar-color: var(--adjaranet-color) rgba(255,255,255,.14);
  }

  /* WebKit scrollbar (Chrome/Edge/Safari) */
  .adja-trend__grid.adja-trend__grid--mosaic::-webkit-scrollbar{
    height: 8px;
  }
  .adja-trend__grid.adja-trend__grid--mosaic::-webkit-scrollbar-track{
    background: rgba(255,255,255,.14);
    border-radius: 999px;
  }
  .adja-trend__grid.adja-trend__grid--mosaic::-webkit-scrollbar-thumb{
    background: var(--adjaranet-color);
    border-radius: 999px;
    border: 2px solid rgba(0,0,0,.25);
  }
  .adja-trend__grid.adja-trend__grid--mosaic::-webkit-scrollbar-thumb:hover{
    background: rgba(245,110,15,.95);
  }

  /* IMPORTANT: mosaic grid must be a horizontal row for overflow to work */
  .adja-trend__grid.adja-trend__grid--mosaic{
    display: flex;
    flex-wrap: nowrap;
    gap: var(--trend-gap);
  }

  /* 3 visible items in viewport */
  .adja-trend__grid.adja-trend__grid--mosaic .adja-trend__cell{
    flex: 0 0 calc((100% - (var(--trend-gap) * 2)) / 3);
    scroll-snap-align: start;
  }

  /* big must become normal size on mobile, otherwise it breaks scrolling */
  .adja-trend__grid.adja-trend__grid--mosaic .adja-trend__cell.is-big{
    flex-basis: calc((100% - (var(--trend-gap) * 2)) / 3);
    min-height: unset;
  }
}