/* Full-bleed colored band */
.page-hero {
  background: var(--hero-bg, #0b7a74); /* outer color from ACF */
  width: 100%;
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
}

/* Centered 1240px container with fixed height */
.page-hero__inner {
  max-width: 100%;
  margin: 0 auto;
  height: 400px;
  position: relative;

  /* new: flex layout to push content to bottom */
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  background-image: var(--hero-img);
  background-repeat: no-repeat;
  background-position: right center;
  background-size: cover;
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
}

/* Left-aligned title + accent */
.page-hero__content {
  width: 1240px;
  margin: 0 auto 60px;
  display: flex;
  flex-direction: column;
  margin-bottom: 60px;
}

/* Inherit your site typography; tweak if needed */
.page-hero__title {
  color: #fff;
  margin: 0;
}

/* Accent line under title – reuse your .accent rules or: */
.page-hero__content .accent {
  width: 96px;
  height: 6px;
  background-image: url("../img/accents/aboutsidebars.svg"); /* adjust path if needed */
  background-repeat: no-repeat;
  background-size: contain;
  display: inline-block;
}

.accent {
  margin-top: 10px;
  display: inline-block;
  width: 129px; /* adjust size */
  height: 8px;
  background-image: url("../img/accents/aboutsidebars.svg");
  background-repeat: no-repeat;
  background-size: contain; /* or 'cover', depending on your art */
  background-position: left center;
}

.page-hero--plain .page-hero__inner {
  padding: 0; /* no inset padding when there’s no text */
  background-position: center center;
  background-size: cover; /* for KR header we usually want a full bleed crop */
}

@media (max-width: 980px) {
  .page-hero__inner {
    width: 100%;
    height: 320px;
    align-items: flex-start;
  }

  .page-hero__content {
    width: 100%;
    margin: 40px 0 0 0;
  }

  .page-hero__content .accent {
    display: none !important;
  }

  .page-hero__title {
    width: fit-content !important;
    color: #fff;
    padding: 0 24px;
  }
}
@media (max-width: 640px) {
  .page-hero__inner {
    max-width: 100%;
    margin: 0 auto;
    height: 400px;
    position: relative;

    /* new: flex layout to push content to bottom */
    display: flex;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    background-image: var(--hero-img);
    background-repeat: no-repeat;
    background-position: left center !important;
    background-size: cover;
  }

  .page-hero__content {
    width: 100%;
    margin: 40px 0 0 0;
  }

  h2.page-hero__title {
    color: black !important;
    margin: 0;
    text-align: left !important;
  }
}