/* ═══════════════════════════════════════════════════════════════════════════
   page-banner.css — แบนเนอร์หัวเพจ (ใช้คู่กับ page-banner.inc.php)

   ดีไซน์เดียวกับ .wrap-header ของหน้าตารางเดินรถ (timetable.php)
   ใช้ร่วมกันทุกหน้า ทุกภาษา — แก้สี/ความสูง/ขนาดตัวอักษรที่ไฟล์นี้ที่เดียว

   ภาพพื้นหลังไม่ได้อยู่ในไฟล์นี้ เพราะแต่ละหน้าเปลี่ยนภาพได้เอง
   page-banner.inc.php ใส่มาเป็น inline style จากตัวแปร $banner_image
═══════════════════════════════════════════════════════════════════════════ */

.page-banner {
    --banner-height: 280px;
    --banner-offset: 60px;
    /* ความสูง header แบบ fixed — แบนเนอร์ต้องเริ่มใต้ header
       ค่านี้ต้องตรงกับ .nav-busandvan ใน header.inc.php: 60px ปกติ,
       80px ช่วง 768–1000px, กลับเป็น 60px ที่ ≤767px */
    --banner-overlay: #ff650029;
    /* ฟิล์มส้มบางๆ ทับภาพ ให้ตัวหนังสือขาวอ่านออกทุกภาพ */
    --banner-white: #ffffff;

    position: relative;
    overflow: hidden;
    margin-top: var(--banner-offset);
    /* min-height ไม่ใช่ height — หน้ารายละเอียดใช้ชื่อบทความเป็นหัวข้อ ซึ่งยาวได้หลายบรรทัด
       ถ้าตรึงความสูงไว้ตัวหนังสือจะทะลุกรอบ */
    min-height: var(--banner-height);
    padding-block: 24px;
    display: flex;
    align-items: center;
    justify-content: center;

    .image-banner {
        position: absolute;
        inset: 0;
        background-position: bottom;
        background-size: cover;
        background-repeat: no-repeat;
    }

    .overlay-banner {
        position: absolute;
        inset: 0;
        /* z-index ต้องมี — ชั้นภาพ (.image-banner) ในโหมดภาพปกมี filter/transform
           ซึ่งสร้าง stacking context ของตัวเอง ถ้าไม่กำหนดลำดับ ฟิล์มอาจไปอยู่ใต้ภาพ */
        z-index: 1;
        background: var(--banner-overlay);
    }

    /* ── โหมดภาพปก — หน้ารายละเอียดข่าวสาร/โปรโมชั่นใช้ภาพปกของบทความเป็นพื้นหลัง
          ภาพปกคุมโทนไม่ได้ บางรูปสว่างจัด ตัวหนังสือขาวจะจมหายไป
          จึงเปลี่ยนฟิล์มทับภาพเป็น gradient เข้มจากบนลงล่าง แทนฟิล์มส้มบางๆ ── */
    &.banner-cover {

        .overlay-banner {
            /* ฟิล์มเข้มไล่จากบนลงล่าง แทนฟิล์มส้มบางๆ ของแบนเนอร์ปกติ
               เขียนทับที่ background ตรงๆ ไม่ผ่านตัวแปร --banner-overlay
               เพราะค่าเป็น gradient ไม่ใช่สีเดียว อ่านแล้วเข้าใจง่ายกว่า */
            background: linear-gradient(180deg, rgba(0, 0, 0, 0.38) 0%, rgba(0, 0, 0, 0.55) 45%, rgba(0, 0, 0, 0.70) 100%);
        }

        .image-banner {
            /* ภาพปกเป็นภาพเนื้อหา จุดสำคัญอยู่กลางภาพ ไม่ใช่ขอบล่างแบบภาพแบนเนอร์ */
            background-position: center;

            /* ภาพปกส่วนใหญ่เป็นโปสเตอร์ที่มีตัวหนังสือของตัวเองอยู่แล้ว
               ถ้าไม่เบลอ ตัวหนังสือในภาพจะตีกับชื่อบทความที่วางทับ อ่านยากทั้งคู่
               เบลอแล้วภาพปกเหลือหน้าที่เป็นพื้นหลังคุมโทน ชื่อบทความเด่นขึ้นมาชั้นเดียว
               scale เกิน 100% เพื่อกินขอบที่เบลอจนโปร่งออกไป */
            filter: blur(6px);
            transform: scale(1.08);
        }
    }

    .container-banner {
        position: relative;
        z-index: 2;
        width: 100%;
        text-align: center;
        padding: 0 24px;

        .title-banner {
            margin-bottom: 14px;

            h1 {
                font-size: 36px;
                font-weight: 800;
                color: var(--banner-white);
                margin: 0 auto 6px;
                max-width: 1000px;
                line-height: 1.3;
                letter-spacing: -0.3px;
                text-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
            }

            p {
                font-size: 15px;
                color: rgba(255, 255, 255, 0.78);
                margin: 0;
                max-width: 760px;
                margin-left: auto;
                margin-right: auto;
            }
        }

        .breadcrumb-banner ul {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
            gap: 4px;

            li a {
                color: rgba(255, 255, 255, 0.75);
                text-decoration: none;
                font-size: 13px;
                transition: color 0.15s;

                &:hover {
                    color: var(--banner-white);
                }
            }

            .separator span,
            .link-none span {
                color: rgba(255, 255, 255, 0.4);
                font-size: 13px;
            }

            /* รายการสุดท้าย (หน้าที่กำลังอยู่) หน้ารายละเอียดจะเป็นชื่อบทความซึ่งยาวมาก
               ตัดด้วย ellipsis ไม่ให้ breadcrumb ตกบรรทัดยาวเป็นพืด */
            .link-none span {
                display: inline-block;
                max-width: 420px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                vertical-align: bottom;
            }
        }
    }

    /* ── Responsive ── */
    @media (max-width: 1200px) {
        & {
            --banner-height: 260px;
        }
    }

    @media (max-width: 992px) {
        & {
            --banner-height: 240px;
        }

        .container-banner .title-banner h1 {
            font-size: 28px;
        }
    }

    @media (max-width: 768px) {
        & {
            --banner-height: 210px;
        }

        .container-banner {
            padding: 0 16px;

            .title-banner {
                h1 {
                    font-size: 22px;
                }

                p {
                    font-size: 13px;
                }
            }
        }
    }

    @media (max-width: 576px) {
        & {
            --banner-height: 185px;
        }

        .container-banner .breadcrumb-banner .link-none span {
            max-width: 200px;
        }

        .container-banner .title-banner {
            margin-bottom: 10px;

            h1 {
                font-size: 18px;
            }

            p {
                font-size: 12px;
            }
        }
    }

    /* ช่วงที่ header สูง 80px — วางไว้ท้ายสุดและไม่ได้เรียงตามลำดับ max-width
       เพราะต้องล้อมกรอบช่วงเดียวกับ media query ของ .nav-busandvan
       ถ้าวางก่อนบล็อก 768px ค่าจะถูกทับตอนจอกว้าง 768px พอดี */
    @media (min-width: 768px) and (max-width: 1000px) {
        & {
            --banner-offset: 80px;
        }
    }
}