/* ==========================================================================
   base.css — shared design system for the Ray De Leon site
   Loaded by every page before its page-specific stylesheet.

   Sections:
     1. Reset
     2. Design tokens
     3. Typography helpers
     4. Buttons
     5. Site logo
     6. Sticky navigation
     7. Footer (shared parts — per-page box model lives in the page stylesheet)
     8. Scroll-reveal animations
   ========================================================================== */

/* 1. Reset ---------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  max-width: 1440px;
  margin: 0 auto;
  font-family: 'Inter', sans-serif;
  color: var(--black);
  background: var(--white);
  overflow-x: hidden;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
}

/* 2. Design tokens -------------------------------------------------------- */
:root {
  --black: #191919;
  --mid:   #707070;
  --brand: #12637c;
  --white: #ffffff;

  /* Horizontal content gutter. Pages override this to match their layout. */
  --gutter: 148px;

  --radius-card: 16px;
  --radius-pill: 100px;
  --radius-icon: 12px;

  --ease-out: cubic-bezier(.22, 1, .36, 1);
}

/* 3. Typography helpers --------------------------------------------------- */
.eyebrow {
  font-size: 14px;
  letter-spacing: 2.8px;
  line-height: 1.6;
  color: var(--black);
}

.section-title {
  font-size: 48px;
  font-weight: 500;
  line-height: normal;
  color: var(--black);
}

/* 4. Buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 32px;
  border: none;
  border-radius: var(--radius-pill);
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  white-space: nowrap;
  cursor: pointer;
  transition: opacity .2s, transform .2s var(--ease-out);
}

.btn:hover {
  opacity: .85;
  transform: translateY(-2px);
}

.btn--white   { background: var(--white); color: var(--black); }
.btn--ghost   { background: rgba(255, 255, 255, .2); color: var(--white); border: 1px solid var(--white); }
.btn--outline { background: var(--white); color: var(--mid); border: 1px solid var(--mid); }
.btn--dark    { background: transparent; color: var(--black); border: 1px solid var(--black); }

/* 5. Site logo ------------------------------------------------------------
   Defined once per page as an inline <symbol> and referenced with <use>.
   Paths use `currentColor`, so each placement sets its own colour. */
.logo {
  width: 216px;
  height: 45px;
  color: var(--black);
}

/* Large wordmark used in the footer brand block. */
.logo--footer {
  width: 320px;
  max-width: 100%;
  height: auto;
  aspect-ratio: 216 / 45;
}

/* Hides the inline sprite definition without removing it from the a11y tree
   in a way that breaks <use> references. */
.svg-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* 6. Sticky navigation ----------------------------------------------------
   One continuous nav experience in two phases, driven by site.js:

   `.is-pinned`  — while scrolling within the hero, this fixed bar takes over
                   from the in-hero nav at the exact scroll position where the
                   two coincide, so the handoff is invisible. It stays
                   transparent with white text, reading as the hero nav
                   "sticking" to the top.
   `.is-solid`   — once the hero has scrolled past, the bar smoothly gains a
                   black blurred backdrop.

   Fixed (not sticky) so it never inserts height into the document flow, and
   full-bleed with padding that keeps the logo and menu on the same
   1440px/--gutter grid as the page content. */
#sticky-nav {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* 100vw includes a classic scrollbar; subtracting --sbw (set by site.js)
     keeps this bar and its padding on the document's content grid, so the
     handoff from the in-hero nav is pixel-exact on every platform. */
  width: calc(100vw - var(--sbw, 0px));
  height: 92px;
  padding: 0 calc(max((100vw - var(--sbw, 0px) - 1440px) / 2, 0px) + var(--gutter));
  background: rgba(253, 253, 253, 0);
  backdrop-filter: blur(0);
  -webkit-backdrop-filter: blur(0);
  visibility: hidden;
  transition: background-color .45s ease, backdrop-filter .45s ease;
}

#sticky-nav.is-pinned {
  visibility: visible;
}

#sticky-nav.is-solid {
  background: rgba(253, 253, 253, .72);
  backdrop-filter: blur(50px);
  -webkit-backdrop-filter: blur(50px);
}

#sticky-nav .logo { color: var(--white); transition: color .45s ease; }
#sticky-nav ul    { display: flex; gap: 54px; }
#sticky-nav a     { font-size: 16px; color: var(--white); transition: opacity .2s, color .45s ease; }
#sticky-nav a:hover { opacity: .7; }

/* Past the hero the bar goes light, so its text and logo flip to black in
   step with the background transition. */
#sticky-nav.is-solid .logo,
#sticky-nav.is-solid a { color: var(--black); }

/* Hero navigation lives inside each hero, but the link styling is shared. */
.hero__nav a      { font-size: 16px; color: var(--white); transition: opacity .2s; }
.hero__nav a:hover { opacity: .7; }
.hero__nav ul     { display: flex; gap: 54px; }
.hero__nav .logo  { color: var(--white); }

/* 7. Footer (shared) ------------------------------------------------------
   The outer `.footer` box model differs per page (top margin, full-bleed
   technique) and is defined in each page stylesheet. Everything inside the
   footer is identical across pages and lives here. */
.footer {
  position: relative;
  height: 804px;
  border-radius: var(--radius-card);
  overflow: hidden;
}

.footer__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.footer__grad {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-card);
  background: linear-gradient(
    180deg,
    #191919 0%,
    #191919 38%,
    rgba(25, 25, 25, .88) 52%,
    rgba(25, 25, 25, .35) 68%,
    rgba(25, 25, 25, 0) 100%
  );
}

.footer__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1440px;
  height: 100%;
  margin: 0 auto;
  /* The footer sits 32px inside the viewport, so subtracting that from the
     page gutter keeps footer content on the same grid as the body copy. */
  padding: 64px max(24px, calc(var(--gutter) - 32px)) 0;
}

.footer__top   { display: flex; justify-content: space-between; align-items: flex-start; }
.footer__brand { display: flex; flex-direction: column; gap: 32px; }
.footer__brand .logo--footer { color: var(--white); }

.footer__nav-cols { display: flex; gap: 64px; margin-top: 12px; }
.footer__col      { display: flex; flex-direction: column; gap: 2px; min-width: 116px; }
.footer__col-title { margin-bottom: 8px; font-size: 16px; font-weight: 500; line-height: 1.6; color: var(--white); }
.footer__col a     { font-size: 16px; line-height: 1.8; color: rgba(255, 255, 255, .4); transition: color .2s; }
.footer__col a:hover { color: rgba(255, 255, 255, .85); }

.footer__brand .btn { width: fit-content; }

/* Divider with the copyright row beneath it. */
.footer__meta {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-top: 76px;
}

.footer__rule {
  margin: 0;
  border: none;
  border-top: 1px solid rgba(255, 255, 255, .25);
}

.footer__meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .4);
}

/* 8. Scroll-reveal animations --------------------------------------------- */
@keyframes fade-up  { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fade-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes scale-in { from { opacity: 0; transform: scale(.95); } to { opacity: 1; transform: scale(1); } }
@keyframes blur-reveal {
  from { opacity: 0; filter: blur(12px); transform: translateY(14px); }
  to   { opacity: 1; filter: blur(0);    transform: translateY(0); }
}

.anim-fade-up  { animation: fade-up    .7s var(--ease-out) both paused; }
.anim-fade-in  { animation: fade-in    .6s ease         both paused; }
.anim-scale-in { animation: scale-in   .6s var(--ease-out) both paused; }
.anim-blur     { animation: blur-reveal .9s var(--ease-out) both paused; }

.delay-0   { animation-delay:   0ms; }
.delay-100 { animation-delay: 100ms; }
.delay-150 { animation-delay: 150ms; }
.delay-200 { animation-delay: 200ms; }
.delay-250 { animation-delay: 250ms; }
.delay-300 { animation-delay: 300ms; }
.delay-350 { animation-delay: 350ms; }
.delay-400 { animation-delay: 400ms; }

.will-animate { opacity: 0; }
.in-view .will-animate,
.will-animate.in-view { animation-play-state: running; }

@media (prefers-reduced-motion: reduce) {
  [class*="anim-"],
  .will-animate {
    animation: none !important;
    opacity: 1 !important;
    filter: none !important;
  }
}

/* 9. Shared page components ----------------------------------------------
   Promoted here because more than one page now uses them:
   - Section rhythm + property cards + the property accordion (home, properties)
   - Dark-hero layout: text row + full-bleed straddling images (about, properties)
   Page stylesheets still own page-specific box model (gutters, footer bleed). */

/* Section rhythm */
.section        { padding: 72px var(--gutter) 0; }
.section--pb    { padding-bottom: 80px; }
.section-title  { margin-bottom: 38px; }
.section-title-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 38px; }
.section-title-row .section-title { margin-bottom: 0; }
.text-muted     { color: var(--mid); }

/* Property cards — each card is a link to the property detail page. The image
   already lifts on hover; a "View Details" chip fades in over it to make the
   redirect explicit. */
.prop-cards { display: flex; gap: 16px; }

.prop-card {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 16px;
  cursor: pointer;
}

.prop-card__media {
  position: relative;
}

.prop-card__cta {
  position: absolute;
  left: 16px;
  bottom: 16px;
  padding: 8px 20px;
  border-radius: var(--radius-pill);
  font-size: 14px;
  line-height: 1.6;
  color: var(--black);
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .25s ease, transform .25s var(--ease-out);
  pointer-events: none;
}

.prop-card:hover .prop-card__cta,
.prop-card:focus-visible .prop-card__cta {
  opacity: 1;
  transform: translateY(0);
}

.prop-card img {
  width: 100%;
  height: 396px;
  border-radius: var(--radius-card);
  object-fit: cover;
  transition: transform .25s var(--ease-out), box-shadow .25s ease;
}

.prop-card:hover img {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .12);
}

.prop-card__title {
  display: flex;
  justify-content: space-between;
  font-size: 26px;
  color: var(--black);
}

.prop-card__meta {
  display: flex;
  gap: 40px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--mid);
}

.divider { border: none; border-top: 1px solid #e0e0e0; }

/* Property accordion ("More Iconic Properties") */
.more-props { padding: 72px var(--gutter) 0; }

.prow { border-top: 1px solid #e0e0e0; }
.prow:last-of-type { border-bottom: 1px solid #e0e0e0; }

.prow-header {
  display: flex;
  align-items: flex-start;
  gap: 32px;
  padding: 28px 0;
  cursor: pointer;
}

.prow-left {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 74px;
  /* Fixed (not min-) width: rows with longer location names would otherwise
     grow past a min-width and push each description to a different x,
     breaking the column alignment across rows. */
  width: 440px;
  font-size: 26px;
  white-space: nowrap;
  color: var(--black);
}

@media (max-width: 900px) {
  .prow-left { width: auto; gap: 24px; }
  .prow-header { flex-direction: column; gap: 16px; }
  .prow-imgs { flex-direction: column; }
  .prow-imgs .lg,
  .prow-imgs .sm { width: 100%; height: auto; aspect-ratio: 16 / 10; }
  .prow-actions { flex-direction: column; align-items: stretch; }
}

.prow-right {
  display: flex;
  flex: 1;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.prow-desc {
  max-width: 394px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--mid);
}

.prow-btn {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: var(--radius-icon);
  background: #e4e4e4;
  cursor: pointer;
}

.accordion-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .4s var(--ease-out);
}

.accordion-body.open { grid-template-rows: 1fr; }
.accordion-inner { overflow: hidden; }

.prow-expanded {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-bottom: 28px;
}

.prow-imgs { display: flex; gap: 16px; }

.prow-imgs .lg {
  flex-shrink: 0;
  width: 564px;
  height: 311px;
  border-radius: var(--radius-card);
  object-fit: cover;
}

.prow-imgs .sm {
  flex: 1;
  height: 311px;
  border-radius: var(--radius-card);
  object-fit: cover;
}

.prow-actions { display: flex; align-items: center; gap: 24px; }

.prow-input {
  flex: 1;
  max-width: 680px;
  height: 50px;
  padding: 0 21px;
  border: 1px solid #c0c0c0;
  border-radius: var(--radius-card);
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  color: var(--black);
  background: var(--white);
}

.prop-list-cta { padding: 32px 0 72px; }

/* Dark-hero framed card (shared by about, properties, contact) -------------
   Mirrors the home hero's box model: a rounded card inset 32px from the
   viewport that encloses everything — black background, nav, text, and
   images. Interior padding uses the same scrollbar-proof formula as the home
   hero so text stays on the content grid and the sticky-nav handoff is
   pixel-exact. */
.hero__logo-link { display: flex; align-items: center; }

.hero--framed {
  position: relative;
  width: calc(100vw - var(--sbw, 0px) - 64px);
  margin: 32px calc(50% - (100vw - var(--sbw, 0px)) / 2 + 32px) 0;
  border-radius: var(--radius-card);
  background: var(--black);
  overflow: hidden;
}

.hero--framed .hero__nav {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 92px;
  padding: 0 calc(max((100vw - var(--sbw, 0px) - 1440px) / 2, 0px) + var(--gutter) - 32px);
}

.hero-row {
  display: flex;
  align-items: center;
  gap: 106px;
  padding: 90px calc(max((100vw - var(--sbw, 0px) - 1440px) / 2, 0px) + var(--gutter) - 32px) 0;
}

.hero-left {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: 16px;
  width: 474px;
  color: var(--white);
}

.hero-title { font-size: 56px; font-weight: 500; line-height: 1; }
.hero-sub   { font-size: 16px; font-weight: 400; line-height: 1.6; }
.hero-body  { max-width: 601px; font-size: 16px; font-weight: 400; line-height: 1.6; color: #939393; }

.img-row {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  width: 100%;
  padding-top: 80px;
}

.img-left,
.img-right { width: calc(50% - 8px); height: 546px; overflow: hidden; }
.img-left  { border-top-right-radius: 16px; }
.img-right { border-top-left-radius: 16px; }
.img-left img,
.img-right img { width: 100%; height: 100%; object-fit: cover; }