/* Page-specific styles for homepage.html */

/*
 * CAROUSEL CONTAINER
 * This holds the entire carousel section.
 */
.carousel-container {
    /* Ensures the container doesn't exceed the viewport width. */
    max-width: 100vw;
    /* Hides the parts of the slides that overflow the container. */
    overflow: hidden;
    /* Centers the carousel on the page. */
    margin: 2rem auto;
    /* Sets a max-width for larger screens. */
    max-width: 1200px;
    /* Adds a subtle shadow for depth. */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/*
 * CAROUSEL TRACK
 * This is the element that will move, creating the scrolling effect.
 */

.carousel-track {
    display: flex;
    width: max-content;
    animation: scroll 48s linear infinite;
    animation-play-state: running;
}

.carousel-container:hover .carousel-track {
    /* Pauses the animation on hover. */
    animation-play-state: paused;
}


/*
 * KEYFRAMES FOR SCROLLING ANIMATION
 * Defines the movement of the carousel track.
 * The 'scroll' animation moves the track from its starting position to the end.
 */
@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}


/*
 * INDIVIDUAL SLIDE STYLING
 */

.slide {
    width: 400px;
    height: 300px;
    flex: 0 0 400px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

/*
 * SLIDE OVERLAY
 * The semi-transparent layer that appears over the image.
 */
.overlay {
    /* Positions the overlay absolutely within the slide. */
    position: absolute;
    /* Aligns the overlay to the bottom of the slide. */
    bottom: 0;
    /* Spans the full width of the slide. */
    width: 100%;
    /* Sets a semi-transparent black background. */
    background-color: rgba(0, 0, 0, 0.5);
    /* Sets the text color to be light. */
    color: #fff;
    /* Centers the text inside the overlay. */
    text-align: center;
    /* Adds padding. */
    padding: 1rem;
    /* Sets the font to the heading font. */
    font-family: var(--heading-font);
    /* Initially transparent and invisible. */
    opacity: 0;
    /* Smooth transition for the opacity effect. */
    transition: opacity 0.3s ease;
}

/*
 * OVERLAY VISIBILITY ON HOVER
 * Makes the overlay visible when hovering over the slide's link.
 */
.slide a:hover .overlay {
    opacity: 1;
}

/*
 * CALL TO ACTION (CTA) CONTAINER
 * Styles the container for the "Most Recent" button.
 */
.cta-container {
    /* Centers the button on the page. */
    text-align: center;
    /* Adds space above and below the button. */
    margin: 2rem 0;
}

/*
 * BIO SNIPPET SECTION
 * Styles the bottom section containing the headshot and bio text.
 */
.bio-snippet {
    /* Uses flexbox for layout. */
    display: flex;
    /* Aligns items to the center vertically. */
    align-items: center;
    /* Centers the section on the page. */
    justify-content: center;
    /* Adds padding. */
    padding: 2rem;
    /* Allows wrapping on smaller screens. */
    flex-wrap: wrap;
    /* Sets a max-width for better readability on large screens. */
    max-width: 900px;
    /* Centers the container itself. */
    margin: 0 auto;
}

.headshot {
    /* Sets a fixed width for the headshot image. */
    width: 250px;
    /* Sets a fixed height. */
    height: 250px;
    /* Makes the image circular. */
    border-radius: 50%;
    /* Ensures the image content fits well within the circle. */
    object-fit: cover;
    /* Adds space between the image and the text. */
    margin-right: 2rem;
    /* Adds a border using the accent color. */
    border: 3px solid var(--primary-accent);
}

.bio-text {
    /* Allows the text container to grow and fill available space. */
    flex: 1;
    /* Sets a minimum width to prevent it from becoming too narrow. */
    min-width: 300px;
}

.bio-buttons {
    /* Adds space above the buttons. */
    margin-top: 1rem;
}

.bio-buttons .btn {
    /* Adds space between the two buttons. */
    margin-right: 1rem;
}

/*
 * RESPONSIVE ADJUSTMENTS
 * Styles for screens smaller than 768px.
 */
@media (max-width: 768px) {
    .bio-snippet {
        /* Stacks the headshot and text vertically. */
        flex-direction: column;
        /* Centers the content. */
        text-align: center;
    }

    .headshot {
        /* Removes the right margin when stacked. */
        margin-right: 0;
        /* Adds bottom margin to separate from text. */
        margin-bottom: 1.5rem;
    }

    .bio-buttons .btn {
        /* Removes right margin. */
        margin-right: 0;
        /* Adds bottom margin to stack buttons. */
        margin-bottom: 1rem;
        /* Makes buttons take up more width. */
        display: inline-block;
    }
}