/* Product landing pages (Sports Mode LP, návrh). Uses the homepage blocks from homepage.css and adds the pieces below. */
#what-you-need{scroll-margin-top:10rem}
.mtv-lp-hero-btn .btn-container{justify-content:flex-start}
.mtv-lp-problem{max-width:none}
/* Section headings at the h3 size (same as "What your viewers see" and the CTA), so they fit on one line. */
.mtv-hp-head h2{font-size:clamp(3.2rem,3.1847133758vw,5rem);line-height:clamp(4.2rem,3.821656051vw,6rem)}
.mtv-lp-problem p+p{margin-top:1.6rem}

.mtv-lp-list{margin:1.6rem 0 0;padding-left:0;text-align:left}
.mtv-lp-list li{display:block;height:auto;min-height:0;padding-left:2.4rem;text-align:left;margin:1rem 0;font-size:1.7rem;line-height:1.5;color:rgba(255,255,255,.85)}
.mtv-lp-list li::before{top:calc(.75em - 3px);transform:translateY(-50%);margin-top:0}

.mtv-lp-need{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:2.4rem;max-width:110rem;margin:0 auto}
.mtv-lp-need-box{padding:3.2rem;border-radius:1.6rem;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12)}
.mtv-lp-check,.mtv-lp-cross{margin:0;padding:0;list-style:none}
.mtv-lp-check li,.mtv-lp-cross li{position:relative;margin:0;padding:1.6rem 0 1.6rem 3.6rem;font-size:1.7rem;border-top:1px solid rgba(255,255,255,.1);line-height:1.5;color:rgba(255,255,255,.85);display:block;height:auto}
.mtv-lp-check li:first-child,.mtv-lp-cross li:first-child{border-top:0}
.mtv-lp-check li strong{color:#fff}
.mtv-lp-check li::before,.mtv-lp-cross li::before{position:absolute;left:0;top:1.5rem;width:2.4rem;height:auto;background:none;font-family:inherit;line-height:1.4;text-align:center;font-weight:700;font-size:1.8rem}
.mtv-lp-check li::before{content:"\2713";color:var(--main-color,#F07F1A)}
.mtv-lp-cross li::before{content:"\2715";color:var(--main-color,#F07F1A)}
.mtv-lp-cross li{color:#fff;font-weight:700}

.mtv-lp-cards-3{grid-template-columns:repeat(3,minmax(0,1fr));max-width:110rem}
.mtv-lp-status{border-top-color:rgba(255,255,255,.25)}
.mtv-lp-status-live{border-top-color:var(--main-color,#F07F1A)}
.mtv-lp-badge{display:inline-block;margin:0 0 1.6rem!important;padding:.4rem 1.2rem;border-radius:10rem;font-size:1.3rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700;background:rgba(255,255,255,.1);color:rgba(255,255,255,.8)!important}
.mtv-lp-status-live .mtv-lp-badge{background:var(--main-color,#F07F1A);color:#fff!important}

.mtv-story-teaser .mtv-lp-teaser-img{max-height:none;border-radius:1.2rem;object-fit:cover;aspect-ratio:4/3}

@media (max-width:1000px){
.mtv-lp-need,.mtv-lp-cards-3{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:600px){
.mtv-lp-need-box{padding:2.4rem 2rem}
.mtv-story-teaser .mtv-lp-teaser-img{max-width:none}
}

/* Spoiler-free = main differentiator: label in its section (2026-10-19). */
.mtv-lp-highlight .mtv-cust-meta{margin-bottom:1.2rem}

/* Left alignment (2026-10-19): headings and text start at the same left edge as the cards; centered text reads worse. */
.mtv-hp-head{max-width:none;margin-left:0;margin-right:0;text-align:left}
.mtv-hp-head h2{max-width:100rem}
.mtv-hp-head p{max-width:84rem}
.mtv-hp-cards,.mtv-hp-steps,.mtv-lp-need,.mtv-lp-cards-3,.mtv-faq,.mtv-story-teaser{max-width:none;margin-left:0;margin-right:0}
@media (max-width:991px){
.mtv-lp-hero .top-image-content,.mtv-lp-hero .top-image-content .perex{text-align:left!important}
.mtv-lp-hero .btn-container{justify-content:flex-start}
.image-content-item-content,.image-content-item-content h3,.image-content-item-content .perex{text-align:left!important}
}
/* Hero heading: smaller so it fits on two lines at 1440 px (61 px wrapped to three). */
.mtv-lp-hero h1{font-size:clamp(3.4rem,3.3vw,5.2rem);line-height:1.2}
/* Cards in one row share the title height (subgrid): no empty gap when all titles fit on one line, aligned text when one wraps. */
.mtv-hp-cards-4 .mtv-hp-card,.mtv-lp-cards-3 .mtv-hp-card{display:grid;grid-row:span 2;grid-template-rows:subgrid;row-gap:0;align-content:start}
.mtv-lp-cards-3 .mtv-hp-card{grid-row:span 3}
.mtv-hp-steps .mtv-hp-step{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:0;align-content:start}
.mtv-hp-cards-4 .mtv-hp-card h3,.mtv-lp-cards-3 .mtv-hp-card h3,.mtv-hp-steps .mtv-hp-step h3{align-self:start}
/* Card titles slightly smaller so they fit on one line next to each other (measured: longest needs ~23 px at 1440 px). */
.mtv-hp-cards-4 .mtv-hp-card h3,.mtv-hp-steps .mtv-hp-step h3,.mtv-lp-cards-3 .mtv-hp-card h3{font-size:clamp(2rem,1.5vw,2.6rem);line-height:1.3}
.mtv-lp-cards-3 .mtv-lp-badge{justify-self:start}

/* Feedback 19. 10. 2026: spoiler section with the stats panel close-up, lighter steps, 3 benefit cards. */
.mtv-lp-spoiler{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6.4rem;align-items:center}
.mtv-lp-shot{margin:0}
.mtv-lp-shot{justify-self:center}

.mtv-lp-shot figcaption{margin-top:1.2rem;font-size:1.5rem;line-height:1.4;color:rgba(255,255,255,.75)}
.mtv-lp-spoiler-text h2{margin:0 0 2.4rem;font-size:clamp(3.2rem,3.1847133758vw,5rem);line-height:clamp(4.2rem,3.821656051vw,6rem)}
/* Problem and solution share one block (19. 10.): the panel sits next to both texts. */
.mtv-lp-problem-text .perex+.perex{margin-top:1.6rem}
.mtv-lp-solution{margin-top:5.6rem;padding-top:4rem;border-top:1px solid rgba(255,255,255,.12)}
.mtv-lp-solution h3{margin:0 0 2rem;font-size:clamp(2.6rem,2.2vw,3.6rem);line-height:1.25}
.mtv-lp-spoiler-text .perex{margin:0 0 1.6rem;color:rgba(255,255,255,.85)}
.mtv-lp-lead{color:#fff!important;font-weight:700}
.mtv-lp-benefits{grid-template-columns:repeat(3,minmax(0,1fr))}
.mtv-lp-steps .mtv-hp-step{background:none;border:0;border-top:1px solid rgba(255,255,255,.15);border-radius:0;padding:2.4rem 2.4rem 0 0}
@media (max-width:991px){
.mtv-lp-spoiler{grid-template-columns:1fr;gap:3.2rem}
}
@media (max-width:700px){
.mtv-lp-benefits{grid-template-columns:minmax(0,1fr)}
.mtv-lp-steps .mtv-hp-step{padding:2rem 0 0}
}

/* 20. 10. 2026: split view on TV, laptop and phone (CSS device frames around the real player screen). */
.mtv-lp-devices{display:grid;grid-template-columns:1.55fr 1.25fr .8fr;gap:4rem;align-items:end;margin-top:1.6rem}
.mtv-lp-dev{margin:0;text-align:center}
.mtv-lp-dev figcaption{margin-top:1.6rem;font-size:1.4rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:rgba(255,255,255,.6)}
.mtv-lp-dev-screen{position:relative;overflow:hidden;background:#000}
.mtv-lp-dev-screen img{display:block;width:100%;height:100%;object-fit:cover}
.mtv-lp-dev-tv .mtv-lp-dev-screen{aspect-ratio:16/9;border:.9rem solid #08090d;border-radius:.6rem;box-shadow:0 2.4rem 5rem rgba(0,0,0,.5)}
.mtv-lp-dev-tv .mtv-lp-dev-screen::after{content:"";position:absolute}
.mtv-lp-dev-tv{position:relative}
.mtv-lp-dev-tv::before{content:"";display:block;order:2}
.mtv-lp-dev-tv figcaption{position:relative;padding-top:2rem}
.mtv-lp-dev-tv figcaption::before{content:"";position:absolute;top:0;left:50%;width:40%;height:.8rem;transform:translateX(-50%);border-radius:0 0 .8rem .8rem;background:#08090d}
.mtv-lp-dev-laptop .mtv-lp-dev-screen{aspect-ratio:16/10;border:.8rem solid #08090d;border-bottom-width:1.2rem;border-radius:1rem 1rem 0 0;width:88%;margin:0 auto}
.mtv-lp-dev-laptop .mtv-lp-dev-screen img{object-fit:contain;background:#0d0f17}
.mtv-lp-dev-laptop figcaption{position:relative;padding-top:1.6rem}
.mtv-lp-dev-laptop figcaption::before{content:"";position:absolute;top:0;left:0;right:0;height:1rem;border-radius:0 0 1.2rem 1.2rem;background:linear-gradient(#2a2d3a,#15171f)}
.mtv-lp-dev-phone .mtv-lp-dev-screen{aspect-ratio:19.5/9;border:.8rem solid #08090d;border-radius:2.2rem;box-shadow:0 2rem 4rem rgba(0,0,0,.5)}
.mtv-lp-dev-phone .mtv-lp-dev-screen img{object-fit:contain;background:#0d0f17}
@media (max-width:991px){
.mtv-lp-devices{grid-template-columns:1fr 1fr;gap:3.2rem 2.4rem}
.mtv-lp-dev-tv{grid-column:1 / -1}
}

/* 20. 10. 2026: break up the dark background with lighter bands and the brand mesh. */
.mtv-lp-band{position:relative;background:linear-gradient(180deg,#1e2235 0%,#171a2a 100%);overflow:hidden}
.mtv-lp-band::before{content:"";position:absolute;top:0;right:0;width:60%;height:100%;background:url(/media/homepage/background-overlay.png) right top/cover no-repeat;transform:scaleX(-1);opacity:.55;pointer-events:none}
.mtv-lp-band > .pux-container{position:relative}

/* 20. 10. 2026: stats panel shown inside a phone frame (the bare panel looked empty). */
.mtv-lp-shot figcaption{text-align:center}
/* Devices show different content: TV = goal + timeline, web = split view, phone (portrait) = full stats. */
.mtv-lp-devices{grid-template-columns:1.6fr 1.2fr .62fr}
.mtv-lp-dev figcaption{letter-spacing:.06em}
@media (max-width:991px){.mtv-lp-devices{grid-template-columns:1fr;gap:4rem}.mtv-lp-dev-tv{grid-column:auto}.mtv-lp-dev-phone-v{width:60%;max-width:24rem;justify-self:center}}

/* Phones: official Apple iPhone 16 bezel (Apple Design Resources) with the app screen composed inside. */
.mtv-lp-iphone{display:block;width:100%;height:auto;filter:drop-shadow(0 2.4rem 4rem rgba(0,0,0,.5))}
.mtv-lp-shot{max-width:24rem}
.mtv-lp-shot{width:100%}
/* Real-world size order: TV largest, laptop medium, phone smallest (all sit on one baseline). */
.mtv-lp-devices{grid-template-columns:2fr 1.35fr .4fr;gap:3.2rem;align-items:end}
@media (max-width:991px){.mtv-lp-devices{grid-template-columns:1fr}.mtv-lp-dev-phone-v{width:40%;max-width:16rem}}
/* Device captions removed (20. 10.); the empty figcaption only draws the TV stand and laptop base. */
.mtv-lp-dev figcaption{font-size:0;margin-top:0;padding-bottom:0}
.mtv-lp-dev-phone-v figcaption{display:none}
/* TV in the middle, all three devices stand on one low TV cabinet (desktop only). */
.mtv-lp-devices{grid-template-columns:1.35fr 2fr .4fr;position:relative;padding:0 3rem 8.4rem;margin-top:3.2rem}
.mtv-lp-devices::before{content:"";position:absolute;left:0;right:0;bottom:0;height:8.4rem;border-radius:.6rem .6rem .3rem .3rem;
 background:linear-gradient(180deg,#5a4637 0,#4a3a2e 1.2rem,#2b231d 1.2rem,#231c17 100%);
 box-shadow:0 2.4rem 4rem rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.12)}
.mtv-lp-devices::after{content:"";position:absolute;left:2.4rem;right:2.4rem;bottom:1.4rem;height:5.2rem;
 background:repeating-linear-gradient(90deg,transparent 0,transparent calc(33.333% - 1px),rgba(0,0,0,.45) calc(33.333% - 1px),rgba(0,0,0,.45) 33.333%);
 border-top:1px solid rgba(0,0,0,.35);border-bottom:1px solid rgba(255,255,255,.05)}
.mtv-lp-dev{position:relative;z-index:1}
.mtv-lp-dev-phone-v .mtv-lp-iphone{filter:drop-shadow(0 1rem 1.6rem rgba(0,0,0,.5))}
@media (max-width:991px){.mtv-lp-devices{padding:0}.mtv-lp-devices::before,.mtv-lp-devices::after{display:none}}
/* Mesh in the bands fades out to the left, so it has no visible edge. */
.mtv-lp-band::before{-webkit-mask-image:linear-gradient(to right,#000 30%,transparent 100%);mask-image:linear-gradient(to right,#000 30%,transparent 100%)}
@media (max-width:991px){.mtv-lp-devices{grid-template-columns:1fr;gap:3.2rem}.mtv-lp-dev-phone-v{width:40%;max-width:16rem;justify-self:center}}
/* Laptop: official Apple MacBook Air bezel image instead of the CSS frame. */
.mtv-lp-mac{display:block;width:100%;height:auto;filter:drop-shadow(0 1.6rem 2.4rem rgba(0,0,0,.45))}
/* Hero: animated version of the living-room image (AI loop, no sound); same size and rounding as the original picture. */
.mtv-lp-hero-video{display:block;width:100%;height:auto;aspect-ratio:1180/786;object-fit:cover;border-radius:1.6rem}
/* Reduced motion: show the original still image instead of the looping video. */
.mtv-lp-hero-still{display:none;width:100%;height:auto;aspect-ratio:1180/786;object-fit:cover;border-radius:1.6rem}
@media (prefers-reduced-motion:reduce){.mtv-lp-hero-video{display:none}.mtv-lp-hero-still{display:block}}