/*
========================================
MODERN PORTFOLIO THEME (v3 - Final)
========================================
*/

/* 1. ROOT & VARIABLES
---------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Roboto+Condensed:wght@700&display=swap');

:root {
    --bg-dark: #121212;
    --bg-medium: #1e1e1e;
    --bg-light: #2a2a2e;
    --text-primary: #e0e0e0;
    --text-secondary: #a0a0a0;
    --accent-primary: #00c6ff;
    --accent-primary-rgb: 0, 198, 255;
    --accent-secondary: #e94560;
    --accent-secondary-rgb: 233, 69, 96;
    --font-heading: 'Roboto Condensed', sans-serif;
    --font-body: 'Lato', sans-serif;
    --content-max-width: 900px; /* --- FIX --- New variable to control content width */
}

/* 2. GENERAL BODY & TYPOGRAPHY
---------------------------------------- */
body {
    font-family: var(--font-body);
    line-height: 1.7;
    margin: 0;
    padding: 0;
    background-color: var(--bg-dark);
    color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
    scroll-behavior: smooth;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--text-primary);
    margin-bottom: 0.5em;
    font-weight: 700;
    letter-spacing: 1px;
    line-height: 1.2;
}

h1 { font-size: clamp(3em, 8vw, 5em); }
h2 { font-size: clamp(2em, 6vw, 3em); }
h3 { font-size: clamp(1.8em, 5vw, 2.2em); }

p {
    margin-bottom: 1.5em;
    color: var(--text-secondary);
    max-width: 75ch; /* Optimal line length for reading */
}

/* --- FIX --- Constrain and center text blocks in single-column view */
.project-grid:not(.two-column) p,
.project-grid:not(.two-column) ul,
.project-grid:not(.two-column) .cta-button {
    margin-left: auto;
    margin-right: auto;
    max-width: var(--content-max-width);
}
.project-grid:not(.two-column) .cta-button {
    display: table;
}
.project-grid:not(.two-column) ul {
    padding-left: 20px;
    box-sizing: border-box; /* Ensure padding is included in width calculation */
}

a {
    color: var(--accent-primary);
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: var(--accent-secondary);
}

section { padding: 80px 0; }

/* 3. HEADER & NAVIGATION (No Changes)
---------------------------------------- */
header {
    background-color: rgba(18, 18, 18, 0.8);
    padding: 15px 0;
    border-bottom: 1px solid var(--bg-light);
    position: sticky;
    top: 0;
    z-index: 1000;
    backdrop-filter: blur(10px);
}
header .container { display: flex; justify-content: space-between; align-items: center; }
.site-title { font-size: 1.5em; font-weight: bold; color: var(--text-primary); letter-spacing: 2px; }
nav ul { display: flex; margin: 0; padding: 0; list-style: none; }
nav ul li { margin-left: 30px; }
nav ul li a { color: var(--text-primary); font-weight: 700; font-size: 1em; padding: 5px 0; position: relative; letter-spacing: 1px; }
nav ul li a::after { content: ''; position: absolute; width: 0; height: 2px; background: var(--accent-secondary); left: 50%; transform: translateX(-50%); bottom: -5px; transition: width 0.3s ease; }
nav ul li a:hover::after { width: 100%; }

/* 4. HERO SECTION (No Changes)
---------------------------------------- */
#hero { min-height: 70vh; display: flex; align-items: center; text-align: center; background: radial-gradient(circle, var(--bg-medium) 0%, var(--bg-dark) 70%); }
#hero h1 { color: var(--text-primary); text-transform: uppercase; }
#hero h2 { color: var(--accent-primary); border-bottom: none; padding-bottom: 0; font-size: clamp(1.5em, 4vw, 2em); margin-bottom: 20px; }
#hero .location { font-size: 1.2em; color: var(--text-secondary); margin-bottom: 30px; }
.social-links-hero a { color: var(--text-secondary); font-size: 2em; margin: 0 15px; transition: transform 0.3s ease, color 0.3s ease; }
.social-links-hero a:hover { color: var(--accent-primary); transform: scale(1.2); }
/* Hero Video Styling */
.hero-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Important: Scale video to fill the container */
    z-index: 0; /* Place behind the text content */
}

/* Ensure content is above the video and legible */
#hero .container {
    position: relative; /* Needs to be relative or absolute for z-index to work */
    z-index: 2; /* Ensure text content is above the video AND the overlay */
    /* You might want to also add display: flex; align-items: center; justify-content: center;
       if your hero-content isn't centering vertically */
}

#hero .hero-content {
    position: relative; /* Ensure hero-content respects its own z-index */
    z-index: 2; /* Make sure this is also explicitly higher than video and overlay */
    /* This might not be strictly necessary if .container has z-index 2 and position: relative,
       but it adds an extra layer of certainty. */
}


/* Subtle gradient overlay for better text readability */
#hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(18, 18, 18, 0.5) 0%, rgba(18, 18, 18, 0.8) 100%);
    z-index: 1; /* Place this overlay also above the video (0) but below content (2) */
}
/* 5. PROJECTS SECTION
---------------------------------------- */
#projects { background-color: var(--bg-dark); }
#projects h2 { text-align: center; margin-bottom: 80px; position: relative; }
#projects h2::after { content: ''; position: absolute; width: 80px; height: 3px; background: var(--accent-primary); bottom: -15px; left: 50%; transform: translateX(-50%); }

.project-item { margin-bottom: 100px; padding-top: 40px; border-top: 1px solid var(--bg-light); }
.project-grid > .project-item:first-child { border-top: none; padding-top: 0; }

.project-grid:not(.two-column) .project-item h3,
.project-grid:not(.two-column) .project-item .subtitle,
.project-grid:not(.two-column) .project-item .project-meta {
    text-align: center;
}

.project-item h3 { color: var(--accent-primary); margin-bottom: 10px; }
.project-item p.subtitle { font-size: 1.2em; color: var(--text-secondary); margin-top: 0; margin-bottom: 20px; }
.project-item .project-meta { font-size: 0.9em; color: var(--text-secondary); margin-bottom: 25px; }
.project-item .project-meta strong { color: var(--text-primary); }

/* --- FIX --- This section is heavily modified to handle your HTML and spacing */
.project-media {
    margin: 30px 0;
    display: flex;
    flex-direction: column;
    gap: 25px; /* Adds space between .media-placeholder and .image-gallery */
}
/* Constrain media width in single-column view and center it */
.project-grid:not(.two-column) .project-media {
    max-width: var(--content-max-width);
    margin-left: auto;
    margin-right: auto;
}

/* --- FIX --- Target nested iframes and images robustly */
.media-placeholder iframe,
.media-placeholder img {
    display: block;
    width: 100%;
    border-radius: 8px;
    border: 1px solid var(--bg-light);
    background-color: #000;
}
.media-placeholder iframe {
    aspect-ratio: 16 / 9;
}
/* Add spacing between multiple videos/images INSIDE a media-placeholder */
.media-placeholder {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* --- FIX --- Modern, robust image gallery */
.image-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 15px;
}
.image-gallery img {
    width: 100%;
    height: 100%;
    aspect-ratio: 4 / 3; /* A more standard photo aspect ratio */
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--bg-light);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.image-gallery img:hover {
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(0, 198, 255, 0.3);
    z-index: 10;
}

/* >>> OPTIONAL TWO-COLUMN GRID (No Changes) <<< */
.project-grid.two-column { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; }
.project-grid.two-column .project-item { margin-bottom: 0; }
@media (max-width: 992px) {
    .project-grid.two-column { grid-template-columns: 1fr; gap: 100px; }
}

/* 6. CTA & FOOTER (No Changes)
---------------------------------------- */
.cta-button { display: inline-block; padding: 12px 28px; background: var(--accent-primary); color: var(--bg-dark); border-radius: 5px; text-align: center; font-weight: bold; font-family: var(--font-heading); font-size: 1.1em; transition: all 0.3s ease; border: 2px solid var(--accent-primary); }
.cta-button:hover { background: transparent; color: var(--accent-primary); transform: translateY(-3px); }
.cta-button i { margin-right: 8px; }
footer { background-color: var(--bg-dark); color: var(--text-secondary); padding: 40px 0; text-align: center; border-top: 1px solid var(--bg-light); margin-top: 0; }
footer .social-links a { font-size: 1.5em; margin: 0 10px; color: var(--text-secondary); }
footer .social-links a:hover { color: var(--accent-primary); }

/* 7. RESPONSIVE DESIGN (No Changes)
---------------------------------------- */
@media (max-width: 768px) {
    section { padding: 60px 0; }
    header .container { flex-direction: column; text-align: center; }
    .site-title { margin-bottom: 15px; }
    nav ul { justify-content: center; flex-wrap: wrap; }
    nav ul li { margin: 5px 15px; }
}

/*
========================================
7. SKILLS SECTION (OVERHAULED)
========================================
*/

.skills-section {
    padding: 80px 0;
    background-color: var(--bg-dark); /* Ensure consistent background */
}

.skills-section h2 {
    text-align: center;
    margin-bottom: 3rem;
    color: var(--text-primary);
    position: relative;
    padding-bottom: 20px; /* Space for the underline effect */
}

.skills-section h2::after {
    content: '';
    position: absolute;
    width: 80px;
    height: 3px;
    background: var(--accent-primary); /* Uses new primary accent */
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

.skills-section .skills-intro,
.skills-section .skills-outro {
    text-align: center;
    max-width: 850px; /* A bit wider for introductory text */
    margin: 0 auto 3rem auto; /* Top/bottom margin, auto left/right for centering */
    color: var(--text-secondary);
    line-height: 1.6;
}

.skills-section .skills-outro {
    margin-top: 3rem;
    margin-bottom: 0;
}

.skills-grid {
    display: grid;
    /* Responsive grid: 3 columns on large screens, 2 on medium, 1 on small */
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px; /* Space between cards */
    padding: 0 20px; /* Padding for the grid itself on smaller screens */
    max-width: 1200px; /* Max width for the grid to prevent too wide cards */
    margin: 0 auto; /* Center the grid */
}

.skill-card {
    background: var(--bg-medium); /* Darker background for cards */
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.25); /* More pronounced shadow */
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Distribute content nicely */
    border: 1px solid transparent; /* Prepare for border on hover */
}

.skill-card:hover {
    transform: translateY(-8px); /* More noticeable lift */
    box-shadow: 0 12px 25px rgba(var(--accent-primary-rgb), 0.2); /* Accent colored shadow on hover using RGB */
    background-color: var(--bg-light); /* Slightly lighter on hover */
    border-color: var(--accent-primary); /* Subtle accent border on hover */
}

.skill-card .card-title {
    color: var(--accent-primary); /* Primary accent color for title */
    font-size: 1.6em; /* Slightly larger title */
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    line-height: 1.3;
}

.skill-card .card-icon {
    font-size: 1.2em; /* Smaller icon */
    color: #FF7550; /* Secondary accent for icon */
    margin-right: 12px; /* Space between icon and title text */
    min-width: 20px; /* Prevent text from overlapping icon on wrap */
}

.skill-list {
    list-style: none; /* Remove default bullet points */
    padding: 0;
    margin: 0;
}

.skill-list li {
    position: relative;
    padding-left: 25px; /* Space for custom bullet */
    margin-bottom: 12px; /* Space between list items */
    color: var(--text-secondary);
    font-size: 1.05em; /* Slightly larger text for readability */
    line-height: 1.5;
}

.skill-list li:last-child {
    margin-bottom: 0; /* No margin after the last item */
}

.skill-list li::before {
    content: '\2022'; /* Unicode character for a simple bullet (•) */
    position: absolute;
    left: 0;
    top: 0;
    color: var(--accent-primary); /* Accent color for the custom bullet */
    font-weight: bold;
    font-size: 1.2em; /* Larger bullet for emphasis */
    line-height: inherit; /* Align with text */
}

/* --- Ensure other parts of the site also use the new accents --- */
/* For existing rules in your CSS */
a {
    color: var(--accent-primary); /* Links will now use the new teal */
}
a:hover {
    color: var(--accent-secondary); /* Link hover will use the new orange */
}
#projects h2::after {
    background: var(--accent-primary); /* Project title underline */
}
.cta-button {
    background: var(--accent-primary); /* CTA button primary color */
    border: 2px solid var(--accent-primary);
}
.cta-button:hover {
    color: var(--accent-primary); /* CTA button text on hover */
}
.social-links-hero a:hover, footer .social-links a:hover {
    color: var(--accent-primary); /* Social links hover */
}
nav ul li a::after {
    background: var(--accent-secondary); /* Nav hover underline */
}

/* Responsive adjustments */
@media (max-width: 992px) {
    .skills-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Adjust for smaller screens */
        gap: 25px;
    }
}

@media (max-width: 768px) {
    .skills-section {
        padding: 60px 0; /* Less padding on smaller screens */
    }
    .skills-section h2 {
        font-size: clamp(2em, 8vw, 3em); /* Adjust h2 size for mobile */
        margin-bottom: 2rem;
    }
    .skills-section .skills-intro,
    .skills-section .skills-outro {
        margin: 0 auto 2rem auto;
        padding: 0 15px; /* Ensure text doesn't touch edges */
    }
    .skills-grid {
        grid-template-columns: 1fr; /* Single column on mobile */
        padding: 0 15px; /* Padding for the grid itself */
        gap: 20px;
    }
    .skill-card {
        padding: 20px;
    }
    .skill-card .card-title {
        font-size: 1.4em;
        margin-bottom: 15px;
    }
    .skill-list li {
        font-size: 1em;
        margin-bottom: 10px;
    }
}

/* Contact Section Styles */
#contact {
    background-color: var(--bg-dark);
    padding: 80px 0;
}

#contact h2 {
    text-align: center;
    margin-bottom: 40px;
    position: relative;
}

#contact h2::after {
    content: '';
    position: absolute;
    width: 80px;
    height: 3px;
    background: var(--accent-primary);
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
}

#contact p {
    text-align: center;
    max-width: 600px;
    margin: 0 auto 40px;
    color: var(--text-secondary);
}

.contact-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    margin-bottom: 40px;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 1.2em;
}

.contact-item i {
    color: var(--accent-primary);
    font-size: 1.4em;
}

.contact-item a {
    color: var(--text-primary);
    transition: color 0.3s ease;
}

.contact-item a:hover {
    color: var(--accent-primary);
}

.social-links-contact {
    display: flex;
    justify-content: center;
    gap: 25px;
    margin-top: 30px;
}

.social-links-contact a {
    color: var(--text-secondary);
    font-size: 1.8em;
    transition: all 0.3s ease;
}

.social-links-contact a:hover {
    color: var(--accent-primary);
    transform: translateY(-3px);
}

@media (max-width: 768px) {
    #contact {
        padding: 60px 0;
    }
    
    .contact-item {
        font-size: 1.1em;
    }
    
    .social-links-contact {
        gap: 20px;
    }
    
    .social-links-contact a {
        font-size: 1.6em;
    }
}