.hero { height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; background: linear-gradient(to bottom, #0d0d0d 0%, rgba(0, 0, 0, 0.4) 15%, rgba(0, 0, 0, 0.7) 100%), url('../img/Fotky/web/1.jpg') no-repeat center 33%; background-size: cover; margin-top: -80px; }
.hero-content h2 { font-size: 5rem; color: var(--accent-color); margin-bottom: 15px; font-family: var(--font-brand); text-transform: uppercase; letter-spacing: 3px; text-shadow: 2px 2px 5px rgba(0,0,0,0.8); }

@media (min-width: 1800px) {
    .hero-content h2 { font-size: 7.5rem; letter-spacing: 5px; }
}
.hero-content p { font-size: 1.2rem; margin-bottom: 30px; }

.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.about-text { font-size: 1.1rem; }
.about-image .image-placeholder { height: 400px; width: 100%; }

/* --- FORMÁTOVÁNÍ TEXTU O NÁS --- */
.about-text p { margin-bottom: 20px; color: #cccccc; }
.about-text strong { color: var(--accent-color); font-weight: 600; }

.band-vision { margin-top: 30px; padding-left: 20px; border-left: 3px solid var(--accent-color); background: rgba(255, 255, 255, 0.03); padding-top: 15px; padding-bottom: 1px; border-radius: 0 5px 5px 0; }
.band-vision p { font-style: italic; margin-bottom: 15px; }

/* --- ROZBALOVACÍ SEKCE A TLAČÍTKO --- */
.more-btn-container { text-align: center; margin-top: 60px; }
.btn-more { background: transparent; color: var(--accent-color); border: none; font-family: var(--font-heading); font-size: 1.1rem; cursor: pointer; text-transform: uppercase; letter-spacing: 2px; transition: all 0.3s ease; }
.btn-more:hover { color: #888; }
.btn-more span { display: inline-block; transition: transform 0.3s; margin-left: 10px; font-weight: bold; }
.btn-more:hover span { transform: translateY(5px); }

/* --- Hladké (smooth) rozbalení --- */
.hidden-members { 
    display: flex; 
    flex-direction: column; 
    gap: 80px; 
    /* Výchozí stav: zabaleno a neviditelné */
    max-height: 0; 
    overflow: hidden; 
    margin-top: 0; 
    opacity: 0;
    transition: max-height 0.7s ease-in-out, margin-top 0.7s ease-in-out, opacity 0.7s ease-in-out; 
}
.hidden-members.show { 
    /* Výšku dopočítá JS, my tu přidáme jen viditelnost a mezeru */
    margin-top: 60px; 
    opacity: 1;
}

.member-row { display: flex; align-items: center; gap: 50px; }
.member-row:nth-child(even) { flex-direction: row-reverse; text-align: left; }

.member-info { flex: 1; }
.member-info h3 { 
    font-size: 1.8rem; 
    margin-bottom: 15px; 
    color: var(--accent-color); 
    letter-spacing: 2px; 
    text-align: left;
}
.member-info p { font-size: 1.1rem; color: var(--text-color); }

/* --- EFEKT FOTEK A PROBLIKNUTÍ KOSTLIVCE --- */
.member-photo { flex: 1; position: relative; aspect-ratio: 1/1; border: 1px solid var(--border-color); background-color: #050505; overflow: hidden; }
.skeleton-bg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 60%; height: 60%; background-size: contain; background-repeat: no-repeat; background-position: center; opacity: 0.3; z-index: 1; }
.member-photo img.real-photo { position: relative; z-index: 2; width: 100%; height: 100%; object-fit: cover; object-position: top; filter: grayscale(1); transition: transform 0.5s ease; }
.member-photo:hover img.real-photo { animation: ghostReveal 0.8s forwards; }

@keyframes ghostReveal {
    0% { opacity: 1; filter: grayscale(1); transform: scale(1); }
    30% { opacity: 0.15; transform: scale(1.03); } 
    100% { opacity: 1; filter: grayscale(0); transform: scale(1.05); } 
}

/* --- RESPONSIVITA --- */
@media (max-width: 900px) { .about-grid { grid-template-columns: 1fr; } }
@media (max-width: 768px) {
    .hero { height: 100vh; margin-top: -80px; }
    .hero-content h2 { font-size: 2.2rem !important; padding: 0 10px; }
    
    /* OPRAVA: Místo text-align: center; tu dáme text-align: left; */
    .member-row, .member-row:nth-child(even) { 
        flex-direction: column !important; 
        text-align: left; 
        gap: 30px; 
    }
    
    .member-photo { width: 100%; }
}