/* ==========================================================================
   Inner-page header band — sits directly under the sticky site header on
   every page that isn't the homepage: page title + a breadcrumb trail so a
   visitor always knows where they landed. Deliberately slim (no hero-scale
   imagery here, that's each page's own job) and closed off by the same
   gradient hairline device used between homepage sections, so it reads as
   part of the same family rather than a bolted-on banner.
   ========================================================================== */

.page-header {
  position: relative;
  padding-block: var(--space-6);
  background: var(--color-bg);
  /* The whole band — page title and breadcrumb trail — is wayfinding
     chrome, not readable content, so none of it is selectable. */
  -webkit-user-select: none;
  user-select: none;
}

.page-header::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(91, 42, 134, 0.5),
    rgba(255, 122, 26, 0.5),
    transparent
  );
}

.page-header__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-8);
  flex-wrap: wrap;
}

/* flex: 1 1 auto + min-width: 0 lets this shrink below its text's natural
   width instead of forcing the row to wrap — the ellipsis truncates a
   long post title onto one line instead of it wrapping to a second line
   and pushing the page-header (and everything below it) down. */
.page-header__title {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 720px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: clamp(19px, 1.8vw, 22px);
}

.page-header__crumbs {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-small);
  color: var(--color-text-faint);
  flex-wrap: wrap;
}

.page-header__crumb {
  color: var(--color-text-faint);
  transition: color var(--duration-fast) var(--ease-standard);
}

.page-header__crumb:hover {
  color: var(--color-text);
}

/* min-width: 0 lets this flex item actually shrink below its text's
   natural width (flex items default to min-width: auto, which would
   otherwise block the ellipsis truncation below and let a long post
   title wrap the whole breadcrumb row onto a second line, pushing the
   page-header — and everything below it — down). */
.page-header__crumb[aria-current="page"] {
  min-width: 0;
  max-width: 200px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--color-text-muted);
  pointer-events: none;
}

.page-header__crumb-sep {
  color: rgba(246, 241, 232, 0.24);
}

/* On phones the row stacks: the title is allowed to wrap to two lines
   (clamped) instead of hard-truncating to one, and the breadcrumb drops
   below it. */
@media (max-width: 767px) {
  .page-header {
    padding-block: var(--space-5);
  }

  .page-header__inner {
    gap: var(--space-3);
  }

  .page-header__title {
    flex-basis: 100%;
    max-width: 100%;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
}

/* Mobile: halve the (large) breathing room on inner-page content — the gap
   from the breadcrumb band down to the content, and from the content down
   to the footer (var(--space-16) -> var(--space-8)). `body.inner` beats the
   single-class section rules in each page's own stylesheet regardless of
   load order. Homepage has no page-header band, so it's untouched. */
@media (max-width: 767px) {
  body.inner .works,
  body.inner .shop,
  body.inner .blog,
  body.inner .contacts,
  body.inner .services-details,
  body.inner .legal,
  body.inner .article {
    padding-top: var(--space-8);
    padding-bottom: var(--space-8);
  }
  body.inner .about-story {
    padding-top: var(--space-8);
  }
  body.inner .about-cta {
    padding-bottom: var(--space-8);
  }
}