/* =====================================================
   1. RESET CONTAINER FOR FULL MOBILE VIEW
===================================================== */

/* ล็อคไม่ให้หน้าเว็บเด้งหรือเลื่อนออกข้างบนมือถือ */
html, body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important; /* ปิดการเลื่อนแนวนอนเด็ดขาด */
    position: relative;
    touch-action: pan-y; /* อนุญาตให้ใช้นิ้วปัดได้แค่ขึ้น-ลงเท่านั้น ป้องกันการปัดเฉียงแล้วหน้าเว็บเบี้ยว */
}

/* ล็อคป้องกันการดึงหน้าเว็บเด้ง (Overscroll / Rubber-banding) ใน iOS Safari */
body {
    overscroll-behavior-x: none !important;
}

/* =====================================================
   REMOVE TOP GAP UNDER HEADER
===================================================== */
/* ดึงส่วนเนื้อหาหลักขึ้นชิดใต้ Navbar */
body .site-content,
body .wp-site-blocks,
body main,
body .entry-content,
body .wp-block-post-content {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* ลบระยะเว้นขอบบนของ Section */
.rm-property-story {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* กรณี Header ของธีมเป็นแบบ Floating หรือ Fixed */
header.wp-block-template-part,
.site-header {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

body .wp-site-blocks,
body main,
body .wp-block-post-content,
.rm-property-story {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.rm-property-story *,
.rm-property-story *::before,
.rm-property-story *::after {
    box-sizing: border-box !important;
}

/* =====================================================
   2. MAIN SECTION GRID
===================================================== */
.rm-property-story {
    --rm-dark: #111310;
    --rm-white: #f5f1e9;
    --rm-muted: #aaa89f;
    --rm-gold: #b48a59;
    --rm-line: rgba(255, 255, 255, 0.18);

    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 42%) minmax(0, 58%);
    width: 100%;
    min-height: 100vh;
    margin: 0 auto !important;
    background: var(--rm-dark);
    overflow: hidden;
}

/* LEFT CONTENT */
.rm-property-story__content {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    background: linear-gradient(145deg, #10120f 0%, #171915 100%);
    color: var(--rm-white);
}

.rm-property-story__inner {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    padding: clamp(40px, 4vw, 80px) clamp(20px, 4vw, 60px);
}

/* RIGHT VISUAL CONTAINER */
.rm-property-visual {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 550px;
    overflow: hidden;
    background: #171915;
    color: #fff;
}

.rm-property-visual__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.rm-property-visual__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.rm-property-visual__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(10, 10, 8, 0.1) 0%,
        rgba(19, 14, 11, 0.4) 50%,
        rgba(18, 12, 9, 0.9) 100%
    );
    pointer-events: none;
}

.rm-property-visual__content {
    position: absolute;
    z-index: 2;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: clamp(20px, 4vw, 50px);
    width: 100%;
}

/* VISUAL INTRO LAYOUT */
.rm-property-visual__intro {
    display: grid;
    grid-template-columns: 50px minmax(0, 1fr) minmax(160px, 240px);
    align-items: end;
    gap: 16px;
    margin-bottom: 24px;
    width: 100%;
}

.rm-property-visual__number {
    color: rgba(255, 255, 255, 0.6);
    font-family: Georgia, serif;
    font-size: 16px;
}

.rm-property-visual__small {
    margin: 0;
    font-size: clamp(14px, 1.4vw, 24px);
    font-weight: 300;
}

.rm-property-visual__intro h3 {
    grid-column: 1 / 3;
    margin: 6px 0 0;
    font-size: clamp(36px, 5vw, 100px);
    font-weight: 300;
    line-height: 0.9;
    letter-spacing: -0.05em;
    word-break: break-word;
}

.rm-property-visual__description {
    grid-column: 3;
    grid-row: 1 / 3;
    margin: 0;
    color: rgba(255, 255, 255, 0.85);
    font-size: 13px;
    line-height: 1.5;
}

/* VISUAL TABS & FOOTER */
.rm-property-visual__tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    max-width: 540px;
    margin: 0 0 30px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(4px);
}

.rm-property-visual__tab {
    padding: 10px 4px;
    border: 0;
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    background: transparent;
    color: rgba(255, 255, 255, 0.7);
    font-size: 10px;
    text-align: center;
    cursor: pointer;
}

.rm-property-visual__tab:last-child {
    border-right: 0;
}

.rm-property-visual__tab.is-active {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}

.rm-property-visual__footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    padding-top: 16px;
    width: 100%;
}

.rm-property-visual__footer span {
    color: rgba(255, 255, 255, 0.6);
    font-size: 8px;
    letter-spacing: 0.14em;
}

.rm-property-visual__footer strong {
    font-family: Georgia, serif;
    font-size: 20px;
    letter-spacing: 0.12em;
}

/* Other elements styling */
.rm-property-story__eyebrow { margin: 0 0 18px; color: var(--rm-gold); font-size: 10px; font-weight: 600; letter-spacing: 0.26em; }
.rm-property-story__line { display: block; width: 70px; height: 1px; margin-bottom: 34px; background: var(--rm-gold); }
.rm-property-story__title { margin: 0 0 30px; font-family: Georgia, serif; font-size: clamp(32px, 3.5vw, 64px); font-weight: 400; line-height: 1.1; }
.rm-property-story__title em { display: block; margin-top: 7px; color: var(--rm-gold); font-style: italic; }
.rm-property-story__intro { max-width: 500px; margin: 0 0 35px; color: #cbc9c1; font-size: 14px; line-height: 1.75; }
.rm-property-story__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 0 42px; border-top: 1px solid var(--rm-line); border-left: 1px solid var(--rm-line); }
.rm-property-story__fact { padding: 16px; border-right: 1px solid var(--rm-line); border-bottom: 1px solid var(--rm-line); }
.rm-property-story__fact span { display: block; margin-bottom: 6px; color: var(--rm-muted); font-size: 8px; font-weight: 600; letter-spacing: 0.18em; }
.rm-property-story__fact strong { display: block; color: var(--rm-white); font-family: Georgia, serif; font-size: 16px; }
.rm-property-story__label { margin: 0 0 16px; color: var(--rm-gold); font-size: 9px; font-weight: 600; letter-spacing: 0.24em; }
.rm-property-story__detail { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--rm-line); }
.rm-property-story__detail:first-of-type { border-top: 1px solid var(--rm-line); }
.rm-property-story__icon { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(180, 138, 89, 0.75); border-radius: 50%; }
.rm-property-story__icon span { color: var(--rm-gold); font-family: Georgia, serif; font-size: 12px; }
.rm-property-story__detail h3 { margin: 0 0 4px; font-size: 13px; font-weight: 500; color: var(--rm-white); }
.rm-property-story__detail p { margin: 0; color: var(--rm-muted); font-size: 12px; line-height: 1.5; }
.rm-property-story__buyer-note { margin-top: 34px; padding: 20px 22px; border: 1px solid rgba(180, 138, 89, 0.5); background: rgba(180, 138, 89, 0.03); }
.rm-property-story__note-label { display: block; margin-bottom: 8px; color: var(--rm-gold); font-size: 8px; font-weight: 600; letter-spacing: 0.22em; }
.rm-property-story__buyer-note p { margin: 0; color: #d0cec7; font-family: Georgia, serif; font-size: 12px; line-height: 1.6; }

/* =====================================================
   3. RESPONSIVE FIX FOR MOBILE (จัด Layout ในมือถือใหม่)
===================================================== */
@media (max-width: 1024px) {
    .rm-property-story {
        grid-template-columns: 1fr !important;
        height: auto !important;
        min-height: auto !important;
    }

    .rm-property-visual {
        order: -1;
        height: 520px !important; /* คุมความสูงรูปบนมือถือ */
        min-height: 520px !important;
    }

    .rm-property-visual__content {
        padding: 20px !important;
    }

    /* ปรับ Layout หัวข้อส่วนรูปภาพบนมือถือใหม่ ไม่ให้ตกขอบ */
    .rm-property-visual__intro {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 6px !important;
        margin-bottom: 16px !important;
    }

    .rm-property-visual__intro h3 {
        font-size: 32px !important;
        line-height: 1 !important;
        margin: 4px 0 !important;
    }

    .rm-property-visual__description {
        font-size: 12px !important;
        line-height: 1.4 !important;
        opacity: 0.9;
    }

    .rm-property-visual__tabs {
        margin-bottom: 16px !important;
    }

    .rm-property-visual__tab {
        font-size: 9px !important;
        padding: 8px 2px !important;
    }

    .rm-property-story__inner {
        padding: 30px 20px !important;
    }
}


/* =====================================================
   OVERRIDE WORDPRESS WRAPPER FOR MOBILE
===================================================== */
@media (max-width: 1024px) {
    /* ล้างค่า Container ชั้นนอกของ WordPress ทั้งหมด */
    .wp-block-post-content,
    .wp-site-blocks,
    .entry-content,
    [class*="wp-block"] {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* จัดระเบียบตัว Section ให้ชิดขอบพอดี */
    .rm-property-story {
        width: 100% !important;
        max-width: 100vw !important;
        margin: 0 auto !important;
        left: 0 !important;
        right: 0 !important;
        box-sizing: border-box !important;
    }

    /* จัดเนื้อหาด้านในให้มีระยะขอบสวยงาม ไม่ชิดขอบเกินไป */
    .rm-property-story__content {
        width: 100% !important;
        padding: 0 !important;
    }

    .rm-property-story__inner {
        width: 100% !important;
        max-width: 100% !important;
        padding: 40px 24px !important; /* เว้นขอบซ้าย-ขวา 24px เท่ากันสองข้าง */
        box-sizing: border-box !important;
    }
}


/* =====================================================
   FORCE SHIFT CONTENT DIRECTLY UNDER HEADER
===================================================== */
/* 1. ดันตัว Section ขึ้นไปชิดขอบล่างของ Header */
.rm-property-story {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* 2. ล้างระยะเว้นขอบของ Container หลักและ Wrapper ทุกชั้น */
body .site-main,
body main#main,
body .entry-content,
body .wp-block-post-content,
body .is-layout-constrained > :first-child,
body .is-layout-flow > :first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* 3. ลบระยะเว้นด้านล่างของ Header (ถ้ามี) */
header,
.site-header,
.wp-block-template-part {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}