/* FOX&fellows — FXF MEDIA */

/* header varianta: oranžový pruh */
.media-band {
  flex: 1; display: flex; align-items: center; justify-content: flex-end;
  background: var(--orange); border-radius: 8px; padding: 4px 8px; height: 28px;
}
.media-band span { font-family: var(--font-x); font-weight: 500; font-size: 16px; color: #fff; letter-spacing: .02em; }
.media-band b { color: var(--ink); font-weight: 500; }

.media-page { padding-top: 40px; padding-bottom: 50px; }
.media-title {
  font-family: var(--font-x); font-weight: 500; font-size: 64px; line-height: 60px;
  color: var(--ink); margin-bottom: 40px;
}
.media-title em { font-style: normal; color: var(--orange); }

.media-row { margin-bottom: 40px; }
.media-row h2 {
  font-family: var(--font-x); font-weight: 300; font-size: 40px; line-height: 44px;
  color: var(--ink); margin-bottom: 40px;
}
.media-scroll {
  display: flex; gap: 18px; overflow-x: auto;
  scrollbar-width: none; padding-bottom: 8px;
}
.media-scroll::-webkit-scrollbar { display: none; }
.media-card { flex: 0 0 280px; cursor: pointer; }
.media-card img {
  width: 280px; height: 158px; object-fit: cover; border-radius: 8px;
  margin-bottom: 18px; transition: opacity .2s;
}
.media-card:hover img { opacity: .85; }
.media-card h3 {
  font-family: var(--font-x); font-weight: 800; font-size: 21px; line-height: 25px;
  color: var(--ink); margin-bottom: 12px;
}
.media-card p { font-family: var(--font-sx); font-weight: 300; font-size: 16px; line-height: 19px; }

/* viewing stav */
.viewing { margin-bottom: 60px; }
.viewing__show {
  font-family: var(--font-x); font-weight: 500; font-size: 64px; line-height: 60px;
  color: var(--orange); margin-bottom: 40px;
}
.viewer { position: relative; background: #000; }
.viewer__poster { width: 100%; aspect-ratio: 1094 / 616; object-fit: cover; opacity: .9; }
.viewer__play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 112px; height: 112px; transition: transform .2s;
}
.viewer__play:hover { transform: translate(-50%, -50%) scale(1.08); }
.viewer__play img { width: 100%; height: 100%; }
.viewing__episode {
  font-family: var(--font-x); font-weight: 300; font-size: 40px; line-height: 44px;
  margin: 40px 0 24px;
}
.viewing__desc { max-width: 1094px; }

@media (max-width: 700px) {
  .media-page { padding-top: 24px; }
  .media-title { font-size: 48px; line-height: 48px; }
  .media-row h2 { font-size: 34px; line-height: 37px; margin-bottom: 24px; }
  .viewing__show { font-size: 48px; line-height: 48px; }
  .viewing__episode { font-size: 34px; line-height: 37px; }
  .viewer__play { width: 72px; height: 72px; }
}