/* ===================================
   SERVICE BLOG LOOP BLOCK STYLES
   =================================== */

/* Main block container - ISOLATED to prevent conflicts */
.wp-block-acf-atax-service-blog-loop .service-blog-loop-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) */
.service-blog-loop-section {
    background: var(--blueish-bg-gray, #EDEFF4);
    padding: 112px 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 */
.service-blog-loop-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 164px gap */
.service-blog-loop-content {
    display: flex;
    gap: 164px; /* 164px gap between columns as specified */
    align-items: flex-start; /* Align to top */
    padding: 0; /* No side padding - main container controls it */
}

/* Left column: Resources info and CTA */
.service-blog-loop-left-column {
    flex: 1; /* Take up available space */
    display: flex;
    flex-direction: column;
    gap: 32px; /* Controls spacing between title, description, and button */
    padding: 0; /* No side padding - main container controls it */
}

/* Resources content container */
.service-blog-loop-resources {
    display: flex;
    flex-direction: column;
    gap: 16px; /* Controls spacing between title and description */
    padding: 0; /* No side padding - main container controls it */
}

/* Main title */
.service-blog-loop-title {
    font-size: 48px; /* Large title as per design */
    font-weight: 700; /* Bold */
    line-height: 1.2;
    color: var(--accent-color, #10A1DC);
    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 */
.service-blog-loop-description {
    font-size: 16px; 
    font-weight: 700; 
    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;
    margin-bottom: 32px;
    padding: 0; /* No side padding - main container controls it */
}

/* Right column: Latest blog posts (flex:2) */
.service-blog-loop-posts-column {
    flex: 2; /* Takes more space as specified */
    display: flex;
    flex-direction: column;
    gap: 32px; /* Controls spacing between posts */
    padding: 0; /* No side padding - main container controls it */
}

/* Posts container */
.service-blog-loop-posts {
    display: flex;
    flex-direction: column;
    gap: 32px; /* Controls spacing between individual posts */
    padding: 0; /* No side padding - main container controls it */
}

/* Individual blog post */
.service-blog-loop-post {
    display: flex;
    gap: 24px; /* Controls spacing between image and content */
    align-items: flex-start;
    /* No background, no shadow - blends into section background */
    padding: 24px 0; /* Vertical padding only, no horizontal padding */
}

/* Post featured image */
.service-blog-loop-post-image {
    flex-shrink: 0; /* Don't shrink image */
    width: 197px; /* Fixed width for consistency - updated to 197px */
    height: 197px; /* Fixed height for consistency - updated to 197px */
    overflow: hidden;
    border-radius: 8px; /* 8px border radius as specified */
}

.service-blog-loop-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

/* Post content */
.service-blog-loop-post-content {
    flex: 1; /* Take remaining space */
    display: flex;
    flex-direction: column;
    gap: 16px; /* Controls spacing between content elements */
    padding: 0; /* No side padding - main container controls it */
}

/* Category tag */
/* Base category style - primary blue background with white text */
.service-blog-loop-category {
    display: inline-block;
    padding: 6px 16px;
    background: var(--primary-color, #354477); /* Primary blue background */
    color: white; /* White text */
    font-size: 16px; /* Updated to 16px as requested */
    font-weight: 500; /* Medium weight as requested */
    font-family: var(--font-montserrat, 'Montserrat'), sans-serif; /* Montserrat font */
    text-transform: none; /* Remove uppercase transform */
    letter-spacing: normal; /* Remove letter spacing */
    border-radius: 20px; /* Pill shape */
    align-self: flex-start;
}

/* All category number classes use primary blue */
.service-blog-loop-category-1,
.service-blog-loop-category-2,
.service-blog-loop-category-3 {
    background: var(--primary-color, #354477); /* Primary blue background */
    color: white; /* White text */
}

/* Post title */
.service-blog-loop-post-title {
    font-size: 24px; /* Post title size */
    font-weight: 700; /* Bold */
    line-height: 1.3;
    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;
}

.service-blog-loop-post-title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s ease;
}

.service-blog-loop-post-title a:hover {
    color: var(--accent-color, #10A1DC); /* Light blue on hover */
}

/* Post excerpt */
.service-blog-loop-post-excerpt {
    font-size: 16px; /* Body text size */
    font-weight: 400; /* Regular weight */
    line-height: 1.5;
    color: #666666; /* Medium gray text */
    margin: 0; /* No margin - gap handles spacing */
    font-family: var(--font-montserrat, 'Montserrat'), sans-serif;
    word-wrap: break-word;
    hyphens: auto;
}

/* Learn More link */
.service-blog-loop-learn-more {
    color: var(--primary-color, #354477); /* Light blue text */
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    transition: color 0.3s ease;
    align-self: flex-start;
}

.service-blog-loop-learn-more:hover {
    color: var(--primary-color, #354477); /* Dark blue on hover */
}

/* Chevron icon styling */
.service-blog-loop-chevron {
    width: 24px;
    height: 24px;
    transition: transform 0.3s ease;
    vertical-align: middle; /* Align with text baseline */
}

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

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

/* No posts fallback */
.service-blog-loop-no-posts {
    text-align: center;
    padding: 40px;
    color: #666666;
    font-style: italic;
}

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

/* Laptop (1151px-1600px) - Same layout, reduced gaps only */
@media (max-width: 1600px) {
    .wp-block-acf-atax-service-blog-loop .service-blog-loop-section {
        padding: 80px 20px; /* Reduced top/bottom padding */
        gap: 45px; /* Reduced gap */
    }
    .service-blog-loop-container {
        gap: 45px; /* Reduced gap */
    }
    .service-blog-loop-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-service-blog-loop .service-blog-loop-section {
        padding: 60px 20px;
        gap: 40px;
    }
    .service-blog-loop-container {
        max-width: 100%;
        gap: 40px;
        padding: 0; /* No side padding - main container controls it */
        align-items: center;
    }
    .service-blog-loop-content {
        flex-direction: column; /* Stack columns on tablet */
        gap: 50px; /* Reduced gap for stacked layout */
        padding: 0; /* No side padding - main container controls it */
    }
    .service-blog-loop-left-column {
        text-align: center; /* Center align on tablet */
        align-items: center;
        padding: 0; /* No side padding - main container controls it */
        width: 100%;
    }
    .service-blog-loop-posts-column {
        padding: 0; /* No side padding - main container controls it */
    }
    .service-blog-loop-resources {
        gap: 8px;
    }
    .service-blog-loop-background-logo {
        width: 80%;
    }
    /* NO font size changes - same fonts as desktop */
}

/* Mobile (0px-767px) - Stacked layout, mobile optimization */
@media (max-width: 767px) {
    .service-blog-loop-section {
        padding: 32px 16px 30px 16px; /* Proper mobile padding with bottom */
        gap: 35px;
    }
    .service-blog-loop-container {
        gap: 35px;
        padding: 0; /* No side padding - main container controls it */
    }
    .service-blog-loop-content {
        gap: 40px; /* Further reduced gap for mobile */
    }
    .service-blog-loop-title {
        font-size: 36px; /* 48px → 36px for mobile readability (framework exception) */
    }
    .service-blog-loop-left-column {
        gap: 24px; /* Reduced gap for mobile */
        padding: 0; /* No side padding - main container controls it */
    }
    .service-blog-loop-post {
        flex-direction: column; /* Stack image above content on mobile */
        gap: 20px; /* Reduced gap for mobile */
        text-align: left;
        padding: 20px 0; /* Maintain vertical padding, no horizontal */
    }
    .service-blog-loop-post-image {
        width: 100%; /* Full width on mobile */
        height: 197px; /* Maintain 197px height on mobile for consistency */
    }
    .service-blog-loop-post-content {
        gap: 16px; /* Maintain spacing */
        align-items: center; /* Center align on mobile */
        padding: 0; /* No side padding - main container controls it */
    }
    .service-blog-loop-category {
        align-self: start;
    }
    .service-blog-loop-background-logo {
        width: 100%;
    }
    .service-blog-loop-background-logo img {
        top: 200px;
    }
    /* NO other font size changes - same fonts as desktop */
}

/* ===================================
   ALIGNMENT SUPPORT
   =================================== */

/* Wide alignment support */
.wp-block-acf-atax-service-blog-loop .service-blog-loop-section.alignwide {
    max-width: var(--wide-width, 1280px);
}

/* Full width alignment support */
.wp-block-acf-atax-service-blog-loop .service-blog-loop-section.alignfull {
    max-width: 100%;
}

/* ===================================
   OVERFLOW PROTECTION & TEXT HANDLING
   =================================== */

/* Prevent text overflow on all screen sizes */
.wp-block-acf-atax-service-blog-loop .service-blog-loop-title,
.wp-block-acf-atax-service-blog-loop .service-blog-loop-description,
.wp-block-acf-atax-service-blog-loop .service-blog-loop-post-title,
.wp-block-acf-atax-service-blog-loop .service-blog-loop-post-excerpt {
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
    max-width: 100%;
    margin: 0px;
}

/* Ensure containers don't cause horizontal scroll */
.wp-block-acf-atax-service-blog-loop .service-blog-loop-section {
    max-width: 100%;
    overflow: hidden;
}

/* Ensure grid containers don't overflow */
.wp-block-acf-atax-service-blog-loop .service-blog-loop-container {
    min-width: 0;
    overflow-x: hidden;
}

/* Ensure content doesn't overflow */
.wp-block-acf-atax-service-blog-loop .service-blog-loop-content {
    min-width: 0;
    overflow-x: hidden;
}

/* ===================================
   HOVER EFFECTS & INTERACTIONS
   =================================== */

/* Image hover effects only */
.service-blog-loop-post:hover .service-blog-loop-image {
    transform: scale(1.05); /* Slight zoom on hover */
    transition: transform 0.3s ease;
}

/* ===================================
   ACCESSIBILITY & FOCUS STATES
   =================================== */

/* Focus states for keyboard navigation */
.service-blog-loop-post-title a:focus,
.service-blog-loop-learn-more:focus {
    outline: 2px solid var(--accent-color, #10A1DC);
    outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .service-blog-loop-post {
        border: 2px solid var(--primary-color, #354477);
    }
    
    .service-blog-loop-category {
        border: 1px solid white;
    }
}