/* ==========================================================================
   SECTION: THE PROBLEM — "the cost of doing nothing"
   Two photos carry the argument: renting power vs owning it.
   ========================================================================== */

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

.problem__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-16);
  align-items: center;
}

/* --- LEFT: the before/after pair ------------------------------------------- */

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

.problem__shot {
  position: relative;
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--c-base);
}
.problem__shot img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
  transition: transform 800ms var(--ease), filter 500ms var(--ease);
}
.problem__shot:hover img { transform: scale(1.05); }

/* The "today" frame is drained of colour and only warms up on hover — the
   status quo should look like the dull option, because it is. */
.problem__shot--now img       { filter: grayscale(0.85) contrast(1.05); }
.problem__shot--now:hover img { filter: grayscale(0.15); }

/* Drop the second frame so the pair reads as before/after, not as a gallery. */
.problem__shot--next { transform: translateY(var(--sp-8)); }

.problem__shot figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: var(--sp-8) var(--sp-4) var(--sp-4);
  background: linear-gradient(to top, rgba(11,31,23,0.94), rgba(11,31,23,0));
  color: var(--c-surface);
  font-size: var(--fs-caption);
  line-height: 1.45;
}

.problem__tag {
  display: block;
  width: fit-content;
  margin-bottom: var(--sp-2);
  padding: 3px 9px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: var(--w-bold);
  letter-spacing: 0.10em;
  text-transform: uppercase;
}
.problem__tag--bad  { background: rgba(247,245,240,0.18); color: var(--c-surface); }
.problem__tag--good { background: var(--c-energy);        color: var(--c-base); }

/* --- RIGHT: the argument --------------------------------------------------- */

.problem__lead p + p { margin-top: var(--sp-5); }

.problem__lead .t-lead {
  color: var(--c-ink);
  font-weight: var(--w-medium);
  margin-bottom: var(--sp-5);
}

/* --- BELOW: the four cards, now a full-width row ---------------------------- */

.problem__cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
  margin-top: var(--sp-16);
}

.problem__card {
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-left: 3px solid var(--c-energy);
  border-radius: 0;                 /* no rounding on single-sided accents */
  padding: var(--sp-5) var(--sp-6);
  transition: transform 220ms var(--ease), border-left-color 220ms var(--ease);
}
.problem__card:hover {
  transform: translateX(4px);
  border-left-color: var(--c-accent);
}
.problem__card h3 {
  font-size: var(--fs-h4); font-weight: var(--w-bold);
  color: var(--c-ink); margin-bottom: var(--sp-2);
}
.problem__card p {
  font-size: var(--fs-small); line-height: 1.6; margin: 0;
}

/* "for homes" / "for business" — the audience qualifier on the last two cards.
   Set quieter than the heading so the card still reads as one title, not two. */
.problem__for {
  font-size: var(--fs-eyebrow);
  font-weight: var(--w-semi);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-muted);
  white-space: nowrap;
}

/* Four across is tight below ~1100px — drop to a 2x2 block before the single
   column kicks in at 900. */
@media (max-width: 1100px) {
  .problem__cards { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .problem__layout { grid-template-columns: 1fr; gap: var(--sp-10); }
  .problem__shot--next { transform: none; }
  .problem__shot img { aspect-ratio: 4 / 3; }
  .problem__cards { grid-template-columns: 1fr; margin-top: var(--sp-10); }
}