@import url('https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');

html,body {
    background-color: #052658ea; /* Temně šedá, téměř černá */
    color: #e0e0e0; /* Světle šedý text pro dobré čtení */
    font-family: 'Playfair Display', serif;    
    font-size: larger;
    margin: 0; /* Vymaže výchozí bílé okraje prohlížeče */
    overflow-x: hidden;    
}
body.stranka-koncerty {
    background-color: #0b2e29;
}
#koncerty {
    background-color: #0b2e29; 
    color: #ffffff;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    padding: 60px 20px;
}

/* --- NADPIS S ČARAMI --- */
#koncerty .tour-header {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 40px;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

/* Vygenerování čar nalevo a napravo od nadpisu */
#koncerty .tour-header::before,
#koncerty .tour-header::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
    margin: 0 20px;
}

#koncerty h2 {
    font-size: 2.5rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 0;
}

/* --- SEZNAM KONCERTŮ --- */
#koncerty .tour-list {
    list-style: none;
    padding: 0;
    max-width: 1000px;
    margin: 0 auto;
}

/* --- JEDNOTLIVÝ ŘÁDEK --- */
.tour-item {
    display: grid;
    /* Rozdělení do 3 sloupců: Datum (nejmenší), Klub a Město (větší) */
    grid-template-columns: 1fr 2fr 2fr; 
    align-items: center;
    padding: 25px 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Jemná dělící čára */
    transition: background-color 0.2s ease;
}

/* Zvýraznění řádku po najetí myší */
.tour-item:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

/* Styl pro jednotlivé sloupce */
.tour-date {
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.tour-venue {
    font-size: 1.05rem;
}

.tour-location {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.7); /* Mírně ztlumená barva pro lokaci */
}

#hlavni-obsah {
    padding: 20px; /* Aby text nebyl nalepený úplně na hrany obrazovky */
    transition: margin-left 0.3s ease; /* Zase chceme, aby ten pohyb byl plynulý, jako u menu */
    margin-left: 250px;
    min-height: 80.4dvh;
    
}

/* Tohle pravidlo posune hlavní obsah, když je menu otevřené */
#hlavni-obsah.posunuto {
    margin-left: 0px; /* Těchto 250px odpovídá přesně šířce menu, které jsme nastavili dřív */
}

#bocni-menu {
    height: 100dvh; /* Roztáhne menu na celou výšku okna (100% viewport height) */
    width: 250px; /* Šířka menu */
    position: fixed; /* Zafixuje menu na místě i při scrollování stránky dolů */
    top: 0;
    left: 0px; /* Zásadní trik: posuneme menu o 250px doleva, takže zmizí za okrajem monitoru */
    background-color: #0b5075c0; /* O něco světlejší černá než zbytek webu, aby se to oddělilo */
    transition: left 0.3s ease; /* Když se změní vlastnost left, ať se to stane plynule za 0.3 vteřiny */
    padding-top: 60px; /* Odsazení odshora, aby odkazy nebyly nalepené na horní hranu */
    z-index: 6;
}

#bocni-menu a {
    color:rgba(251, 251, 249, 0.939);
    text-decoration:wavy /* Tato vlastnost řídí podtržení. Když sem zadáš slovo 'none', podtržení zmizí. */ ;
    font-size:30px       /* Tímto zvětšíš písmo. Zadávej číslo v pixelech, třeba '22px'. */ ;
    display: block        /* Abys mohl později odkazům nastavit lepší mezery mezi sebou, zadej sem slovo 'block'. Tím se každý odkaz roztáhne na celý svůj řádek v menu. */ ;
    padding: 20px;
    font-family: 'Courier Prime', monospace;

}

#bocni-menu a:hover {
    background-color: #3d3846;
}

#bocni-menu ul {
    list-style: none;
    padding: 0;
}
/* Tuhle třídu přidáme později pomocí JavaScriptu, aby menu vyjelo */
#bocni-menu.otevreno {
    left: -250px; /* Posune menu zpět na nulovou souřadnici (bude vidět) */
}
#bocni-menu img {
    width: 80px; /* Definuje fixní šířku, můžeš si číslo libovolně upravit */
    display: block; /* Umožní nám s obrázkem lépe manipulovat */
    margin: 0 auto 30px auto; /* Tento trik s 'auto' vycentruje kozu doprostřed menu a přidá pod ní 30px mezeru */
}
/* Vzhled tlačitka */
#menu-tlacitko {
    font-size: 20px;
    cursor: pointer;
    background-color: transparent;
    color: white;
    border: none;
    padding: 15px;
    position: fixed;
    z-index: 7; /* Zajistí, že tlačítko bude vždy úplně nahoře nad vším ostatním */
}
#menu-tlacitko::before {
    
   
    /* 1. Aby vrstva vůbec vznikla, CSS vyžaduje vlastnost content, i když je prázdná */
    content: ""; 
    /* 2. Roztáhneme vrstvu přesně přes celé menu od kraje ke kraji */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* 3. Tady pošleme vrstvu do pozadí (za text, ale nad tvoji modrou barvu) */
    z-index: -1; 
    
    /* 4. Tady nastavíme onu kýženou průhlednost (0.2 znamená 20 % viditelnosti) */
    opacity: 0.0; 
    transition: 0.3s ease; /* Když se změní vlastnost left, ať se to stane plynule za 0.3 vteřiny */

    
    /* 5. A sem vlož ty tři původní řádky s kozou z předchozího pokusu */
    background-image: url('/static/goat.png'); 
    background-size: 60px 40px;
    background-repeat: no-repeat; 
    background-position: 0;
}
#menu-tlacitko.zmiz::before {
    
    /* 4. Tady nastavíme onu kýženou průhlednost (0.2 znamená 20 % viditelnosti) */
    opacity: 0.6; 

    background-position: +30px;
}
#jazyk-switch
{
    position: fixed; 
    top: 15px; 
    right: 20px;
    z-index: 7;
}

/* Definice mřížky */
.galerie-mrizka {
    display: grid;
    /* Tohle magické pravidlo říká: "Vytvoř sloupce, které mají minimálně 250px.
       Pokud je obrazovka širší, poskládej jich vedle sebe co nejvíc." */
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px; /* Mezera mezi čtverci */
    padding-top: 30px;
}

/* Vzhled jedné dlaždice */
.album-dlazdice {
    background-color: #1a1a1a;
    text-decoration: none; /* Zbavíme se podtržení odkazu */
    color: #e0e0e0;
    border-radius: 8px; /* Jemně zaoblené rohy */
    overflow: hidden; /* Aby obrázek nepřetekl ze zaoblených rohů */
    transition: transform 0.2s ease; /* Příprava na animaci po najetí myší */
}

/* Efekt při najetí myší - čtverec lehce povyskočí */
.album-dlazdice:hover {
    transform: translateY(-5px);
}

/* Kontejner pro obrázek, abychom zaručili jeho čtvercový tvar */
.obrazek-kontejner {
    width: 100%;
    aspect-ratio: 1 / 1; /* Tohle vynutí přesný čtverec bez ohledu na šířku */
    overflow: hidden;
}

/* Samotný obrázek uvnitř čtverce */
.obrazek-kontejner img {
    width: 100%;
    height: 100%;
    /* object-fit: cover je zásadní - ořízne obrázek, aby se vešel do čtverce bez deformace! */
    object-fit: cover; 
}

/* Texty dole v dlaždici */
.album-info {
    padding: 15px;
}

.album-info h3 {
    margin: 0 0 5px 0;
    color: rgba(220, 4, 213, 0.762); /* Tvoje rocková fialová! */
}

.album-info p {
    margin: 0;
    font-size: 14px;
    color: #888;
}

#uvodni-stranka
{   
    padding-top:0;
    background-repeat: no-repeat;
    background-position: center -120px;
}

#uvodni-stranka ul{
    list-style: none;
    padding: 5px;
}

#login {
    opacity: 0;
    width: 20px;
    height: 10px;
    position: fixed;
    bottom: 0;
    left:0;
    z-index: 103;
}
#back-kontejner 
{
    padding-top: 40px;
}
#back-tlacitko {
    background-color: transparent;
    border: none;
    cursor: pointer;
}

#back-tlacitko img{
    width: 40px;
}

#hero-sekce {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100dvh; /* 100 % výšky obrazovky */
    background-image: url('/static/StudentFest/P5070505.JPG');
    background-size: cover;
    object-fit: cover;
    background-position: center 25%;
    z-index: 2; /* Aby byla fotka pod hlavním menu */
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
}
/* Třída pro zmenšenou fotku */
#hero-sekce.smrsteno {
    height: 120px; /* Zmenší se na malý pruh */
}

#hero-nadpis img {
    position: relative;
    filter: invert(100%);
}
/* nejblizsi koncerty*/
.nano-koncerty
{
    position: absolute;
    right: 40px;
    bottom: 5px;
    background-color: #65022c;
    text-decoration: none; /* Zbavíme se podtržení odkazu */
    color: #e0e0e0;
    border-radius: 10px; /* Jemně zaoblené rohy */
    width: 90%; 
    max-width: 400px;
    height: min-content;
    padding-left: 6px;
    z-index: 1;
    transition: opacity 0.3s ease;
    transition: transform 0.2s ease; /* Příprava na animaci po najetí myší */
    pointer-events: auto;
}

.nano-koncerty.schovano
{
    pointer-events: none;
    opacity: 0;
}
.nano-koncerty:hover{
    background-color: #87023a;
    bottom: 10px;
    transform: translateY(-5px);
}

/* Spodní obsah */
#spodni-obsah {
    margin-top: 100dvh; /* Začíná až pod první obrazovkou */
    position: relative;
    z-index: 1; /* Vyjede NAD fotku */
    background-color: transparent; /* Temně šedá, téměř černá */
    min-height: 100dvh;
    padding-right: 0;
    width: 100%;
}

#spodni-obsah img
{
    position: absolute;
    top: -80px;
    z-index: -1;
    left: 60%; /* Odsune levý okraj obrázku přesně do poloviny obrazovky */
    transform: translateX(-50%); 
    opacity: 0.8;
    /* Cukne s celým obrázkem o polovinu jeho vlastní šířky zpátky doleva, čímž najde dokonalý střed */
}
#widgety{
    position: absolute; 
    right:0; 
    top: 130px;
    pointer-events: auto;
    padding: 40px;
}
#bandcamp-okno{
    position: relative;
}
.tajny-text{
    opacity: 0;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom:100%;
    margin-bottom: 10px;
    
    /* --- NOVÝ VZHLED BUBLINY --- */
    
    /* 1. Font a text */
    font-family: 'Courier Prime', monospace; /* Zkus i 'Playfair Display', co sedne víc */
    font-size: 16px;
    color: #ffffff; 
    
    /* 2. Černé ohraničení (tělo bubliny) */
    background-color: rgba(0, 0, 0, 0.9); /* Téměř neprůhledná černá */
    border: 1px solid #000000; /* Kdybys chtěl vyloženě tvrdou čáru kolem */
    
    /* 3. Vnitřní prostor a tvar */
    padding: 6px 12px; /* 6px nahoře/dole, 12px vlevo/vpravo */
    border-radius: 6px; /* Zaoblené rohy, ať to nevypadá jak z Windows 95 */
    
    /* 4. Zabrání tomu, aby se ti slovo rozlomilo na dva řádky, kdyby bylo delší */
    white-space: nowrap; ;
}

#bandcamp-okno:hover .tajny-text{
    opacity: 1;
    text-decoration: dashed;
}

#hlavni-zapati {
    /* position: absolute; - TOHLE SMAŽ! */
    position: relative; /* Tohle ho vrátí do normálního světa */
    z-index:100;       /* Tohle ho vynese nad tu obří modrou deku */
    display: flex;
    justify-content: center; /* Vystředí ikonky i text doprostřed obrazovky */
    align-items: center;
    flex-direction: column;  /* Poskládá ikonky a text pod sebe */
    padding: 40px;
    background-color: rgba(0, 0, 0, 0.5); /* Lehce průhledná černá pro rockový vibe */
}

.socialni-ikony a {
    color: white;
    font-size: 30px; /* Zvětší ikony */
    margin: 0 15px;  /* Udělá jim mezery mezi sebou */
    transition: color 0.3s;
    text-decoration: none;
}

.socialni-ikony a:hover {
    color: rgba(220, 4, 213, 0.8); /* Při najetí myší zfialoví */
}

#hero-nadpis img {
    padding-left: 90px;
}

/* 1. Obal, který nám fotky poskládá do mřížky vedle sebe */
.album-detail-mrizka {
    display: grid;
    /* Fotky budou mít min. 250px, poskládají se automaticky vedle sebe */
    grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
    gap: 15px; 
}

/* 2. Pevně definovaný tvar pro JEDNU fotku */
.detail-fotka-kontejner {
    width: 100%;
    
    /* OTAZNÍK 1: Jakou vlastností v CSS řekneš, že kontejner má mít tvar 
       dokonalého čtverce (1:1) nebo třeba obdélníku (4:3)? */
    aspect-ratio: 5/3;
       
    /* OTAZNÍK 2: Co musíme udělat s částmi obrázku, 
       které by se do tohoto tvaru nevešly a chtěly by "přetéct" ven? */
    overflow: hidden;
}

/* 3. Samotný obrázek uvnitř tvaru */
.detail-fotka-kontejner img {
    width: 100%;
    height: 100%;
    
    /* OTAZNÍK 3: Tohle je ta absolutně nejdůležitější magie! 
       Jaká vlastnost zajistí, že se fotka nerozplácne ani nesmáčkne, 
       ale plynule vyplní náš čtverec/obdélník (byť se z ní kousek ořízne)? */
    object-fit: cover;
}

.band-bio-box {
    /* Omezení šířky a vycentrování na střed */
    max-width: 620px;
    margin: 2rem auto; 
    position: absolute;
    left: 0;
    padding-top: 0;
    /* Vnitřní prostor a zarovnání textu */
    padding: 1.5rem 2rem;
    text-align: center; 
    
    /* Volitelné: lehké zakulacení rohů */
    border-radius: 4px;
    
    /* Volitelné: stín pro "vytažení" do popředí */
}


@media screen and (max-width: 768px) {
    
    #hlavni-obsah {
        /* Tady zrušíme tu obří mezeru zleva */
        margin-left: 0; 
        padding: 20px; /* Trochu zmenšíme vnitřní okraje, na mobilu je 40px moc */
    }

    #hlavni-obsah.posunuto {
        /* I když se menu otevře, obsah už na mobilu nebudeme posouvat, 
           menu ho prostě překryje */
        margin-left: 0;
    }
    
    #hero-sekce {
        /* Upravíme pozici fotky, aby na malém displeji na výšku kapela nevypadla ze záběru */
        background-position: center top; 
    }

    #bocni-menu {
        left: -250px;
    }

    #bocni-menu.otevreno {
        left: 0;
    }
    #menu-tlacitko::before {
        /* 1. Základní stavební kameny (ty se nikdy nemění) */
        content: ""; 
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1; 
        transition: 0.3s ease; 
        background-image: url('/static/goat.png'); 
        background-size: 60px 40px;
        background-repeat: no-repeat; 
        
        /* 2. PROHOZENÝ VÝCHOZÍ STAV (Koza je rovnou vidět) */
        opacity: 0.6; 
        background-position: 30px;
    }

    #menu-tlacitko.zmiz::before {
        /* 3. ZMĚNA PO KLIKNUTÍ (Napíšeme SEM JEN TO, co se má změnit) */
        opacity: 0.0; 
        background-position: 0;
    }
    #spodni-obsah img
    {
        position: absolute;
        top: -100px;
        z-index: -1;
        left: 60%; /* Odsune levý okraj obrázku přesně do poloviny obrazovky */
        transform: translateX(-50%); 
        opacity: 0.25;
        /* Cukne s celým obrázkem o polovinu jeho vlastní šířky zpátky doleva, čímž najde dokonalý střed */
    }
    #ig-okno{
        position: relative;
    }
    #hero-nadpis img {
    scale: 0.28;
    }

    .tour-item {
        /* Na malých obrazovkách zrušíme sloupce a naskládáme obsah pod sebe */
        grid-template-columns: 1fr; 
        gap: 8px;
        text-align: center;
        padding: 20px 10px;
    }
    #widgety{
        position: relative;    
        top: 0px;
        padding: 0;
        /* OTAZNÍK 1: Jak zapneš tenhle moderní režim rozvržení? */
        display: flex;
        
        /* OTAZNÍK 2: Výchozí chování dává věci vedle sebe do řádku. 
           Jak Flexboxu řekneš, aby widgety poskládal pěkně pod sebe do sloupce? */
        flex-direction: column;
        
        /* OTAZNÍK 3: Jaká vlastnost (kterou jsi použil v patičce) 
           zarovná všechny tyto položky ve sloupci přesně na vodorovný střed? */
        align-items: center;
        pointer-events: auto;
    }
    #bandcamp-okno {
        /* 1. Nastavíme obalu stejnou šířku, jako mívá Instagram na mobilu */
        width: 280px; 
        
        /* 2. Zapneme v něm Flexbox, ať můžeme zarovnávat obsah uvnitř */
        display: flex;
        
        /* 3. Tohle přilepí ten 150px široký iframe na levý okraj této 320px krabice */
        justify-content: flex-start; 
    }
    .nano-koncerty
    {
        right: 0;
    }
    #spodni-obsah{
        min-height: 110dvh;

    }
}