@import url("gallery-lightbox.css");

/* =========================================================================
   1. Base & Global Styles
   ========================================================================= */
:root {
    --bg: #f5f6f8;
    --surface: #ffffff;
    --surface-alt: #eef1f5;
    --text: #171a1f;
    --text-muted: #5f6875;
    --dark: #20242b;
    --accent: #2563eb;
    --accent-secondary: #06b6d4;
    --border: #e2e6eb;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 12px 32px rgba(0, 0, 0, 0.08);
}


body {
    font-family: Inter, "Segoe UI", Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
}

h1, h2, h3, h4, h5, h6 {
    font-family: Inter, "Segoe UI", Arial, sans-serif;
    font-weight: 700;
}

p {
    line-height: 1.6;
}

img {
    max-width: 100%;
    height: auto;
}

video {
    max-width: 100%;
    height: auto;
}


/* =========================================================================
   2. Reusable Layouts & Containers
   ========================================================================= */
.container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    padding: 20px;
}

.content {
    flex: 1;
    padding: 20px;
    max-width: 600px;
    box-sizing: border-box;
}

.image {
    flex: 1;
    padding: 20px;
    max-width: 600px;
    box-sizing: border-box;
    text-align: center;
}

.video {
    flex: 1;
    padding: 20px;
    max-width: 600px;
    box-sizing: border-box;
    text-align: center;
}

/* =========================================================================
   3. Global Components
   ========================================================================= */
/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: white;
    text-decoration: none;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1;
    cursor: pointer;
    transition: background .14s ease, border-color .14s ease, color .14s ease;
    border: 1px solid rgba(255,255,255,0.06);
    padding: 8px 12px;
    background: #555;
}

.btn-primary {
    color: #fff;
    background: #2563eb;
    border-color: #2563eb;
}

    .btn-primary:hover {
        background: #1d4ed8;
        border-color: #1d4ed8;
    }

.btn-secondary {
    color: #1f2937;
    background: #fff;
    border-color: #dbe1e8;
}

    .btn-secondary:hover {
        background: #f8fafc;
        border-color: #cbd5e1;
    }


.btn svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
    display: block;
}

.btn-icon {
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 50%;
    justify-content: center;
    background: #555;
    border: 1px solid rgba(255,255,255,0.06);
}

.btn-icon:hover,
.btn-icon:focus {
    background: #777;
    outline: none;
}

.btn-text {
    background: transparent;
    border: 1px solid transparent;
    padding: 8px 12px;
    color: white;
}

.btn-text:hover,
.btn-text:focus {
    border-color: rgba(255,255,255,0.18);
    background: rgba(255,255,255,0.03);
    outline: none;
}

/* =========================================================================
   4. Header
   ========================================================================= */

header {
    background: rgba(32, 36, 43, 0.96);
    color: #fff;
    padding: 14px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}


.header-inner {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 1100px;
    margin: 0 auto;
}

.brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 220px;
}

.brand h1 {
    margin: 0;
    font-size: 1.25rem;
}

.brand p {
    margin: 2px 0 0 0;
    font-size: 0.95rem;
}

/* =========================================================================
   5. Navigation Buttons
   ========================================================================= */
.nav-groups {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 350px;
}

.nav-left .btn,
.nav-right .btn {
    background: transparent;
    border-color: transparent;
    color: rgba(255, 255, 255, 0.78);
}

    .nav-left .btn:hover,
    .nav-right .btn:hover {
        color: #fff;
        background: rgba(255, 255, 255, 0.08);
    }



/* =========================================================================
   6. Hero Title
   ========================================================================= */
.hero {
    position: relative;
    overflow: hidden;
    background: radial-gradient( circle at 20% 20%, rgba(37, 99, 235, 0.22), transparent 35% ), radial-gradient( circle at 80% 80%, rgba(6, 182, 212, 0.16), transparent 35% ), #20242b;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: clamp(80px, 12vw, 150px) 20px;
}

.hero-inner {
    max-width: 1100px;
    width: 100%;
}

.hero h1 {
    margin: 0;
    font-size: clamp(2.5rem, 8vw, 6rem);
    line-height: 1;
    font-weight: 800;
    letter-spacing: -1px;
}

.hero p {
    margin: 14px 0 0;
    font-size: clamp(1rem, 2.5vw, 1.6rem);
    color: rgba(255, 255, 255, 0.68);
}

/* =========================================================================
   7. Intro Section
   ========================================================================= */
#intro {
    background-color: #dde3ee;
    padding: 50px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 50px;
}

#intro .content {
    flex: 0 1 800px;
    padding: 10px;
    max-width: 800px;
    box-sizing: border-box;
}

#intro .image {
    flex: 0 0 380px;
    padding: 10px;
    max-width: 380px;
    box-sizing: border-box;
    text-align: center;
}

    #intro .image img {
        width: 100%;
        max-width: 360px;
        aspect-ratio: 1 / 1;
        object-fit: cover;
        border-radius: 50%;
        display: block;
        margin: 0 auto;
        box-shadow: 0 4px 18px rgba(15, 23, 42, 0.06);
        border: 6px solid #ffffff;
    }

/* =========================================================================
   8. Skills Section
   ========================================================================= */
.skills-section {
    background-color: #ffffff;
    padding: 56px 20px;
}

.skills-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

.skills-header {
    text-align: center;
    margin-bottom: 8px;
}

.skills-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    align-items: start;
}

.skill-group {
    background: #f8fafc;
    border: 1px solid #e6eef6;
    padding: 16px;
    border-radius: 10px;
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.06);
}

.skill-group h4 {
    margin: 0 0 10px 0;
    font-size: 1rem;
    color: #111827;
}

.skill-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

    .skill-list li {
        background: #fff;
        border: 1px solid #e2e8f0;
        padding: 6px 10px;
        border-radius: 999px;
        font-size: 0.9rem;
        color: #111827;
        box-shadow: 0 4px 18px rgba(15, 23, 42, 0.06);
    }

.proficiency {
    margin-top: 12px;
    display: grid;
    gap: 8px;
}

.proficiency .row {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    color: #334155;
}

.bar {
    height: 8px;
    background: #e6eef6;
    border-radius: 6px;
    overflow: hidden;
    margin-top: 6px;
}

.bar > span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #2563eb, #06b6d4);
    border-radius: 6px;
}

/* =========================================================================
   9. Features Section
   ========================================================================= */
.features-section {
    background-color: #f4f4f4;
    padding: 64px 20px;
}

.features-inner {
    max-width: 1280px;
    margin: 0 auto;
}

.features-header {
    text-align: center;
    margin-bottom: 30px;
    color: #222;
}

.features-header h2 {
    margin: 0 0 8px 0;
    font-size: 2rem;
    line-height: 1.1;
}

.features-header p {
    margin: 0;
    color: #555;
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
}

.three-cols {
    margin-top: 22px;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    align-items: start;
}

.feature {
    background: #fff;
    padding: 24px;
    border-radius: 10px;
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.06);
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 360px;
}

.feature h3 {
    margin: 0 0 8px 0;
    font-size: 1.2rem;
}

.feature p {
    margin: 0;
    color: #333;
    line-height: 1.5;
    flex: 1;
}

.feature-btn {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: #222;
    background: #fafafa;
    border: 1px solid #e2e8f0;
    padding: 12px;
    border-radius: 8px;
    width: 100%;
    box-sizing: border-box;
    transition: transform .12s ease, box-shadow .12s ease;
}

    .feature-btn:hover,
    .feature-btn:focus {
        transform: translateY(-4px);
        box-shadow: 0 4px 18px rgba(15, 23, 42, 0.06);
        outline: none;
    }

.feature-btn img {
    width: 100%;
    height: 170px;
    object-fit: cover;
    border-radius: 6px;
    display: block;
}

.feature-btn .btn-label {
    font-weight: 700;
    font-size: 0.98rem;
    color: #111;
}

/* =========================================================================
   10. Dynamic Grid Section
   ========================================================================= */

.dynamic-section {
    background-color: #f4f4f4; /* Matches existing sections, tweak if needed */
    padding: 64px 20px;
}

.dynamic-inner {
    max-width: 1280px;
    margin: 0 auto;
}

/* 
   Auto-fit dynamically adds columns based on available space.
   minmax(250px, 1fr) ensures buttons don't get smaller than 250px wide 
   but will stretch to fill remaining space (1fr).
*/
.dynamic-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 28px;
    padding: 0;
    margin-top: 22px;
    align-items: stretch;
}

/* =========================================================================
   11. Split Content Section (Media & Text)
   ========================================================================= */

.split-section {
    background-color: #ffffff; /* Or #f4f4f4 if you want to match other sections */
    padding: 64px 20px;
}

.split-inner {
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    /* Two equal columns. Change to '1.5fr 1fr' if you want the media larger than the text */
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: start; /* Aligns both columns to the top */
}

/* The side containing the text */
.split-content {
    display: flex;
    flex-direction: column;
    gap: 16px; /* Spacing between title, paragraphs, buttons, etc. */
    margin-top: var(--split-margin-top, 60px);
}

    .split-content h2 {
        margin: 0 0 8px 0;
        font-size: 2rem;
        color: #222;
        line-height: 1.1;
    }

    .split-content p {
        margin: 0;
        color: #444;
    }

/* The side containing the image or video */
.split-media {
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.06);
}

    .split-media img,
    .split-media video {
        width: 100%;
        height: auto;
        display: block;
        object-fit: cover;
    }

/* Responsive stacking for smaller screens */
@media (max-width: 900px) {
    .split-inner {
        grid-template-columns: 1fr; /* Stack into a single column */
        gap: 32px;
    }

    /* Optional: Swap the order so media is always on top on mobile */
    .split-media {
        order: -1;
    }
}

/* =========================================================================
   12. Image Gallery Section
   ========================================================================= */
.gallery-section {
    background-color: #f4f4f4;
    padding: 64px 20px;
}

.gallery-inner {
    max-width: 1280px;
    margin: 0 auto;
}

.gallery-header {
    text-align: center;
    margin-bottom: 30px;
}

    .gallery-header h2 {
        margin: 0 0 8px 0;
        font-size: 2rem;
        color: #222;
    }

/* 
   Auto-fit Grid: Stretches images to fill rows. 
   minmax(300px, 1fr) ensures images are at least 300px wide.
*/
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 16px;
    padding: 0;
}

.gallery-item {
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.08);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

    .gallery-item:hover {
        transform: translateY(-3px);
        box-shadow: 0 14px 32px rgba(15, 23, 42, 0.12);
    }


    .gallery-item img {
        width: 100%;
        height: 100%;
        object-fit: cover; /* Forces the image to fill the squarish area without stretching */
        display: block;
        transition: transform 0.3s ease;
    }

    /* Add a slight zoom effect on hover for interactivity */
    .gallery-item:hover img,
    .gallery-item:focus img {
        transform: scale(1.05);
    }
    .gallery-item::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient( 180deg, transparent 55%, rgba(0, 0, 0, 0.18) );
        opacity: 0;
        transition: opacity 0.3s ease;
        pointer-events: none;
    }

    .gallery-item:hover::after {
        opacity: 1;
    }


/* =========================================================================
   13. Contact Section
   ========================================================================= */

.contact-section {
    background-color: #333;
    color: #ffffff;
    padding: 48px 20px;
}

.contact-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    gap: 32px;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
}

.contact-left {
    flex: 1 1 380px;
    min-width: 260px;
}

.contact-right {
    flex: 1 1 380px;
    min-width: 260px;
}

.contact-left h3,
.contact-right h3 {
    margin: 0 0 8px 0;
    color: #fff;
    font-size: 1.25rem;
}

.contact-left p {
    margin: 0 0 12px 0;
    color: rgba(255,255,255,0.9);
    line-height: 1.6;
}

.contact-links {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
}

.contact-links a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    text-decoration: none;
    padding: 8px 12px;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 6px;
    background: rgba(255,255,255,0.02);
    margin-right: 0;
}

.contact-links a:hover,
.contact-links a:focus {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.12);
}

.contact-links a svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.contact-form {
    display: grid;
    gap: 10px;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 10px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.03);
    color: #fff;
    box-sizing: border-box;
    font-size: 0.95rem;
    resize: vertical;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color: rgba(255,255,255,0.65);
}

.contact-form button {
    background: #06b6d4;
    color: #032027;
    border: none;
    padding: 10px 14px;
    border-radius: 6px;
    font-weight: 700;
    cursor: pointer;
    width: fit-content;
}

.contact-download {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    background: rgba(255,255,255,0.02);
    padding: 8px 12px;
    border-radius: 6px;
    font-weight: 500;
    text-decoration: none;
    border: 1px solid rgba(255,255,255,0.06);
    transition: background 0.2s ease, border-color 0.2s ease;
}

.contact-download:hover,
.contact-download:focus {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.12);
    outline: none;
}

/* =========================================================================
   14. Media Queries (Ordered Descending)
   ========================================================================= */

@media (max-width: 1100px) {
    .features-inner {
        padding: 0 16px;
    }
}

@media (max-width: 900px) {
    .three-cols {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 720px) {
    .header-inner {
        flex-direction: column;
        align-items: center;
    }

    .brand {
        align-items: center;
        text-align: center;
    }

    .nav-groups {
        width: 100%;
    }

    .nav-spacer {
        display: none;
    }

    .nav-left,
    .nav-right {
        justify-content: center;
        flex-wrap: wrap;
    }

    .btn-icon {
        width: 40px;
        height: 40px;
    }

    .hero {
        padding: 48px 16px;
    }

    .image img {
        max-width: 200px;
    }

    #intro {
        padding: 28px 12px;
    }

    .skills-inner {
        gap: 18px;
    }

    .contact-inner {
        gap: 18px;
    }

    .contact-left,
    .contact-right {
        min-width: 100%;
    }
}

@media (max-width: 600px) {
    .three-cols {
        grid-template-columns: 1fr;
    }

    .feature {
        min-height: auto;
    }

    .feature-btn img {
        height: 160px;
    }
}

/* =========================================================================
   15. Game Jams Section Exceptions
   ========================================================================= 
    This section is bad, but it is necessary to override the default background and text colors for the Game Jams section.
    Don't do this, this is bad, but it will work for now. -J
*/


/* Game Jams section — pure white background and adjusted text color */
#game-jams {
    background-color: #ffffff;
}

#game-jams .features-header h2 {
    color: #111; /* ensure strong contrast on white */
}

#game-jams .features-header p {
    color: #475569; /* keep the descriptive paragraph colour */
}