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

/* Main block container - ISOLATED to prevent conflicts */
.wp-block-acf-atax-home-community .home-community-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 */
}

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

/* Main container - 1280px max-width as per design */
.home-community-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 */
.home-community-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 */
.home-community-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 */
.home-community-image {
    width: 100%;
    height: 100%; /* Full height of parent */
    position: relative; /* Container for absolute positioned image */
    min-height: 100%; /* Ensure wrapper takes full height */
}

.home-community-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 */
.home-community-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 */
.home-community-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 */
.home-community-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 Link */
.home-community-cta {
    margin: 0; /* No margin - gap handles spacing */
    padding: 0; /* No side padding - main container controls it */
}

.home-community-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--accent-color, #10A1DC); /* Light blue color */
    text-decoration: underline;
    font-weight: 600;
    font-family: var(--font-montserrat, 'Montserrat'), sans-serif;
    font-size: 16px;
    transition: all 0.3s ease;
}

.home-community-link:hover {
    opacity: 0.8;
    text-decoration: underline;
}

.home-community-link-icon {
    width: 8px;
    height: 8px;
    display: block;
    filter: brightness(0.8); /* Slightly darker icon */
}

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

.home-community-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-home-community .home-community-section {
        padding: 80px 20px; /* Reduced top/bottom padding */
        gap: 45px; /* Reduced gap */
    }
    .home-community-container {
        gap: 45px; /* Reduced gap */
    }
    .home-community-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-home-community .home-community-section {
        padding: 60px 20px;
        gap: 40px;
    }
    .home-community-container {
        max-width: 100%;
        gap: 40px;
        padding: 0; /* No side padding - main container controls it */
        align-items: center;
    }
    .home-community-content {
        flex-direction: column; /* Stack columns on tablet */
        gap: 50px; /* Reduced gap for stacked layout */
        padding: 0; /* No side padding - main container controls it */
    }
    .home-community-image-left {
        order: 1; /* Image first on tablet */
    }
    .home-community-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%;
    }
    .home-community-background-logo {
        width: 80%;
    }
    /* NO font size changes - same fonts as desktop */
}

/* Mobile (0px-767px) - Stacked layout, mobile optimization */
@media (max-width: 767px) {
    .home-community-section {
        padding: 32px 16px 30px 16px; /* Proper mobile padding with bottom */
        gap: 35px;
    }
    .home-community-container {
        gap: 35px;
        padding: 0; /* No side padding - main container controls it */
    }
    .home-community-content {
        gap: 40px; /* Reduced gap for mobile */
        padding: 0; /* No side padding - main container controls it */
    }
    .home-community-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 */
    .home-community-title {
        font-size: 36px; /* Mobile title scaling */
    }
    .home-community-background-logo {
        width: 100%;
    }
    .home-community-background-logo img {
        top: 200px;
    }
    /* NO other font size changes - same fonts as desktop */
}