/**
 * STINA Homepage — Responsive overrides
 * Mobile & tablet tuning for all home sections
 */

/* ── Global home layout ── */
@media (max-width: 991.98px) {
    :root {
        --navbar-height: 72px;
    }

    .page-home .section-padding {
        padding: clamp(2.75rem, 7vw, 4rem) 0;
    }

    .page-home .container {
        padding-left: max(1rem, env(safe-area-inset-left));
        padding-right: max(1rem, env(safe-area-inset-right));
    }
}

@media (max-width: 575.98px) {
    :root {
        --navbar-height: 68px;
    }

    .page-home .section-padding {
        padding: 2.5rem 0;
    }
}

/* ── Navbar ── */
@media (max-width: 991.98px) {
    .stina-navbar {
        padding: 0.5rem 0;
    }

    .stina-navbar .navbar-collapse {
        padding: 0.75rem 0 0.5rem;
        max-height: calc(100dvh - var(--navbar-height));
        overflow-y: auto;
    }

    .stina-navbar .nav-link {
        padding: 0.65rem 0.5rem !important;
    }

    .stina-navbar .d-flex.align-items-center.gap-2 {
        width: 100%;
        justify-content: space-between;
        padding-top: 0.5rem;
        margin-top: 0.5rem;
        border-top: 1px solid rgba(27, 77, 46, 0.08);
    }
}

@media (max-width: 575.98px) {
    .stina-navbar .navbar-brand img {
        width: 112px;
        height: auto;
    }
}

/* ── Hero Future ── */
@media (max-width: 991.98px) {
    .hero-future {
        padding: 1.25rem 0 2rem;
        min-height: auto;
    }

    .hero-future__container > .row,
    .hero-future__layout {
        row-gap: 0.5rem;
    }

    .hero-future__layout {
        display: flex;
        flex-direction: column;
    }

    .hero-future__left-wrap {
        display: contents;
    }

    .hero-future__content--top {
        order: 1;
        text-align: center;
    }

    .hero-future__visual-col {
        order: 2;
        width: 100%;
        margin-top: 0.5rem;
        margin-bottom: 0.25rem;
    }

    .hero-future__content--bottom {
        order: 3;
        text-align: center;
        margin-top: 0.15rem;
    }

    .hero-future__content--bottom .hero-future__chips {
        margin-top: 0.25rem;
        margin-bottom: 1rem;
    }

    .hero-future__content--bottom .hero-future__actions {
        margin-top: 0;
    }

    .hero-future__stage {
        perspective: none;
        min-height: auto;
        padding: 0;
    }

    .hero-future__chamber {
        width: min(100%, calc(var(--hero-slider-width, 520px) + 6rem));
        margin: 0 auto;
        transform: none !important;
    }

    .hero-future__slider-shell {
        gap: 0.45rem;
        max-width: 100%;
    }

    .hero-future__slider-arrow {
        width: 2.35rem;
        height: 2.35rem;
    }

    .hero-future__slider-arrow svg {
        width: 17px;
        height: 17px;
    }

    .hero-future__tunnel,
    .hero-future__beams,
    .hero-future__orbit {
        display: none;
    }

    .hero-future__pod {
        padding: 0.5rem;
        transform: none;
    }

    .hero-future__lead {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-future__chips {
        align-items: center;
    }

    .hero-future__actions {
        justify-content: center;
    }

    .hero-future__stats {
        justify-content: center;
        margin-bottom: 0.25rem;
    }

    .hero-future__speedlines {
        opacity: 0.2;
    }

    .hero-future__scroll {
        display: none;
    }
}

@media (max-width: 575.98px) {
    .hero-future {
        padding: 1rem 0 1.75rem;
    }

    .hero-future__visual-col {
        margin-top: 0.35rem;
        margin-bottom: 0.15rem;
    }

    .hero-future__badge {
        font-size: 0.68rem;
        padding: 0.35rem 0.8rem;
    }

    .hero-future__title {
        font-size: clamp(1.65rem, 7.5vw, 2.1rem);
        line-height: 1.15;
    }

    .hero-future__lead {
        font-size: 0.92rem;
        max-width: 34ch;
    }

    .hero-future__chip {
        font-size: 0.82rem;
        width: 100%;
        max-width: 300px;
    }

    .hero-future__actions .btn {
        width: 100%;
        justify-content: center;
    }

    .hero-future__stats {
        gap: 0.65rem 1rem;
    }

    .hero-future__stat-value {
        font-size: 1.2rem;
    }

    .hero-future__stat-label {
        font-size: 0.68rem;
    }

    .hero-future__chamber {
        width: min(100%, calc(var(--hero-slider-width, 520px) + 5rem));
    }

    .hero-future__slider-shell {
        gap: 0.3rem;
    }

    .hero-future__slider-arrow {
        width: 2.1rem;
        height: 2.1rem;
    }

    .hero-future__slider-arrow svg {
        width: 15px;
        height: 15px;
    }

    .hero-future__viewport {
        width: min(100%, var(--hero-slider-width, 520px));
        height: min(var(--hero-slider-height, 700px), 75vh);
    }

    .hero-future__corner {
        width: 18px;
        height: 18px;
    }

    .hero-future__aurora--1 {
        width: 180px;
        height: 180px;
    }

    .hero-future__aurora--2 {
        width: 140px;
        height: 140px;
    }
}

/* ── Hero (legacy fallback) ── */
@media (max-width: 991.98px) {
    .hero-section--xr {
        padding: 1.5rem 0 2rem;
    }

    .hero-content {
        text-align: center;
    }

    .hero-subtitle {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-features {
        display: inline-block;
        text-align: left;
        margin-bottom: 1.5rem;
    }

    .hero-actions {
        justify-content: center;
    }

    .hero-xr-stage {
        margin-top: 0.25rem;
    }

    .hero-xr-reflection {
        display: none;
    }
}

@media (max-width: 575.98px) {
    .hero-section--xr {
        padding: 1.25rem 0 1.75rem;
    }

    .hero-badge {
        font-size: 0.72rem;
        padding: 0.35rem 0.85rem;
        margin-bottom: 1rem;
    }

    .hero-title {
        font-size: clamp(1.65rem, 7.5vw, 2.15rem);
        margin-bottom: 0.75rem;
    }

    .hero-subtitle {
        font-size: 0.95rem;
        margin-bottom: 1.25rem;
    }

    .hero-features li {
        font-size: 0.88rem;
    }

    .hero-actions {
        flex-direction: column;
        width: 100%;
    }

    .hero-actions .btn {
        width: 100%;
        justify-content: center;
    }

    .hero-xr-frame {
        padding: 0.65rem;
    }

    .hero-xr-ring--2 {
        display: none;
    }

    .hero-xr-viewport {
        min-height: 0;
        aspect-ratio: 1;
        max-height: min(72vw, 340px);
        margin: 0 auto;
    }

    .hero-xr-hint {
        font-size: 0.72rem;
        padding: 0.45rem 0.65rem;
        margin-top: 0.75rem;
        text-align: center;
    }

    .hero-orb--1 {
        width: 200px;
        height: 200px;
    }

    .hero-orb--2 {
        width: 160px;
        height: 160px;
    }

    .hero-orb--3 {
        display: none;
    }
}

/* ── Brand Portal ── */
@media (max-width: 991.98px) {
    .brand-portal__horizon {
        left: -10%;
        right: -10%;
        height: 40%;
    }

    .brand-portal__content {
        text-align: center;
    }

    .brand-portal__pillars {
        margin-bottom: 1.5rem;
    }

    .brand-portal__cta {
        width: 100%;
        justify-content: center;
    }

    .brand-portal__stage {
        min-height: auto;
        padding-bottom: 0.5rem;
    }

    .brand-portal__gateway {
        height: auto;
        min-height: 300px;
        max-width: 360px;
        margin: 0 auto;
    }

    .brand-portal__hint {
        max-width: none;
        padding: 0 0.5rem;
    }
}

@media (max-width: 575.98px) {
    .brand-portal__title {
        font-size: clamp(1.55rem, 6.5vw, 1.9rem);
    }

    .brand-portal__lead {
        font-size: 0.95rem;
        margin-bottom: 1.25rem;
    }

    .brand-portal__pillar-item {
        padding: 0.7rem 0.85rem;
    }

    .brand-portal__pillar-text {
        font-size: 0.85rem;
    }

    .brand-portal__gateway {
        min-height: 260px;
    }

    .brand-portal__tagline {
        font-size: 0.82rem;
        margin-top: 0.75rem;
    }

    .logo-portal__outer {
        padding: 1.15rem 1.35rem;
    }

    .logo-portal__img {
        width: min(190px, 58vw);
    }
}

/* ── Quality Lab ── */
@media (max-width: 991.98px) {
    .quality-lab__header {
        margin-bottom: 1.75rem;
    }

    .quality-lab__lead {
        font-size: 0.98rem;
    }

    .quality-lab__hud {
        gap: 0.85rem 1.25rem;
        padding: 1.15rem 0.85rem;
    }

    .quality-lab__stat {
        min-width: 100px;
        flex: 1 1 calc(33.333% - 1rem);
    }
}

@media (max-width: 575.98px) {
    .quality-lab__title {
        font-size: clamp(1.55rem, 6.5vw, 1.9rem);
    }

    .quality-lab__subtitle {
        font-size: 0.92rem;
    }

    .quality-lab__lead {
        font-size: 0.92rem;
    }

    .quality-lab__chamber {
        width: min(200px, 62vw);
        height: min(260px, 68vw);
    }

    .quality-lab__hud {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    .quality-lab__stat {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        min-width: 0;
        padding: 0.65rem 0.85rem;
        background: rgba(255, 255, 255, 0.04);
        border-radius: 10px;
        text-align: left;
    }

    .quality-lab__stat-value {
        font-size: 1.35rem;
    }

    .quality-lab__stat-label {
        margin-top: 0;
        text-align: right;
        font-size: 0.72rem;
    }

    .quality-lab__node-card {
        padding: 1rem 1.1rem;
    }

    .quality-lab__node-title {
        font-size: 0.9rem;
    }

    .quality-lab__node-text {
        font-size: 0.8rem;
    }
}

/* ── Featured Products 3D ── */
@media (max-width: 991.98px) {
    .featured-3d__header {
        flex-direction: column;
        align-items: stretch !important;
        text-align: center;
    }

    .featured-3d__header .btn {
        width: 100%;
    }

    .featured-3d__scene {
        perspective: 1000px;
        padding-top: 0.5rem;
    }

    .featured-3d__carousel {
        min-height: 380px;
    }

    .featured-3d__item {
        width: min(300px, 82vw);
    }
}

@media (max-width: 575.98px) {
    .featured-3d__title {
        font-size: clamp(1.5rem, 6vw, 1.85rem);
    }

    .featured-3d__scene {
        perspective: none;
    }

    .featured-3d__carousel {
        min-height: auto;
        padding: 0.5rem 0 1rem;
        transform: none !important;
    }

    .featured-3d__item {
        width: min(300px, 90vw);
        position: relative;
        transition: opacity 0.35s ease, transform 0.35s ease;
    }

    .featured-3d__item[data-offset="0"] {
        position: relative;
        transform: none !important;
        opacity: 1;
        filter: none;
    }

    .featured-3d__item:not([data-offset="0"]) {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%) !important;
        opacity: 0;
        pointer-events: none;
        visibility: hidden;
    }

    .featured-3d__item.is-center .featured-3d__item-inner {
        animation: none;
    }

    .featured-3d__card-glass {
        padding: 1rem 1.1rem 1.15rem;
    }

    .featured-3d__card-title {
        font-size: 1.05rem;
    }

    .featured-3d__controls {
        margin-top: 1rem;
        gap: 1rem;
    }

    .featured-3d__hint {
        font-size: 0.75rem;
        padding: 0 0.5rem;
    }
}

/* ── Why STINA 3D ── */
@media (max-width: 991.98px) {
    .why-3d__intro {
        font-size: 0.98rem;
        padding: 0 0.5rem;
    }

    .logo-portal__outer--hub .logo-portal__img {
        width: 120px;
        height: auto;
    }
}

@media (max-width: 575.98px) {
    .why-3d__title {
        font-size: clamp(1.5rem, 6vw, 1.85rem);
    }

    .why-3d__intro {
        font-size: 0.92rem;
    }

    .why-3d__card-inner {
        padding: 1.15rem 1.2rem;
    }

    .why-3d__card-title {
        font-size: 1rem;
    }

    .why-3d__card-text {
        font-size: 0.82rem;
    }

    .why-3d__hint {
        font-size: 0.78rem;
        padding: 0 0.5rem;
    }
}

/* ── Process 3D ── */
@media (max-width: 575.98px) {
    .process-3d__title {
        font-size: clamp(1.5rem, 6vw, 1.85rem);
    }

    .process-3d__card {
        max-width: 100%;
    }

    .process-3d__card-title {
        font-size: 0.95rem;
    }

    .process-3d__card-desc {
        font-size: 0.8rem;
    }

    .process-3d__hint {
        font-size: 0.78rem;
        padding: 0 0.5rem;
    }
}

/* ── References ── */
@media (max-width: 575.98px) {
    .page-home .section-title {
        font-size: clamp(1.5rem, 6vw, 1.85rem);
    }

    .reference-card {
        padding: 1.25rem;
    }

    .reference-logo {
        height: 48px;
    }
}

/* ── Contact Hub ── */
@media (max-width: 991.98px) {
    .contact-hub__panel {
        padding: clamp(1.5rem, 4vw, 2.25rem);
    }

    .contact-hub__title {
        font-size: clamp(1.55rem, 5vw, 2rem);
    }

    .contact-hub__text {
        font-size: 0.98rem;
        margin-bottom: 1.5rem;
    }

    .contact-hub__actions {
        flex-direction: column;
        width: 100%;
    }

    .contact-hub__actions .btn {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 575.98px) {
    .contact-hub__quick-item {
        padding: 0.75rem 0.9rem;
    }

    .contact-hub__quick-item strong {
        font-size: 0.88rem;
        word-break: break-word;
    }

    .contact-hub__location {
        padding: 1.15rem;
    }

    .contact-hub__location-address {
        font-size: 0.88rem;
    }

    .contact-hub__hours {
        font-size: 0.82rem;
        flex-wrap: wrap;
    }
}

/* ── WhatsApp float — safe area ── */
@media (max-width: 575.98px) {
    .whatsapp-float {
        bottom: max(16px, env(safe-area-inset-bottom));
        right: max(16px, env(safe-area-inset-right));
        width: 52px;
        height: 52px;
    }

    .whatsapp-float svg {
        width: 24px;
        height: 24px;
    }
}

/* ── Prevent horizontal overflow from 3D sections ── */
@media (max-width: 991.98px) {
    .page-home .hero-future,
    .page-home .brand-portal,
    .page-home .quality-lab,
    .page-home .featured-3d,
    .page-home .why-3d,
    .page-home .process-3d,
    .page-home .contact-hub {
        overflow-x: clip;
    }
}

/* ── Touch targets ── */
@media (max-width: 991.98px) {
    .featured-3d__nav {
        min-width: 44px;
        min-height: 44px;
    }

    .featured-3d__dots {
        gap: 0.25rem;
    }

    .featured-3d__dot {
        box-sizing: content-box;
        padding: 14px;
        background-clip: content-box;
    }
}