/**
 * Masonry Grid Component - Flexbox with Relative Positioning
 * Images: 400px height (square)
 * Fact boxes: 200px height (half-height rectangles)
 * Uses relative positioning to eliminate gaps
 */

/* Container - Flexbox with wrap */
.masonry-grid__container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 auto;
}

/* Items - 3 columns with relative positioning */
.masonry-grid__item {
    flex: 0 0 calc((100% - 20px) / 3);
    overflow: visible;
    position: relative;
}

/* Flexbox order for visual layout */
.masonry-grid__item:nth-child(2) { order: 1; } /* Image 1 - left */
.masonry-grid__item:nth-child(1) { order: 2; } /* Fact 1 - middle */
.masonry-grid__item:nth-child(4) { order: 3; } /* Image 2 - right */
.masonry-grid__item:nth-child(3) { order: 4; } /* Fact 2 - left */
.masonry-grid__item:nth-child(5) { order: 5; } /* Image 3 - middle */
.masonry-grid__item:nth-child(6) { order: 6; } /* Fact 3 - right */

/* Relative positioning to create tight masonry effect */
/* Image 3 (middle column, row 2) - pull up to maintain 10px gap after Fact 1 */
.masonry-grid__item:nth-child(5) {
    top: -200px; /* Pull up by fact height (200px) only, leaving 10px gap */
    margin-bottom: -200px; /* Collapse the space so items below aren't affected */
}

/* Fact Boxes - Half height */
.masonry-grid__fact {
    background: var(--color-light-blue) !important;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: var(--color-white);
    width: 100%;
    height: 200px;
}

.masonry-grid__fact h1,
.masonry-grid__fact h2,
.masonry-grid__fact h3,
.masonry-grid__fact h4,
.masonry-grid__fact h5,
.masonry-grid__fact h6 {
    color: var(--color-white);
    margin: 0 0 8px 0;
}

.masonry-grid__fact p,
.masonry-grid__fact span,
.masonry-grid__fact div {
    color: var(--color-white);
    margin: 0;
}

/* Images - Square (full height) */
.masonry-grid__image {
    position: relative;
    width: 100%;
    height: 400px;
}

.masonry-grid__image::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 75%;
    background: linear-gradient(to bottom, rgba(var(--color-blue-rgb), 0), var(--color-blue));
    z-index: 1;
    pointer-events: none;
}

/* Middle column image (Image 3) - reverse gradient direction */
.masonry-grid__item:nth-child(5).masonry-grid__image::before {
    top: 0;
    bottom: auto;
    background: linear-gradient(to top, rgba(var(--color-blue-rgb), 0), var(--color-blue));
}

.masonry-grid__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Responsive - Stack below 992px and reset positioning */
@media screen and (max-width: 992px) {
    .masonry-grid__item {
        flex: 0 0 100%;
        order: initial !important;
        top: 0 !important;
        margin-bottom: 0 !important;
    }
}

/* Responsive padding adjustments */
@media screen and (max-width: 768px) {
    .masonry-grid__fact {
        padding: 30px;
    }
}

@media screen and (max-width: 576px) {
    .masonry-grid__fact {
        padding: 20px;
    }
}

/* Component wrapper padding */
.masonry-grid {
    padding-top: var(--spacing-xs) !important;
}