/**
 * Fluid marketing layout (NEW-560). The exported pages carry their design
 * spacing as inline styles, so the shared rhythm below needs !important.
 *
 * - Content sits in one centred column of at most 1280px; section and footer
 *   backgrounds still run edge to edge because the column is made with
 *   padding (--bx-inline), not with a wrapper.
 * - Side padding: 64px from 1024px, 32px from 640px, 20px below 640px.
 * - Every section uses the same top/bottom padding (96px, 64px below 640px)
 *   and no margins; the logo strip (32px) and the footer are the exceptions.
 *
 * The desktop markup renders from 900px and the mobile markup below it
 * (bx-responsive.css).
 */
:root {
  --bx-container-max: 1280px;
  --bx-gutter: 64px;
  --bx-section-y: 96px;
  --bx-logo-strip-y: 32px;
  --bx-footer-top: 64px;
  --bx-footer-bottom: 32px;
}

@media (max-width: 1023px) {
  :root {
    --bx-gutter: 32px;
  }
}

@media (max-width: 639px) {
  :root {
    --bx-gutter: 20px;
    --bx-section-y: 64px;
    --bx-footer-top: 48px;
    --bx-footer-bottom: 24px;
  }
}

/*
 * Side padding that keeps the content box within the shared container.
 * The percentage resolves against the full-width parent where it is used.
 */
.bx-view header,
.bx-view main > section,
.bx-view main > article,
.bx-view footer {
  --bx-inline: max(
    var(--bx-gutter),
    calc((100% - var(--bx-container-max)) / 2)
  );
}

.bx-view header {
  padding-left: var(--bx-inline) !important;
  padding-right: var(--bx-inline) !important;
}

.bx-view main > section,
.bx-view main > article {
  box-sizing: border-box;
  height: auto !important;
  min-height: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: var(--bx-section-y) var(--bx-inline) !important;
}

/* The supplier logo ticker is full-bleed by design. */
.bx-view main > section[aria-label="Suppliers on Bulk Exchange"] {
  padding: var(--bx-logo-strip-y) 0 !important;
}

.bx-view footer {
  margin: 0 !important;
  padding: var(--bx-footer-top) var(--bx-inline) var(--bx-footer-bottom) !important;
}

/* Type scales through breakpoints instead of a canvas transform. */
.bx-desktop main h1 {
  font-size: clamp(2.75rem, 1rem + 3.5vw, 3.5rem) !important;
}

.bx-mobile main h1 {
  font-size: clamp(2.5rem, 1.6rem + 2.4vw, 3rem) !important;
}

/* Narrow desktops: tighten the header so navigation and actions fit. */
@media (max-width: 1099px) {
  .bx-desktop header > div:first-child {
    gap: 20px !important;
  }

  .bx-desktop header a {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
}

@media (max-width: 1023px) {
  .bx-desktop header > div:first-child {
    gap: 16px !important;
  }

  .bx-desktop header nav {
    gap: 0 !important;
  }

  .bx-desktop header a {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }

  .bx-desktop header span[aria-hidden] {
    margin: 0 2px !important;
  }
}

/* Fixed-width blocks in the exported markup shrink with the container. */
.bx-desktop main [style*="width: 1080px"],
.bx-desktop main [style*="width: 760px"] {
  max-width: 100%;
}

/*
 * Homepage hero (desktop markup, the only 600px-tall section). The text
 * column keeps at most half of the container; the map runs to the right edge
 * of the viewport and the two floating cards align with the container's right
 * edge.
 */
.bx-desktop main > section[style*="height: 600px"] {
  --bx-hero-text: min(560px, (100% - 2 * var(--bx-inline)) / 2);
}

.bx-desktop main > section[style*="height: 600px"] > div:not([aria-hidden]) {
  width: min(560px, 50%) !important;
}

.bx-desktop main > section[style*="height: 600px"] h1 {
  font-size: clamp(2.75rem, 1rem + 3.5vw, 4rem) !important;
}

/*
 * Map layer: keeps its 1440px design coordinates. The design placed the text
 * column's right edge at 624px in a 1312px content box; the container is
 * 1280px, so the origin moves 32px further left to keep the pins where they
 * were relative to the cards.
 */
.bx-desktop
  main
  > section[style*="height: 600px"]
  > div[aria-hidden]:has(> img) {
  top: 0 !important;
  bottom: 0;
  left: calc(var(--bx-inline) + var(--bx-hero-text) - 656px) !important;
  right: 0;
  width: auto !important;
  height: auto !important;
}

.bx-desktop main > section[style*="height: 600px"] > div[aria-hidden] > img {
  width: calc(100% - 480px) !important;
  height: calc(100% + 40px) !important;
  object-fit: cover;
  object-position: left top;
}

/* Floating search and estimate cards. */
.bx-desktop
  main
  > section[style*="height: 600px"]
  > div[aria-hidden]:not(:has(> img)) {
  left: auto !important;
  right: var(--bx-inline);
  max-width: calc(100% - 2 * var(--bx-inline) - var(--bx-hero-text) - 40px);
}

/*
 * Contractor and supplier heroes: the illustration is a fixed 600x520
 * composition, which leaves too little room for the copy beside it on narrow
 * desktops. There the copy stacks above it and the map fades in from the top.
 */
@media (max-width: 1199px) {
  .bx-desktop main > section[style*="minmax(0px, 1fr) 600px"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .bx-desktop
    main
    > section[style*="minmax(0px, 1fr) 600px"]
    > div[aria-hidden][style*="width: 600px"] {
    justify-self: center;
    max-width: 100%;
  }

  .bx-desktop
    main
    > section[style*="minmax(0px, 1fr) 600px"]
    > div[aria-hidden]:has(> img) {
    mask-image: linear-gradient(180deg, transparent 30%, #000 60%) !important;
  }
}