/* =============================================================
   Portfolio section (LIGHT) — scoped under .ais-portfolio
   Filter tabs + concept project cards with Problem/Solution/Goal.
   Tokens only (no raw hex). Responsive at <=1024 and <=640.
   ============================================================= */

.ais-portfolio {
	background:
		radial-gradient(120% 90% at 100% -10%, var(--ais-glow), transparent 55%),
		var(--ais-offwhite);
	color: var(--ais-ink);
}

.ais-portfolio .ais-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	color: var(--ais-orange-ink);
	letter-spacing: var(--ais-tracking-label);
	text-transform: uppercase;
	font-weight: 600;
	font-size: var(--ais-fs-label);
}

.ais-portfolio .ais-eyebrow__dot {
	width: 8px;
	height: 8px;
	border-radius: var(--ais-radius-pill);
	background: var(--ais-orange);
	box-shadow: 0 0 0 4px var(--ais-glow);
}

.ais-portfolio .ais-section__title {
	font-family: var(--ais-heading-font);
	color: var(--ais-ink);
	margin: 0;
}

.ais-portfolio .ais-section__intro {
	color: var(--ais-ink-muted);
	margin-top: var(--ais-space-5);
}

/* ---------- Filter tabs ---------- */
.ais-portfolio__filters {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .6rem;
	margin: 0 0 var(--ais-stack-gap);
}

.ais-portfolio__filter {
	appearance: none;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--ais-tap-min);
	font: inherit;
	font-weight: 600;
	font-size: var(--ais-fs-sm);
	color: var(--ais-ink-muted);
	background: var(--ais-card-light);
	border: 1px solid var(--ais-border-ink);
	padding: .58em 1.15em;
	border-radius: var(--ais-radius-pill);
	transition: color var(--ais-dur-fast) var(--ais-ease),
		background-color var(--ais-dur-fast) var(--ais-ease),
		border-color var(--ais-dur-fast) var(--ais-ease),
		box-shadow var(--ais-dur-fast) var(--ais-ease),
		transform var(--ais-dur-fast) var(--ais-ease);
}

.ais-portfolio__filter:hover,
.ais-portfolio__filter:focus-visible {
	color: var(--ais-ink);
	border-color: var(--ais-orange-ink);
	transform: translateY(-2px);
}

.ais-portfolio__filter:focus-visible {
	outline: var(--ais-focus-width) solid var(--ais-focus);
	outline-offset: var(--ais-focus-offset);
}

.ais-portfolio__filter.is-active {
	color: var(--ais-on-primary);
	background: linear-gradient(135deg, var(--ais-orange-soft), var(--ais-orange-deep));
	border-color: transparent;
	box-shadow: 0 12px 26px -14px var(--ais-glow);
}

/* ---------- Grid ---------- */
.ais-portfolio__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
	gap: var(--ais-grid-gap);
}

.ais-portfolio__card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--ais-card-light);
	border: 1px solid var(--ais-border-ink);
	border-radius: var(--ais-radius-lg);
	box-shadow: 0 18px 44px -34px rgba(20, 21, 26, .5);
	transition: transform var(--ais-dur) var(--ais-ease),
		box-shadow var(--ais-dur) var(--ais-ease),
		border-color var(--ais-dur) var(--ais-ease);
}

.ais-portfolio__card:hover {
	transform: translateY(-6px);
	border-color: color-mix(in srgb, var(--ais-orange) 40%, var(--ais-border-ink));
	box-shadow: 0 30px 60px -30px rgba(20, 21, 26, .42);
}

.ais-portfolio__card.is-hidden {
	display: none;
}

/* ---------- Media / CSS mockup ---------- */
.ais-portfolio__media {
	position: relative;
	padding: var(--ais-card-pad) var(--ais-card-pad) 0;
}

.ais-portfolio__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border-radius: var(--ais-radius);
	border: 1px solid var(--ais-border-ink);
}

.ais-portfolio__mock {
	position: relative;
	aspect-ratio: 16 / 10;
	background: linear-gradient(180deg, var(--ais-dark-2), var(--ais-dark));
	border: 1px solid var(--ais-border);
	border-radius: var(--ais-radius);
	overflow: hidden;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}

.ais-portfolio__mock .ais-mockup__bar {
	display: flex;
	align-items: center;
	gap: 6px;
	height: 28px;
	padding: 0 12px;
	background: var(--ais-dark-3);
	border-bottom: 1px solid var(--ais-border);
}

.ais-portfolio__mock .ais-mockup__bar span {
	width: 9px;
	height: 9px;
	border-radius: var(--ais-radius-pill);
	background: var(--ais-border);
}

.ais-portfolio__mock .ais-mockup__bar span:first-child {
	background: var(--ais-orange);
}

.ais-portfolio__mock .ais-mockup__screen {
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.ais-portfolio__mock .ais-mockup__hero {
	display: flex;
	align-items: center;
	gap: 10px;
}

.ais-portfolio__mock .ais-mockup__accent {
	width: 46px;
	height: 12px;
	border-radius: 4px;
	background: linear-gradient(90deg, var(--ais-orange), var(--ais-orange-soft));
}

.ais-portfolio__mock .ais-mockup__pill {
	width: 70px;
	height: 8px;
	border-radius: var(--ais-radius-pill);
	background: var(--ais-border);
}

.ais-portfolio__mock .ais-mockup__lines {
	display: flex;
	flex-direction: column;
	gap: 7px;
}

.ais-portfolio__mock .ais-mockup__lines span {
	height: 7px;
	border-radius: 4px;
	background: color-mix(in srgb, var(--ais-text) 14%, transparent);
}

.ais-portfolio__mock .ais-mockup__lines span:nth-child(1) { width: 90%; }
.ais-portfolio__mock .ais-mockup__lines span:nth-child(2) { width: 72%; }
.ais-portfolio__mock .ais-mockup__lines span:nth-child(3) { width: 58%; }

.ais-portfolio__mock .ais-mockup__cards {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin-top: auto;
}

.ais-portfolio__mock .ais-mockup__cards span {
	height: 30px;
	border-radius: 6px;
	background: color-mix(in srgb, var(--ais-text) 8%, transparent);
	border: 1px solid var(--ais-border);
}

/* Subtle orange sweep on hover for the mockup */
.ais-portfolio__mock::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(80% 60% at 20% 0%, var(--ais-glow), transparent 60%);
	opacity: 0;
	transition: opacity var(--ais-dur) var(--ais-ease);
	pointer-events: none;
}

.ais-portfolio__card:hover .ais-portfolio__mock::after {
	opacity: 1;
}

/* ---------- Concept badge ---------- */
.ais-portfolio__badge {
	position: absolute;
	top: clamp(22px, 2.6vw, 30px);
	left: clamp(22px, 2.6vw, 30px);
	display: inline-flex;
	align-items: center;
	gap: .35em;
	font-size: var(--ais-fs-label);
	font-weight: 700;
	letter-spacing: var(--ais-tracking-label);
	text-transform: uppercase;
	color: var(--ais-on-primary);
	background: linear-gradient(135deg, var(--ais-orange-soft), var(--ais-orange-deep));
	padding: .42em .7em;
	border-radius: var(--ais-radius-pill);
	box-shadow: 0 10px 22px -12px var(--ais-glow);
}

.ais-portfolio__badge .ais-icon {
	width: 14px;
	height: 14px;
}

/* ---------- Card body ---------- */
.ais-portfolio__body {
	display: flex;
	flex-direction: column;
	gap: .55rem;
	padding: var(--ais-card-pad);
}

.ais-portfolio__type {
	margin: 0;
	font-size: var(--ais-fs-label);
	font-weight: 600;
	letter-spacing: var(--ais-tracking-label);
	text-transform: uppercase;
	color: var(--ais-orange-ink);
}

.ais-portfolio__title {
	margin: 0;
	font-family: var(--ais-heading-font);
	font-size: var(--ais-fs-h3);
	line-height: var(--ais-leading-heading);
	color: var(--ais-ink);
}

/* ---------- Problem / Solution / Goal ---------- */
.ais-portfolio__psg {
	margin: .35rem 0 0;
	display: flex;
	flex-direction: column;
	gap: .85rem;
}

.ais-portfolio__row {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: .35rem .7rem;
	align-items: start;
}

.ais-portfolio__row-label {
	grid-column: 1 / -1;
	display: inline-flex;
	align-items: center;
	gap: .4em;
	margin: 0;
	font-size: var(--ais-fs-label);
	font-weight: 700;
	letter-spacing: var(--ais-tracking-label);
	text-transform: uppercase;
	color: var(--ais-ink);
}

.ais-portfolio__row-label .ais-icon {
	width: 16px;
	height: 16px;
	color: var(--ais-orange-ink);
	flex: none;
	padding: .28em;
	border-radius: var(--ais-radius-pill);
	background: var(--ais-glow);
	box-sizing: content-box;
}

.ais-portfolio__row-text {
	grid-column: 1 / -1;
	margin: 0;
	color: var(--ais-ink-muted);
	font-size: var(--ais-fs-sm);
	line-height: 1.55;
}

/* ---------- Card CTA ---------- */
.ais-portfolio__cta {
	margin-top: auto;
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: .45em;
	min-height: var(--ais-tap-min);
	padding: .35em 0;
	font-weight: 600;
	color: var(--ais-orange-ink);
	background: none;
	border: 0;
	border-radius: 0;
}

.ais-portfolio__cta .ais-icon {
	width: 18px;
	height: 18px;
	transition: transform var(--ais-dur) var(--ais-ease);
}

.ais-portfolio__cta:hover .ais-icon,
.ais-portfolio__cta:focus-visible .ais-icon {
	transform: translate(3px, -3px);
}

.ais-portfolio__cta:focus-visible {
	outline: var(--ais-focus-width) solid var(--ais-focus);
	outline-offset: var(--ais-focus-offset);
	border-radius: var(--ais-radius);
}

.ais-portfolio__empty {
	text-align: center;
	color: var(--ais-ink-muted);
	margin-top: 2rem;
}

/* Reveal the empty-state message when the active filter matches no cards
   (every card carries .is-hidden). [hidden] keeps it hidden by default. */
.ais-portfolio__grid:not(:has(.ais-portfolio__card:not(.is-hidden))) + .ais-portfolio__empty {
	display: block;
}

/* ---------- Responsive ----------
   Column count is handled by the auto-fit grid above; only the filter strip
   needs a mobile-specific (horizontally scrollable) treatment. */
@media (max-width: 640px) {
	.ais-portfolio__filters {
		flex-wrap: nowrap;
		justify-content: flex-start;
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
		margin-inline: calc(var(--ais-gutter) * -1);
		padding-inline: var(--ais-gutter);
		-webkit-mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent);
		mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent);
		scroll-snap-type: x proximity;
		overscroll-behavior-x: contain;
	}

	.ais-portfolio__filters::-webkit-scrollbar {
		display: none;
	}

	.ais-portfolio__filter {
		flex: 0 0 auto;
		scroll-snap-align: start;
	}
}

/* ---------- Count-aware trailing card (base skin only) ----------
   In the base auto-fit two-column band a lone trailing odd card strands an
   empty track; let it span the row instead. Scoped to the default skin so the
   bento skins' own portfolio cadences are untouched. */
@media (min-width: 720px) and (max-width: 1099px) {
	body.ais-theme-midnight-orange .ais-portfolio__card:last-child:nth-child(odd):not(:first-child) {
		grid-column: 1 / -1;
	}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	.ais-portfolio__card,
	.ais-portfolio__filter,
	.ais-portfolio__cta .ais-icon,
	.ais-portfolio__mock::after {
		transition: none;
	}

	.ais-portfolio__card:hover {
		transform: none;
	}
}

/* ---------- RTL ----------
   Mirror the section's corner glow, the mockup hover sweep origin, the
   concept badge corner, and the diagonal CTA arrow nudge. The auto-fit
   card grid and filter row reverse automatically under dir=rtl. LTR is
   byte-for-byte unchanged. */
[dir="rtl"].ais-portfolio,
[dir="rtl"] .ais-portfolio {
	background:
		radial-gradient(120% 90% at 0% -10%, var(--ais-glow), transparent 55%),
		var(--ais-offwhite);
}
[dir="rtl"] .ais-portfolio__mock::after {
	background: radial-gradient(80% 60% at 80% 0%, var(--ais-glow), transparent 60%);
}
[dir="rtl"] .ais-portfolio__badge {
	left: auto;
	right: clamp(22px, 2.6vw, 30px);
}
[dir="rtl"] .ais-portfolio__cta:hover .ais-icon,
[dir="rtl"] .ais-portfolio__cta:focus-visible .ais-icon {
	transform: translate(-3px, -3px);
}