@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,600;0,800;0,900;1,400&display=swap');

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --navy: #0f2a52;
    --gold: #f5c000;
    --page: #f7f5f0;
    --surface: #ffffff;
    --border: #e0dbd0;
    --text: #1a1714;
    --text-mid: #4a4540;
    --text-dim: #7a7268;
}

body {
    font-family: 'Inter', sans-serif;
    background: var(--page);
    color: var(--text);
    margin: 0;
}

/* HEADER */
.site-header {
    background: var(--navy);
    padding: 18px 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header-title {
    font-size: 20px;
    font-weight: 700;
    display: flex;
    align-items: center;
}

.brand {
    color: var(--gold); 
    display: flex;
    align-items: center;
}

.educator { /* Style for "Michael" - now yellow */
    color: var(--gold);
}

.name { /* Style for "Rudzinski NYC Metro" - now white */
    color: white;
}

.divider {
    color: white;
    margin: 0 8px;
}

.header-cta {
    background: #FFD700; /* Gold */
    color: black;
    font-weight: 700;
    padding: 10px 18px;
    border-radius: 8px;
    text-decoration: none;
    border: 2px solid black;
}

.header-cta:hover {
    filter: brightness(0.95);
}

/* BLOCK STYLES - White background container */
.block {
    max-width: 1080px;
    margin: 0 auto 48px auto;
    background: var(--surface);
    border-radius: 24px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    padding: 48px 36px 56px;
    text-align: center;
}

/* Center content inside blocks */
.block > div {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    text-align: left; /* Left-align inner content */
}

/* MAIN SECTION TITLES (Robotics, Computer Science) - Updated Style */
.block .title {
    /* font-size: clamp(36px, 6vw, 68px); */
    /* font-weight: 900; */
    /* letter-spacing: -0.04em; */
    /* line-height: 1; */
    /* color: var(--navy); */
    /* margin-bottom: 44px; */
    /* text-align: center; */
    font-size: clamp(36px, 6vw, 68px) !important; /* Apply requested size */
    font-weight: 900 !important;                   /* Apply requested weight */
    letter-spacing: -0.04em !important;            /* Apply requested tracking */
    line-height: 1 !important;                     /* Apply requested line height */
    color: var(--navy) !important;                 /* Apply requested navy color */
    margin-bottom: 44px !important;                /* Apply requested margin */
    text-align: center !important;                 /* Apply requested alignment */
    background: transparent !important;            /* Ensure no background */
    display: block !important;                     /* Ensure block display */
    padding: 0 !important;                         /* Ensure no padding */
    border-radius: 0 !important;                   /* Ensure no border radius */
    width: auto !important;                        /* Ensure auto width */
}

/* SUBTITLE (Foundations, Game Development, Implementation) */
.block .subtitle {
    color: var(--text-mid);           /* Mid grey text */
    font-size: 18px;                 /* Font size */
    font-weight: 600;                /* Semi-bold */
    margin-bottom: 24px;             /* Bottom margin */
    text-align: center;              /* Center align */
}

/* PROJECTS GRID */
.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Responsive columns */
    gap: 20px;                       /* Gap between cards */
    margin-bottom: 40px;             /* Bottom margin for the grid */
}

/* PROJECT CARD */
.project-card {
    background: var(--surface);       /* White card background */
    border: 1px solid var(--border);  /* Light border */
    border-radius: 16px;             /* Rounded corners */
    overflow: hidden;                /* Contain image rounding */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}

/* PROJECT TITLE INSIDE CARD - Fixed Style */
.project-card .project-title {
    background: var(--navy) !important; /* Dark Navy background */
    color: var(--gold) !important;      /* Yellow text */
    display: block !important;          /* Full width block */
    padding: 10px 15px !important;      /* Internal padding */
    font-size: 16px !important;         /* Font size */
    font-weight: 800 !important;        /* Extra bold */
    text-align: center !important;      /* Center text */
    margin: 0;                          /* Remove default margin */
}

/* PROJECT IMAGE */
.project-img {
    width: 100%;                     /* Full width */
    height: auto;                    /* Maintain aspect ratio */
    display: block;                  /* Remove inline spacing */
    border-bottom: 1px solid var(--border); /* Border below image */
}

/* PROJECT DESCRIPTION */
.project-desc {
    padding: 15px;                   /* Internal padding */
    color: var(--text-mid);         /* Mid grey text */
    font-size: 14px;               /* Font size */
    line-height: 1.5;              /* Line height */
}

/* LINKS */
a {
    text-decoration: none;
}

.inline-link {
    color: inherit; /* Use inherited color or specify */
}

.inline-link:hover {
    text-decoration: underline;
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .block {
        padding: 32px 20px 40px;
        margin: 0 16px 32px 16px;
    }

    .site-header {
        padding: 18px 20px;
    }

    .header-title {
        font-size: 16px;
    }

    .header-cta {
        padding: 8px 14px;
        font-size: 14px;
    }
}

/* Force project images to be squares and crop them */
.project-img {
    width: 100%;          /* Take full width of the container */
    height: 50%;          /* Take full width of the container */
    object-fit: cover;    /* Crop the image to fill the defined area */
    object-position: center; /* Center the image within the area */
    display: block;       /* Ensure it behaves as a block element */
    border-bottom: 1px solid var(--border); /* Keep existing border if desired */
}