/* ===========================================================================
   Public gallery: the "Our Gallery" mosaic on the home page and the /gallery
   page, plus the photo viewer those tiles open.

   This replaces the template's #fh5co-portfolio-list rules for these two pages.
   The old markup put every photo in an inline background-image on an <li> inside
   an <a> with no href, which meant:

     - no alt text, so a screen reader announced nothing and the photos were
       invisible to search engines;
     - no native lazy loading, and no way to open or enlarge a photo at all;
     - a fixed min-height of 400px that was never reduced on phones;
     - the caption sat directly on an unknown photo, so its contrast depended on
       whatever happened to be behind it.

   Here every photo is a real <img> inside a real link, the caption sits on a
   gradient scrim (so it is legible on any photo), and the tile height follows
   the viewport instead of a hard-coded 400px.
   =========================================================================== */

.sj-gallery {
    display: grid;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* --- Home page mosaic: the layout adapts to how many photos there are, so a
       gallery of one or two photos still looks deliberate rather than broken. --- */
.sj-gallery--1 { grid-template-columns: 1fr; }
.sj-gallery--2 { grid-template-columns: repeat(2, 1fr); }
.sj-gallery--3 { grid-template-columns: repeat(3, 1fr); }

/* Four photos: a 2/3 + 1/3 mosaic over 1/3 + 2/3, filling both rows exactly. */
.sj-gallery--4 {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: clamp(170px, 19vw, 240px);
}

.sj-gallery--4 > :nth-child(1) { grid-column: span 2; }
.sj-gallery--4 > :nth-child(4) { grid-column: 2 / span 2; }

/* --- Gallery page: uniform tiles that wrap for any number of photos --- */
.sj-gallery--all {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 18px;
}

.sj-gallery__item {
    position: relative;
    margin: 0;
    min-width: 0;
}

.sj-gallery__link {
    position: relative;
    display: block;
    height: 100%;
    overflow: hidden;
    background: #111;
    color: #fff;
    text-decoration: none;
}

/* Reserved space before the photo arrives: no layout shift, and the row height
   still works in browsers without aspect-ratio support (the image simply keeps
   its natural proportions there). */
.sj-gallery--1 .sj-gallery__link { aspect-ratio: 16 / 9; }

.sj-gallery--2 .sj-gallery__link,
.sj-gallery--3 .sj-gallery__link,
.sj-gallery--all .sj-gallery__link { aspect-ratio: 4 / 3; }

/* The mosaic rows are sized by the grid, so those tiles fill their cell. */
.sj-gallery--4 .sj-gallery__link {
    height: 100%;
    min-height: 150px;
}

.sj-gallery__link img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.sj-gallery__link:hover img,
.sj-gallery__link:focus-visible img { transform: scale(1.06); }

/* Always-on scrim: the caption is readable regardless of the photo behind it. */
.sj-gallery__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    padding: 14px 16px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.74) 0%, rgba(0, 0, 0, 0.18) 55%, rgba(0, 0, 0, 0) 100%);
    pointer-events: none;
}

.sj-gallery__link:hover .sj-gallery__overlay,
.sj-gallery__link:focus-visible .sj-gallery__overlay {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.32) 55%, rgba(0, 0, 0, 0.05) 100%);
}

.sj-gallery__caption {
    font-size: 14px;
    line-height: 1.35;
    font-weight: 500;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}

/* A white ring reads on any photo, which a themed colour does not. */
.sj-gallery__link:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 2px;
}

.sj-gallery__empty {
    text-align: center;
    padding: 3em 1em;
    color: #6b6b6b;
}

.sj-gallery__empty i {
    font-size: 44px;
    display: block;
    margin-bottom: 0.4em;
    color: #c9c9c9;
}

.sj-gallery__empty h4 {
    margin-bottom: 0.4em;
}

/* --- Responsive: tile heights scale with the viewport, and the mosaic folds
       down to two columns and then one. --- */
@media screen and (max-width: 991px) {
    .sj-gallery--3 { grid-template-columns: repeat(2, 1fr); }

    .sj-gallery--4 {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: clamp(150px, 28vw, 220px);
    }

    .sj-gallery--4 > :nth-child(1) { grid-column: 1 / span 2; }
    .sj-gallery--4 > :nth-child(4) { grid-column: 1 / span 2; }
}

@media screen and (max-width: 575px) {
    .sj-gallery--2,
    .sj-gallery--3,
    .sj-gallery--4 { grid-template-columns: 1fr; }

    .sj-gallery--4 { grid-auto-rows: clamp(160px, 46vw, 220px); }

    .sj-gallery--4 > :nth-child(1),
    .sj-gallery--4 > :nth-child(4) { grid-column: auto; }

    .sj-gallery__overlay { padding: 10px 12px; }
}

/* --- Photo viewer (<dialog>), created by wwwroot/js/gallery-lightbox.js --- */
.sj-lightbox {
    position: fixed;
    inset: 0;
    z-index: 2000;
    width: min(94vw, 1080px);
    max-width: none;
    max-height: 92vh;
    height: auto;
    margin: auto;
    padding: 0;
    border: 0;
    background: transparent;
    color: #fff;
    overflow: visible;
}

.sj-lightbox::backdrop { background: rgba(0, 0, 0, 0.9); }

.sj-lightbox__figure {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sj-lightbox__image {
    display: block;
    max-width: 100%;
    max-height: 76vh;
    width: auto;
    height: auto;
    margin: 0 auto;
    background: #111;
}

.sj-lightbox__caption,
.sj-lightbox__counter {
    text-align: center;
    margin: 0;
}

.sj-lightbox__caption { font-size: 15px; line-height: 1.4; }
.sj-lightbox__counter { font-size: 13px; color: rgba(255, 255, 255, 0.72); }

.sj-lightbox__close,
.sj-lightbox__nav {
    position: absolute;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

.sj-lightbox__close:hover,
.sj-lightbox__nav:hover,
.sj-lightbox__close:focus-visible,
.sj-lightbox__nav:focus-visible {
    background: #000;
    border-color: #fff;
    outline: none;
}

.sj-lightbox__close { top: -16px; right: -8px; }
.sj-lightbox__nav--prev { left: -10px; top: 50%; transform: translateY(-50%); }
.sj-lightbox__nav--next { right: -10px; top: 50%; transform: translateY(-50%); }

.sj-lightbox__close[hidden],
.sj-lightbox__nav[hidden],
.sj-lightbox__counter[hidden] { display: none; }

/* The page behind must not scroll while the viewer is open. */
html.sj-lightbox-open { overflow: hidden; }

@media screen and (max-width: 767px) {
    .sj-lightbox { width: 100vw; }

    /* The dialog fills the screen here, so anything placed outside its box would be
       clipped by the top of the viewport. Keep the close button inside, over the photo,
       where the solid background still makes it read. */
    .sj-lightbox__close { top: 8px; right: 8px; }
    .sj-lightbox__nav--prev { left: 6px; }
    .sj-lightbox__nav--next { right: 6px; }
    .sj-lightbox__image { max-height: 68vh; }
}

@media (prefers-reduced-motion: reduce) {
    .sj-gallery__link img { transition: none; }
    .sj-gallery__link:hover img,
    .sj-gallery__link:focus-visible img { transform: none; }
}