/* ==========================================================================
   Ragnarok Idol 2026 — announce page: NB site override
   ต้องโหลด "หลัง" announce.css เสมอ:
     <link rel="stylesheet" href="~/ROIdol2026/assets/css/announce.css" />
     <link rel="stylesheet" href="~/ROIdol2026/assets/css/announce-nb-fix.css" />

   ทำไมต้องมีไฟล์นี้
   -----------------
   announce.css เขียนบนสมมติฐานเดิมของ landing-responsive.css คือ .viewport
   เป็น canvas กว้าง 1920px ที่ถูก "จัดกลางแล้ว crop สองข้าง" ที่ 1400–1919px
   (left:50% + translateX(-50%)) จึงต้องชดเชยด้วย calc((1920px - 100vw) / 2)
   เพื่อดึงคอนเทนต์กลับเข้ามาในกรอบที่มองเห็นจริง

   landing-responsive.css บนไซต์ NB เปลี่ยนเป็นโมเดล fluid แล้ว —
   .viewport/.page/.hero/.mid/.sections ถูกตั้งเป็น width:100vw, left:0,
   transform:none — ไม่มีการ crop อีกต่อไป ค่าชดเชย calc(...) ที่ค้างอยู่
   จึงกลายเป็น offset เปล่า ๆ ที่ดันทั้ง section ไปทางขวา ~(1920px - 100vw)/2

   และ .roster ยังคง width:1920px แบบตายตัว ซึ่ง landing-responsive.css ของ NB
   ไม่ได้แปลงเป็น 100vw ให้ ทำให้จอที่กว้างกว่า 1920px คอนเทนต์เบี้ยวไปทางซ้าย

   ไฟล์นี้ล้างค่าชดเชยทั้งหมดทิ้งและทำให้ .roster ไหลตามความกว้างจริง
   ใช้ selector ตัวเดียวกับ announce.css (specificity เท่ากัน) จึงชนะด้วยลำดับ
   การโหลด — ไม่ต้องใช้ !important และไม่ต้องแก้ announce.css เลย
   ========================================================================== */

@media (min-width: 1400px) {

    /* .sections กว้าง 100vw แล้ว — ให้ .roster ไหลตามพ่อแทน 1920px ตายตัว
     (แทนที่ .roster { width: 1920px } ที่ announce.css บรรทัด ~106)
     .roster__inner ยังถูกคุมด้วย max-width: 1160px + margin-inline: auto
     เหมือนเดิม ระยะขอบ 40px จึงมีผลเฉพาะตอนจอแคบกว่า 1240px เท่านั้น */
    .roster {
        width: 100%;
        padding-left: 40px;
        padding-right: 40px;
    }

    /* ล้าง calc((1920px - 100vw) / 2 + …) ทั้งสามจุด กลับไปใช้ค่าฐานเดิม
     ที่อ้างอิงกับ .hero ซึ่งตอนนี้กว้างเท่าหน้าต่างจริงอยู่แล้ว */
    .ann-hero__content {
        left: 2%;
    }

    .announce-page .hero {
        height: clamp(460px, 43vw, 880px);
    }

    /* announce.css ตรึงไว้ที่ 1574px สำหรับ >= 1920px เพราะ canvas เดิมหยุดโต
     ที่ 1920 — ตอนนี้ .hero ยืดตามหน้าต่างแล้ว จึงกลับไปใช้สัดส่วน vw
     (width / 1.777 >= 43vw → ความกว้างห้ามต่ำกว่า ~77vw ภาพจะคลุมแถบไม่มิด) */
    .announce-page .hero__idol {
        left: 68%;
        width: max(980px, 82vw);
    }
}