/* =================================================================
   TEXT & IMAGE SECTION BLOCK - Pixel-perfect implementation
   Based on Kredlo design measurements
   ================================================================= */

.text-image-section {
    position: relative;
    width: 100%;
    background-color: #ffffff;
    padding: 60px 0; /* Restored to original better spacing */
}

.text-image-section.decor-top .text-image-section__image-wrapper .text-image-section__image::before,
.text-image-section.decor-bottom .text-image-section__image-wrapper .text-image-section__image::before{

    content: '';
    background-image: url('data:image/svg+xml,<svg id="Lager_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 500 500"><!-- Generator: Adobe Illustrator 29.8.1, SVG Export Plug-In . SVG Version: 2.1.1 Build 2) --><circle class="st1" fill="%23f9f2f9" cx="250" cy="250" r="219.49"/><g><rect class="st0" fill="%23863c8f" x="323.88" y="123.82" width="7.9" height="252.48" rx=".32" ry=".32"/><rect class="st0" fill="%23863c8f" x="347.05" y="123.72" width="7.9" height="252.48" rx=".32" ry=".32"/><path class="st0" fill="%23863c8f" d="M305.93,251.4c.1-.24.2-.48.25-.73.06-.28.05-.55.05-.84,0-.2,0-.4-.03-.6-.06-.32-.18-.62-.32-.93-.07-.15-.13-.31-.22-.45-.07-.11-.08-.23-.16-.34l-92.37-122.12c-.16-.21-.37-.33-.56-.49-.04-.04-.08-.07-.12-.11-.26-.21-.51-.41-.81-.54-.57-.32-1.19-.55-1.89-.55h-24.94c-.44,0-.84.12-1.24.25,0,0,0,0,0,0-.26.09-.52.15-.75.29-.23.11-.44.23-.66.39-1.74,1.31-2.08,3.79-.77,5.53l90.58,119.75-89.15,117.61c-.26.34-.67.55-1.1.55h-12.71c-.58,0-.92-.67-.56-1.13l86.85-114.58c.04-.06.05-.13.09-.19.25-.35.42-.73.55-1.13.01-.05.04-.09.05-.14.3-1.13.15-2.37-.61-3.38l-92.37-122.12c-.11-.15-.28-.23-.4-.36-.14-.16-.31-.29-.48-.42-.16-.11-.3-.23-.48-.32-.59-.34-1.23-.6-1.96-.6h-25.18c-.93,0-1.76.37-2.43.91-.01,0-.02,0-.03.02,0,0,0,.01-.01.01-.28.23-.51.51-.71.81-.14.19-.28.37-.39.57-.04.09-.06.19-.1.28-.51,1.25-.43,2.7.44,3.85l90.56,119.73-90.76,119.73c-1.32,1.74-.98,4.21.76,5.53,1.74,1.32,4.21.98,5.53-.76l92.5-122.02c.05-.07.06-.15.11-.22.23-.33.38-.67.5-1.04.02-.08.06-.15.08-.22.29-1.13.15-2.36-.61-3.36l-86.87-114.85c-.34-.44-.02-1.08.54-1.08h13.51c.43,0,.83.2,1.09.54l89.06,117.74-90.76,119.72c-.2.26-.29.57-.42.86,0,0,0,0,0,0-.6,1.42-.33,3.01.73,4.15.07.08.13.16.2.23.09.09.14.2.25.28.18.14.39.18.59.28.18.1.36.2.56.27.25.08.5.12.76.15.19.03.35.11.55.11h24.54c.18,0,.34-.08.52-.1.16-.02.31-.06.47-.1.27-.07.53-.14.78-.26.34-.15.62-.37.91-.62.05-.05.11-.09.15-.14.15-.14.33-.24.46-.41l92.5-122.02c.06-.08.07-.18.13-.26.14-.21.23-.44.32-.67.1-.24.2-.47.24-.71.05-.27.05-.53.04-.81,0-.22,0-.43-.04-.65-.05-.29-.17-.57-.29-.85-.08-.19-.15-.37-.26-.55-.06-.1-.07-.21-.14-.3l-86.83-114.8c-.35-.46-.02-1.12.56-1.12h13.46c.43,0,.83.2,1.09.54l89.08,117.78-90.72,119.67c-1.32,1.74-.98,4.21.76,5.53h0c1.74,1.32,4.21.98,5.53-.76l92.5-122.02c.07-.09.08-.2.14-.29.13-.2.21-.41.31-.63Z"/></g></svg>');
    position: absolute;
    width: 100px;
    height: 100px;
    background-position: center;
    z-index: 9;
    background-repeat: no-repeat;
    top: 30px;
    left: -48px;
    box-shadow: 7px 7px 25px #00000050;
    border-radius: 50%;
    background-size: calc(100% + 13px);

}
.text-image-section.decor-bottom .text-image-section__image-wrapper .text-image-section__image::before{
    top: auto;
    bottom: 30px;
}
@media( max-width: 768px ){
    .text-image-section.decor-top .text-image-section__image-wrapper .text-image-section__image::before,
    .text-image-section.decor-bottom .text-image-section__image-wrapper .text-image-section__image::before{
        width: 80px;
        height: 80px;
    }
}

@media(max-width: 550px){
    .text-image-section.decor-top .text-image-section__image-wrapper .text-image-section__image::before,
    .text-image-section.decor-bottom .text-image-section__image-wrapper .text-image-section__image::before{
        display: none;
    }
}

/* Full width alignment support */
.text-image-section.alignfull {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(-50vw + 50%);
    padding-left: 0;
    padding-right: 0;
}

/* Container for content positioning */
.text-image-section__container {
    display: grid;
    grid-template-columns: 5fr 4fr;
    gap: 80px;
    align-items: center;
}

.text-image-section__container.text-right {
    grid-template-columns: 4fr 5fr;
}


@media (max-width: 768px) {
    .text-image-section__container.section__container.text-right{
        display: flex;
        flex-direction: column-reverse;
    }
}

/* =================================================================
   TEXT CONTENT (Left Side)
   ================================================================= */
.text-image-section__content {
    position: relative;
    z-index: 2;
}

.text-image-section__headline {
    font-size: 36px; /* Restored original size */
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 24px 0; /* Restored original spacing */
    letter-spacing: -0.01em;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}

.text-image-section__text {
    font-size: 16px;
    line-height: 1.6; /* Measured line-height from design */
    margin: 0 0 40px 0; /* Added bottom margin for CTA spacing */
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}

.text-image-section__text p {
    margin: 0 0 16px 0;
    font-size: var(--font-size-18);
    line-height: 23px !important;
}

.text-image-section__text p:last-child {
    margin-bottom: 0;
}

/* =================================================================
   CTA BUTTON
   ================================================================= */
.text-image-section__cta {
    margin-top: 40px; /* Spacing from text to CTA button */
}

/* Button appearance handled by global design system */

/* =================================================================
   IMAGE CONTENT (Right Side)
   ================================================================= */
.text-image-section__image-wrapper {
    position: relative;
    z-index: 1;
}

.text-image-section__image {
    position: relative;
    border-radius: 8px; /* Subtle rounding from design */
    overflow: visible;
    box-shadow: 7px 7px 25px #00000050 !important;


}

.text-image-section__image img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    transition: transform 0.3s ease;
    border-radius: 11px;
}

.text-image-section__image:hover img {
    transform: scale(1.02); /* Subtle zoom on hover */
}

/* Expand Icon */
.text-image-section__expand-icon {
    position: absolute;
    bottom: 16px; /* Positioned from design */
    right: 16px;
    z-index: 3;
    opacity: 0.9;
    transition: all 0.3s ease;
    cursor: pointer;
}

.text-image-section__expand-icon:hover {
    opacity: 1;
    transform: scale(1.1);
}

.expand-icon {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

/* Image Placeholder */
.text-image-section__image-placeholder {
    aspect-ratio: 4/3;
    background: #F3F4F6;
    border: 2px dashed #D1D5DB;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9CA3AF;
    font-size: 14px;
}

/* =================================================================
   RESPONSIVE DESIGN
   ================================================================= */

/* Large desktop - increase spacing */
@media (min-width: 1400px) {
    .text-image-section__headline {
        font-size: 40px;
    }
}

/* Desktop adjustments */
@media (max-width: 1200px) {
    .text-image-section__headline {
        font-size: 32px;
    }
}

/* Tablet - stack vertically */
@media (max-width: 768px) {
    .text-image-section {
        padding: 40px 0;
    }

    .text-image-section__container {
        grid-template-columns: 1fr; /* Stack vertically */
        gap: 40px;
    }

    .text-image-section__headline {
        font-size: 28px;
        margin-bottom: 20px;
    }

    .text-image-section__text {
        font-size: 15px;
        line-height: 1.5;
    }

    /* Adjust image on mobile */
    .text-image-section__image {
        max-width: 400px;
        margin: 0 auto;
    }

    /* CTA button adjustments */
    .text-image-section__cta {
        margin-top: 32px;
    }

    /* Tablet button styling handled by global design system */
}

/* Mobile small */
@media (max-width: 480px) {
    .text-image-section {
        padding: 30px 0;
    }

    .text-image-section__container {
        gap: 32px;
    }

    .text-image-section__headline {
        font-size: 24px;
        line-height: 1.4;
    }

    .text-image-section__text {
        font-size: 14px;
    }

    .text-image-section__expand-icon {
        bottom: 12px;
        right: 12px;
    }

    .expand-icon {
        width: 20px;
        height: 20px;
    }

    /* CTA button mobile adjustments */
    .text-image-section__cta {
        margin-top: 24px;
    }

    /* Mobile button styling handled by global design system */
}

/* =================================================================
   ACCESSIBILITY ENHANCEMENTS
   ================================================================= */

/* Focus states for interactive elements */
.text-image-section__expand-icon:focus {
    outline: 2px solid #8B5CF6;
    outline-offset: 2px;
    border-radius: 4px;
}

/* Button focus styling handled by global design system */

/* High contrast mode support */
@media (prefers-contrast: high) {
    .text-image-section__headline {
        color: #000000;
    }

    .text-image-section__text {
        color: #333333;
    }

    .text-image-section__image {
        border: 1px solid #000000;
    }

    /* High contrast button styling handled by global design system */
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    .text-image-section__image img {
        transition: none;
    }

    .text-image-section__expand-icon {
        transition: none;
    }

    .text-image-section__image:hover img {
        transform: none;
    }

    .text-image-section__expand-icon:hover {
        transform: none;
    }

    /* Reduced motion button styling handled by global design system */
}

/* =================================================================
   GUTENBERG EDITOR STYLES
   ================================================================= */

/* Editor-specific styles for better preview */
.block-editor-block-list__layout .text-image-section {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 1px solid #e0e0e0;
}

.block-editor-block-list__layout .text-image-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, #8B5CF6, #6B7280);
    z-index: 10;
}

/* =================================================================
   DECORATION STYLES
   ================================================================= */

/* Decoration pattern base styles */
.text-image-section.decoration-top::before,
.text-image-section.decoration-bottom::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 60px;
    background-image: url('../../assets/kredlo-arrow-header.svg');
    background-repeat: no-repeat;
    background-size: 400px auto;
    background-position: center;
    opacity: 0.1;
    z-index: 0;
    pointer-events: none;
}

/* Top decoration */
.text-image-section.decoration-top::before {
    top: 0;
    transform: rotate(0deg);
}

/* Bottom decoration */
.text-image-section.decoration-bottom::after {
    bottom: 0;
    transform: rotate(180deg);
}

/* Responsive decoration adjustments */
@media (max-width: 768px) {
    .text-image-section.decoration-top::before,
    .text-image-section.decoration-bottom::after {
        height: 40px;
        background-size: 250px auto;
        opacity: 0.08;
    }
}

@media (max-width: 480px) {
    .text-image-section.decoration-top::before,
    .text-image-section.decoration-bottom::after {
        height: 30px;
        background-size: 200px auto;
        opacity: 0.06;
    }
}

/* =================================================================
   PRINT STYLES
   ================================================================= */

@media print {
    .text-image-section {
        background: white !important;
        box-shadow: none !important;
        page-break-inside: avoid;
        padding: 40px 0;
    }

    .text-image-section__expand-icon {
        display: none;
    }

    .text-image-section__container {
        gap: 40px;
    }

    .text-image-section__headline {
        color: black !important;
    }

    .text-image-section__text {
        color: black !important;
    }
}