/* Twombili Gallery CSS - keeps the same look you requested and fixes uniform card sizes */

.tw-gallery-wrap{max-width:1200px;margin:28px auto;padding:18px;font-family:Inter,Arial,Helvetica,sans-serif}
.tw-gallery-hero{background:#f5f7f9;padding:18px;border-radius:10px;margin-bottom:16px;text-align:center}
.tw-gallery-hero h1{margin:0 0 8px;font-size:28px;color:#002D47}
.tw-gallery-hero .intro{margin:0;color:#4b5563;font-size:16px}
.tw-filter-row{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap;justify-content:center}
.tw-filter-btn{background:#fff;border:1px solid #e6edf3;padding:8px 14px;border-radius:999px;cursor:pointer;color:#002D47;font-weight:600;transition:0.3s}
.tw-filter-btn.active,.tw-filter-btn:hover{background:#e47a1d;color:#fff}

/* grid: 4 columns desktop, 2 tablet, 1 mobile */
.tw-gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:18px}

/* uniform card aspect ratio - ensures same thumbnail dimensions */
.tw-card, .tw-gallery-grid .tw-card {
  background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 6px 18px rgba(16,24,40,0.04);display:flex;flex-direction:column;transition:transform .2s;
  /* enforce fixed aspect ratio for thumbnails */
  aspect-ratio: 4 / 3;
}
.tw-card:hover{transform:translateY(-3px)}
.tw-card picture, .tw-card img { width:100%; height:100%; display:block; }
.tw-card img{object-fit:cover;display:block;opacity:0;transition:opacity .6s}
.tw-card img.fade-in{opacity:1}
.tw-card-caption{padding:10px;font-size:14px;color:#374151}

/* loader and controls */
.tw-load-more-wrap{display:flex;flex-direction:column;align-items:center;margin:18px 0;gap:10px}
.tw-btn{background:#002D47;color:#fff;border:none;padding:10px 18px;border-radius:10px;cursor:pointer;font-weight:700}
.tw-loading{color:#666;font-size:14px}
.tw-range-indicator{font-size:14px;color:#555}

/* Lightbox */
.tw-lightbox{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.9);display:none;flex-direction:column;justify-content:center;align-items:center;z-index:9999;padding:20px}
.tw-lightbox.active{display:flex}
.tw-lightbox-inner{display:flex;flex-direction:column;align-items:center;gap:12px}
#tw-lightbox-img{max-width:90%;max-height:80vh;border-radius:10px;box-shadow:0 6px 20px rgba(0,0,0,0.5)}
.tw-lightbox-caption{color:#fff;text-align:center;font-size:16px;max-width:90%}
.tw-lightbox-close,.tw-lightbox-prev,.tw-lightbox-next{position:absolute;background:none;border:none;color:#fff;font-size:36px;cursor:pointer;font-weight:700;transition:0.3s}
.tw-lightbox-close{top:10px;right:20px}
.tw-lightbox-prev{left:30px;top:50%;transform:translateY(-50%);opacity:0}
.tw-lightbox-next{right:30px;top:50%;transform:translateY(-50%);opacity:0}
.tw-lightbox:hover .tw-lightbox-prev,.tw-lightbox:hover .tw-lightbox-next{opacity:1}
.tw-lightbox-close:hover,.tw-lightbox-prev:hover,.tw-lightbox-next:hover{color:#f3b23a}

/* responsive rules */
@media (max-width:1000px){ .tw-gallery-grid{grid-template-columns:repeat(2,1fr)}; .tw-card { aspect-ratio: 4/3 } }
@media (max-width:600px){ .tw-gallery-grid{grid-template-columns:1fr} .tw-card { aspect-ratio: 4/3 } }

/* small accessibility tweaks */
.tw-filter-row button:focus, .tw-load-more-wrap button:focus, .tw-lightbox-close:focus { outline: 3px solid rgba(228,122,29,0.25); outline-offset: 3px; }