/* =========================================================
   responsive.css — Version 1.7.3
   ========================================================= */

/* --- Tablet & Mobile ( < 992px ) --- */
@media (max-width: 992px) {
    :root {
        /* Override ค่าจาก mainstyle.css ให้เหมาะกับมือถือ */
        --card-w: 70vw;
        --card-h: 380px;
        --nav-h: 60px;
        --section-top: 80px;

        /* ลด Gutter ให้เหลือระยะเท่ากับ Edge Safe (24px) ในมือถือ */
        --gutter: 24px;
    }

    /* จัด Title ให้อยู่ในกรอบ แต่ Stage หลักเต็มจอ */
    .wl-stage {
        padding-left: 0;
        padding-right: 0;
        display: block;
        /* เปลี่ยนจาก grid เพื่อให้จัดการง่ายขึ้น */
    }

    .wl-title {
        /* อ้างอิง var(--gutter) (24px) */
        padding-left: var(--gutter);
        padding-right: var(--gutter);
        margin-bottom: 30px;
        text-align: left;
    }

    .wl-title-h1 .t1 {
        font-size: 50px;
    }

    .wl-title-h1 .t2 {
        font-size: 60px;
    }

    /* --- Carousel Left Mode Logic --- */
    .wl-carousel-viewport {
        width: 100vw;
        max-width: 100vw;

        /* Padding ซ้ายขวาเท่ากับ var(--gutter) */
        padding-inline: var(--gutter);

        scroll-snap-type: x mandatory;

        /* [CORRECTED] ใช้ตัวแปร edge-safe ตามที่คุณต้องการ */
        padding-top: var(--edge-safe);
        padding-bottom: var(--edge-safe);
    }

    .wl-track {
        margin-inline: 0;
        padding-inline: 0;
        align-items: stretch; /* Cards equal height */
    }

    /* Reset transform for selected card on mobile to prevent scale issues */
    .wl-card.is-selected {
        transform: none !important;
        box-shadow: none !important;
    }

    .wl-card {
        scroll-snap-align: start;
        scroll-snap-stop: always;
        width: var(--card-w);
        flex-shrink: 0;
        height: auto; 
        min-height: 400px; /* Enforce consistent height matching the tallest content */
        max-height: 400px;
        display: flex;
        flex-direction: column;
    }

    .wl-card .card-image {
        display: block;
        width: 100%;
        height: 100%; /* Fill the allocated flex space */
        min-height: 200px;
        position: relative;
        overflow: hidden;
        flex: 1 1 auto;
        transform: translateZ(0); /* Trigger GPU to fix Safari rendering/clipping */
        border-radius: 0; /* Reset radius if affecting overflow */
    }

    .wl-card .card-image img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
    }

    .wl-card .card-content {
        flex: 0 0 auto; /* Content hugs text, does not grow */
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }

    /* --- Controls Centering --- */
    .wl-controls {
        width: 100%;

        /* อ้างอิงระยะห่างมาตรฐานจาก Mainstyle */
        margin-top: var(--edge-safe);

        justify-content: center;
        gap: 20px;
        padding-bottom: 40px;
    }

    /* ใช้สีและ Border จาก Mainstyle */
    .wl-btn {
        width: 50px;
        height: 50px;

        /* ดึงค่าสีพื้นหลังปุ่มจาก mainstyle.css */
        background: var(--btn-bg);

        /* ดึงค่าสีขอบปุ่มจาก mainstyle.css */
        border: 1px solid var(--btn-brd);

        backdrop-filter: blur(4px);
    }

    /* Decoration Adjustments */
    .wl-watermark {
        opacity: 0.75;
        bottom: 5%;
        right: auto;
        left: -5%;
        width: 80%; /* Limit width to ensure it fits nicely */
    }

    /* --- Gallery Fix (3 Columns) --- */
    /* ใช้ ID Selector (#) เพื่อให้มี Priority สูงสุด ชนะค่าเดิมใน modal.css */
    #wlModalGallery {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        /* แบ่ง 3 คอลัมน์เท่ากัน */
        gap: 8px !important;
        width: 100%;

        /* ล้างค่า Flex เดิม */
        flex-wrap: nowrap;
    }

    #wlModalGallery img {
        width: 100% !important;
        /* ยืดเต็มช่อง Grid */
        height: auto !important;

        /* บังคับสี่เหลี่ยมจัตุรัส */
        aspect-ratio: 1 / 1;

        /* ล้างค่าเดิมที่อาจทำให้ Layout เพี้ยน */
        min-width: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;

        object-fit: cover !important;
        border-radius: 8px;
    }
}

/* --- Small Mobile ( < 480px ) --- */
@media (max-width: 480px) {
    :root {
        --card-w: 70vw;
    }

    .wl-title-h1 .t1 {
        font-size: 42px;
    }

    .wl-title-h1 .t2 {
        font-size: 48px;
    }

    /* Modal adjustments */
    .wl-modal .modal-dialog {
        margin: 10px;
        width: auto;
    }

    .wl-modal-map {
        height: 200px !important;
    }
}