/* =========================================
   MODERN BENTO GRID SYSTEM (2026 Standard)
   ========================================= */

:root {
    /* Color Palette - Dark Professional */
    --bg-deep: #121212;
    --surface: #1E1E1E;
    --surface-hover: #2a2a2a;
    --text-primary: #E0E0E0;
    --text-secondary: #A0A0A0;
    --accent: #52bad5; /* Legacy Teal */
    --accent-glow: rgba(82, 186, 213, 0.2);
    
    /* Spacing */
    --gap: 16px;
    --radius: 12px;
}

body {
    background-color: var(--bg-deep);
    color: var(--text-primary);
    font-family: 'Inter', sans-serif;
    margin: 0;
    padding: 20px;
    line-height: 1.6;
}

/* THE GRID CONTAINER */
.bento-grid {
    display: grid;
    max-width: 1200px;
    margin: 0 auto;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto;
    gap: var(--gap);
}

/* GENERIC CARD STYLES */
.card {
    background-color: var(--surface);
    border-radius: var(--radius);
    padding: 24px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    overflow: hidden;
    position: relative;
    border: 1px solid rgba(255,255,255,0.05);
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.3);
}

/* ==================
   HOMEPAGE SPECIFIC
   ================== */
.hero {
    grid-column: span 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(145deg, var(--surface), #252525);
}

.hero-content h1 { font-size: 3rem; margin: 0; font-weight: 800; letter-spacing: -1px; }
.hero-content h2 { font-size: 1.2rem; font-weight: 400; color: var(--text-secondary); margin: 10px 0 20px 0; }
.hero-content .accent { color: var(--accent); font-weight: 600; }
.hero-image img { width: 150px; height: 150px; border-radius: 50%; object-fit: cover; border: 3px solid var(--accent); }

/* Buttons & Socials */
.action-buttons { display: flex; gap: 10px; }
.btn { text-decoration: none; padding: 10px 20px; border-radius: 6px; font-weight: 600; font-size: 0.9rem; }
.btn.primary { background-color: var(--accent); color: #121212; }
.btn.secondary { border: 1px solid var(--text-secondary); color: var(--text-primary); }
.btn:hover { opacity: 0.9; }

.socials { grid-column: span 1; display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.social-link { display: block; text-decoration: none; color: var(--text-secondary); padding: 10px; background: rgba(255,255,255,0.03); border-radius: 6px; text-align: center; transition: all 0.2s; }
.social-link:hover { background: var(--surface-hover); color: var(--accent); }
.social-link.highlight { border: 1px solid var(--accent); color: var(--accent); }

/* Resume & Projects */
.resume-snapshot { grid-column: span 1; grid-row: span 3; }
.resume-snapshot h3 { margin-top: 0; border-bottom: 2px solid var(--accent); padding-bottom: 10px; display: inline-block; }
.skill-group { margin-bottom: 20px; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tags span { background: rgba(82, 186, 213, 0.1); color: var(--accent); padding: 4px 8px; font-size: 0.8rem; border-radius: 4px; }
.tiny { font-size: 0.85rem; color: var(--text-secondary); }

.project-header { grid-column: span 3; padding: 15px 24px; display: flex; align-items: center; }
.project-header h3 { margin: 0; font-size: 1.5rem; }

.project-card { grid-column: span 1; height: 250px; position: relative; text-decoration: none; padding: 0; }
.card-bg { width: 100%; height: 100%; background-size: cover; background-position: center; transition: transform 0.3s; filter: grayscale(100%); }
.project-card:hover .card-bg { transform: scale(1.1); filter: grayscale(0%); }
.card-overlay { position: absolute; bottom: 0; left: 0; width: 100%; background: linear-gradient(transparent, rgba(0,0,0,0.9)); padding: 20px; box-sizing: border-box; }
.card-overlay h4 { margin: 0; color: white; font-size: 1.2rem; }
.card-overlay p { margin: 5px 0 0; color: #ccc; font-size: 0.9rem; }
.arrow { position: absolute; right: 20px; bottom: 20px; color: var(--accent); font-size: 1.5rem; opacity: 0; transform: translateX(-10px); transition: all 0.2s; }
.project-card:hover .arrow { opacity: 1; transform: translateX(0); }

.main-footer { grid-column: span 4; text-align: center; margin-top: 40px; color: var(--text-secondary); font-size: 0.9rem; }

.tiny-desc {
    font-size: 0.8rem !important;
    opacity: 0.8;
    line-height: 1.4;
    margin-top: 8px !important;
    display: block; /* Ensures it sits on its own line */
}

/* =========================================
   GALLERY EXTENSION (DrawnAtDusk)
   ========================================= */

/* Top Navigation Bar */
.nav-bar {
    grid-column: span 4;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 30px;
}
.nav-title {
    font-weight: 800;
    font-size: 1.2rem;
    color: var(--text-primary);
    text-decoration: none;
    letter-spacing: 2px;
}
.nav-links a {
    color: var(--text-secondary);
    text-decoration: none;
    margin-left: 20px;
    font-weight: 600;
    transition: color 0.2s;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 1px;
}
.nav-links a:hover, .nav-links a.active {
    color: var(--accent);
}

/* Gallery Intro Section */
.gallery-intro {
    grid-column: span 4;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 40px;
}
.intro-text { flex: 2; }
.intro-text h2 { color: var(--accent); font-size: 2rem; margin-top: 0; }
.intro-text p { color: var(--text-secondary); font-size: 1.1rem; }
.intro-logo { flex: 1; text-align: center; }
.intro-logo img { width: 180px; filter: drop-shadow(0 0 10px rgba(82, 186, 213, 0.3)); }

/* The Art Grid (Replaces old .gallery floats) */
.gallery-section {
    grid-column: span 4;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

/* Individual Art Piece */
.art-card {
    background-color: var(--surface);
    border-radius: var(--radius);
    padding: 15px;
    border: 1px solid rgba(255,255,255,0.05);
    transition: transform 0.2s;
}
.art-card:hover {
    transform: translateY(-5px);
    border-color: var(--accent);
}
.art-thumb-wrapper {
    width: 100%;
    height: 200px;
    overflow: hidden;
    border-radius: 8px;
    margin-bottom: 15px;
}
.art-thumb-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}
.art-card:hover .art-thumb-wrapper img {
    transform: scale(1.05);
}
.art-card h4 {
    margin: 10px 0 5px 0;
    color: var(--accent);
    font-size: 1.1rem;
}
.art-card .tag {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 1px;
    display: block;
    margin-bottom: 10px;
}
.art-card .tag a { color: var(--text-secondary); text-decoration: underline; }
.art-card .details {
    font-size: 0.85rem;
    color: #888;
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 10px;
    margin-top: 10px;
}

/* Responsive */
@media (max-width: 900px) {
    .bento-grid { grid-template-columns: 1fr; }
    .hero, .socials, .resume-snapshot, .project-header, .project-card, .main-footer, .nav-bar, .gallery-intro, .gallery-section { grid-column: span 1; }
    .hero { flex-direction: column-reverse; text-align: center; }
    .gallery-intro { flex-direction: column-reverse; text-align: center; }
}

/* =========================================
   LIGHTBOX "SYMMETRICAL STEALTH" PATCH
   (Invisible arrows, 50/50 Split, Fade on Hover)
   ========================================= */

/* 1. DEFINE ZONES & RESET VISIBILITY */
.lb-nav a.lb-prev, 
.lb-nav a.lb-next {
    width: 50% !important; /* FORCED SYMMETRY: Fixes the 34/64 split */
    opacity: 0 !important; /* Hidden by default */
    background-image: none !important; 
    transition: opacity 0.3s ease-in-out;
}

/* 2. REVEAL ON HOVER */
.lb-nav a.lb-prev:hover,
.lb-nav a.lb-next:hover {
    opacity: 1 !important; 
    background-color: rgba(0, 0, 0, 0.1); 
}

/* 3. DRAW THE ARROWS (Using Code) */
.lb-nav a.lb-prev::before {
    content: "❮";
    font-family: sans-serif;
    font-size: 50px;
    color: #fff;
    text-shadow: 0 2px 5px rgba(0,0,0,0.8);
    position: absolute;
    top: 50%;
    left: 20px; /* Anchored to the left */
    transform: translateY(-50%);
}

.lb-nav a.lb-next::before {
    content: "❯";
    font-family: sans-serif;
    font-size: 50px;
    color: #fff;
    text-shadow: 0 2px 5px rgba(0,0,0,0.8);
    position: absolute;
    top: 50%;
    right: 20px; /* Anchored to the right */
    transform: translateY(-50%);
}

/* 4. CLOSE BUTTON */
.lb-data .lb-close {
    background-image: none !important;
    width: auto !important;
    opacity: 0.6 !important;
    transition: opacity 0.2s;
}

.lb-data .lb-close:hover {
    opacity: 1 !important;
}

.lb-data .lb-close::after {
    content: "✕"; 
    font-family: sans-serif;
    font-size: 28px;
    color: #ccc;
    font-weight: bold;
}