/**

 * Xuan Cuong Handicraft - Module: desktop.css

 * Tinh chỉnh riêng desktop (>= 1025px) theo changelog 28/10:
 * cỡ chữ chuẩn mới, nút solid đồng bộ, header thấp hơn, giới hạn chiều cao section

 */


/* ==========================================================================
   1. CHUẨN CỠ CHỮ MỚI (font-size / line-height)
   - heading-title      40 / Auto   → --fs-hero, --fs-heading
   - heading-sub        32 / Auto   → --fs-script
   - content-title-1    32 / Auto   → --fs-heading-md, --fs-title-lg
   - content-title-2    22 / Auto   → --fs-card-title, --fs-price
   - content-button     18 / 32
   - content-sub        16 / 150%   (cả bản italic & bold)
   ========================================================================== */
@media (min-width: 1025px) {
    :root {
        /* --fs-hero: 40x; */
        /* --fs-heading: 40px; */
        /* --fs-script: 32px; */
        /* --fs-heading-md: 32px; */
        /* --fs-title-lg: 32px; */
        --fs-hero: 32px;
        --fs-heading: 32px;
        --fs-script: 28px;
        --fs-heading-md: 28px;
        --fs-title-lg: 28px;
        --fs-card-title: 22px;
        --fs-price: 22px;
        --fs-body: 16px;

        /* Header 76px + topbar 42px: chiều cao tối đa của các section đầu trang */
        --xc-header-h: 76px;
        --xc-topbar-h: 42px;
        --xc-screen-h: calc(100vh - var(--xc-header-h) - var(--xc-topbar-h));
    }

    /* heading-sub dùng cỡ cố định ở một số chỗ */
    .story-heading-col .script-accent-dark,
    .team-header .script-accent-dark {
        font-size: var(--fs-script);
    }

    /* content-title-2 */
    .next-title,
    .maker-card-info .maker-name,
    .about-projects-section .journal-entry-title {
        font-size: var(--fs-card-title);
        line-height: normal;
    }

    /* content-sub · 16 / 150% */
    .legal-content p,
    .legal-content li,
    .error-404-desc,
    .materials-desc-col p,
    .material-item-desc,
    .material-desc,
    .product-short-desc,
    .review-card-caption p,
    .about-hero-desc,
    .order-hero-lead,
    .logo-bulk-desc-col p,
    .step-desc,
    .p-step-desc,
    .featured-post-desc,
    .article-content-body p,
    .sidebar-promo-banner .promo-subtitle,
    .contact-intro-sub,
    .space-slider-desc,
    .faq-answer-drawer,
    .faq-support-desc,
    .artisan-col-desc,
    .artisan-lead-p,
    .artisan-sub-p,
    .partners-hero-desc,
    .invitation-desc,
    .journal-hero-desc,
    .story-p1,
    .story-p2,
    .workshop-story-card p,
    .workshop-story-box .story-lead,
    .workshop-story-box .story-sub,
    .vip-slide-desc,
    .vip-slide-desc p {
        font-size: 16px;
        line-height: 1.5;
    }
}


/* ==========================================================================
   2. NÚT SOLID: đồng bộ theo nút "Khám phá sản phẩm" ở hero trang chủ (.btn-hero-red)
   padding 8px 20px · content-button 18/32 · cao tối đa 48px · bo góc 4px
   (giữ display / width riêng của từng nút, VD nút full width trong form;
   nút CTA trên thanh nav .btn-cta-gold giữ nguyên)
   ========================================================================== */
@media (min-width: 1025px) {

    .btn-hero-red,
    .btn-story-red,
    .btn-submit-gold,
    .btn-rfq-submit,
    .btn-rfq-submit-gold,
    .btn-brief-gold,
    .btn-artisan-more,
    .btn-apply-filters,
    .btn-about-cta,
    .btn-cobranded-all,
    .btn-card-directions,
    .btn-invitation-gold,
    .btn-detail-rfq {
        height: 44px;
        max-height: 48px;
        padding: 8px 20px;
        border-radius: var(--radius-sm, 4px);
        font-family: var(--font-sans);
        font-size: 18px;
        font-weight: 500;
        line-height: 32px;
        box-sizing: border-box;
    }
}


/* ==========================================================================
   3. HEADER: menu cao 76px, logo nhỏ hơn, topbar 42px
   ========================================================================== */
@media (min-width: 1025px) {
    .top-bar {
        padding: 7px 0;
    }

    .header-inner,
    .site-header.is-scrolled .header-inner {
        min-height: var(--xc-header-h);
    }

    .brand-logo-header-img {
        height: 56px;
        max-height: 56px;
    }
}


/* ==========================================================================
   4. GIỚI HẠN CHIỀU CAO SECTION: không cao quá 100vh - (menu + topbar)
   ========================================================================== */
@media (min-width: 1025px) {

    /* Hero trang chủ */
    .herosection {
        min-height: 0;
        height: var(--xc-screen-h);
        max-height: var(--xc-screen-h);
        padding-top: 3rem;
        padding-bottom: 56px;
    }

    .hero-subtext {
        margin-bottom: 2.5rem;
    }

    .hero-scroll-indicator {
        margin-top: 64px;
    }

    /* Câu chuyện Xuân Cường & video VTV: tiêu đề (~120px) + padding 2 × 56px */
    .section-workshop-vtv {
        padding: 56px 0;
    }

    .workshop-vtv-header {
        margin-bottom: 32px;
    }

    .workshop-video-wrapper {
        max-height: min(600px, calc(var(--xc-screen-h) - 232px));
    }

    .workshop-story-box {
        min-height: min(560px, calc(var(--xc-screen-h) - 232px));
        padding: 56px var(--edge-gutter) 56px 64px;
    }

    .workshop-story-box .story-lead {
        margin-bottom: 24px;
    }

    /* Slider sản phẩm ưu đãi: ảnh thấp hơn, padding gọn */
    .section-sale-products {
        padding: 56px 0 32px;
    }

    .sale-header-flex {
        margin-bottom: 2rem;
    }


    .sale-card-details {
        padding: 16px 0 20px;
    }

    /* Hero trang Về chúng tôi */
    .about-hero-section,
    .about-hero-image {
        max-height: var(--xc-screen-h);
    }

    .about-hero-grid {
        min-height: min(560px, var(--xc-screen-h));
    }

    .about-hero-text {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }
}

/* Hero trang Đối tác: 2 cột từ 1280px (dưới đó ảnh xếp dưới chữ) */
@media (min-width: 1280px) {
    .partners-hero-section {
        padding: 4rem 0;
    }

    .partners-hero-img-wrap {
        height: min(650px, calc(var(--xc-screen-h) - 8rem));
    }

    /* Tiêu đề lời mời hợp tác giữ 1 dòng */
    .section-title.invitation-title {
        white-space: nowrap;
        max-width: none;
    }
}


/* ==========================================================================
   5. KHÁC
   ========================================================================== */

/* Ô tìm kiếm trong bộ lọc trang sản phẩm: nền #DEDEDF, cao 48px */
@media (min-width: 1025px) {
    .filter-search-box {
        height: 44px;
        padding: 0 16px;
        background: #DEDEDF;
    }
}

/* Ảnh review chi tiết sản phẩm: vuông từ 1536px, 3/2 ở màn nhỏ hơn */
@media (min-width: 1536px) {

    .review-slide-card,
    .reviews-cards-slider.swiper .review-slide-card.swiper-slide {
        aspect-ratio: 1 / 1 !important;
    }
}

/* Slider khách hàng VIP: ảnh đổi ngay, không hiệu ứng */
.vip-slide-image img,
.vip-testimonial-slide:not(.is-active) .vip-slide-image img,
.vip-testimonial-slide.is-active .vip-slide-image img {
    transition: none;
    transform: none;
    opacity: 1;
}

/* Slide không fade; khung chữ trượt ngang theo chiều chuyển slide (main.js mục 14) */
.vip-testimonial-slide {
    transition: none;
}

.vip-slide-content-col {
    overflow: hidden;
}

.vip-testimonial-slide:not(.is-active) .vip-slide-content,
.vip-testimonial-slide.is-active .vip-slide-content {
    opacity: 1;
    transform: none;
    transition: none;
}

/* Slide vừa rời đi vẫn hiện (nằm dưới) trong lúc khung chữ mới trượt vào */
.vip-testimonial-slide.is-leaving {
    visibility: visible;
    opacity: 1;
    z-index: 1;
}

.vip-testimonials-track.is-animated.is-dir-next .vip-testimonial-slide.is-active .vip-slide-content {
    animation: xcVipTextInNext 0.6s cubic-bezier(0.22, 0.8, 0.2, 1) both;
}

.vip-testimonials-track.is-animated.is-dir-prev .vip-testimonial-slide.is-active .vip-slide-content {
    animation: xcVipTextInPrev 0.6s cubic-bezier(0.22, 0.8, 0.2, 1) both;
}

.vip-testimonials-track.is-animated.is-dir-next .vip-testimonial-slide.is-leaving .vip-slide-content {
    animation: xcVipTextOutNext 0.6s cubic-bezier(0.22, 0.8, 0.2, 1) both;
}

.vip-testimonials-track.is-animated.is-dir-prev .vip-testimonial-slide.is-leaving .vip-slide-content {
    animation: xcVipTextOutPrev 0.6s cubic-bezier(0.22, 0.8, 0.2, 1) both;
}

@keyframes xcVipTextInNext {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(0);
    }
}

@keyframes xcVipTextInPrev {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(0);
    }
}

@keyframes xcVipTextOutNext {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-100%);
    }
}

@keyframes xcVipTextOutPrev {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(100%);
    }
}

/* Nhãn giảm giá "-X%" trên thẻ sản phẩm (cạnh phải khi đã có nhãn khác) */
.product-badge.badge-right {
    left: auto;
    right: 16px;
}

/* Bộ lọc trang sản phẩm & Journal: mờ danh sách trong lúc tải AJAX */
.catalog-results,
.section-journal-articles>.container {
    transition: opacity 0.2s ease;
}

.catalog-results.is-loading,
.section-journal-articles>.container.is-loading {
    opacity: 0.45;
    pointer-events: none;
}