/*home.css is the css styles for the home page structure*/

/*home page styles*/
#main {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 32px;
}

.home-container {
    width: min(1440px, calc(100% - 64px)); /* makes the max size the home contant can be is 1440 and creates 32 px padding on left right right, it also adjust to other screens with media querries*/
    min-height: 100vh;
    
    display: grid;
    grid-template-rows: 575px 350px; /*top row is max 575px and the second is 350px*/
    gap: 19px; /*the gap between the rows are 19px*/
}

/*all the sections that share classes are styled below*/

.featured-projects-section, .skills-overview-section, .recent-updates-section {
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-primary);
    padding: 24px;
}

.section-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px; /* adds space below the header */
}

.section-title {
    color: var(--text-primary);
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
}

.section-link {
    color: var(--primary-emerald);
    font-size: 15px;
    font-weight: 500;
    text-decoration: underline;
    transition: color 0.2s ease; /*creates a simple animation for the hover color effect*/
}

.section-link:hover {
    color: var(--text-primary); /* changes the color of the link when hovered over */
}

/*featured projects section*/
.featured-projects-section {
    width: 100%;
}

.featured-projects-grid {
    width: 100%;
    height: calc(100% - 72px); /* subtracts the height of the section header from the total height of the section */

    display: grid;
    grid-template-columns: repeat(3, 1fr); /* creates 3 equal columns for the grid */
    gap: 38px; /* creates a 38px gap between the grid items */
}

/* Temporary placeholders until project cards are added */
.featured-projects-grid:empty {
    border: 1px dashed var(--error);
}

/*bottom grid structure*/
.home-bottom-grid {
    display: grid;
    grid-template-columns: 2fr 1fr; /* creates a 2:1 ratio for the two sections */
    gap: 19px; /*same gap size as the rows*/
}

/*all the styling for the skills overview section*/
.skills-overview-section {
    display: flex;
    flex-direction: column;
}

/*this uses flex becuase it allows the cards to fill the section like a grid, this way the card styling is taken into consideration*/
.skills-overview-list {
    width: 100%;
    max-height: 350px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: start;
    overflow: hidden;
}

.skills-overview-section > .section-link {
    align-self: center; /* centers the link horizontally within the section */
    margin-top: 24px; /* adds space above the link */
}

/* recent updates section */
.recent-updates-section {
    display: flex;
    flex-direction: column;
}

.recent-updates-list {
    display: flex;
    flex-direction: column;
}

/* Responsive Layout Temporary */
@media (max-width: 1100px){
    #main {
        padding: 24px;
    }
    .home-container {
        grid-template-rows: auto;
    }
    .featured-projects-grid {
        height: auto;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px;
    }
    .home-bottom-grid {
        grid-template-columns: 1fr;
    }
}