/* =====================================================================
   zespol.css - WSPOLNY arkusz dla stron zespolow (jump-free)
   Odlany ze sprawdzonej, przepisanej szwagry.php (wzorzec "od zera").
   Linkuj zamiast inline <style>. NIE dawac tu html{background} ani
   font-family/color/line-height/min-height na body (Zasada #1/#1b/#5/#6
   z jump_potwierdzone_przypadki.md). Strony zespolow NIE linkuja style.css.
   ===================================================================== */

/* --- FUNDAMENT (jump-free) --- */
body {
    background: #0a2a0a url('green080.jpg') repeat;   /* Zasada #6: fallback kolor PRZED obrazkiem */
    margin: 5px;                                       /* margin OK; NIE dawac tu font/color/line-height */
}
*, *::before, *::after { box-sizing: border-box; }

/* Domyslny kolor/font tresci - na WRAPPERZE, nie na body (Zasada #1) */
#container {
    color: aqua;
    font-family: Arial, Helvetica, sans-serif;
}
#container img { max-width: 100%; height: auto; }

/* --- PANEL #005560 --- */
.content-box {
    max-width: 835px;
    margin: 0 auto 20px;
    padding: 20px;
    background-color: #005560;
    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.3);
    border-radius: 20px;
}

/* --- TYPOGRAFIA --- */
.tekstZespol {
    font-family: times, Verdana, Arial, Helvetica, sans-serif;
    font-size: 48px;        /* kanon style.css (cala witryna) - bylo 40px ze szwagry */
    font-weight: bold;
    text-decoration: underline;
    color: red;
    text-align: center;     /* nazwa zespolu wysrodkowana */
    word-spacing: 6px;      /* odstep miedzy wyrazami (do regulacji) */
}
.tekstZespol a { color: red; text-decoration: underline; }   /* tytul jako link history.back() */
.tekstAqua   { color: aqua;   text-align: justify; }
.tekstSilver { color: silver; }
.member { color: white;  }   /* nazwisko czlonka zespolu (wyroznione w opisie) */
.vocal  { color: silver; }   /* wokalista */

/* Maly link powrotu "Klik - powrot / back" */
.link-powrot { text-align: center; margin: 10px 0; }
.link-powrot a { color: yellow; font-size: 11px; text-decoration: none; }
.link-powrot a:hover { color: red; }
.section-title {
    color: lime;
    text-decoration: underline;
    margin-bottom: 15px;
}
.year-label {
    text-align: center;
    color: lime;
    font-size: 16px;
    margin: 15px 0;
    font-weight: bold;
}
.click-info {
    text-align: center;
    color: silver;
    font-size: 14px;
    margin: 10px 0;
}
hr { border: 1px solid gray; margin: 20px 0; }

/* --- GALERIA (prosta, statyczna) --- */
.gallery-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}
#container .gallery-grid a img {
    border: 1px solid white;
    display: block;
    max-width: 150px;
    height: auto;
}

/* --- GALERIA Z PODPISAMI (mobile-gallery.js) ---
   KONTRAKT: <div class="galeria galeria-1kol"> <a href="podstrona.html"><img src="FOTO/miniatura.jpg"></a> ...
   Desktop: dowolny uklad (autor decyduje; domyslnie elastyczny rzad).
   Mobile: mobile-gallery.js dociaga z <a href> DUZE zdjecie + PODPIS z tej podstrony i wstawia
   .mobile-gallery-item + .mobile-gallery-caption POD zdjeciem.
   >>> ZASADA KOLUMN NA MOBILE (decyzja usera 2026-06-22): DOMYSLNIE 1 KOLUMNA (galeria-1kol).
       2/3 kolumny (galeria-2kol/galeria-3kol) TYLKO dla PORTRETOW. Zwykle zdjecia (wystepy,
       grupowe, wycinki) zawsze galeria-1kol. <<<
   Wymaga w stopce strony: <script src="js/desktop-lightbox.js"></script><script src="js/mobile-gallery.js"></script> */
.galeria {                       /* desktop: elastyczny rzad, autor moze nadpisac per strona */
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    align-items: center;         /* wyrownanie miniatur w rzedzie */
    margin: 15px 0;              /* odstep miedzy rzedami galerii (jak w oryginale - "paddingi") */
}
#container .galeria a img {       /* DESKTOP miniatury: ROWNA WYSOKOSC, szerokosc wg proporcji */
    border: 1px solid white;
    display: block;
    height: 110px;
    width: auto;
    max-width: none;
}
#container .galeria .mobile-gallery-item img {  /* zdjecie po podmianie przez mobile-gallery.js */
    border: 1px solid white;
    display: block;
    max-width: 150px;
    height: auto;
}
@media (max-width: 768px) {
    /* podpis pod zdjeciem (wstawiany przez mobile-gallery.js) - pelna szerokosc (override JS max-width:98%) */
    #container .mobile-gallery-caption {
        color: aqua; font-size: 13px; line-height: 1.4;
        text-align: justify; margin: 5px auto 0; max-width: 100%;
    }
    /* ZDJECIE wypelnia PELNA SZEROKOSC kolumny (jak podpis). Na desktopie miniatury max-width:150px,
       ale na mobile ten limit trzeba zdjac - inaczej zdjecie zostaje male przy pelnej szerokosci podpisu.
       Dotyczy 1/2/3 kolumn (override bazowej reguly .galeria .mobile-gallery-item img). */
    #container .galeria .mobile-gallery-item img { max-width: 100%; width: 100%; }
    /* 1 kolumna - DOMYSLNA dla wszystkich zwyklych zdjec */
    #container .galeria-1kol { display: block; }
    #container .galeria-1kol .mobile-gallery-item { width: 100%; margin: 10px auto; }
    /* 2 kolumny - TYLKO PORTRETY */
    #container .galeria-2kol { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    #container .galeria-2kol .mobile-gallery-item { width: 100%; margin: 0; }
    #container .galeria-2kol .mobile-gallery-item img { width: 100%; max-width: 100%; }
    /* 3 kolumny - TYLKO PORTRETY */
    #container .galeria-3kol { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
    #container .galeria-3kol .mobile-gallery-item { width: 100%; margin: 0; }
    #container .galeria-3kol .mobile-gallery-item img { width: 100%; max-width: 100%; }
}

/* --- ZDJECIA STATYCZNE (bez podstron HTML i bez podpisow) ---
   Dla stron, gdzie zdjecia sa wstawione wprost (FOTO/..._100.jpg), a opis jest
   wpisany w stronie (NIE dociagany przez mobile-gallery.js). Rzad elastyczny:
   kilka zdjec obok siebie na desktopie, pelna szerokosc/stos na waskim ekranie.
   NIE uzywac klas .gallery/.galeria tutaj (te uruchamiaja mobile-gallery.js,
   ktory wymaga <a href="podstrona.html">). */
.foto-statyczne {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
    margin: 20px 0;
}
#container .foto-statyczne img { max-width: 100%; height: auto; }

/* Wymuszone kolumny NA DESKTOPIE - zdjecia SKALUJA sie, by zmiescic sie obok siebie (jak grid w oryginale).
   Bez tego szerokie zdjecia (np. ~450px) zawijaja w pion. Stosuj gdy chcesz 2/3 zdjecia w rzedzie na desktopie.
   NA MOBILE i tak schodzi do 1 kolumny (zasada: mobile = 1 kolumna; 2/3 tylko portrety w .galeria). */
#container .foto-statyczne.foto-2kol { display: grid; grid-template-columns: 1fr 1fr; }
#container .foto-statyczne.foto-3kol { display: grid; grid-template-columns: 1fr 1fr 1fr; }
#container .foto-statyczne.foto-2kol img,
#container .foto-statyczne.foto-3kol img { width: 100%; max-width: 100%; }
@media (max-width: 768px) {
    #container .foto-statyczne img { width: 100%; }
    #container .foto-statyczne.foto-2kol,
    #container .foto-statyczne.foto-3kol { grid-template-columns: 1fr; }  /* mobile = 1 kolumna */
}

/* --- Zaokraglone rogi zdjec FOTO/ (jak gorne 4 w blue.php) --- */
img[src*="FOTO/"] { border: 1px solid silver !important; border-radius: 6px !important; }

/* --- RESPONSYWNOSC --- */
/* .tekstZespol na mobile - kanon style.css: <=600px 35px, <=400px 29px */
@media (max-width: 768px) {
    .content-box { padding: 15px; margin: 0 10px 20px; }
}
@media (max-width: 600px) {
    .tekstZespol { font-size: 35px; word-wrap: break-word; }
}
@media (max-width: 480px) {
    .content-box { padding: 10px; }
}
@media (max-width: 400px) {
    .tekstZespol { font-size: 29px; }
}