@charset "UTF-8";
/* =====================================================================
   Legal services archive (legal_service) — карточки услуг на общем
   listings-shell: кремовый фон, оливковый, золотые акценты
   ===================================================================== */

/* ---------- Сетка: 3 → 2 → 1 колонка ---------- */
.vlora-services__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.4vw, 2rem); }
@media (max-width: 900px) { .vlora-services__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .vlora-services__grid { grid-template-columns: 1fr; } }

.vlora-services__empty { margin: 0; color: var(--o-muted); }

/* ---------- Карточка ---------- */
.vlora-service-card {
	position: relative; display: flex; flex-direction: column; align-items: center; gap: 1.1rem;
	min-height: 17rem; padding: 2.25rem 1.75rem 2rem; text-align: center;
	background: var(--vlora-color-surface); color: var(--o-ink);
	border: 1px solid var(--vlora-color-border); border-radius: var(--vlora-radius);
	box-shadow: 0 .5rem 1.5rem rgba(60, 50, 30, .06);
	transition: transform .35s cubic-bezier(.2, .7, .2, 1), border-color .35s, box-shadow .35s;
}
.vlora-service-card:hover, .vlora-service-card:focus-within {
	transform: translateY(-4px); border-color: var(--o-gold); box-shadow: 0 1.25rem 2.5rem rgba(60, 50, 30, .14);
}
.vlora-service-card__icon { display: block; line-height: 0; color: var(--o-olive); }
.vlora-service-card__icon-img { display: block; width: 2.5rem; height: 2.5rem; object-fit: contain; }
.vlora-service-card__title { margin: 0; font: 400 clamp(1.6rem, 2vw, 2rem)/1.1 var(--o-script); }
.vlora-service-card__excerpt { margin: 0; font-size: .9375rem; line-height: 1.55; }

/* ---------- Анимация появления: карточки выезжают при попадании в экран (--i задаёт JS) ---------- */
@keyframes vl-card-in { from { opacity: 0; transform: translateY(2rem); } to { opacity: 1; transform: none; } }
.vl-js .vlora-service-card { opacity: 0; }
.vl-js .vlora-service-card.is-visible {
	opacity: 1;
	animation: vl-card-in .85s cubic-bezier(.2, .7, .2, 1) backwards;
	animation-delay: calc(var(--i, 0) * 100ms);
}