/* ==========================================================================
   KSI — responsive
   โหลดหลัง bootstrap เพื่อให้ override ได้ ใช้สีเขียว #198754 ของ KSI ตามเดิม
   breakpoint อิงกับ bootstrap 5: xl 1200 / lg 992 / md 768 / sm 576
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. ขนาดตัวอักษรแบบยืดหยุ่น
   ของเดิมเขียน font-size เป็น px ตายตัวใน style="" ซึ่งใหญ่เกินจอมือถือมาก
   (ตัวใหญ่สุด 96px บนจอกว้าง 375px) เปลี่ยนไปอ้าง var เหล่านี้แทน
   ค่า min เลือกให้พออ่านบนมือถือ ค่า max เท่าของเดิมเป๊ะเพื่อไม่ให้จอใหญ่เปลี่ยนหน้าตา
   -------------------------------------------------------------------------- */
:root {
    --fs-96: clamp(2.75rem, 10vw, 6rem);
    --fs-80: clamp(2.5rem, 8.5vw, 5rem);
    --fs-72: clamp(2rem, 7vw, 4.5rem);
    --fs-58: clamp(1.75rem, 5.5vw, 3.625rem);
    --fs-52: clamp(1.65rem, 5vw, 3.25rem);
    --fs-48: clamp(1.55rem, 4.6vw, 3rem);
    --fs-42: clamp(1.4rem, 4vw, 2.625rem);
    --fs-38: clamp(1.3rem, 3.6vw, 2.375rem);
    --fs-25: clamp(1.05rem, 2.2vw, 1.5625rem);
}

/* --------------------------------------------------------------------------
   2. hero
   ความสูงกับพื้นหลังย้ายไปอยู่ใน layout/hero-home.blade.php และ hero-about.blade.php
   เหลือไว้เฉพาะเส้นใต้หัวเรื่องที่หนาเกินไปบนจอเล็ก
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .ksi-h1 {
        border-bottom-width: 3px;
    }
}
/* --------------------------------------------------------------------------
   3.5 เมนูที่กางบนจอเล็ก
   ของเดิมกางออกมาลอยทับ hero แบบไม่มีพื้นหลัง ตัวหนังสือจมไปกับรูปจนอ่านไม่ออก
   -------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {

    .navbar-collapse.show,
    .navbar-collapse.collapsing {
        background: #fff;
        border-radius: 1rem;
        padding: 1rem 1.25rem;
        margin-top: .75rem;
        box-shadow: 0 12px 30px rgba(0, 0, 0, .18);
    }

    /* ของเดิมจัดชิดขวาด้วย pe-4 ซึ่งเหมาะกับตอนเรียงแนวนอน พอเรียงลงมาแล้วเยื้อง */
    .navbar-collapse.show .nav-item,
    .navbar-collapse.collapsing .nav-item {
        padding-right: 0 !important;
        padding-bottom: .5rem;
    }

    .navbar-collapse.show .navbar-nav,
    .navbar-collapse.collapsing .navbar-nav {
        margin-right: 0 !important;
    }
}

/* --------------------------------------------------------------------------
   4. แถบ "สั่งน้ำแข็งกับเรา" — รายชื่อสาขากับเบอร์โทร
   ของเดิมเป็น flex สองคอลัมน์ที่ไม่ยอมตัดบรรทัด ทำให้ตัวหนังสือถูกบีบจนอ่านยาก
   -------------------------------------------------------------------------- */
.ksi-branch-row {
    flex-wrap: wrap;
    gap: 1.25rem;
}

@media (max-width: 767.98px) {
    .ksi-branch-row {
        flex-direction: column;
    }

    .ksi-branch-row>span {
        width: 100%;
    }
}

/* --------------------------------------------------------------------------
   5. กล่องลอยมุมจอ
   ของเดิม width:45% เขียนไว้ใน style="" จึงต้องใช้ !important ทับ
   บนมือถือ 45% แคบจนข้อความในกล่องซ้อนกัน
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    #socialButtons {
        width: 92% !important;
        transform: translateY(-70px) !important;
    }

    #socialButtons .p-4 {
        padding: 1rem !important;
    }
}

/* --------------------------------------------------------------------------
   6. การ์ดสาขาในหน้าติดต่อเรา
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .ksi-branch-card iframe {
        height: 260px !important;
    }

    /* บนจอแคบให้เรียงแผนที่ก่อนเสมอ ไม่ต้องสลับซ้ายขวา */
    .ksi-branch-card>.row>[class*="order-"] {
        order: 0 !important;
    }

    .ksi-branch-card .ksi-branch-detail {
        padding-top: 1.5rem;
    }
}

/* --------------------------------------------------------------------------
   7. ปรับระยะห่างรวมบนจอเล็ก
   ของเดิมใช้ py-5 my-5 ซ้อนกันหลายชั้น บนมือถือกลายเป็นช่องว่างยาวมาก
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {

    .py-5.my-5 {
        margin-top: 1.5rem !important;
        margin-bottom: 1.5rem !important;
    }

    .p-5 {
        padding: 1.5rem !important;
    }

    .rounded-4,
    body .rounded-4 {
        border-radius: 1.25em !important;
    }

    .rounded-5 {
        border-radius: 1.5rem !important;
    }
}

/* --------------------------------------------------------------------------
   8. footer
   เมนูถูกจัดชิดขวาด้วย justify-content-end ซึ่งเหมาะกับตอนวางสองคอลัมน์
   พอตกลงมาเรียงเต็มความกว้างบนมือถือ การชิดขวาทำให้อ่านลำบาก
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    footer .text-right .d-flex.justify-content-end {
        justify-content: flex-start !important;
    }
}

/* --------------------------------------------------------------------------
   9. QR code ไลน์
   อยู่ใน col-lg-3 จึงกลายเป็นเต็มความกว้างจอบนมือถือ ใหญ่เกินจำเป็น
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .ksi-qr {
        display: block;
        width: 100%;
        max-width: 190px;
        margin: 1.5rem auto 0;
    }
}

/* --------------------------------------------------------------------------
   10. การ์ดบทความ
   รูปปกที่อัปโหลดมามีสัดส่วนไม่เท่ากัน ถ้าปล่อยตามไฟล์จริงการ์ดจะสูงไม่เท่ากัน
   -------------------------------------------------------------------------- */
.ksi-blog-thumb {
    aspect-ratio: 16 / 10;
    object-fit: cover;
    background: rgba(255, 255, 255, .12);
}

.ksi-blog-row+.ksi-blog-row {
    border-top: 1px solid rgba(255, 255, 255, .25);
}

/* ปุ่มลอยมุมขวาล่างเป็น position fixed จึงทับข้อความท้าย footer บนจอแคบ
   เว้นที่ด้านล่างให้พ้นปุ่ม */
@media (max-width: 767.98px) {
    footer {
        padding-bottom: 5.5rem;
    }
}

/* --------------------------------------------------------------------------
   11. เบ็ดเตล็ด
   -------------------------------------------------------------------------- */
/* กันภาพดันหน้าจนเลื่อนแนวนอนได้ */
img {
    max-width: 100%;
    height: auto;
}

/* ปุ่มและลิงก์ให้กดง่ายด้วยนิ้ว */
@media (max-width: 767.98px) {

    .btn,
    .a-btn-bottom {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
}