.gallery-preview{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:12px;
  padding:14px;
  border-radius:22px;
  background:rgba(18,26,42,.55);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 18px 50px rgba(0,0,0,.28);
}

.tile{
  border-radius:18px;
  min-height:110px;
  background-size:cover;
  background-position:center;
  border:1px solid rgba(255,255,255,.10);
  filter: brightness(0.95);
  transition: transform .25s ease, filter .25s ease, opacity .6s ease;
}
.tile:hover{
  transform: translateY(-3px);
  filter: brightness(1.05);
}
.t1{ grid-column: span 2; min-height:150px; }
.t4{ grid-column: span 2; min-height:150px; }

.t1{ background-image: url("images/cat1-1.jpg"); }
.t2{ background-image: url("images/cat1-2.jpg"); }
.t3{ background-image: url("images/cat2-1.jpg"); }
.t4{ background-image: url("images/cat2-2.jpg"); }
.t5{ background-image: url("images/cat3-1.jpg"); }
.t6{ background-image: url("images/cat3-2.jpg"); }

/* Filtry */
.filters{
  margin-top: 14px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.filter-btn{
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.18);
  /* background: rgba(18,26,42,.55); */
  background: transparent;  
  border-color: var(--text);
  color: var(--text);
  cursor: pointer;
  transition: transform .15s ease, filter .15s ease;
}

.filter-btn:hover{
  transform: translateY(-1px);
  filter: brightness(1.05);
  transform: scale(1.1);
}

.filter-btn.active{
  background-image:
    url("../images/dark_wood_2.webp");
  border-color: var(--text2);
  transform: scale(1.1);
  color: var(--text2);    
}

/* Siatka zdjęć */
.grid{
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}

/* Miniatury */
.gallery-img{
  width: 100%;
  height: 260px;
  object-fit: cover;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease;
}

.gallery-img:hover{
  transform: scale(1.03);
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
}

/* Ukrywanie po filtrze */
.gallery-img.is-hidden{
  display: none;
}

@media (max-width: 640px){
  .gallery-img{ height: 220px; }
}

@media (max-width: 640px){

  .section{
    padding: 56px 12px;
  }

  h1{
    font-size: clamp(22px, 6.2vw, 30px);
    line-height: 1.1;
    margin: 0 0 10px 0;
  }

  /* filtry: pełna szerokość i łamanie */
  .filters{
    gap: 8px;
  }

  .filter-btn{
    flex: 1 1 auto;        /* przyciski się łamią w wierszach */
    padding: 10px 10px;
    font-size: 14px;
  }

  .grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  /* miniatury: mniejsze i równe */
  .gallery-img{
    height: 160px;
    border-radius: 14px;
  }

  /* przycisk powrotu */
  .btn{
    font-size: 14px;
    padding: 10px 14px;
  }
}

/* bardzo małe telefony: 1 kolumna */
@media (max-width: 380px){
  .grid{
    grid-template-columns: 1fr;
  }
  .gallery-img{ height: 200px; }
}