/* The Living Bronco 2.9.47 — Main Gallery only.
   Intentionally basic layout: flex-wrap + normal-flow images.
   No CSS Grid row sizing, no percentage-padding square hack, no JS geometry,
   no masonry, no transforms, and no absolute positioning of gallery images. */

.gallery-modal {
    inset: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
    display: flex;
    flex-direction: column;
    border-radius: 22px;
    overflow: hidden;
}

.gallery-status {
    padding: 18px 20px;
    text-align: center;
    color: #c4ccd5;
}

/* Basic wrapping gallery. Rows are created by normal document flow. */
#galleryGrid.gallery-grid {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    align-items: flex-start;
    gap: 10px;
    flex: 1 1 auto;
    min-height: 0;
    padding: 12px;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Three columns by default. The item height comes entirely from its normal-flow image. */
#galleryGrid .gallery-item {
    position: relative;
    display: block;
    flex: 0 0 calc((100% - 20px) / 3);
    width: calc((100% - 20px) / 3);
    max-width: calc((100% - 20px) / 3);
    min-width: 0;
    margin: 0;
    padding: 0;
}

/* Button/link participates in normal flow. It has no fixed or calculated height. */
#galleryGrid .gallery-open {
    position: relative;
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 14px;
    overflow: hidden;
    background: #02070c;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

/* The image is the square. It remains in normal flow and therefore gives the tile its height. */
#galleryGrid .gallery-open img {
    position: static;
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    margin: 0;
    padding: 0;
    object-fit: cover;
    object-position: center;
    background: #02070c;
}

#galleryGrid .gallery-item.is-selected .gallery-open {
    border-color: #4b85ff;
    box-shadow: 0 0 0 2px rgba(75,133,255,.42) inset;
}

/* Only the selection indicator is an overlay. It never controls tile geometry. */
#galleryGrid .gallery-thumb-check {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 999px;
    background: rgba(8,21,34,.88);
    color: #fff;
    font-size: 15px;
    font-weight: 900;
    line-height: 1;
    pointer-events: none;
}

#galleryGrid .gallery-item.is-selected .gallery-thumb-check {
    border-color: #7da6ff;
    background: #3d79ff;
}

#galleryGrid .gallery-thumb-badge {
    position: absolute;
    right: 8px;
    bottom: 8px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    max-width: calc(100% - 16px);
    padding: 4px 8px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(6,16,27,.82);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
    text-overflow: ellipsis;
    pointer-events: none;
}

#galleryGrid .gallery-provider-heading {
    flex: 0 0 100%;
    width: 100%;
    padding: 8px 2px 2px;
    color: #f7f0e6;
    font-size: 14px;
    font-weight: 800;
}

#galleryGrid .module-gallery-thumb {
    text-decoration: none;
}

#galleryGrid .gallery-open:focus-visible {
    outline: 3px solid #ff9b32;
    outline-offset: -3px;
}

.gallery-select-bar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    border-top: 1px solid rgba(255,255,255,.12);
    background: #111822;
}

.gallery-select-summary {
    min-width: 0;
    display: grid;
    gap: 2px;
    flex: 1 1 auto;
}

.gallery-select-summary strong {
    font-size: 18px;
    line-height: 1.1;
}

.gallery-select-summary span {
    color: #aeb8c4;
    font-size: 12px;
    line-height: 1.35;
}

.gallery-select-cancel,
.gallery-select-done {
    border: 0;
    border-radius: 999px;
    padding: 11px 16px;
    font-weight: 800;
    cursor: pointer;
}

.gallery-select-cancel {
    min-width: 52px;
    background: #263749;
    color: #fff;
    font-size: 22px;
    line-height: 1;
}

.gallery-select-done {
    background: #3d79ff;
    color: #fff;
}

.gallery-select-done:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.gallery-modal.is-selection-mode #galleryGrid {
    padding-bottom: 18px;
}

@media (max-width: 480px) {
    #galleryGrid.gallery-grid {
        gap: 8px;
        padding: 10px;
    }

    #galleryGrid .gallery-item {
        flex-basis: calc((100% - 8px) / 2);
        width: calc((100% - 8px) / 2);
        max-width: calc((100% - 8px) / 2);
    }
}

@media (min-width: 481px) and (max-width: 899px) {
    #galleryGrid .gallery-item {
        flex-basis: calc((100% - 20px) / 3);
        width: calc((100% - 20px) / 3);
        max-width: calc((100% - 20px) / 3);
    }
}

@media (min-width: 900px) {
    #galleryGrid.gallery-grid {
        gap: 12px;
        padding: 14px;
    }

    #galleryGrid .gallery-item {
        flex-basis: calc((100% - 48px) / 5);
        width: calc((100% - 48px) / 5);
        max-width: calc((100% - 48px) / 5);
    }
}

@media (max-width: 620px) {
    .gallery-modal {
        inset: 0;
        border: 0;
        border-radius: 0;
    }

    .gallery-select-bar {
        gap: 10px;
        padding: 12px 14px;
    }

    .gallery-select-summary strong {
        font-size: 17px;
    }

    .gallery-select-summary span {
        font-size: 11px;
    }
}

@media (max-width: 370px) {
    .gallery-select-cancel,
    .gallery-select-done {
        padding: 10px 13px;
    }

    .gallery-select-summary strong {
        font-size: 15px;
    }
}