/* =========================================================
=======================  PROJECTS SECTION  ==================
=========================================================
Styles for Projects Section including wrapper, titles, grid,
cards, images, content, tech list, buttons, and RTL support.

Table of Content (Projects):
1. Section Wrapper
2. Section Titles
3. Projects Grid
4. Project Card
    4.1 3D Hover Effect
5. Image Area
    5.1 Zoom on Hover
    5.2 Overlay Gradient
6. Content Area
7. Tech List
8. Buttons
9. RTL Support
========================================================= */


/* =========================================================
1. Section Wrapper
========================================================= */

.projects {
    position: relative;
}


/* =========================================================
2. Section Titles
========================================================= */

.projects__intro {
    text-align: center;
    margin-bottom: var(--spacing-xxl);
}

.projects__title {
  text-align: center;
  font-size: var(--font-size-xxl);
  color: var(--color-text-inverse);
  margin-bottom: var(--spacing-sm);
}

.projects__subtitle {
  text-align: center;
  font-size: var(--font-size-lg);
  color: #e6e6e6;
  max-width: 650px;
  margin: 0 auto var(--spacing-xxl);
}


/* =========================================================
3. Projects Grid
========================================================= */

.projects__grid {
    display: grid;
    gap: var(--spacing-xxl);
    grid-template-columns: 1fr;
}

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

/* Desktop */
@media (min-width: 1200px) {
    .projects__grid {
        gap: var(--spacing-xxxl);
    }
}


/* =========================================================
4. Project Card
========================================================= */

.project-card {
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transform-style: preserve-3d;
    transition: transform 0.6s ease, box-shadow 0.5s ease;
    cursor: pointer;
}

/* 4.1 3D Hover Effect */
.project-card:hover {
    transform: translateY(-10px) rotateX(4deg) rotateY(-4deg);
    box-shadow: var(--shadow-lg);
}


/* =========================================================
5. Image Area
========================================================= */

.project-card__image {
    position: relative;
    width: 100%;
    height: 220px;
    overflow: hidden;
}

.project-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1);
    transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 5.1 Zoom on Hover */
.project-card:hover .project-card__image img {
    transform: scale(1.12);
}

/* 5.2 Overlay Gradient */
.project-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
            rgba(0, 0, 0, 0) 30%,
            rgba(0, 0, 0, 0.55) 100%);
    pointer-events: none;
    mix-blend-mode: multiply;
}


/* =========================================================
6. Content Area
========================================================= */

.project-card__content {
    padding: var(--spacing-xl);
}

.project-card__title {
    font-size: var(--font-size-xxl);
    color: var(--color-text-inverse);
    margin-bottom: var(--spacing-sm);
}

.project-card__desc {
    color: var(--color-text-secondary);
    line-height: var(--line-height-lg);
    margin-bottom: var(--spacing-lg);
}


/* =========================================================
7. Tech List
========================================================= */

.project-card__tech {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-lg);
}

.project-card__tech li {
    padding: var(--spacing-xs) var(--spacing-md);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-md);
    color: var(--color-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    transition: background var(--transition-normal), color var(--transition-normal);
}

.project-card__tech li:hover {
    background: var(--color-primary);
    color: var(--color-text-inverse);
}


/* =========================================================
8. Buttons
========================================================= */

.project-card__links {
    display: flex;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

.btn-primary {
    flex: 1;
    padding: var(--spacing-sm) var(--spacing-lg);
    text-align: center;
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
    color: #fff;
    border-radius: var(--radius-lg);
    background: linear-gradient(to right,
            var(--color-primary),
            var(--color-secondary));
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.btn-primary:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.btn-secondary {
    flex: 1;
    padding: var(--spacing-sm) var(--spacing-lg);
    text-align: center;
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
    border-radius: var(--radius-lg);
    border: 2px solid var(--color-secondary);
    color: var(--color-secondary);
    transition: background var(--transition-normal), color var(--transition-normal), transform var(--transition-normal);
}

.btn-secondary:hover {
    background: var(--color-secondary);
    color: var(--color-text-inverse);
    transform: translateY(-4px);
}


/* =========================================================
9. RTL Support
========================================================= */

html[dir="rtl"] .project-card__tech {
    justify-content: flex-end;
}

html[dir="rtl"] .project-card__links {
    flex-direction: row-reverse;
}