/* ════════════════════════════════════════════════════════
   MOBILE.CSS — Mobile-only Responsive Styles for Cronos Creations
   All changes ONLY apply below 768px (ie. phones)
   Desktop view is completely untouched.
   ════════════════════════════════════════════════════════ */

/* Always hidden on desktop — media query re-enables them on mobile */
.nav-hamburger {
    display: none;
}

.mobile-menu-overlay {
    display: none;
}

@media (max-width: 768px) {


    /* ─── GLOBAL ─── */
    body {
        cursor: auto !important; /* Override global cursor: none from style.css */
    }

    a,
    button,
    .sl-item {
        cursor: auto !important;
    }

    .custom-cursor {
        display: none !important; /* Hide GSAP dot — no mouse on touch screens */
    }

    .website-container {
        width: 100%;
        margin: 0;
        border-radius: 0;
        gap: 0;
    }

    /* ─── NAV: HAMBURGER ─── */
    .nav-wrapper {
        border-radius: 0;
        padding: 14px 20px;
        position: sticky;
        top: 0;
        z-index: 10000;
    }

    .nav-center {
        display: none;
        /* Hide "Hello Spirit" on mobile */
    }

    .nav-right {
        display: none;
        /* Hide normal nav links on mobile */
    }

    /* The hamburger button itself — hidden on desktop */
    .nav-hamburger {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-end;
        width: 30px;
        height: 22px;
        background: none;
        border: none;
        padding: 0;
        cursor: pointer;
        gap: 6px;
    }

    .nav-hamburger span {
        display: block;
        height: 2px;
        background: var(--text-main);
        border-radius: 2px;
        transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
        transform-origin: right center;
    }

    .nav-hamburger span:nth-child(1) {
        width: 100%;
    }

    .nav-hamburger span:nth-child(2) {
        width: 70%;
    }

    .nav-hamburger span:nth-child(3) {
        width: 50%;
    }

    /* Animate to X when open */
    .nav-hamburger.open span:nth-child(1) {
        transform: rotate(-45deg) translateY(2px);
        width: 100%;
    }

    .nav-hamburger.open span:nth-child(2) {
        opacity: 0;
        transform: scaleX(0);
    }

    .nav-hamburger.open span:nth-child(3) {
        transform: rotate(45deg) translateY(-2px);
        width: 100%;
    }

    /* Full-screen mobile menu overlay */
    .mobile-menu-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: rgba(13, 13, 15, 0.97);
        z-index: 9999;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 30px;
        opacity: 0;
        transition: opacity 0.4s ease;
    }

    .mobile-menu-overlay.visible {
        display: flex;
        opacity: 1;
    }

    .mobile-menu-overlay a {
        font-family: var(--font-logo);
        font-size: 2rem;
        font-weight: 700;
        color: var(--text-main);
        text-decoration: none;
        letter-spacing: 3px;
        text-transform: uppercase;
        transition: color 0.3s ease, text-shadow 0.3s ease;
        transform: translateY(20px);
        opacity: 0;
        transition: transform 0.4s ease, opacity 0.4s ease, color 0.3s ease;
    }

    .mobile-menu-overlay.visible a {
        transform: translateY(0);
        opacity: 1;
    }

    .mobile-menu-overlay a:nth-child(2) {
        transition-delay: 0.05s;
    }

    .mobile-menu-overlay a:nth-child(3) {
        transition-delay: 0.10s;
    }

    .mobile-menu-overlay a:nth-child(4) {
        transition-delay: 0.15s;
    }

    .mobile-menu-overlay a:nth-child(5) {
        transition-delay: 0.20s;
    }

    .mobile-menu-overlay a:nth-child(6) {
        transition-delay: 0.25s;
    }

    .mobile-menu-overlay a:hover,
    .mobile-menu-overlay a.active {
        color: var(--accent-color);
        text-shadow: 0 0 20px rgba(16, 212, 118, 0.6);
    }

    .mobile-menu-close {
        position: absolute;
        top: 25px;
        right: 25px;
        background: none;
        border: none;
        color: var(--text-main);
        font-size: 2rem;
        cursor: pointer;
        line-height: 1;
        padding: 5px;
        opacity: 0.6;
        transition: opacity 0.3s ease;
    }

    .mobile-menu-close:hover {
        opacity: 1;
    }

    /* ─── HERO ─── */
    .hero-container {
        border-radius: 0;
        height: 100svh;
        min-height: 500px;
    }

    .hero-content {
        width: 100%;
        padding: 40px 25px;
        background: linear-gradient(180deg, rgba(35, 35, 35, 0.9) 0%, rgba(35, 35, 35, 0.6) 100%);
    }

    .title {
        font-size: 2.8rem;
        line-height: 1.1;
    }

    .tagline {
        font-size: 1rem;
        letter-spacing: 2px;
    }

    .description {
        font-size: 0.9rem;
        max-width: 100%;
    }

    /* ─── HOME-SPECIFIC: HORIZONTAL CARDS STACK ─── */
    .section-list {
        display: none;
        /* hide the fixed side scroll menu on mobile */
    }

    .hcard-layout,
    .hcard-layout-reverse {
        flex-direction: column !important;
    }

    .hcard-image-wrap {
        max-height: 220px;
        overflow: hidden;
    }

    .hcard-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .hcard-inner {
        padding: 30px 25px;
    }

    /* ─── ABOUT.HTML ─── */
    .about-main {
        padding: 60px 20px 60px;
    }

    .about-grid {
        grid-template-columns: 1fr !important;
        gap: 30px;
    }

    /* Push the image column to the TOP on mobile */
    .about-visuals {
        order: -1;
    }

    .about-text-content {
        order: 1;
    }

    .about-title {
        font-size: 3rem;
        letter-spacing: -1px;
    }

    .about-roles {
        font-size: 1.2rem;
    }

    .about-description {
        font-size: 1rem;
    }

    /* ─── SERVICES.HTML ─── */
    .do-grid {
        grid-template-columns: 1fr !important;
    }

    .pricing-grid {
        grid-template-columns: 1fr !important;
    }

    .pricing-card:hover {
        transform: none;
        /* Disable hover lift on mobile */
    }

    /* ─── PROJECTS.HTML ─── */
    .filter-bar {
        flex-wrap: wrap;
        gap: 8px;
        justify-content: center;
        padding: 0 15px;
    }

    .projects-grid {
        grid-template-columns: 1fr !important;
        padding: 0 15px;
    }

    /* ─── CONTACT.HTML ─── */
    .contact-layout {
        flex-direction: column;
        gap: 30px;
    }

    .contact-info-col,
    .faq-col {
        width: 100%;
        transform: none !important;
        /* Override GSAP fly-in to prevent overflow on mobile */
    }

    .contact-card {
        padding: 18px 20px;
    }

    .faq-header {
        font-size: 1.8rem;
    }

    /* ─── FOOTER ─── */
    .glass-footer .footer-inner {
        flex-direction: column;
        gap: 30px;
        align-items: flex-start;
        padding: 40px 25px;
    }

    .footer-nav {
        flex-direction: column !important;
        gap: 12px;
    }

    .footer-right {
        width: 100%;
        align-items: flex-start !important;
    }

    .footer-social {
        gap: 10px;
    }

    /* ─── SECTION PADDING ─── */
    .content-wrapper {
        padding: 40px 20px !important;
    }

    .section-title {
        font-size: 1.8rem !important;
    }

    /* ─── TRANSITION OVERLAY ─── */
    .loader-title-wrapper {
        font-size: 2.5rem !important;
    }

    .nav-transition-container .nav-text {
        font-size: 0.9rem !important;
    }

}

/* ─── TABLET (768px - 1024px): Only adjust nav, keep content readable ─── */
@media (min-width: 769px) and (max-width: 1024px) {

    .nav-wrapper {
        padding: 15px 25px;
    }

    .nav-links {
        gap: 18px;
    }

    .nav-center {
        display: none;
    }

    .title {
        font-size: 3.2rem;
    }

    .hero-content {
        padding: 50px;
        width: 60%;
    }

    .do-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .projects-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Force hamburger to not be rendered on tablets */
    .nav-hamburger {
        display: none;
    }

}