/*
 * Shared enlarged-view window (native <dialog class="em-lightbox">):
 * task 08 project gallery and task 09 certificate ribbon. Markup:
 * em_child_lightbox_dialog(), script: assets/js/lightbox.js, both enqueued by
 * em_child_enqueue_lightbox() (inc/helpers.php). Base look without the
 * restyle layer (the layer styles it in its pages.css). Moved here unchanged
 * from projects.css, plus the caption line.
 */

.em-lightbox {
    position: fixed;
    border: 0;
    border-radius: 4px;
    padding: 0;
    max-width: 90vw;
    max-height: 90vh;
    background: transparent;
    margin: auto;
    overflow: visible;
}

.em-lightbox::backdrop {
    background: rgba( 0, 0, 0, 0.8 );
}

.em-lightbox__img {
    display: block;
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
}

/* .em-lightbox .x, not .x: Soledad's `button, [type="button"]` (orange,
   padding 12px 20px, uppercase) has the weight of one class and loads later;
   its padding pushed the icon off-centre. */
.em-lightbox .em-lightbox__close,
.em-lightbox .em-lightbox__nav {
    position: absolute;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba( 0, 0, 0, 0.6 );
    color: #fff;
    box-shadow: none;
    font-size: 0;
    line-height: 0;
    text-transform: none;
    cursor: pointer;
}

.em-lightbox .em-lightbox__close svg,
.em-lightbox .em-lightbox__nav svg {
    display: block;
    width: 20px;
    height: 20px;
}

.em-lightbox__close {
    top: 10px;
    right: 10px;
}

.em-lightbox__nav {
    top: 50%;
    transform: translateY( -50% );
}

.em-lightbox__nav--prev {
    left: 10px;
}

.em-lightbox__nav--next {
    right: 10px;
}

.em-lightbox__nav[hidden],
.em-lightbox__counter[hidden] {
    display: none;
}

.em-lightbox__counter {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX( -50% );
    margin: 0;
    padding: 0.2em 0.6em;
    border-radius: 4px;
    background: rgba( 0, 0, 0, 0.6 );
    color: #fff;
    font-size: 13px;
}

.em-lightbox__caption {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 60px;
    margin: 0;
    padding: 0.3em 0.6em;
    border-radius: 4px;
    background: rgba( 0, 0, 0, 0.6 );
    color: #fff;
    font-size: 13px;
    line-height: 1.35;
}

.em-lightbox__caption[hidden] {
    display: none;
}