/* Sarmed Contracting – Project media (gallery + videos). Loaded on single project pages. */

.sc-pm {
	--pm-gold: var(--sc-gold, #C79F40);
	--pm-ink: #121212;
	--pm-radius: 14px;
	--pm-gap: 12px;
	padding: 64px 0;
	background: #fff;
}
.sc-pm__inner { display: flex; flex-direction: column; gap: 24px; }

.sc-pm__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}
.sc-pm__heading { display: flex; flex-direction: column; gap: 10px; }
.sc-pm .sc-pm__eyebrow,
.sc-pm .sc-pm__title { margin: 0; }
.sc-pm__meta {
	margin: 0;
	font-family: var(--sc-font-body, Poppins, sans-serif);
	font-size: 14px;
	font-weight: 500;
	color: var(--sc-muted, #585367);
}

/* ---------- Gallery grid ---------- */
.sc-pm-grid {
	display: grid;
	gap: var(--pm-gap);
	height: clamp(380px, 46vw, 600px);
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
}
.sc-pm-grid[data-count="1"] { height: auto; }
.sc-pm-grid[data-count="1"] .sc-pm-grid__item { aspect-ratio: 16 / 9; max-height: 680px; }
.sc-pm-grid[data-count="2"] { grid-template-columns: 1fr 1fr; }
.sc-pm-grid[data-count="3"] { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; }
.sc-pm-grid[data-count="4"] { grid-template-columns: 2fr 1fr; grid-template-rows: repeat(3, 1fr); }
.sc-pm-grid[data-count="5"] { grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr; }
.sc-pm-grid[data-count="3"] > :first-child { grid-row: span 2; }
.sc-pm-grid[data-count="4"] > :first-child { grid-row: span 3; }
.sc-pm-grid[data-count="5"] > :first-child { grid-row: span 2; }

.sc-pm-grid__item {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--pm-radius);
	background: #1C1C1C;
	min-width: 0;
	min-height: 0;
	cursor: zoom-in;
	outline-offset: 3px;
}
.sc-pm-grid__item[hidden] { display: none; }
.sc-pm-grid__item:focus-visible { outline: 3px solid var(--pm-gold); }
.sc-pm-grid .sc-pm-grid__img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	transition: transform .6s ease;
}
.sc-pm-grid__item:hover .sc-pm-grid__img { transform: scale(1.035); }

.sc-pm-grid__zoom {
	position: absolute;
	right: 14px;
	bottom: 14px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba(18, 18, 18, .72) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' viewBox='0 0 24 24'%3E%3Cpath d='M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7'/%3E%3C/svg%3E") center / 18px no-repeat;
	opacity: 0;
	transform: translateY(4px);
	transition: opacity .25s, transform .25s;
}
.sc-pm-grid__item:hover .sc-pm-grid__zoom,
.sc-pm-grid__item:focus-visible .sc-pm-grid__zoom { opacity: 1; transform: none; }

.sc-pm-grid__more {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	background: rgba(10, 10, 10, .58);
	color: #fff;
	font-family: var(--sc-font-heading, Poppins, sans-serif);
	font-weight: 600;
	font-size: clamp(18px, 2vw, 24px);
	letter-spacing: .01em;
}

.sc-pm__actions { display: flex; }
.sc-pm__all {
	appearance: none;
	border: 1.5px solid var(--pm-ink);
	background: transparent;
	color: var(--pm-ink);
	border-radius: 999px;
	padding: 12px 24px;
	font-family: var(--sc-font-body, Poppins, sans-serif);
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	transition: background .2s, color .2s;
}
.sc-pm__all:hover,
.sc-pm__all:focus-visible { background: var(--pm-ink); color: #fff; }

/* ---------- Videos ---------- */
.sc-pm--videos { background: #121212; }
.sc-pm--videos .sc-pm__title { color: #fff; }
.sc-pm--videos .sc-pm__meta { color: rgba(255, 255, 255, .6); }
.sc-pm-vgrid { display: grid; gap: 20px; grid-template-columns: 1fr 1fr; }
.sc-pm-vgrid > :first-child { grid-column: 1 / -1; }
.sc-pm-vgrid[data-count="2"] > :first-child { grid-column: auto; }

.sc-pm-video { margin: 0; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.sc-pm-video__frame {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: var(--pm-radius);
	overflow: hidden;
	background: #000;
}
.sc-pm-video__frame video,
.sc-pm-video__frame iframe,
.sc-pm-yt,
.sc-pm-yt img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}
.sc-pm-video__frame video { object-fit: contain; background: #000; }
.sc-pm-yt { padding: 0; margin: 0; background: #000; cursor: pointer; }
.sc-pm .sc-pm-yt img { height: 100%; max-width: none; object-fit: cover; opacity: .9; transition: opacity .3s, transform .6s; }
.sc-pm-yt:hover img { opacity: 1; transform: scale(1.02); }
.sc-pm-yt:focus-visible { outline: 3px solid var(--pm-gold); outline-offset: -3px; }
.sc-pm-play {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 84px;
	height: 84px;
	margin: -42px 0 0 -42px;
	border-radius: 50%;
	background: var(--pm-gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24' fill='%23121212'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") 55% 50% / 30px no-repeat;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
	transition: transform .25s;
}
.sc-pm-yt:hover .sc-pm-play { transform: scale(1.08); }
.sc-pm-video__cap {
	font-family: var(--sc-font-body, Poppins, sans-serif);
	font-size: 15px;
	font-weight: 500;
	color: rgba(255, 255, 255, .85);
}

/* ---------- Lightbox ---------- */
.sc-lb {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: rgba(8, 8, 8, .96);
	color: #fff;
	font-family: var(--sc-font-body, Poppins, sans-serif);
}
.sc-lb::backdrop { background: rgba(8, 8, 8, .96); }
.sc-lb[open] { display: grid; grid-template-rows: auto 1fr auto; }
.sc-lb__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 18px;
	font-size: 14px;
	color: rgba(255, 255, 255, .75);
}
.sc-lb__stage {
	position: relative;
	display: grid;
	place-items: center;
	min-height: 0;
	padding: 0 72px;
	touch-action: pan-y;
}
.sc-lb .sc-lb__img {
	max-width: 100%;
	max-height: calc(100vh - 150px);
	max-height: calc(100dvh - 150px);
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: 6px;
	user-select: none;
	-webkit-user-drag: none;
}
.sc-lb__cap {
	margin: 0;
	padding: 12px 18px 20px;
	text-align: center;
	font-size: 14px;
	color: rgba(255, 255, 255, .8);
}
.sc-lb button {
	appearance: none;
	border: 0;
	cursor: pointer;
	color: #fff;
	background: rgba(255, 255, 255, .1);
	border-radius: 50%;
	width: 48px;
	height: 48px;
	display: grid;
	place-items: center;
	transition: background .2s;
	padding: 0;
}
.sc-lb button:hover,
.sc-lb button:focus-visible { background: var(--sc-gold, #C79F40); color: #121212; }
.sc-lb button svg { width: 22px; height: 22px; }
.sc-lb__prev,
.sc-lb__next { position: absolute; top: 50%; transform: translateY(-50%); }
.sc-lb__prev { left: 14px; }
.sc-lb__next { right: 14px; }
.sc-lb[data-single] .sc-lb__prev,
.sc-lb[data-single] .sc-lb__next { display: none; }
html.sc-lb-lock { overflow: hidden; }

/* ---------- Tablet ---------- */
@media (max-width: 1024px) {
	.sc-pm { padding: 52px 0; }
}

/* ---------- Mobile: swipeable strip ---------- */
@media (max-width: 767px) {
	.sc-pm { padding: 40px 0; }
	.sc-pm__inner { gap: 18px; }
	.sc-pm-grid,
	.sc-pm-grid[data-count] {
		height: auto;
		display: grid;
		grid-template-columns: none;
		grid-template-rows: none;
		grid-auto-flow: column;
		grid-auto-columns: 86%;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		overscroll-behavior-x: contain;
		scrollbar-width: none;
		margin-inline: -16px;
		padding-inline: 16px;
		scroll-padding-inline: 16px;
	}
	.sc-pm-grid::-webkit-scrollbar { display: none; }
	.sc-pm-grid[data-count="1"] { grid-auto-columns: 100%; }
	.sc-pm-grid > .sc-pm-grid__item {
		display: block;
		grid-row: auto !important;
		aspect-ratio: 4 / 3;
		max-height: none;
		scroll-snap-align: start;
	}
	.sc-pm-grid > .sc-pm-grid__item[hidden] { display: none; }
	.sc-pm-grid__zoom { opacity: 1; transform: none; width: 34px; height: 34px; right: 10px; bottom: 10px; background-size: 15px; }
	.sc-pm__actions .sc-pm__all { width: 100%; }

	.sc-pm-vgrid { grid-template-columns: 1fr; gap: 16px; }
	.sc-pm-vgrid > * { grid-column: auto !important; }
	.sc-pm-play { width: 64px; height: 64px; margin: -32px 0 0 -32px; background-size: 24px; }

	.sc-lb__stage { padding: 0 8px; }
	.sc-lb__prev,
	.sc-lb__next { top: auto; bottom: -58px; transform: none; }
	.sc-lb__prev { left: 18px; }
	.sc-lb__next { right: 18px; }
	.sc-lb__cap { padding: 14px 76px 22px; font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
	.sc-pm-grid__img,
	.sc-pm-yt img,
	.sc-pm-play { transition: none; }
}