:root {
    /* Colors - Light Mode (matching the design) */
    --bg-color: #f3f4f6; /* Light gray background */
    --card-bg: #ffffff;
    --text-primary: #111827;
    --text-secondary: #6b7280;
    --accent-blue: #0077b5; /* LinkedIn Blue */
    --border-radius: 1.5rem;
    --spacing: 1.5rem;
    
    /* Grid */
    --grid-gap: 1.5rem;

    /* Fonts */
    --font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    
    /* Skeleton removed */
    --skeleton-base: #e5e7eb;
    --skeleton-highlight: #f3f4f6;
}

/* Dark Mode Support */
[data-theme="dark"] {
    --bg-color: #111010;
    --card-bg: #1f1f1f;
    --text-primary: #ededed;
    --text-secondary: #a1a1a1;
    --skeleton-base: #252525;
    --skeleton-highlight: #303030;
}

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

body {
    background-color: var(--bg-color);
    color: var(--text-primary);
    font-family: var(--font-family);
    line-height: 1.5;
    min-height: 100vh;
    padding: 2rem 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.container {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
}

/* Bento Grid */
.bento-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: var(--grid-gap);
    auto-rows: minmax(200px, auto); /* Default for mobile */
}

/* .bento-grid.loaded removed */

@media (min-width: 768px) {
    .bento-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .bento-grid {
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(3, 240px); /* Fixed height for desktop alignment */
        auto-rows: 240px; 
    }
    
    /* Desktop Layout Assignments */
    .card-bio { grid-column: span 2; }
    .card-map { grid-column: span 1; }
    .card-project { grid-column: span 1; grid-row: span 2; }
    .card-music { grid-column: span 1; }
    .card-story { grid-column: span 2; }
    .card-toggle { grid-column: span 1; }
    .card-social { grid-column: span 1; }
    .card-contact { grid-column: span 2; }
}

/* Skeleton Loading Removed */

/* Card Styles */
.card {
    background-color: var(--card-bg);
    border-radius: var(--border-radius);
    padding: var(--spacing);
    display: flex;
    flex-direction: column;
    /* transition: transform 0.2s ease, box-shadow 0.2s ease;  <-- REMOVED conflict */
    transition: box-shadow 0.2s ease, background-color 0.3s ease, color 0.3s ease; /* Added theme transitions */
    overflow: hidden;
    position: relative;
    border: 1px solid rgba(0,0,0,0.05);
}

.card:hover {
    transform: translateY(-2px); /* This will snap if transition is removed, need to handle carefully */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

/* Re-apply transform transition only when NOT dragging to allow hover effect */
body:not(.dragging-active) .card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Drag and Drop Styles (SortableJS) */
.drag-handle {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    background: var(--card-bg);
    color: var(--text-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 20;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.card:hover .drag-handle {
    opacity: 1;
}

/* Ensure handle is visible on touch devices if hover isn't available */
@media (hover: none) {
    .drag-handle {
        opacity: 0.8;
    }
}

.drag-handle:active {
    cursor: grabbing;
}

/* SortableJS Classes */
.sortable-ghost {
    opacity: 0.4;
    background: var(--skeleton-base); /* Indicate placeholder */
    border: 2px dashed var(--accent-blue);
    transform: scale(0.95); /* Slight shrink for placeholder */
}

/* Fallback Drag Element (when forceFallback: true) */
.sortable-fallback {
    /* Critical for drag and drop to work with fallback */
    pointer-events: none;
    z-index: 9999;
    
    /* Animation styles */
    opacity: 1 !important; /* Override drag ghost opacity */
    /* cursor: grabbing; -- REMOVED block cursor behavior from element */
    background: var(--card-bg);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    transform: rotate(2deg) scale(1.02); /* Tilt and slight scale */
    border: 1px solid var(--accent-blue);
    
    /* Ensure content is visible */
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* Original dragged element in list is usually hidden by Sortable or styled as ghost
   .sortable-drag is applied to the element being dragged in the DOM list.
   When forceFallback is true, this element is what stays in the list (but is moved around). 
   Usually we want this to be invisible or the ghost, but Sortable handles 'sortable-ghost' separately.
*/
.sortable-drag {
    opacity: 0; /* Hide original element while dragging clone */
}

/* Prevent iframes from stealing drag events while dragging */
body.dragging-active {
    cursor: grabbing !important;
    user-select: none; /* Prevent text selection while dragging */
}

body.dragging-active iframe {
    pointer-events: none;
}

/* Bio Card */
.card-bio {
    justify-content: center;
}
.bio-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}
.profile-img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    background-color: #ddd;
}
.bio-text h1 {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
}

/* Map Card */
.card-map {
    padding: 0;
    background-color: #e5e7eb;
    position: relative;
}
.map-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
}
.location-pin {
    position: absolute;
    bottom: 1rem;
    left: 1rem;
    background: white;
    padding: 0.5rem;
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* Project Card */
.card-project {
    background-color: #000;
    color: white;
    padding: 0;
    position: relative;
    min-height: 400px; /* Force minimum height on mobile */
}
.project-content {
    padding: 2rem;
    z-index: 2;
}
.project-preview {
    position: absolute;
    top: 50%;
    left: 2rem;
    right: 0;
    bottom: 0;
    background: #1a1a1a;
    border-top-left-radius: 1rem;
    transform: rotate(-5deg) translateY(20px);
    transform-origin: top left;
    transition: transform 0.3s ease;
}
.card-project:hover .project-preview {
    transform: rotate(0deg) translateY(10px);
}

/* Music Card */
.card-music {
    padding: 0;
    background-color: #000; /* Fallback */
    border: none;
}
.music-info h3 {
    font-size: 1.5rem;
    line-height: 1.1;
}

/* Story Card */
.card-story {
    justify-content: space-between;
}
.story-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: #f3f4f6;
    border-radius: 2rem;
    font-size: 0.875rem;
    font-weight: 500;
    width: fit-content;
    margin-top: 1rem;
}

/* Toggle Card */
.card-toggle {
    display: flex;
    justify-content: center;
    align-items: center;
}
.theme-switch {
    width: 60px;
    height: 30px;
    background: #ddd;
    border-radius: 30px;
    position: relative;
    cursor: pointer;
    transition: background-color 0.3s ease;
}
.switch-handle {
    width: 26px;
    height: 26px;
    background: white;
    border-radius: 50%;
    position: absolute;
    top: 2px;
    left: 2px;
    transition: left 0.3s ease, background-color 0.3s ease;
}

/* Social/LinkedIn Card */
.card-social {
    background-color: var(--accent-blue);
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
}
.social-icon {
    font-size: 4rem;
    font-weight: bold;
}
.arrow-icon {
    position: absolute;
    bottom: 1rem;
    left: 1rem;
    background: rgba(255,255,255,0.2);
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

/* Contact Card */
.card-contact {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1rem;
}
.contact-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: var(--text-primary);
    color: var(--card-bg);
    border-radius: 2rem;
    font-weight: 500;
    width: fit-content;
    margin-top: auto;
    transition: opacity 0.2s ease, background-color 0.3s ease, color 0.3s ease;
}
.contact-btn:hover {
    opacity: 0.9;
}
.contact-btn svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

.social-links {
    display: flex;
    gap: 1.25rem;
    margin-top: 1rem;
    align-items: center;
}
.social-links a {
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, opacity 0.2s ease, color 0.3s ease;
}
.social-links a:hover {
    transform: translateY(-2px);
    opacity: 0.7;
}
.social-links svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
}

/* Typography Tweaks */
h1, h2, h3, h4 {
    color: inherit;
}
p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: inherit;
    opacity: 0.8;
}