.adhub-wrapper {
    display: block; /* Changed from inline-block to block for better centering */
    margin: 10px auto; /* Center the wrapper horizontally */
    vertical-align: top;
    box-sizing: border-box; /* Include padding in width calculation */
    overflow: hidden; /* Hide any content that exceeds the height, removing scrollbar */
    max-width: 100%; /* Prevent breaking out of parent width */
    max-height: 100%; /* Prevent breaking out of parent height */
    position: relative; /* Ensure proper positioning within parent */
}

/* Use flexbox for multiple ads to stack or space them properly */
.adhub-multiple-ads {
    display: flex;
    flex-wrap: wrap;
    gap: 15px; /* Space between ads */
    justify-content: center; /* Center ads horizontally */
}

/* Individual ad styling */
.adhub-ad {
    display: block;
    /*border: 1px solid #ddd;*/
    padding: 5px; /* Maintain minimal padding to ensure content fits */
    text-align: center;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    overflow: hidden; /* Prevent content from breaking out of ad */
    box-sizing: border-box; /* Include padding in width */
    margin: 0 auto; /* Center the ad horizontally */
    max-width: 100%; /* Ensure ad doesn’t exceed parent width */
}

/* Remove fixed sizes, rely on master’s inline styles */
.adhub-ad.adhub-banner,
.adhub-ad.adhub-rectangle,
.adhub-ad.adhub-square {
    /* No max-width or max-height here—sizes come from master JSON */
}

.adhub-ad:hover {
    /*background-color: #f5f5f5;*/
}

.adhub-ad-inner {
    /* Ensure content fits within the container height */
    max-height: 100%; /* Match the wrapper’s height */
    overflow: hidden; /* Hide any overflow within the inner content */
    display: flex; /* Use flexbox to stack image and text vertically */
    flex-direction: column; /* Stack children vertically */
    justify-content: center; /* Center content vertically */
    align-items: center; /* Center content horizontally */
}

.adhub-ad img {
    /* Scale image to leave room for text, maintaining aspect ratio */
    max-width: 100%; /* Ensure image doesn’t exceed container width */
    height: auto; /* Maintain aspect ratio */
    display: block;
    margin-bottom: 2px; /* Reduced margin for tighter spacing */
    object-fit: contain; /* Maintain aspect ratio and fit within container */
}

/* Specific styling for each ad format */
.adhub-ad.adhub-banner img {
    max-height: 70px; /* Leave room for text in 90px height */
}

.adhub-ad.adhub-square img {
    max-height: 250px; /* Leave room for text in 300px height */
}

.adhub-ad.adhub-rectangle img {
    max-height: 250px; /* Leave room for text in 300px height */
}

/* Ensure text remains visible and centered, with adjustments for visibility */
.adhub-ad h3, .adhub-ad p, .adhub-ad span {
    margin: 2px 0; /* Reduced margin for tighter spacing */
    font-size: 12px; /* Reduced font size to fit within constrained heights */
    word-wrap: break-word;
    overflow-wrap: break-word;
    color: #333; /* Ensure text color is visible */
    line-height: 1.2; /* Tighter line height for better fit */
    max-height: 18px; /* Limit text height to one line, enough for title and coupon */
    overflow: visible; /* Allow text to be visible, removing hidden overflow */
}

/* Specific text styling for banner to fit 90px height */
.adhub-ad.adhub-banner h3, .adhub-ad.adhub-banner p, .adhub-ad.adhub-banner span {
    font-size: 10px; /* Smaller font for banner to fit in 90px height */
    max-height: 16px; /* Limit to one line for banner */
}

/* Responsive adjustments for multiple ads */
@media screen and (max-width: 900px) {
    .adhub-multiple-ads {
        justify-content: flex-start; /* Align left on smaller screens */
    }

    .adhub-ad {
        padding: 4px; /* Slightly reduced padding on medium screens */
    }

    .adhub-ad h3, .adhub-ad p, .adhub-ad span {
        font-size: 10px; /* Smaller text on medium screens */
        max-height: 16px; /* Adjust text height for smaller screens */
    }

    .adhub-ad.adhub-banner img {
        max-height: 60px; /* Reduce image height on medium screens */
    }

    .adhub-ad.adhub-square img {
        max-height: 220px; /* Reduce image height on medium screens */
    }

    .adhub-ad.adhub-rectangle img {
        max-height: 220px; /* Reduce image height on medium screens */
    }
}

@media screen and (max-width: 600px) {
    .adhub-ad {
        padding: 3px; /* Further reduced padding on mobile */
    }

    .adhub-ad h3, .adhub-ad p, .adhub-ad span {
        font-size: 8px; /* Smaller text on mobile */
        max-height: 14px; /* Adjust text height for mobile */
    }

    .adhub-ad.adhub-banner img {
        max-height: 50px; /* Further reduce image height on mobile */
    }

    .adhub-ad.adhub-square img {
        max-height: 200px; /* Further reduce image height on mobile */
    }

    .adhub-ad.adhub-rectangle img {
        max-height: 200px; /* Further reduce image height on mobile */
    }
}

/* Ensure visibility for multiple ads, relying on master sizes */
.adhub-multiple-ads .adhub-wrapper {
    flex: 0 0 auto; /* Allow ads to use their exact size, no stretching */
    max-width: 100%; /* Ensure ads don’t exceed parent width */
}

@media screen and (max-width: 768px) {
    .adhub-multiple-ads .adhub-wrapper {
        flex: 0 0 auto; /* Two ads per row on tablets, no fixed sizes */
        max-width: 100%;
    }
}

@media screen and (max-width: 600px) {
    .adhub-multiple-ads .adhub-wrapper {
        flex: 0 0 100%; /* One ad per row on mobile, no fixed sizes */
        max-width: 100%;
    }
}