/*
Author: Akash Mannil
Date: December 4, 2024
File Name: team.css
*/

/* Base Styles for Mobile First */

/* General Layout */
main {
    padding: 0 20px;
}

h1, h2 {
    font-size: 24px;
    margin-bottom: 20px;
}

h1 {
    color: #551A8B;
}

section, article {
    margin-bottom: 30px;
}

section p, article p {
    font-size: 14px;
    line-height: 1.8;
}

/* Team Members Section */
.team-members {
    display: grid;
    grid-template-columns: 1fr; /* Single column layout for mobile */
    gap: 20px;
    box-shadow: 1px 2px 7px 0px black;
    text-align: center;
    border-radius: 15px;
    padding: 10px;
    background-color: #a89e45d1;
    color: #fff;
}

.team-members figcaption, .employee-spotlight figcaption, .employee-spotlight h2 {
    color: #fff;
}

.team-member {
    text-align: center;
}

figure {
    margin-bottom: 15px;
}

figure img {
    height: 175px;
    border-radius: 8px;
    box-shadow: 0px 2px 6px 0px black;
}

figcaption {
    font-weight: bold;
    color: #333;
}

figure.employee-spotlight-img {
    text-align: center;
}

/* New Section Styling */
ul {
    list-style-type: none;
    padding-left: 0;
}

.why-join-us ul li{
    font-weight: bold;
}

.why-join-us ul li::before {
    font-family: Arial, sans-serif;
    content: "\2713";
    font-size: 24px;
    color: #a89e45;
    left: 0;
    padding-right: 10px;
    position: relative;
    top: 2px;
}

.employee-spotlight {
    box-shadow: 1px 2px 7px 0px black;
    text-align: center;
    border-radius: 15px;
    padding: 10px;
    background-color: #a89e45d1;
    color: #fff;
}


/* Media Queries for Responsiveness */

/* Tablet Styles */
@media (min-width: 768px) {
    h1, h2 {
        font-size: 28px;
    }

    section p, article p {
        font-size: 15px;
    }

    .team-members {
        grid-template-columns: repeat(2, 1fr); /* Two-column layout for tablets */
    }
}

/* Desktop Styles */
@media (min-width: 1024px) {
    h1, h2 {
        font-size: 32px;
    }

    section p, article p {
        font-size: 16px;
    }

    .team-members {
        grid-template-columns: repeat(3, 1fr); /* Three-column layout for desktops */
    }
}