/* =============================================
   RESIDENCES — Figma 175:3626 "Hero Banner (residences)", frame 1920×979
   Every measurement is a Figma design pixel written as calc(N * var(--dpx)).
   ============================================= */

.sec-residences .sec-canvas {
  height: calc(979 * var(--dpx));
  background: var(--cream);
}

/* ---- Watermark — 175:3667: SWO mark 258×258 @ right -80 / top -76 ---- */
.sec-residences .res-watermark {
  position: absolute;
  right: calc(-80 * var(--dpx));
  top: calc(-76 * var(--dpx));
  width: calc(258 * var(--dpx));
  height: calc(258 * var(--dpx));
  max-width: none;
  pointer-events: none;
  user-select: none;
}

/* ---- Headline — 175:3627: 1244 wide @ 114,84 (type comes from .sec-title) ---- */
.sec-residences .res-title {
  position: absolute;
  left: calc(114 * var(--dpx));
  top: calc(84 * var(--dpx));
  width: calc(1244 * var(--dpx));
}

/* ---- Plan panel — 175:3628: 723×562 @ 599,367, fill #f0eddd ---- */
.sec-residences .res-panel {
  position: absolute;
  left: calc(599 * var(--dpx));
  top: calc(367 * var(--dpx));
  width: calc(723 * var(--dpx));
  height: calc(562 * var(--dpx));
  background: var(--cream-mid);
}

/* Plan box — 175:3629: 546×444 @ 681,438 → 82,71 inside the panel */
.sec-residences .res-plan {
  position: absolute;
  left: calc(82 * var(--dpx));
  top: calc(71 * var(--dpx));
  width: calc(546 * var(--dpx));
  height: calc(444 * var(--dpx));
}

/* Slides are stacked so JS can crossfade between plans */
.sec-residences .res-plan-slide {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}
.sec-residences .res-plan-slide.is-current { opacity: 1; pointer-events: auto; }

.sec-residences .res-plan-img {
  position: absolute;
  display: block;
  max-width: none;
  height: auto;
  filter: blur(2px);
  cursor: pointer;
}

/* Figma crop of the 4096×2048 plan sheet inside the 546×444 box:
   image 233.9% × 143.6%, offset -7.95% / -32.74% → the left-hand 2 BHK unit fills the box */
.sec-residences .res-plan-img--unit-a {
  width: 233.9%;
  height: 143.6%;
  left: -7.95%;
  top: -32.74%;
}

/* Same sheet, right-hand 2 BHK unit at the same drawing scale, centred in the box
   (unit bbox 2308..3835 × 638..1667 on the 4096×2048 sheet) */
.sec-residences .res-plan-img--unit-b {
  width: 233.9%;
  height: 143.6%;
  left: -125.41%;
  top: -30.82%;
}

/* 3 BHK plans (imgUnitTypeA/B, brochure crops): tall single-unit renders, unlike the
   2 BHK sheet above, so they are fitted (not sheet-cropped) inside the same 546×444 box */
.sec-residences .res-plan-img--3bhk-a,
.sec-residences .res-plan-img--3bhk-b {
  width: 100%;
  height: 100%;
  max-width: 100%;
  left: 0;
  top: 0;
  object-fit: contain;
  object-position: center;
}

/* Arrow buttons — 175:3664 @ 632,623 and 175:3661 @ 1243,623 → 33 / 644 inside the panel, 49.3 round, white */
.sec-residences .res-arrow {
  position: absolute;
  top: calc(256 * var(--dpx));
  width: calc(49.3 * var(--dpx));
  height: calc(49.3 * var(--dpx));
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
.sec-residences .res-arrow--prev { left: calc(33 * var(--dpx)); }
.sec-residences .res-arrow--next { left: calc(644 * var(--dpx)); }

.sec-residences .res-arrow:hover,
.sec-residences .res-arrow:focus-visible {
  transform: scale(1.06);
  box-shadow: 0 calc(4 * var(--dpx)) calc(16 * var(--dpx)) rgba(48, 48, 48, 0.1);
}

/* guidance:up-arrow 21.25×21.71, rotated to point left / right */
.sec-residences .res-arrow img {
  width: calc(21.25 * var(--dpx));
  height: calc(21.71 * var(--dpx));
  max-width: none;
  display: block;
}
.sec-residences .res-arrow--prev img { transform: rotate(-90deg); }
.sec-residences .res-arrow--next img { transform: rotate(90deg); }

/* Screen-reader status ("2 Bed Residences, floor plan 1 of 2") */
.sec-residences .res-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---- Configurations column — 175:3630: 378 wide @ 1428,367, gap 27 ---- */
.sec-residences .res-config {
  position: absolute;
  left: calc(1428 * var(--dpx));
  top: calc(367 * var(--dpx));
  width: calc(378 * var(--dpx));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(27 * var(--dpx));
}

/* 175:3631 — Neue Haas 55 Roman 25/34 uppercase */
.sec-residences .res-config-label {
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: calc(25 * var(--dpx));
  line-height: calc(34 * var(--dpx));
  text-transform: uppercase;
  color: var(--dark);
}

/* 175:3632 — two tabs, gap 40, each 378×81 */
.sec-residences .res-tabs {
  display: flex;
  flex-direction: column;
  gap: calc(40 * var(--dpx));
  width: 100%;
}

.sec-residences .res-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: calc(81 * var(--dpx));
  padding: 0;
  border: max(1px, calc(1 * var(--dpx))) solid var(--gold);
  border-radius: 0;
  background: transparent;
  color: var(--gold);
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: calc(23 * var(--dpx));
  line-height: calc(34 * var(--dpx));
  letter-spacing: calc(1.15 * var(--dpx));
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.35s var(--ease-out), color 0.35s var(--ease-out);
}
.sec-residences .res-tab:hover { background: rgba(176, 143, 61, 0.1); }
.sec-residences .res-tab.is-active,
.sec-residences .res-tab.is-active:hover {
  background: var(--gold);
  color: var(--white);
  font-weight: var(--fw-medium);
}

/* ---- Details column — 175:3637: 411 wide @ 114,367, gap 30 ---- */
.sec-residences .res-details {
  position: absolute;
  left: calc(114 * var(--dpx));
  top: calc(367 * var(--dpx));
  width: calc(411 * var(--dpx));
}

.sec-residences .res-details-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(30 * var(--dpx));
}

/* Ghost copy of the previous content that JS fades out over the new copy on a tab switch */
.sec-residences .res-details-body--ghost {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  pointer-events: none;
}

/* 175:3638 — Neue Haas 65 Medium 30/34, tracking 1.5, uppercase */
.sec-residences .res-heading {
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: calc(30 * var(--dpx));
  line-height: calc(34 * var(--dpx));
  letter-spacing: calc(1.5 * var(--dpx));
  text-transform: uppercase;
  color: var(--dark);
}

/* 175:3639 / 175:3657 — 190-wide gold hairline at 50% */
.sec-residences .res-rule {
  flex: none;
  width: calc(190 * var(--dpx));
  height: max(1px, calc(1 * var(--dpx)));
  margin: 0;
  border: 0;
  background: var(--gold);
  opacity: 0.5;
}

/* 175:3640 — bullet list, gap 14 */
.sec-residences .res-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(14 * var(--dpx));
  width: calc(410 * var(--dpx));
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Row: 14px gold mark + Neue Haas 45 Light 16/28, tracking 0.8 */
.sec-residences .res-item {
  display: flex;
  align-items: flex-start;
  gap: calc(7 * var(--dpx));
  font-family: var(--font-body);
  font-weight: var(--fw-light);
  font-size: max(calc(16 * var(--dpx)), 12px);
  line-height: 1.75;
  letter-spacing: calc(0.8 * var(--dpx));
  color: var(--dark);
  overflow: hidden;
}

.sec-residences .res-item-icon {
  flex: none;
  width: calc(14 * var(--dpx));
  height: calc(14 * var(--dpx));
  max-width: none;
}

/* 175:3656 — hairline + area, gap 18 */
.sec-residences .res-area {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(18 * var(--dpx));
}

/* 175:3658 — gap 10, uppercase */
.sec-residences .res-area-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(10 * var(--dpx));
  color: var(--dark);
  text-transform: uppercase;
}

/* 175:3659 — Neue Haas 55 Roman 18 / normal (22) */
.sec-residences .res-area-label {
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: max(calc(18 * var(--dpx)), 13px);
  line-height: 1.222;
}

/* 175:3660 — "864" 65 Medium 30/34 tracking 1.5 + "SQ. FT." 55 Roman 14 */
.sec-residences .res-area-value {
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: calc(30 * var(--dpx));
  line-height: calc(34 * var(--dpx));
  letter-spacing: calc(1.5 * var(--dpx));
}

.sec-residences .res-area-unit {
  font-weight: var(--fw-regular);
  font-size: max(calc(14 * var(--dpx)), 11px);
}

/* =============================================
   RESPONSIVE < 992px — stacked flow:
   title → plan panel → tabs (side by side) → details
   ============================================= */
@media (max-width: 991px) {
  .sec-residences .sec-canvas {
    height: auto;
    padding: 64px 20px;
    display: flex;
    flex-direction: column;
    gap: 32px;
  }

  .sec-residences .res-watermark {
    width: 160px;
    height: 160px;
    right: -48px;
    top: -44px;
  }

  .sec-residences .res-title {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
  }

  .sec-residences .res-panel {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 723 / 562;
  }

  /* plan box keeps its Figma proportions inside the panel (82/723, 71/562, 546/723, 444/562) */
  .sec-residences .res-plan {
    left: 11.34%;
    top: 12.63%;
    width: 75.52%;
    height: 79.01%;
  }

  .sec-residences .res-arrow {
    top: 50%;
    width: 40px;
    height: 40px;
    margin-top: -20px;
  }
  .sec-residences .res-arrow--prev { left: 10px; }
  .sec-residences .res-arrow--next { left: auto; right: 10px; }
  .sec-residences .res-arrow img { width: 17px; height: 17.4px; }
  .sec-residences .res-arrow:hover,
  .sec-residences .res-arrow:focus-visible { box-shadow: 0 4px 14px rgba(48, 48, 48, 0.1); }

  .sec-residences .res-config {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    gap: 16px;
  }

  .sec-residences .res-config-label {
    font-size: 1.125rem;
    line-height: 1.4;
  }

  .sec-residences .res-tabs {
    flex-direction: row;
    gap: 12px;
  }

  .sec-residences .res-tab {
    flex: 1 1 0;
    width: auto;
    height: 56px;
    padding: 0 8px;
    border-width: 1px;
    font-size: 0.875rem;
    line-height: 1.3;
    letter-spacing: 0.05em;
    white-space: normal;
    text-align: center;
  }

  .sec-residences .res-details {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
  }

  .sec-residences .res-details-body { gap: 20px; }

  .sec-residences .res-heading {
    font-size: 1.375rem;
    line-height: 1.3;
    letter-spacing: 0.05em;
    white-space: normal;
  }

  .sec-residences .res-rule {
    width: 120px;
    height: 1px;
  }

  .sec-residences .res-list {
    width: 100%;
    gap: 10px;
  }

  .sec-residences .res-item {
    align-items: flex-start;
    gap: 8px;
    font-size: 1rem;
    line-height: 1.5;
    letter-spacing: 0.03em;
    white-space: normal;
  }

  .sec-residences .res-item-icon {
    width: 14px;
    height: 14px;
    margin-top: 5px;
  }

  .sec-residences .res-area { gap: 12px; }
  .sec-residences .res-area-text { gap: 6px; }

  .sec-residences .res-area-label {
    font-size: 0.875rem;
    line-height: 1.4;
  }

  .sec-residences .res-area-value {
    font-size: 1.75rem;
    line-height: 1.2;
    letter-spacing: 0.05em;
  }

  .sec-residences .res-area-unit { font-size: 0.875rem; }
}

@media (max-width: 767px) {
  .sec-residences .sec-canvas {
    padding: 48px 20px;
    gap: 28px;
  }
}