/* =========================================================
   BEHAB BRANCHES — اکاردئون دفاتر منطقه‌ای
   Figma: Pouya PZH Workplace / node 513:2727
   ---------------------------------------------------------
   ساختار کلاس‌ها (BEM-like)، همه با پیشوند behab:

   .behab-branches                      ← کانتینر والد
     .behab-branch  (×3)                ← هر کارت  (کارت فعال: .is-active)
       .behab-face.behab-face--closed   ← حالت بسته
         .behab-bgtext                  ← متن انگلیسی عمودی
         .behab-thumb                   ← عکس بنا (حالت بسته)
         .behab-label                   ← عنوان فارسی عمودی
       .behab-face.behab-face--open     ← حالت باز
         .behab-bgtext                  ← متن انگلیسی عمودی
         .behab-photo                   ← عکس بنا (حالت باز)
         .behab-info                    ← بلوک اطلاعات
           .behab-info__title           ← عنوان
           .behab-info__card            ← کارت گرادینتی
             .behab-list                ← Icon List (آدرس، تلفن، ...)
             .behab-actions             ← ردیف پایین
               .behab-btn               ← دکمه مسیریابی
               .behab-socials           ← آیکون‌های شبکه اجتماعی
   ========================================================= */

/* ---------- توکن‌ها ---------- */
.behab-branches {
  --behab-primary-000: #0c4787;
  --behab-primary-500: #0a63c4;
  --behab-primary-600: #9eb5cf;
  --behab-primary-900: #e6ecf3;
  --behab-gray-200: #f5f5f5;
  --behab-bgtext: #99a8cb;

  --behab-font-fa: "Yekan Bakh FaNum", "Yekan Bakh", Tahoma, sans-serif;
  --behab-font-en: "Poppins", sans-serif;

  /* نسبت عرض‌ها (بدون واحد → flex-grow) */
  --behab-w-closed: 272;
  --behab-w-open: 824;
  --behab-h: 464px;
  --behab-gap: 32px;
  --behab-radius: 20px;

  --behab-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --behab-dur: 0.85s;

  /* ارتفاع‌ها در حالت عمودی (تبلت/موبایل) */
  --behab-h-closed: 96px;
  --behab-h-open: 520px;
}

/* ---------- والد ---------- */
.behab-branches {
  direction: rtl;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: var(--behab-gap);
  width: 100%;
  max-width: 1432px; /* 272 + 272 + 824 + 2×32 */
  margin-inline: auto;
  padding: 0;
}

/* ---------- کارت ---------- */
.behab-branches .behab-branch {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  flex: var(--behab-w-closed) 1 0% !important;
  min-width: 0 !important;
  height: var(--behab-h) !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
  --widgets-spacing: 0px !important;
  border-radius: var(--behab-radius) !important;
  background: linear-gradient(196.19deg, var(--behab-primary-900) 7.27%, var(--behab-primary-600) 123.55%) !important;
  cursor: pointer !important;
  -webkit-tap-highlight-color: transparent !important;
  transition:
    flex-grow var(--behab-dur) var(--behab-ease),
    box-shadow 0.6s var(--behab-ease) !important;
}
.behab-branches .behab-branch.is-active {
  flex-grow: var(--behab-w-open) !important;
  box-shadow: 0 0 30px rgba(1, 37, 125, 0.4) !important;
  cursor: default !important;
}
.behab-branches .behab-branch:focus-visible {
  outline: 2px solid var(--behab-primary-500);
  outline-offset: 3px;
}

/* ریست مارجین ویجت‌های المنتور داخل کارت */
.behab-branches .behab-branch .elementor-widget {
  margin-block-end: 0 !important;
}

/* ---------- face‌ها (دو لایه‌ی روی هم) ---------- */
.behab-branches .behab-face {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
  --widgets-spacing: 0px !important;
}

/* بسته: سریع محو می‌شود */
.behab-branches .behab-face--closed {
  opacity: 1 !important;
  transition: opacity 0.35s ease !important;
}
.behab-branches .behab-branch.is-active .behab-face--closed {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* باز: با کمی تأخیر ظاهر می‌شود */
.behab-branches .behab-face--open {
  opacity: 0 !important;
  pointer-events: none !important;
  background: linear-gradient(241.95deg, var(--behab-primary-000) 51.61%, var(--behab-primary-500) 107.22%) !important;
  transition: opacity 0.35s ease !important;
}
.behab-branches .behab-branch.is-active .behab-face--open {
  opacity: 1 !important;
  pointer-events: auto !important;
  transition: opacity 0.6s ease 0.15s !important;
}

/* ---------- متن انگلیسی عمودی ---------- */
.behab-branches .behab-bgtext {
  position: absolute;
  top: 50%;
  left: 38px;
  width: auto;
  max-width: none;
  transform: translateY(-50%);
  writing-mode: vertical-rl; /* 90° ساعت‌گرد */
  direction: ltr;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  font-family: var(--behab-font-en);
  font-weight: 200;
  font-size: 32px;
  line-height: 48px;
  letter-spacing: 4.48px;
  color: var(--behab-bgtext);
  opacity: 0.1;
}
.behab-branches .behab-face--open .behab-bgtext {
  left: auto;
  right: 6px;
  color: #fff;
  opacity: 0.2;
}
.behab-branches .behab-bgtext * {
  margin: 0;
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
}

/* ---------- حالت بسته: عکس + عنوان ---------- */
.behab-branches .behab-thumb {
  position: absolute;
  top: 50%;
  left: var(--behab-thumb-x, 104px);
  width: var(--behab-thumb-w, 340px);
  height: var(--behab-thumb-h, 410px);
  max-width: none;
  margin: 0;
  transform: translateY(-50%);
  mix-blend-mode: luminosity;
  pointer-events: none;
}
.behab-branches .behab-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left center;
}

.behab-branches .behab-label {
  position: absolute;
  top: 50%;
  left: 34px;
  width: auto;
  max-width: none;
  transform: translateY(-50%) rotate(180deg); /* خواندن از پایین به بالا */
  writing-mode: vertical-rl;
  padding: 0 8px;
  border-left: 1px solid rgba(12, 71, 135, 0.35);
  border-right: 1px solid rgba(12, 71, 135, 0.35);
  white-space: nowrap;
  pointer-events: none;
}
.behab-branches .behab-label * {
  margin: 0;
  font-family: var(--behab-font-fa);
  font-weight: 600;
  font-size: 18px;
  line-height: 36px;
  color: var(--behab-primary-000);
}

/* ---------- حالت باز: عکس ---------- */
.behab-branches .behab-photo {
  position: absolute;
  top: 50%;
  right: 24px;
  width: clamp(220px, 36%, 300px);
  height: min(78%, 360px);
  max-width: none;
  margin: 0;
  pointer-events: none;
  opacity: 0;
  transform: translate(-30px, -50%);
  transition:
    opacity 0.6s ease 0.25s,
    transform 0.7s var(--behab-ease) 0.25s;
}
.behab-branches .behab-branch.is-active .behab-photo {
  opacity: 1;
  transform: translate(0, -50%);
}
.behab-branches .behab-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

/* ---------- حالت باز: اطلاعات ---------- */
.behab-branches .behab-info {
  position: absolute !important;
  top: 50% !important;
  left: 32px !important;
  width: min(440px, 56%) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 24px !important;
  margin: 0 !important;
  padding: 0 !important;
  --widgets-spacing: 0px !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translate(28px, -50%) !important;
  transition:
    opacity 0.3s ease,
    transform 0.35s var(--behab-ease),
    visibility 0s linear 0.3s;
}
.behab-branches .behab-branch.is-active .behab-info {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translate(0, -50%) !important;
  transition:
    opacity 0.7s ease 0.45s,
    transform 0.7s var(--behab-ease) 0.45s,
    visibility 0s linear 0s;
}

.behab-branches .behab-info__title {
  padding-right: 12px !important;
  border-right: 1px solid rgba(255, 255, 255, 0.35);
  text-align: right;
}
.behab-branches .behab-info__title * {
  margin: 0 !important;
  font-family: var(--behab-font-fa) !important;
  font-weight: 600 !important;
  font-size: 20px !important;
  line-height: 36px !important;
  color: #fff !important;
}

.behab-branches .behab-info__card {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 16px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 32px 24px !important;
  --widgets-spacing: 0px !important;
  border-radius: 15px !important;
  background: linear-gradient(239.16deg, var(--behab-primary-000) 12.05%, var(--behab-primary-500) 139.68%);
}

/* ---------- لیست اطلاعات (Icon List) ---------- */
.behab-branches .behab-list .elementor-icon-list-items {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
.behab-branches .behab-list .elementor-icon-list-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
}
.behab-branches .behab-list .elementor-icon-list-item > a {
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
  width: 100% !important;
}
.behab-branches .behab-list .elementor-icon-list-icon {
  flex: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 30px !important;
  background: rgba(230, 236, 243, 0.2) !important;
}
.behab-branches .behab-list .elementor-icon-list-icon svg,
.behab-branches .behab-list .elementor-icon-list-icon i {
  width: 22px !important;
  height: 22px !important;
  font-size: 22px !important;
}
.behab-branches .behab-list .elementor-icon-list-item .elementor-icon-list-text {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  padding: 0 !important;
  font-family: var(--behab-font-fa) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  line-height: 24px !important;
  color: var(--behab-gray-200);
  text-align: justify;
}

/* ---------- ردیف پایین: دکمه + شبکه‌های اجتماعی ---------- */
.behab-branches .behab-actions {
  direction: rtl !important; /* دکمه چپ، آیکون‌ها راست — مثل فیگما */
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 24px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  --widgets-spacing: 0px !important;
}
.behab-branches .behab-btn {
  flex: none !important;
  width: auto !important;
}
.behab-branches .behab-btn .elementor-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 8px 12px;
  border: 1px solid #fff;
  border-radius: 20px;
  background: transparent;
  font-family: var(--behab-font-fa);
  font-weight: 600;
  font-size: 12px;
  line-height: 20px;
  color: #fff;
}
.behab-branches .behab-btn .elementor-button-content-wrapper {
  gap: 8px;
}
.behab-branches .behab-socials {
  flex: 1 1 0;
  min-width: 0;
}
.behab-branches .behab-socials .elementor-social-icons-wrapper {
  display: flex;
  justify-content: space-between;
  gap: 0;
}
.behab-branches .behab-socials .elementor-social-icon {
  width: 32px;
  height: 32px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  background: transparent;
}

/* =========================================================
   تبلت و موبایل: اکاردئون عمودی (≤ 1100px)
   ---------------------------------------------------------
   چرا قبلاً کار نمی‌کرد؟ بخش دسکتاپ پر از !important است
   (flex, height, position, ...) و بلاک قبلی موبایل بدون !important
   بود، پس هیچ‌کدام از override ها اعمال نمی‌شد.
   همین‌طور ارتفاع تصویرها از خود ویجت المنتور (330px) می‌آید و
   باید با !important خنثی شود.

   روش کار: کارت = grid تک‌ردیفه.
   - بسته: ردیف 0fr  → ارتفاع = --behab-h-closed
   - باز:  ردیف 1fr  → ارتفاع = اندازه‌ی محتوای باز (خودکار)
   ساختار کلاس‌ها و دسکتاپ هیچ تغییری نکرده است.
   ========================================================= */
@media (max-width: 1100px) {
  /* ---------- والد: زیر هم ---------- */
  .behab-branches,
  .behab-branches > .e-con-inner {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 16px;
    width: 100%;
    max-width: none;
  }

  /* ---------- کارت ---------- */
  .behab-branches .behab-branch {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 0fr;
    flex: none !important;
    width: 100% !important;
    height: auto !important;
    min-height: var(--behab-h-closed) !important;
    border-radius: 16px !important;
    scroll-margin-top: 90px;
    transition:
      grid-template-rows var(--behab-dur) var(--behab-ease),
      box-shadow 0.6s var(--behab-ease) !important;
  }
  .behab-branches .behab-branch.is-active {
    flex: none !important;
    grid-template-rows: 1fr;
    box-shadow: 0 8px 24px rgba(1, 37, 125, 0.25) !important;
  }

  .behab-branches .behab-bgtext {
    display: none !important;
  }

  /* ---------- حالت بسته: همان لایه‌ی absolute (ارتفاع کارت = هدر) ---------- */
  .behab-branches .behab-label {
    top: 0;
    bottom: 0;
    right: 20px;
    left: auto;
    display: flex;
    align-items: center;
    transform: none;
    writing-mode: horizontal-tb;
    padding: 0;
    border: 0;
  }
  .behab-branches .behab-label * {
    font-size: 16px;
  }
  .behab-branches .behab-thumb {
    top: 0;
    left: 0;
    width: 42%;
    height: 100%;
    transform: none;
  }
  .behab-branches .behab-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center top !important;
  }

  /* ---------- حالت باز: داخل جریان صفحه (ردیف grid) ---------- */
  .behab-branches .behab-face--open {
    position: relative !important;
    inset: auto !important;
    grid-row: 1;
    grid-column: 1;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .behab-branches .behab-photo {
    top: 16px;
    left: 16px;
    right: auto;
    width: auto;
    height: 90px;
    transform: translateY(-12px);
  }
  .behab-branches .behab-branch.is-active .behab-photo {
    transform: none;
  }
  .behab-branches .behab-photo img {
    width: auto !important;
    height: 90px !important;
    object-fit: contain !important;
    object-position: left center !important;
  }

  .behab-branches .behab-info {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    padding: 16px !important;
    gap: 12px !important;
    justify-content: flex-start !important;
    transform: translateY(12px) !important;
    transition:
      opacity 0.3s ease,
      transform 0.35s var(--behab-ease),
      visibility 0s linear 0.3s;
  }
  .behab-branches .behab-branch.is-active .behab-info {
    transform: none !important;
    transition:
      opacity 0.6s ease 0.3s,
      transform 0.6s var(--behab-ease) 0.3s,
      visibility 0s linear 0s;
  }

  .behab-branches .behab-info__title {
    display: flex;
    align-items: center;
    min-height: 90px; /* جا برای عکس سمت چپ */
  }
  .behab-branches .behab-info__title * {
    font-size: 16px !important;
  }
  .behab-branches .behab-info__card {
    padding: 20px 16px !important;
    gap: 14px !important;
  }
  .behab-branches .behab-list .elementor-icon-list-item .elementor-icon-list-text {
    font-size: 13px !important;
  }

  /* ردیف پایین: دکمه تمام‌عرض در سطر اول، آیکون‌ها در سطر دوم */
  .behab-branches .behab-actions {
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    gap: 12px !important;
  }
  .behab-branches .behab-btn {
    order: -1;
    flex: 1 1 100% !important;
    width: 100% !important;
  }
  .behab-branches .behab-btn .elementor-button {
    width: 100%;
    justify-content: center;
  }
  .behab-branches .behab-socials {
    flex: 1 1 0;
    min-width: 32px;
  }
  .behab-branches .behab-socials .elementor-icon-wrapper {
    text-align: center;
  }
}

@media (max-width: 767px) {
  .behab-branches {
    --behab-h-closed: 84px;
  }
  .behab-branches .behab-info {
    padding: 14px !important;
  }
  .behab-branches .behab-info__card {
    padding: 18px 14px !important;
  }
}

/* ---------- کاهش حرکت ---------- */
@media (prefers-reduced-motion: reduce) {
  .behab-branches .behab-branch,
  .behab-branches .behab-face,
  .behab-branches .behab-photo,
  .behab-branches .behab-info {
    transition-duration: 0.01s !important;
    transition-delay: 0s !important;
  }
}