/*
 * Bootstrap-first stylesheet.
 * Add rules here only when a concrete requirement cannot be expressed
 * cleanly with Bootstrap components or utilities.
 */

/*
 * Additional portrait aspect ratios for Bootstrap's `.ratio` helper.
 * These mirror Bootstrap's naming scheme and only override
 * `--bs-aspect-ratio`, so they work with the native component.
 */
.ratio.ratio-2x3 {
    --bs-aspect-ratio: calc(3 / 2 * 100%);
}

.ratio.ratio-3x4 {
    --bs-aspect-ratio: calc(4 / 3 * 100%);
}

.ratio.ratio-4x5 {
    --bs-aspect-ratio: calc(5 / 4 * 100%);
}

.ratio.ratio-9x16 {
    --bs-aspect-ratio: calc(16 / 9 * 100%);
}

[data-media-viewer] {
    --media-view-height: calc(100dvh - 4.5rem);
    --media-overlay-height: 4.25rem;
    min-height: calc(100dvh - 4.5rem);
}

[data-media-frame] {
    min-height: var(--media-view-height);
}

[data-gallery-switch-input] {
    width: min(12.5rem, calc(100vw - 11rem));
    line-height: 1.2;
}

[data-gallery-switch-field] [data-gallery-switch-clear] {
    font-size: 0.7rem;
    line-height: 1;
}

[data-gallery-switch-field] [data-gallery-switch-clear]:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.75);
    outline-offset: 2px;
}

[data-media-object] {
    display: block;
    margin: 0 auto;
}

[data-media-viewer][data-view-mode="fill-height"] [data-media-object] {
    height: var(--media-view-height);
    width: auto;
    max-width: none;
}

[data-media-viewer][data-view-mode="fit-all"] [data-media-frame] {
    box-sizing: border-box;
    padding-top: var(--media-overlay-height);
}

[data-media-viewer][data-view-mode="fit-all"] [data-media-object] {
    width: 100%;
    height: calc(var(--media-view-height) - var(--media-overlay-height));
    max-width: 100%;
    max-height: calc(var(--media-view-height) - var(--media-overlay-height));
    object-fit: contain;
}

@media (max-width: 767.98px) {
    [data-media-viewer],
    [data-media-frame] {
        --media-view-height: calc(100dvh - 4rem);
        --media-overlay-height: 4rem;
        min-height: calc(100dvh - 4rem);
    }

    [data-gallery-switch-input] {
        width: min(10.5rem, calc(100vw - 9rem));
    }

    [data-media-viewer][data-view-mode="fill-height"] [data-media-object] {
        height: var(--media-view-height);
    }
}

/* Gallery crop button styling */
[data-gallery-crop-button] {
    width: 36px;
    height: 36px;
    padding: 0 !important;
}