/* Shared service cards (template-parts/service-cards.php, ECTCH-982).
   Editorial cards: image, title, description, CTA. Three columns split by
   hairlines drawn in the middle of the gutters (not card borders) so every
   column has the same width. Two columns on tablets, one on phones. */
.solution-cards {
  --gap: clamp(36px, 4.4vw, 60px);
  --row-gap: 72px;
  --rule: rgba(20, 52, 74, .14);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: var(--row-gap);
}
.solution-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  color: #14344a;
  text-decoration: none;
}
/* Column rule: left of every card that is not first in its row. */
.solution-card::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--gap) / -2);
  border-left: 1px solid var(--rule);
}
/* Row rule: above every card after the first row, run across the
   gutters so it reads as one line, stopping at the outer edges. */
.solution-card::after {
  content: '';
  position: absolute;
  top: calc(var(--row-gap) / -2);
  left: calc(var(--gap) / -2);
  right: calc(var(--gap) / -2);
  border-top: 1px solid var(--rule);
}
.solution-card:nth-child(3n + 1)::before { display: none; }
.solution-card:nth-child(-n + 3)::after { display: none; }
.solution-card:nth-child(3n + 1)::after { left: 0; }
.solution-card:nth-child(3n)::after { right: 0; }
/* The column rule spans the row gap too, so the grid reads as one. */
.solution-card:nth-child(n + 4)::before { top: calc(var(--row-gap) / -2); }
.solution-card-media {
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: 4px;
  background: #e3ece9;
}
.solution-card-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s var(--ease), filter .5s ease;
}
.solution-card:hover .solution-card-media img,
.solution-card:focus-visible .solution-card-media img { transform: scale(1.05); filter: saturate(1.08); }
.solution-card-title {
  margin: 18px 0 10px;
  font: 600 clamp(20px, 1.7vw, 24px)/1.2 JakartaLocal, sans-serif;
  letter-spacing: -.035em;
  color: #14344a;
}
.solution-card-text {
  margin: 14px 0 22px;
  font-size: 13px;
  line-height: 1.65;
  color: #5e7170; /* --muted, 4.9:1 on #f8fafb */
}
.solution-card-foot {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  margin-top: auto;
}
.solution-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #1b6b6e; /* 5.9:1 on #f8fafb and on white */
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  text-decoration: underline transparent;
  text-underline-offset: 4px;
  transition: text-decoration-color .3s ease;
}
.solution-card-cta span { display: inline-block; transition: transform .3s var(--ease); }
.solution-card:hover .solution-card-cta,
.solution-card:focus-visible .solution-card-cta { text-decoration-color: currentColor; }
.solution-card:hover .solution-card-cta span,
.solution-card:focus-visible .solution-card-cta span { transform: translate(2px, -2px); }
.solution-card:focus-visible { outline: 2px solid #1b6b6e; outline-offset: 6px; border-radius: 4px; }

/* Two columns on tablets, one on phones; the hairlines follow. */
@media (max-width: 980px) {
  .solution-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); --row-gap: 56px; }
  .solution-card:nth-child(n)::before { display: block; top: 0; }
  .solution-card:nth-child(n)::after { display: block; left: calc(var(--gap) / -2); right: calc(var(--gap) / -2); }
  .solution-card:nth-child(2n + 1)::before { display: none; }
  .solution-card:nth-child(-n + 2)::after { display: none; }
  .solution-card:nth-child(2n + 1)::after { left: 0; }
  .solution-card:nth-child(2n)::after { right: 0; }
  .solution-card:nth-child(n + 3)::before { top: calc(var(--row-gap) / -2); }
}
@media (max-width: 640px) {
  .solution-cards { grid-template-columns: 1fr; --row-gap: 48px; }
  .solution-card:nth-child(n)::before { display: none; }
  .solution-card:nth-child(n)::after { display: block; left: 0; right: 0; }
  .solution-card:first-child::after { display: none; }
  .solution-card-media { aspect-ratio: 16 / 9; }
}
@media (prefers-reduced-motion: reduce) {
  .solution-card-media img, .solution-card-cta, .solution-card-cta span { transition: none; }
  .solution-card:hover .solution-card-cta span, .solution-card:focus-visible .solution-card-cta span { transform: none; }
  .solution-card:hover .solution-card-media img, .solution-card:focus-visible .solution-card-media img { transform: none; filter: none; }
}