/* Section 8 — Rollout Engine.
 *
 * One photograph across the whole section, with the copy over its right
 * side behind a gradient that starts in the middle of the picture. There
 * is no edge where the image stops: the black the type sits on is the
 * same photograph, darkened.
 */

.sbro {
  /* The sticky header is 86px tall; without this, anchor
     navigation lands the section top underneath it. */
  scroll-margin-top: 110px;
  --ro-black: #08080750;
  --ro-ink: var(--sb-ground);
  --ro-brass: var(--sb-gold);
  --ro-brass-lit: var(--sb-gold-bright);
  --ro-ivory: var(--sb-ink);
  --ro-muted: var(--sb-ink-2);
  --ro-line: rgb(201 168 106 / 0.26);

  position: relative;
  background: var(--ro-ink);
  color: var(--ro-ivory);
  overflow: hidden;
}

.sbro-stage { position: relative; }

.sbro-photo { display: block; }
.sbro-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 22% 42%;      /* the calendars and the person at them */
}

/* The gradient starts over the middle of the picture and is near-black
   by the time the copy begins, so the transition happens inside the
   photograph rather than at its edge. */
.sbro-veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to right,
    rgb(8 8 7 / 0) 42%, rgb(8 8 7 / 0.55) 56%,
    rgb(8 8 7 / 0.90) 66%, var(--ro-ink) 78%);
}

.sbro-inner {
  position: relative;
  max-width: 1680px;
  margin: 0 auto;
  padding: clamp(36px, 3.6vw, 56px) clamp(20px, 4vw, 56px);
  display: grid;
  grid-template-columns: 1fr;
}

.sbro-copy { min-width: 0; }

/* --- head ---------------------------------------------------------------- */
.sbro-eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  font-size: clamp(11px, 0.85vw, 13px);
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ro-brass);
}
.sbro-num { font-size: 1.15em; letter-spacing: 0.1em; }
.sbro-rule { flex: 0 0 26px; height: 1px; background: var(--ro-line); }

.sbro-title {
  margin: 20px 0 0;
  font-size: clamp(2rem, 3.1vw, 3.6rem);
  line-height: 0.95;
  letter-spacing: -0.015em;
  font-weight: 900;
  text-transform: uppercase;
  color: var(--sb-ink-2);
}
.sbro-title span { display: block; }

.sbro-support {
  margin: 20px 0 0;
  max-width: 46ch;
  font-size: clamp(13.5px, 1vw, 16px);
  line-height: 1.68;
  color: var(--ro-muted);
}

/* --- controls ------------------------------------------------------------ */
.sbro-ctas {
  margin-top: clamp(22px, 2.6vw, 32px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
}
.sbro-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 0 26px;
  border: 1px solid var(--ro-brass);
  border-radius: var(--sb-r-control);
  background: var(--ro-brass);
  color: var(--sb-surface-2);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 200ms ease, border-color 200ms ease;
}
.sbro-cta svg { width: 15px; height: 15px; }
.sbro-cta:hover { background: var(--ro-brass-lit); border-color: var(--ro-brass-lit); }

.sbro-sample-btn {
  background: none;
  border: 0;
  padding: 6px 0;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ro-muted);
  cursor: pointer;
  border-bottom: 1px solid rgb(162 155 144 / 0.4);
  transition: color 200ms ease, border-color 200ms ease;
}
.sbro-sample-btn:hover { color: var(--ro-brass); border-bottom-color: var(--ro-brass); }

.sbro-cta:focus-visible, .sbro-sample-btn:focus-visible,
.sbro-cap:focus-visible, .sbro-stage-btn:focus-visible {
  outline: 2px solid var(--ro-brass);
  outline-offset: 3px;
}

/* --- the four capabilities ----------------------------------------------- */
.sbro-caps {
  margin: clamp(20px, 2.4vw, 30px) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--ro-line);
}
.sbro-caps > li { border-bottom: 1px solid rgb(239 233 220 / 0.07); }

.sbro-cap {
  display: block;
  width: 100%;
  padding: 11px 0;
  background: none;
  border: 0;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  min-height: 46px;
}
.sbro-cap-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ro-brass);
  opacity: 0.8;
  transition: opacity 200ms ease;
}
.sbro-cap-line {
  display: block;
  margin-top: 5px;
  font-size: clamp(12.5px, 0.9vw, 13.5px);
  line-height: 1.55;
  color: var(--ro-muted);
  transition: color 200ms ease;
}
.sbro-cap:hover .sbro-cap-label,
.sbro-cap:focus-visible .sbro-cap-label,
.sbro-cap.is-active .sbro-cap-label { opacity: 1; }
.sbro-cap:hover .sbro-cap-line,
.sbro-cap:focus-visible .sbro-cap-line,
.sbro-cap.is-active .sbro-cap-line { color: var(--ro-ivory); }

/* --- the workflow line --------------------------------------------------- */
.sbro-flow { margin-top: clamp(20px, 2.4vw, 30px); }
.sbro-flow-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sbro-flow-row > li { display: flex; align-items: center; }
.sbro-flow-row > li + li::before {
  content: "";
  width: 16px;
  height: 1px;
  background: var(--ro-line);
  flex: 0 0 16px;
}
.sbro-stage-btn {
  background: none;
  border: 0;
  padding: 8px 10px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ro-muted);
  cursor: pointer;
  min-height: 40px;
  transition: color 200ms ease;
}
.sbro-flow-row > li:first-child .sbro-stage-btn { padding-left: 0; }
.sbro-stage-btn:hover, .sbro-stage-btn.is-active { color: var(--ro-brass); }

.sbro-flow-detail {
  margin: 6px 0 0;
  min-height: 2.6em;
  max-width: 48ch;
  font-size: clamp(12px, 0.88vw, 13.5px);
  line-height: 1.6;
  color: var(--ro-muted);
}
.sbro-flow-fallback {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- the example campaign ------------------------------------------------ */
.sbro-sample {
  margin-top: 18px;
  max-width: 46ch;
  border: 1px solid var(--ro-line);
  border-radius: var(--sb-r-control);
  background: rgb(14 14 12 / 0.86);
  padding: 14px 16px 16px;
}
.sbro-sample-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 10px;
}
.sbro-sample-tag {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ro-brass);
}
.sbro-sample-len { font-size: 12px; color: var(--ro-muted); }

.sbro-sample-list { margin: 0; padding: 0; list-style: none; }
.sbro-sample-list li {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: baseline;
  padding: 7px 0;
  border-top: 1px solid rgb(239 233 220 / 0.07);
  font-size: 12.5px;
}
.sbro-day { color: var(--ro-brass); font-variant-numeric: tabular-nums; }
.sbro-item { color: var(--ro-ivory); }
.sbro-status {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ro-muted);
}
/* The word is the status. The tint only repeats it. */
.sbro-status--approved, .sbro-status--published, .sbro-status--completed { color: var(--sb-good); }
.sbro-status--scheduled { color: var(--ro-brass); }

.sbro-sample-note {
  margin: 12px 0 0;
  font-size: 12px;
  line-height: 1.55;
  color: var(--ro-muted);
}

/* --- desktop ------------------------------------------------------------- */
@media (min-width: 1024px) {
  /* The photograph fills the stage rather than setting its height: left
     to its own aspect it would be 1076px tall at 1440 and push the
     section past the height this one is meant to be. */
  .sbro-stage { min-height: clamp(760px, 52vw, 880px); }
  .sbro-photo { position: absolute; inset: 0; }
  .sbro-img { height: 100%; }
  .sbro-inner {
    position: relative;
    align-items: center;
    grid-template-columns: 62fr 38fr;
    width: 100%;
    min-height: inherit;
  }
  .sbro-copy { grid-column: 2; max-width: 600px; }
  .sbro-caps { grid-template-columns: 1fr 1fr; column-gap: 26px; }
  .sbro-caps > li:nth-child(-n+2) { border-top: 0; }
}

/* --- tablet and phone ---------------------------------------------------- */
/* The order the brief asks for puts the photograph between the CTA and
   the capabilities, which is not the DOM order - on a desktop the copy
   is one column beside the picture. The two wrappers collapse so their
   children can be ordered directly; both are plain divs, so nothing is
   lost from the accessibility tree. */
@media (max-width: 1023px) {
  .sbro-stage { display: flex; flex-direction: column; }
  .sbro-inner, .sbro-copy { display: contents; }
  .sbro-head { order: 1; padding: clamp(30px, 5vw, 48px) clamp(20px, 4vw, 56px) 0; }
  .sbro-photo { order: 2; margin-top: clamp(26px, 4vw, 40px); }
  .sbro-caps { order: 3; margin: clamp(22px, 4vw, 30px) 0 0;
               padding: 0 clamp(20px, 4vw, 56px); }
  .sbro-flow { order: 4; padding: 0 clamp(20px, 4vw, 56px); }
  .sbro-sample { order: 5; margin: 18px clamp(20px, 4vw, 56px) 0; }
  .sbro-copy::after {                     /* bottom padding for the column */
    content: "";
    order: 6;
    height: clamp(30px, 5vw, 48px);
  }

  .sbro-img { aspect-ratio: 940 / 710; }
  /* Stacked, the copy sits above the picture rather than over it, so the
     side gradient has nothing to do and the photograph settles into the
     section from its own bottom edge instead. */
  .sbro-veil { display: none; }
  .sbro-photo { position: relative; }
  .sbro-photo::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 45%;
    pointer-events: none;
    background: linear-gradient(to bottom, rgb(8 8 7 / 0) 0%, var(--ro-ink) 100%);
  }
  .sbro-caps { grid-template-columns: 1fr 1fr; column-gap: 22px; }
  .sbro-caps > li:nth-child(-n+2) { border-top: 0; }
}
@media (max-width: 767px) {
  .sbro-img { aspect-ratio: 600 / 630; }
  .sbro-caps { grid-template-columns: 1fr; }
  .sbro-cta { width: 100%; justify-content: center; }
  .sbro-sample-list li { grid-template-columns: 56px minmax(0, 1fr); }
  .sbro-sample-list .sbro-status { grid-column: 2; }
}

@media (prefers-reduced-motion: reduce) {
  .sbro-cta, .sbro-sample-btn, .sbro-cap-label, .sbro-cap-line,
  .sbro-stage-btn { transition: none; }
}