/* LeaseMatrix Area Range — RWD 分段面積軸
 *
 * 單格：Width 40px · Height 5px
 * 版面：面積 | 格子軸 | 平方呎（與圖2 一致）
 * 變數：tablet / mobile 可用 --*-tablet / --*-mobile 覆寫
 */

.lmsb-area-range {
  --lmsb-ar-n: 6;
  /* 淺底預設（深色 hero → theme="dark"） */
  --lmsb-ar-label-color: #102735;
  --lmsb-ar-unit-color: #134657;
  --lmsb-ar-tick-color: #305d6c;
  --lmsb-ar-bar-bg: #aeaeaf;
  --lmsb-ar-bar-border: transparent;
  --lmsb-ar-seg-hover: #6b33ec;
  --lmsb-ar-seg-active: #6b33ec;
  --lmsb-ar-gap: 4px;
  --lmsb-ar-radius: 1px;
  --lmsb-ar-seg-width: 40px;
  --lmsb-ar-height: 10px;
  --lmsb-ar-label-size: 14px;
  --lmsb-ar-tick-size: 11px;
  --lmsb-ar-unit-size: 12px;
  --lmsb-ar-gap-x: 12px;
  --lmsb-ar-tick-gap: 6px;
  --lmsb-ar-max-width: 100%;

  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: var(--lmsb-ar-gap-x);
  width: 100%;
  max-width: var(--lmsb-ar-max-width);
  box-sizing: border-box;
  font-family: inherit;
  line-height: 1.2;
  overflow: visible !important;
}

/* 面積／平方呎與細軸垂直置中（刻度只在軸下方） */
.lmsb-area-range__label,
.lmsb-area-range__unit {
  flex: 0 0 auto;
  margin-top: calc((var(--lmsb-ar-height) - 1.2em) / 2);
  line-height: 1.2;
  white-space: nowrap;
  align-self: flex-start;
}

.lmsb-area-range[data-theme="dark"] {
  --lmsb-ar-label-color: #e8c547;
  --lmsb-ar-unit-color: #305d6c;
  --lmsb-ar-tick-color: #305d6c;
}

.lmsb-area-range[data-theme="light"] {
  --lmsb-ar-label-color: #102735;
  --lmsb-ar-unit-color: #134657;
  --lmsb-ar-tick-color: #305d6c;
}

.lmsb-area-range *,
.lmsb-area-range *::before,
.lmsb-area-range *::after {
  box-sizing: border-box;
}

.lmsb-area-range__label {
  color: var(--lmsb-ar-label-color);
  font-size: var(--lmsb-ar-label-size);
  font-weight: 700;
}

.lmsb-area-range__unit {
  color: #134657;
  font-size: var(--lmsb-ar-unit-size);
  font-weight: 600;
}

.lmsb-area-range__main {
  flex: 0 1 auto;
  width: max-content;
  max-width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: visible;
}

.lmsb-area-range__track {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  width: max-content;
  max-width: 100%;
  height: 10px;
  min-height: 10px;
  max-height: 10px;
  gap: var(--lmsb-ar-gap);
  background: transparent;
  overflow: visible;
}

.lmsb-area-range a.lmsb-area-range__seg,
.lmsb-area-range .lmsb-area-range__seg {
  position: relative;
  flex: 0 0 var(--lmsb-ar-seg-width);
  width: var(--lmsb-ar-seg-width);
  max-width: var(--lmsb-ar-seg-width);
  min-width: var(--lmsb-ar-seg-width);
  height: 10px !important;
  min-height: 10px !important;
  max-height: 10px !important;
  padding: 0 !important;
  line-height: 10px !important;
  display: block;
  background: var(--lmsb-ar-bar-bg) !important;
  background-color: var(--lmsb-ar-bar-bg) !important;
  border: 0 solid var(--lmsb-ar-bar-border);
  border-radius: var(--lmsb-ar-radius);
  text-decoration: none !important;
  box-shadow: none;
  overflow: hidden;
  transition: background-color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.lmsb-area-range a.lmsb-area-range__seg:hover,
.lmsb-area-range a.lmsb-area-range__seg:focus-visible,
.lmsb-area-range .lmsb-area-range__seg:hover,
.lmsb-area-range .lmsb-area-range__seg:focus-visible {
  background: var(--lmsb-ar-seg-hover) !important;
  background-color: var(--lmsb-ar-seg-hover) !important;
  outline: none;
}

.lmsb-area-range a.lmsb-area-range__seg.is-active,
.lmsb-area-range .lmsb-area-range__seg.is-active {
  background: var(--lmsb-ar-seg-active) !important;
  background-color: var(--lmsb-ar-seg-active) !important;
}

.lmsb-area-range a.lmsb-area-range__seg.is-active:hover,
.lmsb-area-range a.lmsb-area-range__seg.is-active:focus-visible,
.lmsb-area-range .lmsb-area-range__seg.is-active:hover,
.lmsb-area-range .lmsb-area-range__seg.is-active:focus-visible {
  background: var(--lmsb-ar-seg-hover) !important;
  background-color: var(--lmsb-ar-seg-hover) !important;
}

.lmsb-area-range__seg-fill {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background-color: inherit;
  pointer-events: none;
}

.lmsb-area-range__ticks {
  position: relative;
  width: 100%;
  margin-top: var(--lmsb-ar-tick-gap);
  min-height: calc(var(--lmsb-ar-tick-size) * 1.5);
  height: auto;
  overflow: visible;
  pointer-events: none;
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
}

.lmsb-area-range__tick-row {
  display: grid;
  grid-template-columns: repeat(var(--lmsb-ar-n), var(--lmsb-ar-seg-width));
  column-gap: var(--lmsb-ar-gap);
  width: max-content;
  max-width: 100%;
  overflow: visible;
}

.lmsb-area-range__tick-cell {
  position: relative;
  width: var(--lmsb-ar-seg-width);
  min-width: 0;
  height: calc(var(--lmsb-ar-tick-size) * 1.5);
  overflow: visible;
}

.lmsb-area-range__tick--start,
.lmsb-area-range__tick-text {
  color: #305d6c !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.lmsb-area-range__tick--start {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  font-size: var(--lmsb-ar-tick-size);
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
}

.lmsb-area-range__tick-text {
  position: absolute;
  top: 0;
  right: 0;
  transform: translateX(50%);
  font-size: var(--lmsb-ar-tick-size);
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.lmsb-area-range__tick-cell.is-last .lmsb-area-range__tick-text {
  transform: none;
  right: 0;
  text-align: right;
}

/* Tablet */
@media (max-width: 1024px) {
  .lmsb-area-range {
    gap: var(--lmsb-ar-gap-x-tablet, var(--lmsb-ar-gap-x));
  }

  .lmsb-area-range__label {
    margin-top: calc((var(--lmsb-ar-height-tablet, var(--lmsb-ar-height)) - 1.2em) / 2);
    font-size: var(--lmsb-ar-label-size-tablet, var(--lmsb-ar-label-size));
  }

  .lmsb-area-range__unit {
    margin-top: calc((var(--lmsb-ar-height-tablet, var(--lmsb-ar-height)) - 1.2em) / 2);
    font-size: var(--lmsb-ar-unit-size-tablet, var(--lmsb-ar-unit-size));
  }

  .lmsb-area-range__track {
    height: 10px;
    min-height: 10px;
    max-height: 10px;
  }

  .lmsb-area-range a.lmsb-area-range__seg,
  .lmsb-area-range .lmsb-area-range__seg {
    flex: 0 0 var(--lmsb-ar-seg-width-tablet, var(--lmsb-ar-seg-width));
    width: var(--lmsb-ar-seg-width-tablet, var(--lmsb-ar-seg-width));
    max-width: var(--lmsb-ar-seg-width-tablet, var(--lmsb-ar-seg-width));
    min-width: var(--lmsb-ar-seg-width-tablet, var(--lmsb-ar-seg-width));
    height: 10px !important;
    min-height: 10px !important;
    max-height: 10px !important;
  }

  .lmsb-area-range__ticks {
    margin-top: var(--lmsb-ar-tick-gap-tablet, var(--lmsb-ar-tick-gap));
    min-height: calc(var(--lmsb-ar-tick-size-tablet, var(--lmsb-ar-tick-size)) * 1.4);
  }

  .lmsb-area-range__tick-row {
    grid-template-columns: repeat(var(--lmsb-ar-n), var(--lmsb-ar-seg-width-tablet, var(--lmsb-ar-seg-width)));
  }

  .lmsb-area-range__tick-cell {
    width: var(--lmsb-ar-seg-width-tablet, var(--lmsb-ar-seg-width));
    height: calc(var(--lmsb-ar-tick-size-tablet, var(--lmsb-ar-tick-size)) * 1.4);
  }

  .lmsb-area-range__tick--start,
  .lmsb-area-range__tick-text {
    font-size: var(--lmsb-ar-tick-size-tablet, var(--lmsb-ar-tick-size));
  }
}

/* Mobile：仍「面積 | 軸 | 平方呎」同一列 */
@media (max-width: 640px) {
  .lmsb-area-range {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: var(--lmsb-ar-gap-x-mobile, 8px);
  }

  .lmsb-area-range__label {
    margin-top: calc((var(--lmsb-ar-height-mobile, var(--lmsb-ar-height-tablet, var(--lmsb-ar-height))) - 1.2em) / 2);
    font-size: var(--lmsb-ar-label-size-mobile, var(--lmsb-ar-label-size-tablet, var(--lmsb-ar-label-size)));
  }

  .lmsb-area-range__unit {
    margin-top: calc((var(--lmsb-ar-height-mobile, var(--lmsb-ar-height-tablet, var(--lmsb-ar-height))) - 1.2em) / 2);
    font-size: var(--lmsb-ar-unit-size-mobile, var(--lmsb-ar-unit-size-tablet, var(--lmsb-ar-unit-size)));
  }

  .lmsb-area-range__main {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    max-width: 100%;
  }

  .lmsb-area-range__track {
    width: 100%;
    max-width: 100%;
    height: 10px;
    min-height: 10px;
    max-height: 10px;
  }

  .lmsb-area-range a.lmsb-area-range__seg,
  .lmsb-area-range .lmsb-area-range__seg {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    max-width: none;
    height: 10px !important;
    min-height: 10px !important;
    max-height: 10px !important;
  }

  .lmsb-area-range__tick-row {
    width: 100%;
    max-width: 100%;
    grid-template-columns: repeat(var(--lmsb-ar-n), minmax(0, 1fr));
  }

  .lmsb-area-range__tick-cell {
    width: auto;
    height: 1.5em;
  }

  .lmsb-area-range__ticks {
    margin-top: var(--lmsb-ar-tick-gap-mobile, var(--lmsb-ar-tick-gap-tablet, var(--lmsb-ar-tick-gap)));
    min-height: 1.5em;
  }

  .lmsb-area-range__tick--start,
  .lmsb-area-range__tick-text {
    font-size: clamp(
      8px,
      2.35vw,
      var(--lmsb-ar-tick-size-mobile, var(--lmsb-ar-tick-size-tablet, var(--lmsb-ar-tick-size)))
    );
    letter-spacing: -0.03em;
  }
}

@media (max-width: 380px) {
  .lmsb-area-range__tick--start,
  .lmsb-area-range__tick-text {
    font-size: clamp(7px, 2.1vw, 9px);
    letter-spacing: -0.04em;
  }

  .lmsb-area-range {
    --lmsb-ar-gap: 3px;
  }
}