/**
 * M Portfolio – frontend styles.
 *
 * Layouts: masonry (CSS-columns fallback, JS grid enhancement),
 * grid, justified (JS), single column.
 * All colors/typography flow through CSS custom properties so the
 * settings screen and Elementor controls can override them.
 */

/* ---------------------------------------------------------------- wrapper */

.m-portfolio-wrap {
	--m-portfolio-cols: 3;
	--m-portfolio-cols-tablet: 2;
	--m-portfolio-cols-mobile: 1;
	--m-portfolio-gap: 16px;
	--m-portfolio-duration: 300ms;
	--m-portfolio-zoom: 1.05;
	background: var(--m-portfolio-background, transparent);
}

.m-portfolio-wrap *,
.m-portfolio-wrap *::before,
.m-portfolio-wrap *::after {
	box-sizing: border-box;
}

/* ------------------------------------------------------------------ items */

.m-portfolio-item {
	margin: 0;
	position: relative;
}

.m-portfolio-item-link {
	display: block;
	text-decoration: none;
	color: inherit;
	outline-offset: 3px;
}

.m-portfolio-item-link:focus-visible {
	outline: 2px solid var(--m-portfolio-accent, #1a1a1a);
}

.m-portfolio-item-media {
	display: block;
	position: relative;
	overflow: hidden;
	background: #f2f2f0;
}

.m-portfolio-item-media img.m-portfolio-img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
	transition: transform var(--m-portfolio-duration) ease;
	will-change: transform;
}

.m-portfolio-item-placeholder {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	background: linear-gradient(135deg, #f4f4f2 0%, #e9e9e6 100%);
}

.m-portfolio-animated .m-portfolio-item:hover .m-portfolio-item-media img.m-portfolio-img,
.m-portfolio-animated .m-portfolio-item-link:focus-visible img.m-portfolio-img {
	transform: scale(var(--m-portfolio-zoom));
}

/* ---------------------------------------------------------------- overlay */

.m-portfolio-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	pointer-events: none;
	opacity: 0;
	transition: opacity var(--m-portfolio-duration) ease;
}

.m-portfolio-overlay-inner {
	display: block;
	padding: 14px 18px;
	max-width: 100%;
	transition:
		transform var(--m-portfolio-duration) ease,
		opacity var(--m-portfolio-duration) ease;
}

.m-portfolio-item-title {
	display: block;
	font-family: var(--m-portfolio-title-font, inherit);
	font-size: var(--m-portfolio-title-size, 16px);
	font-weight: var(--m-portfolio-title-weight, 500);
	letter-spacing: var(--m-portfolio-title-spacing, 0.4px);
	line-height: var(--m-portfolio-title-lh, 1.4);
	text-transform: var(--m-portfolio-title-transform, none);
	color: var(--m-portfolio-title, #ffffff);
	overflow-wrap: break-word;
}

.m-portfolio-item:hover .m-portfolio-item-title {
	color: var(--m-portfolio-title-hover, #ffffff);
}

.m-portfolio-item-category {
	display: block;
	margin-top: 2px;
	font-size: 0.72em;
	font-weight: 400;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--m-portfolio-title, #ffffff);
	opacity: 0.75;
}

/* Position: bottom (full-width gradient strip — the default) */
.m-portfolio-hover-bottom .m-portfolio-overlay {
	align-items: flex-end;
	background: linear-gradient(
		to top,
		rgba(var(--m-portfolio-overlay, 0, 0, 0), var(--m-portfolio-overlay-opacity, 0.55)) 0%,
		rgba(var(--m-portfolio-overlay, 0, 0, 0), 0) 55%
	);
}

.m-portfolio-hover-bottom .m-portfolio-overlay-inner {
	width: 100%;
}

/* Position: small card variants */
.m-portfolio-hover-bottom-left .m-portfolio-overlay,
.m-portfolio-hover-bottom-center .m-portfolio-overlay,
.m-portfolio-hover-bottom-right .m-portfolio-overlay {
	align-items: flex-end;
	padding: 12px;
}

.m-portfolio-hover-bottom-left .m-portfolio-overlay { justify-content: flex-start; }
.m-portfolio-hover-bottom-center .m-portfolio-overlay { justify-content: center; text-align: center; }
.m-portfolio-hover-bottom-right .m-portfolio-overlay { justify-content: flex-end; text-align: right; }

.m-portfolio-hover-bottom-left .m-portfolio-overlay-inner,
.m-portfolio-hover-bottom-center .m-portfolio-overlay-inner,
.m-portfolio-hover-bottom-right .m-portfolio-overlay-inner,
.m-portfolio-hover-center .m-portfolio-overlay-inner {
	background: rgba(var(--m-portfolio-overlay, 0, 0, 0), var(--m-portfolio-overlay-opacity, 0.55));
	padding: 10px 16px;
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
}

/* Position: center */
.m-portfolio-hover-center .m-portfolio-overlay {
	align-items: center;
	justify-content: center;
	text-align: center;
}

/* Hover state reveals the overlay */
.m-portfolio-item:hover .m-portfolio-overlay,
.m-portfolio-item-link:focus-visible .m-portfolio-overlay {
	opacity: 1;
}

/* Animations */
.m-portfolio-anim-slide-up .m-portfolio-overlay-inner { transform: translateY(12px); }
.m-portfolio-anim-slide-down .m-portfolio-overlay-inner { transform: translateY(-12px); }
.m-portfolio-anim-zoom .m-portfolio-overlay-inner { transform: scale(0.92); }

.m-portfolio-anim-slide-up .m-portfolio-item:hover .m-portfolio-overlay-inner,
.m-portfolio-anim-slide-down .m-portfolio-item:hover .m-portfolio-overlay-inner,
.m-portfolio-anim-zoom .m-portfolio-item:hover .m-portfolio-overlay-inner,
.m-portfolio-anim-slide-up .m-portfolio-item-link:focus-visible .m-portfolio-overlay-inner,
.m-portfolio-anim-slide-down .m-portfolio-item-link:focus-visible .m-portfolio-overlay-inner,
.m-portfolio-anim-zoom .m-portfolio-item-link:focus-visible .m-portfolio-overlay-inner {
	transform: none;
}

.m-portfolio-anim-none .m-portfolio-overlay,
.m-portfolio-anim-none .m-portfolio-overlay-inner {
	transition: none;
}

/* Hover disabled */
.m-portfolio-hover-off .m-portfolio-overlay { display: none; }

/* Title below image — hidden unless the mobile-below fallback applies */
.m-portfolio-item-below {
	display: none;
	padding: 10px 2px 0;
}

.m-portfolio-item-below .m-portfolio-item-title {
	color: var(--m-portfolio-text, #1a1a1a);
}

.m-portfolio-item-below .m-portfolio-item-category {
	color: var(--m-portfolio-secondary, #777);
	opacity: 1;
}

/* Touch devices: no hover state exists */
@media (hover: none) {
	.m-portfolio-mobile-always .m-portfolio-overlay {
		opacity: 1;
	}
	.m-portfolio-mobile-always .m-portfolio-overlay-inner {
		transform: none;
	}
	.m-portfolio-mobile-below .m-portfolio-overlay {
		display: none;
	}
	.m-portfolio-mobile-below .m-portfolio-item-below {
		display: block;
	}
	.m-portfolio-mobile-none .m-portfolio-overlay {
		display: none;
	}
}

/* -------------------------------------------------------- layout: masonry */

/* No-JS fallback: CSS columns (order flows down each column). */
.m-portfolio-layout-masonry {
	column-count: var(--m-portfolio-cols);
	column-gap: var(--m-portfolio-gap);
}

.m-portfolio-layout-masonry .m-portfolio-item {
	break-inside: avoid;
	margin-bottom: var(--m-portfolio-gap);
}

/* JS enhancement: true masonry with row-major ordering via grid row spans. */
.m-portfolio-layout-masonry.m-js {
	column-count: auto;
	display: grid;
	grid-template-columns: repeat(var(--m-portfolio-cols), 1fr);
	grid-auto-rows: 1px;
	column-gap: var(--m-portfolio-gap);
	row-gap: 0;
}

.m-portfolio-layout-masonry.m-js .m-portfolio-item {
	margin-bottom: 0;
}

/* ----------------------------------------------------------- layout: grid */

.m-portfolio-layout-grid {
	display: grid;
	grid-template-columns: repeat(var(--m-portfolio-cols), 1fr);
	gap: var(--m-portfolio-gap);
}

.m-portfolio-layout-grid .m-portfolio-item-media {
	aspect-ratio: 1 / 1;
}

.m-portfolio-layout-grid .m-portfolio-item-media img.m-portfolio-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Optional crop ratios (grid layout only) */
.m-portfolio-ratio-4-3 .m-portfolio-item-media { aspect-ratio: 4 / 3; }
.m-portfolio-ratio-3-4 .m-portfolio-item-media { aspect-ratio: 3 / 4; }
.m-portfolio-ratio-16-9 .m-portfolio-item-media { aspect-ratio: 16 / 9; }
.m-portfolio-ratio-1-1 .m-portfolio-item-media { aspect-ratio: 1 / 1; }

/* ------------------------------------------------------ layout: justified */

.m-portfolio-layout-justified {
	display: flex;
	flex-wrap: wrap;
	gap: var(--m-portfolio-gap);
}

.m-portfolio-layout-justified .m-portfolio-item {
	flex: 1 1 auto;
}

.m-portfolio-layout-justified.m-js .m-portfolio-item {
	flex: 0 0 auto;
}

.m-portfolio-layout-justified .m-portfolio-item-media,
.m-portfolio-layout-justified .m-portfolio-item-media img.m-portfolio-img {
	height: 100%;
	width: 100%;
	object-fit: cover;
}

/* --------------------------------------------------------- layout: single */

.m-portfolio-layout-single {
	display: grid;
	grid-template-columns: 1fr;
	gap: calc(var(--m-portfolio-gap) * 2);
}

/* ------------------------------------------------------------- responsive */

@media (max-width: 1024px) {
	.m-portfolio-layout-masonry { column-count: var(--m-portfolio-cols-tablet); }
	.m-portfolio-layout-masonry.m-js,
	.m-portfolio-layout-grid {
		grid-template-columns: repeat(var(--m-portfolio-cols-tablet), 1fr);
	}
}

@media (max-width: 767px) {
	.m-portfolio-layout-masonry { column-count: var(--m-portfolio-cols-mobile); }
	.m-portfolio-layout-masonry.m-js,
	.m-portfolio-layout-grid {
		grid-template-columns: repeat(var(--m-portfolio-cols-mobile), 1fr);
	}
}

/* ----------------------------------------------------------------- filter */

.m-portfolio-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 8px;
	margin: 0 0 28px;
}

.m-portfolio-filter-btn {
	appearance: none;
	background: transparent;
	border: 0;
	border-bottom: 1px solid transparent;
	padding: 6px 10px;
	margin: 0;
	cursor: pointer;
	font-family: var(--m-portfolio-title-font, inherit);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--m-portfolio-secondary, #777);
	transition: color 0.2s ease, border-color 0.2s ease;
}

.m-portfolio-filter-btn:hover,
.m-portfolio-filter-btn:focus-visible {
	color: var(--m-portfolio-text, #1a1a1a);
}

.m-portfolio-filter-btn:focus-visible {
	outline: 2px solid var(--m-portfolio-accent, #1a1a1a);
	outline-offset: 2px;
}

.m-portfolio-filter-btn.is-active {
	color: var(--m-portfolio-text, #1a1a1a);
	border-bottom-color: var(--m-portfolio-accent, #1a1a1a);
}

/* Filter transition */
.m-portfolio-animated .m-portfolio-item {
	transition: opacity 0.25s ease, transform 0.25s ease;
}

.m-portfolio-item.m-filtering {
	opacity: 0;
	transform: scale(0.98);
}

.m-portfolio-item.m-hidden {
	display: none;
}

/* ------------------------------------------------- load more / pagination */

.m-portfolio-load-more-wrap {
	text-align: center;
	margin-top: 36px;
}

.m-portfolio-load-more {
	appearance: none;
	background: transparent;
	border: 1px solid var(--m-portfolio-border, #e5e5e5);
	color: var(--m-portfolio-text, #1a1a1a);
	font-family: var(--m-portfolio-title-font, inherit);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 2px;
	text-transform: uppercase;
	padding: 14px 44px;
	cursor: pointer;
	transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.m-portfolio-load-more:hover,
.m-portfolio-load-more:focus-visible {
	background: var(--m-portfolio-accent, #1a1a1a);
	border-color: var(--m-portfolio-accent, #1a1a1a);
	color: #fff;
}

.m-portfolio-load-more:focus-visible {
	outline: 2px solid var(--m-portfolio-accent, #1a1a1a);
	outline-offset: 3px;
}

.m-portfolio-load-more[disabled] {
	opacity: 0.5;
	cursor: default;
}

.m-portfolio-pagination {
	margin-top: 36px;
	text-align: center;
}

.m-portfolio-pagination .page-numbers {
	display: inline-block;
	padding: 8px 14px;
	margin: 0 2px;
	color: var(--m-portfolio-secondary, #777);
	text-decoration: none;
	font-size: 14px;
	border-bottom: 1px solid transparent;
	transition: color 0.2s ease;
}

.m-portfolio-pagination .page-numbers.current,
.m-portfolio-pagination .page-numbers:hover {
	color: var(--m-portfolio-text, #1a1a1a);
	border-bottom-color: var(--m-portfolio-accent, #1a1a1a);
}

.m-portfolio-infinite-sentinel {
	height: 1px;
}

.m-portfolio-status {
	text-align: center;
	margin-top: 16px;
	font-size: 13px;
	letter-spacing: 1px;
	color: var(--m-portfolio-secondary, #777);
	min-height: 1em;
}

/* ------------------------------------------------------------ empty state */

.m-portfolio-empty {
	text-align: center;
	padding: 60px 20px;
	color: var(--m-portfolio-secondary, #777);
	font-size: 15px;
	letter-spacing: 0.5px;
	border: 1px dashed var(--m-portfolio-border, #e5e5e5);
}

/* ------------------------------------------------------------ detail page */

.m-portfolio-single {
	max-width: 1200px;
	margin: 0 auto;
	padding: clamp(24px, 5vw, 64px) 20px;
	color: var(--m-portfolio-text, #1a1a1a);
}

.m-portfolio-single-header {
	text-align: center;
	margin-bottom: clamp(28px, 5vw, 56px);
}

.m-portfolio-single-title {
	font-family: var(--m-portfolio-title-font, inherit);
	font-weight: var(--m-portfolio-title-weight, 500);
	letter-spacing: 2px;
	text-transform: uppercase;
	font-size: clamp(24px, 4vw, 40px);
	line-height: 1.2;
	margin: 0 0 14px;
	color: var(--m-portfolio-text, #1a1a1a);
}

.m-portfolio-single-meta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px 22px;
	font-size: 13px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--m-portfolio-secondary, #777);
}

.m-portfolio-meta-link {
	color: var(--m-portfolio-accent, #1a1a1a);
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	transition: opacity 0.2s ease;
}

.m-portfolio-meta-link:hover { opacity: 0.65; }

.m-portfolio-single-cover {
	margin: 0 0 clamp(24px, 4vw, 48px);
}

.m-portfolio-single-cover img {
	display: block;
	width: 100%;
	height: auto;
}

.m-portfolio-single-description {
	max-width: 720px;
	margin: 0 auto clamp(28px, 5vw, 56px);
	font-size: 16px;
	line-height: 1.8;
	color: var(--m-portfolio-text, #1a1a1a);
}

/* Detail gallery: JS masonry, CSS-columns fallback */
.m-portfolio-detail-gallery {
	--m-portfolio-cols: 2;
	--m-portfolio-gap: 16px;
	column-count: var(--m-portfolio-cols);
	column-gap: var(--m-portfolio-gap);
}

.m-portfolio-detail-gallery.m-js {
	column-count: auto;
	display: grid;
	grid-template-columns: repeat(var(--m-portfolio-cols), 1fr);
	grid-auto-rows: 1px;
	column-gap: var(--m-portfolio-gap);
}

.m-portfolio-gallery-figure {
	margin: 0 0 var(--m-portfolio-gap);
	break-inside: avoid;
}

.m-portfolio-detail-gallery.m-js .m-portfolio-gallery-figure {
	margin-bottom: 0;
}

.m-portfolio-gallery-figure img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
}

.m-portfolio-gallery-link {
	display: block;
	cursor: zoom-in;
	outline-offset: 3px;
}

.m-portfolio-gallery-link:focus-visible {
	outline: 2px solid var(--m-portfolio-accent, #1a1a1a);
}

.m-portfolio-gallery-caption {
	padding: 8px 2px 2px;
	font-size: 13px;
	letter-spacing: 0.5px;
	color: var(--m-portfolio-secondary, #777);
}

@media (max-width: 767px) {
	.m-portfolio-detail-gallery,
	.m-portfolio-detail-gallery.m-js {
		--m-portfolio-cols: 1;
	}
}

.m-portfolio-single-footer {
	margin-top: clamp(32px, 5vw, 64px);
	text-align: center;
}

.m-portfolio-back-link {
	font-size: 13px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--m-portfolio-secondary, #777);
	text-decoration: none;
	transition: color 0.2s ease;
}

.m-portfolio-back-link:hover {
	color: var(--m-portfolio-text, #1a1a1a);
}

/* ------------------------------------------------------- archive template */

.m-portfolio-archive-main {
	max-width: 1300px;
	margin: 0 auto;
	padding: clamp(24px, 5vw, 64px) 20px;
}

.m-portfolio-archive-title {
	font-family: var(--m-portfolio-title-font, inherit);
	text-align: center;
	letter-spacing: 3px;
	text-transform: uppercase;
	font-size: clamp(22px, 3.5vw, 34px);
	margin: 0 0 clamp(28px, 5vw, 48px);
	color: var(--m-portfolio-text, #1a1a1a);
}

/* --------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
	.m-portfolio-wrap *,
	.m-portfolio-wrap *::before,
	.m-portfolio-wrap *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}