/* ===========================================================================
   Pagina Servicii
   ---------------------------------------------------------------------------
   Numai ce exista DOAR aici. Cartonasul se sprijina pe `.card.card--glass` si
   pe `.card__icon` din components.css - aceleasi piese ca la Contact si la
   "Our Approach" de pe About us.
   =========================================================================== */

/* Titlul grupei si nota de sub el. `.servicii-grup` urmeaza antetul paginii
   sau grila de dinainte, deci NU-si scrie marginea de sus la zero. */
.servicii-grup { margin-block-start: var(--s-60); }
.servicii-grup h2 { margin: 0; color: var(--text-1); }

.servicii-grup__nota {
  margin: 8px 0 0;
  font-size: var(--size-small);
  color: var(--text-2);
}

/* Patru pe rand la latime plina, doua la mijloc, una pe telefon. Cartonasele
   sunt mici - iconita, nume, o linie de text si un pret - deci patru incap
   fara sa se inghesuie. */
.servicii {
  margin-block-start: var(--s-24);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--grid-gap);
}

@media (min-width: 700px) {
  .servicii { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1100px) {
  .servicii { grid-template-columns: repeat(4, 1fr); }
  /* A doua grupa are cinci servicii; la patru pe rand, al cincilea ar ramane
     singur cu trei sferturi de rand gol langa el. DevOps il umple. Aceeasi
     rezolvare ca la portofoliu, unde cartonasul Hyperice consuma imparitatea. */
  .serviciu--lat { grid-column: 1 / -1; }
}

.serviciu {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: inherit;
  text-decoration: none;
}

.serviciu__nume {
  margin-block-start: var(--s-12);
  font-size: var(--size-h4);
  font-weight: var(--w-medium);
  letter-spacing: var(--ls-h4);
  color: var(--text-1);
}

.serviciu__descriere { font-size: var(--size-small); color: var(--text-2); }

/* Pretul sta jos, pe acelasi rand la toate cartonasele de pe un rand:
   `margin-block-start: auto` il impinge la baza, indiferent cat de lunga e
   descrierea de deasupra. Fara el, preturile ar sta in zigzag. */
.serviciu__pret {
  margin-block-start: auto;
  padding-block-start: var(--s-12);
  font-size: var(--size-h4);
  font-weight: var(--w-medium);
  color: var(--blue);
}

.serviciu:hover .serviciu__pret,
.serviciu:focus-visible .serviciu__pret { color: var(--text-1); }