/* Solutions page: one stone card per solution. Sizes measured from the Duda draft,
   with a closer photo-to-text gap on purpose. Colors only via tokens.css. */

.solution-list {
  display: grid;
  gap: var(--space-2);
}

/* Phones: photo on top at full width, text below. */
.solution {
  display: grid;
  gap: var(--space-2);
  padding: 22px;
  border-radius: var(--radius-card);
  background-color: var(--stone);
  /* Keeps the title clear of the sticky header when a homepage card links here. */
  scroll-margin-top: calc(var(--header-height) + 2 * var(--space-1) + var(--space-2));
}

.solution picture {
  display: block;
}

.solution__media {
  display: block;
  width: 100%;
  height: 120px;
  object-fit: cover;
  border-radius: var(--radius-small);
}

/* From 768px: photo left, text right, vertically centered.
   Padding grows with the window: 14/21px at 768 wide, about 26/38px at 1440, 30/44px at 1680. */
@media (width >= 768px) {
  .solution {
    grid-template-columns: 25% minmax(0, 1fr);
    align-items: center;
    gap: var(--space-3);
    padding: clamp(14px, 0.53px + 1.754vw, 30px) clamp(21px, 1.63px + 2.522vw, 44px);
  }

  .solution__media {
    height: 160px;
  }
}

@media (width >= 1025px) {
  .solution-list {
    gap: var(--space-3);
  }

  .solution {
    grid-template-columns: 31% minmax(0, 1fr);
    gap: var(--space-4);
  }

  .solution__media {
    height: 240px;
  }
}