/**
 * Meetlop Ads Injector – Frontend Ad Unit Styles
 *
 * Images are NEVER cropped. The ad unit grows to fit the natural
 * image height. The "Sponsored" label sits above the image.
 *
 * @package MeetlopAdsInjector
 */

/* ─── Ad Unit Wrapper ─────────────────────────────────────────────────────── */
.mlai-ad-unit {
    display: inline-block;
    position: relative;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    overflow: visible;           /* NEVER clip the image              */
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    max-width: 100%;
    vertical-align: top;
    font-family: Arial, sans-serif;
}

.mlai-ad-unit:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    transform: translateY(-1px);
}

/* ─── Sponsored Label — sits ABOVE the image ──────────────────────────────── */
/* To hide it:        .mlai-ad-unit__label { display: none; }                  */
/* To change text:    edit templates/frontend/ad-unit.php                      */
/* To change colour:  edit background / color values below                     */
.mlai-ad-unit__label {
    display: block;
    padding: 2px 8px;
    background: #f8f8f8;
    border-bottom: 1px solid #e8e8e8;
    border-radius: 6px 6px 0 0;  /* rounded top corners match the wrapper */
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #bbb;
    line-height: 1.8;
    text-align: right;
    user-select: none;
}

/* ─── Clickable Link ──────────────────────────────────────────────────────── */
.mlai-ad-unit__link {
    display: block;
    line-height: 0;
    text-decoration: none;
    outline: none;
    overflow: hidden;
    border-radius: 0 0 6px 6px;  /* rounded bottom corners */
}

.mlai-ad-unit__link:focus-visible {
    outline: 2px solid #2271b1;
    outline-offset: 2px;
}

/* ─── Ad Image — FULL image always shown, nothing cropped ────────────────── */
.mlai-ad-unit__image {
    display: block;
    width: 100%;             /* fill the ad container width              */
    height: auto;            /* height scales naturally — NO fixed height */
    max-width: 100%;
    object-fit: unset;       /* explicitly unset any inherited cover/fill */
    aspect-ratio: unset;     /* no forced ratio — image decides its height */
    transition: transform 0.25s ease;
    background: #f4f4f4;
}

.mlai-ad-unit:hover .mlai-ad-unit__image {
    transform: scale(1.012);
}

/* ─── Size Variants — only MAX-WIDTH is set, height is always natural ──────── */

/* Leaderboard 728×90 */
.mlai-ad-unit--728x90 {
    width: 100%;
    max-width: 728px;
}

/* Medium Rectangle 300×250 */
.mlai-ad-unit--300x250 {
    width: 100%;
    max-width: 300px;
}

/* Large Rectangle 336×280 */
.mlai-ad-unit--336x280 {
    width: 100%;
    max-width: 336px;
}

/* Half Page 300×600 */
.mlai-ad-unit--300x600 {
    width: 100%;
    max-width: 300px;
}

/* Mobile Banner 320×50 */
.mlai-ad-unit--320x50 {
    width: 100%;
    max-width: 320px;
}

/* Large Leaderboard 970×90 */
.mlai-ad-unit--970x90 {
    width: 100%;
    max-width: 970px;
}

/* ─── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .mlai-ad-unit--728x90,
    .mlai-ad-unit--970x90,
    .mlai-ad-unit--300x250,
    .mlai-ad-unit--336x280,
    .mlai-ad-unit--300x600 {
        max-width: 100%;
        width: 100%;
    }
}