/* Masonry columns + prevent item splits */
.masonry { column-gap: 1rem; }
@media (min-width: 768px){ .masonry { column-count: 2; } }
@media (min-width: 1024px){ .masonry { column-count: 3; } }
.masonry-item { break-inside: avoid; margin-bottom: 1rem; }

/* Optional subtle overlay on hover (bottom fade) */
.card { position: relative; overflow: hidden; border-radius: 0.75rem; }
.card img { transition: transform .5s ease; display:block; width:100%; height:auto; }
.card:hover img { transform: scale(1.06); }
.card .overlay {
  position:absolute; inset:0; opacity:0; transition: opacity .3s ease;
  display:flex; align-items:flex-end; padding:0.75rem;
  background: linear-gradient(to top, rgba(0,0,0,.5), rgba(0,0,0,0));
}
.card:hover .overlay { opacity:1; }
.card .caption { color:#fff; font-size:.9rem; line-height:1.2; }

/* 🔹 NEW: Overlay at the TOP instead of bottom */
.card .overlay-top {
  position: absolute;
  inset: 0 auto auto 0;  /* pin to top */
  width: 100%;
  padding: 0.5rem 0.75rem;
  background: linear-gradient(to bottom, rgba(0,0,0,0.6), rgba(0,0,0,0));
  opacity: 0;
  transition: opacity .3s ease;
}
.card:hover .overlay-top { opacity: 1; }

.card .caption-top {
  color: #fff;
  font-size: 0.9rem;
  font-weight: 500;
}
.fancybox__slide {
    padding-top: 40px !important;  /* adds top space */
  }


  /* underline-on-hover for md+ screens */
  .navlink {
    position: relative;
  }
  @media (min-width: 768px) {
    .navlink::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: -3px;           /* distance from text */
      height: 2px;            /* line thickness */
      width: 0;
      background: currentColor; /* matches text color; dark mode-friendly */
      transition: width .3s ease;
    }
    .navlink:hover::after,
    .navlink:focus-visible::after {
      width: 100%;
    }
  }