/* EMVIA Click-Picture / Big Picture embed
   The application runs in an iframe so its legacy CSS/JS cannot collide with
   the WordPress theme (or the theme's own jQuery). */
.emvia-big-picture-block {
    --emvia-big-picture-top-gap: 90px;
    --emvia-big-picture-padding-top: 30px;
    --emvia-big-picture-padding-bottom: 30px;

    position: relative;
    width: 100%;
    max-width: none;

    margin-top: var(--emvia-big-picture-top-gap);

    padding-top: var(--emvia-big-picture-padding-top);
    padding-bottom: var(--emvia-big-picture-padding-bottom);

    overflow: hidden;
    background: #fff;
}

.emvia-big-picture-block.is-viewport {
    height: auto;
    min-height: 0;
}

.emvia-big-picture-block.is-viewport .emvia-big-picture-frame {
    height: calc(
        100svh
        - var(--emvia-big-picture-viewport-offset, 65px)
        - var(--emvia-big-picture-top-gap, 90px)
    );
    min-height: var(--emvia-big-picture-mobile-height, 620px);
}

.emvia-big-picture-block.is-fixed {
    height: var(--emvia-big-picture-height, 820px);
}

.emvia-big-picture-frame {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    margin: 0;
    padding: 0;
    background: #fff;
}

.emvia-big-picture-message {
    margin: 30px auto;
    width: min(1170px, calc(100% - 40px));
    padding: 18px 20px;
    border: 1px solid #d7d7d7;
    background: #f7f7f7;
    color: #444;
    font-size: 15px;
}

@media (max-width: 767px) {
    .emvia-big-picture-block.is-fixed {
        height: var(--emvia-big-picture-mobile-height, 620px);
    }
}