/* ==========================================================================
   Riviera Theme – CSS Parallax Text + Image Block (namespaced)
   ========================================================================== */

/* --- Block wrapper --- */
.block-txt-img-parallax {
  position: relative;
  overflow: hidden;
  color: #fff;
  background: #000;
  /* fallback if no image */
  min-height: 600px;
  /* fallback if field not set */
}



/* --- Background layer with parallax effect --- */
.overlay-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  /* true parallax */
  will-change: background-position;
  transition: background-position 0.3s ease-out;
  min-height: inherit;
  /* use inline min-height from Twig */
}

/* --- Color tint overlay --- */
.overlay-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--overlay-color, rgba(0, 0, 0, 0.5));
  opacity: var(--overlay-opacity, 0.5);
  pointer-events: none;
  z-index: 1;
}

/* --- Content area --- */
.parallax-content {
  position: relative;
  z-index: 2;


  /* Flex for vertical centering */
  display: flex;
  align-items: center;
  justify-content: center;

  min-height: inherit;
  /* matches overlay height */
  padding: 4rem 0;
}

/* --- Inner wrapper (max width) --- */
.parallax-inner-wrapper {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 70px 50px 70px 50px;
  background-color: rgba(0, 0, 0, 0.5);
}

/* --- Bootstrap row alignment --- */
.parallax-content .row {

  align-items: center;
  /* vertical align within row */
}

/* --- Text column --- */
.parallax-text-column {
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* vertical centering */
}

.parallax-text-wrapper {
  color: #fff;
  line-height: 1.7;
  padding: 1rem 0;
  max-width: 600px;
}


.block-txt-img-parallax p,
.parallax-text-wrapper h2,
.parallax-text-wrapper h3,
.parallax-text-wrapper h4 {
  color: var(--offwhite);
  margin-bottom: 1rem;
}



/* --- Image column --- */
.parallax-image-column {
  display: flex;
  align-items: center;
  justify-content: center;
}

.parallax-image-wrapper {
  text-align: center;
}

.parallax-image-wrapper img {
  max-width: 100%;
  height: auto;
}

/* --- Reverse layout text alignment --- */
.flex-row-reverse .parallax-text-wrapper {
  text-align: left;
}

.flex-row-reverse .parallax-image-wrapper {
  text-align: left;
}


#block-riviera-counsellingprocess,
#about-me-block,
#block-riviera-freeintroductorysession,
#block-riviera-contactwebform {
  scroll-margin-top: 100px;
  /* match your header height */
}


/* --- Responsive adjustments --- */
@media (max-width: 991px) {
  .block-txt-img-parallax {
    min-height: 450px;
  }

  .parallax-content {
    display: block;
    /* disable flex on mobile for stacking */
    padding: 2rem 0;
  }

  .overlay-bg {
    background-attachment: scroll;
    /* iOS fallback */
    background-position: center center;
  }

  .parallax-text-wrapper {
    text-align: left;
  }

  .parallax-image-column {
    margin-top: 1rem;
  }
}

/* --- Accessibility: reduce motion preference --- */
@media (prefers-reduced-motion: reduce) {
  .overlay-bg {
    transition: none !important;
    will-change: auto !important;
  }
}

/* --- Optional debug helper --- */
/*
.overlay-bg { outline: 2px dashed red; }
*/


html body .parallax-inner-wrapper .row>div {
  flex: 1 1 50%;
}



/* Prevent fixed backgrounds from escaping containers */
.block-txt-img-parallax .overlay-bg {
  background-attachment: scroll;
  background-position: center center;
}

@supports (background-attachment: fixed) {
  html:not(.toolbar-tray-open) .block-txt-img-parallax .overlay-bg {
    background-attachment: fixed;
  }
}



@media (max-width: 768px) {
  .block-content-image .image-column img {
    margin: 0px;
  }

  /* --- Inner wrapper (max width) --- */
  .parallax-inner-wrapper {
    width: 100%;
    padding: 40px 10px 40px 10px;
  }

  html body .parallax-inner-wrapper .row>div {
    flex: 1 1 100%;
  }

  .parallax-text-wrapper {
    max-width: 100%;
    text-align: center;
  }

  .parallax-image-wrapper img {
    /* padding: 20px; */
  }

  .block-txt-img-parallax p {
    text-align: center;
  }



  #block-riviera-counsellingprocess .overlay-bg {
    background-attachment: fixed;
    background-position: bottom center;
    background-attachment: scroll;
    background-position: center;
  }

  #block-riviera-contactwebform .overlay-bg {
    background-attachment: scroll;
    background-size: cover;

  }

  #block-riviera-counsellingprocess h2,
  #block-riviera-crewcounselling h2 {
    text-align: center;
  }


}