/**
 * ticket-steps.css — หน้ากลุ่มตั๋ว (/ticket-rebooking · /ticket-refund · /ticket-print)
 *
 * เว็บเดิมเขียน CSS ก้อนนี้ซ้ำ 6 ไฟล์ ต่างกันแค่ชื่อคลาสหัวหน้า
 * (.ticket-rebooking-page · .ticket-refund-page · .ticket-print-page) ค่าทุกตัวเท่ากันหมด
 * ที่นี่จึงเหลือคลาสเดียว .ticket-steps-page ใช้ร่วมทั้ง 3 หน้า ค่าเท่าของเดิมทุกบรรทัด
 */

.ticket-steps-page {
    padding: 85px 0 60px 0;
    background-color: #fff;

    .content {
        .title-page {
            text-align: start;
            margin-bottom: 40px;
            border-bottom: 1px solid #eee;

            h1 {
                font-size: 24px;
                font-weight: normal;
                margin-bottom: 10px;
            }

            p {
                font-size: 16px;
                color: #666;
                margin-bottom: 5px;
            }
        }

        .list-step {
            margin-bottom: 60px;

            .step-title {
                font-size: 20px;
                font-weight: 500;
                margin-bottom: 20px;
            }

            .step-description {
                font-size: 16px;
                color: #666;
                margin-bottom: 20px;
            }

            .step-list {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
                gap: 30px;

                .step-list-item {
                    margin-bottom: 30px;
                    display: flex;
                    flex-direction: column;
                    align-items: center;

                    .list-image {
                        margin-bottom: 15px;

                        img {
                            /* กันช่องว่างใต้ baseline ที่โผล่มาเพราะ doctype ใหม่
                               (เว็บเดิมเป็น XHTML = almost standards mode จึงไม่มี)
                               ดูกับดักข้อ 13 ใน docs/WORKLOG.md */
                            display: block;
                            max-width: 100%;
                            height: 300px;
                            border-radius: 10px;
                            object-fit: contain;
                            object-position: center;
                        }
                    }

                    .list-text {
                        text-align: center;
                        margin-bottom: 15px;

                        h3 {
                            font-size: 18px;
                            font-weight: 500;
                            margin-bottom: 10px;
                        }

                        p {
                            font-size: 16px;
                            color: #666;
                        }
                    }
                }
            }
        }
    }

    .cta {
        text-align: center;
        padding: 10px 0;

        p {
            font-size: 16px;
            color: #666;
            margin-top: 10px;

            a {
                color: #ff6500;
                text-decoration: none;

                &:hover {
                    text-decoration: underline;
                }
            }
        }
    }
}

@media (max-width: 768px) {
    .ticket-steps-page .content .list-step .step-list .step-list-item .list-image img {
        height: 100%;
    }
}