/**
 * Ad Grid - Frontend Styles
 *
 * Use class "lcc-ad-grid" on your container
 * Each ad item should have class "lcc-ad-item" and data-size attribute
 */

/* Main Grid Container */
.lcc-ad-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-flow: dense;
    gap: 1.8rem;
    width: 100%;
}

/* Responsive columns */
.lcc-ad-grid[data-columns="2"] { grid-template-columns: repeat(2, 1fr); }
.lcc-ad-grid[data-columns="3"] { grid-template-columns: repeat(3, 1fr); }
.lcc-ad-grid[data-columns="4"] { grid-template-columns: repeat(4, 1fr); }
.lcc-ad-grid[data-columns="5"] { grid-template-columns: repeat(5, 1fr); }
.lcc-ad-grid[data-columns="6"] { grid-template-columns: repeat(6, 1fr); }

/* Ad Item */
.lcc-ad-item {
    position: relative;
    display: block;
    border-radius: 0;
    overflow: hidden;
    background: #f3f4f6;
    text-decoration: none;
    cursor: pointer;
}

/* Size variations */
.lcc-ad-item[data-size="1x1"] {
    grid-column: span 1;
    grid-row: span 1;
}

.lcc-ad-item[data-size="2x1"] {
    grid-column: span 2;
    grid-row: span 1;
}

.lcc-ad-item[data-size="1x2"] {
    grid-column: span 1;
    grid-row: span 2;
}

.lcc-ad-item[data-size="2x2"] {
    grid-column: span 2;
    grid-row: span 2;
}

/* Images */
.lcc-ad-item img {
    width: 100%;
    height: auto;
    display: block;
}

/* Placeholder for items without images */
.lcc-ad-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    font-size: 14px;
    color: #6b7280;
    text-align: center;
    background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%);
}

/* Responsive breakpoints */
@media (max-width: 1024px) {
    .lcc-ad-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .lcc-ad-grid[data-columns="4"],
    .lcc-ad-grid[data-columns="5"],
    .lcc-ad-grid[data-columns="6"] {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .lcc-ad-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .lcc-ad-grid[data-columns="3"],
    .lcc-ad-grid[data-columns="4"],
    .lcc-ad-grid[data-columns="5"],
    .lcc-ad-grid[data-columns="6"] {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Adjust larger items on mobile */
    .lcc-ad-item[data-size="2x2"] {
        grid-column: span 2;
        grid-row: span 2;
    }
}

@media (max-width: 480px) {
    .lcc-ad-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .lcc-ad-grid[data-columns="2"],
    .lcc-ad-grid[data-columns="3"],
    .lcc-ad-grid[data-columns="4"],
    .lcc-ad-grid[data-columns="5"],
    .lcc-ad-grid[data-columns="6"] {
        grid-template-columns: 1fr;
    }

    /* Stack all items in single column on small screens */
    .lcc-ad-item[data-size="1x1"],
    .lcc-ad-item[data-size="2x1"],
    .lcc-ad-item[data-size="1x2"],
    .lcc-ad-item[data-size="2x2"] {
        grid-column: span 1;
        grid-row: span 1;
    }
}