/* =============================================================
   template-parts/case-study/case-gallery/case-gallery.css
   Scoped styles for: .rev-gallery-grid, .rev-gallery-card,
   .rev-big-word, .rev-gallery-title, .rev-gallery-sub,
   .rev-gallery-images, .rev-arrow, .rev-full-video.
   Global reset + body bg live in assets/css/global.css.
   ============================================================= */

/* ── GALLERY GRID ── */
.rev-gallery-grid {
	display:               grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
	gap:                   18px;
	margin-top:            20px;
}

/* ── GALLERY CARD ── */
.rev-gallery-card {
	background:    #050505;
	border:        1px solid #1b1b1b;
	border-radius: 16px;
	padding:       18px;
	overflow:      hidden;
	position:      relative;
	cursor:        pointer;
	transition:    border-color .25s, transform .25s;
	user-select:   none;
	-webkit-user-select: none;
}

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

.rev-gallery-card--video {
	cursor: default;
}

/* ── BIG BACKGROUND WORD ── */
.rev-big-word {
	position:             absolute;
	top:                  10px;
	left:                 15px;
	font-family: var(--font-primary);
	font-size:            64px;
	font-weight:          800;
	color:                transparent;
	-webkit-text-stroke:  1px #1c1c1c;
	pointer-events:       none;
}

/* ── GALLERY TITLE ── */
.rev-gallery-title {
	position:    relative;
	z-index:     2;
	font-family: var(--font-primary);
	font-size:   30px;
	font-weight: 700;
	margin-top:  22px;
	color:       var(--ink);
}

/* ── GALLERY SUB ── */
.rev-gallery-sub {
	color:         var(--muted);
	margin-bottom: 22px;
}

/* ── GALLERY IMAGES STRIP ── */
.rev-gallery-images,
.rev-gallery-videos {
	display: flex;
	gap:     8px;
}

.rev-gallery-images img,
.rev-gallery-videos .rev-video-embed {
	width:         20%;
	height:        140px;
	border-radius: 10px;
	overflow:      hidden;
	background:    #0b0b0b;
	filter:        grayscale(100%);
	transition:    .4s;
	flex-shrink:   0;
}

.rev-gallery-videos .rev-video-thumb {
	position:        relative;
	display:         block;
	text-decoration: none;
}

.rev-gallery-videos .rev-video-thumb img {
	width:      100%;
	height:     100%;
	object-fit: cover;
	display:    block;
	filter:     grayscale(100%);
	transition: .4s;
}

.rev-gallery-videos .rev-video-thumb:hover img {
	filter: grayscale(0);
}

.rev-video-thumb__play {
	position:        absolute;
	left:            50%;
	top:             50%;
	width:           34px;
	height:          34px;
	border-radius:   50%;
	background:      rgba(0, 0, 0, .68);
	transform:       translate(-50%, -50%);
	display:         flex;
	align-items:     center;
	justify-content: center;
	pointer-events:  none;
}

.rev-video-thumb__play::before {
	content: "";
	width:   13px;
	height:  14px;
	margin-left: 3px;
	background: var(--ink);
	clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.rev-gallery-videos--single .rev-video-embed {
	width:  100%;
	height: clamp(220px, 28vw, 360px);
	filter: none;
}

.rev-gallery-videos--single .rev-video-embed:hover {
	transform: none;
}

.rev-gallery-images img {
	object-fit: cover;
}

.rev-gallery-images img:hover,
.rev-gallery-videos .rev-video-embed:hover {
	filter:    grayscale(0);
	transform: translateY(-5px);
}

.rev-gallery-videos .rev-video-embed iframe,
.rev-gallery-videos .rev-video-embed video {
	width:   100%;
	height:  100%;
	border:  0;
	display: block;
}

.rev-gallery-videos .rev-video-embed--instagram {
	display:         flex;
	align-items:     center;
	justify-content: center;
}

.rev-gallery-videos .instagram-media {
	min-width: 0 !important;
	width:     100% !important;
	height:    100% !important;
	margin:    0 !important;
}

.rev-video-embed--link {
	color:           var(--ink);
	text-decoration: none;
	align-items:     center;
	justify-content: center;
	display:         flex;
	font-size:       12px;
}

/* ── ARROW BUTTON ── */
.rev-arrow {
	position:        absolute;
	right:           18px;
	bottom:          18px;
	width:           52px;
	height:          52px;
	border-radius:   50%;
	border:          1px solid #2b2b2b;
	display:         flex;
	align-items:     center;
	justify-content: center;
	font-size:       24px;
	color:           var(--ink);
	background:      #080808;
	user-select:     none;
	-webkit-user-select: none;
}

/* ── FULL WIDTH VIDEO ── */
.rev-full-video {
	padding: 40px 60px;
}

.rev-full-video video {
	width:         100%;
	border-radius: 24px;
	display:       block;
}

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

@media (max-width: 768px) {
	.rev-full-video {
		padding: 20px 24px;
	}

	.rev-gallery-images img,
	.rev-gallery-videos .rev-video-embed {
		height: 90px;
	}

	.rev-gallery-videos--single .rev-video-embed {
		height: 220px;
	}

	.rev-big-word {
		font-size: 40px;
	}
}