/* ============================================================
   SAMARA TREATMENT — product page (demo)
   Borrows Samara's product-page structure: a huge LIGHT title,
   specs + action chips, then a big INSET image (not edge-to-edge),
   with one edge-to-edge lifestyle peak lower down.
   Keeps Rivela's cream + cardinal palette. Scoped to [data-samara].
   ============================================================ */

/* ---- Samara: one uniform cream field — kill the alternating darker bands ----
   Leaves the genuinely distinct sections (dark 360 tour, edge-to-edge band) alone. */
[data-samara] main > section:not(.dark):not(.fb):not(.sky):not(.cycle):not(.page-hero) {
  background: var(--paper) !important;
}
/* no divider lines between light sections — each reads as its own clean field */
[data-samara] main > section:not(.dark):not(.fb) {
  border-top: 0 !important;
}

/* ---- light big-display type (the #1 Samara move) ---- */
[data-samara] .display,
[data-samara] .h1,
[data-samara] .h2,
[data-samara] .sa-prod-title {
  font-weight: 300;
  letter-spacing: -0.035em;
  line-height: 1.0;
}

/* ---- product hero ---- */
[data-samara] .sa-prod-hero { padding-block: clamp(28px, 5vw, 64px) clamp(20px, 3vw, 40px); }
.sa-prod-title {
  font-size: clamp(3.4rem, 10.5vw, 9.5rem);
  line-height: 0.92;
  letter-spacing: -0.04em;
  font-weight: 300;
  margin-top: clamp(18px, 3vw, 40px);
}
.sa-prod-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  margin-top: clamp(28px, 4vw, 52px);
}
.sa-prod-specs { font-size: clamp(1.3rem, 1.95vw, 1.66rem); font-weight: 400; color: var(--ink); letter-spacing: -0.01em; }
.sa-prod-price { font-size: clamp(1.3rem, 1.95vw, 1.66rem); font-weight: 400; color: var(--ink-soft); letter-spacing: -0.01em; }

/* action chips */
.sa-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.sa-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 20px;
  border-radius: 999px;
  background: var(--paper-2);
  color: var(--ink);
  font-size: 0.98rem;
  letter-spacing: -0.01em;
  transition: background .2s, transform .2s;
}
.sa-chip:hover { background: var(--sand); transform: translateY(-1px); }
.sa-chip svg { width: 16px; height: 16px; opacity: .7; }

/* ---- big INSET image (Samara's "huge but not edge to edge") ---- */
.sa-prod-imgwrap {
  width: 100%;
  padding-inline: clamp(16px, 4vw, 90px);   /* the gutter that keeps it OFF the edge */
  margin-block: clamp(8px, 2vw, 24px) clamp(40px, 7vw, 110px);
}
.sa-prod-img {
  width: 100%;
  border-radius: 18px;
  overflow: hidden;
  background: var(--paper-2);
  box-shadow: 0 40px 80px -50px rgba(20,17,11,.45);
}
/* show the WHOLE render at its natural shape — no cropping, height follows width */
.sa-prod-img img { width: 100%; height: auto; display: block; }

/* ---- floor plan: real 3D render, transparent cutout, no card/border — sits
   straight on the page at full content width so it reads large ---- */
.floorplan-img { width: 100%; height: auto; display: block; }

/* ---- ONE edge-to-edge lifestyle peak, lower down ---- */
.fb {
  position: relative;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  min-height: 86svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--ink) !important;
  border-top: 0 !important;
  isolation: isolate;
}
.fb__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; transform: scale(1.04); }
.fb__scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(10,7,5,0.62) 0%, rgba(10,7,5,0.16) 40%, rgba(10,7,5,0) 68%);
}
.fb__copy { position: relative; z-index: 2; width: 100%; max-width: var(--maxw); margin-inline: auto; padding: clamp(34px, 6vw, 88px) var(--pad); color: var(--on-night); }
.fb__eyebrow { display: inline-block; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.22em; font-weight: 500; opacity: 0.82; margin-bottom: 1.1em; }
.fb__headline { font-weight: 300; font-size: clamp(2.7rem, 6vw, 5.8rem); line-height: 1.0; letter-spacing: -0.035em; max-width: 16ch; color: #fff; }
.fb__sub { margin-top: 1.05em; font-size: clamp(1.05rem, 1.5vw, 1.4rem); font-weight: 400; line-height: 1.45; max-width: 44ch; color: rgba(255,255,255,0.84); }
.fb__scrim--top { background: linear-gradient(to bottom, rgba(10,7,5,0.65) 0%, rgba(10,7,5,0.2) 45%, rgba(10,7,5,0) 72%); }
.fb--int { min-height: 100svh; align-items: flex-start; }

/* ---- real photo, natural shape — the section's own box matches the photo's
   aspect ratio exactly, so object-fit:cover has nothing left to crop. Sizing
   the SECTION (not the img) also means the height doesn't depend on the img
   having loaded yet, which matters since it's still loading="lazy". ---- */
.fb--fit { min-height: 0; aspect-ratio: 4 / 3; }
.fb--fit .fb__img { transform: none; }

/* ---- responsive ---- */
@media (max-width: 760px) {
  .sa-prod-foot { flex-direction: column; align-items: flex-start; gap: 20px; }
  .fb { min-height: 80svh; }
  .fb__headline { font-size: clamp(2.1rem, 9vw, 3.2rem); }
}