/* ── GRID: 4 cols on desktop, scales down ── */
    .gal-masonry {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 18px;
      padding: 16px 0 40px;
      width: 100%;
      
    }

    /* ── CARD wrapper ── */
    .gal-masonry-item {
      display: flex;
      flex-direction: column;
      border-radius: 14px;
      overflow: hidden;
      background: #fff;
      box-shadow: 0 3px 14px rgba(0, 0, 0, .10);
      cursor: pointer;
      transition: transform .25s, box-shadow .25s;
      /* cancel masonry break-inside */
      break-inside: unset;
      margin-bottom: 0;
      position: relative;
    }

    .gal-masonry-item:hover {
      transform: translateY(-4px);
      box-shadow: 0 12px 32px rgba(232, 93, 4, .20);
    }

    /* ── IMAGE AREA: fixed-height box, image always fills it ── */
    .gal-masonry-item .card-img-wrap {
      width: 100%;
      height: 200px;
      /* fixed height — same for all cards */
      overflow: hidden;
      background: #f0f2f5;
      flex-shrink: 0;
    }

    .gal-masonry-item .card-img-wrap img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      /* fills the box, smart crop */
      display: block;
      transition: transform .4s ease;
    }

    .gal-masonry-item:hover .card-img-wrap img {
      transform: scale(1.07);
    }

    /* ── CARD FOOTER: label bar below image ── */
    .gal-masonry-item .card-label {
      padding: 9px 12px 10px;
      font-family: 'Nunito', sans-serif;
      font-weight: 700;
      font-size: .78rem;
      color: #374151;
      background: #fff;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      border-top: 1px solid #f0f2f5;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .gal-masonry-item .card-label i {
      color: #e85d04;
      font-size: .72rem;
    }

    /* ── BADGE stays top-left ── */
    .cat-badge {
      position: absolute;
      top: 10px;
      left: 10px;
      background: rgba(232, 93, 4, .92);
      color: #fff;
      border-radius: 20px;
      padding: 3px 10px;
      font-size: .68rem;
      font-weight: 700;
      font-family: 'Nunito', sans-serif;
      z-index: 2;
      letter-spacing: .3px;
    }

    /* ── HOVER OVERLAY (on image area only) ── */
    .gal-masonry-item .overlay {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      /* stop at card-label height ~40px */
      bottom: 40px;
      background: linear-gradient(to top, rgba(10, 15, 30, .72) 0%, transparent 55%);
      opacity: 0;
      transition: opacity .3s;
      display: flex;
      align-items: flex-end;
      padding: 10px 12px;
      pointer-events: none;
    }

    .gal-masonry-item:hover .overlay {
      opacity: 1;
    }

    .overlay-text {
      color: #fff;
      font-family: 'Nunito', sans-serif;
      font-weight: 700;
      font-size: .78rem;
    }

    /* ── Touch devices: always show overlay ── */
    @media (hover: none) {
      .gal-masonry-item .overlay {
        opacity: 1;
        background: linear-gradient(to top, rgba(10, 15, 30, .55) 0%, transparent 45%);
      }
    }

    /* hidden state (filter) */
    .gal-masonry-item.hidden {
      display: none;
    }

    /* ══════════════════════════════════════════
       RESPONSIVE BREAKPOINTS
       ══════════════════════════════════════════ */

    /* Tablet landscape ≤1100px → 3 cols */
    @media (max-width: 1100px) {
      .gal-masonry {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
      }
    }

    /* Tablet portrait ≤768px → 2 cols, slightly shorter image */
    @media (max-width: 768px) {
      .gal-masonry {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
      }

      .gal-masonry-item .card-img-wrap {
        height: 180px;
      }
    }

    /* Large phones ≤576px → 2 cols, square-ish image */
    @media (max-width: 576px) {
      .gal-masonry {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
      }

      .gal-masonry-item .card-img-wrap {
        height: 150px;
      }

      .gal-masonry-item .card-label {
        font-size: .72rem;
        padding: 7px 10px 8px;
      }
    }

    /* Small phones ≤420px → SINGLE column, tall image */
    @media (max-width: 420px) {
      .gal-masonry {
        grid-template-columns: 1fr;
        gap: 14px;
      }

      .gal-masonry-item .card-img-wrap {
        height: 220px;
        /* single card: give it more breathing room */
      }

      .gal-masonry-item .card-label {
        font-size: .8rem;
        padding: 10px 14px 11px;
      }

      .cat-badge {
        font-size: .7rem;
        padding: 4px 11px;
      }
    }

    /* ── LIGHTBOX image: full, no crop ── */
    #lbImg {
      max-width: 92vw;
      max-height: 88vh;
      width: auto;
      height: auto;
      object-fit: contain;
      border-radius: 12px;
      box-shadow: 0 24px 72px rgba(0, 0, 0, .55);
    }

    @media (max-width: 480px) {
      #lbImg {
        max-width: 98vw;
        max-height: 80vh;
        border-radius: 6px;
      }
    }