/* Social Grid */
.social-grid {position: relative;}
.social-grid-header {display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; max-width: clamp(300px, 100vw, 650px); margin: 0 auto;}
.grid-wrapper {display: grid; gap: clamp(12px, 2vw, 20px); grid-template-columns: 1fr 1fr; grid-template-rows: clamp(180px, 22vw, 320px) clamp(180px, 22vw, 320px);}
.grid-item {position: relative;  overflow: hidden;  border-radius: var(--radius); min-height: 0; z-index: 2;}
.grid-item img {width: 100%; height: 100%; object-fit: cover; display: block;}

/* Image structure */
.item-1 { grid-column: 1; grid-row: 1 / span 2; }
.item-2 { grid-column: 2; grid-row: 1; }
.item-3 { grid-column: 2; grid-row: 2; }

/* CTA replaces bottom-right */
.social-grid-cta-card {grid-column: 3; grid-row: 2; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: clamp(30px, 5vw, 50px); text-align: center; background-color: var(--sage);}
.social-icons {display: flex; gap: 12px; margin-top: 30px;}
.social-icon {width: 55px; height: 55px; border-radius: 50%; background: var(--wellington-green); display: flex; align-items: center; justify-content: center; font-size: 2rem; text-decoration: none; transition: var(--smooth); color: var(--light);}
.social-icon:hover {transform: scale(1.08);}
.grid-item.social-grid-cta-card h3 {max-width: 350px;}

/* Responsive */
@media (max-width: 1300px) {
    .grid-item.social-grid-cta-card h3 {font-size: 33px;}
}

@media (max-width: 900px) {
    .grid-wrapper {grid-template-columns: repeat(2, 1fr); grid-template-rows: auto auto;}
    .grid-wrapper > :nth-child(1) {grid-column: 1; grid-row: 1;}
    .grid-wrapper > :nth-child(3) {grid-column: 2; grid-row: 1;}
    .grid-wrapper > :nth-child(2) {grid-column: 1 / -1; grid-row: 2; max-height: 375px; width: 100%; object-fit: cover;}    
    .grid-item {grid-column: auto; grid-row: auto;}
    .grid-item:not(.social-grid-cta-card) {aspect-ratio: 1 / 1;}
    .social-grid-cta-card {grid-column: 1 / -1;}
}

@media (max-width: 500px) {
    .grid-wrapper {grid-template-columns: 1fr; grid-template-rows: auto;}
    .grid-wrapper > :nth-child(n) {grid-column: auto; grid-row: auto;}    .grid-item {grid-column: auto; grid-row: auto;}
    .grid-item:not(.social-grid-cta-card) {aspect-ratio: 4 / 3;}
    .social-grid-cta-card {grid-column: 1 / -1;}
}