/* Murdie úvod v4 (2026-10-15): hero přes celou obrazovku, mozaika snímků, mapový pás, tři kroky. Málo textu, velké obrázky. */

/* ----- hero ----- */
.hero4 { position: relative; min-height: 100vh; display: flex; align-items: center; overflow: hidden; margin-top: -88px; padding: 150px 0 110px; }
.hero4-media { position: absolute; inset: 0; z-index: 0; }
.hero4-media img { position: absolute; inset: -4%; width: 108%; height: 108%; object-fit: cover; display: block; animation: hero-kb 40s ease-in-out infinite alternate; }
@keyframes hero-kb { 0% { transform: scale(1) translate(0, 0); } 100% { transform: scale(1.08) translate(-1.5%, 1.5%); } }
.hero4-shade { position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(180deg, rgba(14,12,15,.6) 0%, rgba(14,12,15,.08) 26%, rgba(14,12,15,0) 55%, var(--bg) 100%),
              linear-gradient(90deg, rgba(14,12,15,.72) 0%, rgba(14,12,15,.3) 42%, rgba(14,12,15,0) 75%); }
.hero4-content { position: relative; z-index: 1; }
.hero4 .kicker { margin-bottom: 20px; }
.hero4 h1 { font-size: clamp(44px, 7.2vw, 96px); margin: 0 0 18px; max-width: 900px; color: #fff; filter: drop-shadow(0 12px 40px rgba(0,0,0,.7)); }
.hero4 h1 em { font-style: normal; color: var(--gold-2); }
.hero4 .lead { font-size: clamp(16px, 1.5vw, 20px); color: #e2e2ea; max-width: 560px; margin: 0 0 32px; text-shadow: 0 2px 20px rgba(0,0,0,.8); }
.hero4 .cta { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.hero4 .cta .btn:not(.primary) { background: rgba(10,10,14,.5); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.stats { display: flex; gap: 0; margin-top: 46px; max-width: 640px; border: 1px solid rgba(255,255,255,.12); background: rgba(10,10,14,.55); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: var(--r); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 14px 40px rgba(0,0,0,.4); }
.stats > div { flex: 1; padding: 14px 10px; text-align: center; border-left: 1px solid rgba(255,255,255,.1); display: flex; flex-direction: column; gap: 2px; }
.stats > div:first-child { border-left: 0; }
.stats b { font-family: var(--title); font-size: clamp(20px, 2.4vw, 30px); line-height: 1; color: #fff; }
.stats span { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.stats b.on { color: var(--green-2); }

/* ----- mozaika ----- */
.mosaic { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.tile { position: relative; display: block; overflow: hidden; border-radius: var(--r); aspect-ratio: 16 / 10; background: #000; border: 1px solid rgba(0,0,0,.8);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 14px 36px rgba(0,0,0,.45); color: #fff; transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s; }
.tile.wide { grid-column: span 2; aspect-ratio: auto; }
.tile img, .tile video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s cubic-bezier(.2,.8,.2,1), filter .6s; filter: saturate(1.02); }
.tile:hover { transform: translateY(-4px); box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 24px 60px rgba(0,0,0,.6), 0 0 0 1px rgba(232,197,106,.35); color: #fff; }
.tile:hover img, .tile:hover video { transform: scale(1.05); }
.tile .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 60px 20px 18px; background: linear-gradient(180deg, transparent, rgba(8,8,12,.55) 45%, rgba(8,8,12,.92)); display: flex; flex-direction: column; gap: 4px; }
.tile .cap b { font-family: var(--title); font-size: 20px; letter-spacing: .03em; text-transform: uppercase; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.7); }
.tile.wide .cap b { font-size: 26px; }
.tile .cap span { font-size: 14px; color: #d8d8e2; line-height: 1.4; max-width: 520px; }
@media (max-width: 900px) { .mosaic { grid-template-columns: 1fr 1fr; } .tile.wide { grid-column: span 2; } }
@media (max-width: 600px) { .mosaic { grid-template-columns: 1fr; } .tile, .tile.wide { grid-column: auto; aspect-ratio: 16 / 10; } .tile .cap b, .tile.wide .cap b { font-size: 18px; } }

/* lightbox */
.lightbox { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; background: rgba(6,6,9,.9); cursor: zoom-out; padding: 20px; }
.lightbox[hidden] { display: none; }
.lightbox img { max-width: min(1600px, 100%); max-height: 100%; border-radius: var(--r); box-shadow: 0 30px 90px rgba(0,0,0,.8); }

/* ----- mapový pás ----- */
.band { position: relative; min-height: 72vh; display: flex; align-items: center; overflow: hidden; margin: 40px 0; }
.band-media { position: absolute; inset: 0; }
.band-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.band-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(14,12,15,.9) 0%, rgba(14,12,15,.55) 45%, rgba(14,12,15,.1) 100%), linear-gradient(180deg, var(--bg) 0%, transparent 18%, transparent 82%, var(--bg) 100%); }
.band-content { position: relative; z-index: 1; padding: 80px 0; }
.band h2 { font-size: clamp(34px, 5vw, 64px); margin: 0 0 16px; color: #fff; filter: drop-shadow(0 10px 30px rgba(0,0,0,.7)); }
.band .lead { max-width: 520px; color: #e2e2ea; font-size: 17px; margin: 0 0 26px; text-shadow: 0 2px 20px rgba(0,0,0,.8); }

/* ----- žebříček / stažení ----- */
.center-cta { text-align: center; margin: 22px 0 0; }
#lbNote { margin-top: 10px; }
.dl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.steps3 { list-style: none; counter-reset: s; padding: 0; margin: 8px 0 0; display: flex; flex-direction: column; gap: 14px; }
.steps3 li { display: flex; align-items: center; gap: 16px; font-size: 18px; font-weight: 600; }
.steps3 li::before { counter-increment: s; content: counter(s); font-family: var(--title); font-size: 20px; color: var(--gold-2); width: 42px; height: 42px; flex: none; display: grid; place-items: center; border-radius: var(--r); background: rgba(232,197,106,.1); border: 1px solid rgba(232,197,106,.35); }
.steps3 li a { font-size: 14px; font-weight: 600; margin-left: 4px; }
.dl-box p.small { margin: 4px 0 0; max-width: 420px; }
@media (max-width: 860px) { .dl-grid { grid-template-columns: 1fr; gap: 26px; } .hero4 { min-height: 0; padding: 130px 0 70px; } .stats { flex-wrap: wrap; } .stats > div { flex: 1 1 45%; } .stats > div:nth-child(3) { border-left: 0; } .band { min-height: 0; } .band-content { padding: 50px 0; } }
@media (max-width: 760px) { .podium .top.first { order: -1; } .rank-row .who { min-width: 0; overflow: hidden; } .rank-row .mini-skills { display: none; } .rank-row .who a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } }