/* Editor-specific styles for hero-tango block */

:root {
    --image-overlap: min(300px, 25vw);
}

/* Block wrapper */
.wp-block-frames-hero-tango {
    padding: 0;
}

/* Hero section base styles */
.wp-block-frames-hero-tango .hero-tango {
    display: flex;
    flex-direction: column;
    row-gap: var(--container-gap);
    padding: var(--space-l);
    padding-bottom: 0;
    background-color: var(--bg-light);
}

/* Color Scheme Styles for Editor */
.wp-block-frames-hero-tango .hero-tango.color-scheme-action {
    background-color: var(--action-ultra-light);
}

.wp-block-frames-hero-tango .hero-tango.color-scheme-primary {
    background-color: var(--primary-ultra-light);
}

.wp-block-frames-hero-tango .hero-tango.color-scheme-accent {
    background-color: var(--accent-ultra-light);
}

.wp-block-frames-hero-tango .hero-tango.color-scheme-secondary {
    background-color: var(--secondary-ultra-light);
}

.wp-block-frames-hero-tango .hero-tango.color-scheme-neutral {
    background-color: var(--neutral-ultra-light);
}

/* Round Background for Editor */
.wp-block-frames-hero-tango .hero-tango.has-round-background {
    border-radius: var(--radius);
}

/* Content layout */
.wp-block-frames-hero-tango .fr-intro-echo {
    display: grid;
    grid-template-columns: var(--grid-2-1);
    grid-template-rows: var(--grid-1);
    grid-gap: var(--grid-gap);
    align-items: center;
}

.wp-block-frames-hero-tango .fr-intro-echo__heading-wrapper {
    display: flex;
    flex-direction: column;
    row-gap: calc(var(--content-gap) / 2);
}

.wp-block-frames-hero-tango .fr-intro-echo__lede-wrapper {
    display: flex;
    flex-direction: column;
    row-gap: var(--content-gap);
}

/* Accent heading */
.wp-block-frames-hero-tango .fr-accent-heading {
    margin-bottom: 0;
    font-size: var(--text-s);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: .095em;
    text-transform: uppercase;
    order: -1;
}

/* Main heading */
.wp-block-frames-hero-tango .fr-intro-echo__heading {
    text-wrap: balance;
    margin: 0;
}

/* Image group */
.wp-block-frames-hero-tango .hero-tango__image-group {
    display: grid;
    position: relative;
    z-index: 1;
    grid-template-columns: var(--grid-2);
    grid-template-rows: var(--grid-1);
    grid-gap: var(--grid-gap);
    margin-bottom: calc(var(--image-overlap) * -1);
    --image-1-object-position: 50% 50%;
    --image-2-object-position: 90% 50%;
    --image-offset: var(--space-xxl);
}

.wp-block-frames-hero-tango .hero-tango__image-group > *:first-child {
    z-index: 1;
    margin-block-start: var(--image-offset);
}

.wp-block-frames-hero-tango .hero-tango__image {
    aspect-ratio: 3/3.5;
    border-radius: var(--radius);
    object-fit: cover;
    width: 100%;
    height: 100%;
}

/* Box shadow for images */
.wp-block-frames-hero-tango .hero-tango__image.has-box-shadow {
    box-shadow: var(--box-shadow-l);
}

/* CTA Button */
.wp-block-frames-hero-tango .hero-tango__cta {
    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;
    background-color: var(--primary);
}

.wp-block-frames-hero-tango .hero-tango__cta:hover {
    transform: translateY(-2px);
    background-color: var(--primary-hover);
}

.wp-block-frames-hero-tango .hero-tango__cta.rounded-buttons {
    border-radius: var(--radius-circle);
}

/* CTA colors for different color schemes */
.wp-block-frames-hero-tango .hero-tango.color-scheme-action .hero-tango__cta {
    background-color: var(--action);
}

.wp-block-frames-hero-tango .hero-tango.color-scheme-action .hero-tango__cta:hover {
    background-color: var(--action-hover);
}

.wp-block-frames-hero-tango .hero-tango.color-scheme-primary .hero-tango__cta {
    background-color: var(--primary);
}

.wp-block-frames-hero-tango .hero-tango.color-scheme-primary .hero-tango__cta:hover {
    background-color: var(--primary-hover);
}

.wp-block-frames-hero-tango .hero-tango.color-scheme-accent .hero-tango__cta {
    background-color: var(--accent);
}

.wp-block-frames-hero-tango .hero-tango.color-scheme-accent .hero-tango__cta:hover {
    background-color: var(--accent-hover);
}

.wp-block-frames-hero-tango .hero-tango.color-scheme-secondary .hero-tango__cta {
    background-color: var(--secondary);
}

.wp-block-frames-hero-tango .hero-tango.color-scheme-secondary .hero-tango__cta:hover {
    background-color: var(--secondary-hover);
}

.wp-block-frames-hero-tango .hero-tango.color-scheme-neutral .hero-tango__cta {
    background-color: var(--neutral-dark);
}

.wp-block-frames-hero-tango .hero-tango.color-scheme-neutral .hero-tango__cta:hover {
    background-color: var(--neutral-medium);
}

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

/* Figure reset */
.wp-block-frames-hero-tango figure {
    margin: 0;
}

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

@media (max-width: 767px) {
    .wp-block-frames-hero-tango .hero-tango__image-group {
        grid-template-columns: var(--grid-1);
    }
}