/* ============================================================================
   Red Sea Grove — design tokens
   ----------------------------------------------------------------------------
   THIS is where visual changes happen. Every color, font family, container
   width and page gutter used by the generated site.css resolves through the
   custom properties below. Edit a value here, run `python build.py`, done.
   (This file is copied verbatim to dist/tokens.css — no build transform.)
   ========================================================================== */

:root {
  /* ---- brand palette ---- */
  --color-brand:        #9C3D2A;  /* terracotta red: headings, buttons, accents */
  --color-brand-dark:   #82301F;  /* button hover state */
  --color-brand-soft:   #D07A5F;  /* lighter accent: footer tagline, focus ring (>=4.5:1 on espresso) */
  --color-brand-dashed: #D9BBB2;  /* dashed border on the Buildium widget box */
  --color-brand-wash:   #FAF3F0;  /* pale red-tinted background */

  /* ---- neutrals: text ---- */
  --color-ink:          #38332E;  /* darkest text: wordmark, nav, headings */
  --color-body:         #55504A;  /* body copy */
  --color-muted:        #6A645D;  /* secondary labels (>=4.5:1 on cream and sand) */
  --color-faint:        #6E6A63;  /* fine print (>=4.5:1 on cream and sand) */
  --color-hint:         #716B63;  /* faintest text, sample-review disclaimer (>=4.5:1) */

  /* ---- neutrals: surfaces & lines ---- */
  --color-cream:        #FBF9F6;  /* page background */
  --color-white:        #FFFFFF;
  --color-line:         #E9E2D8;  /* default hairline borders */
  --color-line-card:    #E4DCD2;  /* card borders */
  --color-line-soft:    #EDE6DC;  /* softest section borders */
  --color-input-border: #DDD5C9;  /* form input borders */
  --color-sand:         #F3EEE7;  /* sand info-banner background */
  --color-placeholder:  #E9E2D8;  /* image-placeholder tile background */

  /* ---- footer / dark band ---- */
  --color-espresso:     #26211D;  /* footer + gallery hero background */
  --color-footer-text:  #C9C0B4;
  --color-footer-link:  #99907F;
  --color-footer-dim:   #928879;  /* >=4.5:1 on espresso */
  --color-footer-line:  #3B342E;

  /* ---- typography ---- */
  --font-display: 'Cormorant Garamond', serif;
  --font-body: Montserrat, Helvetica, sans-serif;

  /* ---- layout ---- */
  --width-shell:    1400px;  /* header / sticky bar shell */
  --width-wide:     1240px;  /* find-us, contact, footer */
  --width-standard: 1100px;  /* most content sections */
  --width-narrow:   1000px;  /* featured apartments, gallery bands */
  --width-prose:    860px;   /* policies text column */
  --gutter-x:       40px;    /* horizontal page gutter */
}

/* ---- figures: Cormorant Garamond ships OLD-STYLE numerals by default, so digits
   render at x-height with 3/4/7/9 dropping below the baseline. Beside full-caps
   headings ("UNIT 304", "$1,050") they read as undersized and badly aligned.
   Ask for lining figures site-wide - Montserrat is already lining, so this is
   inert there and only corrects the serif. font-feature-settings repeats it for
   engines that do not honour font-variant-numeric on webfonts. ---- */
:root,
body,
h1, h2, h3, h4, h5, h6,
input, button, select, textarea {
  font-variant-numeric: lining-nums proportional-nums;
  -webkit-font-feature-settings: "lnum" 1, "onum" 0;
     -moz-font-feature-settings: "lnum" 1, "onum" 0;
          font-feature-settings: "lnum" 1, "onum" 0;
}

/* ---- responsive gutter: the page gutter narrows on smaller screens.
   Every section consumes it via var(--gutter-x), so these two blocks are
   the only place the mobile gutter is tuned. ---- */
@media (max-width: 900px) {
  :root { --gutter-x: 28px; }
}
@media (max-width: 600px) {
  :root { --gutter-x: 18px; }
}

/* ---- booking calendar (contact page): the Calendly frame scrolls its own
   content, so it only needs enough height to avoid a double scrollbar.
   Narrow screens get a taller frame because Calendly stacks its date picker
   above the time list below ~700px. ---- */
#tour-calendar {
  /* fallback only: main.js resizes this to Calendly's reported height */
  min-height: 1010px;
}
@media (max-width: 900px) {
  #tour-calendar { min-height: 1060px; }
}
@media (max-width: 600px) {
  #tour-calendar { min-height: 1140px; }
}

/* ---- booking modal: opened by the "Schedule a Tour" button on a unit card.
   <dialog> supplies the backdrop, focus trap and Esc handling; these rules only
   size and skin it. The frame is taller than the viewport on small screens by
   design, so the dialog body scrolls rather than Calendly scrolling inside. ---- */
#tour-modal {
  width: min(92vw, 900px);
  max-width: 92vw;
  max-height: 92vh;
  padding: 0;
  border: 1px solid var(--color-brand, #9C3D2A);
  background: #FFFFFF;
  overflow: auto;
}
#tour-modal::backdrop { background: rgba(38, 33, 29, 0.62); }
.tour-modal__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 18px 22px; border-bottom: 1px solid #E9E2D8;
  position: sticky; top: 0; background: #FFFFFF; z-index: 1;
}
.tour-modal__title {
  margin: 0; font-family: 'Cormorant Garamond', serif; font-weight: 600;
  font-size: 24px; letter-spacing: 0.06em; text-transform: uppercase; color: #38332E;
}
.tour-modal__close {
  border: 0; background: none; font-size: 30px; line-height: 1;
  color: #8A857C; cursor: pointer; padding: 4px 10px; min-width: 44px; min-height: 44px;
}
.tour-modal__close:hover { color: #9C3D2A; }
.tour-modal__frame { display: block; width: 100%; height: 1100px; border: 0; }
@media (max-width: 600px) {
  .tour-modal__frame { height: 1240px; }
}

/* ---- unit detail pages + unit cards ---- */
.unit-link { color: inherit; text-decoration: none; }
.unit-link:hover { color: var(--color-brand, #9C3D2A); }
.unit-details {
  font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  text-decoration: none; color: #38332E; background: #FFFFFF;
  border: 1px solid #DDD5C9; padding: 15px 26px; border-radius: 3px;
}
.unit-details:hover { border-color: var(--color-brand, #9C3D2A); color: var(--color-brand, #9C3D2A); }
@media (max-width: 900px) {
  .unit-hero { height: 320px !important; }
  .unit-features { grid-template-columns: 1fr !important; }
  .unit-gallery { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 600px) {
  .unit-hero { height: 230px !important; }
  .unit-gallery { grid-template-columns: 1fr !important; }
}
.unit-gallery .unit-shot { height: 210px; overflow: hidden; }
.unit-card-photo { display: block; width: 100%; height: 200px; overflow: hidden; }
.unit-card-photo img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.35s ease; }
.unit-card-photo:hover img { transform: scale(1.04); }

/* ---- unit photo strip: every shot the same square, whole image visible
   (contain, never cropped), looping horizontally forever. The track holds two
   copies of the list and slides exactly one copy-width, so the seam is invisible
   and it "cycles back in from the right". Masked to nothing at both edges so it
   dissolves into the page rather than butting against the gutter. ---- */
.unit-strip {
  position: relative;
  overflow: hidden;
  width: 100%;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%);
}
.unit-strip__track {
  display: flex;
  gap: 12px;
  width: max-content;
  animation: rsg-strip 46s linear infinite;
}
.unit-strip:hover .unit-strip__track { animation-play-state: paused; }
@keyframes rsg-strip {
  /* half the track = exactly one full copy of the photo list */
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(calc(-50% - 6px), 0, 0); }
}
.unit-hero, .unit-shot {
  padding: 0; border: 0; background: none; cursor: pointer; display: block;
  overflow: hidden;
}
.unit-hero { width: 100%; }
.unit-shot {
  flex: 0 0 auto;
  width: 148px; height: 148px;        /* square */
  background: #F3EEE7;                /* letterbox ground for 3:2 photos */
  border: 1px solid #E9E2D8;
}
.unit-shot img {
  width: 100%; height: 100%;
  object-fit: contain;                /* the whole photo, never cropped */
  display: block;
  transition: transform 0.35s ease;
}
.unit-shot:hover img { transform: scale(1.05); }
.unit-hero:hover img { transform: scale(1.03); }
@media (max-width: 600px) {
  .unit-shot { width: 116px; height: 116px; }
}
@media (prefers-reduced-motion: reduce) {
  /* no auto-motion: becomes an ordinary swipeable strip */
  .unit-strip__track { animation: none; }
  .unit-strip { overflow-x: auto; }
}

/* ---- lightbox ---- */
#photo-lightbox {
  width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh;
  padding: 0; border: 0; background: rgba(20, 17, 15, 0.94); overflow: hidden;
}
#photo-lightbox::backdrop { background: rgba(20, 17, 15, 0.94); }
.lb__img {
  position: absolute; top: 46%; left: 50%; transform: translate(-50%, -50%);
  /* smaller than full-bleed on purpose: the thumbnail rail sits underneath */
  max-width: 88vw; max-height: 68vh; object-fit: contain;
  /* the image is the one place a tap must NOT close the viewer */
  touch-action: pan-y;
}

/* thumbnail rail inside the viewer, under the full-size image */
.lb__rail {
  position: absolute; left: 50%; bottom: 52px; transform: translateX(-50%);
  display: flex; gap: 8px; max-width: 92vw; padding: 4px;
  overflow-x: auto; overscroll-behavior-x: contain;
}
.lb__thumb {
  flex: 0 0 auto; width: 74px; height: 74px; padding: 0; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.25); background: rgba(255, 255, 255, 0.06);
  opacity: 0.55; transition: opacity 0.2s ease, border-color 0.2s ease;
}
.lb__thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.lb__thumb[aria-current="true"] {
  opacity: 1; border-color: var(--color-brand, #9C3D2A);
}
.lb__thumb:hover { opacity: 1; }
.lb__close, .lb__nav {
  position: absolute; z-index: 2; border: 0; background: rgba(0, 0, 0, 0.35);
  color: #FFFFFF; cursor: pointer; line-height: 1;
  min-width: 48px; min-height: 48px; border-radius: 50%;
}
.lb__close { top: 18px; right: 18px; font-size: 30px; }
.lb__nav { top: 50%; transform: translateY(-50%); font-size: 36px; }
.lb__prev { left: 16px; }
.lb__next { right: 16px; }
.lb__close:hover, .lb__nav:hover { background: rgba(156, 61, 42, 0.9); }
.lb__count {
  position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
  color: #E9E2D8; font-size: 13px; letter-spacing: 0.08em;
}
@media (max-width: 600px) {
  /* arrows are redundant next to swipe and crowd a small screen */
  .lb__nav { display: none; }
  .lb__img { max-width: 96vw; max-height: 58vh; }
  .lb__thumb { width: 56px; height: 56px; }
  .lb__rail { bottom: 46px; }
}