/* ===================================================
   PROJECTS PAGE STYLES - (projects-style.css)
   =================================================== */

/* 1. قسم عنوان الصفحة (Page Header) */
.page-header {
    background-color: #1a1a1a;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    /* Adjusted padding-top to account for absolute header */
    padding-top: 140px; /* Example: 80px header height + 60px space */
    padding-bottom: 100px;
    text-align: center;
    position: relative; 
    color: var(--clr-theme-primary);
    /* min-height: 40vh; /* Ensure some height for background visibility */
}

.page-header-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(21, 21, 21, 0.6) 0%, rgba(21, 21, 21, 0.9) 100%);
    z-index: 1; /* Should be below header when header is scrolled (fixed) */
}

.page-header .container {
    position: relative;
    z-index: 2; /* Content above overlay */
}

.page-title {
    font-size: 4.8rem; /* Slightly reduced for balance */
    color: var(--clr-theme-primary);
    text-transform: uppercase;
    margin-bottom: 1.5rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-shadow: 
        0 0 10px rgba(197, 164, 126, 0.35),
        0 0 20px rgba(197, 164, 126, 0.25);
}

.page-subtitle {
    font-size: 1.8rem; /* Slightly reduced */
    color: var(--clr-theme-secondary-text);
    max-width: 650px; /* Slightly reduced */
    margin: 0 auto;
    line-height: 1.7;
    opacity: 0.85;
}

/* 2. قسم شبكة المشاريع */
.projects-section {
    background-color: var(--clr-background-primary);
    padding-bottom: 80px; /* Ensure space before footer */
}

.projects-grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); /* Min card width */
    gap: 30px; /* Reduced gap slightly */
}

/* 3. تصميم كارت المشروع */
.project-card {
    background-color: var(--clr-background-secondary);
    border-radius: 10px; /* Slightly softer radius */
    overflow: hidden;
    border: 1px solid var(--clr-border);
    transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
                box-shadow 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                border-color 0.3s ease;
    display: flex;
    flex-direction: column;
}

.project-card:hover {
    transform: translateY(-8px); /* Reduced hover lift */
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45), 0 0 15px rgba(197, 164, 126, 0.1);
    border-color: var(--clr-theme-accent);
}

.project-card-image {
    position: relative;
    overflow: hidden;
    height: 270px; /* Adjusted height */
}

.project-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1), filter 0.35s ease;
}

.project-card:hover .project-card-image img {
    transform: scale(1.1); /* Reduced scale slightly */
    filter: brightness(0.75);
}

.image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(10, 10, 10, 0.8) 0%, rgba(10, 10, 10, 0.05) 65%);
    opacity: 0;
    transition: opacity 0.35s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
}

.project-card:hover .image-overlay {
    opacity: 1;
}

.overlay-content {
    text-align: center;
}

.view-project-btn {
    display: inline-flex;
    align-items: center;
    padding: 10px 25px; /* Adjusted padding */
    background-color: var(--clr-theme-accent);
    color: var(--clr-black-true);
    font-size: 1.3rem; /* Adjusted font size */
    font-weight: 500; /* Adjusted font weight */
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 5px;
    text-decoration: none;
    transform: translateY(15px) scale(0.95);
    opacity: 0;
    transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.05s, 
                opacity 0.35s ease 0.05s,
                background-color 0.3s ease;
    pointer-events: all;
}

.project-card:hover .view-project-btn {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.view-project-btn:hover {
    background-color: #b3863c; 
}

.view-project-btn span {
    margin-right: 6px;
}
.view-project-btn i {
    transition: transform 0.25s ease;
}
.view-project-btn:hover i {
    transform: translateX(3px);
}

.project-card-content {
    padding: 25px; /* Adjusted padding */
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.content-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.project-card-category {
    font-size: 1.1rem;
    color: var(--clr-theme-accent);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-weight: 500;
    margin-bottom: 0;
    background-color: rgba(197, 164, 126, 0.08);
    padding: 3px 8px;
    border-radius: 3px;
}

.project-card-meta {
    font-size: 1.05rem;
    color: var(--clr-theme-secondary-text);
    display: flex;
    gap: 12px;
}
.project-card-meta span {
    display: inline-flex;
    align-items: center;
}
.project-card-meta i {
    margin-right: 5px;
    color: var(--clr-theme-accent);
    opacity: 0.65;
}

.project-card-title {
    font-size: 2rem; /* Adjusted font size */
    margin-bottom: 10px;
    font-weight: 600;
    line-height: 1.35;
}

.project-card-title a {
    color: var(--clr-theme-primary);
    text-decoration: none;
    transition: color 0.25s ease;
}

.project-card:hover .project-card-title a {
    color: var(--clr-theme-accent);
}

.project-card-description {
    font-size: 1.4rem;
    color: var(--clr-theme-secondary-text);
    line-height: 1.65;
    margin-bottom: 0;
    flex-grow: 1;
    opacity: 0.85;
}

/* رابط الصفحة النشطة في القائمة */
.main-menu nav ul li a.active-page-link,
.sidebar-menu-area .menu-list li a.active-page-link {
    color: var(--clr-theme-accent) !important;
}
.main-menu nav ul li a.active-page-link::after {
    width: 100%;
    background-color: var(--clr-theme-accent) !important;
}

/* الأنيميشن لظهور الكروت */
.project-card {
    opacity: 0;
    transform: translateY(40px) scale(0.97); /* Adjusted initial state */
    transition: opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
                transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.project-card.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* تعديلات للشاشات الصغيرة */
@media (max-width: 991px) {
    .projects-grid-container {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 25px;
    }
    .page-header {
        padding-top: 120px; /* Adjust if header height changes */
        padding-bottom: 80px;
    }
    .page-title {
        font-size: 4rem;
    }
}

@media (max-width: 767px) {
    .page-header {
        padding-top: 100px; /* Adjust for smaller header potentially */
        padding-bottom: 60px;
    }
    .page-title {
        font-size: 3.2rem;
    }
    .page-subtitle {
        font-size: 1.5rem;
    }
    .projects-grid-container {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .project-card-image {
        height: 240px;
    }
    .project-card-content {
        padding: 20px;
    }
    .project-card-title {
        font-size: 1.8rem;
    }
    .project-card-description {
        font-size: 1.35rem;
    }
    .content-top {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
}

/* Body overflow, ensure it's not hidden if not intended by mobile menu */
body {
    overflow-x: hidden; /* Prevent horizontal scroll */
    /* overflow-y will be 'hidden' when mobile menu is open, 'auto' otherwise by JS */
}

/* Ensure main content doesn't overlap footer and takes at least viewport height minus footer */
html, body {
    height: 100%; /* Make sure html and body can expand */
}
body {
    display: flex;
    flex-direction: column;
}
main {
    flex-grow: 1; /* Allows main to take up available space, pushing footer down */
    /* padding-bottom: 1px; /* To prevent margin collapse if needed */
}
/* ===================================================
   PROJECTS PAGE STYLES - (projects-style.css)
   =================================================== */

/* ... (الأنماط السابقة لـ .page-header, .projects-section, .project-card تبقى كما هي) ... */


/* ===================================================
   FORCE FOOTER STYLES (Temporary or for Diagnostics)
   Ensure style1.css is still linked in projects.html
   These rules will try to override anything problematic.
   =================================================== */

footer#contact, 
footer#contact .footer-area,
footer#contact .copyright-area {
    display: block !important; /* Ensure they are block-level elements */
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important; /* Let content determine height */
    min-height: 50px !important; /* Absolute minimum */
    overflow: visible !important;
    position: relative !important; /* Reset any problematic absolute/fixed if any */
    z-index: 900 !important; /* Ensure it's reasonably high, but below modals etc. */
    background-color: var(--clr-black-true) !important; /* Force original background */
}

footer#contact .footer-area {
    padding-top: 7rem !important;
    padding-bottom: 0 !important;
}

footer#contact .copyright-area {
    padding: 2.8rem 0 !important;
}


footer#contact .footer-main-row {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important; /* or your original justify value */
    align-items: flex-start !important; /* or your original align value */
    width: 100% !important;
    min-height: 100px !important; /* Ensure row has some height */
    opacity: 1 !important;
    visibility: visible !important;
}

footer#contact .footer-widget-group {
    display: block !important; /* Or flex if they are flex containers themselves */
    opacity: 1 !important;
    visibility: visible !important;
    min-height: 50px !important; /* Ensure columns have some height */
    /* Original column widths from style1.css should apply unless overridden here */
    /* e.g. for .col-lg-4 */
    /* flex: 0 0 33.333333% !important; */
    /* max-width: 33.333333% !important; */
}

/* Force visibility of text and links inside widgets */
footer#contact .footer__widget,
footer#contact .footer__widget *,
footer#contact .footer-contact-info *,
footer#contact .social-links *,
footer#contact .footer__links * {
    opacity: 1 !important;
    visibility: visible !important;
}
footer#contact .footer__widget-title {
    color: var(--clr-theme-accent) !important;
}
footer#contact .footer__links ul li a:hover {
    color: var(--clr-theme-accent) !important;
}
footer#contact .social-links ul li a:hover {
    background-color: var(--clr-theme-accent) !important;
    color: var(--clr-background-primary) !important;
}
footer#contact .copyright__text p,
footer#contact .copyright__text a {
    color: var(--clr-copyright-text) !important;
}
footer#contact .copyright__text a:hover {
    color: var(--clr-theme-accent) !important;
}


/* Reset some common hiding properties that might be applied by mistake */
footer#contact .footer-main-row,
footer#contact .footer-widget-group,
footer#contact .footer__widget {
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
    margin: 0; /* Reset margins if they are pushing content out */
    /* Add specific paddings back if needed, e.g. for .footer-widget-group */
}
footer#contact [class^="col-"] {
    padding-left: 1.5rem !important; 
    padding-right: 1.5rem !important;
}
footer#contact .footer-main-row {
    margin-left: -1.5rem !important;
    margin-right: -1.5rem !important;
}


/* Ensure main pushes footer down if html/body are flex containers */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Make body at least viewport height */
}
main {
    flex-grow: 1; /* Allow main to take available space */
}
/* ===================================================
   PROJECTS PAGE STYLES - (projects-style.css)
   =================================================== */

/* --- Projects Hero and Filter Section --- */
.projects-hero-and-filter-section {
    padding: 140px 0 60px; /* مساحة للهيدر الثابت + مسافة للفلتر */
    background-color: var(--clr-background-primary); /* نفس خلفية باقي الصفحة */
    text-align: center;
    position: relative; /* إذا أردت إضافة عناصر زخرفية لاحقًا */
}

.projects-header-content {
    margin-bottom: 40px;
}

.projects-main-title {
    font-size: 4.2rem; /* يمكن تعديل الحجم */
    color: var(--clr-theme-primary);
    text-transform: uppercase;
    margin-bottom: 0.8rem;
    font-weight: 700;
    text-shadow: 0 0 8px rgba(197, 164, 126, 0.25);
}

.projects-main-subtitle {
    font-size: 1.7rem;
    color: var(--clr-theme-secondary-text);
    max-width: 650px;
    margin: 0 auto 30px auto; /* مسافة قبل أزرار الفلتر */
    line-height: 1.7;
}

/* --- Filter Buttons --- */
.project-filter-buttons {
    display: flex;
    justify-content: center;
    flex-wrap: wrap; /* للسماح بالالتفاف في الشاشات الصغيرة */
    gap: 10px 15px; /* مسافات بين الأزرار */
    margin-bottom: 50px; /* مسافة قبل شبكة المشاريع */
}

.filter-btn {
    background-color: transparent;
    color: var(--clr-theme-secondary-text);
    border: 1px solid var(--clr-border);
    padding: 10px 22px;
    border-radius: 30px; /* شكل بيضاوي أكثر */
    font-size: 1.4rem;
    font-weight: 500;
    text-transform: capitalize;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.2s ease;
    outline: none;
}

.filter-btn:hover {
    background-color: rgba(var(--clr-theme-accent-rgb, 197, 164, 126), 0.1);
    color: var(--clr-theme-accent);
    border-color: var(--clr-theme-accent);
    transform: translateY(-2px);
}

.filter-btn.active {
    background-color: var(--clr-theme-accent);
    color: var(--clr-black-true); /* أو var(--clr-background-primary) */
    border-color: var(--clr-theme-accent);
    font-weight: 600;
}

/* --- Projects Grid Section --- */
.projects-grid-section {
    background-color: var(--clr-background-primary);
    padding-bottom: 80px; /* مسافة قبل الفوتر */
}
.section-spacing-top { /* كلاس لمسافة علوية فقط */
    padding-top: 0; /* لأن المسافة العلوية تأتي من قسم الفلتر */
}


.projects-grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
    gap: 30px;
}

/* --- Project Card Styles (كما هي تقريبًا من رد سابق، مع تعديلات طفيفة للفلتر) --- */
.project-card {
    background-color: var(--clr-background-secondary);
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--clr-border);
    transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
                box-shadow 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                border-color 0.3s ease,
                opacity 0.4s ease, /* للفلتر */
                max-height 0.5s ease-out; /* للفلتر */
    display: flex; /* Ensure it's block or flex for display property to work */
    flex-direction: column;
    /* Initial state for filtering - will be overridden by JS */
    /* display: none; /* Initially hidden by JS, then shown */
}

.project-card.show-card { /* كلاس يضيفه JS لإظهار الكارت مع أنيميشن */
    opacity: 1;
    transform: translateY(0) scale(1);
    max-height: 1000px; /* قيمة كبيرة كافية لارتفاع الكارت */
}
/* الحالة المخفية بواسطة الفلتر (JS سيضيف display: none) */
/* يمكن إضافة تأثير اختفاء إذا أردت، لكن display:none أسهل للبداية */


.project-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45), 0 0 15px rgba(197, 164, 126, 0.1);
    border-color: var(--clr-theme-accent);
}

.project-card-image {
    position: relative;
    overflow: hidden;
    height: 270px;
}
.project-card-image img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1), filter 0.35s ease;
}
.project-card:hover .project-card-image img {
    transform: scale(1.1); filter: brightness(0.75);
}
.image-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to top, rgba(10, 10, 10, 0.8) 0%, rgba(10, 10, 10, 0.05) 65%);
    opacity: 0; transition: opacity 0.35s ease;
    display: flex; justify-content: center; align-items: center; pointer-events: none;
}
.project-card:hover .image-overlay { opacity: 1; }
.overlay-content { text-align: center; }
.view-project-btn {
    display: inline-flex; align-items: center; padding: 10px 25px;
    background-color: var(--clr-theme-accent); color: var(--clr-black-true);
    font-size: 1.3rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px;
    border-radius: 5px; text-decoration: none;
    transform: translateY(15px) scale(0.95); opacity: 0;
    transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.05s, 
                opacity 0.35s ease 0.05s, background-color 0.3s ease;
    pointer-events: all;
}
.project-card:hover .view-project-btn { transform: translateY(0) scale(1); opacity: 1; }
.view-project-btn:hover { background-color: #b3863c; }
.view-project-btn span { margin-right: 6px; }
.view-project-btn i { transition: transform 0.25s ease; }
.view-project-btn:hover i { transform: translateX(3px); }

.project-card-content { padding: 25px; flex-grow: 1; display: flex; flex-direction: column; }
.content-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.project-card-category-tag { /* Changed from .project-card-category */
    font-size: 1.1rem; color: var(--clr-theme-accent); text-transform: uppercase;
    letter-spacing: 0.8px; font-weight: 500; margin-bottom: 0;
    background-color: rgba(var(--clr-theme-accent-rgb, 197, 164, 126), 0.08);
    padding: 3px 8px; border-radius: 3px;
}
.project-card-meta { font-size: 1.05rem; color: var(--clr-theme-secondary-text); display: flex; gap: 12px; }
.project-card-meta span { display: inline-flex; align-items: center; }
.project-card-meta i { margin-right: 5px; color: var(--clr-theme-accent); opacity: 0.65; }
.project-card-title { font-size: 2rem; margin-bottom: 10px; font-weight: 600; line-height: 1.35; }
.project-card-title a { color: var(--clr-theme-primary); text-decoration: none; transition: color 0.25s ease; }
.project-card:hover .project-card-title a { color: var(--clr-theme-accent); }
.project-card-description { font-size: 1.4rem; color: var(--clr-theme-secondary-text); line-height: 1.65; margin-bottom: 0; flex-grow: 1; opacity: 0.85; }

/* Animation for revealing cards (as before) */
.project-card {
    opacity: 0;
    transform: translateY(40px) scale(0.97);
    /* transition-delay is added by JS */
    /* transition properties for opacity, transform are already defined above for the card */
}
.project-card.is-visible { /* For initial load animation */
    opacity: 1;
    transform: translateY(0) scale(1);
}


/* Responsive adjustments */
@media (max-width: 991px) {
    .projects-hero-and-filter-section { padding: 120px 0 50px; }
    .projects-main-title { font-size: 3.6rem; }
    .projects-grid-container { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 25px; }
}
@media (max-width: 767px) {
    .projects-hero-and-filter-section { padding: 100px 0 40px; }
    .projects-main-title { font-size: 3rem; }
    .projects-main-subtitle { font-size: 1.5rem; margin-bottom: 25px; }
    .filter-btn { padding: 8px 18px; font-size: 1.3rem; }
    .projects-grid-container { grid-template-columns: 1fr; gap: 20px; }
}

/* Ensure body and main take full height for footer */
html { height: 100%; }
body { display: flex; flex-direction: column; min-height: 100vh; margin: 0; }
main { flex-grow: 1; }

/* CSS for mouse cursor - ensure this is from style1.css and not overridden */
/* Make sure the :root variables like --clr-theme-accent-rgb are defined in style1.css */
.projects-grid-section {
    position: relative;
    background-color: var(--clr-background-primary);
    padding-top: 60px;
    padding-bottom: 80px;
    border-top: 1px solid var(--clr-border);
    border-bottom: 1px solid var(--clr-border);
    overflow: hidden; /* مهم جدًا لهذه الفكرة */
    z-index: 0;
}

.project-grid-gradient-glow {
    position: absolute;
    width: 300px;
    height: 300px;
    opacity: 0.25; /* زد الشفافية مؤقتًا للتجربة، مثلاً 0.5 */
    pointer-events: none;
    z-index: 0; /* يجب أن يكون خلف الكونتينر */
    border-radius: 50%;
}

.glow-top-left {
    top: -100px;
    left: -100px;
    background: radial-gradient(circle, rgba(var(--clr-theme-accent-rgb), 0.8) 0%, transparent 70%); /* زد شفافية اللون في التدرج مؤقتًا */
}

.glow-bottom-right {
    bottom: -100px;
    right: -100px;
    background: radial-gradient(circle, rgba(var(--clr-theme-accent-rgb), 0.8) 0%, transparent 70%); /* زد شفافية اللون في التدرج مؤقتًا */
}

.projects-grid-section .container {
    position: relative;
    z-index: 1; /* فوق التوهجات */
}