/**
 * SMG Ad Manager Styles
 */

.smg-ad-container {
    margin: 20px 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    align-items: start;
}

/* Responsive column layouts */
@media (min-width: 768px) {
    .smg-ad-container.smg-ad-columns-2 {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
    
    .smg-ad-container.smg-ad-columns-3 {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }
    
    .smg-ad-container.smg-ad-columns-4 {
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
    }
    
    .smg-ad-container.smg-ad-columns-5 {
        grid-template-columns: repeat(5, 1fr);
        gap: 14px;
    }
    
    .smg-ad-container.smg-ad-columns-6 {
        grid-template-columns: repeat(6, 1fr);
        gap: 12px;
    }
}

/* Tablet breakpoint - 2 columns max */
@media (min-width: 768px) and (max-width: 1023px) {
    .smg-ad-container.smg-ad-columns-4,
    .smg-ad-container.smg-ad-columns-5,
    .smg-ad-container.smg-ad-columns-6 {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
    
    .smg-ad-container.smg-ad-columns-3 {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
}

.smg-ad {
    display: block;
    max-width: 100%;
    width: 100%;
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
}

/* Enhanced styling for multi-column layouts */
.smg-ad-container.smg-ad-columns-2 .smg-ad,
.smg-ad-container.smg-ad-columns-3 .smg-ad,
.smg-ad-container.smg-ad-columns-4 .smg-ad,
.smg-ad-container.smg-ad-columns-5 .smg-ad,
.smg-ad-container.smg-ad-columns-6 .smg-ad {
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.smg-ad-container.smg-ad-columns-2 .smg-ad:hover,
.smg-ad-container.smg-ad-columns-3 .smg-ad:hover,
.smg-ad-container.smg-ad-columns-4 .smg-ad:hover,
.smg-ad-container.smg-ad-columns-5 .smg-ad:hover,
.smg-ad-container.smg-ad-columns-6 .smg-ad:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.smg-ad-link {
    display: block;
    text-decoration: none;
    border: none;
    transition: opacity 0.3s ease;
    border-radius: 4px;
    overflow: hidden;
}

.smg-ad-link:hover {
    opacity: 0.95;
}

/* Image styling for column layouts */
.smg-ad-container.smg-ad-columns-2 .smg-ad-image,
.smg-ad-container.smg-ad-columns-3 .smg-ad-image,
.smg-ad-container.smg-ad-columns-4 .smg-ad-image,
.smg-ad-container.smg-ad-columns-5 .smg-ad-image,
.smg-ad-container.smg-ad-columns-6 .smg-ad-image {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease;
}

.smg-ad-container.smg-ad-columns-2 .smg-ad-link:hover .smg-ad-image,
.smg-ad-container.smg-ad-columns-3 .smg-ad-link:hover .smg-ad-image,
.smg-ad-container.smg-ad-columns-4 .smg-ad-link:hover .smg-ad-image,
.smg-ad-container.smg-ad-columns-5 .smg-ad-link:hover .smg-ad-image,
.smg-ad-container.smg-ad-columns-6 .smg-ad-link:hover .smg-ad-image {
    transform: scale(1.02);
}

.smg-ad-image {
    max-width: 100%;
    height: auto;
    display: block;
}

.smg-ad-content {
    padding: 15px;
}

/* Content styling for multi-column layouts */
.smg-ad-container.smg-ad-columns-2 .smg-ad-content,
.smg-ad-container.smg-ad-columns-3 .smg-ad-content,
.smg-ad-container.smg-ad-columns-4 .smg-ad-content,
.smg-ad-container.smg-ad-columns-5 .smg-ad-content,
.smg-ad-container.smg-ad-columns-6 .smg-ad-content {
    padding: 12px;
}

/* Mobile spacing adjustments */
@media (max-width: 767px) {
    .smg-ad-container {
        gap: 16px;
    }
    
    .smg-ad {
        margin-bottom: 0;
    }
}

/* Large desktop spacing for better visual balance */
@media (min-width: 1200px) {
    .smg-ad-container.smg-ad-columns-2 {
        gap: 30px;
    }
    
    .smg-ad-container.smg-ad-columns-3 {
        gap: 24px;
    }
    
    .smg-ad-container.smg-ad-columns-4 {
        gap: 20px;
    }
    
    .smg-ad-container.smg-ad-columns-5 {
        gap: 18px;
    }
    
    .smg-ad-container.smg-ad-columns-6 {
        gap: 16px;
    }
}

/* Ensure images maintain aspect ratio in columns */
.smg-ad-container.smg-ad-columns-2 .smg-ad-image,
.smg-ad-container.smg-ad-columns-3 .smg-ad-image,
.smg-ad-container.smg-ad-columns-4 .smg-ad-image,
.smg-ad-container.smg-ad-columns-5 .smg-ad-image,
.smg-ad-container.smg-ad-columns-6 .smg-ad-image {
    object-fit: cover;
}

.smg-ad-error {
    color: #d63638;
    padding: 10px;
    background: #fcf0f1;
    border-left: 4px solid #d63638;
}