/* =========================================================
   controller.css — Controller page specific styles
   Reuses builder.css patterns where possible; this file adds
   controller-specific overrides (image cards in Strategic Reality).
   ========================================================= */

/* -----------------------------------------------------
   SECTION: Hero — same treatment as the Builder hero: breadcrumb sits
   directly after the header, 16px breadcrumb, and 40px / 20px content gaps.
   (Title width is left unconstrained — the controller headline is longer.)
   ----------------------------------------------------- */
.sp-hero--controller .sp-breadcrumb {
  top: 0;
  font-size: 16px;
}

.sp-hero--controller .sp-hero__copy {
  gap: 40px;
}

.sp-hero--controller .sp-hero__text {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* -----------------------------------------------------
   SECTION: Strategic Reality — image cards (overrides builder.css)
   ----------------------------------------------------- */
.ctrl-strategy {
  position: relative;
  padding: 100px 0 85px;
  background: #fff;
  isolation: isolate;
}

/* Eyebrow spans full width above; title + lede form a two-column row below,
   top-aligned — matches Figma node 6338:13997. */
.ctrl-strategy__head {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 86px;
}

.ctrl-strategy__head-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 50px;
  align-items: start;
}

.ctrl-strategy__title {
  font-size: 40px;
  line-height: 1.2;
  color: #000;
  font-weight: 400;
  margin: 0;
}
.ctrl-strategy__title strong { font-weight: 600; }

.ctrl-strategy__lede {
  font-size: 18px;
  line-height: 1.4;
  color: #000;
  margin: 0;
}

.ctrl-strategy__cards-wrap {
  position: relative;
}

/* Dark band under the lower portion of the cards — starts 131px into the
   cards and extends below them, full viewport width (Figma node 6338:14009). */
.ctrl-strategy__band {
  position: absolute;
  top: 131px;
  bottom: -85px;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  z-index: -1;
  overflow: hidden;
}
.ctrl-strategy__band img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ctrl-strategy__band::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(24, 0, 86, 0.4);
  mix-blend-mode: multiply;
}

.ctrl-strategy__cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.ctrl-card {
  background: #fff;
  filter: drop-shadow(0 -2px 7.5px rgba(0, 0, 0, 0.07));
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.ctrl-card__photo {
  height: 157px;
  width: 333px;
  max-width: 100%;
  overflow: hidden;
  background: #cdcdcd;
}
.ctrl-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ctrl-card__title {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  color: #000;
  margin: 0;
}

/* -----------------------------------------------------
   SECTION: Capabilities image (different aspect/shape than Builder)
   ----------------------------------------------------- */
.ctrl-capabilities__photo {
  border-radius: 8px;
  overflow: hidden;
  height: 448px;
  width: 540px;
  max-width: 100%;
  position: relative;
  background: #07093a;
}
.ctrl-capabilities__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* -----------------------------------------------------
   Mobile responsiveness for Controller-specific bits
   ----------------------------------------------------- */
@media (max-width: 1024px) {
  .ctrl-strategy__head-cols { grid-template-columns: 1fr; gap: 20px; }
  .ctrl-strategy__cards { grid-template-columns: 1fr; gap: 24px; }
  .ctrl-strategy__band { inset: 0; }

  .ctrl-card__photo { width: 100%; }

  .ctrl-capabilities__photo { width: 100%; height: 320px; }
}

@media (max-width: 640px) {
  .ctrl-strategy { padding: 60px 0; }
  .ctrl-strategy__title { font-size: 28px; }
}