@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

:root {
    --media-frame-ratio: 4 / 3;
    --media-frame-bg: #111827;
}

/* --- ZÁKLADNÍ NASTAVENÍ --- */

body {
    /* Nastavení písma */
    font-family: 'Inter', sans-serif;
    /* Odstranění základních okrajů pro správné zarovnání navigace */
    margin: 0;
    padding-top: 80px !important;
}

/* --- STYLY PRO PROFILY ČLENŮ --- */

.member-profile img {
    /* Ponecháno: Plynulý přechod pro efekt hover */
    transition: transform 0.3s ease;
}

.member-profile:hover img {
    /* Ponecháno: Zvětšení obrázku při najetí myší */
    transform: scale(1.05);
}

/* --- STYLY PRO MODÁLNÍ OKNO (DETAIL ČLENA) --- */

#member-modal {
    /* Ponecháno: Plynulý přechod pro opacity */
    transition: opacity 0.3s ease;
    padding-top: 80px;
    top: 0;
    align-items: flex-start;
}

/* Scrollovatelný obsah v modálu */
#member-modal .overflow-y-auto {
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
}

/* --- STYLY PRO GALERIÁLNÍ OBRÁZKY --- */

.gallery-img {
    width: 100%;
    aspect-ratio: var(--media-frame-ratio);
    height: auto;
    object-fit: cover;
    display: block;
    background-color: var(--media-frame-bg);
}

#hero-carousel {
    width: 100%;
    max-width: 600px;
    aspect-ratio: var(--media-frame-ratio);
    position: relative;
    overflow: hidden;
    background-color: var(--media-frame-bg);
}

#hero-carousel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

#member-modal > div {
    margin-top: 40px;
    margin-bottom: 40px;
    position: relative;
}
#close-modal {
  /* Tlačítko pro zavření: sloučené vlastnosti */
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  /* Přechody: pozadí rychlejší, barva trochu pomaleji pro hladší efekt */
  transition: background 0.2s ease, color 0.3s ease;
}

#close-modal:hover {
  /* Efekty hover: tmavé pozadí + zvýrazněná barva ikony/textu */
  background: rgba(255,255,255,0.1);
  color: #667eea;
}

/* --- CUSTOM SCROLLBAR --- */

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #000;
}

::-webkit-scrollbar-thumb {
    background: #333;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* --- TEXT OUTLINE (pro text přes obrázky ve formuláři) --- */

.text-outline {
    text-shadow:
        -1px -1px 0 #000, 1px -1px 0 #000,
        -1px  1px 0 #000, 1px  1px 0 #000,
        -2px  0   0 #000, 2px  0   0 #000,
         0   -2px 0 #000, 0    2px 0 #000;
    position: relative;
    z-index: 20;
}

.text-outline-sm {
    text-shadow:
        -1px -1px 0 #000, 1px -1px 0 #000,
        -1px  1px 0 #000, 1px  1px 0 #000,
        -1px  0   0 #000, 1px  0   0 #000,
         0   -1px 0 #000, 0    1px 0 #000;
    position: relative;
    z-index: 20;
}