/* Section 9 / Layout 5 Wrapper */
.section-9-wrapper {
    background-color: #f3f4f6; /* Matching the light gray background */
    padding: 30px 0;
    margin-bottom: 15px;
}

/* Section Header */
.s9-header {
    margin-bottom: 20px;
    text-align: center;
}

.s9-header h2 {
    /* Managed by .center-unique-title in style.css */
}

.s9-header h2::before {
    display: none;
}

/* Layout Grid */
.s9-layout-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Fixed 50:50 ratio */
    gap: 30px;
    align-items: stretch; /* Ensure both columns are equal height */
}

/* Left: Lead Post */
.s9-lead-col {
    padding-right: 30px;
    border-right: 1px solid #d1d5db;
    display: flex;
    flex-direction: column;
}

.s9-lead-post {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.s9-lead-image {
    width: 100%;
    position: relative;
    padding-top: 56.25%; /* 16:9 Aspect Ratio */
    overflow: hidden;
    margin-bottom: 15px;
}

.s9-lead-image a {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
}

.s9-lead-image img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.s9-lead-post:hover .s9-lead-image img {
    transform: scale(1.05);
}

.s9-lead-content {
    display: flex;
    flex-direction: column;
    flex: 1; /* Fills available height */
}

.s9-lead-title {
    font-size: 26px;
    line-height: 1.4;
    margin: 0 0 8px 0;
}

.s9-lead-title a {
    color: var(--text-color);
    text-decoration: none;
    transition: color 0.3s;
}

.s9-lead-title a:hover {
    color: var(--primary-color);
}

.s9-post-meta {
    font-size: 13px;
    color: #64748b;
    margin-bottom: 10px;
}

.s9-post-meta i {
    color: var(--primary-color);
    margin-right: 4px;
}

.s9-lead-excerpt {
    font-size: 15px;
    color: #555;
    line-height: 1.6;
    margin-bottom: 0;
}

/* Right: 2x2 List Grid */
.s9-list-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-content: space-between; /* Spreads rows to eliminate vertical negative space */
    height: 100%;
}

.s9-list-item {
    display: flex;
    flex-direction: column-reverse; /* Image on top, Title on bottom */
    gap: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #d1d5db;
}

/* Remove bottom border from last two items in the 2x2 grid */
.s9-list-item:nth-last-child(-n+2) {
    border-bottom: none;
    padding-bottom: 0;
}

.s9-list-content {
    flex: 1;
}

.s9-list-title {
    font-size: 16px;
    line-height: 1.4;
    margin: 0 0 8px 0;
}

.s9-list-title a {
    color: var(--text-color);
    text-decoration: none;
    transition: color 0.3s;
}

.s9-list-title a:hover {
    color: var(--primary-color);
}

.s9-list-image {
    width: 100%; /* Make image full width for list items to match fixed ratio */
    position: relative;
    padding-top: 56.25%; /* 16:9 fixed ratio */
    flex-shrink: 0;
    overflow: hidden;
    margin-top: 0;
}

.s9-list-image img {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.s9-list-item:hover .s9-list-image img {
    transform: scale(1.05);
}

/* Responsive */
@media (max-width: 1024px) {
    .s9-layout-grid {
        grid-template-columns: 1fr;
    }
    
    .s9-lead-col {
        padding-right: 0;
        border-right: none;
        padding-bottom: 30px;
        border-bottom: 1px solid #d1d5db;
        margin-bottom: 10px;
    }
}

@media (max-width: 768px) {
    .s9-list-col {
        grid-template-columns: 1fr 1fr; /* 2 columns on mobile */
        gap: 15px; /* slightly smaller gap on mobile */
    }
    
    .s9-lead-title {
        font-size: 22px;
    }
    
    .s9-list-title {
        font-size: 14px; /* slightly smaller font on mobile */
    }
}