/**
 * Element: Text & Cut Out Image
 */

/* 1. Wrapper Styles */
.text-cut-out-wrapper {
    width: 100%;
    padding-top: 50px;
    padding-bottom: 0; /* Padding bottom handled by image/content spacing */
    background-color: var(--color-quaternary, #f4f1ea); /* Fallback color included */
    position: relative;
    overflow-x: hidden; /* Prevents scrollbar from breakout elements */
}

/* 2. Container (1440px) */
.text-cut-out-container {
    max-width: 1440px;
    margin: 0 auto;
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
}

/* 3. Text Content Styles */
.text-cut-out-content {
    text-align: center;
    margin-bottom: 3.125em; /* approx 50px */
    max-width: 1200px; /* Optional: keeps text readable width */
    margin-left: auto;
    margin-right: auto;
}

/* Typography conversions (px to em based on 16px root) */
.text-cut-out-content h1,
.text-cut-out-content h2,
.text-cut-out-content h3 {
    margin-bottom: 0.8em;
    line-height: 1.2;
}

.text-cut-out-content p {
    line-height: 1.6;
    margin-bottom: 1.5em;
    color: var(--color-text, #333);
}

.text-cut-out-content a {
    color: inherit;
    text-decoration: underline;
}

/* Script font specific styling (mimicking "Keep scrolling..." from reference) */
.text-cut-out-content em,
.text-cut-out-content i,
.text-cut-out-content .script-font {
    font-family: var(--font-script, serif);
    font-size: 2em; /* 32px */
    display: block;
    margin-top: 1em;
}

/* 4. Full Width Image Breakout Logic */
.text-cut-out-image-wrap {
    position: relative;
    width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    /* margin-bottom: -10px;  Removed negative margin as pre-cut image should handle bottom edge cleanly */
    line-height: 0; /* Removes potential tiny gap below inline images */
}

.text-cut-out-image-wrap img {
    width: 100%;
    height: auto;
    display: block;
    /* Removed clip-path and min-height. 
       The image will now naturally fill the width and scale its height based on the uploaded file's aspect ratio.
    */
    transition: opacity 0.3s ease;
}

/* 5. Responsive Adjustments */
@media (max-width: 768px) {
    .text-cut-out-wrapper {
        padding-top: 30px;
    }
    
    .text-cut-out-content p {
        font-size: 1em;
    }
    /* Media query for image clip-path removal is no longer needed */

    .text-cut-out-content{
        margin-bottom:0px;
    }
}