/* --- MOBILE HEADER FIX --- */
@media screen and (max-width: 768px) {
    .main-header {
        flex-direction: column;
        /* Stacks the logo and buttons vertically */
        text-align: center;
        gap: 1.5rem;
        padding: 1.5rem 1rem;
        height: auto;
        /* Allows the header to expand as needed */
    }

    .header-logo {
        justify-content: center;
        /* Centers the icon and text */
        width: 100%;
    }

    .header-actions {
        justify-content: center;
        flex-wrap: wrap;
        /* Allows buttons to drop to the next line if needed */
        width: 100%;
        gap: 0.8rem;
    }

    .logo-text h1 {
        font-size: 2.2rem;
        /* Slightly adjusts font size for mobile */
    }
}

/* --- TOGGLEABLE 3x3 GRID MODE --- */
.grid-3x3-mode {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 2px !important;
    padding: 2px !important;
}

.grid-3x3-mode .gallery-item {
    margin: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.grid-3x3-mode .gallery-img-wrapper {
    aspect-ratio: 1 / 1 !important; /* Perfect squares */
    border-radius: 0 !important;
}

.grid-3x3-mode .gallery-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 0 !important;
}

/* Hide captions in grid mode to keep it clean */
.grid-3x3-mode .gallery-caption-box {
    display: none !important;
}

/* Shrink buttons for the tiny squares */
.grid-3x3-mode .overlay-tag {
    font-size: 0.6rem !important;
    padding: 0.2rem 0.3rem !important;
}

/* Add a nice style for our toggle button */
.view-toggle-btn {
    background: white;
    border: 1px solid #ffd8e4;
    color: #ff527b;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
}

.view-toggle-btn:hover {
    background: #fff0f5;
}