/* ===================================
   HOME COMMUNITY BLOCK STYLES
   =================================== */

/* Main block container - ISOLATED to prevent conflicts */
.wp-block-acf-atax-about-story .about-story-section {
    width: 100%;
    max-width: 100vw;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 54px; /* Vertical spacing between sections */
    box-sizing: border-box;
    position: relative;
    color: var(--primary-color, #354477); /* Dark blue text on light background */
    margin-top: 80px;
}

/* Separate background class to ensure it applies (WordPress specificity fix) */
.about-story-section {
    background: var(--blueish-bg-gray, #EDEFF4);
    padding: 80px 20px 200px; /* Main container controls all side spacing */
    overflow: hidden;
    position: relative; /* Create positioning context for background logo */
}

/* Main container - 1280px max-width as per design */
.about-story-container {
    max-width: 1280px; /* Wide container as specified */
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 54px; /* Inherits spacing from parent */
    position: relative;
    z-index: 2; /* Above background logo */
    overflow: hidden; /* Prevent any content overflow */
    padding: 0; /* No side padding - main container controls it */
}

/* Two-column layout with 83px gap - image on left, content on right */
.about-story-content {
    display: flex;
    gap: 83px; /* 83px gap between columns as specified */
    align-items: stretch; /* CRITICAL: Ensures both columns have equal height */
    padding: 0; /* No side padding - main container controls it */
}

/* Left column: Image - MUST MATCH CONTENT COLUMN HEIGHT */
.about-story-image-left {
    flex: 1; /* Take up available space */
    display: flex;
    align-items: stretch; /* CRITICAL: Stretches image to fill container height */
    min-height: 0; /* CRITICAL: Allows proper flex shrinking */
    position: relative; /* For absolute positioned image */
    overflow: hidden; /* Hide overflow to maintain column height */
}

/* Community image */
.about-story-image {
    width: 100%;
    height: 100%; /* Full height of parent */
    position: relative; /* Container for absolute positioned image */
    min-height: 100%; /* Ensure wrapper takes full height */
}

.about-story-image img {
    width: 100%;
    height: 100%; /* Full height of wrapper */
    position: absolute; /* Absolute positioned to fill entire column */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    object-fit: cover;
    border-radius: 160px 0 160px 0; /* Top left and bottom left rounded - same as service-intro-one */
}

/* Right column: Content - DETERMINES THE HEIGHT */
.about-story-content-right {
    flex: 1; /* Take up available space */
    display: flex;
    flex-direction: column;
    gap: 32px; /* Controls spacing between title, description, and CTA */
    padding: 64px 0px; /* No side padding - main container controls it */
    min-height: 0; /* CRITICAL: Allows proper flex shrinking */
}

/* Main title */
.about-story-title {
    font-size: 48px; /* Large title as per design */
    font-weight: 700; /* Bold */
    line-height: 1.2;
    color: var(--primary-color, #354477);
    margin: 0; /* No margin - gap handles spacing */
    font-family: var(--font-montserrat, 'Montserrat'), sans-serif;
    word-wrap: break-word;
    hyphens: auto;
    padding: 0; /* No side padding - main container controls it */
}

/* Description text */
.about-story-description {
    font-size: 16px; 
    font-weight: 400; 
    line-height: 1.6;
    color: var(--primary-color, #354477); /* Dark blue text */
    margin: 0; /* No margin - gap handles spacing */
    font-family: var(--font-montserrat, 'Montserrat'), sans-serif;
    word-wrap: break-word;
    hyphens: auto;
    padding: 0; /* No side padding - main container controls it */
}

/* CTA Text */
.about-story-cta-text {
    font-size: 16px; /* Body text size */
    font-weight: 700; /* Bold weight */
    line-height: 1.6;
    color: var(--primary-color, #354477); /* Primary blue text */
    margin: 0 0 16px 0; /* Space between text and button */
    font-family: 'Montserrat', sans-serif;
    word-wrap: break-word;
    padding: 0; /* No side padding - main container controls it */
}

/* Reusable ATAX button styles */
.atax-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--secondary-color, #FFD700);
    color: white;
    text-decoration: none;
    padding: 12px 24px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 16px;
    font-family: 'Montserrat', sans-serif;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}

.atax-button:hover {
    background: #E6C200;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(255, 215, 0, 0.3);
}


.atax-button-text {
    color: inherit;
    font-weight: inherit;
}

/* Background logo watermark - positioned on left side with 4% opacity */
.about-story-background-logo {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 60%; 
    opacity: 0.04; 
    pointer-events: none; 
    z-index: 1; 
    overflow: hidden;
}

.about-story-background-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: bottom right;
    display: block;
    position: relative;
    top: 400px; 
    left: 250px;
}

/* ===================================
   RESPONSIVE DESIGN - GLOBAL FRAMEWORK
   =================================== */

/* Laptop (1151px-1600px) - Same layout, reduced gaps only */
@media (max-width: 1600px) {
    .wp-block-acf-atax-about-story .about-story-section {
        padding: 80px 20px 200px; /* Reduced top/bottom padding */
        gap: 45px; /* Reduced gap */
        margin-top: 80px;
    }
    .about-story-container {
        gap: 45px; /* Reduced gap */
    }
    .about-story-content {
        gap: 120px; /* Reduced gap between columns */
    }
    /* NO font size changes - same fonts as desktop */
}

/* Tablet (768px-1150px) - Layout optimization, columns stack */
@media (max-width: 1150px) {
    .wp-block-acf-atax-about-story .about-story-section {
        padding: 60px 20px;
        gap: 40px;
    }
    .about-story-container {
        max-width: 100%;
        gap: 40px;
        padding: 0; /* No side padding - main container controls it */
        align-items: center;
    }
    .about-story-content {
        flex-direction: column; /* Stack columns on tablet */
        gap: 50px; /* Reduced gap for stacked layout */
        padding: 0; /* No side padding - main container controls it */
    }
    .about-story-image-left {
        order: 1; /* Image first on tablet */
    }
    .about-story-content-right {
        order: 2; /* Content second on tablet */
        text-align: center; /* Center align on tablet */
        align-items: center;
        padding: 0; /* No side padding - main container controls it */
        width: 100%;
    }
    .about-story-background-logo {
        width: 80%;
    }
    /* NO font size changes - same fonts as desktop */
}

/* Mobile (0px-767px) - Stacked layout, mobile optimization */
@media (max-width: 767px) {
    .about-story-section {
        padding: 32px 16px 30px 16px; /* Proper mobile padding with bottom */
        gap: 35px;
    }
    .about-story-container {
        gap: 35px;
        padding: 0; /* No side padding - main container controls it */
    }
    .about-story-content {
        gap: 40px; /* Reduced gap for mobile */
        padding: 0; /* No side padding - main container controls it */
    }
    .about-story-content-right {
        gap: 24px; /* Reduced gap for mobile */
        padding: 0; /* No side padding - main container controls it */
    }
    /* Main title exception - 48px → 36px for mobile readability */
    .about-story-title {
        font-size: 36px; /* Mobile title scaling */
    }
    .about-story-background-logo {
        width: 100%;
    }
    .about-story-background-logo img {
        top: 200px;
    }
    /* NO other font size changes - same fonts as desktop */
}