/*
 * Block Style: CTA Overlap
 * 
 * Professional UX implementation:
 * Uses fluid typography and layout scaling (`clamp`) to dynamically 
 * scale the overlap between tablet and desktop. This prevents the box 
 * from hiding key visual elements (like faces) on medium screens where 
 * fixed `rem` values would be too aggressive.
 */
.wp-block-group.is-style-cta-overlap {
    position: relative;
    z-index: 10;
    background-color: var(--wp--preset--color--light, #ffffff);

    /* Interior styling */
    padding: clamp(1.5rem, 3vw, 2rem);
    border-radius: 2rem;
    border: 1px solid rgba(168, 159, 145, 0.15);

    /* Premium layered shadow for a highly realistic, diffused depth effect */
    box-shadow:
        0 4px 6px -1px rgba(0, 0, 0, 0.03),
        0 12px 30px -4px rgba(0, 0, 0, 0.08),
        0 30px 60px -10px rgba(0, 0, 0, 0.12);

    /* Sizing constraints */
    width: calc(100% - 2.5rem);
    max-width: 500px;

    /* Mobile Offset: Using margin to pull up over the previous element smoothly */
    margin: -3rem auto 2rem auto;

    /* Reset legacy absolute/relative offsets to prevent weird layout shifts */
    bottom: auto;
    left: auto;
}

@media (min-width: 768px) {
    .wp-block-group.is-style-cta-overlap {
        /* Fluid width: smaller max-width on tablets so it doesn't take up 50% of the screen, caps at 380px on desktop */
        max-width: clamp(280px, 30vw, 380px);

        /* 
         * 🚀 The Fluid Overlap Solution:
         * We use clamp() to dynamically scale the negative margin based on the viewport width.
         * On Tablet (~768px): The overlap is small (min 8rem), respecting the smaller portrait image height.
         * On Desktop (1400px+): The overlap smoothly reaches the classic deep overlap (max 21rem).
         */
        margin-top: calc(-1 * clamp(8rem, 24vw, 21rem));

        /* Fine-scaled lateral pull to slightly overlap outside the column */
        margin-left: calc(-1 * clamp(2rem, 6vw, 5rem));

        /* Ensure normal flow underneath */
        margin-bottom: 0;
    }
}