/* =============================================================
   template-parts/case-study/case-next/case-next.css
   Scoped styles for: .rev-next, .rev-next-wrap, .rev-next-left,
   .rev-next-label, .rev-next-title, .rev-next-card.
   Global reset + body bg live in assets/css/global.css.
   ============================================================= */

/* ── NEXT SECTION ── */
.rev-next {
	padding:    140px 60px;
	border-top: 1px solid #1a1a1a;
}

/* ── NEXT WRAP ── */
.rev-next-wrap {
	max-width:             1500px;
	margin:                auto;
	display:               grid;
	grid-template-columns: 1fr 720px;
	align-items:           center;
	gap:                   120px;
}

/* ── NEXT LABEL ── */
.rev-next-label {
	font-size:      13px;
	letter-spacing: 4px;
	text-transform: uppercase;
	color:          var(--soft-grey);
	margin-bottom:  25px;
}

/* ── NEXT TITLE ── */
.rev-next-title {
	display:         inline-block;
	font-family: var(--font-primary);
	font-size:       clamp(4rem, 6vw, 7rem);
	font-weight:     800;
	line-height:     .95;
	letter-spacing:  -0.06em;
	color:           var(--muted);
	text-decoration: none;
	transition:      .35s;
}

.rev-next-title:hover {
	transform: translateX(12px);
	color:     var(--ink);
}

/* ── NEXT CARD (image container) ── */
.rev-next-card {
	display:         flex;
	align-items:     center;
	justify-content: center;
	overflow:        hidden;
	border-radius:   42px;
	background:      #000;
	border:          1px solid #1b1b1b;
	padding:         30px;
	min-height:      420px;
	text-decoration: none;
	transition:      .4s;
}

.rev-next-card:hover {
	transform: translateY(-8px);
}

.rev-next-card img {
	width:      100%;
	height:     auto;
	max-height: 320px;
	object-fit: contain;
	display:    block;
	transition: .4s;
}

.rev-next-card:hover img {
	transform: scale(1.06);
}

.rev-next-card span {
	font-family: var(--font-primary);
	font-size:   clamp(2rem, 4vw, 4.5rem);
	font-weight: 800;
	line-height: .95;
	color:       var(--muted);
	text-align:  center;
	text-transform: uppercase;
}

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

@media (max-width: 768px) {
	.rev-next {
		padding: 80px 24px;
	}

	.rev-next-title {
		font-size: 3rem;
	}
}