/* ==========================================================
   Demo — Public Home Page Styles
   ========================================================== */
/* Full-bleed helper */
.full-bleed {
  position:relative;width:100vw;max-width:100vw;left:50%;right:50%;
  margin-left:-50vw;margin-right:-50vw;
}
@supports (width:100dvw){
  .full-bleed{width:100dvw;max-width:100dvw;margin-left:-50dvw;margin-right:-50dvw}
}

/* Hero background with zoom & left offset (keeps cover) */
.home-main {
  margin: 0;
  padding: 0;
  margin-top: var(--nav-height);
}

.home-background {
  position: relative;
  height: calc((100vh - var(--nav-height)) * 0.66);
  background: #ffffff;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
}
.home-background::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--home-bg-image, url('/tenants/demo/images/home-background.webp')) no-repeat;
  background-position: calc(50% - 50px) var(--bg-pin, bottom);
  background-size: cover;
  transform: scale(1.1);
  transform-origin: var(--bg-pin, bottom) center;
  z-index: 0;
  transition: transform 0.4s ease-out;
}


/* Responsive zoom for home background */
@media (max-width: 1100px) {
  .home-background::before { transform: scale(1.2); }
}
@media (max-width: 600px) {
  .home-background::before { transform: scale(1.5); }
}

/* keep content above image */
.home-content, .background-overlay, .home-buttons {
  position: relative; z-index: 2;
}

/* gradient overlay (configurable height and color) */
.background-overlay{
  position:absolute;inset:0 auto auto 0;width:100%;
  height:calc((100vh - var(--nav-height)) * var(--overlay-height, .33));
  background:linear-gradient(to bottom,rgba(var(--overlay-color-rgb, 255, 255, 255),1),rgba(var(--overlay-color-rgb, 255, 255, 255),0));
  pointer-events:none;z-index:1
}


/* hero text at top-left */
.home-content {
  position: relative;
  max-width: 800px;
  color: #000;
  text-align: left;
  padding: 30px 40px;
}

/* Heading */
.home-heading {
  font-family: 'Times New Roman', Times, serif;
  font-weight: 400;
  line-height: 0.9;
  color: #000;
  margin: 0 0 10px;
  text-align: left;
  font-size: clamp(3rem, 8vw, 4.25rem);
}
.home-heading .highlight-brand { color: var(--c-brand); }

.home-buttons {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  gap: 16px;
  width: 100%;
  z-index: 3;
}

.home-buttons .btn{
    flex:none;
    width:260px;
}

@media (max-width:550px){
  .home-buttons{flex-direction:column;gap:14px;max-width:90%}
  .home-buttons .btn{flex:none;width:100%;max-width:none}
}


/* Main block */
.main-block {
  height: calc((100vh - var(--nav-height)) * 0.34);
  background:
    linear-gradient(color-mix(in srgb, var(--c-brand) 96%, transparent), color-mix(in srgb, var(--c-accent) 96%, transparent)),
    var(--main-block-bg-image, url('/tenants/demo/images/main-block-background.webp')) no-repeat center center;
  background-size: cover;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow: hidden;
  position: relative;
}
.main-block-content {
  position: relative;
  z-index: 2;
  max-width: 1100px;
  padding: 60px 30px;
  color: #fff;
  text-align: center;
  margin: 0 auto;
}
.main-block-content h2{
  font-family: 'Times New Roman', Times, serif;
  font-weight: 400; line-height:1.1; margin:0 0 20px; color:#fff;
  font-size: clamp(1.2rem, 4vw, 3rem);
}
.main-block-content p{
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height: 1.6;
  max-width: 1000px;
  margin: 0 auto;
  font-size: clamp(.7rem, 3vw, 1.3rem);
  color: #fff;
}