/* ==========================================================
   Masonry Image Gallery — Public Styles
   ========================================================== */

/* CSS custom properties set inline on .mig-gallery:
     --mig-columns  number of columns
     --mig-gutter   gap in px
     --mig-radius   border-radius in px
*/

/* ── Grid ──────────────────────────────────────────────────── */
.mig-gallery {
    --mig-columns: 3;
    --mig-gutter:  10px;
    --mig-radius:  4px;

    column-count: var(--mig-columns);
    column-gap:   var(--mig-gutter);
    margin: 16px 0;
}

.mig-item {
    display: inline-block; /* critical for masonry */
    width:   100%;
    margin:  0 0 var(--mig-gutter);
    break-inside: avoid;
    position: relative;
    overflow: hidden;
    border-radius: var(--mig-radius);
}

.mig-item,
.mig-img-wrap { border-radius: var(--mig-radius); }

.mig-img-wrap {
    position: relative;
    overflow: hidden;
    display: block;
    line-height: 0; /* remove inline baseline gap */
}

.mig-img {
    display: block;
    width:   100%;
    height:  auto;
    border-radius: var(--mig-radius);
    transition: transform .35s ease, filter .35s ease;
}

.mig-item a { display: block; line-height: 0; }

/* ── Responsive breakpoints ──────────────────────────────── */
@media ( max-width: 1024px ) {
    .mig-gallery { column-count: max(1, calc(var(--mig-columns) - 1)); }
}
@media ( max-width: 768px ) {
    .mig-gallery { column-count: 2; }
}
@media ( max-width: 480px ) {
    .mig-gallery { column-count: 1; }
}

/* ── Hover effects ──────────────────────────────────────────── */

/* Zoom In */
.mig-hover-zoom .mig-item:hover .mig-img {
    transform: scale(1.07);
}

/* Fade Overlay */
.mig-hover-fade .mig-img-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.35);
    opacity: 0;
    transition: opacity .3s ease;
    border-radius: var(--mig-radius);
}
.mig-hover-fade .mig-item:hover .mig-img-wrap::after { opacity: 1; }

/* Grayscale → Colour */
.mig-hover-grayscale .mig-img { filter: grayscale(80%); }
.mig-hover-grayscale .mig-item:hover .mig-img { filter: grayscale(0%); }

/* Slide-Up: no special img transform, caption handles it */
.mig-hover-slide-up .mig-item:hover .mig-img { transform: scale(1.04); }

/* ── Captions ───────────────────────────────────────────────── */
.mig-caption {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 14px;
}

.mig-caption-title { font-weight: 600; font-size: .9em; }
.mig-caption-text  { font-size: .82em; opacity: .85; }

/* Hidden */
.mig-caption-none .mig-caption { display: none; }

/* Below image */
.mig-caption-below .mig-caption {
    background: transparent;
    color: inherit;
}

/* Overlay on hover */
.mig-caption-overlay .mig-caption {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    background: linear-gradient(transparent, rgba(0,0,0,.72));
    color: #fff;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .3s ease, transform .3s ease;
    border-bottom-left-radius:  var(--mig-radius);
    border-bottom-right-radius: var(--mig-radius);
    margin: 0;
}
.mig-caption-overlay .mig-item:hover .mig-caption {
    opacity: 1;
    transform: translateY(0);
}
/* Make .mig-img-wrap position:relative for overlay */
.mig-caption-overlay .mig-img-wrap { position: relative; }

/* Slide-Up */
.mig-caption-slide-up .mig-caption {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    background: rgba(0,0,0,.75);
    color: #fff;
    transform: translateY(100%);
    transition: transform .35s ease;
    border-bottom-left-radius:  var(--mig-radius);
    border-bottom-right-radius: var(--mig-radius);
    margin: 0;
}
.mig-caption-slide-up .mig-item:hover .mig-caption {
    transform: translateY(0);
}
.mig-caption-slide-up .mig-img-wrap { position: relative; }

/* ── Load animations ─────────────────────────────────────────── */
@keyframes mig-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes mig-slide-up {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes mig-zoom-in {
    from { opacity: 0; transform: scale(.9); }
    to   { opacity: 1; transform: scale(1); }
}

.mig-anim-fade    .mig-item { animation: mig-fade-in   .55s ease both; }
.mig-anim-slide-up .mig-item { animation: mig-slide-up  .55s ease both; }
.mig-anim-zoom-in  .mig-item { animation: mig-zoom-in   .5s  ease both; }
.mig-anim-stagger  .mig-item { animation: mig-fade-in   .5s  ease both; }

/* ── Lightbox ────────────────────────────────────────────────── */
.mig-lightbox {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mig-lightbox[hidden] { display: none; }

.mig-lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.88);
    cursor: pointer;
    backdrop-filter: blur(4px);
}

.mig-lightbox-inner {
    position: relative;
    z-index: 1;
    max-width: 92vw;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.mig-lightbox-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-height: 88vh;
}

.mig-lightbox-img {
    max-width:  88vw;
    max-height: 80vh;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 8px 40px rgba(0,0,0,.6);
    transition: opacity .25s ease;
}

.mig-lightbox-caption {
    color: rgba(255,255,255,.8);
    font-size: .9em;
    margin-top: 12px;
    text-align: center;
    max-width: 600px;
}

.mig-lightbox-counter {
    color: rgba(255,255,255,.5);
    font-size: .8em;
    margin-top: 8px;
}

/* Nav buttons */
.mig-lightbox-close,
.mig-lightbox-prev,
.mig-lightbox-next {
    position: absolute;
    background: rgba(255,255,255,.15);
    border: none;
    color: #fff;
    cursor: pointer;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    font-size: 22px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s ease;
    z-index: 2;
}
.mig-lightbox-close:hover,
.mig-lightbox-prev:hover,
.mig-lightbox-next:hover { background: rgba(255,255,255,.3); }

.mig-lightbox-close { top: -52px; right: 0; font-size: 28px; }
.mig-lightbox-prev  { left: -58px; top: 50%; transform: translateY(-50%); }
.mig-lightbox-next  { right: -58px; top: 50%; transform: translateY(-50%); }

@media ( max-width: 640px ) {
    .mig-lightbox-prev { left: 4px; }
    .mig-lightbox-next { right: 4px; }
    .mig-lightbox-close { top: 4px; right: 4px; }
}

/* ── Utility ─────────────────────────────────────────────────── */
.mig-no-images {
    padding: 20px;
    background: #f6f7f7;
    border: 1px solid #c3c4c7;
    border-radius: 4px;
    color: #646970;
}