/* ==========================================================================
   Showcase section: MAATI on Warner Bros. Discovery platforms
   All rules scoped under .band--show. No global leakage.
   ========================================================================== */

.band--show {
  background: #0B1020;
  padding: 96px 0;
}

/* ---- Section header ---- */

.band--show .kicker {
  color: #FFE7C7;
}

.band--show h2,
.band--show h3 {
  color: #fff;
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
}

.band--show .section-head p {
  color: rgba(255, 255, 255, .78);
}

/* ---- Streaming app mockup card ---- */

.band--show .show-mock {
  background: #11182C;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
}

.band--show .show-mock__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.band--show .show-wordmark {
  font-family: 'Figtree', sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: #fff;
  letter-spacing: -.01em;
  text-transform: lowercase;
}

.band--show .show-mock__bar img {
  height: 24px;
  width: auto;
  opacity: .9;
}

/* ---- Hero area inside the mockup ---- */

.band--show .show-hero {
  position: relative;
  min-height: 420px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background:
    url('../assets/img/maati-keyart.jpg') center / cover no-repeat,
    linear-gradient(160deg, #1a2440 0%, #0B1020 100%);
}

.band--show .show-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.band--show .show-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, #11182C 0%, rgba(17, 24, 44, .55) 38%, rgba(17, 24, 44, 0) 70%);
  pointer-events: none;
}

.band--show .show-hero__content {
  z-index: 2;
}

.band--show .show-hero__content {
  position: relative;
  padding: 120px 32px 36px;
  max-width: 640px;
}

.band--show .show-hero__origin {
  font-family: 'Figtree', sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #FFE7C7;
  margin: 0 0 12px;
}

.band--show .show-hero__title {
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: clamp(44px, 7vw, 76px);
  line-height: 1;
  letter-spacing: .08em;
  color: #fff;
  margin: 0 0 10px;
}

.band--show .show-hero__sub {
  font-family: 'Figtree', sans-serif;
  font-weight: 600;
  font-size: 18px;
  color: rgba(255, 255, 255, .92);
  margin: 0 0 10px;
}

.band--show .show-hero__meta {
  font-family: 'Figtree', sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: rgba(255, 255, 255, .7);
  margin: 0 0 22px;
}

.band--show .show-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.band--show .show-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Figtree', sans-serif;
  font-weight: 600;
  font-size: 15px;
  padding: 12px 28px;
  border-radius: 999px;
  cursor: default;
  user-select: none;
}

.band--show .show-btn--solid {
  background: #fff;
  color: #0B1020;
}

.band--show .show-btn--ghost {
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, .55);
}

/* ---- Episodes row ---- */

.band--show .show-episodes {
  padding: 28px 24px 32px;
}

.band--show .show-episodes__label {
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: 18px;
  color: #fff;
  margin: 0 0 16px;
}

.band--show .show-episodes__row {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 6px;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.band--show .show-episodes__row::-webkit-scrollbar {
  display: none;
}

.band--show .show-ep {
  flex: 0 0 auto;
  min-width: 240px;
  max-width: 240px;
}

.band--show .show-ep img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .12);
  margin-bottom: 10px;
}

.band--show .show-ep__title {
  font-family: 'Figtree', sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: #fff;
  margin: 0 0 4px;
}

.band--show .show-ep__title span {
  color: rgba(255, 255, 255, .55);
  margin-right: 6px;
}

.band--show .show-ep__desc {
  font-family: 'Figtree', sans-serif;
  font-weight: 400;
  font-size: 13px;
  line-height: 1.45;
  color: rgba(255, 255, 255, .65);
  margin: 0;
}

/* ---- Linear broadcast strip ---- */

.band--show .show-linear {
  display: flex;
  align-items: center;
  gap: 20px;
  background: #11182C;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 12px;
  padding: 18px 24px;
  margin-top: 24px;
}

.band--show .show-linear img {
  height: 30px;
  width: auto;
  flex: 0 0 auto;
}

.band--show .show-linear p {
  font-family: 'Figtree', sans-serif;
  font-weight: 400;
  font-size: 15px;
  color: rgba(255, 255, 255, .8);
  margin: 0;
  flex: 1 1 auto;
}

.band--show .show-linear__chip {
  flex: 0 0 auto;
  font-family: 'Figtree', sans-serif;
  font-weight: 600;
  font-size: 13px;
  color: #FFE7C7;
  border: 1px solid rgba(255, 231, 199, .4);
  border-radius: 999px;
  padding: 6px 14px;
  white-space: nowrap;
}

/* ---- Network logo strip ---- */

.band--show .show-networks {
  margin-top: 56px;
  text-align: center;
}

.band--show .show-networks__caption {
  font-family: 'Figtree', sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
  margin: 0 0 24px;
}

.band--show .show-networks__row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(28px, 6vw, 72px);
}

.band--show .show-networks__row img {
  height: 32px;
  width: auto;
}

.band--show .show-networks__row .show-wordmark {
  font-size: 22px;
  opacity: .85;
}

/* White-filter for colored network SVGs */

.band--show .logo-white-filter {
  filter: brightness(0) invert(1);
  opacity: .85;
}

/* ---- Footnote ---- */

.band--show .show-footnote {
  font-family: 'Figtree', sans-serif;
  font-size: 12px;
  color: rgba(255, 255, 255, .4);
  text-align: center;
  margin: 32px 0 0;
}

/* ---- Responsive ---- */

@media (max-width: 749px) {
  .band--show {
    padding: 72px 0;
  }

  .band--show .show-hero {
    min-height: 340px;
  }

  .band--show .show-hero__content {
    padding: 90px 20px 28px;
  }

  .band--show .show-hero__title {
    font-size: clamp(36px, 11vw, 52px);
  }

  .band--show .show-hero__sub {
    font-size: 16px;
  }

  .band--show .show-episodes {
    padding: 24px 16px 28px;
  }

  .band--show .show-ep {
    min-width: 200px;
    max-width: 200px;
  }

  .band--show .show-linear {
    flex-wrap: wrap;
    gap: 14px;
  }

  .band--show .show-networks__row {
    flex-wrap: wrap;
    row-gap: 24px;
    column-gap: 40px;
  }
}