/* SDO Portfolio Showcase — styles */

/* ===== SPACING SCALE (per SDO design system) ===== */
:root {
	--sdo-space-xs: 8px;
	--sdo-space-sm: 14px;
	--sdo-space-md: 24px;
	--sdo-space-lg: 40px;
	--sdo-space-xl: 64px;
}

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

.sdo-portfolio-wrap {
	position: relative;
	width: 100%;
	/* display: flow-root establishes a new block-formatting context so this
	   widget's internal margins can NEVER collapse through its top/bottom
	   edge and bleed into the Elementor section above/below it.
	   (Unlike overflow:hidden, this does not clip the fixed-position modal.) */
	display: flow-root;
	margin: 0;
}

/* ===== FILTER BAR ===== */
.sdo-filter-bar {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sdo-space-xs);
	margin-bottom: var(--sdo-space-md);
}

.sdo-filter-btn {
	appearance: none;
	border: 1px solid transparent;
	border-radius: 999px;
	padding: 9px 20px;
	font-size: 13.5px;
	font-weight: 600;
	background: rgba(255,255,255,.06);
	color: rgba(255,255,255,.65);
	cursor: pointer;
	transition: background .3s ease, color .3s ease, transform .2s ease, border-color .3s ease;
}

.sdo-filter-btn:hover { transform: translateY(-2px); }

.sdo-filter-btn.sdo-active {
	background: #7c5cff;
	color: #fff;
}

.sdo-card.sdo-filtered-out {
	display: none;
}

.sdo-portfolio-grid {
	--sdo-columns: 3;
	--sdo-gap: 28px;
	display: grid;
	grid-template-columns: repeat(var(--sdo-columns), 1fr);
	gap: var(--sdo-gap);
	width: 100%;
}

/* ===== CARD ===== */
.sdo-card {
	--sdo-card-bg: #12131a;
	--sdo-overlay-from: rgba(10,10,15,0);
	--sdo-overlay-to: rgba(0,0,0,0.9);
	--sdo-accent: #7c5cff;
	--sdo-radius: 20px;

	position: relative;
	border-radius: var(--sdo-radius);
	overflow: hidden;
	background: var(--sdo-card-bg);
	cursor: pointer;
	transform-style: preserve-3d;
	transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease;
	will-change: transform;
	aspect-ratio: 4 / 3;
}

.sdo-card__media {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.sdo-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
	display: block;
	transition: transform .6s ease, filter .6s ease;
	filter: saturate(0.9);
	opacity: 0;
}

.sdo-card__img.sdo-loaded {
	opacity: 1;
	animation: sdoImgReveal .6s ease forwards;
}

.sdo-card__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, var(--sdo-overlay-from) 35%, var(--sdo-overlay-to) 100%);
	transition: opacity .4s ease;
}

.sdo-card__badge {
	position: absolute;
	top: 16px;
	inset-inline-start: 16px;
	font-size: 11px;
	letter-spacing: .04em;
	padding: 6px 12px;
	border: 1px solid var(--sdo-accent, #7c5cff);
	border-radius: 999px;
	color: var(--sdo-accent, #7c5cff);
	background: rgba(0,0,0,.35);
	backdrop-filter: blur(6px);
}

.sdo-card__info {
	position: absolute;
	inset-inline-start: 0;
	inset-inline-end: 0;
	bottom: 0;
	padding: var(--sdo-space-md);
	display: flex;
	flex-direction: column;
	gap: var(--sdo-space-xs);
	transform: translateY(8px);
	transition: transform .45s ease;
}

.sdo-card__title {
	margin: 0;
	font-size: 19px;
	font-weight: 700;
	color: #fff;
	line-height: 1.35;
}

.sdo-card__host {
	font-size: 12.5px;
	color: rgba(255,255,255,.55);
	direction: ltr;
	text-align: start;
}

.sdo-card__btn {
	margin-top: var(--sdo-space-xs);
	display: inline-flex;
	align-items: center;
	gap: 8px;
	width: fit-content;
	padding: 9px 16px;
	border-radius: 999px;
	background: var(--sdo-accent, #7c5cff);
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity .35s ease .05s, transform .35s ease .05s, filter .2s ease;
}

.sdo-card__btn:hover { filter: brightness(1.1); color: #fff; }

/* hover states (desktop) */
@media (hover: hover) {
	.sdo-card:hover .sdo-card__img { transform: scale(1.08); filter: saturate(1); }
	.sdo-card:hover .sdo-card__info { transform: translateY(0); }
	.sdo-card:hover .sdo-card__btn { opacity: 1; transform: translateY(0); }
}

/* touch devices: always show info */
@media (hover: none) {
	.sdo-card__info { transform: translateY(0); }
	.sdo-card__btn { opacity: 1; transform: translateY(0); }
}

/* hover-effect: lift */
.sdo-portfolio-wrap[data-hover="lift"] .sdo-card:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(0,0,0,.35); }

/* hover-effect: zoom (only image, handled above by default) */
.sdo-portfolio-wrap[data-hover="zoom"] .sdo-card:hover { transform: none; }

/* hover-effect: tilt handled via JS inline transform (rotateX/rotateY) */

/* ===== SCROLL REVEAL ANIMATIONS ===== */
.sdo-anim {
	opacity: 0;
	transition-delay: var(--sdo-delay, 0ms);
	transition-property: opacity, transform;
	transition-duration: .7s;
	transition-timing-function: cubic-bezier(.2,.7,.2,1);
}

.sdo-portfolio-wrap[data-animation="fade-up"] .sdo-anim { transform: translateY(40px); }
.sdo-portfolio-wrap[data-animation="zoom-in"] .sdo-anim { transform: scale(.85); }
.sdo-portfolio-wrap[data-animation="flip"] .sdo-anim { transform: perspective(900px) rotateX(35deg); }
.sdo-portfolio-wrap[data-animation="none"] .sdo-anim { opacity: 1; transform: none; }

.sdo-anim.sdo-in-view {
	opacity: 1;
	transform: none;
}

@keyframes sdoImgReveal {
	from { opacity: 0; transform: scale(1.04); }
	to { opacity: 1; transform: scale(1); }
}

/* ===== MODAL ===== */
.sdo-modal {
	--sdo-accent: #7c5cff;
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	visibility: hidden;
	opacity: 0;
	transition: opacity .3s ease, visibility .3s ease;
	padding: 20px;
}

.sdo-modal.sdo-open { visibility: visible; opacity: 1; }

.sdo-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(6,6,10,.82);
	backdrop-filter: blur(6px);
}

.sdo-modal__box {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 920px;
	max-height: 90vh;
	overflow: auto;
	background: #111119;
	border-radius: 22px;
	box-shadow: 0 30px 80px rgba(0,0,0,.5);
	transform: translateY(30px) scale(.97);
	opacity: 0;
	transition: transform .4s cubic-bezier(.2,.8,.2,1), opacity .4s ease;
}

.sdo-modal.sdo-open .sdo-modal__box { transform: translateY(0) scale(1); opacity: 1; }

.sdo-modal__media { width: 100%; aspect-ratio: 16/10; overflow: hidden; background: #0a0a0f; }
.sdo-modal__img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }

.sdo-modal__info { padding: var(--sdo-space-md) var(--sdo-space-lg) var(--sdo-space-lg); display: flex; flex-direction: column; gap: var(--sdo-space-xs); }
.sdo-modal__title { margin: 0; color: #fff; font-size: 22px; font-weight: 700; }
.sdo-modal__host { color: rgba(255,255,255,.55); font-size: 13px; direction: ltr; text-align: start; }
.sdo-modal__desc { margin: 10px 0 0; color: rgba(255,255,255,.8); font-size: 14.5px; line-height: 1.8; }
.sdo-modal__link { margin-top: var(--sdo-space-sm); width: fit-content; opacity: 1; transform: none; }

.sdo-modal__close {
	position: absolute;
	top: 14px;
	inset-inline-end: 14px;
	z-index: 3;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: none;
	background: rgba(0,0,0,.5);
	color: #fff;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .2s ease;
}
.sdo-modal__close:hover { background: var(--sdo-accent); }

/* ===== RESPONSIVE FALLBACK (in case Elementor responsive selectors don't apply, e.g. shortcode use) ===== */
@media (max-width: 1024px) {
	.sdo-portfolio-grid { --sdo-columns: 2; }
}
@media (max-width: 640px) {
	.sdo-portfolio-grid { --sdo-columns: 1; }
	.sdo-card { aspect-ratio: 16/11; }
	.sdo-card__title { font-size: 17px; }
	.sdo-modal__info { padding: var(--sdo-space-sm) var(--sdo-space-sm) var(--sdo-space-md); }
}

@media (prefers-reduced-motion: reduce) {
	.sdo-anim, .sdo-card, .sdo-card__img, .sdo-card__info, .sdo-card__btn, .sdo-modal__box { transition: none !important; animation: none !important; }
}