/* =========================================
   Global Settings & Typography
   (ตั้งค่าพื้นฐานของทั้งเว็บไซต์)
   ========================================= */

/* ใช้ฟอนต์ Prompt และตั้งค่าการเลื่อนหน้าจอแบบนุ่มนวล */
html {
    scroll-behavior: smooth;
    font-size: 16px; /* กำหนดขนาดมาตรฐาน */
    -webkit-text-size-adjust: 100%; /* ป้องกันมือถือปรับขนาดตัวหนังสือเอง */
}

body {
    font-family: 'Prompt', sans-serif;
    color: #333;
    line-height: 1.6; /* [มือถือ] เพิ่มระยะห่างบรรทัดให้อ่านง่าย ไม่เบียดกัน */
    -webkit-font-smoothing: antialiased; /* ทำให้ตัวหนังสือคมชัดบนหน้าจอละเอียดสูง */
}

/* =========================================
   Mobile Optimization Logic
   (ส่วนปรับแต่งพิเศษสำหรับมือถือ)
   ========================================= */

@media (max-width: 768px) {
    html {
        /* [มือถือ] ขยายขนาดตัวอักษรพื้นฐานขึ้นเล็กน้อยหากจำเป็น */
        font-size: 16px; 
    }
    
    p {
        /* [มือถือ] บังคับให้เนื้อหาอ่านง่าย ไม่เล็กกว่า 16px */
        font-size: 1rem; 
        line-height: 1.7; /* เพิ่มช่องว่างระหว่างบรรทัดให้อ่านสบายตา */
    }
    
    /* [มือถือ] ปรับระยะห่างของ Container ไม่ให้ชิดขอบจอเกินไป */
    .container, .max-w-7xl {
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important;
    }
}

/* =========================================
   Hero Section 
   (ส่วนวิดีโอและหัวข้อด้านบนสุด)
   ========================================= */
.hero {
    position: relative;
    height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: #fff;
    text-align: center;
}

.hero-video-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.hero-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4); /* เพิ่มความเข้มเงาเล็กน้อยเพื่อให้ตัวหนังสือเด่นชัด */
    z-index: 0;
}

.hero-content {
    position: relative;
    z-index: 1;
    max-width: 800px;
    padding: 0 1rem;
}

.hero-content h1 {
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: #fff;
    line-height: 1.2;
    text-shadow: 0 4px 20px rgba(0,0,0,0.5); /* เพิ่มเงาฟุ้งให้ตัวหนังสือลอยเด่นออกมา */
}

.hero-content p {
    font-size: 1.5rem;
    margin-bottom: 2rem;
    font-weight: 300;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

/* --- Hero Section Mobile Adjustments (ปรับแต่ง Hero ในมือถือ) --- */
@media (max-width: 768px) {
    .hero-content h1 {
        font-size: 2.2rem; /* [มือถือ] ลดขนาดหัวข้อไม่ให้ล้นจอ */
        line-height: 1.3;
        margin-bottom: 0.8rem;
    }
    
    .hero-content p {
        font-size: 1.1rem; /* [มือถือ] ปรับขนาดคำบรรยายให้อ่านง่าย */
        line-height: 1.6;
        padding: 0 1rem; /* บีบข้อความเข้ามาหน่อยไม่ให้ตกขอบ */
    }
}

/* =========================================
   Projects Section 
   (ส่วนแสดงโครงการ)
   ========================================= */
.projects-section {
    padding: 5rem 0;
    background: #f9f9f9;
}

.project-highlight {
    display: flex;
    align-items: center;
    gap: 3rem;
    flex-wrap: wrap; 
}

.project-content {
    flex: 1;
    min-width: 300px;
}

.project-content h2 {
    font-size: 2.5rem;
    color: #1a3c34;
    margin-bottom: 1.5rem;
    line-height: 1.3;
}

.project-content .lead {
    font-size: 1.2rem;
    line-height: 1.8;
    color: #555;
    margin-bottom: 2rem;
}

.project-features {
    margin-bottom: 2.5rem;
    border: none;
}

.feature {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    font-size: 1.1rem;
    color: #333;
}

.feature i {
    color: #2e7d32;
    font-size: 1.3rem;
    min-width: 24px;
}

.project-visual {
    flex: 1;
    min-width: 300px;
}

.featured-media {
    width: 100%;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    display: block;
    object-fit: cover;
}

/* --- Projects Section Mobile Adjustments (ปรับแต่งโครงการในมือถือ) --- */
@media (max-width: 991px) {
    .project-highlight {
        flex-direction: column-reverse; /* [มือถือ] เอารูปขึ้นก่อนเนื้อหา หรือสลับตามความชอบ */
        gap: 2rem;
    }
    
    .project-content, .project-visual {
        width: 100%;
        min-width: auto;
    }
}

@media (max-width: 768px) {
    .projects-section {
        padding: 3rem 0; /* [มือถือ] ลดระยะห่างบนล่าง */
    }

    .project-content h2 {
        font-size: 1.8rem; /* [มือถือ] ปรับหัวข้อให้พอดี */
    }
    
    .project-content .lead {
        font-size: 1rem;
        text-align: left;
    }
}

/* =========================================
   Buttons & Interactions
   (ปุ่มกดและการตอบสนอง)
   ========================================= */
.cta-button, .secondary-button {
    display: inline-block;
    padding: 1rem 2.5rem;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    font-size: 1.1rem;
    cursor: pointer;
}

.cta-button {
    background: #2e7d32;
    color: #fff;
}

.secondary-button {
    background: #1a3c34;
    color: #fff;
}

.cta-button:hover, .secondary-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    background: #29792b;
}

/* --- Button Mobile Adjustments (ปรับปุ่มในมือถือ) --- */
@media (max-width: 768px) {
    .cta-button, .secondary-button {
        width: 100%; /* [มือถือ] ขยายปุ่มเต็มจอให้กดง่ายด้วยนิ้วโป้ง */
        text-align: center;
        margin-bottom: 10px;
        padding: 1.2rem; /* เพิ่มพื้นที่กด */
    }
}