/* Longridge House: Flexible Hero Banner Caption Builder */
.banner--caption-builder {
  position: relative;
  min-height: clamp(560px, calc(100svh - 74px), 900px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding-inline: 20px;
}

.banner--caption-builder::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(20, 22, 20, .18), rgba(20, 22, 20, .42));
}

.banner--caption-builder .banner__bg,
.banner--caption-builder .banner__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.banner--caption-upper {
  align-items: flex-start;
  padding-top: clamp(80px, 13vh, 150px);
}

.banner--caption-lower {
  align-items: flex-end;
  padding-bottom: clamp(76px, 10vh, 130px);
}

.banner-caption {
  --caption-colour: #f5f0e8;
  --caption-accent: #bd8068;
  position: relative;
  z-index: 2;
  width: 100%;
  margin-inline: auto;
  color: var(--caption-colour);
  text-wrap: balance;
}

.banner-caption--dark {
  --caption-colour: #292b28;
  --caption-accent: #a8664f;
}

.banner-caption--narrow { max-width: 580px; }
.banner-caption--standard { max-width: 760px; }
.banner-caption--wide { max-width: 940px; }

.banner-caption--align-left { text-align: left; }
.banner-caption--align-centre { text-align: center; }
.banner-caption--align-right { text-align: right; }

.banner-caption__composition {
  display: flex;
  flex-direction: column;
  align-items: inherit;
  gap: clamp(7px, .8vw, 13px);
  margin: 0;
  color: inherit;
  font: inherit;
  text-transform: none;
}

.banner-caption--align-left .banner-caption__composition { align-items: flex-start; }
.banner-caption--align-centre .banner-caption__composition { align-items: center; }
.banner-caption--align-right .banner-caption__composition { align-items: flex-end; }

.banner-caption__line {
  display: block;
  max-width: 100%;
  margin: 0;
  line-height: 1.05;
  font-weight: 400;
}

.banner-caption__line--font-serif {
  font-family: Marcellus, Georgia, serif;
}

.banner-caption__line--font-sans {
  font-family: inherit;
}

.banner-caption__line--size-small {
  font-size: clamp(12px, 1.15vw, 17px);
  line-height: 1.3;
}

.banner-caption__line--size-medium {
  font-size: clamp(18px, 2vw, 28px);
  line-height: 1.35;
}

.banner-caption__line--size-large {
  font-size: clamp(34px, 4.25vw, 66px);
  line-height: 1.05;
}

.banner-caption__line--size-display {
  font-size: clamp(52px, 6.7vw, 104px);
  line-height: .98;
}

.banner-caption__line--spacing-normal { letter-spacing: .01em; }
.banner-caption__line--spacing-wide { letter-spacing: .08em; }
.banner-caption__line--spacing-extra-wide { letter-spacing: .34em; }
.banner-caption__line--uppercase { text-transform: uppercase; }

.banner-caption__divider {
  display: block;
  flex: 0 0 auto;
  height: 2px;
  margin-block: clamp(7px, .8vw, 13px);
  background: var(--caption-accent);
}

.banner-caption__divider--short { width: min(34%, 230px); }
.banner-caption__divider--medium { width: min(68%, 640px); }
.banner-caption__divider--wide { width: 100%; }

@media (max-width: 767px) {
  .banner--caption-builder {
    min-height: clamp(570px, calc(100svh - 76px), 760px);
    padding-inline: 22px;
  }

  .banner-caption {
    max-width: 520px;
  }

  .banner-caption__composition {
    gap: 7px;
  }

  .banner-caption__line--size-small {
    font-size: clamp(11px, 3.2vw, 14px);
  }

  .banner-caption__line--size-medium {
    font-size: clamp(18px, 5.2vw, 23px);
  }

  .banner-caption__line--size-large {
    font-size: clamp(30px, 9vw, 46px);
  }

  .banner-caption__line--size-display {
    font-size: clamp(42px, 13vw, 66px);
    line-height: 1.02;
  }

  .banner-caption__line--spacing-extra-wide {
    letter-spacing: .26em;
  }

  .banner-caption__divider {
    height: 1.5px;
    margin-block: 8px;
  }

  .banner--caption-upper {
    padding-top: 72px;
  }

  .banner--caption-lower {
    padding-bottom: 72px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .banner--caption-builder .banner__video { display: none; }
}