/* Cards Styling - Linear.app Aesthetic */

/* Project Cards */
.project-card {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-subtle);
    border-radius: 0.75rem;
    /* Slightly tighter radius for cleaner look */
    padding: 1.5rem;
    transition: all 0.2s ease;
}

.project-card:hover {
    background: var(--bg-surface-hover) !important;
    border-color: var(--text-secondary);
    /* Subtle highlight */
    /* Minimalist: No transform, subtle shadow only */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Experience Cards */
.experience-card {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-subtle);
    border-radius: 0.75rem;
    padding: 2rem;
    transition: all 0.2s ease;
}

.experience-card:hover {
    background: var(--bg-surface-hover) !important;
    border-color: var(--text-secondary);
}

/* General Glass Cards - Redefined as Surface Cards */
.bg-white\/5,
.bg-black\/50 {
    background: var(--bg-surface) !important;
    backdrop-filter: none;
    /* Removed blur for cleaner "solid" look favored by Linear */
    -webkit-backdrop-filter: none;
}

/* Section backgrounds */
section.bg-white\/5 {
    background: transparent !important;
    /* Sections likely don't need background in this clean theme */
    border: none;
}

/* Contact form inputs */
input[type="text"],
input[type="email"],
textarea {
    background: #000 !important;
    /* Darker than surface for inputs */
    border: 1px solid var(--border-subtle);
    color: var(--text-primary);
    border-radius: 0.375rem;
    padding: 0.75rem;
    transition: all 0.2s ease;
}

input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus {
    background: #000 !important;
    border-color: var(--accent);
    outline: none;
    box-shadow: 0 0 0 1px var(--accent);
}

/* Contact info cards */
.contact-card {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-subtle);
    border-radius: 0.75rem;
    padding: 1.5rem;
    transition: all 0.2s ease;
}

.contact-card:hover {
    background: var(--bg-surface-hover) !important;
    border-color: var(--text-secondary);
}

/* About page cards */
.about-card {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-subtle);
    border-radius: 1rem;
    padding: 2rem;
}

.about-card:hover {
    border-color: var(--border-subtle);
    /* subtle or no change */
}

/* Override conflicting styles */
/* .rounded-2xl, .rounded-3xl handled by utilities */

/* Tech badges */
.px-3.py-1 {
    background: var(--bg-surface-hover);
    border: 1px solid var(--border-subtle);
    border-radius: 0.25rem;
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 500;
}

/* Ensure proper contrast */
.text-gray-300,
.text-gray-400 {
    color: var(--text-secondary);
}

/* Grid layouts */
/* .grid > div handled by specific card styles */

/* Mobile responsiveness */
@media (max-width: 768px) {

    .project-card,
    .experience-card,
    .contact-card,
    .about-card {
        padding: 1.25rem;
    }
}

/* Remove underline from all links and buttons */
a {
    text-decoration: none !important;
}

button {
    text-decoration: none !important;
}

/* Ensure buttons and links have no underline */
.inline-block,
.inline-flex {
    text-decoration: none !important;
}

/* Override any default link styles */
a:hover,
a:focus,
a:active {
    text-decoration: none !important;
}

/* Nested Cards - For grid items inside parent cards */
.about-card .grid>div,
.experience-card .grid>div,
.contact-card.grid>div {
    background: var(--bg-surface-hover) !important;
    border: 1px solid var(--border-subtle);
    border-radius: 0.5rem;
    padding: 1rem;
    transition: all 0.2s ease;
}

.about-card .grid>div:hover,
.experience-card .grid>div:hover {
    background: #202022 !important;
    /* Slightly lighter than surface-hover */
    border-color: var(--text-secondary);
}

/* Category buttons */
.about-card button {
    background: var(--bg-surface-hover) !important;
    border: 1px solid var(--border-subtle);
    transition: all 0.2s ease;
    color: var(--text-secondary);
}

.about-card button:hover {
    background: #202022 !important;
    color: var(--text-primary);
    border-color: var(--text-secondary);
}

/* Specific fix for nested divs in grids */
.grid.md\:grid-cols-2>div,
.grid.md\:grid-cols-3>div {
    background: transparent !important;
    /* Let specific card classes handle bg */
    backdrop-filter: none;
}

/* Category buttons styling */
.category-btn {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-subtle);
    cursor: pointer;
    border-radius: 0.375rem;
}

.category-btn:hover {
    background: var(--bg-surface-hover) !important;
    border-color: var(--text-secondary);
    transform: none;
    /* Remove bouncy scale */
    color: var(--text-primary);
}

/* Override grid item backgrounds in parent cards */
.about-card>.grid>div,
.about-card .grid.md\:grid-cols-2>div,
.about-card .grid.md\:grid-cols-3>div {
    background: var(--bg-surface-hover) !important;
}

/* Fix for p-4 class in nested elements */
.p-4.bg-black\/30 {
    background: var(--bg-surface-hover) !important;
}

/* Spacing between cards */
.space-y-8>*+* {
    margin-top: 2rem;
}

.space-y-6>*+* {
    margin-top: 1.5rem;
}

.space-y-4>*+* {
    margin-top: 1rem;
}

/* Margin bottom for sections */
section.about-card,
section.project-card,
section.experience-card,
section.contact-card {
    margin-bottom: 2rem;
}

/* Grid gap adjustments */
.grid {
    gap: 1.5rem;
}

.grid.gap-6 {
    gap: 1.5rem;
}

.grid.gap-8 {
    gap: 2rem;
}

/* Specific spacing for page layouts */
.max-w-3xl>*,
.max-w-4xl>*,
.max-w-6xl>* {
    margin-bottom: 2rem;
}

.max-w-3xl>*:last-child,
.max-w-4xl>*:last-child,
.max-w-6xl>*:last-child {
    margin-bottom: 0;
}