:root{
  --bg:#f7fafc;
  --card:#ffffff;
  --muted:#475569;
  --text:#0f172a;
  --accent:#ef4444;
  --accent2:#f59e0b;
  --line: rgba(15,23,42,.10);
  --shadow: 0 18px 45px rgba(15,23,42,.12);
  --radius: 10px;
  --header-height: 76px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background:var(--bg);
  background-image: url("../img/grid.svg");
/*
  background-image:
    repeating-linear-gradient(
      to right,
      rgba(11,16,32,0.02) 0px,
      rgba(11,16,32,0.02) 1px,
      transparent 1px,
      transparent 20px
    ),
    repeating-linear-gradient(
      to bottom,
      rgba(11,16,32,0.02) 0px,
      rgba(11,16,32,0.02) 1px,
      transparent 1px,
      transparent 20px
    );
*/
  line-height:1.55;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit}

.container{max-width:1100px; margin:0 auto; padding:0 18px}

.skip{position:absolute; left:-999px; top:10px; background:#111827; color:#fff; padding:10px 12px; border-radius:10px}
.skip:focus{left:10px; z-index:1000}

/*
.header{position:sticky; top:0; z-index:50; background: rgba(255,255,255,.72); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line)}
*/

.header{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

.header__inner{display:flex; align-items:center; justify-content:space-between; gap:14px; min-height:76px}

.brand{display:flex; align-items:center; gap:12px; text-decoration:none}
.brand__logo{width:82px; height:44px; border-radius:1px; border:1px solid var(--line); background:#fff}
.brand__name{font-weight:900; letter-spacing:.06em}
.brand__meta{font-size:.9rem; color:var(--muted)}

/*
.nav{display:flex; gap:6px; align-items:center; flex-wrap:wrap; justify-content:flex-end}
*/
.nav__link{text-decoration:none; padding:10px 12px; border-radius:10px; color:#0f172a; border:1px solid transparent; transition: transform .12s ease, border-color .12s ease, background .12s ease}
.nav__link:hover{border-color: var(--line); background: rgba(15,23,42,.04)}
.nav__link.is-active{border-color: rgba(239,68,68,.30); background: rgba(239,68,68,.08)}

.nav__toggle{display:none; border:1px solid var(--line); background: rgba(255,255,255,.72); color: var(--text); border-radius: 12px; padding:10px 12px}
.nav__toggleLines{display:block; width:22px; height:14px; position:relative}
.nav__toggleLines:before,.nav__toggleLines:after{content:""; position:absolute; left:0; right:0; height:2px; background:#0f172a; border-radius:2px}
.nav__toggleLines:before{top:2px}
.nav__toggleLines:after{bottom:2px}


/* === HAMBURGER ICON (☰) === */

.nav__toggle{
  position: relative;
}

/* střední čárka */
.nav__toggleLines{
  position: relative;
  display: block;
  width: 22px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: background 0.2s ease;
}

/* horní a dolní čárka */
.nav__toggleLines::before,
.nav__toggleLines::after{
  content: "";
  position: absolute;
  left: 0;
  width: 22px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition:
    transform 0.25s ease,
    top 0.25s ease,
    opacity 0.2s ease;
}

.nav__toggleLines::before{
  top: -6px;
}

.nav__toggleLines::after{
  top: 6px;
}

/* === OTEVŘENO → KŘÍŽEK (✕) === */

.nav__toggle[aria-expanded="true"] .nav__toggleLines{
  background: transparent; /* schová prostřední čáru */
}

.nav__toggle[aria-expanded="true"] .nav__toggleLines::before{
  top: 0;
  transform: rotate(45deg);
}

.nav__toggle[aria-expanded="true"] .nav__toggleLines::after{
  top: 0;
  transform: rotate(-45deg);
}

.hero{padding:42px 0 26px}
.hero__grid{display:grid; grid-template-columns: 1.15fr .85fr; gap:22px; align-items:center}
.hero__text h1{font-size: clamp(2rem, 3vw, 3rem); margin:0 0 10px}
.accent{color:var(--accent)}
.lead{color:#0f172a; opacity:.88; font-size:1.05rem}

.card{background: rgba(255,255,255,.86); border:1px solid var(--line); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow)}
.card__title{margin:0 0 10px; font-size:1.1rem}

.actions{display:flex; flex-wrap:wrap; gap:10px; margin-top:12px}
.btn{display:inline-flex; align-items:center; justify-content:center; padding:5px 14px; border-radius: 10px; border:1px solid rgba(239,68,68,.35); background: linear-gradient(180deg, rgba(239,68,68,.14), rgba(245,158,11,.10)); text-decoration:none; font-weight:800}
.btn:hover{transform: translateY(-1px)}
.btn--ghost{border-color: var(--line); background: rgba(255,255,255,.65)}

.section{padding:22px 0 36px}
.grid3{display:grid; grid-template-columns: repeat(3, 1fr); gap:14px}
.grid2{display:grid; grid-template-columns: 1fr 1fr; gap:14px}
.tile{background: rgba(255,255,255,.72); border:1px solid var(--line); border-radius: var(--radius); padding: 16px; box-shadow: 0 10px 24px rgba(15,23,42,.08)}
.link{color: var(--accent); text-decoration:none; font-weight:800}
.link:hover{text-decoration:underline}

.pagehead{padding:26px 0 10px}
.pagehead h1{margin:0 0 6px; font-size: clamp(1.8rem, 2.6vw, 2.6rem)}

.show{display:grid; grid-template-columns: .92fr 1.08fr; gap:16px; align-items:start}
.show__media img{border-radius: var(--radius); border:1px solid var(--line); background:#fff}
.show__title{margin:0 0 6px}
.meta{display:grid; gap:10px; margin-top:12px}

.toolbar{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:14px}
.input{padding:10px 12px; border-radius: 10px; border:1px solid var(--line); background: rgba(255,255,255,.75); color: var(--text); min-width: 240px}

.cards{display:grid; grid-template-columns: repeat(2, 1fr); gap:14px}
.showcard{padding:0; overflow:hidden}
.showcard__img{width:100%; height:auto; border:1px solid var(--line)}
.showcard__body{padding:14px 14px 16px}
.showcard__top{display:flex; justify-content:space-between; gap:10px; align-items:baseline}
.badge{display:inline-flex; padding:4px 10px; border-radius:10px; border:1px solid rgba(239,68,68,.30); background: rgba(239,68,68,.08); color:#0f172a; font-weight:900; font-size:.85rem}

/*
.gallery{display:grid; grid-template-columns: repeat(3, 1fr); gap:12px}
*/

.gallery{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.gallery figure{margin: 0;}

.gallery__item{
  background: rgba(255,255,255,.72);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px;
}

.gallery__item img{
  display: block;       /* zruší inline mezery */
  aspect-ratio: 4 / 3;  /* nebo 3/2 */
  object-fit: cover;
  width: 100%;          /* vyplní celý sloupec */
  height: 100%;         /* nebo height: auto; */
  border-radius: 10px;
  transition: transform .15s ease;
  border: 1px solid var(--line);
}

.gallery__item a{
  display:block;
}

.gallery__item a:hover img{
  transform: scale(1.02);
}

.embed-placeholder{border:1px dashed rgba(15,23,42,.20); border-radius: var(--radius); padding:18px; background: rgba(255,255,255,.55); text-align:center}

.footer{border-top: 1px solid var(--line); background: rgba(255,255,255,.72); padding: 26px 0 10px}
.footer__grid{display: flex; flex-direction: column; gap: 14px; align-items: start}
.footer__title{margin: 0 0 8px; font-size: 1rem}
.footer__bottom{border-top: 1px solid var(--line); margin-top: 18px; padding-top: 10px; color: var(--muted)}
.footer p{margin: 4px 0;}
/*
.footer{line-height: 1.3;}
*/

.form label{display: grid; gap: 6px; margin: 8px 0; font-size: 0.95rem}
.form input,.form textarea{padding:10px 12px; border-radius: 12px; border:1px solid var(--line); background: rgba(255,255,255,.75); color: var(--text)}

.list{margin:8px 0 0; padding-left:18px; color: var(--muted)}
.chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px}
.chip{padding:6px 10px; border-radius:10px; border:1px solid var(--line); background: rgba(255,255,255,.72); color:#0f172a; text-decoration:none}

.muted{color: var(--muted)}
.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}

h3 { margin-top: 0px; /* Mezery */ }

main { padding-top: var(--header-height); /* výška hlavičky */ }
section[id^="galerie-"]{ scroll-margin-top: calc(var(--header-height) + 12px); }
article.showcard{ scroll-margin-top: calc(var(--header-height) + 12px); /* výška hlavičky v odehraných představeních + rezerva */ }

/* SEKCE PRO NÁBOR */

.section--recruit{
  background: rgba(255,255,255,0.02); /* nebo lehký overlay */
  display: block;                       /* VYPÍNÁNÍ SEKCE PRO NÁBOR - "none" místo "block" */
}

.recruit{
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
  align-items: center;
}

.recruit h2{
  margin-top: 0;
}

.recruit__list{
  margin: 12px 0;
  padding-left: 18px;
}

.recruit__list li{
  margin: 6px 0;
}

.recruit__highlight{
  font-size: 1.1rem;
  font-style: italic;
  opacity: 0.85;
  text-align: center;
  padding: 16px;
  border: 1px dashed var(--line);
  border-radius: 16px;
}

.recruit__link{
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.section h2,
.section h3{
  margin-top: 0;
  margin-bottom: 8px;
}

.index-list{
  list-style: none;
  padding: 0;
  margin: 0;
}

.index-list li{
  margin: 6px 0;
}

.index-list a{
  font-weight: 600;
  text-decoration: none;
}

.index-list a:hover{
  text-decoration: underline;
}

/* ===== Mini karty – rozcestník odehraných představení ===== */

.index-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}

.index-card{
  display: block;
  padding: 14px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.04);
  text-decoration: none;
  text-align: center;
  transition:
    background 0.15s ease,
    transform 0.15s ease,
    box-shadow 0.15s ease;
}

.index-card strong{
  font-weight: 600;
}

.index-card:hover{
  background: rgba(255,255,255,0.08);
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.25);
}

#kontakt{
  scroll-margin-top: 92px; /* uprav dle výšky hlavičky */
}

/* ===== ZAŘÍZENÍ ===== */

/* tablet */
@media (max-width: 900px){
  .gallery{
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
}

/* mobil */
@media (max-width: 520px){
  .gallery{
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
}

@media (max-width: 920px){
  .nav.is-open{
    background: #f7fafc; /* plně neprůhledné */
    backdrop-filter: none; /* vypnout sklo */
  }
}

@media (max-width: 920px){

  .nav{
    position: absolute;
    top: 76px; /* výška headeru */
    left: 0;
    right: 0;

    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px;

    /* === VÝCHOZÍ STAV (ZAVŘENO) === */
    background: #0f172a;          /* neprůhledné */
    border-bottom: 1px solid var(--line);

    transform: translateY(-12px); /* menu je o kousek výš */
    opacity: 0;
    pointer-events: none;

    transition:
      transform 0.35s ease,
      opacity 0.25s ease;
  }

  /* === OTEVŘENO === */
  .nav.is-open{
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
}

@media (max-width: 920px){
  .hero__grid{grid-template-columns: 1fr;}
  .show{grid-template-columns: 1fr;}
  .footer__grid{grid-template-columns: 1fr;}
  .grid3{grid-template-columns: 1fr;}
  .grid2{grid-template-columns: 1fr;}
  .cards{grid-template-columns: 1fr;}
  .gallery{grid-template-columns: repeat(2, 1fr);}
  .nav{position:absolute; top:76px; left:0; right:0; padding:12px 14px; display:none; background: rgba(255,255,255,.92); border-bottom:1px solid var(--line)}
  .nav.is-open{display:flex}
  .nav__toggle{display:inline-flex}
}

@media (max-width: 520px){
  .gallery{grid-template-columns: 1fr;}
  .input{min-width: 100%}
}

/* mobil */
@media (max-width: 900px){
  .recruit{
    grid-template-columns: 1fr;
    text-align: center;
  }

  .recruit__list{
    text-align: left;
    display: inline-block;
  }
}