/**
 * portfolio Archive — Isotope grid & filter bar styles.
 *
 * Place at: assets/css/portfolio-archive.css
 * in your TwentyTwentyFive child theme.
 *
 * Design approach: editorial / refined architectural portfolio.
 * Neutral palette, strong typography, clean card hover state.
 */

/* =========================================================
   CSS Custom Properties
   ========================================================= */
:root {
	--pa-white       : #ffffff;
	--pa-off-white   : #f2f2f2;
	--pa-ink         : #575757;
	--pa-mid         : #555555;
	--pa-rule        : #e0ddd8;
	--pa-accent      : #bbb432;         /* matches brand colour */
	--pa-badge-type  : #bbb432;         /* portfolio type badge */
	--pa-card-radius : 0px;             /* flat cards suit architecture — add px if preferred */
	--pa-gap         : 1.5rem;
	--pa-card-gap	 : 2%;   			/* percentage gutter */
	--pa-transition  : 0.3s ease;
	--pa-font-display: 'acumin-pro-condensed', sans-serif;
	--pa-font-body   : 'acumin-pro-semi-condensed', system-ui, -apple-system, sans-serif;
}



/* =========================================================
   Archive wrapper
   ========================================================= */
.portfolio-archive-wrap {
	max-width: 100%;

}

/* =========================================================
   Archive header
   ========================================================= */
.portfolio-archive-header {
	position: relative;
	padding-top: 8rem;
	border-bottom: 1px solid var(--pa-rule);
	margin-bottom: 4rem;
	font-family: var(--pa-font-display);
	z-index: -1;
}
@media ( min-width: 1366px ) {
	.portfolio-archive-header {
		max-width: 66%;
	}
}
.portfolio-archive-title {
	font-family: var(--pa-font-display);
	font-size: clamp(1.75rem, 4vw, 3rem);
	font-weight: 300;
	font-style: normal;
	text-transform: lowercase;
	color: var(--pa-ink);
}

.archive-description {
	color: var(--pa-mid);
	font-family: var(--pa-font-display);
	letter-spacing: .125px;
	line-height: 1.25;
	font-size: var(--wp--preset--font-size--x-large);
}

/* =========================================================
   Filter bar
   ========================================================= */
.portfolio-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 0.75rem;
	margin-bottom: 2.5rem;
	align-items: center;
}

.filter-btn {
	/* Reset */
	background   : none;
	border       : 1px solid var(--pa-rule);
	border-radius: 0;
	cursor       : pointer;
	font-family  : var(--pa-font-body);
	font-size    : 0.8rem;
	font-weight  : 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color        : var(--pa-mid);
	padding      : 0.45rem 1rem;
	transition   : background var(--pa-transition),
	               color var(--pa-transition),
	               border-color var(--pa-transition);
}

.filter-btn:hover {
	background   : var(--pa-ink);
	border-color : var(--pa-ink);
	color        : var(--pa-white);
}

.filter-btn.is-active {
	background   : var(--pa-accent);
	border-color : var(--pa-accent);
	color        : var(--pa-white);
}

/* =========================================================
   Isotope grid container
   ========================================================= */
   

.portfolio-grid {
	position: relative;
	width: 100%;
}

/* =========================================================
   portfolio card
   ========================================================= */
.portfolio-card {
	/*
	 * Three columns on desktop.
	 * Isotope's percentPosition uses this width.
	 * Subtract (2 * gap / 3) to account for the two gutters between 3 cols.
	 */
    width: 32%;       /* (100% - 2×2%) / 3 ≈ 32% */
    margin-bottom: 33px;
	background: var(--pa-white);
	overflow: hidden;
	transition: box-shadow var(--pa-transition), transform var(--pa-transition);
}

.portfolio-card:hover {
	/* box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
	transform : translateY(-3px);  */
}

.portfolio-card-gutter {
    width: 2%;        /* must match JS gutter value */
}


/* Isotope calculates masonry positions and ignores CSS columns,
   so we control gutter only via margin-right on non-3nth items.
   The simplest approach: use margin-right on all cards and let Isotope
   account for it via its gutter option if needed.
   Here we rely on calc() widths + Isotope's default gutter:0 and let
   CSS margin-bottom handle vertical spacing. */

/* =========================================================
   Thumbnail
   ========================================================= */
.portfolio-card__thumb {
	position     : relative;
	overflow     : hidden;
	aspect-ratio : 16 / 9;
	/* background   : var(--pa-off-white); */
}

.portfolio-card__thumb img {
	width      : 100%;
	height     : 100%;
	object-fit : cover;
	display    : block;
	transition : transform 0.5s ease;
}

.portfolio-card:hover .portfolio-card__thumb img {
	filter: grayscale(100%);
}

/* Hover overlay */
.portfolio-card__overlay {
	position   : absolute;
	inset      : 0;
	background : rgba(187, 180, 50, 1.0);
	opacity    : 0;
	transition : opacity var(--pa-transition);
	mix-blend-mode: multiply;
	z-index    : 1;
}

.portfolio-card:hover .portfolio-card__overlay {
	opacity: 1;
}

/*
 * The view-label is a SIBLING of .portfolio-card__overlay (not nested
 * inside it). mix-blend-mode on the overlay only affects the overlay's
 * own painted pixels plus any descendants — keeping the label outside
 * that element means it stays fully opaque white text instead of
 * getting multiplied/blended against the thumbnail underneath.
 */
.portfolio-card__view-label {
	position      : absolute;
	top           : 50%;
	left          : 50%;
	transform     : translate(-50%, -50%);
	color         : var(--pa-white);
	font-family   : var(--pa-font-body);
	font-size     : 1rem;
	font-weight   : 400;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	white-space   : nowrap;
	opacity       : 0;
	transition    : opacity var(--pa-transition);
	z-index       : 2;
	/* border-bottom : 1px solid rgba(255,255,255,0.6);
	padding-bottom: 0.2rem; */
}

.portfolio-card:hover .portfolio-card__view-label {
	opacity: 1;
}

.portfolio-card__thumb-link {
	display: block;
	text-decoration: none;
}

/* =========================================================
   Card body
   ========================================================= */
.portfolio-card__body {
	/* padding: 1.1rem 0 0; */
}

/* Badge pills */
.portfolio-card__badge {
	display        : inline-block;
	font-size      : 0.68rem;
	font-weight    : 600;
	letter-spacing : 0.1em;
	text-transform : uppercase;
	text-decoration: none;
	padding        : 0.2rem 0.55rem;
	border-radius  : 2px;
	margin-bottom  : 0.6rem;
	margin-right   : 0.25rem;
	color          : var(--pa-white);
	transition     : opacity var(--pa-transition);
}

.portfolio-card__badge:hover {
	opacity: 0.8;
}

.portfolio-card__badge--portfolio-type { background: var(--pa-badge-type); }

/* Title */
.portfolio-card__title {
	font-family  : var(--pa-font-body);
	font-size    : 1.25rem;
	font-weight  : 300;
	letter-spacing: .125px;
	line-height  : 1.4;
	margin-top   : 1rem; 
	color        : var(--pa-ink);
}




.portfolio-card__title a {
	text-decoration: none;
	color          : inherit;
}

.portfolio-card__title a:hover {
	color: var(--pa-accent);
}

/* Subtitle */
.portfolio-card__subtitle {
	font-size  : 0.9rem;
	color      : var(--pa-mid);
	margin     : 0 0 0.5rem;
	line-height: 1.4;
}

/* Meta row (location / year) */
.portfolio-card__meta {
	display   : flex;
	flex-wrap : wrap;
	gap       : 0.4rem 1rem;
	margin-top: 0.6rem;
}

.portfolio-card__meta-item {
	font-size  : 0.78rem;
	color      : var(--pa-mid);
	font-style : italic;
}

/* =========================================================
   No portfolios message
   ========================================================= */
.no-portfolios {
	text-align : center;
	padding    : 4rem 1rem;
	color      : var(--pa-mid);
	font-size  : 1.1rem;
}

/* =========================================================
   Pagination
   ========================================================= */
.navigation.pagination {
	margin-top: 3rem;
	text-align: center;
}

/* =========================================================
   Responsive breakpoints
   ========================================================= */

/* Two columns on tablets */
@media ( max-width: 900px ) {
	.portfolio-card {
		width: calc( 50% - (var(--pa-gap) / 2) );
	}
	.portfolio-card {
		width: calc( (100% / 2) - 1.5rem );
	}
}

/* One column on small screens */
@media ( max-width: 600px ) {
	.portfolio-card {
		width: 100%;
	}

	.portfolio-filters {
		gap: 0.4rem;
	}

	.filter-btn--group {
		margin-left : 0;
		border-left : none;
		padding-left: 1rem;
	}
}

/* =========================================================
   Isotope transition helpers — keeps layout animation smooth
   ========================================================= */
.portfolio-grid .portfolio-card {
	/* Isotope sets 'left' and 'top' positions; ensure the element
	   is positioned so the transition fires. */
	transition: left   0.4s ease,
	            top    0.4s ease,
	            opacity 0.3s ease,
	            box-shadow var(--pa-transition),
	            transform var(--pa-transition);
}

/* Items Isotope hides during filtering */
.portfolio-grid .portfolio-card.isotope-hidden {
	pointer-events: none;
	opacity       : 0;
}