/* GLOBAL */
body {
  margin: 0;
  padding: 0;
  background: #002218;
  font-family: "Times New Roman", serif;
  color: #F5EEDC;

  background-image:
    radial-gradient(rgba(255,255,255,0.10) 1px, transparent 1px),
    radial-gradient(rgba(255,255,255,0.08) 1px, transparent 1px),
    radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 4px 4px, 6px 6px, 8px 8px, 5px 5px, 7px 7px;
  background-blend-mode: overlay;
}

/* GLOBAL FLUID SCALING */
html {
  font-size: clamp(10px, 1.2vw, 18px);
}

/* BACK BUTTON */
.back-btn {
  display: inline-block;
  margin: 2rem 3rem;
  color: #F5EEDC;
  font-size: 1.4rem;
  text-decoration: none;
  font-weight: bold;
  transition: 0.2s ease;
}

.back-btn:hover {
  color: #dcd2b4;
  transform: translateX(-4px);
}

/* HEADER + DROPDOWN */
.gallery-header {
  margin: 0 3rem 1rem 3rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.gallery-header h1 {
  font-size: 3.2rem;
  margin: 0;
}

/* UNDERLINE */
.underline {
  width: clamp(120px, 20vw, 200px);
  height: 3px;
  background: #F5EEDC;
  margin-left: 3rem;
  margin-bottom: 2rem;
}

/* DROPDOWN */
.jump-menu select {
  background: #F5EEDC;
  color: #002218;
  padding: 0.6rem 1rem;
  font-size: 1.2rem;
  border: 2px solid #F5EEDC;
  border-radius: 6px;
  cursor: pointer;
}

/* MAIN WRAPPER */
.gallery-wrapper {
  max-width: 1300px;
  margin: 0 auto;
  padding: 2rem 3rem 5rem;
}

/* YEAR TITLE */
.year-title {
  font-size: 2.4rem;
  margin-top: 4rem;
  margin-bottom: 1.4rem;
  border-left: 6px solid #F5EEDC;
  padding-left: 1rem;
}

/* EVENT BLOCK */
.event-block {
  margin-bottom: 4rem;
}

.event-title {
  font-size: 1.8rem;
  margin-bottom: 1.4rem;
  border-bottom: 2px solid rgba(245, 238, 220, 0.5);
  padding-bottom: 0.6rem;
}

/* GRID 3x2 */
.event-images {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* uvijek 3 u redu na desktopu */
  gap: 1.4rem;
  margin-top: 1.4rem;
}

/* tablet */
@media (max-width: 900px) {
  .event-images {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* mobitel */
@media (max-width: 600px) {
  .event-images {
    grid-template-columns: 1fr;
  }
}


/* IMAGE BOXES */
.event-images img,
.event-placeholder {
  width: 100%;
  height: clamp(160px, 22vw, 240px);
  border: 3px solid #F5EEDC;
  border-radius: 8px;
  object-fit: cover;
  background: rgba(255,255,255,0.1);
  transition: 0.25s ease;
}

/* HOVER */
.event-images img:hover {
  transform: scale(1.03);
  border-color: #ffffff;
}

/* PLACEHOLDER */
.event-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #F5EEDC;
  font-size: 1.2rem;
  opacity: 0.4;
  font-style: italic;
}

/* LIGHTBOX */
.lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.85);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 999;
}

.lightbox.active {
  display: flex;
}

.lightbox img {
  max-width: 90%;
  max-height: 90%;
  border: 4px solid #F5EEDC;
  border-radius: 10px;
}

/* MOBILE FIXES */
@media (max-width: 600px) {
  .gallery-header {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }

  .underline {
    margin-left: 0;
    margin: 1rem auto;
  }

  .back-btn {
    margin: 1.5rem;
  }
}