/* ==========================================
   CSS พื้นฐานสำหรับเว็บไซต์โรงเรียนดาวรุ่งวิทยา
   ========================================== */

/* การตั้งค่าเริ่มต้นสำหรับ Body */
body {
    font-family: 'Sarabun', sans-serif;
    background-color: #f8fafc;
    overflow-x: hidden;
}

/* ซ่อน Vue Template จนกว่า Component จะโหลดเสร็จสมบูรณ์ป้องกันไฟกะพริบ */
[v-cloak] { 
    display: none !important; 
}

/* ==========================================
   การจัดรูปแบบสำหรับเนื้อหาบทความ (Prose)
   ========================================== */
.prose { 
    text-align: justify; 
    text-justify: inter-character; 
    line-height: 1.8; 
    color: #374151; 
}

.prose p, .prose h1, .prose h2, .prose h3 { 
    margin-top: 1.2em; 
    margin-bottom: 1.2em; 
}

.prose > div:not(.media-container) { 
    margin-top: 1.2em; 
    margin-bottom: 1.2em; 
}

.prose ul, .prose ol { 
    margin-top: 1em; 
    margin-bottom: 1em; 
    padding-left: 1.5em; 
}

.prose li { 
    margin-bottom: 0.5em; 
}

.prose a { 
    color: #2563eb; 
    text-decoration: underline; 
    font-weight: 600; 
}

.prose strong, .prose b { 
    font-weight: 700; 
    color: #111827; 
}

/* ==========================================
   การจัดการวิดีโอ (YouTube) ให้เป็น Responsive
   ========================================== */
.video-wrapper { 
    position: relative; 
    padding-bottom: 56.25%; /* อัตราส่วน 16:9 */
    height: 0; 
    overflow: hidden; 
    border-radius: 12px; 
    background: #000; 
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); 
}

.video-wrapper iframe { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
}

.video-overlay { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    z-index: 10; 
    display: none; 
}

/* ==========================================
   สถานะสำหรับระบบแอดมิน (โหมดแก้ไขเนื้อหา)
   ========================================== */
.is-editing-container .media-container { 
    cursor: pointer !important; 
    position: relative; 
}

.is-editing-container .media-container:hover { 
    outline: 3px solid #3b82f6; 
    outline-offset: 4px; 
}

.is-editing-container .video-overlay { 
    display: block !important; 
    cursor: pointer; 
}

.is-editing-container iframe { 
    pointer-events: none !important; 
}

.editor-content:focus { 
    background-color: #fff; 
    outline: none; 
}

/* ==========================================
   สถานะสำหรับผู้ใช้งานทั่วไป (โหมดอ่านเนื้อหา)
   ========================================== */
.content-readonly .video-overlay { 
    display: none !important; 
    pointer-events: none !important; 
}

.content-readonly iframe { 
    pointer-events: auto !important; 
}

.content-readonly img { 
    cursor: zoom-in !important; 
    transition: opacity 0.2s ease; 
    border-radius: 8px; 
}

.content-readonly img:hover { 
    opacity: 0.9; 
}

/* แก้ไขระยะห่างรูปภาพ/วิดีโอเพื่อความสวยงาม */
.prose .media-container img, 
.prose .media-container .video-wrapper { 
    margin-top: 0 !important; 
    margin-bottom: 0 !important; 
}

.prose p + .media-container { 
    margin-top: 0.75em; 
}

.prose .media-container + p { 
    margin-top: 0.75em; 
}