/**
 * Kit Culture - Model Detail Page
 * Editorial-style single model showcase with 3D hero
 */

/* ==========================================================================
   Hero Section - Wraps the full hero-3d.php configurator
   ========================================================================== */

.mp-hero {
    position: relative;
    height: 100vh;
    background: var(--gray-50);
    color: var(--black);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.mp-hero__taglines {
    display: flex;
    justify-content: space-between;
    padding: clamp(24px, 4vw, 48px) clamp(24px, 4vw, 64px);
    padding-top: calc(80px + clamp(24px, 4vw, 48px));
    position: relative;
    z-index: 10;
    flex-shrink: 0;
}

.mp-hero__tagline {
    font-family: var(--font-body);
    font-size: clamp(11px, 1.2vw, 14px);
    font-weight: 400;
    line-height: 1.4;
    color: var(--black);
    max-width: 160px;
}

.mp-hero__tagline strong {
    display: block;
    font-weight: 600;
}

/* Giant model name behind the 3D canvas */
.mp-hero__model-name {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -55%);
    font-family: var(--font-display);
    font-size: clamp(100px, 18vw, 300px);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 0.8;
    text-transform: uppercase;
    color: var(--black);
    opacity: 0.06;
    z-index: 1;
    white-space: nowrap;
    user-select: none;
    pointer-events: none;
}

/* Override the hero-3d.php section styles within model page */
.mp-hero .hero {
    position: relative;
    z-index: 2;
    background: transparent !important;
    flex: 1;
    min-height: 0;
}

.mp-hero .hero-3d-bg {
    background: transparent !important;
}

/* Hide the homepage hero content overlay (waitlist, stats, headline, etc.) */
.mp-hero .hero-content,
.mp-hero .tablet-hero-bottom,
.mp-hero .hero-container {
    display: none !important;
}

/* Hide the model switcher (we use our own tabs) */
.mp-hero .model-switcher {
    display: none !important;
}

/* Hide save screenshot on model pages */
.mp-hero .save-screenshot-btn {
    display: none !important;
}

/* Hide preset strip */
.mp-hero .preset-strip {
    display: none !important;
}

/* Keep panel nav, zoom, and rotate buttons visible */
.mp-hero .panel-nav {
    z-index: 20;
}

.mp-hero .hero-zoom-controls {
    z-index: 20;
}

/* Bottom bar with model tabs */
.mp-hero__bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: clamp(16px, 2vw, 24px) clamp(24px, 4vw, 64px);
    position: relative;
    z-index: 10;
    background: var(--gray-50);
    flex-shrink: 0;
}

.mp-hero__tabs {
    display: flex;
    align-items: center;
    gap: 4px;
}

.mp-hero__tab {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    padding: 8px 20px;
    border-radius: 100px;
    border: 1px solid var(--gray-300);
    color: var(--gray-500);
    text-decoration: none;
    transition: all 0.2s ease;
    background: transparent;
}

.mp-hero__tab:hover {
    border-color: var(--black);
    color: var(--black);
}

.mp-hero__tab--active {
    background: var(--black);
    color: var(--white);
    border-color: var(--black);
}

.mp-hero__tab--active:hover {
    color: var(--white);
}

.mp-hero__location {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 400;
    color: var(--gray-500);
}

/* ==========================================================================
   Responsive - 1024px
   ========================================================================== */

@media (max-width: 1024px) {
    .mp-hero__taglines {
        gap: 24px;
    }

    .mp-hero__model-name {
        font-size: clamp(80px, 14vw, 200px);
    }

}

/* ==========================================================================
   Responsive - 768px
   ========================================================================== */

@media (max-width: 768px) {
    /* The homepage mobile hero v2 headline + model chips don't belong on a
       model page (the giant name + tabs cover both); keep its Customize +
       Price CTA row, which is the only mobile access to the configurator. */
    .page-template-page-model .kc-mhero-head,
    .page-template-page-model .kc-mhero-chips {
        display: none !important;
    }

    .mp-hero__taglines {
        flex-direction: column;
        gap: 12px;
        padding: 24px;
        padding-top: calc(70px + 24px);
    }

    .mp-hero__tagline {
        max-width: none;
    }

    .mp-hero__tagline:nth-child(2),
    .mp-hero__tagline:nth-child(3) {
        display: none;
    }

    .mp-hero__model-name {
        font-size: 80px;
    }

    .mp-hero__bottom {
        flex-direction: column;
        gap: 16px;
        padding: 16px 24px;
    }

    .mp-hero__tabs {
        order: -1;
    }

    .mp-hero__location {
        display: none;
    }

}

/* ==========================================================================
   Responsive - 480px
   ========================================================================== */

@media (max-width: 480px) {
    .mp-hero__model-name {
        font-size: 56px;
    }

    .mp-hero__tab {
        font-size: 12px;
        padding: 6px 14px;
    }


}