/* Journey Hero Section */

.journey-hero {
  position: relative;
  z-index: 8
}

/* Container with custom border radius */
.journey-hero .container {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.journey-hero__container {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-height: 400px;
  width: 100%;
}


@media (min-width: 768px) {
  .journey-hero__container {
    min-height: 450px;
  }
}

@media (min-width: 1024px) {
  .journey-hero__container {
    min-height: 500px;
  }
}

/* Custom border radius - per-corner control */
/* Border radius is controlled via inline styles using CSS variables */
/* --round-top-left, --round-top-right, --round-bottom-right, --round-bottom-left */
/* --overall-border-radius sets the base radius value */
/* Each corner checkbox enables/disables rounding for that specific corner */

/* Background Image Handling */
.journey-hero__container {
  position: relative;
  /* Background properties are controlled via inline styles */
}

/* Gradient Overlay - show when container has background image and overlay is enabled */
.journey-hero__container::after {
  content: "";
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  z-index: 1;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Show overlay when background image or color exists and overlay is not disabled */
.journey-hero__container[style*="background-image"]:not(.journey-hero__container--no-overlay)::after,
.journey-hero__container--has-color:not(.journey-hero__container--no-overlay)::after {
  opacity: 1;
}

/* Hide overlay when explicitly disabled */
.journey-hero__container--no-overlay::after {
  opacity: 0 !important;
}

/* Content Wrapper - handles side-by-side layout */
.journey-hero__content-wrapper {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: var(--space-lg);
  flex-shrink: 0;
}

@media (min-width: 1024px) {
  .journey-hero__content-wrapper--has-image {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0;
  }
  
  .journey-hero__content-wrapper--has-image .journey-hero__content {
    order: 2;
    align-self: center;
    /* Reset auto margins on desktop when image is present - let flexbox handle distribution */
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  .journey-hero__content-wrapper--has-image .journey-hero__image-wrapper--left {
    order: 1;
  }
  
  .journey-hero__content-wrapper--has-image .journey-hero__image-wrapper--right {
    order: 3;
  }
}

/* Content positioning */
.journey-hero__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;
  /* Responsive max-width using CSS custom properties */
  max-width: var(--content-width-mobile, 480px);
}

@media (min-width: 768px) {
  .journey-hero__content {
    max-width: var(--content-width-tablet, 600px);
  }
}

@media (min-width: 1024px) {
  .journey-hero__content {
    max-width: var(--content-width-desktop, 720px);
  }
}

/* Padding controlled by block settings utility classes */

@media (min-width: 1024px) {
  .journey-hero__content-wrapper--has-image .journey-hero__content {
    flex: 1;
    max-width: 50%;
  }
}

/* Content alignment */
.journey-hero__content.text-left {
  align-self: flex-start;
  margin-right: auto;
}

.journey-hero__content.text-center {
  align-self: center;
  margin-left: auto;
  margin-right: auto;
}

.journey-hero__content.text-right {
  align-self: flex-end;
  margin-left: auto;
}

/* Text Content */
.journey-hero__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* Heading */
.journey-hero__heading-wrapper {
  /* margin controlled by utility classes */
}

.journey-hero__heading {
  line-height: 1;
  /* white-space: pre-line; */

  /* Cap the display size to what this column can actually hold.

     The markup asks for `text-5xl lg:text-6xl` (52/64px), but this heading sits
     in the hero card's narrow left column, NOT across the page. Measured live at
     1440px: the column is 293px wide while the type is 64px — and the single word
     "Resolution" measures 303px, wider than the column it has to fit in. That is
     why "The Better Body Resolution Challenge" was breaking mid-word into
     "Resolutio / n" and "Challeng / e".

     At 42px the same word measures 199px and sits comfortably inside 293px, and
     42px is also the size this theme uses for a heading in a narrow column. The
     clamp keeps it fluid below that rather than snapping at a breakpoint. */
  font-size: clamp(32px, 3vw, var(--font-size-4xl)) !important;
}

@media (min-width: 1024px) {
  .journey-hero__heading {
    line-height: 1.1;
  }
}

/* Description */
.journey-hero__description-wrapper {
  /* margin controlled by utility classes */
}

.journey-hero__description {
  line-height: 1.5;
  /* white-space: pre-line; */
  /* Font weight is controlled by utility classes */
}

@media (min-width: 1024px) {
  .journey-hero__description {
    line-height: 1.6;
  }
}

/* Button Wrapper */
.journey-hero__button-wrapper {
  margin-top: 0;
  margin-bottom: 0;
}

/* No dark ring on the white button.

   This used to set `border-color: var(--clr-primary)`, painting a 2px #49473E
   stroke around a white pill sitting on the gold field. Measured live:
   `2px solid rgb(73, 71, 62)`. The white fill already has plenty of contrast
   against the gold, so the ring was only adding weight. Transparent rather than
   `border: none` so the button keeps its 2px box and does not shift size. */
.journey-hero__button-wrapper .btn-filled-white {
  border-color: transparent;
}

.journey-hero__button-wrapper .btn-filled-white:hover {
  border-color: transparent;
  background-color: var(--clr-white);
  opacity: 0.95;
}

/* Background Image Handling for Section */
.journey-hero[data-bg] {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Content Image */
.journey-hero__image-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

@media (min-width: 1024px) {
  .journey-hero__content-wrapper--has-image .journey-hero__image-wrapper {
    flex: none;
    width: var(--img-size-desktop, 50%);
    max-width: var(--img-size-desktop, 50%);
    align-self: center;
    height: auto;
  }
}

.journey-hero__image {
  width: 100%;
  height: auto;
  display: block;
  /* object-fit is controlled via inline style */
}

/* Ensure content stays above overlays */
.journey-hero__container > * {
  position: relative;
  z-index: 2;
}


/* Heading/description are richtext rendered into the BEM wrapper, which now
   carries the typography (editor-safe). The inner tag inherits so styling
   survives even after the WYSIWYG editor strips the inner tag's classes. */
.journey-hero__heading > *,
.journey-hero__description > * {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
  margin: 0 !important;
}

/* Vertically centre the text column against the image.

   Above 1024px `.journey-hero__content-wrapper--has-image` is a flex row with
   `align-items: center`, but `.journey-hero__content.text-left` then sets
   `align-self: flex-start`. Both selectors are 0-2-0, so source order decides and
   text-left wins — leaving the heading/description/button stack pinned to the top
   of the card while the image beside it is centred.

   `text-left` is about how the TEXT is aligned inside the column, not where the
   column sits in the row, so these three rules put the block back on the row's
   centre line at 0-3-0 while leaving text alignment alone. Scoped to the same
   breakpoint where the row exists — below it the wrapper is a column and
   align-self would start moving things horizontally instead. */
@media (min-width: 1024px) {
  .journey-hero__content-wrapper--has-image .journey-hero__content.text-left,
  .journey-hero__content-wrapper--has-image .journey-hero__content.text-center,
  .journey-hero__content-wrapper--has-image .journey-hero__content.text-right {
    align-self: center;
  }
}