/* =========================================================================
   servicii.css — Servicii page only (enqueued on is_page('servicii')).
   Shared pieces (.page-hero, .service-card) live in base.css.
   ========================================================================= */

.services-grid > .service-card--full { grid-column: span 6; }

/* Cascade the 4 cards instead of revealing them as one block. */
.services-grid > .service-card--full:nth-child(2) { --du-stagger: 90ms; }
.services-grid > .service-card--full:nth-child(3) { --du-stagger: 180ms; }
.services-grid > .service-card--full:nth-child(4) { --du-stagger: 270ms; }

.service-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

/* Whole card is the click target, not just the text. The overlay is anchored to
   the card (position: relative below) so it also covers the card padding. */
.service-card--full {
  position: relative;
}

.service-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.service-card__details {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: auto;
  color: var(--accent);
  font-weight: 700;
}

.service-card__details-arrow {
  transform: translateX(0);
  transition: transform 0.25s ease-out, opacity 0.25s ease-out;
}

.service-card--full {
  box-shadow: 0 12px 30px rgba(5, 38, 152, 0.08);
  transition: transform 0.25s ease-out, opacity 0.25s ease-out;
}

.service-card--full:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 36px rgba(5, 38, 152, 0.16);
}

.service-card__link:hover .service-card__details-arrow {
  transform: translateX(3px);
}

.service-card__link:focus-visible {
  outline: none;
}

/* Focus ring drawn on the overlay so it traces the whole card. */
.service-card__link:focus-visible::after {
  outline: 2px solid var(--accent);
  outline-offset: 5px;
  border-radius: var(--radius);
}

.service-card--featured {
  border: 1px solid var(--accent);
}

.service-card__excerpt {
  margin: 0 0 1rem;
  color: var(--gray-500);
  font-size: 0.95rem;
  line-height: 1.55;
}

.services-cta { text-align: center; max-width: 640px; }
.services-cta p { opacity: 0.9; }
.services-cta__actions {
  display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center;
  margin-top: 1.5rem;
}

@media (max-width: 768px) {
  .services-grid > .service-card--full { grid-column: span 12; }
}