/* Media + Verhaal: scoped layout for both Gutenberg and frontend.
 * Typography, surfaces, buttons and section spacing stay in the shared
 * LuxaLife design system; this stylesheet owns only story-specific geometry.
 */
.luxa-block-media-story .luxa-block-media-story__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, var(--luxa-story-share, 50%));
    align-items: center;
    gap: var(--luxa-story-gap, 72px);
}
.luxa-block-media-story--align-start .luxa-block-media-story__grid {
    align-items: start;
}
.luxa-block-media-story--image-left .luxa-block-media-story__grid {
    grid-template-columns: minmax(0, var(--luxa-story-share, 50%)) minmax(0, 1fr);
}
.luxa-block-media-story__copy,
.luxa-block-media-story__media {
    min-width: 0;
}
.luxa-block-media-story__copy {
    order: 1;
}
.luxa-block-media-story__media {
    order: 2;
    width: 100%;
    margin: 0;
}
.luxa-block-media-story--image-left .luxa-block-media-story__media {
    order: 1;
}
.luxa-block-media-story--image-left .luxa-block-media-story__copy {
    order: 2;
}
.luxa-block-media-story__picture,
.luxa-block-media-story__placeholder {
    display: block;
    width: 100%;
    height: var(--luxa-story-height, 480px);
    overflow: hidden;
    border-radius: var(--luxa-story-radius, 18px);
    background: #ebe5db;
}
.luxa-block-media-story__picture img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--luxa-story-image-x, 50%) var(--luxa-story-image-y, 50%);
}
.luxa-block-media-story--fit-contain .luxa-block-media-story__picture img {
    object-fit: contain;
}
.luxa-block-media-story.luxa-block--dark .luxa-block-media-story__picture,
.luxa-block-media-story.luxa-block--dark .luxa-block-media-story__placeholder {
    background: #352d27;
}
.luxa-block-media-story__caption {
    margin: 11px 2px 0;
    color: var(--luxa-block-muted, #6a6157);
    font: 400 .83rem/1.55 var(--luxa-font-body, system-ui, sans-serif);
}
.luxa-block-media-story__usps {
    display: grid;
    gap: 13px;
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
}
.luxa-block-media-story__usp {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
    color: var(--luxa-type-override-body-color, var(--luxa-type-body-color, var(--luxa-block-ink)));
    font-family: var(--luxa-type-override-body-font, var(--luxa-type-body-font, var(--luxa-font-body, system-ui, sans-serif)));
    font-size: var(--luxa-type-override-body-size-desktop, var(--luxa-type-body-size-desktop, 17px));
    font-weight: var(--luxa-type-override-body-weight, var(--luxa-type-body-weight, 400));
    line-height: var(--luxa-type-override-body-line-height, var(--luxa-type-body-line-height, 1.65));
    letter-spacing: var(--luxa-type-override-body-tracking, var(--luxa-type-body-tracking, normal));
}
.luxa-block-media-story__usp > span:last-child {
    min-width: 0;
    overflow-wrap: anywhere;
}
.luxa-block-media-story__check {
    display: inline-grid;
    flex: 0 0 21px;
    place-items: center;
    width: 21px;
    height: 21px;
    margin-top: .15em;
    border: 1px solid #c3a05c;
    border-radius: 50%;
    color: #80602c;
    font: 700 12px/1 system-ui, sans-serif;
}
.luxa-block-media-story__check::before {
    content: "✓";
}
.luxa-block-media-story.luxa-block--dark .luxa-block-media-story__check {
    border-color: #d6b66f;
    color: #e2c27d;
}
.luxa-block-media-story--no-image .luxa-block-media-story__grid,
.luxa-block-media-story--no-copy .luxa-block-media-story__grid {
    grid-template-columns: minmax(0, 1fr);
}
.luxa-block-media-story__placeholder {
    display: grid;
    place-items: center;
    padding: 24px;
    border: 1px dashed #bfae92;
    color: var(--luxa-block-muted, #6a6157);
    font: 500 .88rem/1.5 system-ui, sans-serif;
    text-align: center;
}
/* Editor image placeholder is an editing aid, not a frontend media request. */
.luxa-block-editor.luxa-block-media-story .luxa-block-media-story__placeholder {
    cursor: default;
}
@media (max-width: 780px) {
    .luxa-block-media-story .luxa-block-media-story__grid,
    .luxa-block-media-story--image-left .luxa-block-media-story__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: clamp(24px, 6vw, 40px);
    }
    .luxa-block-media-story .luxa-block-media-story__picture,
    .luxa-block-media-story .luxa-block-media-story__placeholder {
        height: var(--luxa-story-mobile-height, 280px);
    }
    .luxa-block-media-story--mobile-image-first .luxa-block-media-story__media {
        order: 1;
    }
    .luxa-block-media-story--mobile-image-first .luxa-block-media-story__copy {
        order: 2;
    }
    .luxa-block-media-story--mobile-copy-first .luxa-block-media-story__copy {
        order: 1;
    }
    .luxa-block-media-story--mobile-copy-first .luxa-block-media-story__media {
        order: 2;
    }
    .luxa-block-media-story__usps {
        gap: 11px;
        margin-top: 20px;
    }
    .luxa-block-media-story__usp {
        font-size: var(--luxa-type-override-body-size-mobile, var(--luxa-type-body-size-mobile, var(--luxa-type-override-body-size-desktop, var(--luxa-type-body-size-desktop, 16px))));
    }
}