/** * Responsive Ad Unit Styles (Media Queries ကို အသုံးပြုထားသည်)
 */

/* ---------------------------------------------------- */
/* 1. Base Styles - Ad Container အတွက် */
/* ---------------------------------------------------- */
.mq-ad-placement {
    display: block;
    margin: 10px auto; /* အလယ်ချရန် */
    text-align: center;
    overflow: hidden; 
    max-width: 100%;
}

/* Image များကို Container Width အပြည့်ဆွဲဆန့်စေရန် */
.mq-ad-placement img {
    max-width: 100% !important;
    height: auto !important;
}


/* ---------------------------------------------------- */
/* 2. Medium Rectangle (300x250) - mq-ad-medium-rectangle-300 */
/* ---------------------------------------------------- */
.mq-ad-medium-rectangle-300 {
    width: 300px;
    height: 250px;
    /* Container 300px ထက် ငယ်ရင်တော့ 100% ယူပြီး Image ကို ချိန်ပေးပါလိမ့်မည်။ */
}


/* ---------------------------------------------------- */
/* 3. Leaderboard (970/728) - mq-ad-leaderboard-970 */
/* ---------------------------------------------------- */
.mq-ad-leaderboard-970 {
    /* Mobile Default (320x100 လောက် လိုချင်ပါက) */
    width: 100%;
    height: 100px;
}

/* Tablet Size (600px နှင့်အထက်) - 728x90 */
@media (min-width: 600px) {
    .mq-ad-leaderboard-970 {
        width: 728px;
        height: 90px;
    }
}

/* Desktop Size (992px နှင့်အထက်) - 970x250 */
@media (min-width: 992px) {
    .mq-ad-leaderboard-970 {
        width: 970px;
        height: 250px; 
    }
}


/* ---------------------------------------------------- */
/* 4. Large Skyscraper (300x600) - mq-ad-large-skyscraper-300 */
/* ---------------------------------------------------- */
@media (min-width: 992px) {
    /* Desktop မှာပဲ ပေါ်စေချင်ရင် */
    .mq-ad-large-skyscraper-300 {
        width: 300px;
        height: 600px;
        display: block;
    }
}
@media (max-width: 991px) {
    /* Tablet နဲ့ Mobile မှာ လုံးဝ ဖျောက်ထားခြင်း */
    .mq-ad-large-skyscraper-300 {
        display: none;
    }
}


/* ---------------------------------------------------- */
/* 5. Mobile Banner (320x50) - mq-ad-mobile-banner-320 */
/* ---------------------------------------------------- */
.mq-ad-mobile-banner-320 {
    width: 100%; /* Mobile Container အနံ အပြည့်ယူမည် */
    height: 50px;
}
@media (min-width: 480px) {
    /* Tablet နဲ့ Desktop မှာ ပေါ်မလာစေချင်ရင် ဖျောက်ထားနိုင်သည် */
    .mq-ad-mobile-banner-320 {
        display: none;
    }
}