/*
 * 5UWebsite.com — Page Title Banner + Breadcrumb bar
 * Pale-blue overlay over a right-aligned decorative cartoon image.
 * Source: legacy /media/com_sppagebuilder/css/page-234.css extracted values.
 * Depends on: tokens.css, base.css
 */

.page-title-banner {
  position: relative;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 100% 50%;     /* image hugs right edge */
  background-color: var(--color-brand-pale);
  padding-top: 90px;
  padding-bottom: 90px;
  height: 466px;                   /* legacy max-height when content fits */
  color: #4a4a4a;
  overflow: hidden;
  display: flex;
  align-items: center;             /* vertical-center the content (matches sppb-align-items-center) */
  box-sizing: border-box;
}

/* Pale-blue overlay with 80% opacity sits between background image and content */
.page-title-banner__overlay {
  position: absolute;
  inset: 0;
  background: var(--color-brand-pale-rgba);
  z-index: 1;
  pointer-events: none;
}

.page-title-banner__inner {
  position: relative;
  z-index: 2;
  text-align: left;
  width: 100%;
}

.page-title-banner__heading {
  font-family: "Noto Sans SC", var(--font-sans);
  font-size: 52px;
  font-weight: 700;
  line-height: 76px;
  margin-bottom: 50px;
  color: var(--color-text-blog-h2);
  max-width: 60%;
}

.page-title-banner__lead {
  font-family: "Noto Sans SC", var(--font-sans);
  font-size: 26px;
  font-weight: 500;
  line-height: 34px;
  color: var(--color-text-blog-h2);
  max-width: 60%;
}
.page-title-banner__lead p { margin: 0; }

/* Variants: each named class shifts the right-positioned bg image because
   different banner illustrations have different focal points. */
.banner-marketing,
.banner-faq        { background-position: 94% 50%; }
.banner-ecommerce,
.banner-realtor    { background-position: 90% 50%; }
.banner-customize,
.banner-payment    { background-position: 84% 50%; }

/* Breadcrumb strip below banner (separate <section>) */
.page-breadcrumb-bar {
  border-bottom: 1px solid var(--color-border-subtle);
  padding: 10px 0;
  background: #fff;
}
.page-breadcrumb-bar .breadcrumb {
  background: transparent;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  list-style: none;
  font-size: 14px;
  color: #777;
}
.page-breadcrumb-bar .breadcrumb-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.page-breadcrumb-bar .breadcrumb-item + .breadcrumb-item::before {
  content: "/";
  color: #999;
  margin-right: 4px;
}
.page-breadcrumb-bar .breadcrumb-item.active {
  color: var(--color-brand);
  font-weight: 500;
}
.page-breadcrumb-bar .breadcrumb a {
  color: #777;
}
.page-breadcrumb-bar .breadcrumb a:hover {
  color: var(--color-brand);
}
.page-breadcrumb-bar .breadcrumb .fa-home::before {
  /* Inline replacement for FA glyph until icon font is loaded */
  content: "\1F3E0";
  font-size: 14px;
}

/* ============ Responsive ============ */
@media (max-width: 1199.98px) {
  .page-title-banner { padding-top: 150px; padding-bottom: 150px; height: auto; }
  .page-title-banner__lead { font-size: 20px; line-height: 24px; }
}

@media (max-width: 991.98px) {
  .page-title-banner { padding-top: 150px; padding-bottom: 150px; height: auto; }
  .page-title-banner__heading { font-size: 42px; line-height: 60px; max-width: 100%; }
  .page-title-banner__lead { max-width: 100%; }
}

@media (max-width: 767.98px) {
  .page-title-banner {
    padding-top: 30px;
    padding-bottom: 30px;
    height: auto;
    background-position: 99% 50% !important;
  }
  .page-title-banner__heading { font-size: 31px; line-height: 52px; margin-bottom: 30px; }
  .page-title-banner__lead { font-size: 18px; line-height: 34px; }
}