/*
 * Snera Core Values — style.css v1.1
 *
 * FIX: Toàn bộ selector được scope dưới .scv-section
 * Tránh xung đột với Flatsome theme và các plugin khác.
 * Prefix "scv-" (snera core values) dùng cho tất cả class.
 */

/* ================================================================
   ROOT SECTION
   FIX: đổi #snera-section → .scv-section
   FIX: height 100vh → 100% vì section nằm trong .snera-scroll-root
        đã có height cố định. Dùng 100% để khớp với chiều cao parent
        được set bởi homepage CSS (.core-values { height: 100vh })
   ================================================================ */
.scv-section {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    background: url('https://sneragroup.vn/wp-content/uploads/2026/03/background.png') center/cover no-repeat;
}

/* ================================================================
   BACKGROUND LAYER
   ================================================================ */
.scv-section .scv-bg {
    position: absolute;
    inset: 0;
    background: inherit;
    z-index: 1;
    will-change: transform, filter;
}

/* ================================================================
   BLOCKS WRAPPER
   ================================================================ */
.scv-section .scv-blocks-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 1080px;
    height: 500px;
    z-index: 3;
    overflow: visible;
}

/* ================================================================
   DIAMOND BLOCKS
   ================================================================ */
.scv-section .scv-diamond {
    width: calc(100% / 3);
    /* FIX stage-1: height cố định đảm bảo tâm 3 block luôn trùng nhau.
       Nếu để height:auto, ảnh 3 block load xong với kích thước khác nhau
       khiến chiều cao block khác nhau → tâm lệch nhau vài px. */
    height: 380px;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #0b2d26;
    will-change: transform, opacity;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.scv-section .scv-diamond .scv-img {
    width: 250px;
    height: auto;
    display: block;
}

.scv-section .scv-diamond .scv-text {
    margin-top: 15px;
}

.scv-section .scv-diamond .scv-title {
    font-family: 'MyFont', sans-serif;
    font-size: 36px;
    color: #152B1C;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    margin-bottom: 0;
}

.scv-section .scv-diamond .scv-desc {
    font-size: 18px;
    padding: 0 40px;
}

/* Ẩn text block-2 & block-3 ban đầu (GSAP sẽ animate vào) */
.scv-section .scv-block-2 .scv-text,
.scv-section .scv-block-3 .scv-text {
    opacity: 0;
    transform: translateY(0px);
}

/* Layer order */
.scv-section .scv-block-1 { z-index: 3; }
.scv-section .scv-block-2 { z-index: 2; }
.scv-section .scv-block-3 { z-index: 2; }

/* Ẩn block-2, block-3 ban đầu */
.scv-section .scv-block-2,
.scv-section .scv-block-3 {
    opacity: 0;
}

/* ================================================================
   GOLD RING
   FIX stage-2: ring được chuyển vào .scv-blocks-wrapper trong PHP.
   top:50% left:50% bây giờ tính từ tâm WRAPPER (= tâm ban đầu của
   các block), không phải tâm section — loại bỏ lệch khi section
   cao hơn/thấp hơn wrapper (height:500px).
   ================================================================ */
.scv-section .scv-blocks-wrapper .scv-gold-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 560px;
    height: 560px;
    margin: 0;
    padding: 0;
    border-radius: 50%;
    background: url('https://sneragroup.vn/wp-content/uploads/2026/03/gold_ring_image.png') center center no-repeat;
    background-size: contain;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.6);
    will-change: transform, opacity;
    z-index: 2;
    pointer-events: none;
}

.scv-section .scv-blocks-wrapper .scv-gold-ring img {
    display: none;
}

/* ================================================================
   CENTER LOGO (desktop animation only)
   FIX stage-2: cùng lý do — đưa vào wrapper để cùng coordinate
   ================================================================ */
.scv-section .scv-blocks-wrapper .scv-center-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    will-change: opacity;
    z-index: 4;
}

/* Mobile logo — ẩn trên desktop, chỉ hiện trong @media mobile */
.scv-section .scv-mobile-logo {
    display: none;
}

/* ================================================================
   MOBILE (≤768px)
   Layout tĩnh, không animation.
   Thứ tự từ trên xuống: Logo → Block1 → Block2 → Block3
   ================================================================ */
@media (max-width: 768px) {

    /* Section full height, flex column, scroll nội bộ nếu content dài */
    .scv-section {
        height: 100vh;
        height: 100dvh;
        padding: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
    }

    /* Background layer vẫn giữ */
    .scv-section .scv-bg {
        position: fixed; /* fixed tránh scroll background */
        will-change: auto;
    }

    /* Wrapper: flex column, full width, scroll nội dung */
    .scv-section .scv-blocks-wrapper {
        position: relative;
        top: auto; left: auto;
        transform: none;
        width: 100%;
        max-width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 24px;
        padding: 32px 20px;
        padding-top: max(32px, env(safe-area-inset-top));
        padding-bottom: max(32px, env(safe-area-inset-bottom));
        box-sizing: border-box;
        z-index: 3;
    }

    /* Logo mobile — hiện trên cùng */
    .scv-section .scv-mobile-logo {
        display: flex;
        justify-content: center;
        width: 100%;
        order: 0;
    }

    .scv-section .scv-mobile-logo img {
        max-width: min(160px, 50vw);
        height: auto;
        display: block;
    }

    /* Blocks: stack dọc, thứ tự theo order */
    .scv-section .scv-diamond {
        position: relative;
        top: auto; left: auto;
        transform: none;
        width: 100%;
        max-width: 100%;
        height: auto;
        min-height: 0;
        /* 2 cột: img trái, text phải */
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 16px;
        will-change: auto;
    }

    /* Cột 1: img */
    .scv-section .scv-diamond .scv-img {
        width: min(100px, 28vw);
        flex-shrink: 0;
    }

    /* Cột 2: text — chiếm phần còn lại */
    .scv-section .scv-diamond .scv-text {
        flex: 1;
        min-width: 0;
        margin-top: 0;
        text-align: left;
    }

    /* Thứ tự DOM sau khi sửa PHP: mobile-logo, block-1, block-2, block-3 */
    .scv-section .scv-block-1 { order: 1; z-index: auto; }
    .scv-section .scv-block-2 { order: 2; z-index: auto; }
    .scv-section .scv-block-3 { order: 3; z-index: auto; }

    /* Hiện tất cả, reset opacity mà GSAP/CSS desktop đã set */
    .scv-section .scv-block-1,
    .scv-section .scv-block-2,
    .scv-section .scv-block-3 {
        opacity: 1 !important;
    }

    .scv-section .scv-block-1 .scv-text,
    .scv-section .scv-block-2 .scv-text,
    .scv-section .scv-block-3 .scv-text {
        opacity: 1 !important;
        transform: none !important;
    }

    /* Typography mobile */
    .scv-section .scv-diamond .scv-title {
        font-size: 23px;
        margin-bottom: 4px;
    }

    .scv-section .scv-diamond .scv-desc {
        font-size: 14px;
        padding: 0;
    }

    /* Ẩn các element chỉ dùng cho desktop animation */
    .scv-section .scv-blocks-wrapper .scv-gold-ring,
    .scv-section .scv-blocks-wrapper .scv-center-logo,
    .scv-section .scv-bg {
        display: none;
    }
}