/* ===========================================================
   cards.css — service / case / product / team / insight cards.
   =========================================================== */

.card {
	display: block;
	background: var(--vc-bg-alt);
	border: 1px solid var(--vc-line);
	border-radius: var(--vc-radius-lg);
	overflow: hidden;
	color: inherit;
	transition: transform var(--vc-dur) var(--vc-ease), border-color var(--vc-dur) var(--vc-ease), background var(--vc-dur) var(--vc-ease);
	position: relative;
	will-change: transform;
}
.card:hover { transform: translateY(-4px); border-color: var(--vc-line-strong); }

/* ---- Service ----------------------------------------- */
.card--service {
	padding: var(--vc-s-8);
	display: flex; flex-direction: column; gap: var(--vc-s-3);
	min-height: 260px;
}
.card--service__icon {
	width: 56px; height: 56px;
	border-radius: var(--vc-radius);
	background: var(--vc-bg-soft);
	display: inline-flex; align-items: center; justify-content: center;
	margin-bottom: var(--vc-s-2);
}
.card--service__title { font-size: var(--vc-text-xl); margin: 0; }
.card--service__tag { color: var(--vc-fg-soft); margin: 0; }
.card--service__cta { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; color: var(--vc-fg); font-family: var(--vc-font-display); font-size: var(--vc-text-sm); }
.card--service__cta span { transition: transform var(--vc-dur) var(--vc-ease); }
.card--service:hover .card--service__cta span { transform: translateX(4px); }

/* ---- Case study --------------------------------------- */
.card--case { padding: 0; display: flex; flex-direction: column; }
.card--case__media { position: relative; aspect-ratio: 4/3; overflow: hidden; }
.card--case__img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--vc-ease-out); }
.card--case:hover .card--case__img { transform: scale(1.04); }
.card--case__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgba(10,10,15,.6) 100%); }
.card--case__body { padding: var(--vc-s-6); }
.card--case__meta { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--vc-s-2); font-size: var(--vc-text-sm); color: var(--vc-muted); }
.card--case__year { font-family: var(--vc-font-display); }
.card--case__title { margin: 0 0 var(--vc-s-2); font-size: var(--vc-text-xl); }
.card--case__services { color: var(--vc-fg-soft); font-size: var(--vc-text-sm); margin: 0; }

/* ---- Product ------------------------------------------ */
.card--product {
	padding: var(--vc-s-8);
	display: flex; flex-direction: column; gap: var(--vc-s-3);
	min-height: 280px;
}
.card--product__top { display: flex; align-items: center; justify-content: space-between; }
.card--product__logo { width: 48px; height: 48px; border-radius: var(--vc-radius-sm); }
.card--product__title { font-size: var(--vc-text-xl); margin: var(--vc-s-2) 0 0; }
.card--product__tag { color: var(--vc-fg-soft); margin: 0; }
.card--product__cta { margin-top: auto; display: inline-flex; gap: 6px; font-family: var(--vc-font-display); font-size: var(--vc-text-sm); }

/* ---- Team --------------------------------------------- */
.card--team { padding: 0; display: flex; flex-direction: column; }
.card--team__media { aspect-ratio: 5/6; background: var(--vc-bg-soft); overflow: hidden; }
.card--team__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--vc-ease-out); }
.card--team:hover .card--team__media img { transform: scale(1.04); }
.card--team__body { padding: var(--vc-s-5); }
.card--team__name { font-size: var(--vc-text-lg); margin: 0; }
.card--team__role { font-size: var(--vc-text-sm); color: var(--vc-muted); display: block; margin-top: var(--vc-s-1); }
.card--team__bio { margin: var(--vc-s-2) 0 0; color: var(--vc-fg-soft); font-size: var(--vc-text-sm); }

/* ---- Insight ----------------------------------------- */
.card--insight { background: transparent; border: 0; border-radius: 0; }
.card--insight:hover { transform: none; }
.card--insight__link { display: block; color: inherit; }
.card--insight__media {
	aspect-ratio: 16/10;
	background: var(--vc-bg-soft);
	border-radius: var(--vc-radius-lg);
	overflow: hidden; margin-bottom: var(--vc-s-5);
}
.card--insight__media img, .card--insight__placeholder {
	width: 100%; height: 100%; object-fit: cover; display: block;
	transition: transform 1s var(--vc-ease-out);
}
.card--insight__placeholder { background: linear-gradient(135deg, var(--vc-bg-soft), var(--vc-bg-alt)); }
.card--insight__link:hover .card--insight__media img { transform: scale(1.04); }
.card--insight__meta { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--vc-s-3); }
.card--insight__date { color: var(--vc-muted); font-size: var(--vc-text-sm); font-family: var(--vc-font-display); }
.card--insight__title { font-size: var(--vc-text-lg); margin: 0 0 var(--vc-s-2); transition: color var(--vc-dur) var(--vc-ease); }
.card--insight__excerpt { color: var(--vc-fg-soft); font-size: var(--vc-text-sm); margin: 0; }
.card--insight__cta { display: inline-flex; gap: 4px; margin-top: var(--vc-s-3); font-size: var(--vc-text-sm); font-family: var(--vc-font-display); }
.card--insight__link:hover .card--insight__title { color: var(--vc-accent); }

/* ---- Search ------------------------------------------- */
.card--search { background: var(--vc-bg-alt); border: 1px solid var(--vc-line); border-radius: var(--vc-radius); padding: var(--vc-s-6); }
.card--search__title { font-size: var(--vc-text-lg); margin: var(--vc-s-2) 0; }
.card--search__excerpt { color: var(--vc-fg-soft); font-size: var(--vc-text-sm); margin: 0 0 var(--vc-s-3); }
.card--search__cta { font-size: var(--vc-text-sm); font-family: var(--vc-font-display); }