/**
 * NQ Tenpin - Joomla Embed Layout
 * Styles for the two-column iframe wrapper used in the Joomla custom HTML module.
 * Served from booking.nqtenpin.com.au and linked from the Joomla page.
 */

.nqt-embed-wrapper {
    display: flex;
    flex-direction: row;
    gap: 1.5rem;
    align-items: flex-start;
    width: 100%;
    box-sizing: border-box;
}

.nqt-embed-col {
    min-width: 0;
}

.nqt-embed-col--widget {
    flex: 0 0 300px;
    width: 300px;
}

.nqt-embed-col--booking {
    flex: 1 1 auto;
}

.nqt-widget-iframe,
.nqt-booking-iframe {
    display: block;
    width: 100%;
    border: none;
    overflow: hidden;
    transition: height 0.25s ease;
}

/* Default starting heights before resize messages arrive */
.nqt-widget-iframe {
    height: 700px;
}

.nqt-booking-iframe {
    height: 700px;
}

/* Stack vertically on narrow screens */
@media (max-width: 840px) {
    .nqt-embed-wrapper {
        flex-direction: column;
        gap: 1rem;
    }

    .nqt-embed-col--widget {
        flex: none;
        width: 100%;
    }

    .nqt-embed-col--booking {
        width: 100%;
    }
}