/* Gallery component styles for Micro Galleries of Long Beach
   (kept separate for caching/versioning)
*/

:root{
  --gallery-gap: 12px;
}

/* ====== Micro-gallery styles ====== */
.mgolb-gallery{--gap:var(--gallery-gap);display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:var(--gap);align-items:start}

.mgolb-gallery__item{position:relative;overflow:hidden;border-radius:6px;background:#f8fafc}
.mgolb-gallery__img{display:block;width:100%;height:100%;object-fit:cover}
.mgolb-gallery__caption{padding:.5rem .6rem;font-size:.9rem;color:var(--color-muted)}

/* Hover overlay for image items */
.mgolb-gallery__overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg, rgba(0,0,0,0.0) 0%, rgba(0,0,0,0.35) 100%);opacity:0;transition:opacity .18s ease}
.mgolb-gallery__item:hover .mgolb-gallery__overlay{opacity:1}
.mgolb-gallery__overlay .icon{color:#fff;font-size:1.25rem}

/* Grid modifiers for common row counts */
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}

/* Lightbox helpers (if a lightbox is used) */
.mgolb-lightbox{position:fixed;inset:0;background:rgba(0,0,0,0.85);display:flex;align-items:center;justify-content:center;z-index:9999;padding:1rem}
.mgolb-lightbox__img{max-width:calc(100% - 4rem);max-height:calc(100% - 4rem);box-shadow:0 10px 30px rgba(0,0,0,0.5)}

/* Captions */
.mgolb-caption{font-size:.9rem;color:var(--color-muted);margin-top:.35rem}

/* Responsive breakpoints */
@media (max-width: 900px){
  .mgolb-gallery{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
}
@media (max-width: 600px){
  .mgolb-gallery{grid-template-columns:repeat(2,1fr)}
}
/* Gallery component styles for Micro Galleries of Long Beach
   (moved out of style.css for better caching/versioning)
*/

:root{
  --gallery-gap: 12px;
}

/* ====== Micro-gallery styles ====== */
.mgolb-gallery{--gap:var(--gallery-gap);display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:var(--gap);align-items:start}

.mgolb-gallery__item{position:relative;overflow:hidden;border-radius:6px;background:#f8fafc}
.mgolb-gallery__img{display:block;width:100%;height:100%;object-fit:cover}
.mgolb-gallery__caption{padding:.5rem .6rem;font-size:.9rem;color:var(--color-muted)}

/* Hover overlay for image items */
.mgolb-gallery__overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg, rgba(0,0,0,0.0) 0%, rgba(0,0,0,0.35) 100%);opacity:0;transition:opacity .18s ease}
.mgolb-gallery__item:hover .mgolb-gallery__overlay{opacity:1}
.mgolb-gallery__overlay .icon{color:#fff;font-size:1.25rem}

/* Grid modifiers for common row counts */
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}

/* Lightbox helpers (if a lightbox is used) */
.mgolb-lightbox{position:fixed;inset:0;background:rgba(0,0,0,0.85);display:flex;align-items:center;justify-content:center;z-index:9999;padding:1rem}
.mgolb-lightbox__img{max-width:calc(100% - 4rem);max-height:calc(100% - 4rem);box-shadow:0 10px 30px rgba(0,0,0,0.5)}

/* Captions */
.mgolb-caption{font-size:.9rem;color:var(--color-muted);margin-top:.35rem}

/* Responsive breakpoints */
@media (max-width: 900px){
  .mgolb-gallery{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
}
@media (max-width: 600px){
  .mgolb-gallery{grid-template-columns:repeat(2,1fr)}
}