.topbar--with-films { gap: 26px; }

.cinema-film-tabs {
  display: flex;
  align-items: center;
  align-self: stretch;
  gap: 16px;
  flex: 0 0 auto;
}

.cinema-film-tab {
  position: relative;
  border: 0;
  padding: 0 2px;
  background: none;
  color: #686d77;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.cinema-film-tab:hover,
.cinema-film-tab.is-active { color: var(--red); }

.cinema-film-tab.is-active::after {
  content: '';
  position: absolute;
  height: 3px;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 3px;
  background: var(--red);
}

.cinema-films { scroll-margin-top: 24px; }
.cinema-films-count { color: #9297a1; font-size: 12px; white-space: nowrap; }
.cinema-films-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 22px 14px; }

.cinema-film-card { display: block; min-width: 0; }
.cinema-film-poster {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  aspect-ratio: 2 / 3;
  border-radius: 9px;
  background: linear-gradient(145deg, #273040, #57647a);
  box-shadow: 0 4px 13px rgba(18, 25, 40, .12);
  transition: transform .2s ease, box-shadow .2s ease;
}

.cinema-film-card:hover .cinema-film-poster,
.cinema-film-card:focus-visible .cinema-film-poster {
  transform: translateY(-4px);
  box-shadow: 0 10px 22px rgba(18, 25, 40, .2);
}

.cinema-film-poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .3s ease; }
.cinema-film-poster img.is-loaded { opacity: 1; }
.cinema-film-fallback { padding: 12px; color: #fff; font-weight: 700; text-align: center; word-break: break-word; }
.cinema-film-rank { position: absolute; top: 9px; left: 9px; padding: 4px 7px; border-radius: 5px; background: var(--red); color: #fff; font-size: 10px; font-weight: 800; }
.cinema-film-name { display: block; overflow: hidden; margin-top: 9px; font-size: 13px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.cinema-films-status { margin: 0; padding: 18px 0; color: #9297a1; font-size: 12px; }
.cinema-films-status[hidden] { display: none; }

@media (max-width: 1100px) {
  .topbar--with-films { height: auto; min-height: 70px; flex-wrap: wrap; gap: 0 24px; padding-top: 8px; padding-bottom: 8px; }
  .cinema-film-tabs { order: 4; width: 100%; height: 35px; gap: 22px; }
  .cinema-films-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  .topbar--with-films { gap: 0 10px; }
  .cinema-film-tabs { height: 34px; gap: 20px; }
  .cinema-film-tab { font-size: 12px; }
  .cinema-films-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 10px; }
  .cinema-films-count { display: none; }
}

.cinema-film-skeleton .cinema-film-poster,
.cinema-film-poster.is-loading {
  background: #e5e8ed;
  box-shadow: none;
}
.cinema-film-skeleton .cinema-film-poster::after,
.cinema-film-poster.is-loading::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.6) 50%, transparent 80%);
  transform: translateX(-100%);
  animation: cinema-skeleton 1.5s infinite;
}
.cinema-film-skeleton .cinema-film-name { width: 70%; border-radius: 4px; background: #e5e8ed; }
.cinema-film-poster.is-loading .cinema-film-fallback { visibility: hidden; }
.cinema-film-skeleton:hover .cinema-film-poster { transform: none; box-shadow: none; }
@keyframes cinema-skeleton { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) {
  .cinema-film-skeleton .cinema-film-poster::after,
  .cinema-film-poster.is-loading::after { animation: none; }
  .cinema-film-poster img { transition: none; }
}