/*
 * Image treatment across the site.
 *
 * Two jobs:
 *
 *  1. Documents and photos on the order pages -- small, uniform tiles that
 *     open full size, instead of raw <img> tags at whatever size the file
 *     happened to be.
 *  2. The tour and hotel galleries -- the slider crops every slide to 250px
 *     with `.magic-ratio`, and the images carried inline
 *     `height: inherit; width: inherit`, so a portrait photo was squashed to
 *     fit. They now crop rather than distort, and open full size on click.
 *
 * Both use fancyBox 3.5.7, which the site already loads and binds to
 * [data-fancybox].
 */

/* ---- Document and photo thumbnails ----------------------------------- */

/*
 * A passport scan is a document to check, not a picture to display: show it
 * small enough that the row it belongs to stays readable, and let it open
 * full size in the lightbox the site already loads.
 */
.media-thumb {
    background: #f6f7fb;
    border: 1px solid #e3e5ea;
    border-radius: 10px;
    display: inline-block;
    height: 86px;
    overflow: hidden;
    position: relative;
    transition: border-color .15s ease, box-shadow .15s ease;
    width: 128px;
}

.media-thumb img {
    display: block;
    height: 100%;
    /* cover, so a portrait scan and a landscape one are the same size tile */
    object-fit: cover;
    width: 100%;
}

.media-thumb:hover,
.media-thumb:focus-visible {
    border-color: #2bc2ee;
    box-shadow: 0 2px 10px rgba(10, 26, 60, .12);
}

.media-thumb:focus-visible {
    outline: 2px solid #2bc2ee;
    outline-offset: 2px;
}

/*
 * Nothing else on the page opens a lightbox, so the tile has to say that it
 * is clickable. The badge is always visible rather than hover-only, because
 * hover does not exist on a phone.
 */
.media-thumb__zoom {
    align-items: center;
    background: rgba(10, 26, 60, .62);
    border-radius: 6px;
    bottom: 6px;
    color: #fff;
    display: flex;
    font-size: 11px;
    height: 22px;
    inset-inline-end: 6px;
    justify-content: center;
    position: absolute;
    width: 22px;
}

.media-thumb:hover .media-thumb__zoom {
    background: #2bc2ee;
}

/* The cell no longer needs to be as wide as an image. */
.detail-card .table > tbody > tr > td .media-thumb {
    vertical-align: middle;
}

/*
 * On a phone the passenger tables sit indented inside their accordion, and a
 * 128px tile was enough to push the page 4px wider than the window. Measured
 * at 375px: 379px of scroll width with the tiles, 375px without.
 */
@media (max-width: 575.98px) {
    .media-thumb {
        height: 64px;
        width: 96px;
    }
}


/* ---- Tour and hotel galleries ---------------------------------------- */

/*
 * The slide is a fixed 250px box. Filling it with `width/height: inherit` on
 * the <img> stretched the photo to those exact dimensions whatever its shape;
 * cover keeps the subject's proportions and trims the overflow instead.
 */
.gallery-figure {
    border-radius: 10px;
    cursor: zoom-in;
    display: block;
    height: 100%;
    overflow: hidden;
    position: relative;
    width: 100%;
}

.gallery-figure img {
    display: block;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
    width: 100%;
}

.gallery-figure:hover img,
.gallery-figure:focus-visible img {
    transform: scale(1.04);
}

.gallery-figure:focus-visible {
    outline: 2px solid #2bc2ee;
    outline-offset: 2px;
}

/*
 * Nothing else in the slider is clickable, so say that this is. Always
 * visible rather than hover-only, because hover does not exist on a phone.
 */
.gallery-figure__zoom {
    align-items: center;
    background: rgba(10, 26, 60, .55);
    border-radius: 8px;
    bottom: 10px;
    color: #fff;
    display: flex;
    font-size: 13px;
    height: 30px;
    inset-inline-end: 10px;
    justify-content: center;
    position: absolute;
    transition: background-color .15s ease;
    width: 30px;
}

.gallery-figure:hover .gallery-figure__zoom {
    background: #2bc2ee;
}

/*
 * The lightbox has to sit above the fixed site header. Raising the container
 * is not enough on its own -- the header still painted over the dimmed
 * backdrop -- so the header is hidden outright while a lightbox is open.
 * fancyBox puts `fancybox-active` on <body> for exactly this, so no script is
 * needed and the header comes back by itself when the lightbox closes.
 */
.fancybox-container {
    z-index: 100000;
}

body.fancybox-active .site-header {
    display: none;
}

/* A portrait in a fixed square: crop it, do not squash it. */
.avatar-square {
    border-radius: 50%;
    height: 5rem;
    object-fit: cover;
    width: 5rem;
}

/*
 * The blog cover is not inside the fixed-height slider, so it keeps its own
 * proportions rather than filling a 250px box.
 */
.gallery-figure--free {
    height: auto;
}

.gallery-figure--free img {
    height: auto;
}

/*
 * Set by media.js when a document's file cannot be fetched -- missing from the
 * private disk, or a signature that expired while the page sat open. Shows an
 * empty frame rather than a broken-image icon.
 */
.media-thumb--unavailable {
    cursor: default;
}

.media-thumb--unavailable img,
.media-thumb--unavailable .media-thumb__zoom {
    display: none;
}

.media-thumb--unavailable::after {
    align-items: center;
    color: #a3a7b4;
    content: '\f03e';
    display: flex;
    font-family: 'Font Awesome 5 Free';
    font-size: 20px;
    font-weight: 900;
    height: 100%;
    justify-content: center;
    width: 100%;
}