/* Editor-specific styles for content-section-oscar block */

/* Block wrapper */
.wp-block-frames-content-section-oscar {
    padding: 0;
}

/* Main section styles */
.wp-block-frames-content-section-oscar.brxe-section.fr-content-section-oscar {
    display: flex;
    flex-direction: column;
    row-gap: calc(var(--container-gap) * 1.25);
    padding-top: var(--section-space-l);
    padding-bottom: var(--section-space-l);
}

/* Intro section */
.wp-block-frames-content-section-oscar .fr-intro.fr-intro-alpha {
    display: flex;
    flex-direction: column;
    row-gap: var(--content-gap);
    align-items: center;
    text-align: center;
}

/* Main heading */
.wp-block-frames-content-section-oscar .fr-content-section-oscar__heading {
    font-size: calc(var(--h1) * 2);
    margin: 0;
}

/* Inner content grid */
.wp-block-frames-content-section-oscar .fr-content-section-oscar__inner {
    display: grid;
    grid-template-columns: var(--grid-2);
    gap: var(--grid-gap);
    width: 75ch;
    max-width: 100%;
    margin: 0 auto;
}

/* Left column */
.wp-block-frames-content-section-oscar .fr-content-section-oscar__inner-left {
    display: flex;
    flex-direction: column;
    row-gap: var(--content-gap);
}

/* Marketing headline */
.wp-block-frames-content-section-oscar .fr-content-section-oscar__marketing-headline {
    font-size: calc(var(--h2) / 1.1);
    margin: 0;
}

/* Link wrapper */
.wp-block-frames-content-section-oscar .fr-icon-link-alpha-wrapper {
    display: flex;
}

/* Link styling */
.wp-block-frames-content-section-oscar .fr-icon-link-alpha {
    color: var(--black);
    text-decoration: underline;
    text-underline-offset: 0.25em;
    white-space: nowrap;
}

.wp-block-frames-content-section-oscar .fr-icon-link-alpha:hover {
    color: var(--primary);
}

/* Main content area */
.wp-block-frames-content-section-oscar .fr-content-section-oscar__main-content {
    margin: 0;
}

/* Image group */
.wp-block-frames-content-section-oscar .fr-image-group-kilo {
    display: grid;
    grid-template-columns: var(--grid-3);
    grid-template-rows: var(--grid-1);
    gap: var(--grid-gap);
    padding: 0 var(--space-m);
}

/* Image media wrappers */
.wp-block-frames-content-section-oscar .fr-image-group-kilo__media-wrapper {
    display: flex;
    flex-direction: column;
    row-gap: var(--space-xs);
}

/* Individual images */
.wp-block-frames-content-section-oscar .fr-image-group-kilo__media {
    aspect-ratio: 3/4;
    object-fit: cover;
}

.wp-block-frames-content-section-oscar .fr-image-group-kilo__media img {
    border-radius: var(--radius);
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Middle image offset - only on larger screens */
@media (min-width: 767px) {
    .wp-block-frames-content-section-oscar .fr-image-group-kilo__media-wrapper:nth-child(2) {
        transform: translateY(var(--space-l));
    }
}

/* Responsive adjustments */
@media (max-width: 991px) {
    .wp-block-frames-content-section-oscar .fr-content-section-oscar__inner {
        grid-template-columns: var(--grid-1);
        gap: var(--content-gap);
    }
}

@media (max-width: 767px) {
    .wp-block-frames-content-section-oscar .fr-intro.fr-intro-alpha {
        align-items: flex-start;
    }

    .wp-block-frames-content-section-oscar.brxe-section.fr-content-section-oscar {
        row-gap: var(--content-gap);
    }

    .wp-block-frames-content-section-oscar .fr-image-group-kilo {
        grid-template-columns: var(--grid-1);
    }
}

/* Remove margins from text elements */
.wp-block-frames-content-section-oscar .brxe-heading,
.wp-block-frames-content-section-oscar .brxe-text-basic,
.wp-block-frames-content-section-oscar .brxe-text {
    margin: 0;
}

/* Figure reset */
.wp-block-frames-content-section-oscar figure {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

/* All color scheme backgrounds now handled by background div only */

/* Background div styling for editor */
.wp-block-frames-content-section-oscar .fr-content-section-oscar__bg {
    z-index: 0;
    position: absolute;
    height: 85%;
    width: 100%;
    top: 0;
    left: 0;
}

/* Content containers need relative positioning and higher z-index for editor */
.wp-block-frames-content-section-oscar .brxe-container {
    position: relative;
    z-index: 1;
}

/* Color scheme backgrounds applied to background div - editor specific */
.wp-block-frames-content-section-oscar:not(.color-scheme-none) {
    position: relative;
}

/* Individual color scheme backgrounds for editor (since dynamic CSS variables don't work in editor) */
.wp-block-frames-content-section-oscar.color-scheme-neutral .fr-content-section-oscar__bg {
    background-color: var(--neutral-ultra-light);
}

.wp-block-frames-content-section-oscar.color-scheme-primary .fr-content-section-oscar__bg {
    background-color: var(--primary-ultra-light);
}

.wp-block-frames-content-section-oscar.color-scheme-action .fr-content-section-oscar__bg {
    background-color: var(--action-ultra-light);
}

.wp-block-frames-content-section-oscar.color-scheme-secondary .fr-content-section-oscar__bg {
    background-color: var(--secondary-ultra-light);
}

.wp-block-frames-content-section-oscar.color-scheme-accent .fr-content-section-oscar__bg {
    background-color: var(--accent-ultra-light);
}

/* Round background when enabled */
.wp-block-frames-content-section-oscar.has-round-background .fr-content-section-oscar__bg {
    border-radius: var(--radius);
}

/* 'none' color scheme handled by not showing background div */

/* Button Styles for Editor */
.wp-block-frames-content-section-oscar .fr-content-section-oscar__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-s) var(--space-m);
    font-weight: 500;
    text-decoration: none;
    border-radius: 0;
    border: 0;
    transition: background-color 0.3s ease, transform 0.2s ease;
    cursor: pointer;
    color: white;
}

.wp-block-frames-content-section-oscar .fr-content-section-oscar__button:hover {
    transform: translateY(-2px);
}

/* Rounded button style for editor */
.wp-block-frames-content-section-oscar .fr-content-section-oscar__button.rounded-buttons {
    border-radius: var(--radius-circle);
}

/* Button Color Schemes for Editor - dark variants */
.wp-block-frames-content-section-oscar.color-scheme-neutral .fr-content-section-oscar__button {
    background-color: var(--neutral-dark);
}

.wp-block-frames-content-section-oscar.color-scheme-neutral .fr-content-section-oscar__button:hover {
    background-color: var(--neutral-medium);
}

.wp-block-frames-content-section-oscar.color-scheme-action .fr-content-section-oscar__button {
    background-color: var(--action-dark);
}

.wp-block-frames-content-section-oscar.color-scheme-action .fr-content-section-oscar__button:hover {
    background-color: var(--action-hover);
}

.wp-block-frames-content-section-oscar.color-scheme-primary .fr-content-section-oscar__button {
    background-color: var(--primary-dark);
}

.wp-block-frames-content-section-oscar.color-scheme-primary .fr-content-section-oscar__button:hover {
    background-color: var(--primary-hover);
}

.wp-block-frames-content-section-oscar.color-scheme-accent .fr-content-section-oscar__button {
    background-color: var(--accent-dark);
}

.wp-block-frames-content-section-oscar.color-scheme-accent .fr-content-section-oscar__button:hover {
    background-color: var(--accent-hover);
}

.wp-block-frames-content-section-oscar.color-scheme-secondary .fr-content-section-oscar__button {
    background-color: var(--secondary-dark);
}

.wp-block-frames-content-section-oscar.color-scheme-secondary .fr-content-section-oscar__button:hover {
    background-color: var(--secondary-hover);
}

/* Button for 'none' color scheme in editor */
.wp-block-frames-content-section-oscar.color-scheme-none .fr-content-section-oscar__button {
    background-color: var(--bg-dark);
}

.wp-block-frames-content-section-oscar.color-scheme-none .fr-content-section-oscar__button:hover {
    background-color: var(--neutral-medium);
}

/* Image Box Shadow for Editor */
.wp-block-frames-content-section-oscar.has-image-box-shadow .fr-image-group-kilo__media img {
    box-shadow: var(--box-shadow-l);
}

/* Heading Text Size Options for Editor */
.wp-block-frames-content-section-oscar.heading-size-small .fr-content-section-oscar__heading {
    font-size: var(--h3);
}

.wp-block-frames-content-section-oscar.heading-size-medium .fr-content-section-oscar__heading {
    font-size: var(--h2);
}

.wp-block-frames-content-section-oscar.heading-size-large .fr-content-section-oscar__heading {
    font-size: var(--h1);
}

/* Extra Large is the default - keeps the existing calc(var(--h1) * 2) size */
.wp-block-frames-content-section-oscar.heading-size-extra-large .fr-content-section-oscar__heading {
    font-size: calc(var(--h1) * 2);
}