/* =================================================================== */
/* LAYOUT.CSS - نسخه نهایی با اسکرول‌های اصلاح شده                     */
/* =================================================================== */

/* 1. ساختار گرید اصلی */
.grid {
  display: grid;
  height: 100%;
}

.grid1 {
  grid-area: grid1;
}

.middle-column {
  grid-area: middle;
}

.grid4 {
  grid-area: grid4;
}

/* .wrapper-top-mobile-link {
  height: 10px;
  background-color: var(--color-white-aqua);
  display: none;
} */


/* =========================================================== */
/* === چیدمان‌های واکنش‌گرا (Responsive Layouts) === */
/* =========================================================== */

/* === چیدمان موبایل (< 576px) === */
@media (max-width: 575.98px) {

  /* 1. استایل دیو خالی (Spacer) */
  /* ارتفاع 100px = 60px (منو) + 40px (فاصله خالی) */
  .mobile-menu-spacer {
    display: block;
    width: 100%;
    height: 5px;
    flex-shrink: 0;
  }

  /* 2. تنظیمات کلی صفحه */
  .grid {
    display: block;
    height: auto;
  }

  /* حذف پدینگ بادی چون از دیو اسپیسر استفاده می‌کنیم */
  body.tomb-personal-page {
    padding-bottom: 0;
  }

  .middle-column,
  .grid4 {
    width: 100%;
    margin-bottom: 20px;
  }

  .middle-column {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .grid3 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }

  /* 3. منوی افقی پایین صفحه (Grid1) */
  .grid1 {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 60px; 
    z-index: 1000;
    background-color: var(--color-white-soft);
    margin-bottom: 0;
    padding-bottom: 0;
    box-shadow: none;
  }

  /* کانتینر آیتم‌ها */
  .nav.flex-column {
    flex-direction: row !important;
    width: 100%;
    height: 100%;
    justify-content: space-around;
    align-items: stretch;
    margin: 0;
    padding: 0;
  }

  /* 4. استایل هر آیتم (دکمه) */
  .nav.flex-column .nav-item {
    flex: 1 1 0;
    background-color: transparent;
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    
    /* بوردر بالا در حالت پیش‌فرض (سفید گرم) */
    border-top: 3px solid var(--color-white-warm);
    
    transition: all 0.3s ease;
    cursor: pointer;
  }

  /* --- تنظیمات رنگ بوردر بالا --- */
  
  /* حالت Active: رنگی */
  .nav.flex-column .nav-item:has(> .nav-link.active) {
    border-top-color: var(--color-primary-hover);
    background-color: var(--color-white-aqua);
  }

  /* حالت Hover: رنگی */
  .nav.flex-column .nav-item:hover {
    border-top-color: var(--color-primary-hover);
    background-color: var(--color-white-soft);
  }

  /* 5. ساختار لینک و آیکون (چینش عمودی) */
  .nav.flex-column .nav-link {
    display: flex !important;
    flex-direction: column !important; /* آیکون بالا، متن پایین */
    align-items: center !important;
    justify-content: center !important;
    width: 100%;
    height: 100%;
    padding: 0 !important;
    text-align: center;
    font-size: 0.65rem !important;
    color: var(--color-gray-dark);
    transition: color 0.3s ease;
  }

  /* تنظیم فاصله آیکون */
  .nav.flex-column .nav-link .custom-tomb-icon {
    display: block;
    margin: 0 0 4px 0 !important;
    font-size: 1.3rem;
    padding: 0 !important;
    transition: color 0.3s ease;
  }

  /* --- 6. منطق تعویض آیکون (توپر/توخالی) --- */
  
  /* پیش‌فرض */
  .nav.flex-column .nav-link .icon-normal { display: block !important; }
  .nav.flex-column .nav-link .icon-active { display: none !important; }

  /* مخفی کردن آیکون نرمال در حالت Active/Hover */
  .nav.flex-column .nav-item:has(> .nav-link.active) .icon-normal,
  .nav.flex-column .nav-item:hover .icon-normal {
    display: none !important;
  }

  /* نمایش آیکون توپر در حالت Active/Hover */
  .nav.flex-column .nav-item:has(> .nav-link.active) .icon-active,
  .nav.flex-column .nav-item:hover .icon-active {
    display: block !important;
  }

  /* --- 7. اعمال رنگ متن و آیکون (Active & Hover) --- */
  .nav.flex-column .nav-link.active,
  .nav.flex-column .nav-item:hover .nav-link,
  .nav.flex-column .nav-item:hover .custom-tomb-icon {
    color: var(--color-primary-hover) !important;
  }
}

/* === چیدمان تبلت کوچک (576px - 767.98px) === */
@media (min-width: 576px) and (max-width: 767.98px) {
  .grid {
    grid-template-columns: 3fr 9fr;
    grid-template-rows: 1fr;
    height: calc(100vh - 130px);
    overflow: hidden;
  }

  .grid1,
  .middle-column,
  .grid4,
  .left-column-wrapper {
    grid-area: unset !important;
    margin: 0;
  }

  .grid1 {
    grid-column: 1 / 2;
    height: 100%;
    overflow-y: auto;
  }

  .left-column-wrapper {
    grid-column: 2 / 3;
    overflow-y: auto;
    height: 100%;
    padding: 0 10px;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .left-column-wrapper::-webkit-scrollbar {
    display: none;
  }

  .middle-column {
    display: flex;
    flex-direction: column;
    padding-top: 20px;
  }

  .grid3-gallery {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-items: start;
    align-items: start;
    gap: 20px;
  }
}

/* === چیدمان اصلی دسکتاپ (>= 768px) === */
@media (min-width: 768px) {
  .left-column-wrapper {
    display: contents;
  }

  .grid {
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 1fr;
    overflow: hidden;
    grid-template-areas: "grid1 grid1 middle middle middle middle middle middle grid4 grid4 grid4 grid4";
  }

  .grid1,
  .grid4 {
    margin-top: 40px;
  }

  /* 1. تنظیمات گرید ۱ (لینک‌ها) */
  .grid1 {
    overflow-y: auto;
    /* محتوای داخلی در صورت نیاز اسکرول می‌خورد */
    padding-bottom: 40px;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .grid1::-webkit-scrollbar {
    display: none;
  }

  /* 2. تنظیمات اسکرول یکپارچه گرید ۲ و ۳ */
  .middle-column {
    display: flex;
    flex-direction: column;
    padding: 40px 0 10px 0;
    overflow: hidden;
    /* والد اسکرول نمی‌خورد */
  }

  .middle-column-content {
    overflow-y: auto;
    /* فرزند اسکرول می‌خورد */
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .middle-column-content::-webkit-scrollbar {
    display: none;
  }

  /* 3. تنظیمات اسکرول گرید ۴ با دکمه ثابت */
  .grid4 {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* والد اسکرول نمی‌خورد */
  }

  .grid4 .custom-btn-condolence-message {
    flex-shrink: 0;
    /* دکمه ثابت می‌ماند */
  }

  .grid4 .condolence-scroll-container {
    flex-grow: 1;
    overflow-y: auto;
    /* لیست پیام‌ها اسکرول می‌خورد */
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .grid4 .condolence-scroll-container::-webkit-scrollbar {
    display: none;
  }

  .grid3 {
    display: flex !important;
    justify-content: start;
    gap: 25px;
  }
}

/* تنظیمات تکمیلی برای صفحات بزرگتر */
@media (min-width: 1200px) {
  .grid {
    grid-template-areas: "grid1 grid1 middle middle middle middle middle middle middle grid4 grid4 grid4";
  }

  .middle-column-content {
    gap: 50px;
  }



  .grid3 {
    gap: 50px;
  }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  .middle-column-content {
    gap: 25px;
  }
}

/* مارجین‌های واکنش‌گرا برای محتوای میانی */


@media (min-width: 1200px) and (max-width: 1399.98px) {

  .middle-column-content>.grid3,
  .nav.flex-column .nav-item {
    margin-left: 40px;
  }
}

@media (min-width: 1400px) {

  .middle-column-content>.grid3,
  .nav.flex-column .nav-item {
    margin-left: 50px;
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .grid3 {
    gap: 10px;
  }
}

/* --- کارت‌های افقی مزار: همان سایز و نسبت کارت‌های index --- */
/* یک ستون؛ با زیاد شدن کارت‌ها در زیر هم اضافه می‌شوند، ریسپانسیو */
.mazar-page .grid3 {
  display: grid !important;
  grid-template-columns: 1fr;
  grid-auto-rows: auto;
  gap: var(--grid-gap, 20px);
  width: 100%;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* موبایل: فاصله بیشتر بین توضیحات زیر عکس و کارت‌ها، و بین آخرین کارت و کادر پلیر */
@media (max-width: 767.98px) {
  .mazar-page .middle-column-content > .grid3 {
    margin-top: 28px;
    margin-bottom: 28px;
  }
  .mazar-page .grid4 {
    margin-top: 24px;
  }
}

/* تبلت و بالاتر: عرض ۵۰٪، وسط‌چین */
@media (min-width: 768px) {
  .mazar-page .grid3 {
    width: 50%;
    max-width: 50%;
  }
  .mazar-page .middle-column-content > .grid3 {
    margin-left: auto;
    margin-right: auto;
  }
}

@media (min-width: 768px) and (max-width: 1199.98px) {
  .mazar-page .middle-column-content > .grid3 {
    margin-left: auto;
    margin-right: auto;
  }
}

@media (min-width: 1200px) {
  .mazar-page .middle-column-content > .grid3 {
    margin-left: auto;
    margin-right: auto;
  }
}

.mazar-page .grid3 .card-horizontal {
  /* ارتفاع ۳۰٪ کمتر: نسبت قبلی 2/1 → الان 2 / 0.7 ≈ 20/7 */
  aspect-ratio: 20 / 7;
  min-height: 0;
  overflow: hidden;
}

/* لینک کارت هم‌مزار به biography.html — بدون تغییر چیدمان داخلی کارت */
.mazar-page .card-mazar-link {
  text-decoration: none;
  color: inherit;
  /* display را عوض نمی‌کنیم تا display: flex کارت از cards.css حفظ شود */
}

/* دیزاین داخل کادرهای هم‌مزار (مطابق تصویر: متن راست، مربع تصویر، سه خط متن) */
.mazar-page .card-horizontal-mazar {
  direction: rtl;
  padding: 12px 14px;
  gap: 14px;
  align-items: stretch;
}

.mazar-page .card-mazar-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  text-align: right;
  padding: 0;
  gap: 3px; /* ۳۰٪ بیشتر از ۲px */
}

.mazar-page .card-mazar-name {
  font-size: 1rem;
  font-weight: bold;
  color: var(--color-black-soft, #333);
  display: block;
  width: 100%;
}

.mazar-page .card-mazar-relation,
.mazar-page .card-mazar-secondary {
  font-size: 0.85rem;
  color: var(--color-gray-dark, #666);
  display: block;
  width: 100%;
}

.mazar-page .card-mazar-img-wrap {
  flex-shrink: 0;
  width: auto;
  aspect-ratio: 1 / 1;
  height: 100%;
  min-height: 0;
  background-color: #f0f0f0; /* خاکستری سفید */
  border: none;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mazar-page .card-mazar-img-wrap .card-img-placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* ===================================================================
   WebForms Details.aspx — اسکرول مستقل ستون وسط و پیام‌های تسلیت
   =================================================================== */

@media (min-width: 768px) {
  body.tomb-personal-page main.tomb-detail-page {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding-bottom: 0;
  }

  body.tomb-personal-page .tomb-detail-page > .container-xxl.h-100 {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  .tomb-detail-page,
  .tomb-detail-page > .container-xxl.h-100,
  .tomb-detail-grid,
  .middle-column,
  .middle-column-content,
  .tomb-condolence-aside,
  .grid4,
  .grid4 .condolence-scroll-container {
    min-height: 0;
  }

  .tomb-detail-grid {
    flex: 1 1 auto;
    height: 100%;
    max-height: calc(100vh - var(--sticky-top-offset, 130px));
  }

  .middle-column-content,
  .grid4 .condolence-scroll-container {
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .grid4 .grid4-buttons-wrapper {
    flex-shrink: 0;
  }

  .grid4 .condolence-scroll-container {
    flex: 1 1 auto;
  }
}