Dzielone menu teatru tańca

<main class="theatre-page" id="theatre-home" data-nav-kind="desktop">
  <header class="theatre-masthead">
    <nav aria-label="Główna nawigacja teatru">
      <div class="theatre-grid">
        <ul class="theatre-primary theatre-left">
          <li><button type="button" id="theatre-program-trigger" data-theatre="program" aria-expanded="false" aria-controls="theatre-panel">Repertuar</button></li>
          <li><button type="button" data-theatre="company" aria-expanded="false" aria-controls="theatre-panel">Zespół</button></li>
          <li><button type="button" data-theatre="about" aria-expanded="false" aria-controls="theatre-panel">O teatrze</button></li>
        </ul>
        <ul class="theatre-brand-shell"><li><a class="theatre-brand" href="#theatre-home" aria-label="Teatr Przejście — strona główna" aria-current="page"><span>TEATR</span><b>PRZEJŚCIE</b></a></li></ul>
        <ul class="theatre-primary theatre-right">
          <li><button type="button" data-theatre="news" aria-expanded="false" aria-controls="theatre-panel">Aktualności</button></li>
          <li><button type="button" data-theatre="visit" aria-expanded="false" aria-controls="theatre-panel">Wizyta</button></li>
          <li><button type="button" data-theatre="tickets" aria-expanded="false" aria-controls="theatre-panel">Bilety</button></li>
        </ul>
      </div>
      <section id="theatre-panel" class="theatre-panel" hidden>
        <div data-theatre-panel="program" hidden><p><b>Repertuar</b><span>Spektakle i wydarzenia tego sezonu.</span></p><ul><li><a id="theatre-premieres" href="#theatre-premieres-target">Najbliższe premiery</a></li><li><a href="#theatre-calendar-target">Kalendarz spektakli</a></li><li><a href="#theatre-touring-target">Teatr w trasie</a></li></ul></div>
        <div data-theatre-panel="company" hidden><p><b>Zespół</b><span>Osoby tworzące teatr na scenie i poza nią.</span></p><ul><li><a href="#theatre-dancers-target">Tancerki i tancerze</a></li><li><a href="#theatre-creators-target">Twórcy spektakli</a></li></ul></div>
        <div data-theatre-panel="about" hidden><p><b>O teatrze</b><span>Historia miejsca i program edukacyjny.</span></p><ul><li><a href="#theatre-story-target">Nasza historia</a></li><li><a href="#theatre-education-target">Edukacja</a></li></ul></div>
        <div data-theatre-panel="news" hidden><p><b>Aktualności</b><span>Zmiany w programie i wiadomości zespołu.</span></p><ul><li><a href="#theatre-news-target">Wiadomości</a></li><li><a href="#theatre-press-target">Dla mediów</a></li></ul></div>
        <div data-theatre-panel="visit" hidden><p><b>Wizyta</b><span>Adres, dostępność i godziny pracy kasy.</span></p><ul><li><a href="#theatre-access-target">Dostępność</a></li><li><a href="#theatre-directions-target">Dojazd</a></li></ul></div>
        <div data-theatre-panel="tickets" hidden><p><b>Bilety</b><span>Ceny, rezerwacje i zasady zwrotów.</span></p><ul><li><a href="#theatre-buy-target">Kup bilet</a></li><li><a href="#theatre-prices-target">Cennik</a></li></ul></div>
      </section>
    </nav>
  </header>
  <section class="theatre-hero" id="theatre-program" aria-labelledby="theatre-title"><p>SEZON 2026 / PREMIERA 18.10</p><h1 id="theatre-title">Ciało pamięta<br>kierunek.</h1><div><span>Choreografia: Lena Wolska</span><span>Duża scena · 19:00</span></div></section>
  <p id="theatre-status" class="theatre-status" role="status" aria-live="polite">Wybierz dział, aby rozwinąć menu.</p>
  <section class="theatre-targets" aria-label="Cele odnośników">
    <article id="theatre-company"><h2>Zespół</h2></article><article id="theatre-about"><h2>O teatrze</h2></article><article id="theatre-news"><h2>Aktualności</h2></article><article id="theatre-visit"><h2>Wizyta</h2></article><article id="theatre-tickets"><h2>Bilety</h2></article>
    <i id="theatre-premieres-target"></i><i id="theatre-calendar-target"></i><i id="theatre-touring-target"></i><i id="theatre-dancers-target"></i><i id="theatre-creators-target"></i><i id="theatre-story-target"></i><i id="theatre-education-target"></i><i id="theatre-news-target"></i><i id="theatre-press-target"></i><i id="theatre-access-target"></i><i id="theatre-directions-target"></i><i id="theatre-buy-target"></i><i id="theatre-prices-target"></i>
  </section>
</main>

*{box-sizing:border-box}[hidden]{display:none!important}html{scroll-behavior:smooth}body{margin:0;min-width:320px;min-height:100vh;overflow-x:hidden;background:#f2eee5;color:#11110f;font:16px/1.45 Arial,sans-serif}.theatre-page{min-height:100vh}.theatre-masthead{border-bottom:2px solid #11110f;background:#f2eee5}.theatre-masthead nav{max-width:1240px;margin:auto}.theatre-grid{display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch;min-height:88px}.theatre-primary{display:flex;align-items:stretch;gap:0;margin:0;padding:0;list-style:none}.theatre-brand-shell{margin:0;padding:0;list-style:none}.theatre-brand-shell>li{height:100%}.theatre-right{justify-content:flex-end}.theatre-primary button,.theatre-brand{display:flex;align-items:center;justify-content:center;min-height:48px;color:#11110f;text-decoration:none}.theatre-primary button{padding:12px 15px;border:0;border-bottom:5px solid transparent;border-radius:0;background:transparent;cursor:pointer;font:700 13px "Arial Narrow",Arial,sans-serif;letter-spacing:.04em}.theatre-primary button:hover,.theatre-primary button[aria-expanded=true]{border-color:#2849b8;color:#2849b8}.theatre-brand{width:100%;height:100%;min-width:178px;padding:12px 20px;flex-direction:column;border-left:1px solid #b7b0a5;border-right:1px solid #b7b0a5}.theatre-brand span{font:italic 17px Georgia,serif}.theatre-brand b{font:900 20px "Arial Narrow",Arial,sans-serif;letter-spacing:.12em}.theatre-panel{max-height:calc(100dvh - 92px);overflow:auto;border-top:1px solid #b7b0a5;border-bottom:7px solid #2849b8;background:#fffdf7}.theatre-panel>div{display:grid;grid-template-columns:minmax(210px,.65fr) 1.35fr;gap:30px;padding:22px 28px}.theatre-panel p{margin:0}.theatre-panel p b{display:block;font:italic 30px Georgia,serif}.theatre-panel p span{display:block;margin-top:4px;color:#59554d}.theatre-panel ul{display:grid;grid-template-columns:repeat(3,minmax(130px,1fr));gap:8px;margin:0;padding:0;list-style:none}.theatre-panel a{display:flex;align-items:center;min-height:46px;padding:8px 12px;border:1px solid #928b7f;color:#11110f;text-decoration:none}.theatre-panel a:hover{border-color:#c66b76;background:#f5e1e2}.theatre-hero{min-height:510px;padding:64px max(24px,calc((100vw - 1160px)/2));background:#11110f;color:#f2eee5}.theatre-hero>p{margin:0;color:#c9bff5;font:13px "Courier New",monospace}.theatre-hero h1{margin:32px 0;font:italic 500 clamp(58px,9vw,120px)/.82 Georgia,serif;letter-spacing:-.07em}.theatre-hero>div{display:flex;gap:40px;padding-top:18px;border-top:1px solid #5d5a55}.theatre-status{min-height:48px;margin:0;padding:14px max(24px,calc((100vw - 1160px)/2));border-bottom:1px solid #b7b0a5;color:#2849b8;font-weight:700}.theatre-targets{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:#b7b0a5}.theatre-targets article{min-height:110px;padding:20px;background:#f2eee5}.theatre-targets h2{margin:0;font:italic 23px Georgia,serif}.theatre-targets i{display:none}a:focus-visible,button:focus-visible{outline:4px solid #c66b76;outline-offset:-4px}@media(max-width:820px){.theatre-grid{grid-template-columns:1fr}.theatre-brand-shell{grid-row:1}.theatre-brand{min-height:66px;border:0;border-bottom:1px solid #b7b0a5}.theatre-primary{justify-content:center;flex-wrap:wrap}.theatre-primary button{padding:8px 12px}.theatre-panel>div{grid-template-columns:1fr}.theatre-panel ul{grid-template-columns:1fr 1fr}.theatre-targets{grid-template-columns:1fr 1fr}.theatre-hero{min-height:430px;padding-top:45px}}@media(max-width:420px){.theatre-primary{display:grid;grid-template-columns:repeat(3,1fr);width:100%}.theatre-primary button{width:100%;min-width:44px;padding:8px 4px;font-size:12px}.theatre-panel>div{padding:17px 14px}.theatre-panel ul{grid-template-columns:1fr}.theatre-hero h1{font-size:54px}.theatre-hero>div{flex-direction:column;gap:7px}.theatre-targets{grid-template-columns:1fr}}@media(max-height:400px){.theatre-panel{max-height:270px}.theatre-hero{min-height:330px;padding-top:30px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}

$(function(){const $panel=$('#theatre-panel'),$triggers=$('[data-theatre]');let active='',opener=null;function closePanel(focus){$panel.prop('hidden',true);$panel.find('[data-theatre-panel]').prop('hidden',true);$triggers.attr('aria-expanded','false');active='';if(focus&&opener)opener.focus()}function openPanel(name,trigger){active=name;opener=trigger;$panel.prop('hidden',false);$panel.find('[data-theatre-panel]').prop('hidden',true).filter('[data-theatre-panel="'+name+'"]').prop('hidden',false);$triggers.attr('aria-expanded','false');$(trigger).attr('aria-expanded','true');$('#theatre-status').text('Otwarto dział: '+$(trigger).text()+'.');const first=$panel.find('[data-theatre-panel="'+name+'"] a')[0];if(first)first.focus()}$triggers.on('click',function(event){event.preventDefault();const name=$(this).data('theatre');active===name?closePanel(true):openPanel(name,this)}).on('keydown',function(event){if(event.key!=='ArrowLeft'&&event.key!=='ArrowRight')return;event.preventDefault();const list=$triggers.toArray(),index=list.indexOf(this),next=(index+(event.key==='ArrowRight'?1:-1)+list.length)%list.length;list[next].focus()});$panel.on('click','a',function(event){event.preventDefault();$('#theatre-status').text('Wybrano: '+$(this).text()+'.');closePanel(true)});$(document).on('keydown',function(event){if(event.key==='Escape'&&active){event.preventDefault();closePanel(true)}}).on('pointerdown',function(event){if(active&&!$(event.target).closest('.theatre-masthead').length)closePanel(false)});$('nav a[href^="#"]').on('click',function(event){event.preventDefault();const nav=$(this).closest('nav');nav.find('[aria-current]').removeAttr('aria-current');$(this).attr('aria-current','page')});});