/* css/mobile.css */

/* Mobile Responsiveness (Max Width: 768px for typical tablets and phones) */
@media screen and (max-width: 768px) {

    /* =========================================
       Hero Section Adjustments
       ========================================= */
    .bg-text {
        font-size: clamp(24px, 8vw, 46px);
        /* Foolproof responsive size */
        letter-spacing: 6px;
        /* Absolute letter spacing to prevent huge vw stretching */
        top: 36%;
        width: 100%;
        left: 0;
        text-align: center;
        white-space: nowrap;
    }

    .fg-text {
        height: 150px;
        top: 72%;
        /* ONLY translateY! Javascript overrides this on scroll. */
        /* Adding left scaling makes it jump on mobile when scrolling. */
        transform: translateY(-50%);
    }

    .fg-text text {
        font-size: 260px;
        /* Highly scaled inside the SVG so it stays huge */
        letter-spacing: 4px;
    }

    .hero-image {
        height: 60vh;
        bottom: 12vh;
    }

    /* =========================================
       Navigation Bar Adjustments
       ========================================= */
    .glass-nav {
        width: 90vw;
        max-width: 100%;
        overflow-x: auto;
        /* Allow horizontal scrolling */
        -webkit-overflow-scrolling: touch;
        /* Smooth scrolling on iOS */
        scrollbar-width: none;
        /* Hide scrollbar for Firefox */
    }

    .glass-nav::-webkit-scrollbar {
        display: none;
        /* Hide scrollbar for Chrome/Safari */
    }

    .nav-links {
        width: max-content;
        /* Ensure the flex container expands to fit content */
        padding: 0 10px;
    }

    .nav-item {
        font-size: 11px;
        padding: 8px 12px;
    }

    /* Mobile Menu Scroll Hint */
    .mobile-menu-scroll-hint {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        color: rgba(255, 255, 255, 0.4);
        margin-top: 25px;
        /* Pushed down from nav slightly */
        margin-bottom: -5px;
        /* Tuck closer to subnav */
        font-family: 'Montserrat', sans-serif;
        font-size: 9px;
        text-transform: uppercase;
        letter-spacing: 2px;
        animation: pulseFade 2s infinite ease-in-out;
    }

    .mobile-menu-scroll-hint svg {
        width: 12px;
        height: 12px;
    }

    /* Sub Navigation */
    .glass-sub-nav {
        width: 90vw;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        /* Let JS manage margins or rely on auto */
        margin-top: 15px !important;
    }

    .glass-sub-nav::-webkit-scrollbar {
        display: none;
    }

    .sub-nav-links {
        width: max-content;
        justify-content: flex-start;
        /* Align items to start so scrolling works naturally */
        padding: 0 10px;
    }

    .sub-nav-item {
        font-size: 10px;
        padding: 6px 12px;
    }

    /* =========================================
       Content Area Adjustments
       ========================================= */
    #main-content {
        padding-top: 20px;
    }

    .content-layout {
        width: 92vw;
        flex-direction: column;
        margin-top: 25px;
        /* Reduced gap under navs */
        height: auto;
        min-height: 50vh;
    }

    .notepad-container {
        flex: none;
        width: 100%;
        transform: none !important;
        /* Disable 3D tilt on mobile for better readability */
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
    }

    .notepad-container:hover {
        transform: none !important;
    }

    .notepad {
        padding: 30px 20px 30px 40px;
        min-height: auto;
    }

    .info-title {
        font-size: 2rem;
    }

    .info-subtitle {
        font-size: 0.8rem;
        margin-bottom: 15px;
    }

    .info-desc {
        font-size: 0.95rem;
    }

    /* Hide the dial section on mobile */
    .dial-section {
        display: none !important;
    }

    /* =========================================
       Rosmerta Gallery Adjustments
       ========================================= */
    .content-layout.rosmerta-mode {
        margin-top: 60px;
    }

    .rosmerta-gallery {
        grid-template-columns: repeat(2, 1fr);
        /* 2 columns on tablet/large phones */
        gap: 6px;
    }

    /* =========================================
       About Section Adjustments
       ========================================= */
    .about-container {
        flex-direction: column;
        gap: 20px;
    }

    .about-image {
        display: flex;
        justify-content: center;
        width: 100%;
    }

    .about-image img {
        width: 180px;
        height: 180px;
        border-radius: 50%;
        object-fit: cover;
    }

    /* =========================================
       Tech & Swipe Hint Adjustments
       ========================================= */
    .brick-wall {
        justify-content: center;
    }

    .brick {
        padding: 6px 14px;
        font-size: 0.8rem;
    }

    /* =========================================
       Mobile Swipe Controls (Pagination & Arrows)
       ========================================= */
    .mobile-swipe-controls {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 20px;
        margin-top: 15px;
        width: 100%;
        padding: 5px 0;
    }

    .swipe-btn {
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.15);
        border-radius: 50%;
        width: 38px;
        height: 38px;
        color: rgba(255, 255, 255, 0.7);
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        backdrop-filter: blur(10px);
        transition: background 0.2s, transform 0.1s, color 0.2s;
        flex-shrink: 0;
    }

    .swipe-btn:active {
        transform: scale(0.92);
        background: rgba(255, 255, 255, 0.15);
        color: #fff;
    }

    .swipe-btn svg {
        width: 20px;
        height: 20px;
    }

    .swipe-center {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
    }

    .swipe-text {
        font-family: 'Montserrat', sans-serif;
        font-size: 10px;
        color: rgba(255, 255, 255, 0.4);
        text-transform: uppercase;
        letter-spacing: 2px;
        animation: pulseFade 2s infinite ease-in-out;
    }

    .swipe-dots {
        display: flex;
        gap: 6px;
        align-items: center;
        justify-content: center;
        min-height: 10px;
        /* reserve space */
    }

    .swipe-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.2);
        transition: all 0.3s ease;
    }

    .swipe-dot.active {
        width: 8px;
        height: 8px;
        background: var(--accent-color, #fff);
        /* Will be set via JS */
        box-shadow: 0 0 8px var(--accent-glow, rgba(255, 255, 255, 0.5));
    }

    @keyframes pulseFade {

        0%,
        100% {
            opacity: 0.3;
        }

        50% {
            opacity: 0.8;
        }
    }
}

/* Even Smaller Screens (e.g., iPhone SE, narrow phones) */
@media screen and (max-width: 480px) {
    .rosmerta-gallery {
        grid-template-columns: 1fr;
        /* 1 column on very small screens */
    }
}