/* ===== Varianta B — „Editorial" · media hero + portfolio ===== */

/* hero split: text vlevo, media vpravo s glass panelem */
.b-hero{position:relative;min-height:100vh;display:grid;grid-template-columns:1.05fr 1fr;align-items:stretch;overflow:hidden}
.b-hero-left{display:flex;flex-direction:column;justify-content:center;padding:clamp(90px,12vh,160px) clamp(20px,5vw,72px) 60px;position:relative;z-index:2}
.b-hero-left .eyebrow{margin-bottom:1.6rem}
.b-hero h1{font-size:clamp(2.8rem,6.2vw,6rem);margin-bottom:.5em}
.b-hero h1 em{font-style:italic}
.b-hero h1 .chrome-type{display:inline-block}
.b-hero .lead{color:var(--ink-dim);font-size:clamp(1.02rem,1.4vw,1.2rem);max-width:38ch;margin-bottom:2.2em}
.b-hero-cta{display:flex;gap:1rem;flex-wrap:wrap}
.b-hero-stats{display:flex;gap:clamp(20px,3vw,48px);margin-top:auto;padding-top:clamp(30px,5vh,60px)}
.b-hero-stats .s b{font-family:'Playfair Display',serif;font-style:italic;font-size:clamp(1.8rem,3vw,2.6rem);display:block;color:var(--steel-lite)}
.b-hero-stats .s span{font-size:.8rem;color:var(--ink-faint);letter-spacing:.06em}

.b-hero-right{position:relative;overflow:hidden}
.b-hero-media{position:absolute;inset:0}
.b-hero-media img{width:100%;height:100%;object-fit:cover;filter:grayscale(.35) brightness(.7) contrast(1.05)}
.b-hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--bg) 0%,transparent 30%),linear-gradient(0deg,rgba(6,7,10,.6),transparent 50%)}
/* chromová stuha protékající přes media */
.b-ribbon{position:absolute;z-index:3;filter:url(#gooey);opacity:.92}
.b-ribbon .drop{position:absolute;border-radius:50%;background:var(--chrome-grad);background-size:200% 200%}
.b-ribbon.r1{right:6%;top:50%;width:340px;height:340px;transform:translateY(-50%)}
.b-ribbon.r1 .b0{width:150px;height:150px;left:80px;top:80px;animation:bF0 12s var(--ease) infinite}
.b-ribbon.r1 .b1{width:90px;height:90px;left:30px;top:160px;animation:bF1 9s var(--ease) infinite}
.b-ribbon.r1 .b2{width:70px;height:70px;left:200px;top:40px;animation:bF2 11s var(--ease) infinite}
@keyframes bF0{0%,100%{transform:translate(0,0)}50%{transform:translate(-10px,16px)}}
@keyframes bF1{0%,100%{transform:translate(0,0)}50%{transform:translate(36px,-40px)}}
@keyframes bF2{0%,100%{transform:translate(0,0)}50%{transform:translate(-30px,40px)}}

.b-glass-panel{position:absolute;left:-60px;bottom:48px;z-index:4;max-width:300px;padding:24px 26px;border-radius:var(--r-md)}
.b-glass-panel .q{font-family:'Playfair Display',serif;font-style:italic;font-size:1.18rem;line-height:1.35;margin-bottom:.8rem}
.b-glass-panel .by{font-size:.8rem;color:var(--ink-faint);letter-spacing:.06em}

/* sekce */
.b-sec{padding:clamp(70px,11vw,140px) 0}
.b-head{margin-bottom:clamp(40px,6vw,72px)}
.b-head .eyebrow{margin-bottom:1rem}
.b-head h2{font-size:clamp(2.2rem,5vw,4rem);max-width:18ch}
.b-head h2 em{font-style:italic}

/* portfolio filter */
.b-filter{display:flex;gap:.6rem;flex-wrap:wrap;margin-bottom:clamp(28px,4vw,44px)}
.b-filter button{padding:.6em 1.2em;border-radius:100px;border:1px solid var(--line);font-size:.86rem;color:var(--ink-dim);transition:.4s var(--ease)}
.b-filter button:hover{border-color:rgba(255,255,255,.25);color:var(--ink)}
.b-filter button.on{background:var(--chrome-grad);color:#10131a;font-weight:600;border-color:transparent}

.b-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(12px,1.4vw,20px)}
.b-item{position:relative;border-radius:var(--r-md);overflow:hidden;border:1px solid var(--line);background:var(--bg-3);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.b-item.hide{display:none}
.b-item img{width:100%;height:100%;object-fit:cover;filter:grayscale(.4) brightness(.78);transition:transform 1s var(--ease),filter 1s var(--ease)}
.b-item iframe{width:100%;height:100%;display:block;border:0;background:#000}
.b-item[data-video]{cursor:pointer}
.b-item.video-loaded .ov,.b-item.video-loaded .play{display:none}
.b-item:hover img{transform:scale(1.07);filter:grayscale(0) brightness(.95)}
.b-item.photo-item img,.b-item.photo-item:hover img{filter:none}
.b-item .ov{position:absolute;inset:0;background:linear-gradient(to top,rgba(6,7,10,.94),transparent 50%);display:flex;flex-direction:column;justify-content:flex-end;padding:22px;pointer-events:none}
.b-item .tag{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--steel-lite);margin-bottom:.3rem}
.b-item h4{font-family:'Playfair Display',serif;font-style:italic;font-size:1.3rem}
.b-item .play{position:absolute;top:16px;right:16px;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--glass);border:1px solid var(--glass-brd);backdrop-filter:blur(8px);font-size:.8rem;pointer-events:none}
/* span velikosti — editorial mřížka */
.b-item.big{grid-column:span 6;aspect-ratio:16/11}
.b-item.tall{grid-column:span 3;aspect-ratio:3/4}
.b-item.wide{grid-column:span 6;aspect-ratio:16/9}
.b-item.std{grid-column:span 4;aspect-ratio:4/3}
.b-item.sq{grid-column:span 3;aspect-ratio:1}

/* služby karty */
.b-serv{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,26px)}
.b-serv .c{display:block;min-height:100%;padding:clamp(28px,3vw,40px);border-radius:var(--r-lg);border:1px solid var(--line);background:linear-gradient(180deg,var(--bg-2),var(--bg));position:relative;overflow:hidden;transition:.5s var(--ease)}
.b-serv .c:hover{border-color:rgba(255,255,255,.18);transform:translateY(-4px)}
.b-serv .c:focus-visible{outline:2px solid var(--steel-lite);outline-offset:4px}
.b-serv .c .no{font-family:'Playfair Display',serif;font-style:italic;color:var(--steel);font-size:1.2rem;margin-bottom:1.6rem}
.b-serv .c h3{font-size:1.7rem;margin-bottom:.8rem}
.b-serv .c p{color:var(--ink-dim);font-size:.95rem;margin-bottom:1.6rem}
.b-serv .c .price{font-family:'Playfair Display',serif;font-style:italic;font-size:1.4rem;color:var(--steel-lite)}
.b-serv .c .price span{font-size:.8rem;color:var(--ink-faint);font-family:'Onest';font-style:normal}
.b-serv .c .blob{position:absolute;right:-40px;top:-40px;width:120px;height:120px;opacity:.5}

/* about */
.b-about{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(32px,6vw,80px);align-items:center}
.b-about-photo{position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/5;border:1px solid var(--line)}
.b-about-photo img{width:100%;height:100%;object-fit:cover;filter:grayscale(.2) brightness(.88)}
.b-about h2{font-size:clamp(2rem,4.4vw,3.4rem);margin:.5rem 0 1.2rem}
.b-about p{color:var(--ink-dim);margin-bottom:1.2rem;max-width:48ch}
.b-usp-list{list-style:none;margin:1.6rem 0}
.b-usp-list li{display:flex;gap:1rem;padding:1rem 0;border-top:1px solid var(--line-soft)}
.b-usp-list li b{font-family:'Playfair Display',serif;font-style:italic;color:var(--steel);font-size:1.1rem}
.b-usp-list li span{color:var(--ink-dim);font-size:.96rem}

/* kontakt */
.b-contact{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:start}
.b-contact h2{font-size:clamp(2.2rem,5vw,3.8rem);margin-bottom:1rem}
.b-contact .lead{color:var(--ink-dim);max-width:42ch;margin-bottom:2rem}
.b-cinfo a{display:flex;align-items:center;gap:1rem;padding:1.1rem 0;border-top:1px solid var(--line);font-size:1.05rem;transition:.3s}
.b-cinfo a:hover{padding-left:8px;color:var(--steel-lite)}
.b-cinfo a .lbl{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint);width:90px}
.b-form{padding:clamp(28px,3vw,40px);border-radius:var(--r-lg)}
.b-form label{display:block;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);margin:1.2rem 0 .5rem}
.b-form input,.b-form textarea{width:100%;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-sm);padding:.9rem 1rem;color:var(--ink);font-family:inherit;font-size:.98rem;transition:border .3s}
.b-form input:focus,.b-form textarea:focus{outline:none;border-color:var(--steel)}
.b-form textarea{resize:vertical;min-height:110px}
.b-form .btn{margin-top:1.6rem;width:100%;justify-content:center}

@media(max-width:980px){
  .b-hero{grid-template-columns:1fr;min-height:auto}
  .b-hero-right{min-height:60vh}
  .b-glass-panel{left:auto;right:24px;bottom:24px}
  .b-serv{grid-template-columns:1fr}
  .b-about,.b-contact{grid-template-columns:1fr}
  .b-item.big,.b-item.wide{grid-column:span 12}
  .b-item.tall,.b-item.std,.b-item.sq{grid-column:span 6}
}