/*
 * Darealmop_PageBuilderCompat — frontend structural / appearance CSS.
 * ------------------------------------------------------------------------
 * A clean, non-Luma (Hyvä-style) theme omits Magento's `@magento_import
 * 'source/_module.less'`, so Page Builder's structural frontend CSS never
 * loads. PB stores serialized HTML in the DB and echoes it verbatim; there
 * is no per-type .phtml. Per-element colour/spacing/background/border are
 * BAKED into the stored markup via `data-pb-style="<UID>"` + an inline
 * <style> block, so those travel with the content. This file supplies the
 * STRUCTURAL / layout CSS a clean theme is missing for the core PB content
 * types, plus the appearance layout and the arrow/dot/tab controls the
 * companion Alpine hydrator (page-builder.js) injects.
 *
 * SKELETON-CSS DISCIPLINE (strict):
 *   - Structure literals only: display, flex/grid, gap, padding, margin,
 *     position, aspect-ratio, px sizes, overflow, transition, z-index.
 *   - EVERY colour / background / shadow / border-colour / font is a
 *     `--dm-content-pb-*` custom property that FALLS THROUGH to the shared
 *     `--dm-content-*` namespace. NO literal colour values anywhere.
 *
 * BASE RULES NOT RE-DECLARED HERE:
 *   page-builder-elements/view/frontend/web/css/pagebuilder-frontend.css
 *   already ships the base `[data-content-type=row]` box-sizing, the
 *   `[data-appearance=contained]` max-width/margin, the contained/full-width
 *   inner box-sizing, `.pagebuilder-column-group{display:flex}`,
 *   `.pagebuilder-column{box-sizing}`, the html/heading/text word-wrap, and
 *   the @768 column stack. This file deliberately does NOT restate those
 *   exact rules (to avoid double-application) and builds on top of them.
 *
 * Mobile-first; the stack breakpoint is max-width: 768px to match core PB.
 */

/* =========================================================================
 * 1. LAYOUT — rows (appearances the base file does not cover)
 * ========================================================================= */

/* Full-width row: the row itself spans edge-to-edge, but its inner content
 * column is centred and capped at the theme content width. (contained is
 * handled in the base file; here we constrain the full-width inner.) */
[data-content-type='row'][data-appearance='full-width'] {
    box-sizing: border-box;
}

[data-content-type='row'][data-appearance='full-width'] > [data-element='inner'] {
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
    max-width: var(--dm-content-pb-max-width, var(--dm-content-max-width, 1440px));
    width: 100%;
}

/* Full-bleed row: both the row and its inner run edge-to-edge (no cap). */
[data-content-type='row'][data-appearance='full-bleed'] {
    box-sizing: border-box;
}

[data-content-type='row'][data-appearance='full-bleed'] > [data-element='inner'] {
    box-sizing: border-box;
}

/* A row's optional video overlay tint sits ABOVE the injected background video
 * (z-index -2) but BELOW the row's non-positioned content, so text stays legible.
 * Negative z-index keeps it under content without the content needing its own
 * stacking context. */
[data-content-type='row'] .video-overlay,
.pagebuilder-video-overlay {
    position: absolute;
    inset: 0;
    z-index: -1;
}

/* =========================================================================
 * 2. LAYOUT — column-group / column-line / column
 *    (base ships column-group display:flex, column box-sizing, and the
 *     @768 column stack — NOT re-declared. Here: the newer column-line
 *     flex container, column flex behaviour, and full-height appearance.)
 * ========================================================================= */

.pagebuilder-column-line {
    display: flex;
    flex-wrap: nowrap;
    box-sizing: border-box;
}

/* Columns are flex items; their width/flex-basis is baked inline via
 * data-pb-style. Keep them from shrinking below that basis and let their
 * own children stack vertically. */
.pagebuilder-column {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    flex-wrap: wrap;
    min-width: 0;
}

/* Full-height column appearance stretches to the tallest sibling. */
.pagebuilder-column[data-appearance='full-height'] {
    align-self: stretch;
}

/* =========================================================================
 * 3. RESPONSIVE IMAGE SHOW / HIDE  +  generic overlay
 * ========================================================================= */

.pagebuilder-mobile-only {
    display: none;
}

.pagebuilder-mobile-hidden {
    display: inline-block;
}

.pagebuilder-overlay {
    box-sizing: border-box;
    max-width: var(--dm-content-pb-overlay-max-width, 540px);
    transition: background-color 500ms ease, opacity 300ms ease;
}

/* =========================================================================
 * 4. CONTENT — text / heading / html
 *    (base already sets word-wrap for html/heading/text — not re-declared)
 * ========================================================================= */

/* .bypass-html-filter is PB's raw-HTML passthrough wrapper for text/html
 * content; make sure it establishes a normal block box. */
[data-content-type='text'] .bypass-html-filter,
[data-content-type='html'] .bypass-html-filter,
div[data-content-type='text'],
div[data-content-type='html'] {
    box-sizing: border-box;
}

/* Reset-safe headings: PB heading IS the h1..h6 element itself. Guarantee a
 * predictable box on a theme that may zero-out heading margins elsewhere;
 * font-size/weight/colour stay with the theme or the baked style. */
[data-content-type='heading'] {
    box-sizing: border-box;
}

/* =========================================================================
 * 5. CONTENT — buttons / button-item
 * ========================================================================= */

[data-content-type='buttons'] {
    box-sizing: border-box;
    max-width: 100%;
}

[data-content-type='buttons'][data-appearance='inline'] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--dm-content-pb-button-gap, 10px);
}

[data-content-type='buttons'][data-appearance='stacked'] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--dm-content-pb-button-gap, 10px);
}

[data-content-type='button-item'] {
    box-sizing: border-box;
    max-width: 100%;
}

[data-content-type='button-item'] [data-element='empty_link'] {
    cursor: default;
}

/* Button chrome: padding / inline layout are literals; every colour is a
 * token that falls through to the shared content accent/surface. */
a.pagebuilder-button-primary,
button.pagebuilder-button-primary,
div.pagebuilder-button-primary,
a.pagebuilder-button-secondary,
button.pagebuilder-button-secondary,
div.pagebuilder-button-secondary,
a.pagebuilder-button-link,
button.pagebuilder-button-link,
div.pagebuilder-button-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: var(--dm-content-pb-button-padding, 12px 20px);
    border: 1px solid transparent;
    border-radius: var(--dm-content-pb-button-radius, var(--dm-content-radius, 4px));
    text-decoration: none;
    cursor: pointer;
    transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease, opacity 200ms ease;
}

a.pagebuilder-button-primary,
button.pagebuilder-button-primary,
div.pagebuilder-button-primary {
    background-color: var(--dm-content-pb-button-primary-bg, var(--dm-content-accent));
    color: var(--dm-content-pb-button-primary-color, var(--dm-content-on-accent, var(--dm-content-surface)));
    border-color: var(--dm-content-pb-button-primary-border, var(--dm-content-pb-button-primary-bg, var(--dm-content-accent)));
}

a.pagebuilder-button-secondary,
button.pagebuilder-button-secondary,
div.pagebuilder-button-secondary {
    background-color: var(--dm-content-pb-button-secondary-bg, transparent);
    color: var(--dm-content-pb-button-secondary-color, var(--dm-content-accent));
    border-color: var(--dm-content-pb-button-secondary-border, var(--dm-content-accent));
}

a.pagebuilder-button-link,
button.pagebuilder-button-link,
div.pagebuilder-button-link {
    padding: var(--dm-content-pb-button-link-padding, 8px 4px);
    background-color: transparent;
    border-color: transparent;
    color: var(--dm-content-pb-button-link-color, var(--dm-content-accent));
    text-decoration: underline;
}

/* =========================================================================
 * 6. CONTENT — image (figure / figcaption)
 * ========================================================================= */

figure[data-content-type='image'] {
    box-sizing: border-box;
    margin: 0;
}

figure[data-content-type='image'] > [data-element='link'],
figure[data-content-type='image'] > [data-element='link'] img,
figure[data-content-type='image'] img {
    border-radius: inherit;
    max-width: 100%;
    height: auto;
}

figure[data-content-type='image'] figcaption {
    box-sizing: border-box;
    color: var(--dm-content-pb-caption-color, var(--dm-content-muted, inherit));
}

/* =========================================================================
 * 7. CONTENT — divider
 * ========================================================================= */

[data-content-type='divider'] {
    box-sizing: border-box;
}

hr[data-element='line'] {
    box-sizing: border-box;
    border: 0;
    border-top-width: var(--dm-content-pb-divider-width, 1px);
    border-top-style: solid;
    border-top-color: var(--dm-content-pb-divider-color, var(--dm-content-border, currentColor));
    margin: 0 auto;
}

/* =========================================================================
 * 8. BANNER  +  SLIDE (shared poster/collage structure)
 * ========================================================================= */

/* The link/empty-link wrapper must not tint the banner text. */
[data-content-type='banner'] > [data-element='link'],
[data-content-type='banner'] > [data-element='empty_link'],
[data-content-type='slide'] > [data-element='link'],
[data-content-type='slide'] > [data-element='empty_link'] {
    color: inherit;
    text-decoration: inherit;
    min-height: inherit;
    display: block;
}

.pagebuilder-banner-wrapper,
.pagebuilder-slide-wrapper {
    box-sizing: border-box;
    background-clip: padding-box;
    border-radius: inherit;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.pagebuilder-slide-wrapper {
    min-height: inherit;
}

/* The overlay is the tinted layer that holds the content + button. Padding
 * and transition are structural; the tint colour is baked via data-pb-style
 * (data-overlay-color) so it renders even with zero PB CSS. */
.pagebuilder-banner-wrapper .pagebuilder-overlay,
.pagebuilder-slide-wrapper .pagebuilder-overlay {
    box-sizing: border-box;
    padding: var(--dm-content-pb-overlay-padding, 30px);
    position: relative;
    transition: background-color 500ms ease, opacity 300ms ease;
}

/* Poster appearance: content centred over a full-bleed image. */
.pagebuilder-overlay.pagebuilder-poster-overlay {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: none;
}

.pagebuilder-slide-wrapper .pagebuilder-overlay.pagebuilder-poster-overlay {
    min-height: inherit;
}

/* Collage appearances: content block sits left / right / centred, capped. */
[data-appearance='collage-left'] .pagebuilder-banner-wrapper .pagebuilder-overlay:not(.pagebuilder-poster-overlay) {
    margin-right: auto;
    max-width: var(--dm-content-pb-collage-max-width, 540px);
}

[data-appearance='collage-right'] .pagebuilder-banner-wrapper .pagebuilder-overlay:not(.pagebuilder-poster-overlay) {
    margin-left: auto;
    max-width: var(--dm-content-pb-collage-max-width, 540px);
}

[data-appearance='collage-centered'] .pagebuilder-banner-wrapper .pagebuilder-overlay:not(.pagebuilder-poster-overlay) {
    margin-left: auto;
    margin-right: auto;
    max-width: var(--dm-content-pb-collage-max-width, 540px);
}

.pagebuilder-poster-content,
.pagebuilder-collage-content {
    box-sizing: border-box;
    width: 100%;
}

.pagebuilder-banner-wrapper [data-element='content'],
.pagebuilder-slide-wrapper [data-element='content'] {
    min-height: 50px;
    overflow: auto;
}

/* Banner / slide button: padding + inline layout are literals; colours are
 * tokens (falling through to the accent). */
button.pagebuilder-banner-button,
button.pagebuilder-slide-button,
.pagebuilder-banner-button,
.pagebuilder-slide-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    max-width: 100%;
    margin: 20px 0 0 0;
    padding: var(--dm-content-pb-button-padding, 12px 20px);
    border: 1px solid transparent;
    border-radius: var(--dm-content-pb-button-radius, var(--dm-content-radius, 4px));
    text-align: inherit;
    word-break: break-word;
    cursor: pointer;
    transition: opacity 500ms ease, background-color 200ms ease, color 200ms ease;
    background-color: var(--dm-content-pb-banner-button-bg, var(--dm-content-accent));
    color: var(--dm-content-pb-banner-button-color, var(--dm-content-on-accent, var(--dm-content-surface)));
}

/* -------- Pure-CSS hover reveal (no JS needed) -------------------------- *
 * PB stores data-show-overlay / data-show-button = always | hover | never.
 * hover  -> hidden until the banner/slide is hovered or keyboard-focused.
 * never  -> permanently hidden.
 * always -> default (nothing to do).
 * NOTE (v0.1.0): the overlay tint and its content share one element, so a
 * hover-revealed overlay reveals its content with it — the accepted
 * simplification documented in the module notes. */

[data-content-type='banner'][data-show-overlay='hover'] .pagebuilder-overlay,
[data-content-type='slide'][data-show-overlay='hover'] .pagebuilder-overlay {
    opacity: 0;
}

[data-content-type='banner'][data-show-overlay='hover']:hover .pagebuilder-overlay,
[data-content-type='banner'][data-show-overlay='hover']:focus-within .pagebuilder-overlay,
[data-content-type='slide'][data-show-overlay='hover']:hover .pagebuilder-overlay,
[data-content-type='slide'][data-show-overlay='hover']:focus-within .pagebuilder-overlay {
    opacity: 1;
}

[data-content-type='banner'][data-show-overlay='never'] .pagebuilder-overlay,
[data-content-type='slide'][data-show-overlay='never'] .pagebuilder-overlay {
    background-color: transparent !important;
}

[data-content-type='banner'][data-show-button='hover'] .pagebuilder-banner-button,
[data-content-type='slide'][data-show-button='hover'] .pagebuilder-slide-button {
    opacity: 0;
}

[data-content-type='banner'][data-show-button='hover']:hover .pagebuilder-banner-button,
[data-content-type='banner'][data-show-button='hover']:focus-within .pagebuilder-banner-button,
[data-content-type='slide'][data-show-button='hover']:hover .pagebuilder-slide-button,
[data-content-type='slide'][data-show-button='hover']:focus-within .pagebuilder-slide-button {
    opacity: 1;
}

[data-content-type='banner'][data-show-button='never'] .pagebuilder-banner-button,
[data-content-type='slide'][data-show-button='never'] .pagebuilder-slide-button {
    display: none;
}

/* =========================================================================
 * 9. SLIDER  (Alpine-driven; slick removed by the layout <remove>)
 *    The JS stacks slides and reveals one at a time. Structure only.
 * ========================================================================= */

.pagebuilder-slider,
[data-content-type='slider'] {
    position: relative;
    box-sizing: border-box;
    overflow: hidden;
}

/* Each slide fills the slider box; the hydrator toggles [hidden] / .is-active
 * (and, in fade mode, opacity). Until JS runs, the first slide shows and the
 * rest collapse, so there is no flash of stacked slides. */
.pagebuilder-slider > [data-content-type='slide'] {
    box-sizing: border-box;
    min-height: inherit;
    overflow: hidden;
}

.pagebuilder-slider > [data-content-type='slide'][hidden] {
    display: none;
}

.pagebuilder-slider > [data-content-type='slide'] + [data-content-type='slide'] {
    display: none;
}

.pagebuilder-slider > [data-content-type='slide'].is-active {
    display: block;
}

/* Fade mode: slides are stacked and cross-fade via opacity. The hydrator
 * adds .dm-content-pb-slider--fade to the slider when data-fade is set. */
.dm-content-pb-slider--fade > [data-content-type='slide'] {
    position: absolute;
    inset: 0;
    display: block;
    opacity: 0;
    transition: opacity var(--dm-content-pb-slider-fade-speed, 500ms) ease;
    pointer-events: none;
    z-index: 0;
}

.dm-content-pb-slider--fade > [data-content-type='slide'].is-active {
    position: relative;
    opacity: 1;
    pointer-events: auto;
    z-index: 1;
}

/* =========================================================================
 * 10. SLIDER / CAROUSEL CONTROLS
 *     Net-new wrappers the hydrator injects. The JS binds to these exact
 *     class names for both the slider and the products carousel.
 *       .dm-content-pb-slider__arrow  (--prev / --next)
 *       .dm-content-pb-slider__dots / .dm-content-pb-slider__dot (.is-active)
 *       .dm-content-pb-carousel__arrow (--prev / --next)  [alias]
 *       .dm-content-pb-carousel__dots / .dm-content-pb-carousel__dot
 * ========================================================================= */

.dm-content-pb-slider__arrow,
.dm-content-pb-carousel__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: var(--dm-content-pb-arrow-size, 40px);
    height: var(--dm-content-pb-arrow-size, 40px);
    padding: 0;
    border: 0;
    border-radius: var(--dm-content-pb-arrow-radius, 50%);
    cursor: pointer;
    z-index: 5;
    transition: background-color 200ms ease, opacity 200ms ease;
    background-color: var(--dm-content-pb-arrow-bg, var(--dm-content-accent));
    color: var(--dm-content-pb-arrow-color, var(--dm-content-on-accent, var(--dm-content-surface)));
    box-shadow: var(--dm-content-pb-arrow-shadow, none);
}

.dm-content-pb-slider__arrow--prev,
.dm-content-pb-carousel__arrow--prev {
    left: var(--dm-content-pb-arrow-inset, 12px);
}

.dm-content-pb-slider__arrow--next,
.dm-content-pb-carousel__arrow--next {
    right: var(--dm-content-pb-arrow-inset, 12px);
}

.dm-content-pb-slider__arrow[disabled],
.dm-content-pb-carousel__arrow[disabled] {
    opacity: 0.4;
    cursor: default;
}

.dm-content-pb-slider__dots,
.dm-content-pb-carousel__dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--dm-content-pb-dot-gap, 8px);
    box-sizing: border-box;
    margin: 0;
    padding: var(--dm-content-pb-dots-padding, 12px 0 0);
    list-style: none;
}

.dm-content-pb-slider__dot,
.dm-content-pb-carousel__dot {
    display: inline-block;
    box-sizing: border-box;
    width: var(--dm-content-pb-dot-size, 10px);
    height: var(--dm-content-pb-dot-size, 10px);
    padding: 0;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 200ms ease, transform 200ms ease;
    background-color: var(--dm-content-pb-dot-bg, var(--dm-content-border, currentColor));
}

.dm-content-pb-slider__dot.is-active,
.dm-content-pb-carousel__dot.is-active {
    background-color: var(--dm-content-pb-dot-active-bg, var(--dm-content-accent));
    transform: scale(1.2);
}

/* =========================================================================
 * 11. TABS  (Alpine-driven; jquery-ui removed by the layout <remove>)
 * ========================================================================= */

[data-content-type='tabs'] {
    box-sizing: border-box;
}

ul.tabs-navigation {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    box-sizing: border-box;
    margin: 0 0 -1px 0;
    padding: 0;
    list-style: none;
}

li.tab-header {
    display: inline-flex;
    box-sizing: border-box;
    max-width: 100%;
    margin: 0;
    position: relative;
    overflow-wrap: break-word;
    word-wrap: break-word;
    z-index: 1;
    border: 1px solid var(--dm-content-pb-tab-border, var(--dm-content-border, currentColor));
    border-bottom: 0;
    background-color: var(--dm-content-pb-tab-bg, var(--dm-content-surface-alt, transparent));
}

li.tab-header:not(:first-child) {
    margin-left: -1px;
}

/* Active tab: PB/jquery-ui used .ui-state-active; the Alpine hydrator sets
 * aria-selected=true and/or .is-active. Support all three. */
li.tab-header.ui-state-active,
li.tab-header.is-active,
li.tab-header[aria-selected='true'] {
    z-index: 19;
    background-color: var(--dm-content-pb-tab-active-bg, var(--dm-content-surface, transparent));
}

a.tab-title {
    display: block;
    box-sizing: border-box;
    padding: var(--dm-content-pb-tab-padding, 14px 20px);
    cursor: pointer;
    white-space: normal;
    text-decoration: none;
    transition: color 300ms ease, background-color 300ms ease;
    color: var(--dm-content-pb-tab-color, var(--dm-content-text, inherit));
}

a.tab-title:hover {
    text-decoration: none;
}

li.tab-header.ui-state-active a.tab-title,
li.tab-header.is-active a.tab-title,
li.tab-header[aria-selected='true'] a.tab-title {
    color: var(--dm-content-pb-tab-active-color, var(--dm-content-accent));
}

span.tab-title {
    display: block;
}

.tabs-content {
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    z-index: 9;
    border: 1px solid var(--dm-content-pb-tab-content-border, var(--dm-content-border, currentColor));
}

/* Panels: only the active one shows. The hydrator toggles [hidden] and
 * aria; before it runs, only the first panel is visible (matches core PB). */
.tabs-content [data-content-type='tab-item'] {
    box-sizing: border-box;
    min-height: inherit;
}

.tabs-content [data-content-type='tab-item']:not(:first-child) {
    display: none;
}

[data-content-type='tab-item'][hidden] {
    display: none;
}

.tabs-content [data-content-type='tab-item'].is-active,
.tabs-content [data-content-type='tab-item'][aria-hidden='false'] {
    display: block;
}

/* =========================================================================
 * 12. PRODUCTS — grid & carousel
 *     PB injects the server-rendered widget list:
 *       .block.widget .products-grid ol.product-items > li.product-item
 * ========================================================================= */

[data-content-type='products'] {
    box-sizing: border-box;
}

/* Grid: responsive CSS grid of the injected product items. */
[data-content-type='products'][data-appearance='grid'] .products-grid ol.product-items,
[data-content-type='products'][data-appearance='grid'] ol.product-items.widget-product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--dm-content-pb-product-min, 200px), 1fr));
    gap: var(--dm-content-pb-product-gap, var(--dm-content-gutter, 20px));
    margin: 0;
    padding: 0;
    list-style: none;
}

[data-content-type='products'][data-appearance='grid'] .products-grid ol.product-items > li.product-item {
    box-sizing: border-box;
    width: auto;
    max-width: 100%;
    margin: 0;
    padding: 0;
}

/* Carousel: horizontal, scroll-snapping track the hydrator drives with the
 * shared arrow/dot controls above (rendered into a relatively-positioned
 * viewport the JS wraps around the list). */
[data-content-type='products'][data-appearance='carousel'] {
    position: relative;
}

[data-content-type='products'][data-appearance='carousel'] .products-grid ol.product-items,
[data-content-type='products'][data-appearance='carousel'] ol.product-items.widget-product-grid {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--dm-content-pb-product-gap, var(--dm-content-gutter, 20px));
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

[data-content-type='products'][data-appearance='carousel'] .products-grid ol.product-items > li.product-item {
    box-sizing: border-box;
    flex: 0 0 var(--dm-content-pb-carousel-item-width, 240px);
    max-width: 100%;
    margin: 0;
    padding: 0;
    scroll-snap-align: start;
}

/* Hide the native scrollbar when the JS provides arrows/dots. */
[data-content-type='products'][data-appearance='carousel'] .products-grid ol.product-items.dm-content-pb-carousel--hosted {
    scrollbar-width: none;
}

[data-content-type='products'][data-appearance='carousel'] .products-grid ol.product-items.dm-content-pb-carousel--hosted::-webkit-scrollbar {
    display: none;
}

/* Product actions inside a PB column stay contained. */
.pagebuilder-column .widget-product-grid .product-item .product-item-actions .actions-primary {
    display: inline-block;
    max-width: 100%;
}

/* =========================================================================
 * 13. VIDEO  (16:9 aspect-ratio box; iframe/video fill)
 * ========================================================================= */

div[data-content-type='video'] {
    font-size: 0;
    box-sizing: border-box;
}

.pagebuilder-video-inner {
    display: inline-block;
    box-sizing: border-box;
    width: 100%;
}

.pagebuilder-video-wrapper {
    box-sizing: border-box;
}

.pagebuilder-video-container {
    position: relative;
    box-sizing: border-box;
    border-radius: inherit;
    overflow: hidden;
    aspect-ratio: 16 / 9;
}

/* Fallback for browsers without aspect-ratio: classic padding-top ratio box.
 * Harmless where aspect-ratio is honoured (container has no explicit height). */
.pagebuilder-video-container::before {
    content: '';
    display: block;
    padding-top: 56.25%;
}

.pagebuilder-video-container > iframe,
.pagebuilder-video-container > video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* =========================================================================
 * 14. MAP  (real Google Maps; static placeholder when unavailable)
 * ========================================================================= */

/* PB emits an empty div[data-content-type=map]; reserve height so the live map
 * canvas (or the placeholder notice) has a box to fill. */
[data-content-type='map'] {
    box-sizing: border-box;
    position: relative;
    min-height: var(--dm-content-pb-map-min-height, 300px);
    background-color: var(--dm-content-pb-map-bg, var(--dm-content-surface-alt, transparent));
}

/* Once a real map inits, the hydrator adds .dm-content-pb-map--live; the Google
 * canvas is absolutely positioned children, so guarantee the box has height. */
[data-content-type='map'].dm-content-pb-map--live {
    height: var(--dm-content-pb-map-min-height, 300px);
}

/* Info-window body the hydrator builds (createElement, no innerHTML). Structure
 * only; Google's own bubble supplies the surface. */
.dm-content-pb-map__info {
    box-sizing: border-box;
    max-width: 340px;
}

.dm-content-pb-map__info h3 {
    margin: 0 0 6px 0;
}

.dm-content-pb-map__info p {
    margin: 0 0 4px 0;
}

/* Static placeholder shown when Google Maps is unavailable (no key / load fail). */
.dm-content-pb-map__fallback {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-sizing: border-box;
    position: absolute;
    inset: 0;
    padding: 20px;
    text-align: center;
    border: 1px dashed var(--dm-content-pb-map-border, var(--dm-content-border, currentColor));
    color: var(--dm-content-pb-map-color, var(--dm-content-muted, inherit));
}

.dm-content-pb-map__fallback-link {
    color: var(--dm-content-pb-map-link-color, var(--dm-content-accent));
}

/* =========================================================================
 * 15. VIDEO BACKGROUND  (row inner/main, banner, slide with
 *     data-background-type=video). The hydrator injects a poster layer and a
 *     <video>/<iframe> media layer BEHIND the content (negative z-index).
 * ========================================================================= */

/* The host must clip and position its background layers. The hydrator also sets
 * position:relative inline where a host computes to static. */
[data-background-type='video'] {
    position: relative;
    overflow: hidden;
}

/* Poster layer: baked/first-frame image shown until (or instead of) playback.
 * z-index -3 => under both the video and the overlay, above the host's own bg. */
.dm-content-pb-video-bg__poster {
    position: absolute;
    inset: 0;
    z-index: -3;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    pointer-events: none;
}

/* Media layer (self-hosted <video>): cover the host, sit behind the content. */
.dm-content-pb-video-bg__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: cover;
    z-index: -2;
    pointer-events: none;
}

/* Hosted <iframe> variant: iframes ignore object-fit, so cover via the classic
 * 16:9 viewport-scale trick (works for full-width / full-bleed hero rows). */
.dm-content-pb-video-bg__media--frame {
    inset: auto;
    top: 50%;
    left: 50%;
    width: 100vw;
    height: 56.25vw;      /* 16:9 of the viewport width */
    min-height: 100%;
    min-width: 177.78vh;  /* 16:9 of the viewport height */
    transform: translate(-50%, -50%);
}

/* =========================================================================
 * 16. PARALLAX  (rows/inner with data-enable-parallax; background-position
 *     nudged on scroll by the hydrator, rAF-throttled). cover => no gaps.
 * ========================================================================= */

[data-enable-parallax='1'],
[data-enable-parallax='true'] {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: scroll;
}

/* Class the hydrator adds once it drives the element; hints the compositor. */
.dm-content-pb-parallax {
    will-change: background-position;
}

/* Any residual Luma jarallax markup (removed initializer) must never cover content. */
[data-content-type='row'] > video.fillWidth,
[data-content-type='row'] [id*='jarallax-container'] {
    display: none;
}

/* =========================================================================
 * 17. MOBILE  (max-width: 768px) — stack & responsive image swap
 *     Base file already stacks .pagebuilder-column at this breakpoint.
 * ========================================================================= */

@media (max-width: 768px) {
    /* Newer column-line container wraps its columns. */
    .pagebuilder-column-line {
        flex-wrap: wrap;
    }

    /* Responsive image swap: show the mobile image, hide the desktop one. */
    .pagebuilder-mobile-hidden {
        display: none;
    }

    .pagebuilder-mobile-only {
        display: inline-block;
    }

    /* Collage overlays go full-width on small screens. */
    .pagebuilder-banner-wrapper .pagebuilder-overlay:not(.pagebuilder-poster-overlay),
    .pagebuilder-slide-wrapper .pagebuilder-overlay:not(.pagebuilder-poster-overlay) {
        max-width: none;
    }

    /* Keep the parallax background on scroll attachment on small screens
     * (fixed attachment is janky / unsupported on most mobile browsers). */
    [data-enable-parallax='1'],
    [data-enable-parallax='true'] {
        background-attachment: scroll !important;
    }
}