/*
 * Carnival Figures project media viewer
 * --------------------------------------
 * This is the single visual control point for the new project film and
 * image-gallery pages. Page files provide only media IDs, image links and
 * their return destination.
 */
:root {
    --cf-media-backdrop: rgba(0, 0, 0, 0.90);
    --cf-media-border: 26px;
    --cf-media-caption-space: 64px;
    --cf-media-max-width: 1280px;
    --cf-media-caption-size: 15px;
    --cf-media-count-size: 13px;
    --cf-media-copy: #595959;
    --cf-media-control: #a8a8a8;
    --cf-media-control-active: #e8e8e8;
    --cf-media-focus: #e8e8e8;
    --cf-media-z-index: 10000;
}

html.cf-media-open,
body.cf-media-open {
    overflow: hidden !important;
}

[data-cf-media-fallback],
#content-project [data-cf-gallery-item] {
    display: none;
}

.cf-media-viewer {
    position: fixed;
    z-index: var(--cf-media-z-index);
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: none;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    padding: 28px 24px;
    font-family: Arial, Helvetica, sans-serif;
}

.cf-media-viewer.is-open {
    display: flex;
}

.cf-media-backdrop {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: var(--cf-media-backdrop);
    cursor: pointer;
}

.cf-media-stage {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    min-width: 0;
    max-width: var(--cf-media-max-width);
    max-height: 100%;
}

/* The stage receives programmatic focus so Escape works without a visible
   custom close control. It is not an interactive control itself. */
.cf-media-stage:focus {
    outline: 0;
}

.cf-media-viewer--video .cf-media-stage {
    width: 92vw;
    /* Preserve the full black frame on short laptop/browser viewports. */
    max-width: min(var(--cf-media-max-width), calc(177.7778vh - 140px));
}

.cf-media-viewer--video[data-aspect="4-3"] .cf-media-stage {
    width: min(68vw, 960px);
    max-width: min(960px, calc(133.3333vh - 140px));
}

.cf-media-viewer--video[data-aspect="9-16"] .cf-media-stage {
    /* Keep the full 26px frame between the site header and project nav.
       Width is derived from ~86vh minus the frame itself. */
    width: min(36vw, 580px, calc((86vh - 52px) * 0.5625));
    max-width: min(580px, calc((86vh - 52px) * 0.5625));
    max-height: 86vh;
}

.cf-media-viewer--gallery .cf-media-stage {
    width: auto;
    max-width: calc(100vw - 48px);
}

.cf-media-frame {
    position: relative;
    box-sizing: border-box;
    max-width: 100%;
    background: #000;
}

.cf-media-viewer--video .cf-media-frame {
    width: 100%;
    padding: var(--cf-media-border);
}

.cf-media-video-shell {
    position: relative;
    width: 100%;
    height: 0;
    overflow: hidden;
    padding-top: 56.25%;
    background: #000;
}

.cf-media-viewer[data-aspect="4-3"] .cf-media-video-shell {
    padding-top: 75%;
}

.cf-media-viewer[data-aspect="9-16"] .cf-media-video-shell {
    padding-top: 177.7778%;
}

.cf-media-viewer[data-aspect="1-1"] .cf-media-video-shell {
    padding-top: 100%;
}

.cf-media-viewer--video[data-aspect="1-1"] .cf-media-stage {
    width: min(48vw, 720px, calc(86vh - 52px));
    max-width: min(720px, calc(86vh - 52px));
    max-height: 86vh;
}

.cf-media-video-shell iframe {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background: #000;
}

.cf-media-viewer--gallery .cf-media-frame {
    display: inline-block;
    padding: var(--cf-media-border) var(--cf-media-border) var(--cf-media-caption-space);
}

.cf-media-image {
    display: block;
    width: auto;
    height: auto;
    max-width: calc(100vw - 100px);
    max-height: calc(100vh - 164px);
    background: #000;
}

.cf-media-hotspot {
    position: absolute;
    z-index: 4;
    top: var(--cf-media-border);
    bottom: var(--cf-media-caption-space);
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    border-radius: 0;
    background: transparent;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.cf-media-hotspot:hover,
.cf-media-hotspot:focus,
.cf-media-hotspot:active {
    border: 0;
    outline: 0;
    background: transparent;
}

.cf-media-hotspot--previous {
    right: 50%;
    left: var(--cf-media-border);
}

.cf-media-hotspot--next {
    right: var(--cf-media-border);
    left: 50%;
}

.cf-media-caption {
    position: absolute;
    z-index: 3;
    right: var(--cf-media-border);
    bottom: 14px;
    left: var(--cf-media-border);
    color: var(--cf-media-copy);
    text-align: left;
}

.cf-media-title {
    display: block;
    margin: 0 0 5px;
    font-size: var(--cf-media-caption-size);
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.25;
}

.cf-media-count {
    display: block;
    margin: 0;
    font-size: var(--cf-media-count-size);
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.2;
}

.cf-media-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    clip-path: inset(50%) !important;
}

@media screen and (max-width: 800px) {
    html.cf-media-open,
    body.cf-media-open {
        overflow: auto !important;
    }

    .cf-media-viewer,
    .cf-media-viewer.is-open {
        display: none !important;
    }
}