/* =============================================================================
   layout.css — Non-critical CSS แยกออกจาก inline <style> ใน master.blade.php
   - Utility classes (thumb-120, aspect-ratio guards)
   - Mobile media queries (.img-overlay-70, .media list layout)
   - Ads slot
   - Mobile search button
   ============================================================================= */

/* Desktop thumbnail — ใช้แทน inline style="width:120px" */
.thumb-120{width:120px}

/* CLS prevention: reserve space สำหรับรูปเฉพาะ class — กัน Layout Shift */
.sz-bg-img{aspect-ratio:16/9;object-fit:cover;width:100%;height:auto}
.sz-thumbnails img{aspect-ratio:5/3;object-fit:cover}
.sc-card-img img,
.rc-mobile-img,
.relate-card-img,
.relate-featured-img,
.relate-most-img,
.tag-card-img{aspect-ratio:16/10;object-fit:cover;background:#f0f0f0}
/* Article cover image (detail page) — natural aspect ratio */
.news-details-layout1 img.img-fluid{aspect-ratio:auto;object-fit:contain;height:auto;width:100%}
.weather-icon{aspect-ratio:1/1}

/* News ticker area — กัน shift ตอน ticker รีไซส์ */
.news-ticker-bar{min-height:40px}
.ticker-feed-wrap{min-height:24px}

/* ==========================================
   MOBILE: รูปแรก = grid เต็มขอบ / รูป 2-4 = list (thumbnail + text)
   ========================================== */
@media (max-width:767px){
    /* 🖼️ Card ตัวแรก — รูปเต็มขอบ สัดส่วนจริง ไม่ crop */
    .img-overlay-70{
        display:block!important;
        position:static!important;
        width:auto!important;
        height:auto!important;
        min-height:0!important;
        max-height:none!important;
        aspect-ratio:auto!important;
        padding:0!important;
        padding-bottom:0!important;
        overflow:visible!important;
        background:transparent!important;
        line-height:0;
        border-radius:0!important;
        margin:0 -15px 12px!important;
    }
    .img-overlay-70 > a,
    .img-overlay-70 > a.d-block,
    .img-overlay-70 a{
        display:block!important;
        position:static!important;
        width:100%!important;
        height:auto!important;
        line-height:0;
        padding:0!important;
        margin:0!important;
    }
    .img-overlay-70 img,
    .img-overlay-70 > a > img,
    .img-overlay-70 > img{
        position:static!important;
        width:100%!important;
        max-width:100%!important;
        height:auto!important;
        max-height:none!important;
        min-height:0!important;
        aspect-ratio:auto!important;
        object-fit:initial!important;
        display:block!important;
        margin:0!important;
        padding:0!important;
        border-radius:0!important;
    }
    .img-overlay-70::before,
    .img-overlay-70::after{
        content:none!important;
        display:none!important;
    }
    /* 🔧 Lifestyle section — ยกเลิก bleed */
    .lifestyle-section .img-overlay-70{margin:0 0 12px!important}

    /* 📋 Card 2-4 (list) — ขยายรูปเป็น 42% ของ card */
    main div.media,
    section div.media,
    .lifestyle-section div.media,
    .col-md-12 div.media,
    .col-md-4 div.media,
    .col-lg-4 div.media{
        display:flex!important;
        align-items:center!important;
        gap:12px;
    }
    main div.media > a,
    section div.media > a,
    .lifestyle-section div.media > a,
    .col-md-12 div.media > a,
    .col-md-4 div.media > a,
    .col-lg-4 div.media > a{
        flex:0 0 42%!important;
        max-width:42%!important;
        display:block;
        margin:0!important;
    }
    main div.media a img,
    section div.media a img,
    .lifestyle-section div.media a img,
    .col-md-12 div.media a img,
    .col-md-4 div.media a img,
    .col-lg-4 div.media a img,
    div.media img.thumb-120,
    div.media img.img-fluid{
        width:100%!important;
        max-width:100%!important;
        min-width:100%!important;
        height:auto!important;
        aspect-ratio:auto!important;
        object-fit:initial!important;
    }
    main div.media .media-body,
    section div.media .media-body,
    .lifestyle-section div.media .media-body,
    .col-md-12 div.media .media-body,
    .col-md-4 div.media .media-body,
    .col-lg-4 div.media .media-body{
        flex:1 1 auto!important;
        min-width:0;
    }

    /* Sidebar "ข่าวเด่นประจำวัน" / ประเด็นร้อน / ne-sidebar — thumbnail 130px */
    .ne-sidebar div.media,
    .sidebar-box div.media{display:flex!important}
    .ne-sidebar div.media > a,
    .sidebar-box div.media > a{flex:0 0 auto!important;max-width:none!important}
    .ne-sidebar div.media a img,
    .sidebar-box div.media a img{width:130px!important;min-width:130px!important;max-width:130px!important}
}

/* ===== Global Ads Slot ===== */
.ads-slot{display:flex;justify-content:center;align-items:center;width:100%;overflow:hidden;text-align:center}
.ads-slot:empty{display:none}
.ads-slot a{display:block;line-height:0;max-width:100%}
.ads-slot img{max-width:100%;height:auto;display:block}
.ads-slot iframe,.ads-slot ins{max-width:100%}

/* 🔍 Mobile Search Button — มุมขวาบนของ .mean-bar */
@media only screen and (max-width:991px){
    .on-mobile-fixed{
        position:fixed!important;
        top:18px!important;
        right:10px!important;
        padding-right:0!important;
        z-index:9999!important;
    }
    .on-mobile-fixed.pr-5{padding-right:0!important}
    .on-mobile-fixed ul{
        margin:0!important;padding:0!important;list-style:none;
        display:flex;align-items:center;
    }
    .on-mobile-fixed ul li{list-style:none;margin:0;padding:0}
    .on-mobile-fixed .search-button{
        display:inline-flex;align-items:center;justify-content:center;
        width:28px;height:28px;color:#fff!important;text-decoration:none;
    }
    .on-mobile-fixed .search-button i{color:#fff!important;font-size:18px}

    /* 📌 Mean-bar sticky (ไม่ fixed ทับ content)
       ก่อนหน้านี้ rule นี้อยู่ใน homepage-sections.css → กระทบเฉพาะหน้าแรก
       ย้ายมาที่นี่เพื่อให้ใช้กับทุกหน้า (search button + date bar ไม่ถูกบัง)
       z-index 999 < .on-mobile-fixed (9999) → search button อยู่บน mean-bar */
    .mean-container .mean-bar{position:sticky!important;top:0;z-index:999}
    #wrapper{padding-top:0!important}
}