/* =====================================================
   บังคับความสูงการ์ด (ทั้งก้อน รวมข้อความ) ให้เท่ากันทุกมุมมอง
   — ข้อความแต่ละใบยาวไม่เท่ากัน: grid-auto-rows ทุกแถวสูงเท่าแถวสูงสุด
     + ส่วนรายละเอียด flex-grow ดันเต็มพื้นที่ที่เหลือของการ์ด
===================================================== */
#h8b3n6 .grid {
    grid-auto-rows: 1fr;
}
#h8b3n6 .grid > div {
    display: flex;
    flex-direction: column;
}
#h8b3n6 .detail-h8b3n6 {
    flex-grow: 1;
}

/* =====================================================
   ล็อกสัดส่วนการ์ด 2:1 ให้เท่ากันทุกใบ (CSS ตรง ๆ ไม่พึ่ง Tailwind runtime
   เพราะ aspect-[2/1] ไม่มีใน tailwind.compiled.css — ถ้า runtime โหลดช้า
   การ์ดจะเสียสัดส่วน/สูงไม่เท่ากันช่วงแรก)
===================================================== */
.media-h8b3n6 {
    aspect-ratio: 2 / 1;
}
.media-h8b3n6 img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
@media (min-width: 1024px) {
    .card-h8b3n6 {
        aspect-ratio: 2 / 1;
        /* ช่วง 1024–~1280px รายละเอียด (in-flow ในการ์ด) ยาวเกินสัดส่วน 2:1
           การ์ดที่ข้อความยาว (Develop) จึงสูงกว่าใบอื่น — ให้การ์ดยืดเต็มกล่อง
           ที่ grid-auto-rows: 1fr จัดให้เท่ากัน ทุกใบจะสูงเท่าใบที่สูงสุดแทน */
        flex: 1 0 auto;
    }
    .media-h8b3n6 {
        aspect-ratio: auto;
    }
}

/* =====================================================
   เดสก์ท็อป — ชี้การ์ดแล้วพื้นมืด + รายละเอียดขึ้น, ชื่อการ์ดหาย
===================================================== */
@media (min-width: 1024px) {
    .shade-h8b3n6,
    .detail-h8b3n6 {
        opacity: 0;
        transition: opacity 0.3s ease;
    }
    .name-h8b3n6 {
        transition: opacity 0.3s ease;
    }
    .card-h8b3n6:hover .shade-h8b3n6,
    .card-h8b3n6:hover .detail-h8b3n6 {
        opacity: 1;
    }
    .card-h8b3n6:hover .name-h8b3n6 {
        opacity: 0;
    }
}

/* จอสัมผัสที่ไม่มี hover (เช่น iPad แนวนอน) — เปิดรายละเอียดไว้เลย */
@media (min-width: 1024px) and (hover: none) {
    .shade-h8b3n6,
    .detail-h8b3n6 {
        opacity: 1;
    }
    .name-h8b3n6 {
        opacity: 0;
    }
}