/* =========================================================
   UDG – novy web (design z artworku "Múzy")
   Bootstrap 5.3 + vlastni vrstva
   ========================================================= */

:root {
  --noc: #2b2340;        /* hluboka svestkova noc - tmave sekce */
  --inkoust: #1d1829;    /* paticka */
  --svestka: #6e4f73;    /* malba, texty na svetlem */
  --magenta: #c2187a;    /* logo, akce */
  --magenta-tmava: #9c0f60;
  --logo: #03a9fe;       /* logo kapely (2026-09) */
  --led: #7fcff4;        /* modra z loga desky - logo, akcent na tmavem */
  --pudr: #f5e9f0;       /* svetle sekce */
  --bila: #fff;

  --pismo: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif;
  --pismo-logo: "Montserrat", "Arial Black", sans-serif;
  --nav-vyska: 72px;
}

/* ---------- zaklad ---------- */
html { scroll-behavior: smooth; scroll-padding-top: var(--nav-vyska); }
body {
  font-family: var(--pismo);
  font-optical-sizing: auto;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--noc);
  background: var(--pudr);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }
a { color: var(--magenta); }
a:hover { color: var(--magenta-tmava); }
:focus-visible { outline: 3px solid var(--led); outline-offset: 3px; }

.udg-sekce { position: relative; padding: clamp(4rem, 9vw, 8rem) 0; overflow: hidden; }

.udg-nadpis {
  font-weight: 800;
  font-size: clamp(2.6rem, 6.5vw, 5.25rem);
  line-height: .92;
  letter-spacing: -.035em;
  margin: 0 0 1.25rem;
}
.udg-perex { max-width: 30ch; font-size: 1.125rem; opacity: .8; margin-bottom: 2.5rem; }

/* ---------- tlacitka ---------- */
.udg-btn {
  --bs-btn-padding-x: 1.4rem;
  --bs-btn-padding-y: .7rem;
  --bs-btn-font-weight: 700;
  --bs-btn-border-radius: 999px;
  --bs-btn-color: var(--bila);
  --bs-btn-bg: var(--magenta);
  --bs-btn-border-color: var(--magenta);
  --bs-btn-hover-color: var(--bila);
  --bs-btn-hover-bg: var(--magenta-tmava);
  --bs-btn-hover-border-color: var(--magenta-tmava);
  --bs-btn-active-bg: var(--magenta-tmava);
  --bs-btn-active-color: var(--bila);
  letter-spacing: .01em;
  white-space: nowrap;
}
.udg-btn--obrys {
  --bs-btn-color: var(--bila);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: rgba(255,255,255,.7);
  --bs-btn-hover-bg: var(--bila);
  --bs-btn-hover-color: var(--noc);
  --bs-btn-hover-border-color: var(--bila);
}
.udg-btn--vyprodano {
  --bs-btn-bg: transparent;
  --bs-btn-border-color: rgba(255,255,255,.5);
  --bs-btn-color: rgba(255,255,255,.8);
  pointer-events: none;
  text-decoration: line-through;
}
.udg-btn--velke { --bs-btn-padding-x: 2.2rem; --bs-btn-padding-y: 1rem; font-size: 1.2rem; }

/* ---------- navigace ---------- */
.udg-nav {
  min-height: var(--nav-vyska);
  transition: background-color .3s ease, box-shadow .3s ease;
}
.udg-nav.je-plna { background: rgba(43,35,64,.94); backdrop-filter: blur(8px); box-shadow: 0 1px 0 rgba(255,255,255,.08); }
/* logo - text Montserrat Bold, modra + sedy stin vlevo dole (dle loga kapely) */
.udg-logo { font-family: var(--pismo-logo); font-weight: 700; color: var(--logo); letter-spacing: -.01em; line-height: 1; text-decoration: none; text-shadow: -.02em .02em .03em rgba(0,0,0,.3); }
.udg-nav .navbar-brand.udg-logo { font-size: 2rem; color: var(--logo); }
.udg-nav .navbar-brand.udg-logo:hover { color: var(--bila); }
.udg-nav .container-xl { max-width: none; padding-inline: max(1.5rem, calc((100vw - 1760px) / 2)); }
.udg-nav .nav-link { color: var(--bila); font-weight: 600; padding: .5rem .9rem !important; }
.udg-nav .nav-link:hover, .udg-nav .nav-link.active { color: var(--led); }
.udg-soc .nav-link { font-size: 1.15rem; padding: .5rem .55rem !important; }
.udg-nav .navbar-toggler { color: var(--bila); border: 0; font-size: 2rem; padding: 0; }
.udg-nav .navbar-toggler:focus { box-shadow: none; }
@media (max-width: 991.98px) {
  .udg-nav .navbar-collapse { background: var(--noc); margin: 0 -.75rem; padding: 1rem .75rem 1.5rem; }
  .udg-nav .nav-link { font-size: 1.4rem; }
  .udg-soc { flex-direction: row; }
}

/* ---------- uvod / hero ---------- */
.udg-hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  color: var(--bila);
  background: var(--svestka);
  overflow: hidden;
  isolation: isolate;
  --okraj: max(1.5rem, calc((100vw - 1760px) / 2));
}
.udg-hero__malba {
  position: absolute; inset: 0; z-index: -2;
  background:
    linear-gradient(180deg, rgba(43,35,64,.35) 0%, rgba(43,35,64,0) 25%, rgba(43,35,64,0) 55%, rgba(43,35,64,.9) 100%),
    url("../img/muzy/bg-malba.webp") center top / cover no-repeat;
}

/* postava - velikost podle vysky okna, aby na velkych monitorech nebyla mala */
.udg-hero__postava {
  position: absolute; z-index: 0;
  right: var(--okraj); bottom: 0;
  height: min(92svh, 1500px);
  aspect-ratio: 1712 / 1800;
  max-width: 58vw;
}
.udg-hero__portret {
  width: 100%; height: 100%; object-fit: contain; object-position: right bottom; display: block;
  -webkit-mask-image: linear-gradient(180deg, #000 82%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 82%, transparent 100%);
}
/* havran na rameni vpravo, mimo hlavu */
.udg-hero__havran {
  position: absolute;
  width: 22%;
  left: 76%; bottom: 13%;
  filter: drop-shadow(0 10px 20px rgba(43,35,64,.3));
}

.udg-hero__obsah { position: relative; z-index: 2; padding: calc(var(--nav-vyska) + 2rem) var(--okraj) 0; }
.udg-hero__text { max-width: 38rem; padding-bottom: clamp(3rem, 8vh, 6rem); }
.udg-hero__logo { margin: 0 0 2rem; font-size: clamp(5.5rem, 12vw, 13rem); }

.udg-dalsi__stitek { color: var(--led); font-weight: 700; margin-bottom: .5rem; }
.udg-dalsi__radek { display: flex; gap: 1.25rem; align-items: center; margin-bottom: 1.5rem; }
.udg-dalsi__datum { display: flex; flex-direction: column; line-height: 1; padding-right: 1.25rem; border-right: 2px solid rgba(255,255,255,.35); }
.udg-dalsi__datum .den { font-size: clamp(3rem, 5vw, 4.2rem); font-weight: 800; letter-spacing: -.04em; }
.udg-dalsi__datum .mesic { font-weight: 600; opacity: .85; margin-top: .25rem; white-space: nowrap; }
.udg-dalsi__nazev { font-size: clamp(1.5rem, 2.6vw, 2.2rem); font-weight: 800; line-height: 1.05; letter-spacing: -.02em; margin: 0 0 .35rem; }
.udg-dalsi__meta { font-size: 1.1rem; opacity: .9; margin: 0; }
.udg-dalsi__akce { display: flex; flex-wrap: wrap; gap: .75rem; }

/* motyli - jediny orchestrovany pohyb na strance */
.udg-hero__motyli { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.motyl {
  position: absolute; height: auto;
  opacity: 0;
  animation: prilet 1.6s cubic-bezier(.2,.7,.2,1) forwards;
  filter: drop-shadow(0 6px 10px rgba(43,35,64,.25));
}
.m1  { width: clamp(44px, 4vw, 90px);   left: 52%; top: 16%; animation-delay: .20s; --r: -12deg; }
.m2  { width: clamp(38px, 3.2vw, 72px); left: 66%; top: 9%;  animation-delay: .35s; --r: 14deg; }
.m3  { width: clamp(40px, 3.4vw, 76px); left: 90%; top: 20%; animation-delay: .50s; --r: -6deg; }
.m5  { width: clamp(50px, 4.4vw, 100px); left: 44%; top: 40%; animation-delay: .65s; --r: 8deg; }
.m7  { width: clamp(44px, 3.8vw, 84px); left: 93%; top: 50%; animation-delay: .80s; --r: -18deg; }
.m8  { width: clamp(52px, 4.6vw, 104px); left: 36%; top: 12%; animation-delay: .95s; --r: 10deg; }
.m9  { width: clamp(22px, 1.8vw, 40px); left: 60%; top: 30%; animation-delay: 1.1s; --r: -20deg; }
.m10 { width: clamp(46px, 4vw, 92px);   left: 10%; top: 24%; animation-delay: 1.25s; --r: 6deg; }

@keyframes prilet {
  0%   { opacity: 0; transform: translate(60px, 120px) rotate(calc(var(--r) - 30deg)) scale(.6); }
  100% { opacity: 1; transform: translate(0, 0) rotate(var(--r)) scale(1); }
}

@media (max-width: 991.98px) {
  .udg-hero__malba { background-image: linear-gradient(180deg, rgba(43,35,64,.3) 0%, rgba(43,35,64,0) 25%, rgba(43,35,64,.2) 45%, rgba(43,35,64,.92) 75%), url("../img/muzy/bg-malba-na-vysku.webp"); background-position: center top; }
  .udg-hero__postava { right: 50%; transform: translateX(50%); top: calc(var(--nav-vyska) - .5rem); bottom: auto; height: auto; width: min(560px, 100vw); max-width: none; }
  .udg-hero__portret { height: auto; -webkit-mask-image: linear-gradient(180deg, #000 50%, transparent 88%); mask-image: linear-gradient(180deg, #000 50%, transparent 88%); }
  .udg-hero__havran { width: 22%; left: auto; right: 1%; bottom: 30%; }
  .udg-hero__text { padding-top: min(78vw, 440px); }
  .udg-hero__logo { font-size: min(7.5rem, 30vw); }
  .m1 { left: 6%; top: 14%; } .m2 { left: 84%; top: 12%; } .m5 { left: 82%; top: 40%; }
  .m9 { left: 12%; top: 34%; } .m10 { left: 72%; top: 56%; }
  .m3, .m7, .m8 { display: none; }
}

/* ---------- koncerty ---------- */
.udg-koncerty { background: var(--pudr); }
.udg-koncerty::before {
  content: ""; position: absolute; right: -10%; top: -20%; width: 60%; aspect-ratio: 1;
  background: url("../img/muzy/akvarel.webp") center / cover;
  -webkit-mask-image: radial-gradient(closest-side, #000 20%, transparent 100%);
          mask-image: radial-gradient(closest-side, #000 20%, transparent 100%);
  opacity: .55; pointer-events: none;
}
.udg-koncerty .container-xl { position: relative; }
.udg-koncerty .udg-nadpis { color: var(--magenta); }

.udg-seznam { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--noc); }
.udg-koncert {
  display: grid;
  grid-template-columns: 6.5rem 1fr auto;
  gap: 1.5rem;
  align-items: center;
  padding: 1.4rem 0;
  border-bottom: 1px solid rgba(43,35,64,.18);
}
.udg-koncert__datum { display: flex; flex-direction: column; line-height: 1; }
.udg-koncert__datum .den { font-size: 3.2rem; font-weight: 800; letter-spacing: -.04em; color: var(--magenta); }
.udg-koncert__datum .mesic { font-weight: 600; color: var(--svestka); margin-top: .2rem; }
.udg-koncert__info h3 { font-size: 1.4rem; font-weight: 700; margin: 0 0 .2rem; letter-spacing: -.01em; }
.udg-koncert__info p { margin: 0; color: var(--svestka); }
.udg-koncert__info .kde { margin-left: .75rem; }
.udg-stitek { font-weight: 700; color: var(--svestka); border: 1px solid currentColor; border-radius: 999px; padding: .45rem 1rem; white-space: nowrap; }
.je-vyprodano .udg-koncert__datum .den { color: var(--svestka); }

.udg-prazdno { border-top: 2px solid var(--noc); padding-top: 1.5rem; }
.udg-prazdno p { font-size: 1.25rem; max-width: 34ch; }

@media (max-width: 575.98px) {
  .udg-koncert { grid-template-columns: 4.5rem 1fr; gap: 1rem; }
  .udg-koncert__datum .den { font-size: 2.4rem; }
  .udg-koncert__akce { grid-column: 2; }
  .udg-koncert__info .kde { display: block; margin: .2rem 0 0; }
}

/* ---------- e-shop ---------- */
.udg-produkt .popis { display: none !important; } /* popis se na webu nezobrazuje */
.udg-nav__shop { color: var(--led) !important; }
.udg-nav__shop::after { content: "\2197"; margin-left: .25rem; font-size: .8em; }
.udg-eshop {
  background:
    linear-gradient(90deg, rgba(245,233,240,.94) 0%, rgba(245,233,240,.75) 45%, rgba(245,233,240,.2) 100%),
    url("../img/muzy/akvarel.webp") center / cover no-repeat;
}
.udg-eshop .udg-nadpis { color: var(--magenta); }
.udg-produkt { display: flex; flex-direction: column; height: 100%; background: var(--bila); border-radius: 6px; overflow: hidden; color: var(--noc); text-decoration: none; box-shadow: 0 20px 50px -25px rgba(43,35,64,.45); transition: transform .3s ease, box-shadow .3s ease; }
.udg-produkt:hover { color: var(--noc); transform: translateY(-4px); box-shadow: 0 28px 60px -25px rgba(43,35,64,.55); }
.udg-produkt__foto { position: relative; display: block; aspect-ratio: 1; background: var(--pudr); }
.udg-produkt__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.udg-produkt__stitek { position: absolute; left: 1rem; top: 1rem; background: var(--magenta); color: var(--bila); font-weight: 700; font-size: .9rem; padding: .35rem .8rem; border-radius: 999px; }
.udg-produkt__info { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1rem; padding: 1.1rem 1.25rem 1.25rem; }
.udg-produkt__info .nazev { flex: 1 1 100%; font-size: 1.3rem; font-weight: 800; letter-spacing: -.01em; line-height: 1.15; }
.udg-produkt__info .cena { font-size: 1.15rem; font-weight: 600; color: var(--svestka); margin-right: auto; }
.udg-produkt__info .cena s { font-weight: 400; opacity: .6; margin-left: .35rem; font-size: .9em; }
@media (min-width: 768px) {
  .udg-produkt--hlavni { flex-direction: row; }
  .udg-produkt--hlavni .udg-produkt__foto { flex: 0 0 55%; }
  .udg-produkt--hlavni .udg-produkt__info { flex: 1 1 auto; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; justify-content: center; gap: .5rem; padding: 2rem; }
  .udg-produkt--hlavni .nazev { flex: 0 0 auto; font-size: 1.8rem; }
  .udg-produkt--hlavni .cena { margin: 0 0 .75rem; font-size: 1.3rem; }
}
@media (prefers-reduced-motion: reduce) { .udg-produkt { transition: none; } }

/* ---------- klipy + fotky (tmava zona) ---------- */
.udg-klipy, .udg-fotky { background: var(--noc); color: var(--bila); }
.udg-klipy { background: linear-gradient(180deg, rgba(43,35,64,0) 60%, var(--noc) 100%), var(--noc) url("../img/muzy/gradient.webp") center / cover no-repeat; }
.udg-klipy .udg-nadpis, .udg-fotky .udg-nadpis { color: var(--led); }
.udg-klipy .container-xl { position: relative; z-index: 1; }
.udg-klipy__mura { position: absolute; width: clamp(220px, 32vw, 460px); right: -4%; top: 2rem; transform: rotate(-8deg); opacity: .95; }

.udg-klip { position: relative; display: block; border-radius: 6px; overflow: hidden; background: var(--inkoust); aspect-ratio: 16 / 9; color: var(--bila); text-decoration: none; }
.udg-klip img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.udg-klip::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(29,24,41,.8), rgba(29,24,41,0) 55%); }
.udg-klip__play {
  position: absolute; left: 1.5rem; bottom: 1.5rem; z-index: 1;
  width: 4rem; height: 4rem; border-radius: 50%;
  display: grid; place-items: center; font-size: 2rem;
  background: var(--magenta);
}
.udg-klip__nazev { position: absolute; left: 6.5rem; bottom: 1.9rem; z-index: 1; font-size: clamp(1.5rem, 3vw, 2.4rem); font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.udg-klip--male .udg-klip__play { left: 1rem; bottom: 1rem; width: 3rem; height: 3rem; font-size: 1.5rem; }
.udg-klip--male .udg-klip__nazev { left: 4.75rem; right: 1rem; bottom: 1.2rem; font-size: clamp(1.05rem, 1.6vw, 1.3rem); line-height: 1.15; }
.udg-klip:hover img, .udg-klip:focus-visible img { transform: scale(1.04); }
.udg-klip:hover { color: var(--bila); }
.udg-klipy__vice { margin: 2rem 0 0; }
.udg-klipy__vice a { color: var(--led); font-weight: 600; }

.udg-fotky { padding-top: 1rem; }
.udg-mrizka { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.udg-mrizka a { display: block; border-radius: 4px; overflow: hidden; aspect-ratio: 4 / 3; }
.udg-mrizka a:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
.udg-mrizka img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity .3s ease; }
/* 4, 7, ... fotek: prvni pres celou sirku, ostatni po trech */
.udg-mrizka--sirokaprvni a:first-child { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 21 / 9; }
@media (max-width: 575.98px) {
  .udg-mrizka--sirokaprvni a:first-child { aspect-ratio: 4 / 3; }
  .udg-mrizka--sirokaprvni a:last-child { grid-column: 1 / -1; }
  .udg-mrizka { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .udg-mrizka a:first-child { grid-row: auto; aspect-ratio: 4 / 3; }
}
.udg-mrizka a:hover img { opacity: .85; }

/* ---------- kapela ---------- */
.udg-kapela { background: var(--pudr); }
.udg-kapela .udg-nadpis { color: var(--magenta); }
@media (min-width: 992px) { .udg-lepi { position: sticky; top: calc(var(--nav-vyska) + 2rem); } }
.udg-clen { margin: 0; }
.udg-clen img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 4px; display: block; background: var(--svestka); }
.udg-clen figcaption { padding-top: .75rem; display: flex; flex-direction: column; line-height: 1.3; }
.udg-clen strong { font-size: 1.35rem; font-weight: 800; letter-spacing: -.01em; }
.udg-clen .role { color: var(--magenta); font-weight: 600; }
.udg-clen .jmeno { color: var(--svestka); font-size: .95rem; margin-top: .3rem; }
.udg-clen a { font-size: .95rem; color: var(--noc); text-decoration-color: rgba(43,35,64,.35); }

/* ---------- booking ---------- */
.udg-booking {
  color: var(--bila);
  background: var(--inkoust);
}
/* vlasy v nativnim rozliseni vpravo, nabihaji prechodem */
.udg-booking::before {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0;
  width: min(100%, 1261px);
  background: url("../img/muzy/vlasy.webp") right center / cover no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 35%, #000 75%);
          mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 35%, #000 75%);
  opacity: .8;
}
.udg-booking .container-xl { position: relative; }
.udg-booking .udg-nadpis { color: var(--bila); max-width: 12ch; }
.udg-booking__jmeno { font-size: 1.3rem; font-weight: 600; margin-bottom: .2rem; }
.udg-booking__mail { font-size: clamp(1.3rem, 2.6vw, 2rem); font-weight: 700; color: var(--led); word-break: break-word; }
.udg-booking__mail:hover { color: var(--bila); }
@media (max-width: 991.98px) { .udg-booking .udg-btn--velke { margin-top: 2rem; } }

/* ---------- paticka ---------- */
.udg-paticka { background: var(--inkoust); color: rgba(255,255,255,.6); padding: 2rem 0; font-size: .95rem; }
.udg-paticka__logo { font-size: 1.8rem; }
.udg-paticka p { margin: 0; }
.udg-paticka__soc { list-style: none; display: flex; gap: 1.25rem; margin: 0; padding: 0; font-size: 1.3rem; }
.udg-paticka__soc a { color: var(--bila); }
.udg-paticka__soc a:hover { color: var(--led); }

/* ---------- omezeni pohybu ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .motyl { animation: none; opacity: 1; transform: rotate(var(--r)); }
  .udg-klip img { transition: none; }
}