/* ============================================================
   art-flower.pl — warstwa własna nad CSS z Webflow
   1) fallback dla submenu (w-dropdown bez sprawnego JS)
   2) galeria autentycznych realizacji (archiwum 2015)
   ============================================================ */

/* --- 1. Submenu: bez tego 3 podstrony zajęć są nieosiągalne z menu --- */
.w-dropdown:hover > .w-dropdown-list,
.w-dropdown:focus-within > .w-dropdown-list {
  display: block;
}

.w-dropdown-list {
  min-width: 260px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
  border-radius: 4px;
  overflow: hidden;
  z-index: 1001;
}

.w-dropdown-list .w-dropdown-link {
  display: block;
  padding: 10px 16px;
  color: #333;
  text-decoration: none;
  white-space: nowrap;
}

.w-dropdown-list .w-dropdown-link:hover {
  background: #f2ede6;
}

.dropdown-toggle {
  cursor: pointer;
}

/* data-collapse="medium" → poniżej 991px menu przechodzi w hamburger */
@media screen and (max-width: 991px) {
  .w-dropdown,
  .w-dropdown-toggle {
    display: block;
  }

  .w-dropdown-list {
    display: block;
    position: static;
    box-shadow: none;
    background: transparent;
    min-width: 0;
  }

  .w-dropdown-list .w-dropdown-link {
    padding-left: 32px;
  }
}

/* --- 2. Galeria realizacji --- */
.galeria-sekcja {
  max-width: 940px;
  margin: 48px auto 64px;
  padding: 0 10px;
}

.galeria-tytul {
  margin: 0 0 20px;
  text-align: center;
}

.galeria {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.galeria img {
  display: block;
  width: 100%;
  /* archiwalne miniatury są kwadratowe (555x555 / 500x500),
     więc 1:1 + cover wypełnia kafelek bez przycinania kadru */
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 3px;
  background: #f0ece7;
}

@media screen and (max-width: 767px) {
  .galeria {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .galeria-sekcja {
    margin: 32px auto 40px;
  }
}