/* =========================================================================
   servicii.css — the services hub.

   An index of four things, so it is built as an index: full-width rows divided
   by hairlines, name on the left, substance on the right. Not four cards in a
   grid — four equal boxes say the four services are interchangeable, and they
   are not; they are four different conversations at four different moments of
   owning a machine.
   ========================================================================= */

.servicii { margin-top: clamp(1.5rem, 3vw, 2.5rem); border-top: 1px solid var(--rule); }

.servicii__item {
  display: grid;
  grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
  gap: clamp(1.5rem, 5vw, 5rem);
  padding-block: clamp(2rem, 3.6vw, 3.2rem);
  border-bottom: 1px solid var(--rule);
}

/* The name column stays with the reader while the list beside it is read. */
.servicii__head { position: sticky; top: 108px; align-self: start; }
.servicii__icon {
  width: 34px; height: 34px; object-fit: contain;
  /* Client artwork is dark on transparent; inverting is the only way it reads
     on this ground without redrawing it. */
  filter: brightness(0) invert(1); opacity: .5; margin-bottom: 1rem;
}
.servicii__title {
  font-size: clamp(1.35rem, 2.2vw, 1.9rem); margin: 0; letter-spacing: -0.03em;
}
.servicii__title a { transition: color .3s var(--ease); }

.servicii__text { color: var(--dim); font-size: 1.02rem; max-width: 56ch; margin: 0 0 1.4rem; }

/* What each service actually covers, taken from that service's own page. Two
   columns, because a single column of five short phrases is a stack of stubs. */
.servicii__points {
  list-style: none; margin: 0 0 1.6rem; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .55rem clamp(1rem, 2.5vw, 2.2rem);
}
.servicii__points li {
  position: relative; padding-left: 1.4rem;
  color: var(--dim); font-size: .93rem; line-height: 1.45;
}
.servicii__points li::before {
  content: ""; position: absolute; left: 0; top: .68em;
  width: 8px; height: 1px; background: var(--accent-dk);
}

.servicii__more { font-size: .9rem; }

@media (hover: hover) and (pointer: fine) {
  .servicii__item:hover .servicii__icon { opacity: 1; }
  .servicii__title a:hover { color: var(--accent); }
}

@media (max-width: 900px) {
  .servicii__item { grid-template-columns: 1fr; gap: 1.1rem; }
  .servicii__head { position: static; }
  .servicii__icon { margin-bottom: .7rem; }
}
@media (max-width: 560px) {
  .servicii__points { grid-template-columns: 1fr; }
}