/* Apartment plan fills the section; details float beside a selected pin. */
.apartment-section{--apartment-min-height:max(620px,calc(100svh - 62px));position:relative;background:#eff1eb;border-top:1px solid var(--line)}
.apartment-pan{overflow-x:auto;scrollbar-width:thin;overscroll-behavior-x:contain}
.apartment-surface{position:relative;width:100%;min-width:calc(var(--apartment-min-height)*88/51);min-height:var(--apartment-min-height);aspect-ratio:880/510;isolation:isolate}
.apartment-backdrop{position:absolute;inset:0;background:url('apartment-plan.svg') center/cover no-repeat;z-index:-1}
.apartment-header{position:absolute;right:40px;top:24px;width:680px;max-width:calc(100% - 80px);padding:24px 28px;margin:0;display:block;background:#293024;color:#f5f7f0;border:1px solid #293024;border-radius:6px;z-index:3}
.apartment-header .section-index{font-size:10px;margin-bottom:12px;color:#b8c6aa}
.apartment-header h2{font-size:36px;max-width:none}
.apartment-header>p{font-size:12px;line-height:1.6;margin-top:14px;max-width:none;color:#dce5d2}
.apartment-pins{position:absolute;inset:0;pointer-events:none}
.apartment-pin{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-100%);width:38px;height:38px;display:grid;place-items:center;padding:0;border:1px solid #a0ab94;background:#fafbf8;border-radius:50%;color:#45513c;box-shadow:0 2px 6px #333c2517;font-size:12px;z-index:1;pointer-events:auto}
.apartment-pin:after{content:'';position:absolute;inset:-4px;border-radius:50%;border:1px solid transparent}
.apartment-pin:before{content:'';position:absolute;bottom:-5px;left:14px;width:8px;height:8px;background:inherit;border-right:1px solid #a0ab94;border-bottom:1px solid #a0ab94;transform:rotate(45deg);z-index:-1}
.apartment-pin:hover{background:#e3e9db}
.apartment-pin[aria-pressed=true]{background:#495445;color:#fff;border-color:#495445;z-index:2}
.apartment-pin[aria-pressed=true]:before{border-color:#495445}
.apartment-pin[aria-pressed=true]:after{border-color:#49544566;inset:-5px}
.apartment-detail{position:absolute;left:31%;top:28%;width:260px;padding:20px;border:1px solid #cad2c1;border-radius:6px;background:#fafbf8;box-shadow:0 4px 18px #28322012;z-index:4}
.apartment-service{display:block;text-transform:uppercase;letter-spacing:.1em;font-size:9px;color:#808d73;margin-bottom:12px}
.apartment-detail h3{font-size:23px;line-height:1.15;margin-bottom:10px}
.apartment-detail p{font-size:12px;line-height:1.7}
.apartment-detail>.btn{width:100%;min-height:40px;font-size:11px;padding:11px;margin-top:18px}
.apartment-map-caption{position:absolute;left:40px;bottom:14px;font-size:9px;line-height:1.5;color:#87917d;pointer-events:none}
@media(max-width:950px){.apartment-header h2{font-size:30px}.apartment-detail{width:245px;padding:18px}.apartment-detail h3{font-size:22px}.apartment-map-caption{left:30px}}
@media(max-width:650px){.apartment-section{--apartment-min-height:max(620px,calc(100svh - 58px))}.apartment-header{left:20px;right:auto;top:220px;width:calc(100vw - 40px);max-width:360px;padding:17px}.apartment-header h2{font-size:28px;max-width:360px}.apartment-header>p{font-size:11px;max-width:330px;margin-top:10px}.apartment-detail{width:235px}.apartment-map-caption{left:20px}.apartment-pin{width:40px;height:40px}.apartment-pin:before{left:15px}}

/* The callout arrow is attached to the selected pin, with a 12px gap. */
.apartment-detail:before{content:'';position:absolute;width:10px;height:10px;background:#fafbf8}
.apartment-detail[data-side=right]:before{left:-6px;top:var(--pointer-y);transform:translateY(-50%) rotate(45deg);border-left:1px solid #cad2c1;border-bottom:1px solid #cad2c1}
.apartment-detail[data-side=left]:before{right:-6px;top:var(--pointer-y);transform:translateY(-50%) rotate(45deg);border-right:1px solid #cad2c1;border-top:1px solid #cad2c1}
.apartment-detail[data-side=bottom]:before{top:-6px;left:var(--pointer-x);transform:translateX(-50%) rotate(45deg);border-left:1px solid #cad2c1;border-top:1px solid #cad2c1}
.apartment-detail[data-side=top]:before{bottom:-6px;left:var(--pointer-x);transform:translateX(-50%) rotate(45deg);border-right:1px solid #cad2c1;border-bottom:1px solid #cad2c1}
