/* =========================================================
   Annjudy Modern UI — Responsive Layout Overrides
   โหลดเป็นไฟล์สุดท้ายใน header.php จึงทับค่าจาก Bootstrap/main.css ได้
   เป้าหมาย: ให้ container มีระยะขอบซ้าย-ขวาแบบสัดส่วนตามขนาดหน้าจอ
   ========================================================= */

/* ---------- 1) Fluid container ----------
   - padding ซ้าย/ขวา ขยายตาม viewport (clamp: ต่ำสุด 16px, สัดส่วน 4vw, สูงสุด 64px)
   - max-width ขยายตาม breakpoint แต่ไม่เกิน 1440px เพื่อไม่ให้คอนเทนต์ยืดเต็มจอใหญ่
*/
.container,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    padding-right: clamp(16px, 4vw, 64px);
    padding-left:  clamp(16px, 4vw, 64px);
}

/* ---------- 2) Responsive max-width ที่นุ่มนวลขึ้น ----------
   ค่าของ Bootstrap เดิม: 540 / 720 / 960 / 1140 / 1320
   ปรับให้กว้างขึ้นเล็กน้อยบนจอใหญ่ และเปิด max-width 1440px ที่ ≥1600px
*/
@media (min-width: 576px) {
    .container, .container-sm { max-width: 540px; }
}
@media (min-width: 768px) {
    .container, .container-sm, .container-md { max-width: 720px; }
}
@media (min-width: 992px) {
    .container, .container-sm, .container-md, .container-lg { max-width: 960px; }
}
@media (min-width: 1200px) {
    .container, .container-sm, .container-md, .container-lg, .container-xl { max-width: 1140px; }
}
@media (min-width: 1400px) {
    .container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl { max-width: 1320px; }
}
@media (min-width: 1600px) {
    .container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl { max-width: 1440px; }
}

/* ---------- 3) Section padding แนวตั้งให้ scale ตามจอ ----------
   ของเดิม section-padding มักเป็น 120px คงที่ ทำให้บนมือถือเว้นเยอะเกินไป
*/
.section-padding {
    padding-top:    clamp(60px, 8vw, 120px);
    padding-bottom: clamp(60px, 8vw, 120px);
}
.section-padding-top    { padding-top:    clamp(60px, 8vw, 120px); }
.section-padding-bottom { padding-bottom: clamp(60px, 8vw, 120px); }

/* ---------- 4) Hero ให้ใช้ระยะขอบสัดส่วนเช่นกัน ---------- */
.hero-section .hero-container,
.hero-section > .container {
    padding-right: clamp(16px, 4vw, 80px);
    padding-left:  clamp(16px, 4vw, 80px);
}

/* ---------- 5) Optional: container-fluid แบบมีขอบสัดส่วน ----------
   ใช้ใน element ที่อยากเต็มจอแต่ยังเว้นขอบ (เช่น banner เต็มกว้าง)
*/
.container-fluid,
.container-edge {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    padding-right: clamp(16px, 5vw, 96px);
    padding-left:  clamp(16px, 5vw, 96px);
}

/* ---------- 6) ป้องกัน horizontal scroll จาก shape ตกแต่ง ---------- */
body { overflow-x: hidden; }

/* ---------- 7) Page Heading / Breadcrumb — ให้สีเข้ากับหน้าแรก ----------
   ของเดิม: `assets/img/breadcrumb-bg.png` เป็นพื้นน้ำเงินเข้ม + ลายตาราง
   ปรับให้เป็นพื้นพาสเทลแบบเดียวกับ hero ของหน้าแรก (ครีม → ฟ้าอ่อน → ชมพูอ่อน)
*/
.breadcrumb-wrapper.bg-cover,
.breadcrumb-wrapper {
    background-image:
        linear-gradient(135deg,
            rgba(255, 244, 200, .85) 0%,
            rgba(207, 240, 255, .80) 50%,
            rgba(255, 219, 235, .85) 100%),
        linear-gradient(180deg, #fbfde6 0%, #f0f9d8 100%) !important;
    background-color: #f7fae2 !important;
    background-size: cover, cover !important;
    background-repeat: no-repeat, no-repeat !important;
    background-position: center, center !important;
    position: relative;
}

/* เผื่อมี overlay เดิมที่เป็นสีน้ำเงินทึบ */
.breadcrumb-wrapper::before,
.breadcrumb-wrapper::after { background: transparent !important; }

/* ลบแถบคลื่นน้ำเงินด้านล่าง breadcrumb (ของ template เดิม) */
.breadcrumb-wrapper .bottom-shape,
.breadcrumb-wrapper .bottom-shape img { display: none !important; }

/* ตัวอักษรหัวเรื่องหน้า — ให้เป็นสีเข้มอ่านง่ายบนพื้นสว่าง */
.page-heading h1,
.breadcrumb-wrapper h1,
.breadcrumb-wrapper .char-animation,
.breadcrumb-wrapper .char-animation *,
.breadcrumb-wrapper h1 * {
    color: #2a1a4a !important;
    text-shadow: 0 2px 8px rgba(255, 255, 255, .5);
}

/* fallback: ถ้า GSAP char-animation ไม่ได้รัน (เพราะ page-transition load ไว้ก่อน)
   บังคับให้ตัวอักษรแต่ละตัวมองเห็นได้ ไม่ค้างที่ opacity:0 */
.breadcrumb-wrapper .char-animation > div > div {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}
.breadcrumb-items,
.breadcrumb-wrapper .breadcrumb-items,
.breadcrumb-wrapper .breadcrumb-items li,
.breadcrumb-wrapper .breadcrumb-items a,
.breadcrumb-wrapper .breadcrumb-items span {
    color: #5a4a8a !important;
}
.breadcrumb-wrapper .breadcrumb-items a:hover { color: #ff8a00 !important; }