/* ============================================================
   AL-HABIB REAL ESTATE — DESTINATIONS PAGE (Arabic / RTL)
   BEM prefix: dst-
   ============================================================ */

/* ── Custom Properties ──────────────────────────────────────── */
:root {
  --dst-dark-blue:    #0c3144;
  --dst-nav-blue:     #103c55;
  --dst-mid-blue:     #16506e;
  --dst-border-light: #b4d2e1;
  --dst-bg:           #f8fafc;
  --dst-tag-bg:       #f1f5f9;
  --dst-tag-text:     #606060;
  --dst-btn-gold:     #7f6f33;
  --dst-btn-gold-txt: #fdf6ec;
  --dst-btn-ghost-txt:#282828;
  --dst-breadcrumb-current: #b4d2e1;
  --dst-breadcrumb-link:    #86b8d1;
  --dst-px:           96px;
  --dst-details-w:    376px;
  --dst-card-gap:     17px;
  --dst-radius-lg:    16px;
  --dst-radius-sm:    8px;
}

/* ── Page background ─────────────────────────────────────────── */
.destinations-page,
body.destinations-page {
  background-color: var(--dst-bg);
}

/* ── Breadcrumbs ─────────────────────────────────────────────── */
.dst-breadcrumbs {
  background-color: var(--dst-nav-blue);
  padding: 12px var(--dst-px);
  direction: rtl;
}

.dst-breadcrumbs__inner {
  display: flex;
  align-items: center;
}

.dst-breadcrumbs__link {
  font-family: 'Work Sans', system-ui, sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: var(--dst-breadcrumb-link);
  text-decoration: none;
  padding: 16px 8px;
  line-height: 1.5;
  transition: color 0.2s;
}

.dst-breadcrumbs__link:hover { color: #ffffff; }

.dst-breadcrumbs__sep {
  color: var(--dst-breadcrumb-link);
  flex-shrink: 0;
  margin: 0 2px;
}

.dst-breadcrumbs__current {
  font-family: 'Work Sans', system-ui, sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: var(--dst-breadcrumb-current);
  padding: 16px 8px;
  line-height: 1.5;
}

/* ── Filter bar spacer ───────────────────────────────────────── */
.dst-filter-bar {
  height: 92px;
  background-color: var(--dst-bg);
  padding-top: 48px;
  padding-bottom: 24px;
  flex-shrink: 0;
}

/* ── Project Card ────────────────────────────────────────────── */
.dst-project {
  display: flex;
  flex-direction: row;
  gap: var(--dst-card-gap);
  align-items: stretch;
  padding: 0 var(--dst-px) 32px;
  background-color: var(--dst-bg);
  direction: rtl;
}

.dst-project--last {
  padding-bottom: 48px;
}

/* ── Details Panel ───────────────────────────────────────────── */
.dst-project__details {
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: flex-start;
  justify-content: center;
  flex-shrink: 0;
  width: var(--dst-details-w);
  padding: 24px;
  border-radius: var(--dst-radius-lg);
}

/* ── Title block ─────────────────────────────────────────────── */
.dst-project__title-block {
  display: flex;
  flex-direction: column;
  gap: 24px;
  justify-content: center;
  width: 100%;
}

.dst-project__name {
  display: block;
  font-family: 'Work Sans', system-ui, sans-serif;
  font-size: 32px;
  font-weight: 700;
  color: var(--dst-dark-blue);
  text-align: right;
  letter-spacing: -1px;
  line-height: 1.25;
  text-decoration: none;
  width: 100%;
  direction: auto;
  transition: color 0.2s;
}

.dst-project__name:hover { color: var(--dst-mid-blue); }

.dst-project__name--heading {
  margin: 0;
}

/* ── Tags ────────────────────────────────────────────────────── */
.dst-project__tags {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

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

/* ── Description ─────────────────────────────────────────────── */
.dst-project__desc {
  font-family: 'Work Sans', system-ui, sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: var(--dst-mid-blue);
  line-height: 1.5;
  letter-spacing: 0;
  text-align: right;
  margin: 0;
  width: 100%;
  direction: auto;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
}

/* ── Info Rows ───────────────────────────────────────────────── */
.dst-project__info {
  display: flex;
  flex-direction: column;
  width: 100%;
  font-size: 18px;
}

.dst-project__info-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 24px;
  padding: 16px 0;
  border-bottom: 1px solid var(--dst-border-light);
  width: 100%;
}

.dst-project__info-label {
  font-family: 'Work Sans', system-ui, sans-serif;
  font-size: 18px;
  font-weight: 400;
  color: var(--dst-mid-blue);
  width: 128px;
  flex-shrink: 0;
  text-align: right;
  direction: auto;
  line-height: normal;
}

.dst-project__info-value {
  font-family: 'Work Sans', system-ui, sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--dst-dark-blue);
  flex: 1 0 0;
  min-width: 0;
  text-align: right;
  direction: auto;
  line-height: normal;
}

/* ── Actions ─────────────────────────────────────────────────── */
.dst-project__actions {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  justify-content: flex-end;
  width: 100%;
}

.dst-project__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 24px;
  border-radius: var(--dst-radius-sm);
  font-family: 'Work Sans', system-ui, sans-serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0;
  white-space: nowrap;
  text-decoration: none;
  border: none;
  appearance: none;
  -webkit-appearance: none;
  line-height: 1.25;
  cursor: pointer;
  transition: opacity 0.2s, background-color 0.2s;
  flex-shrink: 0;
}

.dst-project__btn--primary {
  background-color: var(--dst-btn-gold);
  color: var(--dst-btn-gold-txt);
  box-shadow: 0px 1px 2px rgba(35, 47, 55, 0.05);
}

.dst-project__btn--primary:hover {
  opacity: 0.9;
}

.dst-project__btn--ghost {
  background-color: transparent;
  color: var(--dst-btn-ghost-txt);
  box-shadow: 0px 1px 1px rgba(35, 47, 55, 0.05);
}

.dst-project__btn--ghost:hover {
  background-color: rgba(0, 0, 0, 0.04);
}

/* ── Image ───────────────────────────────────────────────────── */
.dst-project__image-wrap {
  flex: 1 0 0;
  min-width: 0;
  border-radius: var(--dst-radius-sm);
  overflow: hidden;
  position: relative;
  align-self: stretch;
  min-height: 340px;
}

.dst-project__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: var(--dst-radius-sm);
}

/* ── Responsive: Tablet (≤1024px) ───────────────────────────── */
@media (max-width: 1024px) {
  :root {
    --dst-px: 48px;
    --dst-details-w: 300px;
  }

  .dst-project__name { font-size: 26px; }
  .dst-project__info-label,
  .dst-project__info-value { font-size: 16px; }
  .dst-project__image-wrap { min-height: 280px; }
}

/* ── Responsive: Mobile (≤768px) ────────────────────────────── */
@media (max-width: 768px) {
  :root {
    --dst-px: 24px;
    --dst-card-gap: 0px;
  }

  .dst-filter-bar { height: auto; padding: 24px var(--dst-px) 0; }

  .dst-project {
    flex-direction: column;
    padding-bottom: 40px;
  }

  .dst-project--last { padding-bottom: 40px; }

  .dst-project__details {
    width: 100%;
    padding: 24px 0 24px;
    gap: 24px;
  }

  .dst-project__name { font-size: 28px; }

  .dst-project__image-wrap {
    min-height: 240px;
    align-self: auto;
    width: 100%;
  }

  .dst-project__actions {
    flex-wrap: wrap;
  }

  .dst-project__btn {
    flex: 1 1 auto;
    justify-content: center;
  }
}

/* ── Responsive: Small Mobile (≤480px) ──────────────────────── */
@media (max-width: 480px) {
  :root { --dst-px: 16px; }

  .dst-project__name { font-size: 24px; }
  .dst-project__info-label { width: 110px; }
  .dst-project__info-label,
  .dst-project__info-value { font-size: 14px; }
}