/*
 * Single home (single-gw_home.php) — Website file 472:4271 "Select Homes | Floor Plan (Model)"
 * (first built from Buildout 57:818; the node ids below are that frame's unless they start 472:).
 * 1920 grid: toolbar pills at the 104 margin over a hairline (57:824), sidebar 405 wide at
 * x106 (57:980) sticking beside the photo column (1314 wide to the page edge, 472:4290).
 * 2026-10-13 (Danny): the floor plan moved into the sidebar at its width, the photos became
 * one wide stage with a thumbnail row 20px under it (20px gaps, white hand-drawn arrows when
 * the row overflows); the comp's wide plan (57:969), stacked photos and seal mark are gone.
 * Loaded by inc/homes-pages.php on gw_home singles only.
 */

/* Sticky needs no scroll-container ancestor: Salient sets body { overflow: hidden } (html is
   overflow-y: scroll, so body is its own scroll container) and paints .ocm-effect-wrap with
   overflow: hidden for the material skin — both pin `position: sticky` to a box that never
   scrolls (the §9e gw_text_stack gotcha). `clip` keeps the horizontal clipping without one. */
body.gw-home-single, body.gw-home-single .ocm-effect-wrap, body.gw-home-single .ocm-effect-wrap-inner,
body.gw-home-single #ajax-content-wrap, body.gw-home-single .container-wrap { overflow: clip; }

/* White ground (Danny 2026-09-30; the comp frame 472:4271 is cream), same recipe as Find A Home:
   Salient's dynamic CSS paints the wrappers from --nectar-page-background-color resolved at :root. */
body.gw-home-single { --gw-surface-page: #fff; --nectar-page-background-color: #fff; background-color: #fff; }
body.gw-home-single .ocm-effect-wrap, body.gw-home-single .ocm-effect-wrap-inner, body.gw-home-single #ajax-content-wrap, body.gw-home-single .container-wrap { background-color: #fff; }

/* Intro body under the hero: held to the heading's measure instead of the wide 1332px one */
.gw-home .gw-section-intro--center .gw-intro__body { max-width: min(100%, clamp(520px, 56vw, 1075px)); }

.gw-home { --gw-home-margin: clamp(20px, 5.42vw, 104px); }
.gw-home__article { padding: clamp(48px, 4.2vw, 80px) 0 0; }

/* Toolbar (57:825-830) over a hairline */
.gw-home__article { padding-top: calc(clamp(20px, 4.115vw, 79px) + clamp(96px, 17.6vw, 338px) * 0.55 + clamp(32px, 3vw, 56px)); }
/* no hero above the home any more (feedback card 17), so the toolbar must clear the FULL-SIZE lockup that shows on load
   (header top + lockup width * 186/338), not the compact band: the compact value let the hairline cut through
   "AT SARASOTA" (Danny, 2026-10-13). Written with the un-scrolled values so the padding does not jump once html.gw-scrolled. */
.gw-home__toolbar { display: flex; justify-content: space-between; align-items: center; gap: var(--gw-space-2); margin: 0 var(--gw-home-margin); padding-bottom: clamp(16px, 2.55vw, 49px); border-bottom: var(--gw-stroke-hairline) solid var(--gw-green-700); }
.gw-home__next { margin-left: auto; }

/* Layout: sidebar 405/1920 at x106 (2px in from the rule), plan column from x602 */
.gw-home__layout { position: relative; display: grid; grid-template-columns: clamp(220px, 21.1vw, 405px) minmax(0, 1fr); column-gap: clamp(24px, 4.75vw, 91px); margin: 0 var(--gw-home-margin); padding-top: clamp(32px, 3.33vw, 64px); align-items: stretch; } /* the sidebar cell must span the row for sticky to travel */
.gw-home__mark { position: absolute; top: clamp(24px, 3.9vw, 75px); right: clamp(0px, 2.14vw, 41px); width: clamp(48px, 5.1vw, 98px); color: var(--gw-green-700); line-height: 0; pointer-events: none; }
.gw-home__mark svg { display: block; width: 100%; height: auto; }

/* Sidebar (57:980): sticks under the header while the photos scroll */
.gw-home__side { min-width: 0; align-self: stretch; }
.gw-home__sticky { position: sticky; top: calc(var(--gw-header-h-compact, 72px) + 16px); display: grid; gap: 0; }
.gw-home__builder { margin: 0 0 clamp(14px, 1.3vw, 25px); color: var(--gw-orange-400); }
.gw-home__title { margin: 0 0 clamp(18px, 1.5vw, 28px); color: var(--gw-teal-500); overflow-wrap: anywhere; }
.gw-home__identity { display: grid; gap: 10px; margin-bottom: clamp(28px, 3vw, 56px); }
.gw-home__identity p { margin: 0; padding: 0; color: var(--gw-green-700); font-family: var(--gw-font-display); line-height: 1.4; }
.gw-home__address { font-size: clamp(18px, 1.3vw, 25px); font-weight: 600; overflow-wrap: anywhere; }
.gw-home__identity p.gw-home__availability { font-size: clamp(14px, 1vw, 19px); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gw-orange-500); } /* pronounced (feedback card 18) */
.gw-home__price { font-size: clamp(18px, 1.25vw, 24px); font-weight: 800; }
.gw-home__estimate { margin: 0; font-size: clamp(14px, 0.9vw, 17px); }
.gw-home__estimate a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.gw-home__estimate a:hover, .gw-home__estimate a:focus-visible { color: var(--gw-text-link-hover); }
.gw-home__tag { position: absolute; top: 5.2cqw; left: 0; z-index: 2; max-width: calc(100% - 4.4cqw); padding: 1.5cqw calc(1.4cqw + 5px) 1.5cqw 4.4cqw; background: var(--gw-orange-500); color: #fff; font-family: var(--gw-font-display); font-weight: 900; font-size: clamp(13px, 2.8cqw, 34px); line-height: 1; white-space: nowrap; pointer-events: none; } /* same orange tag (feedback card 41) as the finder card, quick move-in homes only */
.gw-home__specs { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: clamp(8px, 0.7vw, 14px); margin: 0; }
.gw-home__spec { display: flex; gap: 0.5em; align-items: baseline; } /* label and value on one line (feedback card 5) */
.gw-home__spec dt::after { content: ':'; }
.gw-home__spec--flag dt::after { content: none; }
.gw-home__spec dt, .gw-home__spec dd { margin: 0; padding: 0; font-family: var(--gw-font-display); font-weight: 600; font-size: clamp(14px, 1vw, 19.15px); line-height: 1.7; letter-spacing: var(--gw-track-label); text-transform: uppercase; color: var(--gw-green-700); }
.gw-home__spec dd { font-weight: 600; }
.gw-home__spec--flag dd { display: none; }
.gw-home__info { margin-top: clamp(36px, 3.6vw, 70px); }
.gw-home__tablist { display: flex; align-items: center; gap: clamp(6px, 0.5vw, 10px); margin: 0 0 clamp(20px, 2.5vw, 48px); padding: 0; }
@media (min-width: 1000px) { .gw-home__tablist .gw-home__tab, .gw-home__tablist .gw-home__tab-sep { font-size: clamp(12px, 1.22vw, 23.5px); white-space: nowrap; } } /* three tabs on one line down to the 1000px sidebar (220px) */
.gw-home__tab, .gw-home__tablist--static, .gw-home__tab-sep, .gw-home__floor { font-family: var(--gw-font-display); font-weight: 600; font-size: clamp(15px, 1.22vw, 23.5px); line-height: 1.2; letter-spacing: var(--gw-track-label); text-transform: uppercase; color: var(--gw-green-700); }
body .gw-home__tab, body .gw-home__floor, body[data-button-style] button.gw-home__tab, body[data-button-style] button.gw-home__floor { padding: 0 0 2px; border: 0; border-bottom: 2px solid transparent; background: none; cursor: pointer; transition: border-color var(--gw-dur-fast) var(--gw-ease), opacity var(--gw-dur-fast) var(--gw-ease); } /* Salient's button transition rule is (0,1,1)+ */
.gw-home__tab[aria-selected="true"], .gw-home__floor[aria-pressed="true"] { border-bottom-color: currentColor; }
.gw-home__tab[aria-selected="false"], .gw-home__floor[aria-pressed="false"] { opacity: 0.55; }
.gw-home__tab:hover, .gw-home__floor:hover { opacity: 1; }
.gw-home__tab:focus-visible, .gw-home__floor:focus-visible { outline: 2px solid var(--gw-teal-500); outline-offset: 3px; }
body[data-button-style] button.gw-home__tab, body[data-button-style] button.gw-home__floor { border-radius: 0 !important; } /* Salient button radius */
.gw-home__panel { max-width: clamp(280px, 18.85vw, 362px); margin-left: clamp(0px, 1.35vw, 26px); }
.gw-home__panel p { margin: 0 0 1em; }
.gw-home__panel p:last-child { margin-bottom: 0; }
.gw-home__panel[hidden] { display: none; }
.gw-home__features { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.35em; }
.gw-home__features li { margin: 0; list-style: none; padding-left: 1.1em; position: relative; }
.gw-home__features li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 0.45em; height: 0.45em; border-radius: 50%; background: var(--gw-teal-500); }
.gw-home__features li::marker { content: none; } /* Salient forces li bullets */
.gw-home__links { display: grid; gap: var(--gw-space-2); margin-top: clamp(28px, 2.6vw, 50px); } /* Contact for home under the specs, full column width (Danny, 2026-10-14) */
.gw-home__links .gw-pill { width: 100%; max-width: 100%; min-width: 0; text-align: center; white-space: normal; }

/* Floor Plan tab (Danny, 2026-10-14): a tinted thumbnail centred in the column, the PDF pill centred on it, floor toggle under it */
.gw-home__panel--plan { max-width: none; margin-left: 0; display: grid; justify-items: center; gap: var(--gw-space-2); }
.gw-home__panel--plan[hidden] { display: none; }
.gw-home__plan-stage { display: grid; place-items: center; width: clamp(180px, 13vw, 250px); }
.gw-home__plan-stage > * { grid-area: 1 / 1; }
.gw-home__plan { position: relative; margin: 0; width: 100%; }
.gw-home__plan::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); pointer-events: none; } /* 50% black tint so the pill reads (Danny, 2026-10-14) */
.gw-home__plan-img { display: block; width: 100%; height: auto !important; }
.gw-home__plan-img[hidden] { display: none; }
.gw-home__plan-stage .gw-home__plan-pill { position: relative; z-index: 1; min-height: 40px; padding: 0 18px; font-size: clamp(11px, 0.72vw, 14px); white-space: nowrap; background: var(--gw-white, #fff); border-color: var(--gw-white, #fff); }
.gw-home__plan-stage .gw-home__plan-pill:hover { background: var(--gw-green-700); border-color: var(--gw-green-700); color: var(--gw-cream-100); }
.gw-home__plan-note { margin: 0; padding: 0; max-width: clamp(180px, 15vw, 290px); font-family: var(--gw-font-body); font-size: clamp(13px, 0.9vw, 16px); line-height: 1.5; color: var(--gw-green-700); text-align: center; } /* quick move-ins showing their plan's drawing */
.gw-home__floors { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px clamp(6px, 0.5vw, 10px); min-width: 0; } /* FIRST FLOOR | SECOND FLOOR (472:4427) */
.gw-home__floor { max-width: 100%; text-align: center; overflow-wrap: anywhere; }

/* Photo column: one wide stage (1314 x 741, to the page's right edge) + the thumbnail row */
.gw-home__main { min-width: 0; display: grid; align-content: start; gap: 0; padding-top: clamp(8px, 1.2vw, 24px); margin-right: calc(-1 * var(--gw-home-margin)); } /* level with the builder line, bleeding right like the comp's photos */
.gw-home__gallery { display: grid; gap: 20px; }
.gw-home__stage { position: relative; container-type: inline-size; margin: 0; aspect-ratio: 1314 / 741; overflow: hidden; background: var(--gw-sand-200); }
.gw-home__stage-img { position: absolute; inset: 0; display: block; width: 100%; height: 100% !important; object-fit: cover; opacity: 0; transition: opacity var(--gw-dur) var(--gw-ease); } /* Salient: img { height: auto !important } */
.gw-home__stage-img.is-active { opacity: 1; }
.gw-home__stage-img[hidden] { display: none; }
.gw-home__thumbs-wrap { position: relative; }
.gw-home__thumbs { display: flex; gap: 20px; margin: 0; padding: 0; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; scroll-behavior: smooth; }
.gw-home__thumbs::-webkit-scrollbar { display: none; }
.gw-home__thumb-item { flex: 0 0 calc((100% - 4 * 20px) / 5); min-width: 0; margin: 0; list-style: none; scroll-snap-align: start; }
.gw-home__thumb-item::marker, .gw-home__thumb-item::before { content: none; }
body .gw-home__thumb, body[data-button-style] button.gw-home__thumb { display: block; width: 100%; aspect-ratio: 3 / 2; padding: 0; border: 0; border-radius: 0 !important; background: var(--gw-sand-200); overflow: hidden; cursor: pointer; opacity: 0.72; transition: opacity var(--gw-dur-fast) var(--gw-ease); }
.gw-home__thumb[aria-pressed="true"], .gw-home__thumb:hover, .gw-home__thumb:focus-visible { opacity: 1; }
.gw-home__thumb:focus-visible { outline: 2px solid var(--gw-teal-500); outline-offset: 2px; }
.gw-home__thumb-img { display: block; width: 100%; height: 100% !important; object-fit: cover; }
/* Overflow arrows: the DS hand-drawn arrow in white over a soft page-colour fade at either end of the row (JS shows them only while that side can scroll) */
body .gw-home__thumbs-arrow, body[data-button-style] button.gw-home__thumbs-arrow { position: absolute; top: 0; bottom: 0; z-index: 2; display: grid; place-items: center; width: clamp(56px, 5vw, 96px); padding: 0; border: 0; border-radius: 0 !important; background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.55) 45%, rgba(255, 255, 255, 0.85)); color: #fff; cursor: pointer; filter: drop-shadow(0 1px 6px rgba(1, 46, 43, 0.5)); transition: opacity var(--gw-dur-fast) var(--gw-ease), transform var(--gw-dur-fast) var(--gw-ease); }
.gw-home__thumbs-arrow--next { right: 0; }
.gw-home__thumbs-arrow--prev { left: 0; background: linear-gradient(to left, transparent, rgba(255, 255, 255, 0.55) 45%, rgba(255, 255, 255, 0.85)); }
.gw-home__thumbs-arrow svg { width: clamp(28px, 2.3vw, 44px); height: auto; display: block; transition: transform var(--gw-dur-fast) var(--gw-ease); }
.gw-home__thumbs-arrow--prev svg { transform: scaleX(-1); }
.gw-home__thumbs-arrow:hover svg { transform: translateX(3px); }
.gw-home__thumbs-arrow--prev:hover svg { transform: scaleX(-1) translateX(3px); }
.gw-home__thumbs-arrow[hidden], body[data-button-style] button.gw-home__thumbs-arrow[hidden] { display: none !important; } /* the (0,2,2) Salient-radius rule above would otherwise keep it displayed */
.gw-home__thumbs-arrow:focus-visible { outline: 2px solid var(--gw-teal-500); outline-offset: -2px; }

/* Home Detail fragment under a hairline (57:1045) */
.gw-home__blocks { margin-top: clamp(48px, 4.75vw, 91px); border-top: var(--gw-stroke-hairline) solid var(--gw-green-700); margin-left: var(--gw-home-margin); margin-right: var(--gw-home-margin); }
.gw-home__blocks > * { margin-left: calc(-1 * var(--gw-home-margin)); margin-right: calc(-1 * var(--gw-home-margin)); }

@media (prefers-reduced-motion: reduce) {
  body .gw-home__tab, body .gw-home__floor, body[data-button-style] button.gw-home__tab, body[data-button-style] button.gw-home__floor, .gw-home__stage-img, .gw-home__thumb, .gw-home__thumbs-arrow, .gw-home__thumbs-arrow svg { transition: none; }
  .gw-home__thumbs { scroll-behavior: auto; }
}

@media (max-width: 999px) {
  .gw-home__article { padding-top: calc(var(--gw-header-h-compact, 68px) + var(--gw-space-4) + 64px); } /* clears the pills + the lockup under them (feedback card 17) */
  .gw-home__toolbar { padding-bottom: var(--gw-space-2); }
  .gw-home__toolbar .gw-pill { flex: 1 1 0; min-width: 0; }
  .gw-home__layout { grid-template-columns: minmax(0, 1fr); padding-top: var(--gw-space-4); row-gap: var(--gw-space-5); }
  .gw-home__mark { position: static; width: 64px; margin: 0 0 var(--gw-space-2) auto; }
  .gw-home__main { order: -1; padding-top: 0; margin-right: 0; } /* the photo leads on a phone */
  .gw-home__sticky { position: static; }
  .gw-home__title { font-size: clamp(40px, 12vw, 64px) !important; }
  .gw-home__panel { max-width: none; margin-left: 0; }
  .gw-home__gallery { gap: 12px; }
  .gw-home__thumbs { gap: 12px; }
  .gw-home__thumb-item { flex-basis: calc((100% - 3 * 12px) / 4); }
}
@media (max-width: 599px) {
  .gw-home__thumb-item { flex-basis: calc((100% - 2 * 12px) / 3); }
}