/* ============================================================
   REUSABLE DESTINATION RENDERER  (JSON-driven, zero hardcoded content)
   Renders only the modules whose data passes the gate defined in
   DESTINATION_SCHEMA.md §5. Shares the Ulomi design system — same
   tokens as styles.css, floor-plan-viewer.css, homesite-plan.css.
   ============================================================ */

.dest {
  --dest-gold: var(--gold, #B8922A);
  --dest-ink: var(--ink, #1e1e1e);
  --dest-mid: var(--mid, #5e5e5e);
  --dest-muted: var(--muted, #999);
  --dest-border: var(--border, #e2e2e2);
  --dest-bg2: var(--bg2, #f8f7f5);
  --dest-r: var(--r, 3px);
  --dest-r-lg: var(--r-lg, 16px);
  --dest-shadow-card: var(--shadow-card, 0 10px 28px rgba(20,16,8,0.08), 0 1px 4px rgba(20,16,8,0.04));
  font-family: var(--sans, 'Inter', system-ui, sans-serif);
  color: var(--dest-ink);
}

/* ── ARRIVAL — full-bleed hero, data-driven ── */
.dest-arrival { position: relative; min-height: 78vh; display: flex; align-items: flex-end; overflow: hidden; background: var(--dest-ink); }
.dest-arrival-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 0; }
.dest-arrival-scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.34) 45%, rgba(0,0,0,0.08) 100%); }
.dest-arrival-inner { position: relative; z-index: 2; width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 3rem 8vh; }
.dest-arrival-title { font-family: var(--serif, 'Cormorant Garamond', serif); font-weight: 300; font-size: clamp(40px, 6vw, 72px); line-height: 1.05; color: #fff; margin: 0 0 0.75rem; text-shadow: 0 2px 40px rgba(0,0,0,0.3); }
.dest-arrival-line { font-family: var(--serif, 'Cormorant Garamond', serif); font-weight: 300; font-style: italic; font-size: clamp(17px, 2vw, 22px); color: rgba(255,255,255,0.92); max-width: 34ch; margin: 0; }

/* M12c (premium refinement pass): honest full-bleed placeholder for a
   community with no finished photography/rendering yet (see
   renderArrivalPlaceholder in destination-renderer.js). Sits on
   .dest-arrival's own --dest-ink background. Three layered touches
   push this from "an empty box with an icon" to "an intentional
   editorial moment": a soft champagne glow behind the mark (like a
   single spotlight, not a flat fill), the same dotted texture as
   before but quieter, and the site's own eyebrow/rule/copy rhythm
   (every other section header on the site already uses this exact
   sequence) instead of a one-off icon-plus-caption layout. */
.dest-arrival-placeholder {
  position: absolute; inset: 0; z-index: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 2rem;
}
.dest-arrival-placeholder::before {
  /* Soft radial glow, warm gold at ~2% opacity — a hint of light behind
     the mark rather than a bare dark void. */
  content: ''; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background: radial-gradient(ellipse 480px 360px at center, rgba(184,146,42,0.10), transparent 70%);
}
.dest-arrival-placeholder::after {
  content: ''; position: absolute; inset: -80px; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 40%, transparent 75%);
  mask-image: radial-gradient(ellipse at center, #000 40%, transparent 75%);
}
/* Thin gold viewfinder mark — see renderArrivalPlaceholder's inline SVG.
   Non-representational on purpose: a "space held for something," never
   a house silhouette or a generic broken-image glyph. */
.dest-arrival-placeholder-mark { color: var(--dest-gold); opacity: 0.85; margin-bottom: 1.5rem; filter: drop-shadow(0 0 14px rgba(184,146,42,0.25)); }
.dest-arrival-placeholder-eyebrow { font-size: 9px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--dest-gold); font-weight: 600; margin-bottom: 1rem; }
.dest-arrival-placeholder-rule { width: 26px; height: 1px; background: var(--dest-gold); opacity: 0.6; margin-bottom: 1.4rem; }
.dest-arrival-placeholder-copy { font-family: var(--serif, 'Cormorant Garamond', serif); font-style: italic; font-weight: 300; font-size: 17px; letter-spacing: 0.01em; color: rgba(255,255,255,0.78); }

/* ── ESSENCE — verified facts as one restrained editorial line, never a table ── */
.dest-essence { padding: clamp(56px, 8vh, 88px) 1.5rem; background: var(--bg, #fff); text-align: center; border-bottom: 1px solid var(--dest-border); }
.dest-essence-inner { max-width: 720px; margin: 0 auto; }
.dest-essence-eyebrow { font-size: 9px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--dest-gold); margin-bottom: 1.1rem; font-weight: 600; }
.dest-essence-rule { width: 32px; height: 1px; background: var(--dest-gold); margin: 0 auto 1.75rem; }
.dest-essence-line { font-family: var(--serif, 'Cormorant Garamond', serif); font-weight: 300; font-style: italic; font-size: clamp(17px, 2vw, 21px); line-height: 1.7; color: var(--dest-mid); margin: 0; }

/* ── EDITORIAL SECTIONS — one generic quiet-editorial pattern, reused for
   every approved editorial.sections[] entry regardless of its `key`
   (Why Ulomi Builds Here, Community Overview, The Life Here, or any
   future section type). `--alt` alternates the tint by position only,
   for visual rhythm — it carries no meaning about which section this is. ── */
.dest-editorial { padding: clamp(72px, 11vh, 128px) 1.5rem; background: var(--bg, #fff); text-align: center; }
.dest-editorial--alt { background: var(--dest-bg2); }
.dest-why-eyebrow { font-size: 9px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--dest-gold); margin-bottom: 1.1rem; font-weight: 600; }
.dest-why-rule { width: 32px; height: 1px; background: var(--dest-gold); margin: 0 auto 2rem; }
.dest-why-body { font-family: var(--serif, 'Cormorant Garamond', serif); font-weight: 300; font-size: clamp(21px, 2.6vw, 30px); line-height: 1.5; color: var(--dest-ink); max-width: 42ch; margin: 0 auto; }

/* ── LIFESTYLE & AMENITIES — a quiet editorial grid, never an icon
   dashboard or spec table. Each category gets a small-caps label and
   one restrained sentence. ── */
.dest-amenities { padding: clamp(64px, 10vh, 112px) 1.5rem; background: var(--dest-bg2); }
.dest-amenities-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 2.5rem 3rem; max-width: 1000px; margin: 0 auto; }
.dest-amenity-item { text-align: left; }
.dest-amenity-label { font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dest-gold); font-weight: 600; margin-bottom: 0.6rem; }
.dest-amenity-body { font-family: var(--serif, 'Cormorant Garamond', serif); font-weight: 300; font-size: 17px; line-height: 1.6; color: var(--dest-ink); margin: 0; }

/* ── AVAILABLE HOMES — verified home cards ── */
.dest-homes { padding: clamp(64px, 10vh, 112px) 1.5rem; background: var(--bg, #fff); }
.dest-homes-top { text-align: center; max-width: 720px; margin: 0 auto 3rem; }
.dest-homes-eyebrow { font-size: 9px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--dest-gold); margin-bottom: 1rem; font-weight: 500; }
.dest-homes-title { font-family: var(--serif, 'Cormorant Garamond', serif); font-size: clamp(30px, 4vw, 44px); font-weight: 300; line-height: 1.1; margin: 0; }
.dest-homes-rule { width: 32px; height: 1px; background: var(--dest-gold); margin: 1.25rem auto 0; }

/* M11: same premium framing as the Communities list pane — one card
   language site-wide instead of a flat 3px grid. */
.dest-homes-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1px; background: var(--dest-border); border: 1px solid rgba(184,146,42,0.16); border-radius: var(--dest-r-lg); box-shadow: var(--dest-shadow-card); overflow: hidden; max-width: 1100px; margin: 0 auto; }
.dest-home-card { background: var(--bg, #fff); display: flex; flex-direction: column; align-items: stretch; }
/* M11: gives every Available Home card the same photo-led anchor the
   rest of the site has, whether or not a photo exists yet (see
   renderAvailableHomeMedia in destination-renderer.js). */
/* Fixed height, not aspect-ratio: a lone card in a wide auto-fit grid
   track (the common case — most communities have one available home
   at a time) would otherwise stretch a 4:3 ratio into an oversized
   blank block. 210px matches the scale of photo treatment elsewhere
   on the site regardless of how many cards share the row. */
.dest-home-media { width: 100%; height: 210px; object-fit: cover; display: block; background: var(--dest-bg2); }
.dest-home-media--empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  color: var(--dest-muted); background: var(--dest-bg2);
}
.dest-home-media--empty i { font-size: 22px; color: var(--dest-gold); opacity: 0.7; }
.dest-home-media--empty span { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; }
.dest-home-card-body { padding: 2rem 1.75rem; display: flex; flex-direction: column; align-items: flex-start; flex: 1; }
.dest-home-badge { font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--dest-gold); color: var(--dest-gold); margin-bottom: 1rem; }
.dest-home-badge--sold { border-color: var(--dest-mid); color: var(--dest-mid); }
.dest-home-badge--reserved { border-color: var(--dest-ink); color: var(--dest-ink); }
.dest-home-name { font-family: var(--serif, 'Cormorant Garamond', serif); font-size: 23px; font-weight: 300; margin-bottom: 0.5rem; }
.dest-home-specs { font-size: 13px; color: var(--dest-mid); margin-bottom: 0.4rem; }
.dest-home-price { font-family: var(--serif, 'Cormorant Garamond', serif); font-size: 17px; color: var(--dest-ink); margin-bottom: 1.25rem; }
/* M11: 10px vertical padding — same height as .cty-card-cta and
   .hr-cta, so the "secondary CTA in a card" role is one consistent
   size site-wide. */
.dest-home-btn { margin-top: auto; align-self: stretch; text-align: center; padding: 10px 16px; border: 1px solid var(--dest-ink); border-radius: var(--dest-r); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; color: var(--dest-ink); text-decoration: none; background: none; cursor: pointer; font-family: inherit; transition: background .15s, color .15s, border-color .15s; }
.dest-home-btn:hover { background: var(--dest-ink); color: #fff; }
.dest-home-btn--ghost { border-color: var(--dest-border); color: var(--dest-mid); }
.dest-home-btn--ghost:hover { background: transparent; border-color: var(--dest-ink); color: var(--dest-ink); }
.dest-home-cta-row { margin-top: auto; display: flex; flex-direction: column; gap: 10px; align-self: stretch; }
.dest-home-cta-row .dest-home-btn { margin-top: 0; }
.dest-homes-empty { text-align: center; font-family: var(--serif, 'Cormorant Garamond', serif); font-style: italic; font-weight: 300; font-size: 19px; color: var(--dest-mid); }

/* ── SOLD OUT — one refined state, never two empty grids ── */
.dest-sold-out-inner { text-align: center; max-width: 520px; margin: 0 auto; }
.dest-sold-out-title { font-family: var(--serif, 'Cormorant Garamond', serif); font-size: clamp(26px, 3.4vw, 36px); font-weight: 300; margin: 0; }
.dest-sold-out-copy { font-family: var(--serif, 'Cormorant Garamond', serif); font-style: italic; font-weight: 300; font-size: 17px; color: var(--dest-mid); line-height: 1.7; margin: 1.5rem 0 0; }

/* ── COMMUNITY LOCATION — hosts the shared CommunitiesMap component
   (communities-map.js / communities.css); this file only frames it. ── */
.dest-location { padding: clamp(64px, 10vh, 112px) 1.5rem; background: var(--dest-bg2); }
/* position:relative, not static — .cty-map-leaflet inside is absolutely
   positioned (inset:0) and needs a positioned ancestor to size against,
   or it collapses to 0x0 and Leaflet never gets a real container size. */
.dest-location .cty-map-pane { max-width: 720px; margin: 0 auto; position: relative; }

/* ── INVITATION — always-on, stage-aware action ── */
.dest-invitation { padding: clamp(64px, 10vh, 112px) 1.5rem; background: var(--dest-bg2); }
.dest-invitation-top { text-align: center; max-width: 720px; margin: 0 auto 3rem; }
.dest-invitation-eyebrow { font-size: 9px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--dest-gold); margin-bottom: 1rem; font-weight: 500; }
.dest-invitation-title { font-family: var(--serif, 'Cormorant Garamond', serif); font-size: clamp(30px, 4vw, 44px); font-weight: 300; line-height: 1.1; }
.dest-invitation-title em { font-style: italic; }
.dest-invitation-rule { width: 32px; height: 1px; background: var(--dest-gold); margin: 1.25rem auto 0; }
.dest-invitation-lead { font-family: var(--serif, 'Cormorant Garamond', serif); font-weight: 300; font-size: clamp(16px, 1.8vw, 19px); color: var(--dest-mid); max-width: 30ch; margin: 1.25rem auto 0; }

/* M11: same premium framing as .dest-homes-grid above. */
.dest-invitation-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--dest-border); border: 1px solid rgba(184,146,42,0.16); border-radius: var(--dest-r-lg); box-shadow: var(--dest-shadow-card); overflow: hidden; max-width: 1000px; margin: 0 auto; }
.dest-invitation-left { background: var(--bg, #fff); padding: 3rem; display: flex; flex-direction: column; justify-content: center; }
.dest-invitation-left-title { font-family: var(--serif, 'Cormorant Garamond', serif); font-size: 26px; font-weight: 300; margin-bottom: 1.25rem; }
.dest-cinfo { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--dest-mid); margin-bottom: 14px; }
.dest-cinfo i { font-size: 15px; color: var(--dest-gold); width: 18px; }

.dest-invitation-form { background: var(--dest-bg2); padding: 3rem; }
.dest-fg { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.dest-fg label { font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dest-muted); font-weight: 600; }
.dest-fg input, .dest-fg textarea {
  font-family: var(--sans, 'Inter', sans-serif); font-size: 14px; padding: 11px 13px;
  border: 1px solid var(--dest-border); border-radius: var(--dest-r); background: var(--bg, #fff); color: var(--dest-ink);
}
.dest-fg input:focus, .dest-fg textarea:focus { outline: none; border-color: var(--dest-gold); }
.dest-fg textarea { height: 84px; resize: none; }
.dest-submit { width: 100%; padding: 13px; background: var(--dest-gold); color: #fff; border: none; border-radius: var(--dest-r); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; cursor: pointer; transition: opacity .15s; }
.dest-submit:hover { opacity: 0.9; }
.dest-submit:disabled { opacity: 0.6; cursor: not-allowed; }

.dest-note { text-align: center; font-size: 11px; color: var(--dest-muted); margin-top: 1.5rem; font-style: italic; }

/* ── tablet ── */
@media (max-width: 900px) {
  .dest-invitation-grid { grid-template-columns: 1fr; }
}
/* ── mobile ── */
@media (max-width: 560px) {
  .dest-arrival { min-height: 72svh; }
  .dest-arrival-inner { padding: 0 1.5rem 9vh; }
  .dest-why { padding: 56px 1.5rem; }
  .dest-invitation-left, .dest-invitation-form { padding: 2rem 1.5rem; }
}