/* ======================================================================
   EMKAN v153 — final user-requested fixes
   Scope:
   1) global menu/context widths
   2) architecture & civil project/list cover sizing and spacing
   3) educational tree alignment on desktop/mobile
   4) unified grayscale -> color hover with soft zoom and no jitter
   ====================================================================== */

/* --------------------------------------------------
   1) GLOBAL WIDTH SYSTEM
   Blue line / top navigation width = site header.
   Red line / lower contextual strip width = context width.
   -------------------------------------------------- */
@media (min-width: 1280px) {
  :root {
    --emkan-v153-header-width: min(1296px, calc(100vw - 120px));
    
  }

  html body .page-shell > .site-header,
  html body .site-header {
    width: var(--emkan-v153-header-width) !important;
    max-width: var(--emkan-v153-header-width) !important;
    margin-left: calc((100% - var(--emkan-v153-header-width)) / 2) !important;
    margin-right: calc((100% - var(--emkan-v153-header-width)) / 2) !important;
    left: auto !important;
    transform: none !important;
  }

  
}

@media (min-width: 901px) and (max-width: 1279px) {
  :root {
    --emkan-v153-header-width: min(1080px, calc(100vw - 88px));
    
  }

  html body .page-shell > .site-header,
  html body .site-header {
    width: var(--emkan-v153-header-width) !important;
    max-width: var(--emkan-v153-header-width) !important;
    margin-left: calc((100% - var(--emkan-v153-header-width)) / 2) !important;
    margin-right: calc((100% - var(--emkan-v153-header-width)) / 2) !important;
    left: auto !important;
    transform: none !important;
  }

  
}

/* --------------------------------------------------
   2) ARCHITECTURE / CIVIL — cover size restored
   -------------------------------------------------- */
@media (min-width: 1181px) {
  html body .architecture-main .gallery-item,
  html body .civil-projects-main .gallery-item,
  html body .civil-projects-page .gallery-item {
    width: 100% !important;
    justify-self: stretch !important;
  }
}

@media (min-width: 901px) and (max-width: 1180px) {
  html body .architecture-main .gallery-item,
  html body .civil-projects-main .gallery-item,
  html body .civil-projects-page .gallery-item {
    width: 100% !important;
    justify-self: stretch !important;
  }
}

/* Project detail pages: more breathing room below the lower strip, with a
   slightly broader visual stage. */
@media (min-width: 901px) {
  html body .project-main {
    margin-top: 26px !important;
  }

  
}

/* --------------------------------------------------
   3) EDUCATIONAL TREE — precise alignment
   Covers both old and current course/resource structures.
   -------------------------------------------------- */
@media (min-width: 721px) {
  /* Modern .learning-tree structure */
  html[lang="fa"] body.content-section-page #contentApp .learning-side > .learning-tree,
  html[lang="ar"] body.content-section-page #contentApp .learning-side > .learning-tree,
  html[lang="fa"] body.emkan-v149-learning-resource #contentApp .learning-tree,
  html[lang="ar"] body.emkan-v149-learning-resource #contentApp .learning-tree {
    direction: rtl !important;
    padding: 0 22px 0 0 !important;
  }

  html[lang="fa"] body.content-section-page #contentApp .learning-side > .learning-tree::before,
  html[lang="ar"] body.content-section-page #contentApp .learning-side > .learning-tree::before,
  html[lang="fa"] body.emkan-v149-learning-resource #contentApp .learning-tree::before,
  html[lang="ar"] body.emkan-v149-learning-resource #contentApp .learning-tree::before {
    left: auto !important;
    right: 5px !important;
    inset-inline-start: auto !important;
    inset-inline-end: auto !important;
    width: 1px !important;
  }

  html[lang="fa"] body.content-section-page #contentApp .learning-side .learning-branch::before,
  html[lang="ar"] body.content-section-page #contentApp .learning-side .learning-branch::before,
  html[lang="fa"] body.emkan-v149-learning-resource #contentApp .learning-branch::before,
  html[lang="ar"] body.emkan-v149-learning-resource #contentApp .learning-branch::before {
    left: auto !important;
    right: -17px !important;
    inset-inline-start: auto !important;
    inset-inline-end: auto !important;
    width: 7px !important;
    height: 7px !important;
    box-sizing: border-box !important;
  }

  html[lang="en"] body.content-section-page #contentApp .learning-side > .learning-tree,
  html[lang="en"] body.emkan-v149-learning-resource #contentApp .learning-tree {
    direction: ltr !important;
    padding: 0 0 0 22px !important;
  }

  html[lang="en"] body.content-section-page #contentApp .learning-side > .learning-tree::before,
  html[lang="en"] body.emkan-v149-learning-resource #contentApp .learning-tree::before {
    right: auto !important;
    left: 5px !important;
    inset-inline-start: auto !important;
    inset-inline-end: auto !important;
    width: 1px !important;
  }

  html[lang="en"] body.content-section-page #contentApp .learning-side .learning-branch::before,
  html[lang="en"] body.emkan-v149-learning-resource #contentApp .learning-branch::before {
    right: auto !important;
    left: -17px !important;
    inset-inline-start: auto !important;
    inset-inline-end: auto !important;
    width: 7px !important;
    height: 7px !important;
    box-sizing: border-box !important;
  }

  /* v115 detached tree structure */
  html[lang="fa"] body.v115-course-detail #contentApp .v115-learning-tree,
  html[lang="ar"] body.v115-course-detail #contentApp .v115-learning-tree {
    direction: rtl !important;
    padding: 0 20px 0 0 !important;
  }

  html[lang="fa"] body.v115-course-detail #contentApp .v115-learning-tree::before,
  html[lang="ar"] body.v115-course-detail #contentApp .v115-learning-tree::before {
    left: auto !important;
    right: 5px !important;
    width: 1px !important;
  }

  html[lang="fa"] body.v115-course-detail #contentApp .v115-tree-branch::before,
  html[lang="ar"] body.v115-course-detail #contentApp .v115-tree-branch::before {
    left: auto !important;
    right: -15px !important;
    width: 7px !important;
    height: 7px !important;
    box-sizing: border-box !important;
  }

  html[lang="en"] body.v115-course-detail #contentApp .v115-learning-tree {
    direction: ltr !important;
    padding: 0 0 0 20px !important;
  }

  html[lang="en"] body.v115-course-detail #contentApp .v115-learning-tree::before {
    right: auto !important;
    left: 5px !important;
    width: 1px !important;
  }

  html[lang="en"] body.v115-course-detail #contentApp .v115-tree-branch::before {
    right: auto !important;
    left: -15px !important;
    width: 7px !important;
    height: 7px !important;
    box-sizing: border-box !important;
  }
}

/* Mobile / compact layouts: keep the tree clean and stable. */
@media (max-width: 720px) {
  html body.content-section-page #contentApp .v69-content-search-rail > .learning-side .learning-tree,
  html body.v115-course-detail #contentApp .v115-learning-tree {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0 14px !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  html body.content-section-page #contentApp .v69-content-search-rail > .learning-side .learning-tree::before,
  html body.v115-course-detail #contentApp .v115-learning-tree::before,
  html body.content-section-page #contentApp .v69-content-search-rail > .learning-side .learning-branch::before,
  html body.v115-course-detail #contentApp .v115-tree-branch::before {
    display: none !important;
    content: none !important;
  }

  html body.content-section-page #contentApp .v69-content-search-rail > .learning-side .learning-branch,
  html body.v115-course-detail #contentApp .v115-tree-branch {
    min-width: 0 !important;
    min-height: 34px !important;
    padding: 7px 0 !important;
    border-bottom: 1px solid var(--line) !important;
    transform: none !important;
  }
}

/* --------------------------------------------------
   4) UNIFIED IMAGE HOVER — grayscale to color + soft zoom, no shake
   -------------------------------------------------- */
html body .img-wrapper,
html body .category-square,
html body .category-media,
html body .person-card-media,
html body .team-portrait,
html body .vthumb-media,
html body .project-viewer,
html body .people-photo,
html body .article-cover,
html body .store-card-media {
  overflow: hidden !important;
  transform: translateZ(0);
  backface-visibility: hidden;
}

html body .project-card,
html body .category-card,
html body .person-card,
html body .team-preview,
html body .vthumb,
html body .article-row,
html body .store-product-card,
html body .people-card {
  transform: translateZ(0);
  backface-visibility: hidden;
}

html body .category-card:hover,
html body .category-card:focus-visible,
html body .project-card:hover,
html body .project-card:focus-visible,
html body .vthumb:hover,
html body .vthumb:focus-visible,
html body .person-card:hover,
html body .person-card:focus-within,
html body .team-preview:hover,
html body .team-preview:focus-within {
  transform: none !important;
}

html body .category-media img,
html body .img-wrapper img,
html body .person-card-media img,
html body .team-portrait img,
html body .vthumb-media img,
html body .vthumb-media video,
html body .project-viewer img,
html body .people-photo img,
html body .article-cover img,
html body .store-card-media img {
  will-change: transform, filter, opacity;
  transform-origin: center center;
}

@media (hover: hover) and (pointer: fine) {
  html body .category-card:hover .category-media img,
  html body .category-card:focus-visible .category-media img,
  html body .project-card:hover .img-wrapper img,
  html body .project-card:focus-visible .img-wrapper img,
  html body .person-card:hover .person-card-media img,
  html body .person-card:focus-within .person-card-media img,
  html body .team-preview:hover .team-portrait img,
  html body .team-preview:focus-within .team-portrait img,
  html body .vthumb:hover .vthumb-media img,
  html body .vthumb:hover .vthumb-media video,
  html body .vthumb.is-selected .vthumb-media img,
  html body .vthumb.is-selected .vthumb-media video {
    filter: grayscale(0%) !important;
    opacity: 1 !important;
    transform: scale(1.03) translateZ(0) !important;
  }

  html body .category-media img,
  html body .img-wrapper img,
  html body .person-card-media img,
  html body .team-portrait img,
  html body .vthumb-media img,
  html body .vthumb-media video,
  html body .project-viewer img,
  html body .people-photo img,
  html body .article-cover img,
  html body .store-card-media img {
    transition: filter .62s ease, opacity .34s ease, transform .72s cubic-bezier(.22,.61,.36,1) !important;
  }
}