/*
 * Editorial gallery + Magnific Popup lightbox
 * -------------------------------------------
 * Enqueued from gridlove_load_child_css() as handle `gridlove-gallery`, right
 * after `gridlove-main`. Two things about load order matter here:
 *
 *  1. This file prints AFTER assets/css/main.css, so a tie on specificity goes
 *     to us. The layout rules below are still scoped through `.entry-content` /
 *     `.gridlove-text-module-content` on purpose — that both wins the tie
 *     outright and keeps the change to editorial content, so galleries used
 *     inside modules or widgets keep the old fixed-column behaviour.
 *
 *  2. The parent theme's assets/css/magnific-popup.css prints AFTER this file
 *     (WordPress enqueues the parent's styles later). Every `.mfp-*` rule below
 *     therefore has to WIN ON SPECIFICITY, not on order — that is why they are
 *     all prefixed with `.mfp-wrap`. Drop that prefix and the parent silently
 *     takes the rule back. This is exactly how the arrows became invisible:
 *     main.css styled `button.mfp-arrow` (0,1,1) and the parent's
 *     `button.mfp-close, button.mfp-arrow { background: transparent }` (0,1,1)
 *     loaded later and won, leaving a black glyph on a dark backdrop.
 *
 * `.gallery-columns-1` is excluded everywhere: main.js turns those into an owl
 * carousel (gridlove_gallery_slider), so they are not a grid at all.
 */


/*--------------------------------------------------------------
   1. The grid — sizes itself to however many images were uploaded
--------------------------------------------------------------*/

/*
 * The old rules were `flex: 0 0 33.33%` per `.gallery-columns-N` class, so a
 * five-image gallery rendered 3 + 2 and left a third of the last row empty.
 * Here the basis is still a third, but `flex-grow: 1` lets a short last row
 * expand to fill the width: 1 image goes full width, 2 share it 50/50, 5 come
 * out as 3 + 2. The editor's "Columns" setting is deliberately ignored.
 */

.entry-content .gallery:not(.gallery-columns-1),
.gridlove-text-module-content .gallery:not(.gallery-columns-1) {
    --gn-gallery-gap: 6px;
    display: flex;
    flex-flow: row wrap;
    /* Was flex-end, which right-aligned a short last row. */
    justify-content: flex-start;
    align-items: stretch;
    gap: var(--gn-gallery-gap);
    margin: 0 0 30px;
}

.entry-content .gallery:not(.gallery-columns-1) > .gallery-item,
.gridlove-text-module-content .gallery:not(.gallery-columns-1) > .gallery-item {
    /* Two columns is the floor on phones; min-width 768px raises it to three. */
    flex: 1 1 calc((100% - var(--gn-gallery-gap)) / 2);
    /* main.css used padding for the gutters; `gap` owns them now. */
    padding: 0;
    margin: 0;
    max-width: none;
    width: auto;
    /*
     * A shared aspect ratio is what keeps a row level. Without it a portrait
     * image stretched its whole row (measured: 380px tall next to 171px tall
     * siblings) and object-fit: cover then cropped the landscape neighbours to
     * a narrow middle band.
     */
    aspect-ratio: 3 / 2;
    position: relative;
    overflow: hidden;
    border-radius: 3px;
    background: rgba(17, 17, 17, 0.06);
}

.entry-content .gallery:not(.gallery-columns-1) .gallery-icon,
.gridlove-text-module-content .gallery:not(.gallery-columns-1) .gallery-icon {
    display: block;
    height: 100%;
    width: 100%;
    margin: 0;
}

.entry-content .gallery:not(.gallery-columns-1) .gallery-icon > a,
.gridlove-text-module-content .gallery:not(.gallery-columns-1) .gallery-icon > a {
    display: block;
    height: 100%;
    width: 100%;
    position: relative;
    outline-offset: -3px;
}

.entry-content .gallery:not(.gallery-columns-1) .gallery-icon img,
.gridlove-text-module-content .gallery:not(.gallery-columns-1) .gallery-icon img {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    object-fit: cover;
    transition: transform 0.35s ease;
}

.entry-content .gallery:not(.gallery-columns-1) .gallery-icon a:hover img,
.gridlove-text-module-content .gallery:not(.gallery-columns-1) .gallery-icon a:hover img {
    transform: scale(1.04);
}

/* Keyboard users get the same "this opens" signal the mouse gets. */
.entry-content .gallery:not(.gallery-columns-1) .gallery-icon a:focus-visible,
.gridlove-text-module-content .gallery:not(.gallery-columns-1) .gallery-icon a:focus-visible {
    outline: 3px solid #ad3e81;
}

.entry-content .gallery:not(.gallery-columns-1) .gallery-icon a:focus-visible:after,
.gridlove-text-module-content .gallery:not(.gallery-columns-1) .gallery-icon a:focus-visible:after {
    opacity: 1;
}

/* A single image is shown whole rather than cropped into a 3:2 tile. */
.entry-content .gallery:not(.gallery-columns-1):has(> .gallery-item:only-child) > .gallery-item,
.gridlove-text-module-content .gallery:not(.gallery-columns-1):has(> .gallery-item:only-child) > .gallery-item {
    aspect-ratio: auto;
}

.entry-content .gallery:not(.gallery-columns-1):has(> .gallery-item:only-child) .gallery-icon img,
.gridlove-text-module-content .gallery:not(.gallery-columns-1):has(> .gallery-item:only-child) .gallery-icon img {
    height: auto;
}

@media (min-width: 768px) {

    .entry-content .gallery:not(.gallery-columns-1) > .gallery-item,
    .gridlove-text-module-content .gallery:not(.gallery-columns-1) > .gallery-item {
        flex-basis: calc((100% - 2 * var(--gn-gallery-gap)) / 3);
    }

    /*
     * Quantity queries, so the last row is never a lonely single tile.
     *
     *   count % 3 == 1  ->  the last item sits at position 3n+1, so the final
     *                       FOUR items become two rows of two (4 -> 2+2,
     *                       7 -> 3 + 2+2). Without this, 4 images rendered
     *                       3 + 1 full-width.
     *   count % 3 == 2  ->  the final two grow to 50/50 on their own; they only
     *                       need the wider ratio.
     *
     * A 2-up row at 16/9 comes out only slightly taller than a 3-up row at
     * 3/2, so the grid still reads as level while cropping far less than the
     * 9/4 that would make the heights identical.
     *
     * :has() is required. Where it is missing the base rules still apply and a
     * short last row simply stretches — plainer, not broken.
     */
    .entry-content .gallery:not(.gallery-columns-1):has(> .gallery-item:nth-child(3n + 1):last-child) > .gallery-item:nth-last-child(-n + 4),
    .gridlove-text-module-content .gallery:not(.gallery-columns-1):has(> .gallery-item:nth-child(3n + 1):last-child) > .gallery-item:nth-last-child(-n + 4) {
        flex-basis: calc((100% - var(--gn-gallery-gap)) / 2);
        aspect-ratio: 16 / 9;
    }

    .entry-content .gallery:not(.gallery-columns-1):has(> .gallery-item:nth-child(3n + 2):last-child) > .gallery-item:nth-last-child(-n + 2),
    .gridlove-text-module-content .gallery:not(.gallery-columns-1):has(> .gallery-item:nth-child(3n + 2):last-child) > .gallery-item:nth-last-child(-n + 2) {
        aspect-ratio: 16 / 9;
    }

    /* Restated after the two rules above, which are more specific than the base. */
    .entry-content .gallery:not(.gallery-columns-1):has(> .gallery-item:only-child) > .gallery-item,
    .gridlove-text-module-content .gallery:not(.gallery-columns-1):has(> .gallery-item:only-child) > .gallery-item {
        flex-basis: 100%;
        aspect-ratio: auto;
    }
}

@media (max-width: 767px) {

    /* Two columns, so an odd count ends on one full-width image. */
    .entry-content .gallery:not(.gallery-columns-1):has(> .gallery-item:nth-child(2n + 1):last-child) > .gallery-item:last-child,
    .gridlove-text-module-content .gallery:not(.gallery-columns-1):has(> .gallery-item:nth-child(2n + 1):last-child) > .gallery-item:last-child {
        aspect-ratio: 16 / 9;
    }

    .entry-content .gallery:not(.gallery-columns-1):has(> .gallery-item:only-child) > .gallery-item,
    .gridlove-text-module-content .gallery:not(.gallery-columns-1):has(> .gallery-item:only-child) > .gallery-item {
        aspect-ratio: auto;
    }
}

@media (prefers-reduced-motion: reduce) {

    .entry-content .gallery:not(.gallery-columns-1) .gallery-icon img,
    .gridlove-text-module-content .gallery:not(.gallery-columns-1) .gallery-icon img {
        transition: none;
    }

    .entry-content .gallery:not(.gallery-columns-1) .gallery-icon a:hover img,
    .gridlove-text-module-content .gallery:not(.gallery-columns-1) .gallery-icon a:hover img {
        transform: none;
    }
}


/*--------------------------------------------------------------
   2. Lightbox chrome
--------------------------------------------------------------*/

/*
 * At 0.9 over a page of bright photography the site read straight through the
 * backdrop — header, gallery tiles and the deal popup all legible behind the
 * image. Magnific defines no transition on this, so raising it does not affect
 * the open animation.
 */
body .mfp-bg {
    opacity: 0.96;
}

/*
 * The grey slab. Magnific paints a #444 rectangle behind the image across the
 * full content width, so a portrait photo sat in the middle of a wide grey
 * panel — and that panel is what the black arrows were sitting on.
 */
.mfp-wrap .mfp-figure:after {
    background: transparent;
    box-shadow: none;
}

.mfp-wrap .mfp-figure figure {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.mfp-wrap .mfp-container {
    padding: 0 12px;
}

/*
 * Room for the chrome: the close button lives at the top, the caption and the
 * position indicator at the bottom, and the image is kept clear of both.
 */
.mfp-wrap img.mfp-img {
    padding: 56px 0 88px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
}

/* --- Close button ---------------------------------------------------------
 * main.css pinned this to `top: -10px` for every viewport under 1450px, which
 * pushed 10px of a 40px button above the top of the screen — the reported
 * "close button is cut off". Fixed positioning against the viewport cannot be
 * clipped by the content box at any width, and honours the iOS safe area.
 */
.mfp-wrap .mfp-image-holder button.mfp-close,
.mfp-wrap button.mfp-close {
    position: fixed;
    top: calc(12px + env(safe-area-inset-top, 0px));
    right: calc(12px + env(safe-area-inset-right, 0px));
    left: auto;
    width: 44px;
    height: 44px;
    line-height: 44px;
    padding: 0;
    margin: 0;
    font-size: 0;
    text-align: center;
    color: #fff;
    background: rgba(20, 20, 20, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    opacity: 1;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
    transition: background-color 0.2s ease, transform 0.2s ease;
    z-index: 1047;
}

/* The glyph is drawn, not typed, so it does not depend on FontAwesome loading. */
.mfp-wrap button.mfp-close:before,
.mfp-wrap button.mfp-close:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 17px;
    height: 2px;
    margin: -1px 0 0 -8.5px;
    background: currentColor;
    border-radius: 2px;
}

.mfp-wrap button.mfp-close:before {
    transform: rotate(45deg);
}

.mfp-wrap button.mfp-close:after {
    transform: rotate(-45deg);
}

.mfp-wrap .mfp-image-holder button.mfp-close:hover,
.mfp-wrap button.mfp-close:hover,
.mfp-wrap button.mfp-close:focus-visible {
    background: #fff;
    color: #111;
    transform: scale(1.06);
}

/* --- Arrows --------------------------------------------------------------- */

.mfp-wrap button.mfp-arrow {
    position: absolute;
    top: 50%;
    width: 48px;
    height: 48px;
    margin: -24px 0 0;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    /* Was transparent, courtesy of the parent theme; a dark glyph on a dark
       overlay is why the arrows could not be seen. */
    background: rgba(20, 20, 20, 0.55);
    color: #fff;
    opacity: 1;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
    transform: none;
    transition: background-color 0.2s ease, transform 0.2s ease;
    z-index: 1047;
}

.mfp-wrap button.mfp-arrow-left {
    left: 14px;
}

.mfp-wrap button.mfp-arrow-right {
    right: 14px;
}

/* Chevrons from borders — again, no webfont dependency. */
.mfp-wrap button.mfp-arrow:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 11px;
    height: 11px;
    margin: -6px 0 0 -6px;
    border: 0 solid currentColor;
    border-top-width: 2px;
    border-right-width: 2px;
    opacity: 1;
}

.mfp-wrap button.mfp-arrow-left:before {
    transform: rotate(-135deg);
    margin-left: -4px;
}

.mfp-wrap button.mfp-arrow-right:before {
    transform: rotate(45deg);
    margin-left: -8px;
}

/* Magnific also draws a second triangle through :after. Not needed. */
.mfp-wrap button.mfp-arrow:after {
    display: none;
}

.mfp-wrap button.mfp-arrow:hover,
.mfp-wrap button.mfp-arrow:focus-visible {
    background: #fff;
    color: #111;
    transform: scale(1.06);
}

.mfp-wrap button.mfp-arrow:focus-visible,
.mfp-wrap button.mfp-close:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

@media (max-width: 600px) {

    /*
     * Phones navigate by swiping (assets/js/gallery.js). The arrows stay for
     * discoverability but shrink and hug the edges so they cover less photo.
     */
    .mfp-wrap button.mfp-arrow {
        width: 38px;
        height: 38px;
        margin-top: -19px;
        background: rgba(20, 20, 20, 0.45);
    }

    .mfp-wrap button.mfp-arrow-left {
        left: 6px;
    }

    .mfp-wrap button.mfp-arrow-right {
        right: 6px;
    }

    .mfp-wrap img.mfp-img {
        padding: 60px 0 92px;
    }
}

/* --- Caption -------------------------------------------------------------- */

/*
 * main.css floated the caption at `top: -48px; left: 20px` off the bottom bar,
 * which put it in the image's bottom-left corner and let it collide with the
 * position indicator. It is a centred pill above the indicator instead.
 */
.mfp-wrap .mfp-bottom-bar {
    position: fixed;
    top: auto;
    bottom: calc(46px + env(safe-area-inset-bottom, 0px));
    left: 0;
    right: 0;
    width: 100%;
    margin: 0;
    padding: 0 16px;
    text-align: center;
    pointer-events: none;
}

.mfp-wrap .mfp-title {
    position: static;
    display: inline-block;
    max-width: 86%;
    padding: 6px 14px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 999px;
    color: #f3f3f3;
    font-size: 13px;
    line-height: 18px;
    text-align: center;
}

.mfp-wrap .mfp-title:empty {
    display: none;
    padding: 0;
}

/* Replaced by the indicator in section 3, which also carries the dots. */
.mfp-wrap .mfp-counter {
    display: none;
}


/*--------------------------------------------------------------
   3. Position indicator — dots for short galleries, a count for long ones
--------------------------------------------------------------*/

/*
 * Built by assets/js/gallery.js on mfpOpen. It doubles as the swipe
 * affordance: something visibly changing as you swipe is what tells people
 * swiping works.
 */
.gn-mfp-nav {
    position: fixed;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 16px;
    z-index: 1047;
    pointer-events: none;
}

.gn-mfp-nav__dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    max-width: 100%;
    padding: 8px 12px;
    background: rgba(20, 20, 20, 0.55);
    border-radius: 999px;
    pointer-events: auto;
}

.gn-mfp-nav__dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
    -webkit-appearance: none;
    appearance: none;
}

.gn-mfp-nav__dot:hover {
    background: rgba(255, 255, 255, 0.75);
}

.gn-mfp-nav__dot.is-active {
    background: #fff;
    transform: scale(1.35);
}

.gn-mfp-nav__dot:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

/* Long galleries — this page has 60 images — get a counter instead of 60 dots. */
.gn-mfp-nav__count {
    padding: 5px 14px;
    background: rgba(20, 20, 20, 0.55);
    border-radius: 999px;
    color: #fff;
    font-size: 13px;
    line-height: 18px;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}

/* The one-off "you can swipe" hint. */
.gn-mfp-hint {
    position: fixed;
    left: 50%;
    bottom: calc(78px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    background: rgba(20, 20, 20, 0.72);
    border-radius: 999px;
    color: #fff;
    font-size: 13px;
    line-height: 18px;
    white-space: nowrap;
    z-index: 1047;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.gn-mfp-hint.is-visible {
    opacity: 1;
}

.gn-mfp-hint__glyph {
    display: inline-block;
    width: 20px;
    text-align: center;
    animation: gn-mfp-swipe 1.6s ease-in-out infinite;
}

@keyframes gn-mfp-swipe {
    0%, 100% { transform: translateX(-5px); }
    50%      { transform: translateX(5px); }
}

@media (prefers-reduced-motion: reduce) {

    .gn-mfp-hint__glyph {
        animation: none;
    }

    .mfp-wrap button.mfp-arrow,
    .mfp-wrap button.mfp-close,
    .gn-mfp-nav__dot {
        transition: none;
    }
}