/* ============================================================
   AL-HABIB REAL ESTATE — SECTORS PAGE CSS (English / LTR)
   Mirrors ar/sectors.css with LTR adjustments.
   ============================================================ */

/* ============================================================
   CSS CUSTOM PROPERTIES
   ============================================================ */
:root {
  --sectors-dark-blue:   #0c3144;
  --sectors-nav-blue:    #103c55;
  --sectors-mid-blue:    #16506e;
  --sectors-gold-label:  #7f6f33;
  --sectors-gold-text:   #cdb68e;
  --sectors-bg-light:    #f8fafc;
  --sectors-body-text:   #282828;
  --sectors-muted-text:  #606060;
  --sectors-white:       #ffffff;
  --sectors-px:          96px;
  --sectors-radius:      16px;
  --sectors-radius-sm:   8px;
  --sectors-img-h:       550px;
  --sectors-info-w:      400px;
  --sectors-transition:  0.3s ease;
}

/* ============================================================
   BREADCRUMBS
   ============================================================ */
.mah-pg-breadcrumbs {
  position: relative;
  z-index: 7;
  background: var(--sectors-nav-blue);
  padding: 0 var(--sectors-px);
}

.mah-pg-breadcrumbs__inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
  padding: 12px 0;
}

.mah-pg-breadcrumbs__current {
  font-family: 'Work Sans', system-ui, sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #86b8d1;
  line-height: 1.5;
  white-space: nowrap;
}

.mah-pg-breadcrumbs__sep {
  color: #86b8d1;
  opacity: 0.7;
  flex-shrink: 0;
  margin: 0 2px;
}

.mah-pg-breadcrumbs__link {
  font-family: 'Work Sans', system-ui, sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #b4d2e1;
  opacity: 0.8;
  line-height: 1.5;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity var(--sectors-transition);
}
.mah-pg-breadcrumbs__link:hover { opacity: 1; }

/* ============================================================
   TOP AREA WRAPPER (breadcrumbs + hero + intro)
   ============================================================ */
.mah-pg-sectors-top-wrap {
  position: relative;
}

.mah-pg-sectors-top-area {
  position: relative;
}

/* Decorative page pattern — positioned from top of breadcrumbs */
.mah-pg-deco-pattern {
  position: absolute;
  right: 0;
  top: 0;
  width: 485px;
  height: 627px;
  z-index: 6;
  pointer-events: none;
  overflow: hidden;
}

.mah-pg-deco-pattern img {
  width: 100%;
  height: 100%;
  display: block;
}

/* Pattern split into column pieces — selected columns scroll vertically (sectors.js) */
.mah-pg-deco-col {
  position: absolute;
}

.mah-pg-deco-col img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  max-width: none;
  object-fit: fill;
}

/* ============================================================
   HERO SECTION
   ============================================================ */
.mah-pg-sectors-hero {
  position: relative;
  height: 400px;
  overflow: hidden;
  z-index: 5;
}

.mah-pg-sectors-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.mah-pg-sectors-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
}

.mah-pg-sectors-hero__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 2;
}

.mah-pg-sectors-hero__inner {
  position: relative;
  z-index: 3;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 var(--sectors-px);
}

.mah-pg-sectors-hero__title {
  font-family: 'Work Sans', system-ui, sans-serif;
  font-size: 64px;
  line-height: 1.15;
  letter-spacing: -2px;
  color: #ffffff;
  margin: 0;
}

/* ============================================================
   INTRO / MISSION BANNER
   ============================================================ */
.mah-pg-sectors-intro {
  background: var(--sectors-dark-blue);
  padding: 96px var(--sectors-px);
  text-align: center;
}

.mah-pg-sectors-intro__text {
  font-family: 'Work Sans', system-ui, sans-serif;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -1.5px;
  color: var(--sectors-gold-text);
  max-width: 824px;
  margin: 0 auto;
}

/* ============================================================
   SECTORS BODY
   ============================================================ */
.mah-pg-sectors-body {
  display: flex;
  flex-direction: column;
  gap: 48px;
  padding: 48px 0;
  background: var(--sectors-bg-light);
}

/* ============================================================
   SECTOR CARD
   ============================================================ */
.mah-pg-sector {
  display: flex;
  flex-direction: column;
}

.mah-pg-sector__feature {
  display: flex;
  flex-direction: row;
  gap: 64px;
  align-items: stretch;
  padding: 24px var(--sectors-px);
  background: var(--sectors-bg-light);
}

/* Variant: image on right side in LTR */
.mah-pg-sector__feature--img-start {
  flex-direction: row-reverse;
}

/* Image block */
.mah-pg-sector__img {
  flex: 1 0 0;
  position: relative;
  border-radius: var(--sectors-radius);
  overflow: hidden;
  min-width: 0;
}

.mah-pg-sector__img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--sectors-radius);
  display: block;
  pointer-events: none;
}

/* Info block */
.mah-pg-sector__info {
  width: var(--sectors-info-w);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.mah-pg-sector__copy {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.mah-pg-sector__title {
  font-family: 'Work Sans', system-ui, sans-serif;
  font-size: 36px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -1px;
  color: var(--sectors-mid-blue);
  margin: 0;
}

.mah-pg-sector__desc {
  font-family: 'Work Sans', system-ui, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--sectors-body-text);
  margin: 0;
}

.mah-pg-sector__desc p {
  margin: 0 0 12px 0;
}
.mah-pg-sector__desc p:last-child { margin-bottom: 0; }

/* Stats block */
.mah-pg-sector__stats {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  width: 100%;
}

.mah-pg-sector__stat-number {
  font-family: 'Work Sans', system-ui, sans-serif;
  font-size: 60px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -2px;
  color: var(--sectors-dark-blue);
  margin: 0 0 -16px 0;
  white-space: nowrap;
}

.mah-pg-sector__stat-body {
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: flex-start;
  width: 100%;
  padding-bottom: 32px;
  overflow: hidden;
}

.mah-pg-sector__stat-label {
  font-family: 'Work Sans', system-ui, sans-serif;
  font-size: 25px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--sectors-body-text);
  margin: 0;
  width: 100%;
}

.mah-pg-sector__stat-divider {
  display: block;
  width: 100%;
  height: 1px;
  background: rgba(16, 60, 85, 0.2);
  flex-shrink: 0;
}

.mah-pg-sector__stat-desc {
  font-family: 'Work Sans', system-ui, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--sectors-muted-text);
  opacity: 0.8;
  margin: 0;
  width: 100%;
}

/* CTA Button */
.mah-pg-sector__cta-wrap {
  display: flex;
  align-items: flex-start;
}

.mah-pg-sector__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  padding: 0 24px 0 16px;
  background: var(--sectors-gold-label);
  border-radius: var(--sectors-radius-sm);
  border: none;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(35, 47, 55, 0.05);
  transition: background var(--sectors-transition), box-shadow var(--sectors-transition);
}

.mah-pg-sector__cta:hover {
  background: #6b5d2a;
  box-shadow: 0 2px 8px rgba(35, 47, 55, 0.12);
}

.mah-pg-sector__cta-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: #fdf6ec;
}

.mah-pg-sector__cta-text {
  font-family: 'Work Sans', system-ui, sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
  color: #fdf6ec;
  white-space: nowrap;
}

/* ============================================================
   EXTRA STATS ROW (Sector 6 — Land Development)
   ============================================================ */
.mah-pg-sector__extra-stats {
  display: flex;
  flex-direction: row;
  gap: 32px;
  align-items: flex-start;
  padding: 0 var(--sectors-px);
}

.mah-pg-sector__extra-stat {
  width: var(--sectors-info-w);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* ============================================================
   RESPONSIVE — TABLET (≤ 1024px)
   ============================================================ */
@media (max-width: 1024px) {
  :root {
    --sectors-px:     48px;
    --sectors-img-h:  320px;
    --sectors-info-w: 340px;
  }

  .mah-pg-deco-pattern { width: 300px; height: 390px; }

  .mah-pg-sectors-hero__title { font-size: 48px; letter-spacing: -1px; }
  .mah-pg-sectors-intro__text { font-size: 28px; }

  .mah-pg-sector__feature,
  .mah-pg-sector__feature--img-start {
    flex-direction: column;
    gap: 32px;
  }

  .mah-pg-sector__img  { flex: none; height: var(--sectors-img-h); width: 100%; }
  .mah-pg-sector__info { width: 100%; }

  .mah-pg-sector__extra-stats { flex-wrap: wrap; gap: 24px; }
  .mah-pg-sector__extra-stat  { width: calc(50% - 12px); }
}

/* ============================================================
   RESPONSIVE — MOBILE (≤ 640px)
   ============================================================ */
@media (max-width: 640px) {
  :root {
    --sectors-px:     24px;
    --sectors-img-h:  240px;
  }

  .mah-pg-breadcrumbs { padding: 0 var(--sectors-px); }
  .mah-pg-deco-pattern { width: 220px; height: 285px; }

  .mah-pg-sectors-hero { height: 300px; }
  .mah-pg-sectors-hero__title { font-size: 36px; letter-spacing: -0.5px; line-height: 1.2; }

  .mah-pg-sectors-intro { padding: 48px var(--sectors-px); }
  .mah-pg-sectors-intro__text { font-size: 22px; letter-spacing: 0; }

  .mah-pg-sectors-body { gap: 32px; padding: 32px 0; }

  .mah-pg-sector__title  { font-size: 24px; }
  .mah-pg-sector__stat-number { font-size: 48px; }
  .mah-pg-sector__stat-label  { font-size: 22px; }

  .mah-pg-sector__extra-stats { gap: 20px; }
  .mah-pg-sector__extra-stat  { width: 100%; }
}