/* What2Vue 2.0 / Module 15.7 — shared decorative header treatment.
   Loaded AFTER component styles. Decorative artwork is CSS only, no extra media or DB. */

/* The TV Shows page must align with the site's shared 1370px content width. */
.tvshows-v2 .container {
  width: min(1370px, calc(100% - 44px));
  max-width: 1370px;
  margin-inline: auto;
}
.tvshows-v2 .tvshows-hero {
  position: relative;
  isolation: isolate;
  width: min(1370px, calc(100% - 44px));
  margin: 0 auto 10px;
  min-height: 112px;
  border: 1px solid #175375;
  border-radius: 6px;
  overflow: hidden;
  background: linear-gradient(110deg, #06233b, #0b3956 68%, #07304b);
}
.tvshows-v2 .tvshows-hero-inner { position: relative; z-index: 1; }

/* One motif shared by text-only, image-free page headers. */
.tvshows-v2 .tvshows-hero::after,
.w2v-archive-hero::after,
.platform-hero:not([style*="--platform-image"])::after,
.w2v-show-hero:not(:has(.w2v-show-hero-art img))::after,
.stream-header::after,
.w2v-photos-heading::after,
.w2v-people-hero::after,
.w2v-schedule-hero::after {
  content: '';
  position: absolute;
  z-index: 0;
  width: clamp(190px, 24vw, 330px);
  height: clamp(190px, 24vw, 330px);
  right: -85px;
  top: -145px;
  border: 40px solid rgba(0, 165, 234, .13);
  border-radius: 50%;
  transform: rotate(-15deg);
  pointer-events: none;
}
/* Restore the current TV Notify round treatment rather than layering two circles. */
.w2v-archive-hero::after { width: 290px; height: 290px; right: -80px; top: -145px; border-width: 42px; }

.tvshows-v2 .tvshows-hero > *,
.platform-hero > *,
.stream-header > *,
.w2v-photos-heading > * { position: relative; z-index: 1; }

/* Real platform artwork must always win. No swirl over configured banners. */
.platform-hero[style*="--platform-image"]::after { display: none; }
.platform-hero { isolation: isolate; }

/* For a platform without a banner, an oversized network-name watermark pairs with the swirl.
   data-network-name is escaped and added to the existing platform-hero by the tiny PHP patch. */
.platform-hero[data-network-name]:not([style*="--platform-image"])::before {
  /* Leave existing platform-hero:before gradient intact; this rule intentionally does not override it. */
}
.platform-hero[data-network-name]:not([style*="--platform-image"]) {
  background: linear-gradient(105deg,#061e32 0%,#0c3958 66%,#07314d 100%);
}
.platform-hero[data-network-name]:not([style*="--platform-image"])::after { right: -68px; top: -135px; opacity: 1; }
.platform-hero[data-network-name]:not([style*="--platform-image"]) .platform-eyebrow { position: relative; z-index: 2; }
.platform-hero[data-network-name]:not([style*="--platform-image"]) h1 {
  letter-spacing: -.035em;
  text-shadow: 0 2px 12px rgba(0,0,0,.22);
}
/* Subtle wordmark on the far right, only when a valid name attribute exists.
   Avoid generated-content watermark at narrow widths or when a real marquee is present. */
.platform-hero[data-network-name]:not([style*="--platform-image"]) .platform-hero-watermark {
  position: absolute;
  right: 28px;
  top: 50%;
  transform: translateY(-50%) rotate(-7deg);
  max-width: 48%;
  color: rgba(35, 185, 248, .14);
  font-size: clamp(48px, 8vw, 130px);
  font-weight: 900;
  letter-spacing: -.06em;
  white-space: nowrap;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
@media (max-width: 720px) {
  .tvshows-v2 .container,.tvshows-v2 .tvshows-hero { width: calc(100% - 24px); }
  .tvshows-v2 .tvshows-hero { min-height: 0; }
  .tvshows-v2 .tvshows-hero-inner { padding-block: 12px; }
  .platform-hero .platform-hero-watermark { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .tvshows-v2 .tvshows-hero::after,.platform-hero::after { animation: none; }
}