.quiqqer-info-popup {
    /* theming layer > control config layer > fallback */
    --_media-width: var(--quiqqer-info-popup-media-width, 40%);
    --_media-height: var(--quiqqer-info-popup-media-height, max(220px, 45%));
    --_media-color: var(--quiqqer-info-popup-media-color, var(--_q-controlConf-media-color, transparent));
    --_content-padding: var(--quiqqer-info-popup-content-padding, 2rem);
    --_content-gap: var(--quiqqer-info-popup-content-gap, 1rem);

    display: flex;
    height: 100%;
    width: 100%;
}

/*
 * The layout is driven purely by the display-mode modifier class, so new
 * variants stay CSS-only:
 *   --sidebar      : media region left of the content (row)
 *   --sidebarRight : media region right of the content (row, media reordered)
 *   --top          : media region on top of the content (column)
 */

.quiqqer-info-popup--top {
    flex-direction: column;
}

/* media on the right: keep DOM order (media first), reorder visually so the
   mobile column layout below is unaffected (media ends up below the content) */
.quiqqer-info-popup--sidebarRight .quiqqer-info-popup-media {
    order: 2;
}

.quiqqer-info-popup-media {
    flex: 0 0 var(--_media-width);
    background-color: var(--_media-color);
    min-height: 200px;
    overflow: hidden;
}

.quiqqer-info-popup--top .quiqqer-info-popup-media {
    flex: 0 0 var(--_media-height);
    min-height: 0;
}

.quiqqer-info-popup--media-auto-height {
    overflow-y: auto;
}

.quiqqer-info-popup--media-auto-height .quiqqer-info-popup-media {
    flex: 0 0 auto;
    min-height: 0;
}

.quiqqer-info-popup--media-auto-height .quiqqer-info-popup-content {
    flex: 0 0 auto;
    overflow-y: visible;
}

.quiqqer-info-popup-media picture,
.quiqqer-info-popup-media img {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.quiqqer-info-popup--media-auto-height .quiqqer-info-popup-media picture,
.quiqqer-info-popup--media-auto-height .quiqqer-info-popup-media img {
    height: auto;
    object-fit: contain;
    width: 100%;
}

.quiqqer-info-popup-content {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    overflow-y: auto;
    padding: var(--_content-padding);
}

.quiqqer-info-popup-content-inner {
    display: flex;
    flex-direction: column;
    gap: var(--_content-gap);
}

.quiqqer-info-popup--content-centered .quiqqer-info-popup-content-inner {
    text-align: center;
}

/* vertical alignment of the content (default top); auto margins keep the
   content scrollable from the top when it is taller than the popup */
.quiqqer-info-popup[data-valign="top"] .quiqqer-info-popup-content-inner {
    margin-bottom: auto;
}

.quiqqer-info-popup[data-valign="center"] .quiqqer-info-popup-content-inner {
    margin-block: auto;
}

.quiqqer-info-popup[data-valign="bottom"] .quiqqer-info-popup-content-inner {
    margin-top: auto;
}

.quiqqer-info-popup-title {
    margin: 0;
}

.quiqqer-info-popup-body img {
    height: auto;
    max-width: 100%;
}

.quiqqer-info-popup :focus-visible {
    outline: 2px solid var(--quiqqer-info-popup-focus-color, currentColor);
    outline-offset: 2px;
}

@media (max-width: 600px) {
    .quiqqer-info-popup {
        flex-direction: column;
    }

    .quiqqer-info-popup-media {
        flex-basis: 140px;
        min-height: 140px;
    }

    .quiqqer-info-popup-content {
        --_content-padding: 1.25rem;
    }
}
