/* ===================================
   Hero Slider Styles
   =================================== */

/* /blue and /art use a fixed navbar. These pages wrap content in `.home-page-offset`,
   but other styles override its padding on some breakpoints, causing the hero top
   to slip under the header. Keep the offset consistent for the slider landing pages. */
.magicblue-landing {
    --mb-landing-top-offset: 90px;
}

@media (max-width: 768px) {
    .magicblue-landing {
        --mb-landing-top-offset: 70px;
    }
}

.magicblue-landing .home-page-offset {
    padding-top: var(--mb-landing-top-offset) !important;
}

.hero-slider-section {
    position: relative;
    width: 100%;
    min-height: 90vh;
    overflow: hidden;
    background: #000;
    /* modern-design.css applies large padding to all sections; keep the slider flush */
    padding: 0;

    /* Mobile scroll should pass through the hero; slider swipe only uses horizontal deltas. */
    touch-action: pan-y;

    /* When navigating to `#home` (or programmatic scroll), keep the hero from sliding under the fixed navbar. */
    scroll-margin-top: 110px;
    scroll-margin-top: calc(110px + constant(safe-area-inset-top));
    scroll-margin-top: calc(110px + env(safe-area-inset-top));
}

/* The landing wrapper adds a top offset for the fixed navbar.
   If the slider also uses a viewport-based height, the sum can exceed 100vh,
   causing the bottom CTA area to be clipped. Make the slider height account for
   the navbar offset so the hero fits the viewport end-to-end. */
.magicblue-landing .hero-slider-section {
    min-height: calc(100vh - var(--mb-landing-top-offset));
    min-height: calc(100dvh - var(--mb-landing-top-offset));
}

@media (max-width: 768px) {
    .hero-slider-section {
        scroll-margin-top: 104px;
        scroll-margin-top: calc(104px + constant(safe-area-inset-top));
        scroll-margin-top: calc(104px + env(safe-area-inset-top));
    }
}

.hero-slider-container {
    position: relative;
    width: 100%;
    height: 90vh;
    min-height: 600px;
}

.magicblue-landing .hero-slider-container {
    height: calc(100vh - var(--mb-landing-top-offset));
    height: calc(100dvh - var(--mb-landing-top-offset));
    min-height: 600px;
}

.hero-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.8s ease-in-out, visibility 0.8s ease-in-out;
    z-index: 1;
}

.hero-slide.active {
    opacity: 1;
    visibility: visible;
    z-index: 2;
}

/* Slide Background */
.hero-slide-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
}

/* 매직블루 슬라이드 배경 */
.hero-slide:nth-child(1) .hero-slide-bg {
    background-image: linear-gradient(135deg, rgba(0, 102, 204, 0.85), rgba(0, 76, 153, 0.85)),
        url('../images/slides/magicblue-slide1.jpg');
}

.hero-slide:nth-child(2) .hero-slide-bg {
    background-image: linear-gradient(135deg, rgba(0, 76, 153, 0.85), rgba(0, 51, 102, 0.85)),
        url('../images/slides/magicblue-slide2.jpg');
}

.hero-slide:nth-child(3) .hero-slide-bg {
    background-image: linear-gradient(135deg, rgba(0, 51, 102, 0.85), rgba(0, 102, 204, 0.85)),
        url('../images/slides/magicblue-slide3.jpg');
}

/* 매직아트 슬라이드 배경 (브랜드 전환 시) */
.brand-magicart .hero-slide:nth-child(1) .hero-slide-bg {
    background-image: linear-gradient(135deg, rgba(44, 95, 45, 0.85), rgba(27, 67, 50, 0.85)),
        url('../images/slides/magicart-slide1.jpg');
}

.brand-magicart .hero-slide:nth-child(2) .hero-slide-bg {
    background-image: linear-gradient(135deg, rgba(27, 67, 50, 0.85), rgba(21, 50, 38, 0.85)),
        url('../images/slides/magicart-slide2.jpg');
}

.brand-magicart .hero-slide:nth-child(3) .hero-slide-bg {
    background-image: linear-gradient(135deg, rgba(21, 50, 38, 0.85), rgba(44, 95, 45, 0.85)),
        url('../images/slides/magicart-slide3.jpg');
}

/* Hero Content */
.hero-slide .hero-content {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: white;
    /* Keep the top badge/title below the fixed navbar across all slides. */
    padding: 120px 20px 120px;
}

.hero-slide .hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    padding: 10px 20px;
    border-radius: 50px;
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 30px;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.hero-slide .hero-badge i {
    font-size: 1.1rem;
}

.hero-slide .hero-title {
    font-size: 3.5rem;
    font-weight: 900;
    line-height: 1.2;
    margin-bottom: 20px;
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
}

.hero-slide .hero-title .highlight {
    color: #FFD700;
    text-shadow: 2px 2px 15px rgba(255, 215, 0, 0.5);
}

.hero-slide .hero-subtitle {
    font-size: 1.3rem;
    line-height: 1.45;
    margin-bottom: 40px;
    opacity: 0.95;
    font-weight: 500;
}

.hero-slide .hero-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 40px;
    width: 100%;
    max-width: 900px;
}

.hero-slide .hero-stat-card {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    padding: 25px 15px;
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.hero-slide .hero-stat-number {
    font-size: 2.2rem;
    font-weight: 900;
    color: #FFD700;
}

.hero-slide .hero-stat-label {
    font-size: 0.95rem;
    opacity: 0.9;
}

.hero-slide .hero-buttons {
    display: flex;
    gap: 15px;
    margin-top: 0;
    flex-wrap: wrap;
    justify-content: center;
}

.hero-slide .btn-primary,
.hero-slide .btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 35px;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.hero-slide .btn-primary {
    background: white;
    color: #0066CC;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
}

.hero-slide .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}

.brand-magicart .hero-slide .btn-primary {
    color: #2C5F2D;
}

.hero-slide .btn-secondary {
    background: transparent;
    color: white;
    border: 2px solid white;
}

.hero-slide .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

/* Slider Controls */
.slider-controls {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    padding: 0 30px;
    z-index: 10;
    pointer-events: none;
}

.slider-btn {
    pointer-events: all;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.slider-btn:hover {
    background: rgba(255, 255, 255, 0.4);
    transform: scale(1.1);
}

/* Slider Indicators */
.slider-indicators {
    position: absolute;
    bottom: 30px;
    bottom: calc(30px + constant(safe-area-inset-bottom));
    bottom: calc(30px + env(safe-area-inset-bottom));
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 10;
}

.slider-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    border: 2px solid rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: all 0.3s ease;
}

.slider-indicator.active {
    background: white;
    width: 40px;
    border-radius: 6px;
}

.slider-indicator:hover {
    background: rgba(255, 255, 255, 0.8);
}

/* Responsive Design */
@media (max-width: 1024px) {
    .hero-slide .hero-title {
        font-size: 2.8rem;
    }

    .hero-slide .hero-subtitle {
        font-size: 1.1rem;
    }

    .hero-slide .hero-stats {
        grid-template-columns: repeat(2, 1fr);
        max-width: 500px;
    }
}

@media (max-width: 768px) {
    .hero-slider-container {
        height: calc(100vh - var(--mb-landing-top-offset));
        height: calc(100dvh - var(--mb-landing-top-offset));
        min-height: calc(100dvh - var(--mb-landing-top-offset));
    }

    .hero-slide .hero-content {
        padding: 84px 16px 96px;
    }

    .hero-slide .hero-title {
        font-size: 2rem;
    }

    .hero-slide .hero-subtitle {
        font-size: 1rem;
        line-height: 1.4;
        margin-bottom: 20px;
    }

    .hero-slide .hero-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
        margin-bottom: 20px;
    }

    .hero-slide .hero-stat-card {
        padding: 14px 10px;
    }

    .hero-slide .hero-stat-number {
        font-size: 1.8rem;
    }

    .hero-slide .hero-stat-label {
        font-size: 0.85rem;
    }

    .hero-slide .hero-buttons {
        flex-direction: column;
        width: 100%;
        gap: 10px;
    }

    .hero-slide .btn-primary,
    .hero-slide .btn-secondary {
        width: 100%;
        padding: 12px 20px;
        font-size: 1rem;
        justify-content: center;
    }

    .slider-controls {
        padding: 0 15px;
    }

    .slider-btn {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }
}

@media (max-width: 768px) and (max-height: 900px) {
    .hero-slide .hero-content {
        padding: 72px 14px 84px;
    }

    .hero-slide .hero-badge {
        margin-bottom: 14px;
        font-size: 0.82rem;
        padding: 7px 14px;
    }

    .hero-slide .hero-title {
        font-size: 1.8rem;
        line-height: 1.15;
        margin-bottom: 12px;
    }

    .hero-slide .hero-subtitle {
        font-size: 0.95rem;
        line-height: 1.35;
        margin-bottom: 14px;
    }

    .hero-slide .hero-stats {
        gap: 10px;
        margin-bottom: 14px;
    }

    .hero-slide .hero-stat-card {
        padding: 10px 8px;
        gap: 4px;
    }

    .hero-slide .hero-stat-number {
        font-size: 1.5rem;
    }

    .hero-slide .hero-stat-label {
        font-size: 0.78rem;
    }

    .hero-slide .hero-buttons {
        gap: 8px;
    }

    .hero-slide .btn-primary,
    .hero-slide .btn-secondary {
        padding: 10px 16px;
        font-size: 0.95rem;
    }
}

/* Short-viewport devices (e.g., mobile landscape): keep CTAs clear of indicators. */
@media (max-height: 700px) {
    .hero-slide .hero-content {
        padding-top: 72px;
        padding-bottom: 82px;
    }

    .slider-indicators {
        bottom: 12px;
        bottom: calc(12px + constant(safe-area-inset-bottom));
        bottom: calc(12px + env(safe-area-inset-bottom));
    }
}

/* Common laptop heights (e.g. 1366x768): avoid top clipping under fixed header. */
@media (max-height: 820px) {
    .hero-slide .hero-content {
        justify-content: flex-start;
        padding-top: 112px;
        padding-bottom: 100px;
    }

    .hero-slide .hero-title {
        font-size: 2.8rem;
        margin-bottom: 14px;
    }

    .hero-slide .hero-subtitle {
        font-size: 1.1rem;
        margin-bottom: 20px;
    }

    .hero-slide .hero-stats {
        margin-bottom: 20px;
        gap: 14px;
    }

    .hero-slide .hero-stat-card {
        padding: 14px 10px;
    }

    .hero-slide .hero-stat-number {
        font-size: 1.9rem;
    }
}

@media (max-width: 480px) {
    .hero-slide .hero-title {
        font-size: 1.6rem;
    }

    .hero-slide .hero-badge {
        font-size: 0.85rem;
        padding: 8px 16px;
    }

    .hero-slide .hero-stat-number {
        font-size: 1.5rem;
    }

    .hero-slide .hero-stat-label {
        font-size: 0.75rem;
    }
}