/* ==========================================================================
   SECTION: SOLUTIONS — three pillars (EPC / O&M / Assured)
   ========================================================================== */

.solutions { background: var(--c-surface); }

.solutions__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
  /* Stretch, not start: all three cards take the height of the tallest so the
     row reads as a set. The raised middle card still lifts - transform doesn't
     change layout height, so the composition survives. */
  align-items: stretch;
}

.pillar {
  position: relative;
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  padding: 0 var(--sp-6) var(--sp-6);   /* the photo sits flush to the top edge */
  display: flex; flex-direction: column;
  overflow: hidden;
  transition: transform 300ms var(--ease), box-shadow 300ms var(--ease), border-color 300ms var(--ease);
}
.pillar:hover {
  transform: translateY(-8px);
  border-color: rgba(27,94,58,0.30);
  box-shadow: 0 22px 48px rgba(11,31,23,0.16);
}

/* The middle card rides higher — turns three equal boxes into a composition. */
.pillar--raised { transform: translateY(calc(var(--sp-8) * -1)); }
.pillar--raised:hover { transform: translateY(calc(var(--sp-8) * -1 - 8px)); }

/* --- Photo header ---------------------------------------------------------- */

.pillar__media {
  margin: 0 calc(var(--sp-6) * -1);   /* bleed past the card padding */
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--c-base);
}
.pillar__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.02);
  transition: transform 900ms var(--ease), filter 500ms var(--ease);
}
.pillar:hover .pillar__media img {
  transform: scale(1.09);
  filter: saturate(1.12);
}

/* Light sweep across the card on hover — like sun off a panel */
.pillar::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(245,166,35,0.16) 50%, transparent 65%);
  transform: translateX(-100%);
  transition: transform 700ms var(--ease);
  pointer-events: none;
}
.pillar:hover::before { transform: translateX(100%); }

/* The icon badge straddles the photo edge and lifts on hover. */
.pillar__icon {
  position: relative;
  z-index: 2;
  width: 52px; height: 52px;
  margin-top: calc(var(--sp-6) * -1);
  margin-bottom: var(--sp-5);
  display: flex; align-items: center; justify-content: center;
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  box-shadow: 0 8px 20px rgba(11,31,23,0.14);
  color: var(--c-primary);
  transition: background-color 300ms var(--ease), color 300ms var(--ease),
              transform 300ms var(--ease);
}
.pillar:hover .pillar__icon {
  background: var(--c-primary);
  color: var(--c-white);
  transform: translateY(-4px);
}
.pillar__icon svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.75; }

.pillar h3 { margin-bottom: var(--sp-3); }

.pillar p { font-size: var(--fs-small); line-height: 1.65; max-width: none; }

/* auto pushes the note to the floor of the card, so the three rules line up
   across the row even when the copy above them differs by a line or two. */
/* Upright, not italic. The rule above it and the green already separate this
   from the body copy, so the slant was doing no work the colour wasn't. */
.pillar__note {
  margin-top: auto;
  padding-top: var(--sp-5);
  border-top: 1px solid var(--c-line);
  font-size: var(--fs-caption);
  font-weight: var(--w-semi);
  color: var(--c-primary);
}

/* --- AUDIENCE SPLIT --------------------------------------------------------
   Homes and industry, side by side at identical weight. Deliberately NOT a
   fourth pillar: the pillars are capabilities, these are customers, and mixing
   the two categories in one row makes both harder to read.
   --------------------------------------------------------------------------- */

.audience__head {
  margin-top: var(--sp-16);
  margin-bottom: var(--sp-8);
  text-align: center;
}
.audience__head .t-h3 { margin-top: var(--sp-2); }

.audience {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-6);
}

.audience__card {
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-top: 3px solid var(--c-primary);
  border-radius: var(--radius-lg);
  padding: var(--sp-8);
  display: flex; flex-direction: column;
}
/* Two accents, so the pair reads as a choice rather than a repeat. */
.audience__card--industry { border-top-color: var(--c-energy); }

.audience__card h3 { margin: var(--sp-3) 0 var(--sp-4); }
.audience__card > p { font-size: var(--fs-small); line-height: 1.65; max-width: none; }

.audience__list {
  list-style: none;
  margin: var(--sp-5) 0 var(--sp-6);
  padding: 0;
  display: grid;
  gap: var(--sp-3);
}
.audience__list li {
  position: relative;
  padding-left: var(--sp-6);
  font-size: var(--fs-small);
  line-height: 1.6;
}
.audience__list li::before {
  content: '';
  position: absolute; left: 0; top: 0.5em;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--c-primary);
}
.audience__card--industry .audience__list li::before { background: var(--c-energy); }

/* Push both buttons to the bottom so they line up across unequal card copy. */
.audience__card .btn { margin-top: auto; align-self: flex-start; }

@media (max-width: 900px) {
  .solutions__grid { grid-template-columns: 1fr; gap: var(--sp-5); }
  .pillar,
  .pillar--raised,
  .pillar:hover,
  .pillar--raised:hover { transform: none; }

  .audience { grid-template-columns: 1fr; gap: var(--sp-5); }
  .audience__head { margin-top: var(--sp-12); }
}