/**
 * Portfolio Grid Styles
 *
 * Structured grid with internal stroke dividers, desaturated/tinted images,
 * and hover states that reveal full color + scale down.
 */

/* === Portfolio Grid Container === */
.portfolio-grid .wp-block-post-template {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0;
	padding: 0;
	margin: 0;
	list-style: none;
}

/* === Card: structural grid with internal strokes === */
.portfolio-card {
	position: relative;
	background-color: transparent;
	padding: 2.5rem 2rem;
	overflow: visible;
	transition: none;
	box-shadow: none;
	border-radius: 0;
}

/* Horizontal rule between rows — pseudo-element with gaps on grid items */
.portfolio-grid .wp-block-post-template > * {
	position: relative;
}

.portfolio-grid .wp-block-post-template > *::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 2rem;
	right: 2rem;
	height: 1px;
	background-color: var(--wp--preset--color--accent-700, #8B5BF5);
}

/* Remove bottom rule on last row */
.portfolio-grid .wp-block-post-template > *:nth-last-child(-n+3)::after {
	display: none;
}

/* Vertical rule: pseudo-element with gaps at top/bottom */
.portfolio-card::after {
	content: "";
	position: absolute;
	top: 2.5rem;
	bottom: 2.5rem;
	right: 0;
	width: 1px;
	background-color: var(--wp--preset--color--accent-700, #8B5BF5);
}

/* Remove vertical rule on last column (always, regardless of screen size) */
.portfolio-card:nth-child(3n)::after,
.portfolio-grid .wp-block-post-template > *:nth-child(3n) .portfolio-card::after {
	display: none;
}

/* === Card Image === */
.portfolio-card .wp-block-post-featured-image {
	position: relative;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	border-radius: 0;
	margin-bottom: 0;
}

.portfolio-card .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
	filter: saturate(0);
	opacity: 1;
	transform-origin: top left;
	transition: filter var(--portfolio-transition-speed, 300ms) ease,
		transform var(--portfolio-transition-speed, 300ms) ease;
}

/* Dark overlay to mute images without using opacity */
.portfolio-card .wp-block-post-featured-image::after {
	content: "";
	position: absolute;
	inset: 0;
	background-color: var(--wp--preset--color--background, #09090a);
	opacity: 0.87;
	pointer-events: none;
	transition: opacity var(--portfolio-transition-speed, 300ms) ease;
}

/* === Card Text: all accent-500 (primary) === */
.portfolio-card .wp-block-post-title {
	position: relative;
	margin-top: -1.5rem;
	padding-left: 0;
	z-index: 4;
	color: var(--wp--preset--color--accent-500, #8B5BF5);
	transition: color var(--portfolio-transition-speed, 300ms) ease;
}

.portfolio-card .wp-block-post-title a {
	color: inherit;
	text-decoration: none;
}

.portfolio-card .wp-block-post-excerpt {
	color: var(--wp--preset--color--accent-500, #8B5BF5);
	font-size: 0.875rem;
	text-transform: none;
	letter-spacing: normal;
	margin-top: 0.5rem;
	position: relative;
	z-index: 4;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	transition: color var(--portfolio-transition-speed, 300ms) ease;
}

.portfolio-card .wp-block-post-excerpt a {
	color: inherit;
	text-decoration: none;
}

.portfolio-card__client {
	display: block;
	margin-top: 0.5rem;
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--wp--preset--color--accent-500, #8B5BF5);
	position: relative;
	z-index: 4;
	transition: color var(--portfolio-transition-speed, 300ms) ease;
}

/* === Hover / Focus State === */
.portfolio-card:hover .wp-block-post-featured-image::after,
.portfolio-card:focus-within .wp-block-post-featured-image::after {
	opacity: 0;
}

.portfolio-card:hover .wp-block-post-featured-image img,
.portfolio-card:focus-within .wp-block-post-featured-image img {
	filter: saturate(1);
	transform: scale(0.85);
}

.portfolio-card:hover .wp-block-post-title,
.portfolio-card:focus-within .wp-block-post-title {
	color: var(--wp--preset--color--accent-100, #f7f6f7);
}

.portfolio-card:hover .wp-block-post-title a,
.portfolio-card:focus-within .wp-block-post-title a {
	color: var(--wp--preset--color--accent-100, #f7f6f7);
}

.portfolio-card:hover .wp-block-post-excerpt,
.portfolio-card:focus-within .wp-block-post-excerpt {
	color: var(--wp--preset--color--accent-100, #f7f6f7);
}

.portfolio-card:hover .portfolio-card__client,
.portfolio-card:focus-within .portfolio-card__client {
	color: var(--wp--preset--color--accent-100, #f7f6f7);
}

/* === Filter Buttons === */
.portfolio-filter-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-block-end: 2rem;
	padding: 0;
	list-style: none;
}

.portfolio-filter-btn {
	display: inline-flex;
	align-items: center;
	padding: 0.5rem 1.25rem;
	border: 1px solid var(--wp--preset--color--accent-500, #8B5BF5);
	border-radius: var(--portfolio-radius, 8px);
	background: transparent;
	color: var(--wp--preset--color--accent-500, #8B5BF5);
	font-size: 0.875rem;
	font-weight: 500;
	cursor: pointer;
	transition: background-color var(--portfolio-transition-speed),
		color var(--portfolio-transition-speed),
		border-color var(--portfolio-transition-speed);
}

.portfolio-filter-btn:hover {
	background-color: var(--wp--preset--color--accent-400, #a584f7);
	color: var(--portfolio-background, #09090a);
}

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

.portfolio-filter-btn[aria-pressed="true"],
.portfolio-filter-btn.is-active {
	background-color: var(--wp--preset--color--accent-500, #8B5BF5);
	border-color: var(--wp--preset--color--accent-500, #8B5BF5);
	color: var(--portfolio-background, #09090a);
}

/* === ARIA Busy State === */
.portfolio-grid-wrapper[aria-busy="true"] {
	opacity: 0.5;
	pointer-events: none;
	transition: opacity var(--portfolio-transition-speed);
}

/* === Responsive: tablet (2 columns) === */
@media (max-width: 1023px) {
	.portfolio-grid .wp-block-post-template {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Reset 3-column vertical rule logic */
	.portfolio-card:nth-child(3n)::after,
	.portfolio-grid .wp-block-post-template > *:nth-child(3n) .portfolio-card::after {
		display: block;
	}

	/* Remove vertical rule on last column (2nd) */
	.portfolio-card:nth-child(2n)::after,
	.portfolio-grid .wp-block-post-template > *:nth-child(2n) .portfolio-card::after {
		display: none;
	}

	/* Reset last-row bottom border */
	.portfolio-grid .wp-block-post-template > *:nth-last-child(-n+3)::after {
		display: block;
	}

	.portfolio-grid .wp-block-post-template > *:nth-last-child(-n+2)::after {
		display: none;
	}
}

/* === Responsive: mobile (1 column) === */
@media (max-width: 767px) {
	.portfolio-grid .wp-block-post-template {
		grid-template-columns: 1fr;
	}

	.portfolio-card::after {
		display: none;
	}

	.portfolio-grid .wp-block-post-template > *:nth-last-child(-n+3)::after {
		display: block;
	}

	.portfolio-grid .wp-block-post-template > *:last-child::after {
		display: none;
	}

	/* On touch devices, always show title prominently */
	.portfolio-card .wp-block-post-title {
		color: var(--wp--preset--color--accent-100, #f7f6f7);
	}
}