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

html {
  font-family: "Courier Prime", monospace;
  font-size: 10px;
  margin: 20px;
  margin-top: 0;
}

#main-container {
  display: flex;
  gap: 20px;
  padding: 20px 20px 20px 0px;
  box-sizing: border-box;
}

/* Bal oldal maradt a régi */
#main-container-left {
  margin-top: 0;
  width: 15vw;
  min-width: 130px;
  display: flex;
  flex-direction: column;
  gap: 0px;
  color: #4b4b4b;
  z-index: 10;
  transform: translateY(-3%);
}

#main-container-left h3 {
  font-size: 1.5rem;
  color: #4b4b4b;
  font-weight: 300;
  margin-bottom: 0;
}

.filter-btn {
  font-size: 1.35rem;
  display: block;
  cursor: pointer;
  transition: background-color 0.2s ease;
  margin: 6px 0;
}

.filter-btn.active-filter {
  text-decoration: underline;
}

/* ÚJ: Az 'X' (ami a <b> tagben van) ne legyen aláhúzva */
.filter-btn.active-filter b {
  display: inline-block; /* Ez töri meg a szülő aláhúzását */
  text-decoration: none;
}

#city-list h3, #category-list h3 { margin-top: 20px; margin-bottom: 10px; font-size: 1.9rem;}
#year-list h3 { margin-top: 0; margin-bottom: 10px; font-size: 1.9rem;}


/* --- JOBB OLDAL (AZ ÚJ LOGIKA) --- */
#main-container-right {
  /* Itt már nem Flexboxot használunk, hanem Multi-column layoutot */
  display: block; 
  width: 100%;
  
  /* Ezeket a JS is állítja, de itt van az alap */
  column-count: 5;
  column-gap: 24px;
  column-fill: auto; /* Ez kulcsfontosságú: sorban töltse fel az oszlopokat */
  
  /* A magasságot a JS fogja állítani pixelpontosan */
  height: auto; 
  
  overflow: hidden; /* Hogy a "duplázás" előtti pillanatban ne jelenjen meg görgetősáv */
}

/* FONTOS: A betűcsoportok (pl. "A" betű és a lista) TÖRJHETNEK oszlopok között */
.letter-group {
    break-inside: auto; /* Engedélyezzük a törést */
    margin-bottom: 10px;
    display: block; /* Biztosítjuk, hogy blokk elem legyen */
}

.letter-group h3 {
  margin: 0;
  padding-bottom: 0px;
  font-size: 1.9rem;
  font-weight: 300;
  color: #4b4b4b;
  text-decoration: none;
  
  /* A címsor ne maradjon egyedül az oszlop alján */
  break-after: avoid; 
}

.letter-group hr {
  border: none;
  border-top: 1px dashed #4b4b4b;
  margin: 5px 0 10px 0;
}

.letter-group ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.letter-group ul li {
   /* A lista elemek törhetnek */
   display: block;
}

.simple-item {
  margin-bottom: 5px;
  break-inside: avoid; /* Hogy egy név ne törjön ketté */
}

.simple-item, .letter-group ul li {
    margin-bottom: 5px;
    break-inside: avoid; 
    page-break-inside: avoid;
}

.simple-item a, .letter-group ul li a, #clear-filters-link {
  font-size: 1.35rem;
  text-decoration: none;
  color: #4b4b4b;
  display: block; /* Fontos a helyes tördeléshez */
  margin: 10px 0;
}

.simple-item a:hover, .letter-group ul li a:hover {
  text-decoration:line-through;
}

/* Reszponzivitás megtartása */
@media (max-width: 1200px) {
  #main-container-left { width: 18vw;
  }
}

@media (max-width: 900px) {
  /* A fő konténer legyen blokk, ne flex, hogy a szűrő beolvadhasson */
  #main-container {
    display: block !important; 
  }

  /* A jobb oldali konténer (lista) legyen 2 oszlopos */
  #main-container-right {
    column-count: 2 !important;
    column-gap: 15px !important;
    display: block;
  }

  /* A bal oldali panel (szűrők) stílusa, amikor bekerül a listába */
  #main-container-left {
    width: 100% !important;     /* Töltse ki az oszlop szélességét */
    min-width: 0 !important;
    margin-bottom: 0;        /* Térköz a szűrők és az első graffiti között */
    break-inside: avoid;        /* Ne törjön szét a szűrődoboz oszlopok között */
    display: block;             /* Biztos ami biztos */
    border-bottom: 2px solid #ccc; /* Kis elválasztó vizuálisan */
    padding-bottom: 0;
    transform: translateY(0%);
  }
  
  /* Ha a szűrők vízszintesen voltak (előző kód maradvány), most álljanak vissza függőlegesre */
  #main-container-left {
      flex-direction: column !important;
  }
  
  #year-list, #city-list, #category-list {
      margin-bottom: 15px;
  }
}