/* Landing Grid Layout */
#landing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    width: 100%;
    max-width: 800px;
    /* Constrain width to keep squares manageable */
    margin: 2rem auto;
    margin: 2rem auto;
}

/* Individual Cell Container */
.grid-cell {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    /* Perfectly square */
    background-color: #000000;
    /* Deep black as requested */
    border: 1px solid var(--pw-highlight);
    overflow: hidden;
    cursor: pointer;
    perspective: 1000px;
    /* Enable 3D transform for the swing */
    display: flex;
    align-items: center;
    /* Vertically center text */
}

/* The Swing Element (Semicircle) */
.grid-semicircle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 50%;
    background-color: var(--pw-highlight);
    border-radius: 0 100px 100px 0;
    /* Right-facing semicircle (approx radius) */
    /* Wait, border-radius 50% of height? Use percentages for responsiveness */
    border-radius: 0 100% 100% 0;
    /* Semicircle shape */

    transform-origin: right center;
    /* Hinge on the center spine */
    transition: transform 0.6s cubic-bezier(0.4, 0.0, 0.2, 1);
    z-index: 10;

    /* Ensure the backface is visible or styled? 
       If we flip 180, we see the "back". 
       Let's keep it simple: solid color both sides.
    */
    transform-style: preserve-3d;
}

/* Hover Effect: Swing to Right */
.grid-cell:hover .grid-semicircle {
    transform: rotateY(-180deg);
}

/* Text Elements */
.grid-title {
    position: absolute;
    right: 0;
    width: 50%;
    /* Right half */
    text-align: center;
    padding: 1rem;

    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    color: var(--pw-light-text);
    text-transform: uppercase;
    letter-spacing: 0.1em;

    transition: opacity 0.3s ease;
    z-index: 5;
    opacity: 1;
}

.grid-desc {
    position: absolute;
    left: 0;
    width: 50%;
    /* Left half */
    text-align: center;
    padding: 1rem;

    font-family: 'Cormorant Garamond', serif;
    font-size: 1.1rem;
    color: var(--pw-light-text);

    transition: opacity 0.3s ease;
    transition-delay: 0.2s;
    /* Wait for flip */
    z-index: 5;
    opacity: 0;
}

/* Fade Toggles */
.grid-cell:hover .grid-title {
    opacity: 0;
    /* Hidden by swing */
}

.grid-cell:hover .grid-desc {
    opacity: 1;
    /* Revealed */
}

/* --- Mobile Responsiveness (Small Screens OR Large Portrait Phones) --- */
@media (max-width: 1024px),
(max-width: 1400px) and (orientation: portrait) {
    #landing-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
        padding: 0 1rem;
        /* Add padding to container so it doesn't touch edges */
    }

    .grid-cell {
        aspect-ratio: auto;
        /* Remove square constraint */
        height: 80px;
        /* Fixed height bar */
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 0 1.5rem 0 0;
        /* Padding on right for text, left handled by accent */
    }

    /* Transform Semicircle into Left Cropped Accent */
    .grid-semicircle {
        position: absolute;
        left: -10px;
        /* "Bump" to Left */
        top: 50%;
        width: 50px;
        /* Radius */
        height: 120%;
        /* Diameter > Cell Height (80px) for crop effect */
        border-radius: 0 100px 100px 0;
        /* Semicircle facing right */
        transform: translateY(-50%);
        /* Center vertically */
        transform-origin: center;
        transition: background-color 0.3s ease;
        /* Smooth color change */
        background-color: var(--pw-highlight);
        z-index: 1;
    }

    .grid-cell:hover .grid-semicircle {
        transform: translateY(-50%);
        /* Maintain position, disable swing */
        background-color: var(--pw-muted-highlight);
        /* Change color on hover */
    }

    /* Title: Align Left, pushed by semicircle */
    .grid-title {
        position: static;
        width: auto;
        text-align: left;
        padding-left: 4rem;
        /* Space from semicircle (50px + padding) */
        font-size: 1.2rem;
        opacity: 1 !important;
        transform: none;
        z-index: 5;
    }

    /* Description: Align Right, Always Visible (Dimmed) */
    .grid-desc {
        position: static;
        width: auto;
        text-align: right;
        padding: 0;
        font-size: 0.9rem;
        opacity: 0.6;
        font-style: italic;
        transform: none;
        color: var(--pw-light-text);
    }

    /* Disable hover flip effects for mobile/touch */
    .grid-cell:hover .grid-title {
        opacity: 1;
    }

    .grid-cell:hover .grid-desc {
        opacity: 0.8;
        color: var(--pw-highlight);
    }
}