/* Reset and Basic Styling */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100vh;
    font-family: Arial, sans-serif;

    .container {
        height: 100vh;
        display: flex;
        overflow: hidden;

        /* Styles for tablets and phones */
        @media screen and (max-width: 768px) {
            flex-direction: column;
        }
    }

    .section {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        text-align: center;
        font-size: 2em;
        text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);
        background-size: cover;
        background-position: center;
        position: relative;
        transition: flex 0.5s ease-in-out, filter 0.3s ease;
    }

    .section.one {
        background-image: url('images/jeffrey.jpg');
    }

    .section.two {
        background-image: url('images/amy.jpg');
    }

    .section.three {
        background-image: url('images/jonathan.jpg');
    }

    /* Expand Effect: hover (desktop), keyboard focus, and .active (touch tap) all behave the same */
    .section:hover,
    .section:focus-within,
    .section.active {
        flex: 3;

        .social-icons {
            opacity: 1; /* Show on hover/focus/tap */
        }

        .section-label {
            top: 10%; /* Moves to upper third when expanded */
            transform: translateY(-50%);
            font-size: 2em; /* Increase size when expanded */
        }
    }

    /* Non-expanded sections get grayscaled out */
    .container:hover .section:not(:hover),
    .container:focus-within .section:not(:focus-within),
    .container:has(.section.active) .section:not(.active) {
        filter: grayscale(100%);
    }

    /* Social Icons (initially hidden) */
    .social-icons {
        position: absolute;
        bottom: 20%;
        left: 50%;
        transform: translate(-50%, 50%);
        display: flex;
        gap: 15px;
        opacity: 0;
        transition: opacity 0.3s ease-in-out;

        /* Icon Styles */
        .icon {
            color: white;
            font-size: 1.5em;
            text-decoration: none;
            transition: transform 0.3s, color 0.3s;
        }

        .icon:hover,
        .icon:focus-visible {
            transform: scale(1.2);
            color: #ffcc00; /* Optional highlight color on hover */
        }
    }

    /* Section Label Styling */
    .section-label {
        position: absolute;
        top: 50%; /* Initially in the center */
        transform: translateY(-50%);
        transition: top 0.3s ease, transform 0.3s ease, font-size 0.3s ease;
        font-size: 1em; /* Default font size */
        z-index: 1;
        font-weight: bold;
    }
}