/* AAW Portfolio — base structural styles.
   Colors, spacing, and typography are controlled from Elementor's Style tab;
   this file only defines layout/behaviour so every look stays fully editable.
   The Load More button uses CSS custom properties (set inline by the widget's
   Style controls) because its hover state needs to animate several tokens
   (background, text color, gap) together. */

.aaw-portfolio-wrap {
	width: 100%;
	--aaw-lm-bg: #FFB800;
	--aaw-lm-text: #141414;
	--aaw-lm-dot-bg: #141414;
	--aaw-lm-dot-color: #FFFFFF;
	--aaw-lm-bg-hover: #FFFFFF;
	--aaw-lm-text-hover: #141414;
	--aaw-lm-gap-hover: 16px;
	--aaw-lm-duration: 450ms;
}

/* ---------------------------------------------------------------------
 * Filter tabs
 * ------------------------------------------------------------------- */
.aaw-portfolio-filters {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-bottom: 32px;
	box-sizing: border-box;
	max-width: 100%;
}

.aaw-portfolio-filter {
	border: none;
	cursor: pointer;
	font-family: inherit;
	transition: background-color 0.25s ease, color 0.25s ease;
	white-space: nowrap;
}

/* ---------------------------------------------------------------------
 * Filter dropdown — custom-built trigger + option list shown instead of
 * the tab bar on narrow layouts (breakpoint below). Built from scratch
 * instead of a native <select> because native <option> hover/active
 * states can't be styled consistently across browsers.
 * ------------------------------------------------------------------- */
.aaw-portfolio-filter-select-wrap {
	display: none;
	position: relative;
	width: 100%;
	margin-bottom: 32px;
	box-sizing: border-box;
}

.aaw-portfolio-select-trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	border: none;
	cursor: pointer;
	font-family: inherit;
	background-color: #F0F1F3;
	color: #141414;
	border-radius: 14px;
	padding: 16px 20px;
	box-sizing: border-box;
	text-align: left;
}

.aaw-portfolio-select-trigger-label {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.aaw-portfolio-select-arrow {
	flex-shrink: 0;
	width: 9px;
	height: 9px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.25s ease;
}

.aaw-portfolio-filter-select-wrap.aaw-open .aaw-portfolio-select-arrow {
	transform: rotate(-135deg);
}

.aaw-portfolio-select-options {
	list-style: none;
	margin: 8px 0 0;
	padding: 8px;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 30;
	background-color: #FFFFFF;
	border-radius: 14px;
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.14);
	max-height: 320px;
	overflow-y: auto;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
	box-sizing: border-box;
}

.aaw-portfolio-filter-select-wrap.aaw-open .aaw-portfolio-select-options {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.aaw-portfolio-select-option {
	cursor: pointer;
	padding: 12px 14px;
	border-radius: 10px;
	color: #141414;
	background-color: transparent;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.aaw-portfolio-select-option:hover {
	background-color: #F0F1F3;
}

.aaw-portfolio-select-option.aaw-active {
	background-color: #141414;
	color: #FFFFFF;
}

@media (max-width: 1320px) {
	.aaw-portfolio-filters {
		display: none;
	}

	.aaw-portfolio-filter-select-wrap {
		display: block;
	}
}

/* ---------------------------------------------------------------------
 * Grid & cards
 * ------------------------------------------------------------------- */
.aaw-portfolio-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
	position: relative;
}

.aaw-portfolio-wrap.aaw-loading .aaw-portfolio-grid {
	opacity: 0.5;
	pointer-events: none;
	transition: opacity 0.2s ease;
}

.aaw-portfolio-empty {
	grid-column: 1 / -1;
	text-align: center;
	padding: 40px 0;
}

.aaw-portfolio-card {
	position: relative;
}

.aaw-portfolio-thumb {
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background: #eee;
	cursor: pointer;
}

.aaw-portfolio-thumb img,
.aaw-portfolio-noimg {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.6s ease;
}

.aaw-portfolio-noimg {
	background: linear-gradient(135deg, #eee, #ddd);
}

.aaw-portfolio-thumb:hover img {
	transform: scale(1.06);
}

/* Cursor-following "View" pill. Position is set continuously by JS via
   inline transform on mousemove; here we only handle visibility so it never
   fights the JS-driven translate(). */
.aaw-portfolio-view-btn {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	pointer-events: none;
	white-space: nowrap;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	border-radius: 999px;
	opacity: 0;
	box-sizing: border-box;
	transform: translate(-50%, -50%);
	transition: opacity 0.2s ease;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
}

.aaw-portfolio-thumb.aaw-cursor-active .aaw-portfolio-view-btn {
	opacity: 1;
}

/* ---------------------------------------------------------------------
 * Card info (title / description / link button)
 * ------------------------------------------------------------------- */
.aaw-portfolio-info {
	display: block;
	color: inherit;
	text-decoration: none;
	transition: background-color 0.25s ease;
}

.aaw-portfolio-info-text {
	min-width: 0;
}

.aaw-portfolio-title {
	margin: 0 0 6px;
	transition: color 0.25s ease;
}

.aaw-portfolio-desc {
	margin: 0;
	line-height: 1.5;
	transition: color 0.25s ease;
}

/* ---------------------------------------------------------------------
 * Load More button — two pieces (text pill + dot icon) that merge into a
 * single pill in the normal state and split apart on hover.
 * ------------------------------------------------------------------- */
.aaw-portfolio-pagination {
	display: flex;
	justify-content: center;
}

.aaw-load-more-btn {
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	font-family: inherit;
}

.aaw-load-more-btn.aaw-btn-loading {
	opacity: 0.6;
	pointer-events: none;
}

.aaw-lm-inner {
	display: flex;
	align-items: center;
	background-color: var(--aaw-lm-bg);
	border-radius: 999px;
	padding: 6px 6px 6px 30px;
	gap: 0;
	transition:
		background-color var(--aaw-lm-duration) cubic-bezier(0.68, -0.55, 0.27, 1.55),
		padding var(--aaw-lm-duration) cubic-bezier(0.68, -0.55, 0.27, 1.55),
		gap var(--aaw-lm-duration) cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

.aaw-lm-text {
	order: 1;
	color: var(--aaw-lm-text);
	background-color: transparent;
	border-radius: 999px;
	padding: 12px 4px;
	white-space: nowrap;
	transition:
		background-color var(--aaw-lm-duration) cubic-bezier(0.68, -0.55, 0.27, 1.55),
		color var(--aaw-lm-duration) ease,
		padding var(--aaw-lm-duration) cubic-bezier(0.68, -0.55, 0.27, 1.55),
		box-shadow var(--aaw-lm-duration) ease;
}

/* Dot cluster — two stacked variants that cross-fade on hover instead of
   one element being restyled, so the "plain dots" (normal state) and the
   "dots inside a solid badge" (hover state) can enter/exit independently. */
.aaw-lm-dot-wrap {
	order: 2;
	position: relative;
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	margin-left: 18px;
	transition: margin var(--aaw-lm-duration) cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

.aaw-lm-dot {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	border-radius: 20px;
	transition:
		opacity var(--aaw-lm-duration) ease,
		transform var(--aaw-lm-duration) cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

.aaw-lm-dot i {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	display: block;
}

/* Middle dot nudged right so the trio reads as a diagonal, not a straight line. */
.aaw-lm-dot i:nth-child(2) {
	transform: translateX(4px);
}

/* Normal state: plain dark dots, no badge behind them. */
.aaw-lm-dot-out {
	opacity: 1;
	transform: translateX(0);
}

.aaw-lm-dot-out i {
	background-color: var(--aaw-lm-dot-bg);
}

/* Hover state: solid rounded badge, starts hidden off to the left. */
.aaw-lm-dot-in {
	opacity: 0;
	transform: translateX(-20px);
	background-color: var(--aaw-lm-dot-bg);
}

.aaw-lm-dot-in i {
	background-color: var(--aaw-lm-dot-color);
}

.aaw-load-more-btn:hover .aaw-lm-inner {
	background-color: transparent;
	padding: 0;
	gap: var(--aaw-lm-gap-hover);
}

.aaw-load-more-btn:hover .aaw-lm-text {
	order: 2;
	background-color: var(--aaw-lm-bg-hover);
	color: var(--aaw-lm-text-hover);
	padding: 14px 30px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.aaw-load-more-btn:hover .aaw-lm-dot-wrap {
	order: 1;
	margin-left: 0;
}

/* Plain dots slide further right and disappear on hover. */
.aaw-load-more-btn:hover .aaw-lm-dot-out {
	opacity: 0;
	transform: translateX(20px);
}

/* Solid badge slides in left-to-right into place, then settles with a
   small horizontal-only jelly wobble (no scale, no vertical movement). */
.aaw-load-more-btn:hover .aaw-lm-dot-in {
	opacity: 1;
	transform: translateX(0);
	animation: aaw-lm-jelly 560ms ease var(--aaw-lm-duration);
}

@keyframes aaw-lm-jelly {
	0% {
		transform: translateX(0);
	}
	25% {
		transform: translateX(-4px);
	}
	50% {
		transform: translateX(3px);
	}
	75% {
		transform: translateX(-2px);
	}
	100% {
		transform: translateX(0);
	}
}

/* ---------------------------------------------------------------------
 * Numbered pagination
 * ------------------------------------------------------------------- */
.aaw-portfolio-numbers {
	display: flex;
	gap: 8px;
}

.aaw-portfolio-page-num {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: none;
	cursor: pointer;
	font-family: inherit;
	font-weight: 600;
	background: #F0F1F3;
	color: #141414;
	transition: background-color 0.25s ease, color 0.25s ease;
}

.aaw-portfolio-page-num.aaw-active {
	background: #141414;
	color: #FFFFFF;
}

/* ---------------------------------------------------------------------
 * Lightbox
 * ------------------------------------------------------------------- */
.aaw-portfolio-lightbox {
	position: fixed;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
	z-index: 999999;
}

.aaw-portfolio-lightbox.aaw-open {
	opacity: 1;
	visibility: visible;
}

.aaw-lightbox-stage {
	max-width: 88vw;
	max-height: 82vh;
	text-align: center;
}

.aaw-lightbox-img {
	max-width: 88vw;
	max-height: 76vh;
	border-radius: 12px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.aaw-lightbox-caption {
	color: #fff;
	margin-top: 16px;
	font-size: 15px;
	letter-spacing: 0.3px;
}

.aaw-lightbox-close,
.aaw-lightbox-prev,
.aaw-lightbox-next {
	position: fixed;
	background: rgba(255, 255, 255, 0.08);
	border: none;
	color: #fff;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.aaw-lightbox-close {
	top: 28px;
	right: 28px;
}

.aaw-lightbox-prev {
	left: 28px;
	top: 50%;
	transform: translateY(-50%);
}

.aaw-lightbox-next {
	right: 28px;
	top: 50%;
	transform: translateY(-50%);
}

body.aaw-portfolio-lightbox-open {
	overflow: hidden;
}

@media (max-width: 767px) {
	.aaw-lightbox-close,
	.aaw-lightbox-prev,
	.aaw-lightbox-next {
		width: 40px;
		height: 40px;
		font-size: 22px;
	}

	.aaw-lightbox-prev {
		left: 12px;
	}

	.aaw-lightbox-next {
		right: 12px;
	}

	.aaw-lightbox-close {
		top: 14px;
		right: 14px;
	}
}