/* ==========================================================================
   The House — page-specific touches.
   The bulk of the layout comes from /patterns.css; this only adds rhythm.
   ========================================================================== */

/* Track height is set dynamically by JS once the image loads */
.lbv-house-hero-track {
  height: 200vh; /* fallback before JS runs */
}

/* Hero sticks to the top of the viewport for the duration of the track */
.lbv-house-hero-track .lbv-hero {
  background: var(--ink);
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: unset;
  overflow: hidden;
  align-items: center; /* keep caption fully visible — not pushed to the bottom edge */
}

@media (max-width: 720px) {
  .lbv-house-hero-track .lbv-hero {
    align-items: flex-start;
  }

  .lbv-hero__caption {
    padding-block: clamp(8px, 3vw, 40px);
  }
}

/* Media container stays full-size so the veil remains in place */
.lbv-house-hero-track .lbv-hero .lbv-hero__media {
  overflow: hidden;
}

/* Image at natural proportions — full width, height auto so we see the whole photo */
.lbv-house-hero-track .lbv-hero .lbv-hero__media img {
  width: 100%;
  height: auto;
  object-fit: unset;
  display: block;
  will-change: transform;
}

:is(.page-template-template-house, .page-template-template-house-minimal) .lbv-hero .lbv-stack__display {
  font-style: italic;
}

:is(.page-template-template-house, .page-template-template-house-minimal) .lbv-block + .lbv-block {
  border-top: 1px solid var(--rule);
}

/* Minimal House: single canvas — no banding lines between sections */
.page-template-template-house-minimal .lbv-block + .lbv-block {
  border-top: none;
}

:is(.page-template-template-house, .page-template-template-house-minimal) .lbv-block .btn--ghost {
  margin-top: 12px;
}

:is(.page-template-template-house, .page-template-template-house-minimal) .lbv-quote {
  background: var(--ink);
  color: var(--gold);
}
:is(.page-template-template-house, .page-template-template-house-minimal) .lbv-quote::before,
:is(.page-template-template-house, .page-template-template-house-minimal) .lbv-quote::after {
  background: rgba(212, 175, 55, 0.4);
}

/* ---------- Image depth — editorial blocks ----------
   Warm-toned three-layer shadow. The amber undertone in the shadow
   colour ties into the ivory/gold palette without reading as grey.
   ========================================================================== */
:is(.page-template-template-house, .page-template-template-house-minimal) .lbv-block__media {
  box-shadow:
    0  2px  6px  rgba(40, 24,  6, 0.07),
    0  8px  28px rgba(40, 24,  6, 0.13),
    0 28px  72px rgba(40, 24,  6, 0.10);
}

#inspired-by-grandma .lbv-block__media img {
  aspect-ratio: initial;
}

/* ---------- Image depth — collections grid ---------- */
.page-template-template-house .lbv-collection-card__media {
  box-shadow:
    0  2px  5px  rgba(40, 24,  6, 0.07),
    0  6px  20px rgba(40, 24,  6, 0.12),
    0 18px  44px rgba(40, 24,  6, 0.09);
  transition: box-shadow var(--dur-slow) var(--ease);
}

/* Shadow lifts on hover to reinforce the existing scale effect */
.page-template-template-house .lbv-collection-card__link:hover .lbv-collection-card__media {
  box-shadow:
    0  4px  10px rgba(40, 24,  6, 0.10),
    0 12px  36px rgba(40, 24,  6, 0.17),
    0 28px  60px rgba(40, 24,  6, 0.13);
}

/* ---------- House Minimal — scroll reveal (parallax-adjacent editorial motion) ---------- */
.page-template-template-house-minimal [data-lbv-house-minimal-scroll] > .lbv-scroll-reveal {
  --lbv-reveal-y: clamp(1.25rem, 3.5vw, 2.75rem);
  opacity: 0;
  transform: translate3d(0, var(--lbv-reveal-y), 0) scale(0.985);
  transition:
    opacity 1.05s var(--ease, cubic-bezier(0.2, 0.6, 0.2, 1)),
    transform 1.05s var(--ease, cubic-bezier(0.2, 0.6, 0.2, 1));
  will-change: opacity, transform;
}

.page-template-template-house-minimal [data-lbv-house-minimal-scroll] > .lbv-scroll-reveal.is-revealed {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
  .page-template-template-house-minimal [data-lbv-house-minimal-scroll] > .lbv-scroll-reveal {
    opacity: 1;
    transform: none;
    transition: none;
    will-change: auto;
  }
}