/* ============================================================================
   cms-sections.css — style section dùng chung cho MỌI theme.

   CSS THUẦN viết tay, KHÔNG qua Tailwind → không bị purge, không cần
   `npm run theme:*` khi sửa file này. Nạp SAU theme('css/app.css') trong layout
   của từng theme để thắng utility Tailwind ở cùng specificity.

   Mọi giá trị đến từ CSS variable do App\Support\SectionStyle::cssVars() sinh ra
   và đã được sanitize (enum whitelist / clamp số / regex hex). Class thì do
   ::classes() sinh, toàn bộ là literal `cms-*` khai ở dưới đây.

   Breakpoint khớp Tailwind: 640px (sm) / 768px (md) / 1024px (lg).
   ========================================================================== */

.cms-section {
    position: relative;
    background-color: var(--cms-bg, transparent);
    color: var(--cms-text, inherit);
    margin-top: var(--cms-mt, 0);
    margin-bottom: var(--cms-mb, 0);
    border-radius: var(--cms-radius, 0);
    padding-top: var(--cms-py, 0);
    padding-bottom: var(--cms-py, 0);
}

/* Chỉ cắt nội dung khi thật sự có bo góc — tránh cắt nhầm dropdown/tooltip. */
.cms-clip { overflow: hidden; }

.cms-has-bg-image {
    background-image: var(--cms-bg-image);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* ---------- 1. Bố cục & độ rộng ---------- */

/* cms-w-full: không làm gì (tràn viền, mặc định). */
.cms-w-boxed {
    max-width: var(--cms-max-w, 80rem);
    margin-left: auto;
    margin-right: auto;
}

/* Thay cho "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-full flex items-center relative z-10". */
.cms-container {
    position: relative;
    z-index: 10;
    display: flex;
    width: 100%;
    height: 100%;
    max-width: var(--cms-max-w, 80rem);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--cms-px, 1rem);
    padding-right: var(--cms-px, 1rem);
}

@media (min-width: 640px) {
    .cms-container {
        padding-left: var(--cms-px, 1.5rem);
        padding-right: var(--cms-px, 1.5rem);
    }
}

@media (min-width: 1024px) {
    .cms-container {
        padding-left: var(--cms-px, 2rem);
        padding-right: var(--cms-px, 2rem);
    }
}

/* Thay cho "max-w-2xl". */
.cms-inner {
    width: 100%;
    max-width: var(--cms-inner-w, 42rem);
}

.cms-align-left .cms-inner   { margin-right: auto; text-align: left; }
.cms-align-center .cms-inner { margin-left: auto; margin-right: auto; text-align: center; }
.cms-align-right .cms-inner  { margin-left: auto; text-align: right; }

.cms-vpos-top .cms-container    { align-items: flex-start; }
.cms-vpos-middle .cms-container { align-items: center; }
.cms-vpos-bottom .cms-container { align-items: flex-end; }

/* ---------- 4. Chiều cao ----------
   Responsive đi qua media query đọc biến, KHÔNG qua class động.
   .hero-slide là position:absolute;height:100% nên section BẮT BUỘC có height
   tường minh — đây là lý do mặc định là cms-h-fixed. */

.cms-h-fixed { height: var(--cms-h-sm, 520px); }

@media (min-width: 768px) {
    .cms-h-fixed { height: var(--cms-h-md, 580px); }
}

@media (min-width: 1024px) {
    .cms-h-fixed { height: var(--cms-h-lg, 650px); }
}

.cms-h-viewport { height: var(--cms-vh, 80vh); }
.cms-h-ratio    { aspect-ratio: var(--cms-ratio, 16 / 9); }
.cms-h-auto     { height: auto; }

/* ---------- 3. Viền ---------- */

.cms-border-all {
    border: var(--cms-bw, 0) var(--cms-bs, solid) var(--cms-bc, #e2e8f0);
}

.cms-border-top {
    border-top: var(--cms-bw, 0) var(--cms-bs, solid) var(--cms-bc, #e2e8f0);
}

.cms-border-bottom {
    border-bottom: var(--cms-bw, 0) var(--cms-bs, solid) var(--cms-bc, #e2e8f0);
}

.cms-border-y {
    border-top: var(--cms-bw, 0) var(--cms-bs, solid) var(--cms-bc, #e2e8f0);
    border-bottom: var(--cms-bw, 0) var(--cms-bs, solid) var(--cms-bc, #e2e8f0);
}

.cms-shadow-sm { box-shadow: 0 1px 2px rgba(0, 0, 0, .05); }
.cms-shadow-md { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1); }
.cms-shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1); }
.cms-shadow-xl { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1); }

/* ---------- 2. Lớp phủ ----------
   Đặt bên trong .hero-slide (z-index:2), dưới .cms-container (z-index:10). */

.cms-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: var(--cms-ov-op, .85);
}

.cms-overlay--none       { display: none; }
.cms-overlay--solid      { background: var(--cms-ov-color, #132a4e); }

/* 3 chặng để tái tạo đúng gradient gốc của theme
   (from-primary-950/90 via-primary-900/75 to-transparent): với --cms-ov-op mặc định
   0.9 thì ba mốc ra 0.9 / 0.75 / 0 — khớp từng con số. */
.cms-overlay--gradient_r {
    background: linear-gradient(to right,
        var(--cms-ov-color, #132a4e) 0%,
        color-mix(in srgb, var(--cms-ov-color, #132a4e) 83%, transparent) 50%,
        transparent 100%);
}
.cms-overlay--gradient_l {
    background: linear-gradient(to left,
        var(--cms-ov-color, #132a4e) 0%,
        color-mix(in srgb, var(--cms-ov-color, #132a4e) 83%, transparent) 50%,
        transparent 100%);
}
.cms-overlay--gradient_b { background: linear-gradient(to bottom, transparent, var(--cms-ov-color, #132a4e)); }
.cms-overlay--gradient_t { background: linear-gradient(to top,    transparent, var(--cms-ov-color, #132a4e)); }

/* ---------- Tiện ích ---------- */

@media (max-width: 767px) {
    .cms-hide-mobile { display: none !important; }
}

/* Wrapper cho các block type khác (render-blocks.blade.php bọc khi có cấu hình style).
   Ở đó SectionStyle được gọi với defaults height_mode='auto' nên wrapper không bị ép
   chiều cao của slider; quy tắc dưới là lưới an toàn nếu ai đó quên tham số đó.
   Lưu ý: padding ở đây CỘNG THÊM vào padding sẵn có của block. */
.cms-section-wrap:not(.cms-h-fixed):not(.cms-h-ratio):not(.cms-h-viewport) { height: auto; }

/* ---------- Hiệu ứng slide ----------
   Bổ sung cho .hero-slide sẵn có của theme (mặc định là fade). */

.cms-slider--slide .hero-slide {
    opacity: 1;
    visibility: visible;
    transform: translateX(100%);
}

.cms-slider--slide .hero-slide.active  { transform: translateX(0); }
.cms-slider--slide .hero-slide.is-prev { transform: translateX(-100%); }

@media (prefers-reduced-motion: reduce) {
    .hero-slide { transition: none !important; }
}