/* =============================================================================
   ITEM-ELEMENT — ШИНЭ СТАНДАРТ  (.item-image)
   -----------------------------------------------------------------------------
   Яагаад тусдаа файл вэ:
   extra-гийн `style.css` нь item-ийн зургийн хайрцгийг `<figure>` ТАГААР нь
   бариад байсан. Гэтэл `<figure>` бол HTML стандартаар «бие даасан, тайлбартай,
   үндсэн урсгалаас салгаж зөөж болох» контентод зориулагдсан — картын зураг тэр
   гурван шалгуурын аль нэгийг ч хангадаггүй (item-үүдийн 25/28 нь `alt=""`).

   Тиймээс тагийн оронд КЛАСС барина. Хоёр үүргийг САЛГАВ:
     `.item-media`  = item доторх ҮҮР (ихэвчлэн <a>)
     `.item-image`  = зургийн ХАЙРЦАГ (өмнө нь <figure>)

   Энэ файл нь `style.css`-ийн ITEM ELEMENT хэсгийн (мөр 823-1295) БҮТЭН хуулбар —
   зөвхөн дээрх нэршил ба image-swap-ийн өөрчлөлттэй. Эх хувилбар `style.css`-д
   ХЭВЭЭР үлдэнэ, бусад төсөл түүгээр ажилласаар байна.

   Энэ файлыг ЗӨВХӨН шилжсэн төсөл ачаална (одоогоор 1990).
   Ачаалах дараалал: bootstrap → extra/style.css → ЭНЭ ФАЙЛ → төслийн brand/style
   (2026-09-13)
   ============================================================================= */

/* =============================================
   ITEM ELEMENT
   Ерөнхий → Var 1..4 → Тохиргоо → Hover
   (тохиргоо/hover нь var-ыг дарж чаддаг байхаар сүүлд нь)
   ============================================= */

/* ---------- ЕРӨНХИЙ ---------- */

/* Transition — item-ийн хэсгүүд нь суурь стайлтай ижил GLOBAL (item-element-ээс
   гадна бие даан ч хэрэглэгддэг: timeline-v6-ийн оны rail дахь .item-badge г.м).
   Зөвхөн ерөнхий tag (video/img) л .item-element-ээр scope-лоно. */
.item-element,
.item-element video,
.item-element img,
.item-media,
.item-overlay,
.item-bg-overlay,
.item-details,
.item-title,
.item-title a,
.item-title span,
.item-title a span,
.item-info,
.item-desc,
.item-meta,
.item-category,
.item-category a,
.item-date,
.item-badge,
.item-price,
.item-price-old,
.item-spec,
.item-action,
.item-action a {
  /* БҮХ шинж чанар .4s — өнгө ч оруулаад (2026-08-25). Өмнө нь `color/background-color/
     border-color` -ыг `0s`-ээр дарж, тема (dark/light) солиход item хоцрохоос сэргийлдэг
     байсныг хэрэглэгчийн шийдвэрээр ХАСАВ — hover «хатуу» харагдуулж байсан. */
  transition: all .4s ease-in-out;
}

/* Суурь flex — зөвхөн var-тай item (timeline/gallery/clients тусгай, markup-даа). */
.item-element {
  display: flex;
  flex-direction: column;
  position: relative;
  gap: .75rem;
}
.item-element .item-image {
  position: relative;
  overflow: hidden;
}

.item-details {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  width: 100%;
}

.item-meta,
.item-spec {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
}
.item-meta .item-category a,
.item-spec .item-category a {
  font-weight: 700;
  color: var(--bs-primary);
  text-decoration: none;
}
.item-meta .item-date {
  color: var(--bs-body-color);
  font-weight: 500;
}
.item-meta>span {
  color: var(--bs-body-color);
}

.item-title {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
}
.item-title:not(.item-title:has(a)) {
  color: var(--bs-body-color);
}
.item-title:has(a) > a {
  color: var(--bs-body-color);
  text-decoration: none;
}

.item-badge {
  background: white;
  color: var(--bs-dark);
  width: fit-content;
  border-radius: var(--bs-border-radius);   /* `.badge`-гүйгээр бие даан хэрэглэгдэх үед (timeline-ийн rail г.м) */
}

/* item-badge-ийн ТӨРЛҮҮД. Нэр нь CMS-ийн талбартай уялдана:
   sale = `discount_percent` · new = `is_new` · featured = `is_featured` ·
   out = `is_available`. Суурь `.item-badge` (цагаан pill) нь ТӨРӨЛГҮЙ анхдагч хэвээр.

   ⭐ ӨНГӨНИЙ ДҮРЭМ (хэрэглэгч 2026-09-13):
     · хямдрал  → СИСТЕМИЙН цэнхэр (`--bs-blue`) — брэндээс ХАРААТ БУС тул
       брэнд ямар ч өнгөтэй байсан хямдрал дандаа ижил уншигдана
     · онцлох   → success
     · дууссан  → саарал дэвсгэр + бараан текст (идэвхгүй гэдгийг илэрхийлнэ)
   Контраст (цагаан текст): цэнхэр дээр 4.50:1 · success дээр 4.53:1 — AA ✓ */
.item-badge-sale {
  background: var(--bs-blue);
  color: var(--bs-white);
}
.item-badge-new {
  background: var(--bs-primary);
  color: var(--bs-white);
}
.item-badge-featured {
  background: var(--bs-success);
  color: var(--bs-white);
}
/* Дэвсгэр ба текст хоёулаа ТОКЕН тул бараан темэд өөрөө хөрвөнө
   (цайвар: саарал+бараан · бараан: бараавтар саарал+цайвар). */
.item-badge-out {
  background: var(--bs-secondary-bg);
  color: var(--bs-body-color);
}

.item-desc {
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--bs-secondary-color);
  margin: 0;
}

.item-info {
  font-weight: 500;
  color: var(--bs-secondary-color);
}

.item-price .h4 {
  font-weight: 700;
  color: var(--bs-body-color) !important;
}
.item-price .product-price-old {
  text-decoration: line-through;
  color: var(--bs-secondary-color);
}

.item-action {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.item-action > .btn.btn-link {
  width: fit-content;
  padding: 0px !important;
  font-size: 0.875rem !important;
  text-decoration: none;
  font-weight: 700;
  color: var(--bs-body-color);
  transition: all .4s ease-in-out;
}
.item-action > .btn:not(.btn-link) {
  width: fit-content;
}

@media (min-width: 768px) {
  .item-element:not(.item-var-2) {
    gap: 1rem;
  }
  .item-details {
    gap: .75rem;
  }
}

@media (min-width: 1200px) {
  .item-title {
    font-size: 1.25rem;
  }
  .item-desc {
    font-size: 1rem;
  }
  .item-price .h4 {
    font-size: 1.25rem;
  }
}

/* ---------- VAR 1 — энгийн (нэмэлт CSS шаардлагагүй) ---------- */

.item-var-1.post-item .item-details,
.item-var-1.card-item .item-details,
.item-var-1.product-item .item-details {
  padding-inline: 1rem;
}

@media (min-width: 768px) {
  .item-var-1.post-item .item-details,
  .item-var-1.card-item .item-details,
  .item-var-1.product-item .item-details {
    padding-inline: 1.5rem;
  }
}

/* ---------- VAR 2 — boxed ---------- */

/* Бүтээгдэхүүний карт — сүүдэргүй, зүгээр хүрээтэй (хэрэглэгч 2026-08-26). */
.product-item.item-var-2 {
  box-shadow: none;
  border: 1px solid var(--bs-border-color);
}

.item-var-2 {
  background-color: var(--bs-body-bg);
  box-shadow: var(--bs-box-shadow);
  border-radius: .75rem;
  gap: 0px;
  overflow: hidden;
}
.feature-item.item-var-2 {
  gap: .75rem;
  padding: 1rem;
}
.item-var-2 .item-details:not(.feature-item .item-details) {
  padding: 1rem;
}
@media (min-width: 768px) {
  .item-var-2 {
    border-radius: 1rem;
  }
  .feature-item.item-var-2 {
    gap: 1rem;
    padding: 1.5rem;
  }
  .item-var-2 .item-details:not(.feature-item .item-details) {
    padding: 1.5rem;
  }
}

/* ---------- VAR 3 — overlay (card/post/product · feature=хэвтээ) ---------- */

.feature-item.item-var-3 {
  flex-direction: row;
}

.card-item.item-var-3,
.post-item.item-var-3,
.product-item.item-var-3 {
  border-radius: .75rem;
  overflow: hidden;
}

.card-item.item-var-3 .item-details,
.post-item.item-var-3 .item-details,
.product-item.item-var-3 .item-details {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 1rem;
}

.card-item.item-var-3 .item-overlay,
.post-item.item-var-3 .item-overlay,
.product-item.item-var-3 .item-overlay {
  background: linear-gradient(180deg, rgba(var(--bs-body-bg-rgb), 0) 0%, rgba(var(--bs-body-bg-rgb), 1) 100%);
}
/* PERSON — зурган дээрх нэр/албан тушаалын scrim. Хөрөг зураг тул 0%-иас биш
   50%-иас эхэлнэ — эс бөгөөс хүний царайг бүрхэнэ. */
.person-item .item-overlay {
  background: linear-gradient(180deg, rgba(var(--bs-body-bg-rgb), 0) 50%, rgba(var(--bs-body-bg-rgb), 1) 100%);
}
.card-item.item-var-3 .item-title a,
.card-item.item-var-3 .item-desc,
.card-item.item-var-3 .item-info,
.card-item.item-var-3 .item-details a:not(.btn),
.card-item.item-var-3 .item-details small,
.card-item.item-var-3 .item-action .btn-link,
.post-item.item-var-3 .item-title a,
.post-item.item-var-3 .item-desc,
.post-item.item-var-3 .item-info,
.post-item.item-var-3 .item-details a:not(.btn),
.post-item.item-var-3 .item-details small,
.post-item.item-var-3 .item-action .btn-link,
.product-item.item-var-3 .item-title a,
.product-item.item-var-3 .item-desc,
.product-item.item-var-3 .item-info,
.product-item.item-var-3 .item-details a:not(.btn),
.product-item.item-var-3 .item-details small,
.product-item.item-var-3 .item-action .btn-link {
  color: var(--bs-body-color) !important;
  text-decoration: none;
}

@media (min-width: 768px) {
  .card-item.item-var-3,
  .post-item.item-var-3,
  .product-item.item-var-3 {
    border-radius: 1rem;
  }
  .card-item.item-var-3 .item-details,
  .post-item.item-var-3 .item-details,
  .product-item.item-var-3 .item-details {
    padding: 1.5rem;
  }
}
/* ---------- VAR 4 — хэвтээ ---------- */

.item-var-4.item-element {
  flex-direction: row;
}
.feature-item.item-element.item-var-4 {
  background: var(--bs-body-bg);
  box-shadow: var(--bs-box-shadow);
  border-radius: .75rem;
  padding: 1rem;
}

/* тусдаа зурагтай хувилбарын .item-image rounded (var-1 · var-4) */
.card-item.item-var-1 .item-image,
.card-item.item-var-4 .item-image,
.post-item.item-var-1 .item-image,
.post-item.item-var-4 .item-image,
.product-item.item-var-1 .item-image,
.product-item.item-var-4 .item-image {
  border-radius: .75rem;
}
@media (min-width: 768px) {
  .item-element.item-var-4.feature-item {
    border-radius: 1rem;
    padding: 1.5rem;
  }
  .card-item.item-var-1 .item-image,
  .card-item.item-var-4 .item-image,
  .post-item.item-var-1 .item-image,
  .post-item.item-var-4 .item-image,
  .product-item.item-var-1 .item-image,
  .product-item.item-var-4 .item-image {
    border-radius: 1rem;
  }
}

/* ---------- ТОХИРГОО — items-wrapper дээр ---------- */

/* Текст хэмжээ — items-text-sm / md = default (классгүй) / items-text-lg / items-text-xl.
   Зөвхөн title шатлана: sm 1rem тогтмол · md 1→1.25 · lg 1.25→1.5 · xl = heading-row h2 (calc(1.325rem+.9vw)→2rem @1200).
   desc/info/badge суурьдаа тогтмол. sm-ийн title ≥1200-д desc-тэй тэнцэнэ (жин/өнгөөр ялгарна). */

.items-text-sm .item-title { font-size: 1rem; }

.items-text-lg .item-title { font-size: 1.25rem; }
@media (min-width: 1200px) {
  .items-text-lg .item-title { font-size: 1.5rem; }
}

.items-text-xl .item-title { font-size: calc(1.325rem + .9vw); } /* = heading-row h2 (Bootstrap default) */
@media (min-width: 1200px) {
  .items-text-xl .item-title { font-size: 2rem; }
}

/* Доторх зай: items-gap-sm / md (default) / items-gap-lg — утгыг гараар бөглөнө */
.items-gap-sm .item-element { }
.items-gap-sm .item-details { }

.items-gap-lg .item-element { }
.items-gap-lg .item-details { }

/* Голлуулна — items-centered (wrapper: бүх item) / item-centered (дан item).
   Зөвхөн босоо item-д: icon блок align-ээр, title/desc/info текстээрээ голлоно.
   Хэвтээ хувилбарт (var-4, feature var-3) үйлчлэхгүй. */
.items-centered .item-element:not(.item-var-4):not(.feature-item.item-var-3),
.item-element.item-centered:not(.item-var-4):not(.feature-item.item-var-3) {
  align-items: center;
  text-align: center;
}
.items-centered .item-action {
  justify-content: center;
}
/* align-items:center нь ТОДОРХОЙ ӨРГӨНТЭЙ хүүхдийг л голлуулна (icon w-14, avatar w-75).
   Бүтэн өргөний зураг (w-* класс байхгүй .item-media) болон .item-details-ийг агшихаас
   сэргийлж align-self:stretch-ээр буцаана — эс бөгөөс ratio .item-image 0 өргөнтэй болж зураг алга болно. */
.items-centered .item-element:not(.item-var-4):not(.feature-item.item-var-3) > .item-media:not([class*="w-"]),
.items-centered .item-element:not(.item-var-4):not(.feature-item.item-var-3) > .item-details,
.item-element.item-centered:not(.item-var-4):not(.feature-item.item-var-3) > .item-media:not([class*="w-"]),
.item-element.item-centered:not(.item-var-4):not(.feature-item.item-var-3) > .item-details {
  align-self: stretch;
}

/* Feature icon байнга цагаан */
.items-icon-white .feature-image img {
  filter: brightness(0) invert(1);
}

/* ---------- HOVER — items-wrapper дээр, ≥992px ---------- */

/* ЗУРАГ СОЛИГДОХ — wrapper класс ХЭРЭГГҮЙ (хэрэглэгчийн шийдвэр 2026-09-13).
   Хайрцагт 2 зураг байгаа нь ӨӨРӨӨ «энэ солигдоно» гэсэн дохио; зургууд нь
   ялгах классгүй, дарааллыг нь `:nth-child` барина.
   ⚠️ Иймд нэг `.item-image` дотор 2 зураг тавих нь = нөлөө асаах. */
.item-element .item-image img:nth-child(2) {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}

@media (min-width: 992px) {

  /* дээш хөвнө */
  .items-hover-lift .item-element:hover {
    transform: translateY(-0.5rem);
  }

  /* томорно */
  .items-hover-scale .item-element:hover {
    transform: scale(1.05);
  }

  /* зүүн тийш */
  .items-hover-lift-left .item-element:hover {
    transform: translateX(-0.5rem);
  }

  /* баруун тийш */
  .items-hover-lift-right .item-element:hover {
    transform: translateX(0.5rem);
  }

  /* зураг томорно */
  .items-hover-zoom .item-element:hover .item-image img,
  .items-hover-zoom .item-element:hover .item-image video {
    transform: scale(1.05);
  }

  /* зураг харлана (feature хамаарахгүй) */
  .items-hover-darken .item-element:not(.feature-item):hover .item-image img,
  .items-hover-darken .item-element:not(.feature-item):hover .item-image video {
    filter: brightness(0.75);
  }

  /* video гарч ирнэ (markup: opacity-0) */
  .items-hover-video .item-element:hover .item-image video {
    opacity: 1 !important;
  }

  /* title 0.5 → 1 */
  .items-hover-opacity .item-element .item-title {
    opacity: 0.5;
  }
  .items-hover-opacity .item-element:hover .item-title {
    opacity: 1;
  }

  /* title primary өнгөтэй болно */
  .items-hover-title .item-element:hover .item-title,
  .items-hover-title .item-element:hover .item-title a {
    color: var(--bs-primary) !important;
  }

  /* item-bg-dark гарч (markup: opacity-0), текст цагаан, icon цагаан */
  .items-hover-dark .item-element:hover .item-bg-dark {
    opacity: 1 !important;
  }
  .items-hover-dark .item-element:hover,
  .items-hover-dark .item-element:hover *:not(.btn) {
    color: #fff !important;
  }
  .items-hover-dark .item-element:hover .feature-image .item-image img {
    filter: brightness(0) invert(1);
  }

  /* 1-р зураг → 2-р зураг crossfade */
  .item-element:hover .item-image img:nth-child(1):not(:only-of-type) {
    opacity: 0;
  }
  .item-element:hover .item-image img:nth-child(2) {
    opacity: 1;
  }

}

/* ── FOCUS — `bootstrap-extra/focus.css`-д НЭГТГЭГДСЭН (2026-09-13).
   Урьд нь энэ дүрэм 4 файлд давхардаж, тус бүр өөр сонгогчоор хашигдсан тул
   хашаанаас гадуурх элементүүд браузерын жамын заагчтай үлддэг байв. */