/* ============================================================
   AL-HABIB REAL ESTATE — LEASING LISTING PAGE CSS (Arabic / RTL)
   Figma: MAH Design (node 1333:28551 "Leasing listing")
   Sections: Breadcrumbs · Filter Bar · Projects Grid
   All sections use the .mah-ls-* BEM prefix.
   ============================================================ */

:root {
  --ls-dark-blue:     #0c3144;
  --ls-nav-blue:      #103c55;
  --ls-gold:          #7f6f33;
  --ls-gold-text:     #fdf6ec;
  --ls-tag-bg:        #f1f5f9;
  --ls-tag-text:      #606060;
  --ls-field-bg:      #f1f5f9;
  --ls-field-text:    #606060;
  --ls-bc-current:    #86b8d1;
  --ls-bc-link:       #b4d2e1;
  --ls-muted:         #9a9a9a;
  --ls-bg:            #f8fafc;
  --ls-px:            96px;
  --ls-radius-sm:     8px;
  --ls-transition:    0.3s ease;
}

/* ============================================================
   BREADCRUMBS  (dark bar, pills right-aligned — no button)
   ============================================================ */
.mah-ls-breadcrumbs {
  background-color: var(--ls-nav-blue);
  padding: 12px var(--ls-px);
}

.mah-ls-breadcrumbs__inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  direction: rtl;
}

.mah-ls-breadcrumbs__link {
  font-family: 'Work Sans', system-ui, sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: var(--ls-bc-link);
  text-decoration: none;
  line-height: 1.5;
  white-space: nowrap;
  transition: opacity var(--ls-transition);
}

.mah-ls-breadcrumbs__link:hover { opacity: 0.8; color: var(--ls-bc-link); }

.mah-ls-breadcrumbs__sep {
  color: var(--ls-bc-link);
  flex-shrink: 0;
  display: block;
}

.mah-ls-breadcrumbs__current {
  font-family: 'Work Sans', system-ui, sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: var(--ls-bc-current);
  line-height: 1.5;
  white-space: nowrap;
}

/* ============================================================
   PAGE BODY
   ============================================================ */
.mah-ls-body {
  background: var(--ls-bg);
  padding-bottom: 48px;
}

/* ============================================================
   FILTER BAR
   ============================================================ */
.mah-ls-filters {
  background: var(--ls-bg);
  padding: 24px var(--ls-px);
}

.mah-ls-filters__inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  direction: ltr;
}

/* Filters group → LEFT */
.mah-ls-filters__group {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 24px;
}

/* "قائمة المشاريع" heading → RIGHT */
.mah-ls-filters__heading {
  font-family: 'Work Sans', system-ui, sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--ls-gold);
  white-space: nowrap;
  margin: 0;
  text-align: right;
}

/* Single filter = label (right, first) + dropdown (left) */
.mah-ls-filter {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  direction: rtl;
}

.mah-ls-filter__label {
  font-family: 'Work Sans', system-ui, sans-serif;
  font-size: 18px;
  font-weight: 400;
  color: var(--ls-muted);
  white-space: nowrap;
  text-align: right;
}

.mah-ls-filter__select-wrap {
  position: relative;
  width: 240px;
}

.mah-ls-filter__select {
  width: 100%;
  height: 56px;
  padding: 0 16px 0 48px;
  border-radius: var(--ls-radius-sm);
  background: var(--ls-field-bg);
  border: none;
  font-family: 'Work Sans', system-ui, sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: var(--ls-field-text);
  text-align: right;
  direction: rtl;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  outline: none;
  transition: background var(--ls-transition);
}

.mah-ls-filter__select:hover { background: #e8edf3; }

.mah-ls-filter__caret {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  color: var(--ls-field-text);
  pointer-events: none;
}

/* ============================================================
   PROJECTS GRID
   ============================================================ */
.mah-ls-grid {
  padding: 0 var(--ls-px) 32px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px 24px;
  direction: ltr;
}

/* ============================================================
   PROJECT CARD
   ============================================================ */
.mah-ls-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.mah-ls-card__img-wrap {
  display: block;
  height: 256px;
  width: 100%;
  border-radius: var(--ls-radius-sm);
  overflow: hidden;
  position: relative;
}

.mah-ls-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--ls-transition);
}

.mah-ls-card__img-wrap:hover .mah-ls-card__img { transform: scale(1.03); }

.mah-ls-card__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-end;
  padding: 0 16px;
}

/* Title row: meta column (left) + title (right) */
.mah-ls-card__head {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 16px;
  width: 100%;
  direction: ltr;
}

.mah-ls-card__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-shrink: 0;
}

.mah-ls-card__tags {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
}

.mah-ls-card__tag {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 8px;
  border-radius: 9999px;
  background: var(--ls-tag-bg);
  font-family: 'Work Sans', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--ls-tag-text);
  white-space: nowrap;
  line-height: 1;
}

.mah-ls-card__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 16px;
  border-radius: var(--ls-radius-sm);
  background: var(--ls-gold);
  color: var(--ls-gold-text);
  font-family: 'Work Sans', system-ui, sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
  border: none;
  outline: none;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(35, 47, 55, 0.05);
  transition: opacity var(--ls-transition);
}

.mah-ls-card__btn:hover { opacity: 0.9; }

.mah-ls-card__title {
  flex: 1 0 0;
  min-width: 0;
  font-family: '29LT Zarid', system-ui, sans-serif;
  font-weight: 700;
  font-size: 32px;
  color: var(--ls-dark-blue);
  text-align: right;
  letter-spacing: -1px;
  line-height: 1.25;
  margin: 0;
}

.mah-ls-card__title-link {
  color: inherit;
  text-decoration: none;
}

.mah-ls-card__title-link:hover {
  text-decoration: underline;
}

.mah-ls-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 24px 0;
  font-family: '29LT Zarid', system-ui, sans-serif;
  font-size: 18px;
  color: var(--ls-dark-blue);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
  :root { --ls-px: 48px; }
  .mah-ls-grid { grid-template-columns: repeat(2, 1fr); }
  .mah-ls-card__title { font-size: 26px; }
}

@media (max-width: 720px) {
  :root { --ls-px: 20px; }
  .mah-ls-grid { grid-template-columns: 1fr; gap: 32px; }
  .mah-ls-filters__inner { flex-direction: column; align-items: stretch; gap: 16px; }
  .mah-ls-filters__group { flex-wrap: wrap; gap: 12px; }
  .mah-ls-filter__select-wrap { width: 200px; }
}