/* Aura dynamic floor plan (sections/dynfp.php, assets/aura-fp.js). Loaded after oldfp.css / oldfp-m.css, which carry
   the old block's look (zero-specificity :where(.nd-oldfp) rules). This file does what the old block's script did
   with inline styles - which pane shows, the sizes - plus the one movable plan element and accessibility.
   Sizes come from aura-fp.js (Layout.measure): --fp-col-h (row layout: the shared column height under the sticky
   header), --fp-all-w (Floor plan tab canvas width), --fp-h-video / --fp-h-photo (stacked layout: plan heights). */

/* panes and blocks the old script showed with jQuery .show() (oldfp.css hides them by default); inactive ones carry
   [hidden], which aura.css makes display:none!important */
.nd-fp .tab-content-fp > div:not([hidden]){display:block}
.nd-fp #floorPlanDetails:not([hidden]){display:block}

/* ---- the plan element: canvas box + floor switcher, moved between the panes ---- */
.nd-fp #floorPlans{display:flex;flex-direction:column;min-width:0}
.nd-fp .floorPlans{position:relative;flex:1 1 auto;min-height:0}
.nd-fp .fp-host{position:absolute;inset:0;overflow:hidden}
.nd-fp .fp-host .canvas-container{position:relative;margin:0 auto;width:100%;height:100%;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.nd-fp .fp-canvas{display:block;touch-action:pan-y;-webkit-tap-highlight-color:transparent}
.nd-fp .fp-canvas.is-pick{cursor:pointer}
.nd-fp .fp-canvas.is-drag{cursor:grabbing}
.nd-fp .fp-fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#fff}
.nd-fp .floorPlanSwitcher{flex:none}
.nd-fp [data-fp-slot="all"] .floorPlanSwitcher{display:none}

/* row layout (>= 768px): one column height for every pane, as the old floorPlanGlobalHeight */
.nd-fp[data-layout="row"] [data-fp-slot="video"] > #floorPlans,
.nd-fp[data-layout="row"] [data-fp-slot="photo"] > #floorPlans{height:var(--fp-col-h,640px)}
.nd-fp[data-layout="row"][data-wide="1"] #floorPlanGallery .slide2s2{height:var(--fp-col-h,640px)}
.nd-fp[data-layout="row"]:not([data-tpl="main3"]) #floorPlanDetails,
.nd-fp[data-layout="row"]:not([data-tpl="main3"]) #floorPlanGrid{height:var(--fp-col-h,640px)}   /* phones: the table at its own height, the grid full screen */
.nd-fp[data-layout="row"] #floorPlanGalleryVertical > div{height:var(--fp-col-h,640px)}
.nd-fp[data-layout="row"] [data-fp-slot="all"] > #floorPlans{width:var(--fp-all-w,900px);height:var(--fp-col-h,640px)}
/* stacked layout (phones in portrait): the plan under the video / the photos, heights from the script */
.nd-fp[data-layout="stack"] [data-fp-slot="video"] .floorPlans{flex:none;height:var(--fp-h-video,420px)}
.nd-fp[data-layout="stack"] [data-fp-slot="photo"] .floorPlans{flex:none;height:var(--fp-h-photo,420px)}
.nd-fp[data-layout="stack"] #floorPlanGallery .slide2s2{aspect-ratio:3/2;max-height:calc(50px + 56.25vw);height:auto}
.nd-fp[data-layout="stack"] #floorPlanGallery .slide2s2 .slide2,
.nd-fp[data-layout="stack"] #floorPlanGallery .slide2s2 .slide2 img{height:100%;min-height:0}
/* phones show the details table on its own (the old page hid the plan on that tab) */
.nd-fp[data-tpl="main3"][data-tab="details"] [data-fp-slot="photo"]{display:none}

/* ---- video: 16:9 box, the iframe fills it (the old script sized #player in px) ---- */
.nd-fp #player{position:relative;width:100%;aspect-ratio:16/9;height:auto;overflow:hidden;background:#11161a}
.nd-fp[data-layout="row"][data-vplan] #player{max-width:var(--fp-video-w,1280px)!important;margin:0 auto}
.nd-fp #player iframe,.nd-fp #player .fp-yt{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.nd-fp .nd-fp-poster{z-index:1}
.nd-fp .nd-fp-poster .fp-yt-link{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);color:#fff;font:600 14px/1.3 var(--font,sans-serif);text-decoration:underline;text-underline-offset:3px;text-shadow:0 1px 3px rgba(0,0,0,.6)}

/* ---- slideshow: two layers cross-fade (the old jQuery fadeIn/fadeOut 'slow') ---- */
.nd-fp #floorPlanGallery .slide2{transition:opacity .6s ease-in-out}
.nd-fp #floorPlanGallery .slide2.fp-out{opacity:0}
.nd-fp #floorPlanGallery .slide2 img{-webkit-user-drag:none;user-select:none}
.nd-fp .slide2s2{touch-action:pan-y;outline:none}
.nd-fp .floorPlanPlayPause [hidden]{display:none!important}

/* ---- grid of every room photo ---- */
.nd-fp .fp-grid-close{grid-column:1/-1;justify-self:end;position:sticky;top:8px;z-index:3;width:40px;height:40px;margin:0 8px -52px 0;display:grid;place-items:center;border:0;border-radius:999px;background:rgba(17,22,26,.72);color:#fff;cursor:pointer}
.nd-fp .fp-grid-close:hover{background:rgba(17,22,26,.9)}
.nd-fp #floorPlanGrid img{cursor:pointer;aspect-ratio:var(--fp-grid-ar,auto)}
.nd-fp #floorPlanGrid img:focus-visible{outline:3px solid #ed3237;outline-offset:2px}
.nd-fp[data-tpl="main3"] #floorPlanGrid{z-index:1150;overscroll-behavior:contain}

/* ---- Floor plan tab: zoom buttons (ported from the old block's own <style>, floorPlanFullInteractive.php) ---- */
.nd-fp .floorPlansDiv{position:relative}
.nd-fp .zoom-controls{position:absolute;bottom:20px;right:20px;display:flex;flex-direction:column;gap:8px;z-index:20;color:#000}
.nd-fp .zoom-btn{width:40px;height:40px;border:none;border-radius:50%;background:rgba(255,255,255,.9);box-shadow:0 2px 8px rgba(0,0,0,.15);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background-color .2s ease,box-shadow .2s ease,transform .2s ease;color:#333}
.nd-fp .zoom-btn:hover{background:#fff;box-shadow:0 4px 12px rgba(0,0,0,.2);transform:scale(1.05)}
.nd-fp .zoom-btn:active{transform:scale(.95)}
.nd-fp .zoom-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
@media (max-width:768px),(hover:none){.nd-fp .zoom-controls{display:none!important}}
.nd-fp #floorPlanGalleryVertical > div{overscroll-behavior:contain}

/* ---- details: the unit toggle swaps a class (the old script set inline display on every cell) ---- */
.nd-fp .fp-units-imperial .fp-metric-cell,.nd-fp .fp-units-metric .fp-imperial-cell{display:none}

/* ---- rooms as buttons: the keyboard / screen-reader route to the plan; shown over the plan while focused ---- */
.nd-fp .fp-rooms{position:absolute;left:8px;right:8px;top:8px;z-index:6;display:flex;flex-wrap:wrap;gap:6px;max-height:60%;overflow:auto;padding:8px;background:rgba(255,255,255,.97);border-radius:10px;box-shadow:0 6px 20px rgba(16,24,40,.18)}
.nd-fp .fp-rooms:not(:focus-within){width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;box-shadow:none}
.nd-fp .fp-rooms button{font:500 13px/1.2 var(--font,sans-serif);padding:7px 11px;border:1px solid #d7dce2;border-radius:999px;background:#fff;color:#1d2327;cursor:pointer}
.nd-fp .fp-rooms button[aria-current="true"]{background:#ed3237;border-color:#ed3237;color:#fff}
.nd-fp .fp-live{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ---- focus: visible on every control (the old block had none) ---- */
.nd-fp .tabs-fp [role="tab"]:focus-visible{outline:2px solid #fff;outline-offset:-4px}
.nd-fp [role="button"]:focus-visible,.nd-fp button:focus-visible,.nd-fp [data-fp-column]:focus-visible{outline:2px solid #ed3237;outline-offset:2px}
.nd-fp .floorPlanSwitcher [role="button"]:focus-visible{outline-offset:1px}

/* ---- full screen: the whole block, scrollable, on white ---- */
.nd-fp #newFloorPlan:fullscreen{overflow:auto;background:#fff}
.nd-fp #newFloorPlan:-webkit-full-screen{overflow:auto;background:#fff}
.nd-fp[data-nofs] #fp-fullscreen-btn{visibility:hidden}

@media (prefers-reduced-motion:reduce){
	.nd-fp #floorPlanGallery .slide2{transition:none}
	.nd-fp #floorPlanGrid img{animation:none;opacity:1;transform:none}
}