/* MHF TV landing + MPS Network player station (MHF_TV_FINAL_Developer_Package: Screenshot_1/2 and the two HTML
   references). Palette from the references: navy #092550, blue #0875c8, red #c90016. */
.tv-page, .tv-station { --tv-navy: #092550; --tv-blue: #0875c8; --tv-red: #c90016; --tv-red-d: #a30012; --tv-muted: #52657d; --tv-line: #e0e8f2; --tv-pale: #edf6ff; }
.tv-page .sr-only, .tv-station .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.tv-wrap { max-width: 1380px; margin: 0 auto; padding: 0 30px; }

/* buttons */
.tv-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 12px 24px; border-radius: 7px; border: 2px solid transparent;
    font: 800 .95rem 'Figtree', Arial, sans-serif; letter-spacing: .02em; text-transform: uppercase; text-decoration: none; cursor: pointer; }
.tv-btn iconify-icon { font-size: 1.35rem; }
.tv-btn--red, .mh-home a.tv-btn--red { background: var(--tv-red); color: #fff; }
.tv-btn--red:hover, .mh-home a.tv-btn--red:hover { background: var(--tv-red-d); color: #fff; }
.tv-btn--line, .mh-home a.tv-btn--line { background: #fff; color: var(--tv-navy); border-color: var(--tv-navy); }
.tv-btn--line:hover, .mh-home a.tv-btn--line:hover { background: var(--tv-pale); }
.tv-btn:focus-visible { outline: 3px solid var(--tv-blue); outline-offset: 2px; }

/* ---------- landing ---------- */
.tv-hero { background: linear-gradient(120deg, #fff 0%, #edf6ff 51%, #bfdcf4 100%); padding: 38px 0 42px; }
.tv-hero__grid { display: grid; grid-template-columns: 1fr 1.12fr; gap: 45px; align-items: center; }
.tv-brandline { display: flex; align-items: center; gap: 20px; }
.tv-mps { width: 150px; max-width: 26%; height: auto; object-fit: contain; flex: none; }
.mh-home .tv-hero h1 { margin: 0; color: var(--tv-navy); font: 800 clamp(2rem, 3.9vw, 3.9rem)/1.03 'Figtree', Arial, sans-serif; letter-spacing: -1.5px; }
.tv-hero h1 span { color: var(--tv-blue); }
.mh-home .tv-tagline { margin: 19px 0 13px; color: var(--tv-navy); font: italic clamp(1.3rem, 2.3vw, 2.1rem)/1.25 Georgia, 'Times New Roman', serif; }
.mh-home .tv-intro { margin: 0 0 23px; max-width: 620px; color: var(--tv-navy); font-size: 1.06rem; line-height: 1.6; }
.tv-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.tv-featured { position: relative; aspect-ratio: 16 / 9; background: #082246; border-radius: 13px; overflow: hidden; box-shadow: 0 12px 25px rgba(6, 44, 82, .17); border: 3px solid #fff; }
.tv-featured iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.tv-featured__link, .tv-featured__empty { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; text-decoration: none; background: linear-gradient(135deg, #123d71, #061b3b); }
.tv-featured__link img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tv-featured__link span { position: relative; display: inline-flex; gap: 10px; align-items: center; background: rgba(9, 37, 80, .87); padding: 16px 22px; border-radius: 8px; font-weight: 700; }
.tv-featured__empty { gap: 10px; align-content: center; font-weight: 700; }
.tv-featured__empty iconify-icon { font-size: 3rem; }

.tv-gallery { padding: 34px 0 40px; }
.tv-gallery__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 22px; }
.mh-home .tv-gallery h2 { margin: 0 0 7px; color: var(--tv-navy); font: 800 clamp(1.7rem, 3vw, 2.7rem) 'Figtree', Arial, sans-serif; position: relative; }
.mh-home .tv-gallery__head p { margin: 0; color: var(--tv-muted); }
.tv-arrows { display: flex; gap: 12px; flex: none; }
.tv-arrows[hidden] { display: none; }
.tv-arrow { width: 46px; height: 46px; border-radius: 50%; border: 0; display: grid; place-items: center; background: #e3edf8; color: var(--tv-navy); font-size: 1.2rem; cursor: pointer; }
.tv-arrow.is-on { background: var(--tv-blue); color: #fff; }
.tv-arrow:disabled { opacity: .45; cursor: default; }
.tv-arrow:focus-visible { outline: 3px solid var(--tv-navy); outline-offset: 2px; }
.mh-home .tv-cards { list-style: none; margin: 0; padding: 4px 2px 12px; display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 4 * 16px) / 5); gap: 16px;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: thin; }
.tv-card { scroll-snap-align: start; }
.tv-card a { display: flex; flex-direction: column; height: 100%; border: 1px solid var(--tv-line); border-radius: 9px; overflow: hidden; background: #fff; box-shadow: 0 4px 12px rgba(0, 44, 80, .06);
    color: var(--tv-navy); text-decoration: none; transition: box-shadow .2s ease, transform .2s ease; }
.tv-card a:hover { box-shadow: 0 10px 22px rgba(0, 44, 80, .14); transform: translateY(-2px); }
.tv-card a:focus-visible { outline: 3px solid var(--tv-blue); outline-offset: 2px; }
.tv-card__thumb { position: relative; display: block; aspect-ratio: 16 / 9; background: linear-gradient(135deg, #bad7ee, #1b5791); overflow: hidden; }
.tv-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tv-card__play { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 2.2rem; background: rgba(7, 31, 68, .12); opacity: 0; transition: opacity .2s ease; }
.tv-card a:hover .tv-card__play, .tv-card a:focus-visible .tv-card__play { opacity: 1; }
.tv-card__body { display: block; padding: 12px 14px 14px; }
.tv-card__body strong { display: block; font: 800 1rem/1.35 'Figtree', Arial, sans-serif; }
.tv-card__body small { display: block; margin-top: 6px; color: var(--tv-muted); font-size: .92rem; line-height: 1.45; }

.tv-cta { background: linear-gradient(110deg, #e8f2fc 0%, #d6e8f8 100%); padding: 28px 0; }
.tv-cta__in { display: flex; align-items: center; gap: 28px; }
.tv-cta__yt { flex: none; color: #ff0000; font-size: 5.5rem; line-height: 1; display: grid; }
.tv-cta__text { flex: 1 1 auto; }
.mh-home .tv-cta h2 { margin: 0; color: var(--tv-navy); font: 800 clamp(1.4rem, 2.2vw, 2rem) 'Figtree', Arial, sans-serif; }
.mh-home .tv-cta p { margin: 5px 0 0; color: var(--tv-navy); line-height: 1.5; }

/* ---------- player station ---------- */
.tv-station { margin: 0; background: #f2f6fb; color: #102e55; font: 16px/1.5 'Figtree', Arial, sans-serif; }
.tv-skip { position: absolute; left: -9999px; }
.tv-skip:focus { left: 12px; top: 12px; z-index: 5; background: #fff; padding: 8px 12px; border-radius: 6px; }
.tv-top { background: #fff; border-bottom: 1px solid #dce5ef; }
.tv-top__in { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding-top: 14px; padding-bottom: 14px; }
.tv-top__brand { display: flex; align-items: center; gap: 18px; min-width: 0; text-decoration: none; }
.tv-top__mps { width: 88px; height: 72px; object-fit: contain; flex: none; }
.tv-top__div { width: 1px; align-self: stretch; background: #c9d6e6; }
.tv-top__wm { width: min(350px, 36vw); height: auto; }
.tv-btn--navy { background: var(--tv-navy); color: #fff; text-transform: none; font-size: 1.02rem; letter-spacing: 0; }
.tv-btn--navy:hover { background: #0e3672; color: #fff; }
.tv-btn--outline-red { background: #fff; color: var(--tv-red); border-color: var(--tv-red); text-transform: none; letter-spacing: 0; font-size: 1.02rem; }
.tv-btn--outline-red:hover { background: #fff3f4; color: var(--tv-red-d); }
.tv-btn--outline-red iconify-icon:first-child { color: #ff0000; }
.tv-station__grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); gap: 25px; padding-top: 22px; padding-bottom: 50px; align-items: start; }
.tv-now, .tv-next { background: #fff; border: 1px solid #dce5ef; border-radius: 15px; overflow: hidden; box-shadow: 0 5px 20px rgba(18, 52, 87, .05); }
.tv-player { position: relative; aspect-ratio: 16 / 9; background: #051a37; }
.tv-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.tv-now__body { padding: 20px 22px 24px; }
.tv-now__body h1 { margin: 0 0 10px; color: var(--tv-navy); font: 800 clamp(1.4rem, 1rem + 1.4vw, 2.1rem)/1.2 'Figtree', Arial, sans-serif; }
.tv-now__body p { margin: 0 0 18px; color: #3d5068; line-height: 1.6; }
.tv-next h2 { margin: 0; padding: 18px 20px 12px; color: var(--tv-navy); font: 800 1.6rem 'Figtree', Arial, sans-serif; }
.tv-next__list { list-style: none; margin: 0; padding: 0 10px 12px; display: grid; gap: 6px; max-height: calc(100vh - 140px); overflow-y: auto; }
.tv-next__item a { display: flex; gap: 14px; padding: 8px; border-radius: 10px; align-items: center; color: inherit; text-decoration: none; }
.tv-next__item a:hover { background: #f3f8ff; }
.tv-next__item a:focus-visible { outline: 3px solid var(--tv-blue); outline-offset: -3px; }
.tv-next__item.is-current a { background: #e5f0fd; box-shadow: inset 0 0 0 2px #9cc6f0; }
.tv-next__thumb { position: relative; width: 44%; flex-shrink: 0; aspect-ratio: 16 / 9; border-radius: 7px; overflow: hidden; background: linear-gradient(120deg, #b4d8f1, #1b5d9e); }
.tv-next__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tv-next__badge { position: absolute; left: 6px; bottom: 6px; background: var(--tv-navy); color: #fff; font-size: .72rem; font-weight: 700; padding: 2px 8px; border-radius: 4px; }
.tv-next__text strong { display: block; color: var(--tv-navy); font-size: .98rem; line-height: 1.3; }
.tv-next__text small { display: block; margin-top: 5px; color: #5a6c82; font-size: .86rem; line-height: 1.4; }
.tv-foot { background: #0b315e; color: #fff; padding: 22px 0; font-size: .85rem; }

@media (max-width: 1100px) {
    .mh-home .tv-cards { grid-auto-columns: calc((100% - 2 * 16px) / 3); }
}
@media (max-width: 1000px) {
    .tv-hero__grid { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 850px) {
    .tv-station__grid { grid-template-columns: 1fr; }
    .tv-next__list { max-height: none; }
    .tv-wrap { padding-left: 16px; padding-right: 16px; }
}
@media (max-width: 640px) {
    .tv-hero { padding: 26px 0; }
    .tv-brandline { gap: 12px; }
    .tv-mps { width: 96px; }
    .mh-home .tv-hero h1 { letter-spacing: -.5px; }
    .mh-home .tv-cards { grid-auto-columns: 78%; }
    .tv-gallery__head { align-items: flex-start; }
    .tv-cta__in { flex-direction: column; align-items: flex-start; gap: 14px; }
    .tv-cta__yt { font-size: 4rem; }
    .tv-btn { width: 100%; }
    .tv-top__in { flex-wrap: wrap; }
    .tv-top__mps { width: 64px; height: 52px; }
    .tv-top__wm { width: min(230px, 52vw); }
    .tv-top .tv-btn { width: auto; min-height: 42px; padding: 8px 16px; font-size: .92rem; }
    .tv-station__grid { padding-top: 16px; }
}