/*
Theme Name: ar theme
Description: Custom theme for ar studio based on the provided design.
Author: ar Studio
Version: 1.0
*/

/* ==========================================================================
   1. تنظیمات پایه (Base & Reset)
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;800&family=Playfair+Display:ital,wght@0,400;0,600;1,400&display=swap');

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

body {
    font-family: 'Montserrat', sans-serif;
    color: #333;
    background-color: #fff;
    line-height: 1.6;
    overflow-x: hidden;
}

.site-main {
    width: 100vw !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden;
}

a {
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
}

h1, h2, h3, h4, h5, h6, .site-logo strong {
    font-family: 'Playfair Display', serif;
}

/* ==========================================================================
   2. هدر سایت (Header) - MASTERPIECE PRO VERSION
   ========================================================================== */
.site-header {
    padding: 1.5vh 5vw !important; 
    background-color: #ffffff;
    border-bottom: 1px solid #f0f0f0;
    /* اضافه شدن یک سایه بسیار نامرئی و لوکس زیر هدر */
    box-shadow: 0 4px 20px rgba(0,0,0,0.02); 
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 100%;
    margin: 0 auto;
}

.site-logo img {
    max-height: 7.5vh !important; 
    width: auto;
    transition: transform 0.4s ease;
}

/* افکت بسیار ظریف وقتی موس روی لوگو می‌رود */
.site-logo img:hover {
    transform: scale(1.02); 
}

/* ساختار لیست منوی اصلی */
.primary-menu-list {
    display: flex;
    list-style: none;
    gap: 3vw;
    margin: 0;
    padding: 0;
    align-items: center;
}

/* استایل حرفه‌ای و تایپوگرافی لوکس برای لینک‌های منو */
.primary-menu-list a,
.menu-item a {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13px !important; /* استفاده از پیکسل برای ثبات سایز در همه مانیتورها */
    font-weight: 600 !important;
    letter-spacing: 1.5px !important; /* فاصله شیک بین حروف */
    text-transform: uppercase !important;
    color: #111111 !important;
    text-decoration: none !important;
    transition: color 0.3s ease !important;
}

.primary-menu-list a:hover,
.menu-item a:hover {
    color: #888888 !important; /* خاکستری شیک در حالت هاور */
}

/* استایل دکمه شروع پروژه (Call to Action) */
.btn-start-project {
    background-color: #000000;
    color: #ffffff !important;
    padding: 12px 24px !important; /* پدینگ استاندارد پیکسلی */
    font-family: 'Montserrat', sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    display: inline-block;
    border: 1px solid #000000 !important;
    border-radius: 0 !important; /* گوشه‌های کاملاً تیز و معماری‌گونه */
    /* انیمیشن فوق‌العاده نرم */
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important; 
}

/* افکت سینماتیک برای دکمه هنگام هاور */
.btn-start-project:hover {
    background-color: #ffffff;
    color: #000000 !important;
    transform: translateY(-2px); /* حرکت نامحسوس به سمت بالا */
    box-shadow: 0 10px 20px rgba(0,0,0,0.1); /* ایجاد سایه برای عمق دادن */
}
/* ==========================================================================
   3. فوتر سایت (Footer) - MASTERPIECE PRO VERSION
   ========================================================================== */
.site-footer {
    background-color: #050505; /* مشکی بسیار عمیق، مات و لوکس */
    color: #888888;
    padding: 18px 5vw !important; /* پدینگ پیکسلی برای ثبات در تمام مانیتورها */
    font-family: 'Montserrat', sans-serif !important;
    font-size: 11px !important;
    letter-spacing: 1px;
    border-top: 1px solid #111111; /* یک خط بسیار محو برای جداسازی از محتوای بالا */
}

.footer-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 100%;
    margin: 0 auto;
}

/* بخش سمت چپ: لوگو و توضیحات */
.footer-left {
    flex: 1;
    text-align: left;
}

.footer-logo strong {
    font-family: 'Playfair Display', serif !important; /* استفاده از فونت کلاسیک برای نام برند */
    font-size: 18px !important;
    font-weight: 600;
    letter-spacing: 2px;
    color: #ffffff;
    display: block;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.footer-description {
    max-width: 400px;
    font-size: 9px !important; /* بسیار مینیمال و خوانا */
    line-height: 1.8;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    opacity: 0.7;
}

/* بخش وسط: شبکه‌های اجتماعی */
.footer-social {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px; /* فاصله دقیق و یکدست بین لینک‌ها */
}

/* استایل حرفه‌ای برای آیکون‌های شبکه‌های اجتماعی */
.footer-social a {
    color: #ffffff;
    font-size: 18px !important; /* سایز آیکون‌ها بزرگ‌تر و خواناتر شد */
    margin: 0 12px; /* فاصله استاندارد بین آیکون‌ها */
    text-decoration: none;
    display: inline-block;
    /* انیمیشن فوق‌العاده نرم */
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* افکت سینماتیک: تغییر رنگ و حرکت به سمت بالا هنگام هاور */
.footer-social a:hover {
    color: #888888;
    transform: translateY(-5px); 
}

/* بخش سمت راست: لینک‌های قوانین و حریم خصوصی */
.footer-right {
    flex: 1;
    text-align: right;
}

.footer-links {
    margin-top: 8px;
}

.footer-links a {
    color: #666666;
    margin-left: 20px;
    font-size: 9px !important;
    font-weight: 500;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    transition: color 0.4s ease !important;
}

.footer-links a:hover {
    color: #ffffff;
}
/* ==========================================================================
   4. صفحه اصلی - بخش هیرو (Hero Section) - SINGLE FRAME PRO
   ========================================================================== */
.hero-section {
    position: relative !important;
    width: 100vw !important;
    /* ارتفاع هیرو را به 45 درصد از کل مانیتور کاهش دادیم تا جا برای بقیه باز شود */
    height: 45vh !important; 
    min-height: auto !important; /* حذف محدودیت‌های قبلی */
    margin-left: calc(-50vw + 50%) !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    overflow: hidden !important;
}

.hero-image {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100% !important;
    z-index: 1 !important;
}

.hero-image::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(to right, #ffffff 10%, rgba(255,255,255,0.85) 40%, rgba(255,255,255,0) 70%) !important;
    z-index: 2 !important;
}

.hero-container {
    position: static !important;
    width: 100% !important;
}

.hero-content {
    position: relative !important;
    z-index: 10 !important;
    max-width: 550px !important;
    padding-left: 5vw !important;
}

/* داینامیک کردن سایز فونت‌ها بر اساس ارتفاع مانیتور تا روی هم نیفتند */
.hero-content h1 {
    font-size: 6vh !important; 
    font-weight: 400 !important;
    line-height: 1.1 !important;
    margin-bottom: 2vh !important;
    color: #111 !important;
}

.hero-content p {
    font-size: 1.5vh !important; 
    font-weight: 600 !important;
    letter-spacing: 1.5px !important;
    margin-bottom: 3vh !important;
    color: #555 !important;
    line-height: 1.8 !important;
}

.btn-primary {
    position: relative !important;
    z-index: 10 !important;
    background-color: #000 !important;
    color: #fff !important;
    padding: 2vh 2vw !important;
    font-size: 1.5vh !important;
    font-weight: bold !important;
    display: inline-block !important;
    transition: all 0.4s ease !important;
}

.btn-primary:hover {
    background-color: #444 !important;
    transform: translateY(-3px) !important;
}

/* ==========================================================================
   5. صفحه اصلی - بخش خدمات (Services) - ULTRA PRO VERSION
   ========================================================================== */
.services-section {
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    /* فشرده‌تر کردن این بخش برای دادن فضای بیشتر به پروژه‌ها */
    padding: 1.5vh 5vw !important; 
    border-top: 1px solid #eaeaea !important;
    background: #fff !important;
}

.services-container {
    display: flex;
    max-width: 1300px; /* جمع‌وجور کردن کل باکس خدمات در وسط صفحه */
    margin: 0 auto;
    gap: 30px;
}

.service-box {
    flex: 1;
    padding: 0 10px; /* فشرده‌تر شدن متن‌ها */
}

.service-icon {
    font-size: 3.5vh; 
    margin-bottom: 0.8vh;
    color: #555;
}

.service-box h3 {
    font-size: 1.3vh;
    margin-bottom: 0.8vh;
    font-weight: 800;
}

.service-box p {
    font-size: 1.2vh;
    line-height: 1.6;
}

/* ==========================================================================
   6. صفحه اصلی - بخش پروژه‌ها (Projects) - ULTRA MOTION VERSION 
   ========================================================================== */
.projects-section {
    width: 100%;
    margin: 0;
    padding: 0;
    background: #ffffff;
}

/* ==========================================================================
   ULTRA PERFECT SPACING: 3-CARD PROJECT GRID
   ========================================================================== */
/* ==========================================================================
   SUPER ULTRA FLUID GRID: 3-CARD PROJECT GRID (Full Width & Responsive)
   ========================================================================== */

.projects-container {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important; 
    
    /* جادوی تقارن: بالا صفر، راست اتوماتیک، پایین 2vw، چپ اتوماتیک */
    margin: 0 auto 1vw auto !important; 
    
    padding: 0 2vw !important; 
    gap: 2vw !important; 
    box-sizing: border-box !important; 
}

.project-card {
    flex: 1 !important; /* هر ۳ کارت همیشه سهمِ کاملاً مساوی از صفحه دارن */
    height: 300px !important; /* یه کم ارتفاع رو بیشتر کردم که تو مانیتورهای عریض، عکس‌ها له نشن */
    margin: 0 !important;
    border-radius: 4px !important;
    overflow: hidden;
}

/* واکنش‌گراییِ بی‌نقص برای موبایل و تبلت */
@media (max-width: 900px) {
    .projects-container {
        flex-direction: column !important; /* تو گوشی میفتن زیرِ هم */
        padding: 0 20px !important; 
        gap: 20px !important;
    }
    .project-card {
        height: 350px !important;
    }
}

.project-card {
    position: relative;
    width: 100%;
    height: 250px; /* همان ارتفاعی که خودت تنظیم کردی */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: flex-end;
    margin: 0;
    padding: 0;
    border: none;
    overflow: hidden;
    /* این خط جادویی، حرکت‌های روی عکس را بی‌نهایت نرم می‌کند */
    transition: filter 0.7s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* افکت نوری ملایم هنگام رفتن موس روی عکس */
.project-card:hover {
    z-index: 5;
    filter: brightness(1.15); /* عکس کمی درخشان‌تر می‌شود */
}

/* هاله تاریک پایین کارت */
.project-card::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background: linear-gradient(to top, rgba(0,0,0,0.85), transparent);
    z-index: 1;
    opacity: 0.7;
    /* انیمیشن نرم برای هاله مشکی */
    transition: height 0.7s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.7s ease !important;
}

/* وقتی موس روی عکس می‌رود، هاله نرم بالا می‌آید */
.project-card:hover::before {
    height: 75%;
    opacity: 1;
}

/* کادر نوشته‌ها */
.project-info {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 40px 30px;
    text-align: left;
    /* متن را کمی پایین‌تر قرار می‌دهیم تا برای حرکت جا داشته باشد */
    transform: translateY(15px); 
    /* انیمیشن نرم برای سُر خوردن متن به بالا */
    transition: transform 0.7s cubic-bezier(0.25, 1, 0.5, 1) !important; 
}

/* حرکت متن به سمت بالا هنگام رفتن موس */
.project-card:hover .project-info {
    transform: translateY(0);
}

/* ==========================================================================
   UPDATE: FONTS FOR PROJECTS SECTION (Montserrat)
   ========================================================================== */

/* فونتِ عنوانِ روی ۳ تا کارتِ صفحه اصلی */
.project-info h3 {
    font-family: 'Montserrat', sans-serif !important; /* تبدیل از Playfair به Montserrat */
    font-size: 16px !important; 
    font-weight: 800 !important; /* ضخیم و با ابهت */
    letter-spacing: 2px !important; /* فاصله حروف شیک‌تر */
    margin-bottom: 8px !important;
    text-transform: uppercase !important;
    color: #ffffff !important;
    text-shadow: 1px 1px 4px rgba(0,0,0,0.9); 
}

/* برای اینکه لینکِ "View Projects" هم کاملاً یکدست بشه */
.project-info a {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 10px !important; 
    font-weight: 600 !important;
    letter-spacing: 2.5px !important; /* فاصله بیشتر برای مدرن‌تر شدن */
    text-transform: uppercase !important;
    color: #ffffff !important;
    text-shadow: 1px 1px 4px rgba(0,0,0,0.9);
    opacity: 0.8;
    transition: opacity 0.3s ease;
}
.project-info a:hover {
    opacity: 1;
}
/* ==========================================================================
   7. صفحه شروع پروژه (Start a Project) - THE MINIMALIST WHISPER
   ========================================================================== */
.start-project-wrapper {
    background-color: #ffffff;
    width: 100vw;
    max-width: 100%;
    min-height: 75vh;
    display: flex;
    justify-content: center;
    align-items: flex-start; /* این دستور باعث میشه فرم دیگه وسط صفحه قفل نشه و بیاد بالا */
    padding-top: 60px; /* این عدد فاصله دقیق از هدر است. اگر خواستی باز هم بالاتر برود، آن را مثلا 30px کن */
    padding-bottom: 10vh;
    padding-left: 5vw;
    padding-right: 5vw;
    box-sizing: border-box;
}

.sp-content {
    max-width: 700px;
    width: 100%;
    text-align: center;
    /* یک انیمیشن ظریف برای ورود به صفحه */
    animation: fadeInSoft 1.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes fadeInSoft {
    0% { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* تایپوگرافی سینماتیک برای تیتر */
.sp-title {
    font-family: 'Playfair Display', serif !important;
    font-size: 42px !important;
    font-weight: 600;
    color: #111111;
    margin-bottom: 15px;
    letter-spacing: 1px;
}

.sp-subtitle {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 11px !important;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: #888888;
    margin-bottom: 60px;
}

/* استایل هنری فیلدهای فرم (فقط خط زیرین) */
.sp-form .sp-input-group {
    margin-bottom: 40px;
    position: relative;
}

.sp-form input, 
.sp-form textarea {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid #e0e0e0;
    padding: 15px 0;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13px;
    color: #111111;
    outline: none;
    transition: border-color 0.4s ease;
    resize: none; /* جلوگیری از تغییر سایز کادر متن */
}

/* افکت بسیار نرم وقتی کاربر روی یک خط کلیک می‌کند */
.sp-form input:focus, 
.sp-form textarea:focus {
    border-bottom: 1px solid #111111;
}

/* مخفی کردن کادر آبی پیش‌فرض مرورگرها */
.sp-form input::placeholder, 
.sp-form textarea::placeholder {
    color: #bbbbbb;
    font-weight: 400;
    letter-spacing: 1px;
}

/* دکمه نهایی جادویی */
.sp-submit-btn {
    background: transparent;
    color: #111111;
    border: 1px solid #111111;
    padding: 16px 40px;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    margin-top: 30px;
    transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.sp-submit-btn:hover {
    background: #111111;
    color: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 15px 25px rgba(0,0,0,0.1);
}
/* استایل دکمه آپلود فایل */
.sp-file-upload {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 11px !important;
    color: #111111 !important;
    cursor: pointer;
    margin-top: 5px;
}
/* ==========================================================================
   8. صفحه تماس (Contact Page) - DUALITY LUXURY LAYOUT
   ========================================================================== */
.pro-contact-wrapper {
    display: flex;
    flex-wrap: wrap; /* برای اینکه در موبایل زیر هم قرار بگیرند */
    max-width: 1200px;
    margin: 10vh auto 15vh auto; /* فاصله‌های دقیق از بالا و پایین */
    padding: 0 5vw;
    gap: 8vw; /* فاصله شیک بین دو ستون */
}

.pro-contact-left, 
.pro-contact-right {
    flex: 1;
    min-width: 300px; /* جلوگیری از به هم ریختگی در موبایل */
}

/* تایپوگرافی ستون سمت چپ */
.pro-contact-title {
    font-family: 'Playfair Display', serif !important;
    font-size: clamp(40px, 6vh, 70px) !important;
    color: #111111;
    margin-bottom: 15px;
}

.pro-contact-subtitle {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #888888;
    margin-bottom: 50px;
    line-height: 1.8;
}

.detail-item {
    margin-bottom: 35px;
}

.detail-item h5 {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 10px;
    letter-spacing: 2.5px;
    color: #aaaaaa;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.detail-item p, 
.detail-item a {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 14px;
    color: #111111;
    text-decoration: none;
    line-height: 1.6;
    transition: color 0.3s ease;
}

.detail-item a:hover {
    color: #888888;
}

/* تنظیم ارتفاع فرم برای این صفحه */
.pro-contact-right .sp-form textarea {
    height: 120px !important; /* در صفحه تماس، جای نوشتن پیام باید بزرگتر باشد */
}
/* ==========================================================================
   9. صفحه خدمات - ULTRA MINIMALIST CINEMATIC
   ========================================================================== */
.ultra-services { 
    max-width: 1400px; /* عریض‌تر برای ظاهر سینمایی */
    margin: 5vh auto 15vh auto; 
    padding: 0 5vw; 
}

/* تیتر غول‌پیکر و جسورانه */
.u-header {
    margin-bottom: 80px;
}
.u-header h1 { 
    font-family: 'Playfair Display', serif !important; 
    font-size: clamp(60px, 10vw, 140px) !important; /* سایز متغیر و بسیار بزرگ */
    color: #111111;
    text-transform: uppercase; 
    letter-spacing: -3px; 
    line-height: 1; 
}

/* ساختار لیست‌وار و خطی */
.u-grid { 
    display: flex; 
    flex-direction: column; 
}

.u-card { 
    display: flex; 
    align-items: center; 
    gap: 6vw; 
    border-bottom: 1px solid #eeeeee; 
    padding: 10px 0; 
    transition: all 0.5s ease; 
}

.u-card:hover { 
    border-bottom-color: #111111; /* پررنگ شدن خط زیرین در صورت هاور */
}

/* محفظه عکس و ویدیو */
.u-media { 
    flex: 0 0 45%; /* مدیا 45 درصد عرض را می‌گیرد */
    aspect-ratio: 16 / 9; /* نسبت تصویر دقیقاً سینمایی */
    overflow: hidden; 
    background: #f8f8f8; 
}

.u-media img, 
.u-media video { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    filter: grayscale(100%); /* سیاه و سفیدِ هنری */
    transition: transform 1s cubic-bezier(0.25, 1, 0.5, 1), filter 1s ease; 
}

/* افکت جادویی هاور (بازگشت رنگ و زوم ملایم) */
.u-card:hover .u-media img, 
.u-card:hover .u-media video { 
    filter: grayscale(0%); 
    transform: scale(1.05); 
}

/* بخش تایپوگرافی متن‌ها */
.u-info { 
    flex: 1; 
}

.u-info h2 { 
    font-family: 'Playfair Display', serif !important; 
    font-size: clamp(30px, 4vw, 55px) !important; 
    color: #111111;
    margin-bottom: 20px; 
    font-weight: 400; 
    letter-spacing: -1px;
}

.u-info p { 
    font-family: 'Montserrat', sans-serif !important; 
    font-size: 15px; 
    color: #888888; 
    max-width: 450px; 
    line-height: 1.8; 
}

/* ریسپانسیو برای موبایل */
@media (max-width: 768px) {
    .u-card { 
        flex-direction: column; 
        align-items: flex-start; 
        padding: 40px 0;
        gap: 25px;
    }
    .u-media { 
        width: 100%; 
        flex: auto;
    }
}
/* ==========================================================================
  10. گالری اصلی - SCATTERED & ASYMMETRICAL LUXURY (نامنظم، پراکنده و هنری)
   ========================================================================== */
.p-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 250px; 
    gap: 30px; /* فضای تنفس بین کادرها */
    grid-auto-flow: dense;
    padding-top: 30px;
    padding-bottom: 60px;
}

.p-item {
    position: relative;
    display: block;
    overflow: hidden;
    background: #f8f8f8;
    text-decoration: none;
    /* استفاده از top برای پراکندگی تا با افکت هاور تداخل نداشته باشه */
    top: 0; 
    transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

/* ---------------------------------------------------
   بخش اول: جادوی سایزهای نامتقارن (Irregular Sizes)
   --------------------------------------------------- */
.p-large  { grid-column: span 2; grid-row: span 2; } /* خیلی بزرگ */
.p-tall   { grid-column: span 1; grid-row: span 2; } /* قد بلند */
.p-wide   { grid-column: span 2; grid-row: span 1; } /* عریض */
.p-medium { grid-column: span 1; grid-row: span 1; } /* معمولی */

/* ---------------------------------------------------
   بخش دوم: جادوی پراکندگی و بی‌نظمی (Scattered Positions)
   --------------------------------------------------- */
.p-item:nth-child(2n) {
    top: 40px; /* کادرهای زوج کمی می‌روند پایین */
}
.p-item:nth-child(3n) {
    top: -20px; /* کادرهای مضرب ۳ کمی می‌روند بالا */
}

/* افکت سینماتیک موقع رفتن موس روی کل کارت */
.p-item:hover {
    transform: scale(1.02); /* زوم کل کادر */
    z-index: 10;
    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}

.p-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(15%); 
    transition: transform 1.2s cubic-bezier(0.25, 1, 0.5, 1), filter 1s ease;
}

.p-item:hover img {
    transform: scale(1.08); /* زوم ملایم روی عکس */
    filter: grayscale(0%); 
}

/* هاله مشکی و عنوان پروژه با موشن بسیار نرم */
.p-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 40px 30px;
    background: linear-gradient(to top, rgba(17,17,17,0.95), transparent);
    color: #ffffff;
    opacity: 0; 
    transform: translateY(30px); /* در حالت عادی مخفی و کمی پایین‌تر است */
    transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.p-item:hover .p-overlay {
    opacity: 1; 
    transform: translateY(0); /* با هاور به نرمی بالا می‌آید */
}

.p-overlay h2 {
    font-family: 'Playfair Display', serif !important;
    font-size: 26px !important;
    color: #ffffff;
    margin-bottom: 5px;
    font-weight: 400;
}

.p-overlay span {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #dddddd;
}

/* تنظیمات موبایل */
@media (max-width: 900px) {
    .p-grid {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
    .p-item {
        height: 350px;
        top: 0 !important; /* در موبایل بالا و پایین بودن رو برمیداریم تا به هم نریزه */
    }
}
/* ---------------------------------------------------
   نسخه Ultra برای صفحه INTERIOR (۳ ستونه و کشیده)
   --------------------------------------------------- */
.interior-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    grid-auto-rows: 320px !important; /* ارتفاع فریم‌ها بیشتر شد تا حس فضای داخلی منتقل شود */
    gap: 35px !important;
}

/* جادوی پراکندگی مخصوص داخلی */
.interior-grid .p-item:nth-child(even) { top: 60px; }
.interior-grid .p-item:nth-child(odd) { top: -30px; }

/* ---------------------------------------------------
   نسخه Ultra برای صفحه COMPETITION (سایز ۴/۶ - جمع‌وجور و شیک)
   --------------------------------------------------- */
.comp-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    grid-auto-rows: 380px !important; /* ارتفاع فریم‌ها به نسبت ۴/۶ کاهش یافت */
    gap: 30px !important; /* فاصله بین فریم‌ها کمی کمتر شد تا متناسب شود */
    padding-top: 40px;
    max-width: 1175px; /* عرض کل باکس محدودتر شد تا عکس‌ها غول‌پیکر نشوند */
    margin: 0 auto; /* گالری را دقیقاً در وسط صفحه قرار می‌دهد */
}

/* جادوی پراکندگی مخصوص مسابقات (متناسب با سایز جدید ظریف‌تر شد) */
.comp-grid .p-item:nth-child(even) { top: 50px; }
.comp-grid .p-item:nth-child(odd) { top: 0; }

/* ==========================================================================
   11. گالری پروژه‌های تکی - گرید یکپارچه و دقیق (Uniform Grid)
   ========================================================================== */
.project-gallery-wrapper {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 30px !important;
    
    /* جادوی تغییر سایز: عرض کل گالری شد ۷۰ درصد */
    width: 70% !important; 
    margin: 0 auto !important; /* گالری را در وسط صفحه قرار می‌دهد */
}

/* جادوی هم‌اندازه شدنِ تمام عکس‌ها (این بخش بدون تغییر می‌مونه) */
.project-gallery-wrapper img {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 4 / 3 !important; 
    object-fit: cover !important; 
    margin: 0 !important;
    display: block !important;
    cursor: zoom-in;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.project-gallery-wrapper img:hover {
    transform: translateY(-5px); 
    box-shadow: 0 15px 30px rgba(0,0,0,0.15);
}

/* ریسپانسیو بی‌نقص: تو صفحه‌های کوچیک‌تر سایز گالری رو بزرگتر می‌کنیم تا عکس‌ها دیده بشن */
@media (max-width: 1100px) {
    .project-gallery-wrapper { 
        width: 90% !important; 
        grid-template-columns: repeat(2, 1fr) !important; 
    }
}
@media (max-width: 600px) {
    .project-gallery-wrapper { 
        width: 100% !important; 
        grid-template-columns: 1fr !important; 
    }
}
/* Takhrib-e moshkel-e footer */
.site-main.project-single {
    min-height: 70vh !important;
    padding-bottom: 100px !important;
}

/* Takhrib-e moshkel-e parresh va chideman */

/* responsive kardan-e axa baraye gushi */
@media (max-width: 900px) { .project-gallery-wrapper { column-count: 2 !important; } }
@media (max-width: 600px) { .project-gallery-wrapper { column-count: 1 !important; } }

/* Lightbox-e pop-up */
#custom-lightbox img {
    transition: transform 0.3s ease;
}
/* اصلاح کیفیت عکس در گالری تکی */
.project-gallery-wrapper img {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    object-fit: cover !important; /* برای اینکه نسبت ابعاد هم بهم نخوره */
}
/* ==========================================================================
   12. ULTRA TYPOGRAPHY & MOBILE FIX (جراحی لیزری و قطعی)
   ========================================================================== */

/* ---------------------------------------------------
   ۱. فرمت مینیمال و شیکِ تیترها (فقط برای صفحات داخلی و گالری‌ها)
   --------------------------------------------------- */
.page:not(.home) .entry-title,
.page:not(.home) .page-title,
.p-header h1,
.project-header h1 {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 600 !important; /* ضخامت استاندارد، نه خیلی کلفت، نه نازک */
    font-size: 32px !important; /* سایز دقیق و جمع‌وجور (دقیقاً همون حس دکمه اما برای تیتر) */
    text-transform: uppercase !important;
    letter-spacing: 3px !important; /* فاصله حروف لوکس */
    color: #111111 !important;
    line-height: 1.3 !important;
    margin-bottom: 20px !important;
    text-align: left !important;
    display: block !important;
}

/* ظریف‌سازی توضیحات زیر تیتر */
.p-header p, 
.project-subtitle {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 300 !important;
    font-size: 14px !important; /* سایز استاندارد و خوانا */
    color: #777777 !important;
    letter-spacing: 1px !important;
    text-transform: none !important;
    margin-bottom: 40px !important;
    text-align: left !important;
}

/* ---------------------------------------------------
   ۲. حل قطعیِ مشکل موبایل (بدون به هم ریختن ساختار سایت)
   --------------------------------------------------- */
@media (max-width: 768px) {
    /* کوچک‌سازیِ هوشمندِ تیترها برای گوشی */
    .page:not(.home) .entry-title,
    .page:not(.home) .page-title,
    .p-header h1,
    .project-header h1 {
        font-size: 22px !important; /* سایز بسیار شیک برای موبایل */
        letter-spacing: 2px !important;
    }
    
    .p-header p, 
    .project-subtitle {
        font-size: 13px !important;
    }

    /* ایجاد فاصله امن در موبایل بدون دستکاری Body */
    .portfolio-master,
    .project-single,
    .p-grid,
    .project-gallery-wrapper {
        width: 100% !important;
        max-width: 100vw !important;
        padding-left: 20px !important; /* حاشیه امن چپ */
        padding-right: 20px !important; /* حاشیه امن راست */
        box-sizing: border-box !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}
/* ==========================================================================
   کلاس اختصاصی و قطعی برای تیترهای داخل صفحات (Ultra Title)
   ========================================================================== */
h1.ultra-title {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 600 !important;
    font-size: 32px !important; /* سایز دقیق و لوکس */
    text-transform: uppercase !important;
    letter-spacing: 3px !important;
    color: #111111 !important;
    line-height: 1.3 !important;
    margin-bottom: 50px !important; /* فاصله مناسب تا شروع محتوا */
    text-align: left !important;
    display: block !important;
    border: none !important;
}

/* ریسپانسیو برای موبایل */
@media (max-width: 768px) {
    h1.ultra-title {
        font-size: 22px !important;
        margin-bottom: 30px !important;
    }
}
/* ==========================================================================
   لینک‌های صفحه Services (افکت هاور لوکس)
   ========================================================================== */
a.ultra-service-link {
    text-decoration: none !important;
    display: inline-block;
}

a.ultra-service-link h2 { /* اگر تگت h3 هست، این رو به h3 تغییر بده */
    color: #111111 !important;
    transition: color 0.4s ease, transform 0.4s ease;
}

/* جادوی تغییر رنگ و حرکت میلی‌متری موقع رفتن موس روی کلمه */
a.ultra-service-link:hover h2 {
    color: #777777 !important; /* رنگ کمی روشن‌تر و خاکستری می‌شود */
    transform: translateX(5px); /* ۵ پیکسل خیلی نرم به سمت راست حرکت می‌کند */
}
/* ==========================================================================
   SUPER ULTRA MOBILE FIX (هدف‌گیری دقیق کلاس‌های اختصاصی)
   ========================================================================== */
@media (max-width: 768px) {
    /* قفل کردن عرض صفحه برای جلوگیری از بیرون‌زدگی */
    html, body {
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }

    /* ---------------------------------------------------
       ۱. اصلاح هدر: چیدمان زیر هم و وسط‌چین
       --------------------------------------------------- */
    .site-header {
        padding: 15px 5vw !important;
        height: auto !important;
    }
    
    /* این همون کانتینر اصلیته که حالا تو موبایل ستونی میشه */
    .header-container {
        display: flex !important;
        flex-direction: column !important; /* چیدمان زیر هم */
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        gap: 15px !important; /* فاصله عالی بین لوگو، منو و دکمه */
    }

    .site-logo img {
        max-width: 130px !important;
        height: auto !important;
        margin: 0 auto !important;
    }

    /* آزادسازی منو و شکستن خط‌ها */
    .primary-menu-list {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 12px !important;
        width: 100% !important;
        padding: 0 !important;
    }

    .primary-menu-list li {
        margin: 0 !important;
    }

    .primary-menu-list a {
        font-size: 11px !important;
        letter-spacing: 1px !important;
    }

    /* دکمه شروع پروژه */
    .btn-start-project {
        margin-top: 5px !important;
        font-size: 10px !important;
        padding: 10px 18px !important;
    }

    /* ---------------------------------------------------
       ۲. اصلاح فوتر: چیدمان ستونی و منظم
       --------------------------------------------------- */
    .site-footer {
        padding: 40px 5vw !important;
    }

    /* کانتینر اصلی فوتر که ستونی شد */
    .footer-container {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        gap: 30px !important;
    }

    /* ۳ بخش اصلی فوتر (چپ، شبکه‌های اجتماعی، راست) */
    .footer-left, .footer-social, .footer-right {
        width: 100% !important;
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    .footer-logo strong {
        text-align: center !important;
    }

    .footer-description {
        margin: 0 auto !important;
        text-align: center !important;
        max-width: 250px !important;
    }

    /* شبکه‌های اجتماعی در یک خط افقی اما وسط‌چین می‌مانند */
    .footer-social {
        flex-direction: row !important;
        justify-content: center !important;
        gap: 20px !important;
    }

    .footer-links {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
        margin-top: 0 !important;
    }

    .footer-links a {
        margin: 0 !important;
    }
}
/* ==========================================================================
   SUPER ULTRA MOBILE FIX - SECTION 3: SERVICES & PROJECTS IMAGE FIX
   ========================================================================== */

@media (max-width: 768px) {
    
    /* ---------------------------------------------------
       ۱. نجات کادر خدمات (آیکون‌های ۴تایی)
       --------------------------------------------------- */
    .services-container {
        flex-direction: column !important; /* اجبار به چیدمان زیر هم */
        align-items: center !important;
        gap: 45px !important; /* فاصله تنفسِ عالی بین آیکون‌ها */
        padding: 30px 0 !important;
    }

    .service-box {
        width: 100% !important;
        max-width: 400px !important;
        margin: 0 auto !important;
        text-align: center !important; /* وسط‌چین کردن شیکِ متن‌ها در گوشی */
    }

    /* ---------------------------------------------------
       ۲. نجات عکس‌های ۳تایی (Exterior, Interior, Competition)
       --------------------------------------------------- */
    /* ==========================================================================
   ULTRA PERFECT SPACING: 3-CARD PROJECT GRID
   ========================================================================== */

.projects-container {
    display: flex !important; /* استفاده از فلکس‌باکس برای کنترل دقیق */
    justify-content: space-between !important; /* فاصله بین کارت‌ها به صورت خودکار و مساوی */
    width: 100% !important;
    max-width: 1400px !important; /* محدود کردن عرض برای اینکه خیلی کشیده نشن */
    margin: 0 auto !important; /* وسط‌چین کردن کل باکس در صفحه */
    padding: 0 40px !important; /* فاصله از لبه‌های مانیتور (دقیقاً ۴۰ پیکسل) */
    gap: 40px !important; /* فاصله بین کارت‌ها (دقیقاً ۴۰ پیکسل) */
}

/* برای اینکه هر ۳ کارت دقیقاً هم‌اندازه باشن */
.project-card {
    flex: 1 !important; /* هر ۳ کارت سهم مساوی از فضا می‌برن */
    height: 400px !important; /* ارتفاع کارت‌ها رو کمی بیشتر کردیم برای ابهت بیشتر */
    margin: 0 !important;
    border-radius: 4px !important; /* همون خمیدگیِ لاکچری */
    overflow: hidden;
}

/* تنظیم واکنش‌گرایی برای تبلت و موبایل که فاصله‌ها بهم نخوره */
@media (max-width: 900px) {
    .projects-container {
        flex-direction: column !important; /* ستونی شدن در موبایل */
        gap: 20px !important;
        padding: 0 20px !important;
    }
    .project-card {
        height: 300px !important;
    }
}

    .project-card {
        width: 100% !important;
        height: 35vh !important; /* ارتفاع پویا بر اساس قدِ گوشیِ کاربر (ابهت بیشتر) */
        min-height: 280px !important; /* حداقل ارتفاع برای اینکه عکس‌ها باریک نشن */
    }

    /* ---------------------------------------------------
       ۳. بهینه‌سازی افکتِ هاور عکس‌ها برای لمسِ موبایل
       --------------------------------------------------- */
    /* چون در موبایل موس نداریم که هاور کنیم، متن باید همیشه در جای درست و خوانا باشه */
    .project-info {
        transform: translateY(0) !important; /* متن همیشه بالا و سر جایش باشد */
        padding: 25px 20px !important;
    }
    
    .project-card::before {
        height: 60% !important; /* هاله تاریک همیشه تا نیمه عکس باشه تا تیترها خوانا بشن */
        opacity: 0.85 !important;
    }
}
/* ==========================================================================
   MAGIC CODE V3: UNBREAKABLE GRID LAYOUT (لوگو چپ، دکمه راست، منو پایین)
   ========================================================================== */

@media (max-width: 768px) {
    
    /* ---------------------------------------------------
       ۱. تبدیل هدر به یک شبکه (Grid) غیرقابل تغییر
       --------------------------------------------------- */
    .header-container {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important; /* دو ستون مساوی (چپ و راست) */
        grid-template-rows: auto auto !important; /* دو ردیف (بالا و پایین) */
        align-items: center !important;
        row-gap: 15px !important; /* فاصله بین ردیف بالا و پایین */
        width: 100% !important;
        padding: 15px 5vw !important;
    }

    /* جایگاه اول: لوگو -> ستون ۱ (چپ)، ردیف ۱ (بالا) */
    .site-logo, 
    .site-branding {
        grid-column: 1 / 2 !important;
        grid-row: 1 / 2 !important;
        justify-self: start !important; /* قفل شدن به سمت چپ */
        margin: 0 !important;
        text-align: left !important;
    }

    .site-logo img {
        max-width: 110px !important;
        height: auto !important;
        display: block !important;
    }

    /* جایگاه دوم: دکمه -> ستون ۲ (راست)، ردیف ۱ (بالا) */
    .btn-start-project, 
    .header-button {
        grid-column: 2 / 3 !important;
        grid-row: 1 / 2 !important;
        justify-self: end !important; /* قفل شدن به سمت راست */
        margin: 0 !important;
        font-size: 9px !important;
        padding: 8px 12px !important;
        width: auto !important;
    }

    /* جایگاه سوم: منو -> کشیده شدن روی هر دو ستون، ردیف ۲ (پایین) */
    .primary-menu-list, 
    .main-navigation,
    .site-header nav {
        grid-column: 1 / 3 !important; /* کشیده شدن از چپ تا راست */
        grid-row: 2 / 3 !important; /* رفتن به ردیف پایین */
        justify-self: center !important; /* وسط‌چین شدن */
        width: 100% !important;
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 12px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .primary-menu-list li {
        margin: 0 !important;
    }

    .primary-menu-list a {
        font-size: 11px !important;
        letter-spacing: 0.5px !important;
    }

    /* ---------------------------------------------------
       ۲. فشرده‌سازی بی‌نقص بخش خدمات (گرید 2x2)
       --------------------------------------------------- */
    .services-container {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 25px 15px !important; 
        padding: 20px 15px !important;
    }

    .service-box {
        margin: 0 !important;
        padding: 0 !important;
        text-align: center !important;
    }

    .service-icon {
        font-size: 2.2vh !important; 
        margin-bottom: 8px !important;
    }

    .service-box h3 {
        font-size: 11px !important;
        margin-bottom: 5px !important;
    }

    .service-box p {
        font-size: 10px !important;
        line-height: 1.4 !important;
    }

    /* ---------------------------------------------------
       ۳. کاهش ارتفاع عکس‌ها برای اسکرول سریع‌تر
       --------------------------------------------------- */
    .project-card {
        height: 220px !important; 
        min-height: auto !important;
    }

    .project-info {
        padding: 15px !important; 
    }

    .project-info h3 {
        font-size: 14px !important;
        margin-bottom: 2px !important;
    }

    .hero-content h1 {
        font-size: clamp(26px, 7vw, 32px) !important;
        margin-bottom: 10px !important;
    }
}
/* ==========================================================================
   PORTFOLIO PAGE SPACING FIX (اصلاح فاصله‌های اضافی بالای صفحه و متن‌ها)
   ========================================================================== */

/* ۱. خنثی کردن فاصله‌های مخفیِ پیش‌فرض وردپرس در بالای صفحه */
.page-template-default .site-main, 
.page-template-default .entry-content,
.page-template-default .post {
    margin-top: 0 !important;
    padding-top: 20px !important; /* یک فاصله تنفسِ استاندارد از هدر */
}

.portfolio-master {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* ۲. تنظیم فاصله بین تیتر (SELECTED WORKS) و متنِ زیر آن */
.p-header h1.ultra-title {
    margin-top: 0 !important;
    margin-bottom: 8px !important; /* فاصله میلی‌متری و بسیار شیک با توضیحات */
    line-height: 1.1 !important;
}

/* ۳. تنظیم فاصله متن توضیحات تا شروع گالری عکس‌ها */
.p-header p {
    margin-top: 0 !important;
    margin-bottom: 35px !important; /* فاصله امن تا شروع عکس‌ها */
    line-height: 1.6 !important;
}

/* ۴. کاهش فضای خالیِ بالای گرید عکس‌ها */
.p-grid {
    padding-top: 0 !important;
}
/* ==========================================================================
   FIX DOUBLE CARDS (جلوگیری قطعی از تکرار شدن گالری‌ها توسط قالب)
   ========================================================================== */

/* اگر کل باکس پورتفولیو دو بار لود شد، دومی را کاملاً مخفی کن */
.portfolio-master ~ .portfolio-master {
    display: none !important;
}

/* اگر گرید عکس‌ها دو بار لود شد، دومی را مخفی کن */
.p-grid ~ .p-grid {
    display: none !important;
}

/* جلوگیری از باگ تکرار محتوا در کانتینر اصلی وردپرس */
.page-template-default .entry-content > .portfolio-master:nth-of-type(n+2) {
    display: none !important;
}
/* ==========================================================================
   FOOTER LOGO FONT MATCH (همگام‌سازی فونت فوتر با دکمه استارت پروژه)
   ========================================================================== */
.site-footer .footer-logo strong {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 800 !important; /* ضخیم و با ابهت مثل دکمه */
    letter-spacing: 3px !important; /* فاصله حروف شیک و مدرن */
    text-transform: uppercase !important;
}
/* ==========================================================================
   ABOUT PAGE - CINEMATIC IDENTITY (نسخه سوپر اولترا)
   ========================================================================== */

.about-master {
    width: 100%;
    background: #ffffff;
}

/* ---------------------------------------------------
   ۱. هیروی سینمایی (کادر تاریک و عریض بالا)
   --------------------------------------------------- */
.about-hero {
    position: relative;
    width: 100vw !important;
    height: 70vh; /* ارتفاع سینمایی */
    margin-left: calc(-50vw + 50%); /* فول‌سکرین کردن در وردپرس */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #000;
}

.ah-bg {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    opacity: 0.55; /* تاریک کردن عکس برای خوانایی تیتر */
}

.ah-bg img, .ah-bg video {
    width: 100%; height: 100%;
    object-fit: cover;
    filter: grayscale(100%); /* سیاه‌سفید کردن هنری عکس پس‌زمینه */
}

.ah-content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 0 20px;
}

.ah-title {
    font-family: 'Playfair Display', serif !important;
    font-size: clamp(35px, 6vw, 75px) !important;
    color: #ffffff !important;
    line-height: 1.2 !important;
    letter-spacing: 1px !important;
    font-weight: 400 !important;
    text-shadow: 2px 4px 10px rgba(0,0,0,0.5);
}

/* ---------------------------------------------------
   ۲. چیدمان نامتقارن داستان استودیو
   --------------------------------------------------- */
.about-story {
    max-width: 1200px;
    margin: 120px auto;
    padding: 0 5vw;
    display: flex;
    gap: 80px;
}

.as-left {
    flex: 0 0 25%;
}

.as-left h2 {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 12px !important;
    letter-spacing: 4px !important;
    text-transform: uppercase;
    color: #aaaaaa;
    margin-top: 15px;
}

.as-right {
    flex: 1;
}

.as-right p {
    font-family: 'Playfair Display', serif !important;
    font-size: 28px !important;
    line-height: 1.7 !important;
    color: #111111;
    margin-bottom: 40px;
}

.as-right p:last-child {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 15px !important;
    line-height: 1.8 !important;
    color: #777777;
}

/* ---------------------------------------------------
   ۳. معرفی اعضای تیم (The Masters)
   --------------------------------------------------- */
.about-team {
    max-width: 1200px;
    margin: 0 auto 120px auto;
    padding: 0 5vw;
}

.at-header h2 {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13px !important;
    letter-spacing: 4px !important;
    text-transform: uppercase;
    color: #111111;
    margin-bottom: 50px;
    text-align: center;
}

.at-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

.at-card {
    position: relative;
    aspect-ratio: 3 / 4; /* کادر قد بلند و شیک مثل پرتره */
    overflow: hidden;
    background: #f0f0f0;
    cursor: pointer;
}

.at-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%); /* پیش‌فرض: عکس سیاه‌سفید */
    transition: filter 0.8s ease, transform 1s cubic-bezier(0.25, 1, 0.5, 1);
}

.at-card:hover img {
    filter: grayscale(0%); /* با رفتن موس: عکس رنگی می‌شود */
    transform: scale(1.05); /* زوم بسیار ملایم */
}

.at-overlay {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 30px;
    background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
    color: #fff;
    opacity: 0;
    transform: translateY(20px); /* متن مخفی و پایین است */
    transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.at-card:hover .at-overlay {
    opacity: 1;
    transform: translateY(0); /* متن با ملایمت بالا می‌آید */
}

.at-overlay h3 {
    font-family: 'Playfair Display', serif !important;
    font-size: 22px !important;
    margin-bottom: 5px;
    font-weight: 400;
    color: #ffffff;
}

.at-overlay span {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #bbbbbb;
}

/* ---------------------------------------------------
   ۴. اصلاحات و واکنش‌گرایی برای موبایل
   --------------------------------------------------- */
@media (max-width: 768px) {
    .about-story {
        flex-direction: column !important;
        gap: 30px !important;
        margin: 80px auto !important;
    }
    
    .as-right p {
        font-size: 22px !important; /* سایز خوانا برای موبایل */
    }
    
    .at-grid {
        grid-template-columns: 1fr !important; /* تبدیل به یک ستون زیر هم */
        gap: 20px !important;
    }
    
    .ah-title {
        font-size: 28px !important;
    }
    
    .about-hero {
        height: 50vh !important;
    }
}
/* ==========================================================================
   SOLO ARTIST BIO (نسخه اولترا و لاکچری رزومه آرش فتاحی)
   ========================================================================== */
.solo-artist-wrapper {
    display: flex;
    align-items: center;
    gap: 60px;
    max-width: 1000px;
    margin: 0 auto;
}

.sa-image-box {
    flex: 0 0 42%; /* عکس 42 درصد فضا را می‌گیرد */
}

/* استفاده مجدد از کلاس‌های قبلی برای حفظ افکت هاور رنگی‌شدن */
.sa-image-box .at-card {
    width: 100%;
    aspect-ratio: 3 / 4;
}

.sa-bio-box {
    flex: 1; /* متن بقیه فضا را می‌گیرد */
    padding-right: 15px;
}

/* تایپوگرافی اسم */
.bio-name {
    font-family: 'Playfair Display', serif !important;
    font-size: 42px !important;
    font-weight: 600;
    color: #111111;
    margin-bottom: 8px !important;
    letter-spacing: 1px;
}

/* تایپوگرافی عنوان شغلی */
.bio-title {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 11px !important;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: #888888;
    margin-bottom: 25px !important;
}

/* خط مشکی ظریف زیر اسم */
.bio-line {
    width: 60px;
    height: 2px;
    background-color: #111111;
    margin-bottom: 30px;
}

/* متن اصلی رزومه */
.bio-text {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 15px !important;
    line-height: 1.8 !important;
    color: #555555;
    margin-bottom: 20px !important;
}

.bio-text strong {
    color: #111111;
    font-weight: 600;
}

/* باکسِ دستاورد ویژه (استادیوم در ایتالیا) */
.bio-highlight {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    margin-top: 35px;
    padding: 30px;
    background-color: #f8f8f8;
    border-left: 3px solid #111111;
    transition: transform 0.4s ease;
}

.bio-highlight:hover {
    transform: translateX(5px); /* افکت نرم حرکت به راست هنگام رفتن موس */
}

.highlight-icon {
    font-size: 24px;
    color: #111111;
    line-height: 1;
}

.bio-highlight p {
    font-family: 'Playfair Display', serif !important;
    font-size: 19px !important;
    line-height: 1.6 !important;
    color: #111111 !important;
    margin: 0 !important;
    font-style: italic; /* ایتالیک برای حس نقل‌قول و مجله‌ای */
}

/* ---------------------------------------------------
   واکنش‌گرایی برای موبایل (Responsive Fix)
   --------------------------------------------------- */
@media (max-width: 768px) {
    .solo-artist-wrapper {
        flex-direction: column;
        gap: 40px;
    }
    
    .sa-image-box {
        flex: 0 0 100%;
        width: 100%;
    }
    
    .bio-name {
        font-size: 36px !important;
    }
    
    .bio-highlight p {
        font-size: 16px !important;
    }
}
/* ==========================================================================
   UPDATE: STADIUM IMAGE RESIZE & ALIGNMENT (تنظیمات جدید عکس استادیوم)
   ========================================================================== */
.solo-artist-wrapper {
    align-items: flex-start !important; /* عکس را به بالاترین نقطه می‌کشد تا با تیتر هم‌تراز شود */
    max-width: 1100px !important; /* کل کادر را کمی عریض‌تر کردیم تا جا برای عکس باز شود */
}

.sa-image-box {
    flex: 0 0 48% !important; /* سهم عکس را از ۴۲٪ به ۴۸٪ افزایش دادیم (بزرگتر شدن عرض) */
    margin-top: 15px !important; /* یک تنظیم میلی‌متری برای اینکه دقیقاً روبروی اسم قرار بگیرد */
}

.sa-image-box .at-card {
    aspect-ratio: 4 / 5 !important; /* کادر را از حالت باریک درآوردیم تا برای عکس معماری مناسب‌تر شود */
}
/* ==========================================================================
   ULTRA COMPACT ABOUT PAGE (تغییر فونت به مدرن و حذف اسکرول)
   ========================================================================== */

/* ۱. کشیدن کل محتوا به سمت بالا برای جا شدن در یک صفحه */
.about-team {
    margin: 20px auto 40px auto !important; /* فاصله‌های بالا و پایین به شدت کم شد */
}

.solo-artist-wrapper {
    align-items: center !important; /* دوباره وسط‌چین کردیم تا با متن فشرده هماهنگ شود */
}

/* ۲. تغییر فونت اسم به فونت مدرن سایت و فشرده‌سازی */
.sa-bio-box .bio-name {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 32px !important; /* سایز جمع‌وجورتر */
    font-weight: 800 !important;
    margin-bottom: 5px !important;
    letter-spacing: 0px !important;
}

.sa-bio-box .bio-title {
    font-size: 10px !important;
    margin-bottom: 15px !important;
}

.sa-bio-box .bio-line {
    margin-bottom: 15px !important; /* خط جداکننده نزدیک‌تر شد */
}

/* ۳. فشرده‌سازی متن رزومه (فونت یکدست و فاصله‌ی کمتر) */
.sa-bio-box .bio-text {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13px !important; /* فونت ریزتر و مهندسی‌تر */
    line-height: 1.5 !important; /* فاصله خطوط کمتر شد */
    margin-bottom: 12px !important;
}

/* ۴. جمع کردن باکس نقل‌قول (اون مربع بلند رو تخت و فشرده کردیم) */
.bio-highlight {
    margin-top: 15px !important;
    padding: 15px 20px !important; /* پدینگ‌ها نصف شد */
    gap: 12px !important;
}

.bio-highlight p {
    font-family: 'Montserrat', sans-serif !important; /* فونت مدرن */
    font-size: 13px !important; /* سایز بسیار شیک و ریز */
    line-height: 1.5 !important;
    font-style: normal !important; /* حذف حالت ایتالیکِ کلاسیک */
    font-weight: 500 !important;
}

.highlight-icon {
    font-size: 18px !important; /* آیکون ستاره کوچکتر شد */
}

/* ۵. تنظیمات موس برای عکس */
.sa-image-box .at-card {
    cursor: pointer !important;
}
/* ==========================================================================
   ULTRA BLOG: EDITORIAL DESIGN (ژورنال معماری)
   ========================================================================== */
.blog-master { max-width: 1200px; margin: 0 auto; padding: 40px 5vw; }

.blog-header { text-align: center; margin-bottom: 60px; }
.blog-header h1 { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 40px; letter-spacing: 5px; }

.blog-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); 
    gap: 40px; 
}

.b-item { background: #fff; transition: 0.4s; }
.b-item:hover { transform: translateY(-10px); }

.b-img { aspect-ratio: 16 / 9; overflow: hidden; background: #eee; }
.b-img img { width: 100%; height: 100%; object-fit: cover; transition: 0.6s; }
.b-item:hover .b-img img { transform: scale(1.05); }

.b-content { padding: 20px 0; }
.b-cat { font-size: 10px; letter-spacing: 2px; color: #aaa; text-transform: uppercase; }
.b-content h2 { font-size: 22px; margin: 10px 0; font-family: 'Playfair Display', serif; }
.b-read { font-size: 11px; color: #111; font-weight: 600; text-transform: uppercase; }
/* اصلاحِ نهاییِ گرید برای نمایشِ کنارِ هم */
.blog-grid { 
    display: grid !important; 
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)) !important; 
    gap: 50px !important; 
    padding-top: 40px !important;
}

/* اصلاحِ باکسِ مقاله برای هماهنگی با گرید */
.b-item { 
    display: flex !important; 
    flex-direction: column !important; 
}
/* برای اینکه استایل بلاگ از پورتفولیو متمایز باشد */
.blog .project-single .project-title {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 800 !important;
    font-size: 36px !important;
}
/* گرید اتوماتیک و فوقِ سریع برای بخش بلاگ */
.blog-posts-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* دو ستونه شیک */
    gap: 60px;
    margin-top: 50px;
}

@media (max-width: 768px) {
    .blog-posts-grid { grid-template-columns: 1fr; }
}
/* ==========================================================================
   ULTRA VERSION 2.0: BULLETPROOF EDITORIAL LAYOUT
   ========================================================================== */

/* ۱. استایلِ سینماییِ تیتر */
.project-single .project-title {
    text-align: center !important;
    font-family: 'Playfair Display', serif !important;
    font-size: clamp(32px, 5vw, 60px) !important;
    letter-spacing: 5px !important;
    margin-bottom: 20px !important;
    text-transform: uppercase;
    color: #111 !important;
}

.project-single .project-divider {
    margin: 0 auto 60px auto !important;
    width: 70px !important;
    height: 2px !important;
    background-color: #111 !important;
}

/* ۲. باکسِ نگهدارنده‌ی متن (جلوگیری از به‌هم‌ریختگی) */
.ultra-content-box {
    display: block !important;
    width: 100% !important;
    max-width: 900px !important; /* از 850px به 1200px افزایش یافت (۱.۵ برابر) */
    margin: 0 auto 60px auto !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
}

/* تایپوگرافیِ تنفسی */
.ultra-content-box p {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 18px !important;
    line-height: 2.1 !important;
    color: #444 !important;
    margin-bottom: 25px !important;
    text-align: justify !important;
    clear: both !important;
}

/* حرفِ اولِ لاکچری */
.drop-cap-pro::first-letter {
    font-family: 'Playfair Display', serif !important;
    font-size: 85px !important;
    float: left;
    line-height: 0.8;
    margin-right: 15px;
    margin-top: 8px;
    color: #111 !important;
}

/* ۳. گالری تصاویر (موتورِ Grid هوشمند برای حذف اسکرول) */
.ultra-gallery-box {
    display: grid !important;
    /* گریدِ هوشمند: عکس‌ها رو بزرگ می‌کنه و تمام عرضِ مجاز رو پر می‌کنه */
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)) !important; 
    gap: 30px !important;
    width: 100% !important;
    max-width: 1400px !important; /* عرض کلی گالری هم بیشتر شد */
    margin: 0 auto 80px auto !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
    justify-content: center !important;
}

.ug-img {
    width: 100% !important;
    overflow: hidden !important;
    border-radius: 4px !important; /* یک خمیدگی میلی‌متری و لوکس */
    box-shadow: 0 15px 35px rgba(0,0,0,0.08) !important;
}

/* کادربندی یکدست عکس‌ها (جادوی اصلی) */
.ug-img img {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 4 / 5 !important; /* تمام عکس‌ها را هم‌قد و پرتره می‌کند */
    object-fit: cover !important; /* بدون دفرمه شدن عکس */
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1) !important;
    cursor: pointer !important;
    display: block !important;
}

.ug-img:hover img {
    transform: scale(1.05) !important; /* زومِ نرمِ سینمایی موقع رفتن موس */
}

/* واکنش‌گرایی برای موبایل و تبلت */
@media (max-width: 900px) {
    .ultra-gallery-box {
        grid-template-columns: repeat(2, 1fr) !important; /* ۲ ستونه در تبلت */
    }
}
@media (max-width: 600px) {
    .ultra-gallery-box {
        grid-template-columns: 1fr !important; /* ۱ ستونه در موبایل */
    }
    .drop-cap-pro::first-letter {
        font-size: 65px !important; /* کوچکتر شدن حرف در موبایل */
    }
}
/* ==========================================================================
   BLOG FIX: ULTRA ISOLATED (اصلاح بلاگ بدون کوچکترین تغییر در پورتفولیو)
   ========================================================================== */

/* ۱. آزاد کردنِ عرض متن مقاله و بزرگ کردن فونت */
.ultra-content-box {
    flex: 0 0 100% !important; /* ضدگلوله در برابر تنظیمات قالب */
    display: block !important;
    width: 100% !important;
    max-width: 1100px !important; /* عرضِ پهن و مجله‌ای برای متن */
    margin: 0 auto 50px auto !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
}

.ultra-content-box p {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 19px !important; /* فونت درشت‌تر برای خوانایی */
    line-height: 2.2 !important;
    color: #333 !important;
    text-align: justify !important;
    margin-bottom: 25px !important;
    width: 100% !important;
    display: block !important;
}

/* ۲. حرف اول لاکچری */
.drop-cap-pro::first-letter {
    font-family: 'Playfair Display', serif !important;
    font-size: 85px !important;
    float: left !important;
    line-height: 0.8 !important;
    margin-right: 15px !important;
    margin-top: 8px !important;
    color: #111 !important;
}

/* ۳. تنظیمِ گالریِ ۳ عکسه برای پایینِ مقاله */
.ultra-gallery-box {
    flex: 0 0 100% !important; /* ضدگلوله در برابر تنظیمات قالب */
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important; /* دقیقاً ۳ ستون */
    gap: 30px !important;
    width: 100% !important;
    max-width: 1300px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
    clear: both !important;
}

.ultra-gallery-box .ug-img {
    width: 100% !important;
    display: block !important;
}

.ultra-gallery-box .ug-img img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 5 !important; /* کراپِ یکدستِ پرتره */
    object-fit: cover !important;
    border-radius: 4px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1) !important;
}

/* ۴. واکنش‌گرایی فقط برای بلاگ (موبایل و تبلت) */
@media (max-width: 900px) {
    .ultra-gallery-box { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 600px) {
    .ultra-gallery-box { grid-template-columns: 1fr !important; }
}
/* ==========================================================================
   SCATTERED & ASYMMETRICAL LUXURY (1.2x SCALED) - مقیاس ۲۰٪ بزرگتر
   ========================================================================== */

.p-grid {
    grid-auto-rows: 300px !important; /* ارتفاع پایه از 250px شد 300px */
    gap: 36px !important; /* فاصله‌ها از 30px شد 36px */
}

/* برای اینکه فونتِ تیترِ روی عکس‌ها هم متناسب با عکس بزرگ بشه */
.p-overlay h2 {
    font-size: 31px !important; /* از 26px شد 31px */
}
/* ==========================================================================
   SUPER ULTRA FIX: SINGLE PROJECTS & MAIN GRID OVERLAPS
   ========================================================================== */

/* ---------------------------------------------------
   ۱. حل مشکل روی‌هم‌افتادگی عکس‌ها در صفحات اصلی (Ext/Int/Comp)
   --------------------------------------------------- */
/* باطل کردنِ جابجایی‌های مخرب قدیمی روی تمام عکس‌ها */
.p-grid .p-item { 
    top: 0 !important; 
    transform: none !important; 
    margin: 0 !important; 
}

/* اعمال پراکندگی هنریِ فقط و فقط روی عکس‌های کوچک (تا عکس‌های بزرگ از کادر بیرون نزنند) */
.p-grid .p-medium:nth-child(2n) {
    transform: translateY(30px) !important;
}
.p-grid .p-medium:nth-child(3n) {
    transform: translateY(-20px) !important;
}

/* ---------------------------------------------------
   ۲. حل مشکل چیدمان گالری داخل پروژه‌ها (۳ ستون، کاملاً مربعی، فاصله‌های یکدست)
   --------------------------------------------------- */
.project-gallery-wrapper {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important; /* دقیقاً ۳ ستون */
    gap: 40px !important; /* فاصله بین عکس‌ها */
    width: 100% !important;
    max-width: 1400px !important;
    margin: 0 auto !important;
    /* این پدینگ باعث میشه فاصله عکس‌ها از لبه‌ی مانیتور دقیقاً برابر با فاصله بین خود عکس‌ها باشه */
    padding: 0 40px !important; 
    box-sizing: border-box !important;
}

/* کادرهای کاملاً مربعی و هم‌اندازه */
.project-gallery-wrapper img {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 1 / 1 !important; /* جادوی کادر مربعی (۱ در ۱) */
    object-fit: cover !important;
    display: block !important;
    border-radius: 4px !important; /* یک خمیدگی بسیار لوکس */
}

/* واکنش‌گرایی برای موبایل و تبلت در داخل پروژه‌ها */
@media (max-width: 900px) {
    .project-gallery-wrapper { 
        grid-template-columns: repeat(2, 1fr) !important; 
        gap: 20px !important; 
        padding: 0 20px !important; 
    }
}
@media (max-width: 600px) {
    .project-gallery-wrapper { 
        grid-template-columns: 1fr !important; 
    }
}

/* ---------------------------------------------------
   ۳ و ۴. حل مشکل فونت تیتر و وسط‌چین شدن نوشته‌ی زیر تیتر در داخل پروژه‌ها
   --------------------------------------------------- */
.project-single .project-title {
    text-align: center !important;
    font-family: 'Playfair Display', serif !important; /* دقیقاً هم‌فونت سربرگ صفحات اصلی */
    font-size: 45px !important; 
    letter-spacing: 4px !important;
    font-weight: 400 !important;
    text-transform: uppercase !important;
    color: #111 !important;
    margin-bottom: 10px !important;
    width: 100% !important;
    display: block !important;
}

/* نوشته‌ی زیر تیتر (مثلاً کلمه exterior) */
.project-single .project-subtitle,
.project-single .project-category,
.project-single .p-header p {
    text-align: center !important; /* وسط‌چین شدن قطعی */
    font-family: 'Montserrat', sans-serif !important;
    font-size: 14px !important;
    letter-spacing: 2px !important;
    color: #777 !important;
    text-transform: uppercase !important;
    margin: 0 auto 50px auto !important; /* فاصله شیک از پایین تا شروع گالری */
    display: block !important;
    width: 100% !important;
}
/* ==========================================================================
   SUPER ULTRA FIX V5: MONTSERRAT FONTS & BULLETPROOF SINGLE GRID
   ========================================================================== */

/* ---------------------------------------------------
   ۱. بازگشت به فونت اصلی (Montserrat) و وسط‌چین کردن همه تیترها
   --------------------------------------------------- */
.page:not(.home) .entry-title,
.page:not(.home) .page-title,
.p-header h1,
.project-header h1,
h1.ultra-title,
.single-post h1.entry-title,
.single-post .project-title,
.single-post h1 {
    text-align: center !important; 
    font-family: 'Montserrat', sans-serif !important; /* بازگشت به فونت مدرن و اصلی */
    font-weight: 800 !important; /* ضخیم و با ابهت مثل تصویر ۱ */
    text-transform: uppercase !important; 
    letter-spacing: 5px !important; /* فاصله شیک حروف */
    font-size: 40px !important; 
    color: #111 !important;
    margin-bottom: 30px !important;
    display: block !important;
    width: 100% !important;
}

/* نوشته‌های کوچیک زیر تیتر (مثل Exterior یا Interior) */
.single-post .project-subtitle,
.single-post .project-category,
.project-header p {
    text-align: center !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 14px !important;
    letter-spacing: 2px !important;
    color: #777 !important;
    text-transform: uppercase !important;
    margin: 0 auto 50px auto !important;
    display: block !important;
    width: 100% !important;
}


/* ==========================================================================
   SUPER ULTRA FIX V6: 100% MONTSERRAT & SIZING ADJUSTMENTS
   ========================================================================== */

/* ۱. یکپارچه‌سازی تمام تیترهای سایت با فونت مونتسرات و کاهش سایز */
.page:not(.home) .entry-title,
.page:not(.home) .page-title,
.p-header h1,
.project-header h1,
h1.ultra-title,
.single-post h1.entry-title,
.single-post .project-title,
.single-post h1 {
    font-family: 'Montserrat', sans-serif !important; 
    font-weight: 800 !important;
    text-transform: uppercase !important; 
    letter-spacing: 5px !important; 
    font-size: 30px !important; /* سایز تیتر اصلی از 40 به 30 کاهش یافت */
    text-align: center !important; 
    color: #111 !important;
    margin-bottom: 25px !important;
    display: block !important;
    width: 100% !important;
}

/* ۲. تیتر سفید روی عکس‌ها (هاور) - تغییر قطعی به مونتسرات و کوچکتر شدن */
.p-grid .p-overlay h2 {
    font-family: 'Montserrat', sans-serif !important; /* خداحافظی با فونت کلاسیک */
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    font-size: 17px !important; /* سایز فونت روی عکس کوچکتر و شیک‌تر شد */
    line-height: 1.4 !important;
    color: #ffffff !important;
    margin-bottom: 5px !important;
}

/* ۳. نوشته‌ی کوچیک زیر تیتر عکس (مثلاً کلمه EXTERIOR) */
.p-grid .p-overlay span {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 400 !important;
    font-size: 10px !important;
    letter-spacing: 3px !important;
    color: #dddddd !important;
    text-transform: uppercase !important;
}
/* ==========================================================================
   SUPER ULTRA FIX V7: BULLETPROOF SINGLE PROJECT GRID
   ========================================================================== */

/* ۱. ساختار اصلیِ محتوای پروژه */
.single-post .entry-content {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 36px !important;
    padding: 0 2vw !important;
    max-width: 1980px !important;
    margin: 0 auto 100px auto !important;
    align-items: start !important;
}

/* ۲. متن‌ها و تیترها کلِ عرض (۳ ستون) رو بگیرن تا گرید به هم نریزه */
.single-post .entry-content > * {
    grid-column: 1 / -1 !important;
    text-align: center !important;
}

/* ۳. جادوی اصلی: دور زدن باگِ مخفی وردپرس! */
/* اگر وردپرس تمام عکس‌ها رو داخل یک پاراگرافِ مخفی گذاشت، خود اون پاراگراف رو به شبکه ۳ ستونه تبدیل می‌کنیم */
.single-post .entry-content p:has(img),
.single-post .entry-content .wp-block-gallery {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 36px !important;
    grid-column: 1 / -1 !important; /* این پاراگراف کل عرض شبکه مادر رو می‌گیره */
    margin: 0 !important;
    padding: 0 !important;
}

/* اگر وردپرس عکس‌ها رو تک‌تک (مثلاً با Gutenberg) گذاشت، هر کدوم ۱ ستون بگیرن */
.single-post .entry-content figure.wp-block-image {
    grid-column: span 1 !important;
}

/* ۴. کادرهای مربعی و بی‌نقص برای تمام عکس‌ها */
.single-post .entry-content img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important; /* جادوی مربعِ بی‌نقص */
    object-fit: cover !important; /* پر کردن کادر بدون کشیدگی */
    border-radius: 4px !important;
    display: block !important;
    margin: 0 auto !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05) !important;
}

/* ۵. واکنش‌گرایی تضمینی برای موبایل و تبلت */
@media (max-width: 900px) {
    .single-post .entry-content,
    .single-post .entry-content p:has(img),
    .single-post .entry-content .wp-block-gallery {
        grid-template-columns: repeat(2, 1fr) !important; /* تبلت: ۲ ستونه */
        gap: 20px !important;
    }
}
@media (max-width: 600px) {
    .single-post .entry-content,
    .single-post .entry-content p:has(img),
    .single-post .entry-content .wp-block-gallery {
        grid-template-columns: 1fr !important; /* موبایل: ۱ ستونه */
    }
}
/* ==========================================================================
   SUPER ULTRA SAFE FOOTER & HEADER FIX
   ========================================================================== */
/* این کد کاری به هدر نداره و فقط به محتوای وسط میگه قد بکش تا فوتر بره پایین */
.site-main, .site-content, #content, #main, main {
    min-height: 75vh !important; 
}

/* ==========================================================================
   SUPER ULTRA BLOG STYLES - (RESTRICTED TO BLOG CATEGORY ONLY)
   ========================================================================== */

/* این کدها فقط و فقط در دسته‌بندی بلاگ اجرا می‌شوند و پورتفولیو را خراب نمی‌کنند */

body.category-blog {
    overflow-x: hidden !important;
}

@media (min-width: 900px) {
    
    /* ۱. استایل متن‌ها (فقط بلاگ) */
    body.category-blog .ar-single-grid p,
    body.category-blog .ar-single-grid h2,
    body.category-blog .ar-single-grid h3,
    body.category-blog .ar-single-grid h4,
    body.category-blog .ar-single-grid ul,
    body.category-blog .ar-single-grid ol {
        max-width: 1200px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 30px !important;
        padding-right: 30px !important;
        text-align: justify !important;
        line-height: 2 !important; 
        font-size: 16px !important;
        color: #333 !important; 
        margin-bottom: 25px !important;
    }

    /* ۲. خنثی کردن محدودیت‌ها (فقط بلاگ) */
    body.category-blog .ar-single-grid figure,
    body.category-blog .ar-single-grid .wp-caption {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        clear: both !important;
    }

    /* ۳. عکس‌های واید و سینمایی (فقط برای مقالات بلاگ) */
    body.category-blog .ar-single-grid img {
        width: calc(100vw - 150px) !important; 
        max-width: 1200px !important; 
        height: auto !important; 
        background-color: transparent !important; 
        position: relative !important;
        left: 50% !important;
        transform: translateX(-50%) !important; 
        display: block !important;
        margin: 40px auto !important; 
        border-radius: 12px !important; 
        box-shadow: 0 4px 15px rgba(0,0,0,0.05) !important; 
    }

    /* ۴. کپشن زیر عکس‌ها (فقط بلاگ) */
    body.category-blog .ar-single-grid .wp-caption-text,
    body.category-blog .ar-single-grid figcaption {
        text-align: center !important;
        font-family: 'Montserrat', sans-serif !important;
        color: #777 !important;
        font-size: 14px !important;
        padding-top: 10px !important;
        margin-bottom: 40px !important;
        max-width: 100% !important;
    }
}

/* ==========================================================================
   BLOG ISOLATION FIX: 100% FREE IMAGES (فقط برای مقالات بلاگ)
   ========================================================================== */

/* ۱. خارج کردن بلاگ از حالت شبکه ۳ ستونه و عریض کردن محتوا */
.single-post.free-blog-images .entry-content,
.single-post.free-blog-images .entry-content p:has(img) {
    display: block !important; 
    
    /* جادوی عرض: تغییر از 900 پیکسل به 1250 پیکسل برای نصف شدن فاصله‌های کناری */
    max-width: 1250px !important; 
    
    margin: 0 auto !important;
    padding: 0 4vw !important; /* یه حاشیه امن کوچیک برای اینکه تو لپ‌تاپ نچسبه به لبه‌ها */
}
/* ۲. آزادسازیِ کامل عکس‌های بلاگ */
.single-post.free-blog-images .entry-content img {
    width: auto !important; /* عرض اورجینالِ عکس */
    height: auto !important; /* ارتفاع اورجینالِ عکس */
    max-width: 100% !important; /* نهایتاً تا لبه‌های مانیتور بزرگ بشه تا بیرون نزنه */
    aspect-ratio: auto !important; /* باطل کردنِ مربع‌های اجباری */
    object-fit: contain !important; /* نمایش کامل و بدون برشِ عکس */
    display: block !important;
    margin: 40px auto !important; /* فاصله شیک از بالا و پایینِ متن */
    border-radius: 8px !important; /* یه انحنای ملایم */
    box-shadow: none !important;
}