/* Site styling for the baguetteBox overlay.
 *
 * These selectors are deliberately top-level rather than nested under the component: the overlay
 * is appended to <body>, so it is never a descendant of .component-flight-album-gallery.
 *
 * This sheet is enqueued with baguetteBox's own stylesheet as a dependency, which is what lets it
 * win on load order. Matching the library's specificity here would otherwise lose, because the
 * component loader enqueues component CSS before the template runs.
 *
 * Note what is NOT touched: .full-image keeps its inline-block display. The slider lays those
 * panels out in a row and translates by -100% per slide, so turning one into a block-level flex
 * container stacks the whole album vertically and the carousel stops working.
 */

#baguetteBox-overlay {
    /* baguetteBox pins the caption to the bottom of the screen, which on a tall portrait photo
       strands it most of a viewport away from the picture it describes. Making the figure a
       column keeps the pair together; it stays inline-flex so the panel's centering strut still
       has something inline to center. */
    .full-image figure {
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        gap: var(--size-x-small);
        vertical-align: middle;
        block-size: auto;
        max-block-size: 100%;
        max-inline-size: 100%;
        padding: var(--size-small) var(--size-medium);
    }

    .full-image img {
        /* The library appends the <img> after the <figcaption>, so in a column the caption would
           otherwise sit above the photo. Order puts them back the way round they read. */
        order: 0;
        /* A flex item will not shrink below its content by default, so without this a long
           caption pushes the bottom of the image off screen instead of the image making room. */
        min-block-size: 0;
        /* Paired with min-block-size: once the image can shrink, contain is what stops it being
           squashed out of its aspect ratio. */
        object-fit: contain;
    }

    .full-image figcaption {
        order: 1;
        position: static;
        inline-size: auto;
        /* Long captions set to the body measure rather than the full width of the screen. */
        max-inline-size: var(--content-width-small);
        padding: 0;
        background: none;
        color: var(--color-primary-white);
        font-family: var(--font-family-main);
        font-size: var(--font-size-body);
        line-height: var(--line-height-body);
        text-wrap: pretty;
    }
}

/* The arrows overlay the image on a narrow screen, so give the figure less inline padding and let
   the photo use the width it has. */
@media (width < 48rem) {
    #baguetteBox-overlay .full-image figure {
        padding-inline: var(--size-small);
    }
}