/*
============================================================
HOME PAGE STYLES
============================================================

File:
    home.css

Purpose:
    Contains styles used specifically by the portfolio landing
    page.

Shared styles such as the main container, body, footer,
variables, and accessibility rules remain in global.css.
*/


/*
============================================================
ABOUT SECTION
============================================================

Provides a brief professional introduction and communicates
the main technical theme of the portfolio.

Spacing is intentionally compact so the landing page does not
feel excessively stretched vertically.
*/

.about-section {
    padding: 2rem 0 1.5rem;
}


/*
============================================================
ABOUT SECTION CONTAINER
============================================================

Adds a horizontal divider underneath the About section.

The divider is placed on the inner container instead of the
entire section so it aligns with the rest of the page content.
*/

.about-container {
    padding-bottom: 2rem;

    border-bottom: 2px solid var(--border-color);
}


/*
============================================================
ABOUT HEADLINE
============================================================

The clamp() function allows the heading to automatically
resize depending on the screen width while maintaining
reasonable minimum and maximum sizes.
*/

.about-section h2 {
    max-width: 750px;

    margin-bottom: 1.5rem;

    font-size: clamp(2rem, 5vw, 3.5rem);

    line-height: 1.08;
    letter-spacing: -0.04em;

    color: var(--text-primary);
}


/*
============================================================
HEADLINE HIGHLIGHT
============================================================

Allows part of the About heading to use the site's primary
accent color.

Example:

<h2>
    Software to
    <span class="highlight">Digital Hardware.</span>
</h2>
*/

.highlight {
    color: var(--primary-color);
}


/*
============================================================
ABOUT DESCRIPTION
============================================================

Controls the appearance of each paragraph in the About section.

The maximum width keeps lines from becoming excessively long
on larger displays.
*/

.about-description {
    max-width: 780px;

    margin-bottom: 1rem;

    color: var(--text-secondary);

    font-size: 1.05rem;
    line-height: 1.7;
}


/*
Remove unnecessary spacing underneath the final paragraph.
*/

.about-description:last-child {
    margin-bottom: 0;
}


/*
============================================================
PORTFOLIO NAVIGATION
============================================================

Contains the Resume, Projects, Skills, and Contact cards.

The small top padding keeps the Explore section visually
connected to the About section.
*/

.portfolio-navigation {
    padding: 1rem 0 3rem;
}


/*
============================================================
NAVIGATION GRID
============================================================

Creates a two-column card layout on desktop displays.

Responsive rules later in this file convert the grid to one
column on smaller screens.
*/

.navigation-grid {
    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 1.25rem;
}


/*
============================================================
CARD COLOR THEMES
============================================================

Each navigation card receives its own accent color.

The --card-color variable allows the same card component to
use different colors without duplicating the entire card CSS.
*/


/* Resume card */

.navigation-card:nth-child(1) {
    --card-color: var(--resume-color);
}


/* Projects card */

.navigation-card:nth-child(2) {
    --card-color: var(--projects-color);
}


/* Skills card */

.navigation-card:nth-child(3) {
    --card-color: var(--skills-color);
}


/* Contact card */

.navigation-card:nth-child(4) {
    --card-color: var(--contact-color);
}


/*
============================================================
NAVIGATION CARD
============================================================

Shared styling for every navigation card.

The card-specific --card-color variable controls the top
border, heading, arrow, and hover border color.
*/

.navigation-card {
    min-height: 170px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    padding: 1.5rem;

    background-color: var(--surface-color);

    border: 1px solid var(--border-color);

    /*
    The thicker top border gives each section its own color
    without making the entire card overly bright.
    */

    border-top: 5px solid var(--card-color);

    border-radius: var(--border-radius);

    /*
    A subtle shadow separates the cards from the page
    background.
    */

    box-shadow:
        0 4px 15px rgba(23, 32, 51, 0.05);

    /*
    Smooth transitions provide visual feedback when the
    visitor interacts with a card.
    */

    transition:
        transform var(--transition-speed) ease,
        border-color var(--transition-speed) ease,
        box-shadow var(--transition-speed) ease;
}


/*
============================================================
NAVIGATION CARD HOVER
============================================================

Raises the card slightly and increases its shadow when the
visitor moves the mouse over it.
*/

.navigation-card:hover {
    transform: translateY(-5px);

    border-color: var(--card-color);

    box-shadow:
        0 14px 30px rgba(23, 32, 51, 0.12);
}


/*
============================================================
CARD HEADING
============================================================

The heading uses the card's individual accent color.
*/

.navigation-card h3 {
    margin-bottom: 0.5rem;

    font-size: 1.6rem;
    line-height: 1.2;

    color: var(--card-color);
}


/*
============================================================
CARD DESCRIPTION
============================================================

Keeps supporting text neutral so the card's accent color
remains focused on important elements.
*/

.navigation-card p {
    max-width: 350px;

    color: var(--text-secondary);

    line-height: 1.6;
}


/*
============================================================
CARD ARROW
============================================================

The arrow indicates that the entire card is clickable and
leads to another portfolio page.
*/

.card-arrow {
    align-self: flex-end;

    font-size: 1.6rem;
    font-weight: 700;

    color: var(--card-color);

    transition:
        transform var(--transition-speed) ease;
}


/*
Moves the arrow slightly toward the right when its card is
hovered.
*/

.navigation-card:hover .card-arrow {
    transform: translateX(6px);
}


/*
============================================================
RESPONSIVE DESIGN - TABLETS
============================================================

Maintains the two-column layout when enough horizontal space
is available while slightly reducing text and card dimensions.
*/

@media (max-width: 900px) {

    .site-header {
        padding: 1rem 0;
    }

    .about-section {
        padding: 1.75rem 0 1.25rem;
    }

    .about-container {
        padding-bottom: 1.75rem;
    }

    .navigation-card {
        min-height: 165px;
    }

}


/*
============================================================
RESPONSIVE DESIGN - MOBILE
============================================================

Changes the navigation from two columns to one column and
reduces spacing for smaller displays.
*/

@media (max-width: 700px) {

    /*
    Keep the sticky header compact so it does not occupy too
    much vertical screen space on mobile devices.
    */

    .site-header {
        padding: 1rem 0;
    }


    /*
    Reduce the name size slightly on small screens.
    */

    .site-name {
        font-size: 2rem;
    }


    /*
    Allow the professional title to wrap naturally.
    */

    .site-title {
        margin-top: 0.35rem;

        font-size: 0.9rem;
        line-height: 1.4;
    }


    /*
    Maintain compact spacing around the About section.
    */

    .about-section {
        padding: 1.5rem 0 1rem;
    }


    /*
    Reduce the space before the horizontal divider.
    */

    .about-container {
        padding-bottom: 1.5rem;
    }


    /*
    Reduce the headline size on smaller displays.
    */

    .about-section h2 {
        margin-bottom: 1.25rem;

        font-size: clamp(2rem, 10vw, 2.75rem);
    }


    /*
    Slightly reduce paragraph text size.
    */

    .about-description {
        font-size: 1rem;
        line-height: 1.65;
    }


    /*
    Convert the navigation grid into a single column.
    */

    .navigation-grid {
        grid-template-columns: 1fr;

        gap: 1rem;
    }


    /*
    Reduce card height because each card now occupies the
    entire available width.
    */

    .navigation-card {
        min-height: 150px;

        padding: 1.35rem;
    }


    /*
    Reduce spacing around the navigation section.
    */

    .portfolio-navigation {
        padding: 1rem 0 2.5rem;
    }

}


/*
============================================================
REDUCED MOTION ACCESSIBILITY
============================================================

Some visitors configure their operating system to reduce
animations and movement.

When that preference is enabled, hover movement is disabled
while preserving the visual appearance of the cards.
*/

@media (prefers-reduced-motion: reduce) {

    .navigation-card,
    .card-arrow {
        transition: none;
    }

    .navigation-card:hover {
        transform: none;
    }

    .navigation-card:hover .card-arrow {
        transform: none;
    }

}