/* =====================================================
   THE DOMUS — Visual Journal (Elastic Editorial Gallery)
   Scoped styling for the Homepage Visual Journal section
   ===================================================== */

.visual-journal {
  padding-block: clamp(3.25rem, 5vh, 4.5rem);
  background: var(--warm-white, #FAFAF8);
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--border, rgba(28,28,30,0.06));
}

/* ── Section Header ── */
.journal-header {
  text-align: center;
  max-width: 780px;
  margin: 0 auto clamp(1.75rem, 3vh, 2.5rem);
  padding-inline: var(--gutter, clamp(1.5rem, 4vw, 3.5rem));
}

.journal-eyebrow {
  display: inline-block;
  font-family: var(--font-body, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", sans-serif);
  font-size: clamp(0.7rem, 0.76vw, 0.8rem);
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--gold, #B89A5C);
  text-transform: uppercase;
  margin-bottom: clamp(0.75rem, 1.2vw, 1.15rem);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.journal-title {
  font-family: var(--font-display, -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", sans-serif);
  font-size: clamp(2.35rem, 4.6vw, 4rem);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--charcoal, #1C1C1E);
  margin: 0 0 clamp(0.85rem, 1.3vw, 1.35rem);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.journal-desc {
  font-family: var(--font-body, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", sans-serif);
  font-size: clamp(0.95rem, 1.1vw, 1.1rem);
  line-height: 1.68;
  letter-spacing: -0.005em;
  color: var(--charcoal-dim, #6E6E73);
  font-weight: 400;
  max-width: 580px;
  margin: 0 auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Gallery Container ── */
.journal-gallery-wrap {
  max-width: 1440px;
  margin: 0 auto;
  padding-inline: var(--gutter, clamp(1.5rem, 4vw, 3.5rem));
}

.journal-gallery {
  display: flex;
  width: 100%;
  height: clamp(520px, 64vh, 680px);
  gap: clamp(8px, 1vw, 14px);
  position: relative;
  overflow: hidden;
}

/* ── Gallery Panel (Elastic Vertical Strips) ── */
.journal-panel {
  position: relative;
  flex: 1 1 0%;
  min-width: 0;
  overflow: hidden;
  border-radius: 4px;
  background-color: #161617;
  cursor: pointer;
  outline: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: flex 0.75s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s ease;
}

.journal-panel:focus-visible {
  outline: 2px solid var(--gold, #B89A5C);
  outline-offset: 3px;
}

/* Active panel expands prominently */
.journal-panel.is-active {
  flex: 4.8 1 0%;
  cursor: default;
}

/* ── Panel Media & Image ── */
.journal-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
}

.journal-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.78) contrast(1.02);
  transform: scale(1);
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1), filter 0.65s ease;
}

.journal-panel.is-active .journal-img {
  filter: brightness(0.96) contrast(1.02);
  transform: scale(1.035);
}

/* ── Scrim (Warm Editorial Gradient Overlay) ── */
.journal-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(14, 14, 15, 0.08) 0%,
    rgba(14, 14, 15, 0.22) 42%,
    rgba(14, 14, 15, 0.88) 100%
  );
  pointer-events: none;
  transition: opacity 0.5s ease;
}

.journal-panel.is-active .journal-scrim {
  background: linear-gradient(
    180deg,
    rgba(14, 14, 15, 0.04) 0%,
    rgba(14, 14, 15, 0.18) 40%,
    rgba(14, 14, 15, 0.90) 100%
  );
}

/* ── Inactive Collapsed Label (Desktop vertical presentation) ── */
.journal-collapsed-label {
  position: absolute;
  bottom: clamp(1.75rem, 3vw, 2.75rem);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.35s ease 0.1s, transform 0.4s ease;
  z-index: 2;
  white-space: nowrap;
}

.journal-panel.is-active .journal-collapsed-label {
  opacity: 0;
  transform: translateX(-50%) translateY(14px);
  pointer-events: none;
}

.journal-collapsed-num {
  font-family: var(--font-display, "SF Pro Display", sans-serif);
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  color: var(--gold-light, #CDB57A);
  font-weight: 500;
}

.journal-collapsed-text {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  text-transform: uppercase;
  font-family: var(--font-display, "SF Pro Display", sans-serif);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  color: rgba(255, 255, 255, 0.82);
  font-weight: 400;
}

/* ── Active Expanded Content ── */
.journal-expanded-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(1.75rem, 3.8vw, 3.25rem);
  z-index: 3;
  opacity: 0;
  transform: translateY(18px);
  pointer-events: none;
  transition: opacity 0.55s ease 0.15s, transform 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.15s;
}

.journal-panel.is-active .journal-expanded-content {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.journal-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: clamp(0.45rem, 0.8vw, 0.7rem);
}

.journal-num {
  font-family: var(--font-display, "SF Pro Display", sans-serif);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--gold-light, #CDB57A);
  letter-spacing: 0.12em;
}

.journal-sep {
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.75rem;
}

.journal-tag {
  font-family: var(--font-display, "SF Pro Display", sans-serif);
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.9);
}

.journal-panel-title {
  font-family: var(--font-display, -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", sans-serif);
  font-size: clamp(1.75rem, 2.7vw, 2.85rem);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.018em;
  color: #FFFFFF;
  margin: 0 0 clamp(0.5rem, 0.9vw, 0.85rem);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.3);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.journal-panel-desc {
  font-family: var(--font-body, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", sans-serif);
  font-size: clamp(0.85rem, 0.98vw, 1rem);
  font-weight: 400;
  line-height: 1.62;
  letter-spacing: -0.005em;
  color: rgba(255, 255, 255, 0.85);
  max-width: 480px;
  margin: 0 0 clamp(1.1rem, 1.8vw, 1.6rem);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.journal-action {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-body, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", sans-serif);
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #FFFFFF;
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: border-color 0.3s ease, color 0.3s ease, gap 0.3s ease;
  width: fit-content;
}

.journal-action:hover {
  border-color: var(--gold-light, #CDB57A);
  color: var(--gold-light, #CDB57A);
  gap: 13px;
}

.journal-action svg {
  transition: transform 0.3s ease;
}

.journal-action:hover svg {
  transform: translateX(3px);
}

/* ── Mobile Navigation Pills ── */
.journal-nav-pills {
  display: none;
}

/* ── Tablet & Mobile Responsiveness ── */
@media (max-width: 1024px) {
  .journal-gallery {
    height: clamp(480px, 58vh, 580px);
  }

  .journal-panel.is-active {
    flex: 4.2 1 0%;
  }

  .journal-panel-title {
    font-size: clamp(1.5rem, 2.4vw, 2.2rem);
  }
}

@media (max-width: 768px) {
  .visual-journal {
    padding-block: clamp(3rem, 7vw, 4rem);
  }

  .journal-header {
    margin-bottom: 2rem;
  }

  .journal-gallery {
    height: 480px;
    gap: 6px;
  }

  .journal-panel {
    border-radius: 3px;
  }

  .journal-panel.is-active {
    flex: 4 1 0%;
  }

  .journal-panel:not(.is-active) {
    flex: 0.95 1 0%;
  }

  .journal-expanded-content {
    padding: 1.5rem 1.25rem;
  }

  .journal-panel-title {
    font-size: 1.45rem;
  }

  .journal-panel-desc {
    font-size: 0.85rem;
    margin-bottom: 1rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .journal-collapsed-label {
    bottom: 1.25rem;
    gap: 8px;
  }

  .journal-collapsed-num {
    font-size: 0.72rem;
  }

  .journal-collapsed-text {
    font-size: 0.65rem;
    letter-spacing: 0.16em;
  }

  /* Mobile pill selector */
  .journal-nav-pills {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 1.25rem 0 0.25rem;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
  }

  .journal-nav-pills::-webkit-scrollbar {
    display: none;
  }

  .journal-pill {
    flex-shrink: 0;
    background: transparent;
    border: 1px solid var(--border-mid, rgba(28,28,30,0.14));
    padding: 6px 14px;
    border-radius: 9999px;
    font-family: var(--font-display, "SF Pro Display", sans-serif);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    color: var(--charcoal-dim, #6E6E73);
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
  }

  .journal-pill.is-active {
    background: var(--charcoal, #1C1C1E);
    color: #FFFFFF;
    border-color: var(--charcoal, #1C1C1E);
  }
}

@media (max-width: 480px) {
  .journal-gallery {
    height: 440px;
    gap: 5px;
  }

  .journal-panel:not(.is-active) .journal-collapsed-text {
    display: none; /* Show number only on very narrow screens for clean layout */
  }

  .journal-panel:not(.is-active) .journal-collapsed-label {
    bottom: 1.2rem;
  }
}

/* ── Accessibility & Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
  .journal-panel,
  .journal-img,
  .journal-scrim,
  .journal-expanded-content,
  .journal-collapsed-label {
    transition-duration: 0.01ms !important;
  }
}

/* =====================================================
   Thumbnail carousel replacement
   ===================================================== */
.journal-gallery-wrap > .journal-gallery,
.journal-gallery-wrap > .journal-nav-pills {
  display: none;
}

.domus-carousel {
  max-width: 1440px;
  margin: 0 auto;
  overflow: hidden;
}

.domus-carousel__viewport {
  position: relative;
  width: min(100%, 63vh);
  height: auto;
  aspect-ratio: 4 / 5;
  margin-inline: auto;
  overflow: hidden;
  border-radius: var(--radius-lg, 12px);
  background: #161617;
}

.domus-carousel__track {
  display: flex;
  height: 100%;
  will-change: transform;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.domus-carousel__slide {
  flex: 0 0 100%;
  min-width: 0;
  display: grid;
  place-items: center;
  position: relative;
  background: #1a1917;
  isolation: isolate;
}

/* The complete image is preserved while its softened duplicate fills any aspect-ratio space. */
.domus-carousel__slide::before {
  content: '';
  position: absolute;
  inset: -2rem;
  z-index: 0;
  background: var(--journal-slide-image) center / cover no-repeat;
  filter: blur(22px) brightness(.66);
  transform: scale(1.08);
}
.domus-carousel__slide img { position: relative; z-index: 1; width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain !important; display: block; }
.domus-carousel__thumbnail img { width: 100%; height: 100%; object-fit: cover; display: block; }

.domus-carousel__arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 3.75rem;
  height: 3.75rem;
  border: 0;
  border-radius: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,.78);
  color: var(--charcoal, #1C1C1E);
  font-size: 1.8rem;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
  transition: background .25s ease, transform .25s ease;
}
.domus-carousel__arrow:hover { background: #fff; transform: translateY(-50%) scale(1.07); }
.domus-carousel__arrow:focus-visible,
.domus-carousel__thumbnail:focus-visible { outline: 2px solid var(--gold, #B89A5C); outline-offset: 3px; }
.domus-carousel__arrow--prev { left: clamp(1rem, 2vw, 1.75rem); }
.domus-carousel__arrow--next { right: clamp(1rem, 2vw, 1.75rem); }

.domus-carousel__counter {
  position: absolute;
  z-index: 2;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  padding: .38rem .8rem;
  border-radius: 999px;
  background: rgba(12,12,13,.62);
  color: #fff;
  font-family: var(--font-mono, sans-serif);
  font-size: .72rem;
  letter-spacing: .12em;
}

.domus-carousel__thumbnails {
  display: flex;
  gap: 3px;
  overflow-x: auto;
  padding: 1rem 0 .15rem;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
}
.domus-carousel__thumbnails::-webkit-scrollbar { display: none; }
.domus-carousel__thumbnail {
  flex: 0 0 52px;
  width: 52px;
  height: 4.5rem;
  padding: 0;
  border: 0;
  border-radius: 5px;
  overflow: hidden;
  opacity: .72;
  cursor: pointer;
  background: #161617;
  transition: flex-basis .3s ease, width .3s ease, opacity .3s ease;
}
.domus-carousel__thumbnail:hover { opacity: 1; }
.domus-carousel__thumbnail.is-active { flex-basis: 150px; width: 150px; opacity: 1; }

@media (max-width: 768px) {
  .domus-carousel__viewport { width: min(100%, 63vh); height: auto; aspect-ratio: 4 / 5; border-radius: 10px; }
  .domus-carousel__arrow { width: 2.8rem; height: 2.8rem; font-size: 1.4rem; }
  .domus-carousel__counter { bottom: 1rem; }
  .domus-carousel__thumbnail { height: 4.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .domus-carousel__track,
  .domus-carousel__arrow,
  .domus-carousel__thumbnail { transition-duration: .01ms; }
}

/* Visual Journal — framed image carousel with adjacent-image peeks. */
.domus-carousel {
  width: min(100%, 1100px);
  overflow: visible;
}

.domus-carousel__viewport {
  width: 100%;
  height: clamp(560px, 50vw, 700px);
  aspect-ratio: auto;
  margin: 0;
  overflow: visible;
  background: transparent;
  border-radius: 0;
}

.domus-carousel__track {
  position: relative;
  display: block;
  overflow: visible;
  transition: none;
}

.domus-carousel__slide {
  position: absolute;
  top: 0;
  left: 50%;
  width: clamp(340px, 38vw, 560px);
  height: 100%;
  overflow: hidden;
  border-radius: var(--radius-lg, 12px);
  opacity: 0;
  pointer-events: none;
  transform: translateX(calc(-50% + var(--journal-slide-offset, 0px))) scale(.9);
  transition: transform .65s cubic-bezier(.16, 1, .3, 1), opacity .5s ease, filter .5s ease;
}

.domus-carousel__slide.is-current {
  z-index: 2;
  opacity: 1;
  transform: translateX(calc(-50% + var(--journal-slide-offset, 0px))) scale(1);
}

.domus-carousel__slide.is-neighbour {
  z-index: 1;
  opacity: .42;
  filter: saturate(.8);
}

.domus-carousel__slide img { object-fit: contain !important; object-position: center !important; }
.domus-carousel__slide::before { display: none; }

.domus-carousel__thumbnails { display: none; }
.domus-carousel__counter { bottom: 1.25rem; z-index: 4; }
.domus-carousel__arrow { z-index: 5; }
.domus-carousel__arrow--prev { left: max(1rem, calc(50% - min(28vw, 25rem))); }
.domus-carousel__arrow--next { right: max(1rem, calc(50% - min(28vw, 25rem))); }

@media (max-width: 768px) {
  .domus-carousel__viewport { height: clamp(440px, 120vw, 620px); }
  .domus-carousel__slide { width: min(76vw, 420px); border-radius: 10px; }
  .domus-carousel__arrow--prev { left: .6rem; }
  .domus-carousel__arrow--next { right: .6rem; }
}

/* Match the project pages' Curated Amenities stacked-carousel composition. */
.domus-carousel { width: 100%; max-width: none; }
.domus-carousel__viewport { height: clamp(460px, 60vh, 620px); }
.domus-carousel__slide {
  width: auto;
  height: clamp(440px, 56vh, 600px);
  aspect-ratio: 2400 / 3172;
  top: 50%;
  transform: translate(-50%, -50%) scale(.76);
  border-radius: clamp(14px, 1.4vw, 18px);
}
.domus-carousel__slide::before { display: block; }
.domus-carousel__slide.is-current {
  transform: translate(-50%, -50%) scale(1);
  box-shadow: 0 24px 64px -12px rgba(17,17,19,.18), 0 10px 24px -6px rgba(17,17,19,.08);
}
.domus-carousel__slide.is-prev {
  transform: translate3d(calc(-50% - clamp(135px, 15vw, 260px)), calc(-50% + 12px), 0) scale(.88) rotate(-4.5deg);
  opacity: .6;
  filter: brightness(.94);
}
.domus-carousel__slide.is-next {
  transform: translate3d(calc(-50% + clamp(135px, 15vw, 260px)), calc(-50% + 12px), 0) scale(.88) rotate(4.5deg);
  opacity: .6;
  filter: brightness(.94);
}
.domus-carousel__arrow--prev { left: clamp(1rem, 18vw, 22rem); }
.domus-carousel__arrow--next { right: clamp(1rem, 18vw, 22rem); }

@media (max-width: 768px) {
  .domus-carousel__viewport { height: clamp(420px, 108vw, 540px); }
  .domus-carousel__slide { width: auto; height: min(100vw, 520px); aspect-ratio: 2400 / 3172; }
  .domus-carousel__slide.is-prev { transform: translate3d(calc(-50% - 80px), calc(-50% + 8px), 0) scale(.86) rotate(-3deg); }
  .domus-carousel__slide.is-next { transform: translate3d(calc(-50% + 80px), calc(-50% + 8px), 0) scale(.86) rotate(3deg); }
  .domus-carousel__arrow--prev { left: .75rem; }
  .domus-carousel__arrow--next { right: .75rem; }
}