/* ---------- Page header ----------
   Same design as the search page header: a compact band in the alternate
   background color with a flowing glow, text on the left, and an illustration
   anchored to the band's bottom-right corner that hangs a little below it. */
.page-header {
  position: relative;
  background-color: var(--page-header-bg, var(--color-bg-alt));
  overflow: hidden;
}

/* Fade into the next section: the band color melts into the page background */
.page-header--blend {
  background-color: transparent;
  background-image: linear-gradient(180deg, var(--page-header-bg, var(--color-bg-alt)) 45%, var(--color-bg));
}

/* More room at the bottom for the fade */
.page-header--blend.sf-section {
  padding-bottom: var(--sec-pad-mobile-bottom, 3rem);
}

@media (min-width: 768px) {
  .page-header--blend.sf-section {
    padding-bottom: var(--sec-pad-desktop-bottom, 4.5rem);
  }
}

/* Clip only sideways so the illustration can hang below the band */
@supports (overflow: clip) {
  .page-header {
    overflow: visible;
    overflow-x: clip;
  }
}

.page-header.sf-section {
  padding-top: var(--sec-pad-mobile-top, 2.5rem);
  padding-bottom: var(--sec-pad-mobile-bottom, 2rem);
}

@media (min-width: 768px) {
  .page-header.sf-section {
    padding-top: var(--sec-pad-desktop-top, 2.5rem);
    padding-bottom: var(--sec-pad-desktop-bottom, 2rem);
  }
}

.page-header__inner {
  position: relative;
  z-index: 1;
}

.page-header__content {
  min-width: 0;
}

@media (min-width: 1024px) {
  .page-header--image_right .page-header__content {
    max-width: min(46rem, 56%);
  }
}

.page-header__eyebrow {
  margin-bottom: 0.75rem;
}

.page-header__heading {
  margin: 0 0 0.5rem;
  font-size: var(--fs-h1);
  overflow-wrap: break-word;
}

.page-header__description {
  max-width: 38rem;
  color: var(--color-body);
  font-size: var(--fs-subheading, 1.125rem);
  line-height: 1.6;
}

.page-header__description p:last-child {
  margin-bottom: 0;
}

.page-header__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

/* Search box */
.page-header__search {
  position: relative;
  display: flex;
  align-items: center;
  max-width: 34rem;
  margin-top: 1.5rem;
}

.page-header__search-icon {
  position: absolute;
  left: 1.125rem;
  color: var(--color-muted);
  pointer-events: none;
}

.page-header .page-header__search-input {
  width: 100%;
  padding: 0.95rem 1.25rem 0.95rem 3rem;
  border: 1px solid var(--color-border);
  border-radius: 0.875rem;
  background-color: var(--color-card);
  color: var(--color-heading);
  font: inherit;
  font-size: 0.9375rem;
  box-shadow: 0 10px 30px -18px var(--shadow-color);
}

.page-header .page-header__search-input:focus {
  outline: 2px solid var(--sec-highlight, var(--color-primary));
  outline-offset: 1px;
}

.page-header--text_only .page-header__search {
  margin-left: auto;
  margin-right: auto;
}

/* Highlights: icon + title + short line */
.page-header__highlights {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 1.25rem 1.5rem;
  margin: 1.75rem 0 0;
  padding: 0;
  list-style: none;
}

.page-header__highlight {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  text-align: left;
}

.page-header__highlight-icon {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 0.875rem;
  color: var(--sec-highlight, var(--color-primary));
  background-color: color-mix(in srgb, var(--sec-highlight, var(--color-primary)) 14%, var(--color-card));
}

.page-header__highlight-text {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  font-size: 0.8125rem;
  line-height: 1.4;
}

.page-header__highlight-title {
  color: var(--color-heading);
  font-size: 0.9375rem;
}

.page-header__highlight-desc {
  color: var(--color-muted);
}

/* Illustration: desktop only */
.page-header__visual {
  display: none;
}

/* Banner: on the band's right side, fading in from the left. Its right edge
   lines up with the content (the container's padding edge), so on wide
   screens it never runs past the page width. */
@media (min-width: 1024px) {
  /* A column exactly Styles > Image width wide, the full height of the band;
     the image is centered in it, so extra spacing never makes it bigger. */
  .page-header__visual--banner {
    position: absolute;
    top: 0;
    right: max(0px, (100% - var(--max-width, 1280px)) / 2 + 2rem);
    bottom: 0;
    display: flex;
    align-items: var(--page-header-valign, center);
    justify-content: flex-end;
    width: var(--page-header-image, 58%);
    pointer-events: none;
  }

  /* The whole image at its own proportions: never wider than Image width and
     never taller than the band, so it's never cropped or zoomed */
  .page-header__visual--banner .page-header__image {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 35%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 35%, #000 92%, transparent);
  }

  /* Blend: the banner also fades out along its bottom edge */
  .page-header--blend .page-header__visual--banner .page-header__image {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 35%, #000 92%, transparent), linear-gradient(180deg, #000 70%, transparent);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, transparent, #000 35%, #000 92%, transparent), linear-gradient(180deg, #000 70%, transparent);
    mask-composite: intersect;
  }
}

/* Floating illustration: anchored bottom-right like the search header */
@media (min-width: 1024px) {
  /* Exactly Image width wide, inside the header (it doesn't hang into the
     next section). Centered: beside the middle of the text; Top: level with
     the text's top; Bottom: on the header's bottom edge. */
  .page-header__visual--cutout {
    position: absolute;
    top: 50%;
    right: 0;
    z-index: 2;
    display: flex;
    justify-content: flex-end;
    width: var(--page-header-image, 46%);
    transform: translateY(-50%);
    pointer-events: none;
  }

  .page-header--valign-top .page-header__visual--cutout {
    top: 0;
    transform: none;
  }

  .page-header--valign-bottom .page-header__visual--cutout {
    top: auto;
    bottom: calc(-1 * var(--sec-pad-desktop-bottom, 2rem));
    transform: none;
  }

  .page-header--blend.page-header--valign-bottom .page-header__visual--cutout {
    bottom: calc(-1 * var(--sec-pad-desktop-bottom, 4.5rem));
  }

  .page-header__visual--cutout .page-header__image {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
  }

  /* Room for the image: the text keeps clear of it */
  .page-header--cutout .page-header__content {
    max-width: min(46rem, 100% - var(--page-header-image, 46%) - 2rem);
  }
}

/* Text only: centered */
.page-header--text_only .page-header__content {
  max-width: 48rem;
  margin: 0 auto;
  text-align: center;
}

.page-header--text_only .page-header__description,
.page-header--text_only .page-header__highlights {
  margin-left: auto;
  margin-right: auto;
}

.page-header--text_only .page-header__actions {
  justify-content: center;
}

/* Library or uploaded icon size */
.page-header__highlight-icon {
  --sf-icon-size: 1.375rem;
}

/* ---------- Callout card (Text only layout): text left, card right ---------- */
.page-header--callout .page-header__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
  align-items: center;
}

@media (min-width: 1024px) {
  .page-header--callout .page-header__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4rem;
  }
}

.page-header--callout.page-header--text_only .page-header__content {
  max-width: 50rem;
  margin: 0;
  text-align: left;
}

.page-header--callout.page-header--text_only .page-header__description,
.page-header--callout.page-header--text_only .page-header__highlights {
  margin-left: 0;
}

.page-header--callout.page-header--text_only .page-header__actions {
  justify-content: flex-start;
}

.page-header__callout {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  max-width: 22rem;
  padding: 1.5rem 1.75rem;
  border: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent);
  border-radius: 1.25rem;
  background-color: color-mix(in srgb, var(--color-card) 85%, transparent);
  box-shadow: 0 24px 50px -30px var(--shadow-color);
}

.page-header__callout-icon {
  --sf-icon-size: 1.5rem;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 1rem;
  background-color: color-mix(in srgb, var(--sec-highlight, var(--color-primary)) 12%, var(--color-card));
  color: var(--sec-highlight, var(--color-primary));
}

.page-header__callout-text {
  margin: 0;
  color: var(--color-body);
  font-size: 1rem;
  line-height: 1.55;
}

.page-header__callout-arrow {
  position: absolute;
  right: -1.5rem;
  bottom: -2.75rem;
  color: var(--sec-highlight, var(--color-primary));
}

@media (max-width: 1023px) {
  .page-header__callout-arrow {
    display: none;
  }
}

/* ---------- Popular searches under the search bar ---------- */
.page-header__popular {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem 1.25rem;
  margin: 1rem 0 0;
  font-size: 0.875rem;
}

.page-header--text_only .page-header__popular {
  justify-content: center;
}

.page-header__popular-label {
  color: var(--color-muted);
}

.page-header__popular-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--sec-highlight, var(--color-primary));
  font: inherit;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}

.page-header__popular-link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- Floating badges around the image ---------- */
.page-header__badges {
  display: none;
}

@media (min-width: 1024px) {
  .page-header__badges {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: block;
    pointer-events: none;
  }

  .page-header__badge {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    max-width: 14rem;
    padding: 0.875rem 1rem;
    border: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent);
    border-radius: 0.875rem;
    background-color: color-mix(in srgb, var(--color-card) 94%, transparent);
    box-shadow: 0 18px 40px -22px var(--shadow-color);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    animation: ph-float 6s ease-in-out infinite;
  }

  .page-header__badge--1 { top: 22%; left: 4%; }
  .page-header__badge--2 { top: 6%; right: 0; animation-delay: -2s; }
  .page-header__badge--3 { right: 4%; bottom: 14%; animation-delay: -4s; }

  .page-header__badge-icon {
    --sf-icon-size: 1.25rem;
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.625rem;
    background-color: color-mix(in srgb, var(--sec-highlight, var(--color-primary)) 12%, transparent);
    color: var(--sec-highlight, var(--color-primary));
  }

  .page-header__badge-text {
    display: flex;
    flex-direction: column;
    color: var(--color-muted);
    font-size: 0.8125rem;
    line-height: 1.35;
  }

  .page-header__badge-text strong {
    color: var(--color-heading);
    font-size: 0.875rem;
  }
}

@keyframes ph-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -8px; }
}

@media (prefers-reduced-motion: reduce) {
  .page-header__badge {
    animation: none;
  }
}

/* ---------- Text alignment (Styles > Text alignment) ---------- */
.page-header--align-left.page-header--text_only .page-header__content {
  margin: 0;
  text-align: left;
}

.page-header--align-left.page-header--text_only :is(.page-header__description, .page-header__highlights, .page-header__search) {
  margin-left: 0;
}

.page-header--align-left.page-header--text_only :is(.page-header__actions, .page-header__popular) {
  justify-content: flex-start;
}

.page-header--align-center .page-header__content {
  text-align: center;
}

.page-header--align-center :is(.page-header__description, .page-header__highlights, .page-header__search) {
  margin-right: auto;
  margin-left: auto;
}

.page-header--align-center :is(.page-header__actions, .page-header__popular) {
  justify-content: center;
}

/* ---------- Image on top (Styles > Layout) ----------
   The image sits above the text on every screen size, Image width wide
   (a share of the text width), lined up with the text alignment */
.page-header__visual--top {
  position: relative;
  display: block;
  width: min(100%, var(--page-header-image, 46%));
  min-width: min(100%, 16rem);
  margin: 0 auto 2rem 0;
}

.page-header--align-center .page-header__visual--top {
  margin-right: auto;
  margin-left: auto;
}

.page-header__visual--top .page-header__image {
  display: block;
  width: 100%;
  height: auto;
}

.page-header__visual--top .sf-image-placeholder {
  aspect-ratio: 4 / 3;
}

.page-header--image_top .page-header__content,
.page-header--image_top.page-header--cutout .page-header__content {
  max-width: 46rem;
}

.page-header--align-center.page-header--image_top .page-header__content {
  margin-right: auto;
  margin-left: auto;
}

@media (max-width: 767px) {
  .page-header__visual--top {
    width: min(100%, 22rem);
  }
}

/* Image on top, background behind the image only: the header color becomes
   a band from screen edge to screen edge around the image, and the text
   starts below it on the page background */
.page-header.page-header--band-image {
  background: transparent;
}

.page-header--band-image .page-header__visual--top {
  margin-bottom: 3rem;
}

.page-header--band-image .page-header__visual--top::before {
  content: "";
  position: absolute;
  top: calc(-1 * var(--sec-pad-mobile-top, 2.5rem));
  right: -100vw;
  bottom: -1.75rem;
  left: -100vw;
  z-index: -1;
  background-color: var(--page-header-bg, var(--color-bg-alt));
  pointer-events: none;
}

@media (min-width: 768px) {
  .page-header--band-image .page-header__visual--top::before {
    top: calc(-1 * var(--sec-pad-desktop-top, 2.5rem));
  }
}

/* Color band: the background effects stay inside the band, across the
   screen (the container's left edge is half the leftover width plus its
   1.5rem padding from the screen's left edge) */
.page-header__band-fx {
  position: absolute;
  top: calc(-1 * var(--sec-pad-mobile-top, 2.5rem));
  bottom: -1.75rem;
  left: calc((min(100vw, var(--max-width)) - 100vw) / 2 - 1.5rem);
  z-index: -1;
  width: 100vw;
  overflow: hidden;
  pointer-events: none;
}

@media (min-width: 768px) {
  .page-header__band-fx {
    top: calc(-1 * var(--sec-pad-desktop-top, 2.5rem));
  }
}