/* =============================================================
   template-parts/case-study/case-what-we-did/case-what-we-did.css
   Scoped styles for: .rev-what-we-did, .rev-cards,
   .rev-info-card, .rev-icon.
   Global reset + body bg live in assets/css/global.css.
   ============================================================= */

/* ── SECTION WRAPPER ── */
.rev-what-we-did {
	margin-top: 15px;
}

/* ── CARDS GRID ── */
.rev-cards {
	display:               grid;
	grid-template-columns: repeat(3, 1fr);
	gap:                   18px;
	margin-top:            18px;
}

/* ── INFO CARD ── */
.rev-info-card {
	background:     #070707;
	border:         1px solid #1b1b1b;
	border-radius:  16px;
	padding:        24px;
	display:        flex;
	gap:            18px;
	align-items:    flex-start;
	cursor:         pointer;
	transition:     border-color .25s, transform .25s, background .25s;
	user-select:    none;
	-webkit-user-select: none;
}

.rev-info-card:hover {
	border-color: #444;
	background:   #0d0d0d;
	transform:    translateY(-8px) scale(1.02);
}

/* ── ICON ── */
.rev-icon {
	width:           56px;
	height:          56px;
	border-radius:   50%;
	background:      #111;
	border:          1px solid #262626;
	display:         flex;
	justify-content: center;
	align-items:     center;
	font-size:       24px;
	color:           var(--muted);
	flex-shrink:     0;
	user-select:     none;
	-webkit-user-select: none;
}

/* ── CARD TEXT ── */
.rev-info-card h4 {
	font-family: var(--font-primary);
	font-size:     16px;
	font-weight:   600;
	margin-bottom: 10px;
	color:         var(--ink);
}

.rev-info-card p {
	font-size:   14px;
	line-height: 1.8;
	color:       var(--muted);
}

/* ── RESPONSIVE ── */
@media (max-width: 1100px) {
	.rev-cards {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 768px) {
	.rev-info-card {
		padding: 18px;
	}

	.rev-icon {
		width:     44px;
		height:    44px;
		font-size: 18px;
	}
}