/* تنسيقات عامة و Reset */
body {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #ffffff; 
    direction: rtl; 
    text-align: right;
    color: #333;
}
h1, h3 { margin: 0; padding: 0; }
a { text-decoration: none; color: #333; }
img { max-width: 100%; height: auto; display: block; }
.active { font-weight: bold; }

/* شريط التنقل العلوي */
/* --------------------------------- */
/* شريط التنقل العلوي (Navbar) المُطوَّر */
/* --------------------------------- */

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 60px; /* زيادة التباعد الأفقي والعمودي */
    border-bottom: 1px solid #e0e0e0; /* حد أفتح وأكثر أناقة */
    background-color: #ffffff; /* خلفية بيضاء نقية */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); /* ظل ناعم لخلق عمق */
}

/* تنسيق الشعار */
.logo { 
    font-size: 1.6em; 
    font-weight: 700; 
    color: #1a4a98; /* لون أزرق داكن وجذاب (أزرق أثينا) */
    letter-spacing: 0.5px; /* تباعد خفيف للحروف */
}

/* تنسيق قائمة التنقل */
.navbar nav ul { 
    list-style: none; 
    display: flex; 
    gap: 35px; /* زيادة المسافة بين الروابط */
    margin: 0; 
    padding: 0; 
}
.navbar nav ul li a {
    color: #555;
    font-weight: 500;
    font-size: 1em;
    transition: color 0.3s ease, border-bottom 0.3s ease;
    padding-bottom: 5px; /* للسماح للخط السفلي بالظهور */
}
.navbar nav ul li a:hover {
    color: #1a4a98; /* التفاعل مع لون الشعار */
}
/* تنسيق الرابط النشط */
.navbar nav ul li a.active {
    color: #1a4a98; 
    border-bottom: 2px solid #1a4a98; /* خط سفلي لتحديد النشط */
}

/* تنسيق زر تسجيل الدخول (login-btn) */
.login-btn {
    /* زر شفاف بحدود، أو زر مُعبأ بلون جذاب */
    background-color: transparent; 
    color: #1a4a98; 
    padding: 10px 20px; 
    border: 2px solid #1a4a98; 
    border-radius: 25px; /* حواف دائرية عصرية */
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease;
}
.login-btn:hover {
    background-color: #1a4a98; /* عند المرور يصبح مُعبأ باللون */
    color: white;
    box-shadow: 0 4px 10px rgba(26, 74, 152, 0.3);
}

/* --------------------------------- */
/* استجابة التصميم (Media Queries) */
/* --------------------------------- */
/* تأكد من إضافة هذا التعديل ليتناسب شريط التنقل مع الأجهزة اللوحية */
@media (max-width: 900px) {
    .navbar {
        padding: 15px 30px;
    }
    /* إخفاء الروابط لتوفير مساحة، مع ترك الشعار والزر */
    .navbar nav {
        display: none; 
    }
}

/* شريط التصفية */
.filters {
    display: flex;
    justify-content: center;
    gap: 15px;
    padding: 50px 0 50px 0;
}
.filter-btn {
    padding: 10px 20px;
    border: 1px solid #f0f0f0;
    cursor: pointer;
    background-color: transparent;
    color: #333;
    border-radius: 20px;
    font-weight: 500;
    transition: all 0.3s ease-in-out; 
}
.filter-btn.active {
    background-color: #333; 
    color: white;
    border-color: #333;
}
.filter-btn:not(.active):hover {
    background-color: #eee;
}

/* --------------------------------- */
/* شبكة معرض الأعمال الرئيسية */
/* --------------------------------- */
.portfolio-grid {
    display: grid;
    /* 3 أعمدة في التصميم العادي */
    grid-template-columns: repeat(3, 1fr); 
    gap: 40px; 
    padding: 0 40px 80px 40px;
    max-width: 1400px; 
    margin: 0 auto;
}

.portfolio-item {
    overflow: visible; 
    cursor: pointer;
    transition: all 0.3s ease-in-out; 
}

/* ====== الحركات والتأثيرات التفاعلية (Hover Effects) ====== */
.portfolio-item:hover {
    transform: translateY(-5px); /* رفع البطاقة قليلاً */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15); /* إضافة ظل */
}

.item-content {
    background-color: #f9f9f9; 
    border-radius: 4px; 
    overflow: hidden; 
}

.portfolio-item:hover .item-content img {
    transform: scale(1.05); /* تكبير الصورة بنسبة 5% */
    transition: transform 0.3s ease-in-out;
}

.item-info { padding-top: 15px; }
.item-info h3 { font-size: 1.1em; font-weight: 500; }
.item-info p { color: #777; font-size: 0.9em; }

/* ====== تنسيق النمط 1: Zofia Graczyk ====== */
.portfolio-item.style-1 .item-content {
    display: grid;
    grid-template-columns: 2fr 1fr; 
    gap: 5px; 
}
.portfolio-item.style-1 .item-content .main-img {
    grid-column: 1 / 2; 
    grid-row: 1 / span 4; 
    height: 100%;
    object-fit: cover;
}
.portfolio-item.style-1 .item-content .sub-img {
    grid-column: 2 / 3;
    height: auto;
}


/* ====== تنسيق النمط 2: Gun Karlsson ====== */
.portfolio-item.style-2 .item-content {
    display: grid;
    grid-template-columns: repeat(3, 1fr); 
    grid-auto-rows: 100px; 
    gap: 5px;
}
.portfolio-item.style-2 .item-content .img-large {
    grid-row: span 2; 
    object-fit: cover;
    height: 100%;
}
.portfolio-item.style-2 .item-content .img-medium {
    grid-column: span 2; 
    object-fit: cover;
    height: auto;
}


/* ====== تنسيق النمط 3: Esther De Korte ====== */
.portfolio-item.style-3 .style-3-content {
    display: flex;
    flex-direction: column; 
    height: 400px;
    background-color: #f7f3f1; 
    padding: 25px;
    justify-content: space-between;
}
.portfolio-item.style-3 .text-block h1 {
    font-size: 1.6em;
    line-height: 1.2;
    margin-top: 10px;
}
.portfolio-item.style-3 .project-path { font-size: 0.8em; color: #555; margin-bottom: 5px; }
.portfolio-item.style-3 .discover-btn {
    background-color: #333;
    color: white;
    padding: 8px 15px;
    border: none;
    border-radius: 4px;
    margin-top: 15px;
    transition: background-color 0.2s;
}
.portfolio-item.style-3 .discover-btn:hover { background-color: #555; }
.portfolio-item.style-3 .image-block {
    display: grid;
    grid-template-columns: repeat(2, 1fr); 
    gap: 5px;
}


/* ====== تنسيق النمط 4: Amro Arida ====== */
.portfolio-item.style-4 .style-4-content {
    height: 350px;
    background-color: #333; 
    display: flex;
    flex-direction: column;
    justify-content: center; 
    align-items: center; 
    text-align: center;
    padding: 20px;
}
.portfolio-item.style-4 .main-title {
    color: white; 
    font-size: 2.5em;
    font-weight: 300;
    margin-bottom: auto; /* يدفع العناصر الأخرى للأسفل */
    padding-top: 50px;
}
.portfolio-item.style-4 .bottom-img-row {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-top: auto; 
}
.portfolio-item.style-4 .art-direction-text {
    color: #999;
    font-size: 0.8em;
    margin: 0;
}
.portfolio-item.style-4 .empty-space {
    width: 20px; /* لتمثيل الفراغ الموجود في الصورة الأصلية */
}


/* --------------------------------- */
/* استجابة التصميم (Media Queries) */
/* --------------------------------- */

/* شاشات أجهزة الكمبيوتر اللوحية (Tablet) - أقل من 900px */
@media (max-width: 900px) {
    .portfolio-grid {
        /* يتم تحويل الشبكة إلى عمودين */
        grid-template-columns: repeat(2, 1fr); 
        gap: 30px;
    }

    /* إخفاء شريط التنقل لتوفير مساحة في الأجهزة الصغيرة */

}

/* شاشات الهواتف المحمولة (Mobile) - أقل من 600px */
@media (max-width: 600px) {
    .portfolio-grid {
        /* يتم تحويل الشبكة إلى عمود واحد */
        grid-template-columns: 1fr; 
        gap: 30px;
        padding: 0 20px 50px 20px;
    }

    .filters {
        /* السماح للأزرار بالنزول لسطر جديد */
        flex-wrap: wrap; 
        padding: 30px 20px;
        justify-content: flex-start; /* ترتيب الأزرار لليمين */
    }
    .filter-btn {
        margin-bottom: 5px;
    }

    /* ضمان عرض النمط 1 بشكل عمودي جيد على الموبايل */
    .portfolio-item.style-1 .item-content {
        grid-template-columns: 1fr; /* عمود واحد */
    }
    .portfolio-item.style-1 .item-content .main-img {
        grid-column: 1 / 2;
        grid-row: 1 / 2; /* تأخذ صف واحد فقط */
        height: auto;
    }
    .portfolio-item.style-1 .item-content .sub-img {
        grid-column: 1 / 2;
    }
    
    /* ضمان عرض النمط 2 بشكل عمودي جيد على الموبايل */
    .portfolio-item.style-2 .item-content {
        grid-template-columns: repeat(2, 1fr); /* 2 عمود */
    }
    .portfolio-item.style-2 .item-content .img-large,
    .portfolio-item.style-2 .item-content .img-medium {
        grid-column: span 1; /* إعادة تعيين الامتداد إلى عمود واحد */
        grid-row: span 1; /* إعادة تعيين الامتداد إلى صف واحد */
    }
}