/**
 * CPH Portfolio Grid - Styles
 *
 * Grid layouts and card styling for the CPH Portfolio Grid WPBakery element.
 *
 * @package Salient_Child
 * @since   1.0.0
 */

/* =============================================================================
   GRID CONTAINER
   ============================================================================= */

.cph-portfolio-grid {
	display: grid;
	gap: var(--grid-gap, 20px);
	width: 100%;
}

/* =============================================================================
   LAYOUT: HOMEPAGE BENTO (3 cards)
   =============================================================================
   +-------------+-------------+
   |             |   Slot 2    |
   |   Slot 1    +-------------+
   |   (tall)    |   Slot 3    |
   +-------------+-------------+
*/

.cph-portfolio-grid--homepage-bento {
	grid-template-columns: 1fr 1fr;
	grid-template-rows: var(--card-height, 525px) var(--card-height, 525px);
}

.cph-portfolio-grid--homepage-bento .cph-card--slot-1 {
	grid-row: 1 / 3;
}

/* Constrained: fixed total height, equal rows */
.cph-portfolio-grid--homepage-bento.cph-portfolio-grid--constrained {
	grid-template-rows: 1fr 1fr;
	height: var(--grid-height);
}

/* =============================================================================
   LAYOUT: HOMEPAGE BENTO (4 cards)
   =============================================================================
   +------------------+---------+---------+
   |                  | Slot 2  | Slot 3  |
   |    Slot 1        | (square)| (square)|
   |    (tall left)   +---------+---------+
   |                  |      Slot 4       |
   |                  |   (wide bottom)   |
   +------------------+-------------------+
*/

.cph-portfolio-grid--homepage-bento-4 {
	grid-template-columns: 747fr 420fr 419fr;
	grid-template-rows: var(--card-height, 525px) calc(var(--card-height, 525px) * 0.81);
}

.cph-portfolio-grid--homepage-bento-4 .cph-card--slot-1 {
	grid-column: 1;
	grid-row: 1 / 3;
}

.cph-portfolio-grid--homepage-bento-4 .cph-card--slot-4 {
	grid-column: 2 / 4;
}

/* Bento-4 layout: let grid control heights */
.cph-portfolio-grid--homepage-bento-4 .cph-card {
	height: 100%;
	min-height: 0;
}

/* Constrained: fixed total height, proportional rows */
.cph-portfolio-grid--homepage-bento-4.cph-portfolio-grid--constrained {
	grid-template-rows: 1fr 0.81fr;
	height: var(--grid-height);
}

/* =============================================================================
   LAYOUT: PROJECTS GRID (featured-2col)
   =============================================================================
   Dynamic layout where featured posts span full width,
   regular posts flow in 2-column rows.

   +---------------------------+
   |   Featured Post           |  <- marked featured
   +-------------+-------------+
   |   Post 2    |   Post 3    |  <- regular posts
   +-------------+-------------+
   |   Featured Post           |  <- marked featured
   +-------------+-------------+
   |   Post 5    |   Post 6    |
   +---------------------------+
   |   Orphan (full width)     |  <- last odd post expands
   +---------------------------+
*/

.cph-portfolio-grid--featured-2col {
	grid-template-columns: 1fr 1fr;
}

/* Full-width cards (featured or orphan) */
.cph-portfolio-grid--featured-2col .cph-card--full-width {
	grid-column: 1 / -1;
	min-height: calc(var(--card-height, 525px) * 1.2);
}

/* =============================================================================
   CARD BASE STYLES
   ============================================================================= */

.cph-card {
	backface-visibility: hidden;
	color: var(--text-color, #fff);
	display: block;
	min-height: var(--card-height, 525px);
	outline: 1px solid transparent;
	/* Prevents subpixel gaps during animations */
	overflow: hidden;
	position: relative;
	text-decoration: none;
	transform: translateZ(0);
	/* Force GPU layer */
}

/* Large cards in bento/featured layouts */
.cph-card--large {
	min-height: var(--card-height, 525px);
}

/* Bento layout: let grid control heights */
.cph-portfolio-grid--homepage-bento .cph-card {
	height: 100%;
	min-height: 0;
}

/* =============================================================================
   LOADING SPINNER (shared by masonry cards and zigzag image panels)
   ============================================================================= */

.cph-card__image,
.cph-zigzag__image {
	background: #1a1a1a;
}

.cph-card__image::before,
.cph-zigzag__image::before {
	animation: cph-spin 0.8s linear infinite;
	border: 3px solid rgba(255, 255, 255, 0.15);
	border-radius: 50%;
	border-top-color: rgba(255, 255, 255, 0.6);
	content: '';
	height: 36px;
	left: 50%;
	opacity: 1;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	transition: opacity 0.3s ease;
	width: 36px;
	z-index: 0;
}

.cph-card__image.is-loaded::before,
.cph-zigzag__image.is-loaded::before {
	opacity: 0;
	pointer-events: none;
}

@keyframes cph-spin {
	to {
		transform: translate(-50%, -50%) rotate(360deg);
	}
}

/* =============================================================================
   CARD IMAGE
   ============================================================================= */

.cph-card__image {
	inset: -5px;
	/* Overflow to cover subpixel gaps in grid layouts */
	position: absolute;
	z-index: 1;
}

.cph-card__image img,
.row .col .cph-card__image img,
.cph-card__image video,
.row .col .cph-card__image video {
	height: 100%;
	inset: 0;
	object-fit: cover;
	position: absolute;
	transition: transform 0.6s ease;
	width: 100%;
}

.cph-card:hover .cph-card__image img,
.cph-card:hover .cph-card__image video {
	transform: scale(1.05);
}

/* =============================================================================
   CARD OVERLAY
   ============================================================================= */

.cph-card__overlay {
	background: var(--overlay-color, #000);
	inset: 0;
	mix-blend-mode: var(--overlay-blend-mode, normal);
	opacity: var(--overlay-opacity, 0.2);
	position: absolute;
	transition: opacity 0.3s ease, background 0.3s ease, mix-blend-mode 0.3s ease;
	z-index: 2;
}

.cph-card:hover .cph-card__overlay {
	background: var(--overlay-color-hover, var(--overlay-color, #000));
	mix-blend-mode: var(--overlay-blend-mode-hover, var(--overlay-blend-mode, normal));
	opacity: var(--overlay-opacity-hover, 0.3);
}

/* =============================================================================
   CARD EXTRA CONTENT (Logo + Excerpt)
   ============================================================================= */

.cph-card__extra {
	left: 20%;
	mix-blend-mode: var(--logo-blend-mode, normal);
	position: absolute;
	right: 20%;
	text-align: left;
	top: 50%;
	transform: translateY(-60%);
	z-index: 3;
}

.cph-card__logo,
.row .col .cph-card__logo {
	display: block;
	filter: brightness(var(--logo-brightness, 1));
	height: auto !important;
	margin-bottom: 50px !important;
	margin-left: auto;
	margin-right: auto;
	max-width: none !important;
	width: var(--logo-max-width, 70%) !important;
}

.cph-card__excerpt {
	color: var(--text-color, #fff);
	font-family: 'aktiv-grotesk', sans-serif;
	font-size: 22px;
	line-height: 2.08;
	margin: 0;
	max-width: 514px;
}

/* =============================================================================
   CARD CONTENT (Location + Arrow)
   ============================================================================= */

.cph-card__content {
	align-items: center;
	bottom: 40px;
	display: flex;
	gap: 20px;
	justify-content: space-between;
	left: 40px;
	position: absolute;
	right: 40px;
	z-index: 3;
}

.cph-card__location {
	color: var(--text-color, #fff);
	font-family: 'area-normal', sans-serif;
	font-size: var(--location-font-size, 30px);
	font-weight: 400;
	letter-spacing: var(--location-letter-spacing, 1.5px);
	line-height: 1.2;
}

/* =============================================================================
   CONTENT POSITION: MIDDLE CENTER STACKED
   ============================================================================= */

.cph-card--middle-center .cph-card__content {
	align-items: center;
	bottom: 0;
	flex-direction: column;
	gap: 20px;
	justify-content: center;
	text-align: center;
	top: 0;
}

/* =============================================================================
   ARROW BUTTON (Pill shape)
   ============================================================================= */

.cph-card__arrow {
	color: var(--text-color, #fff);
	flex-shrink: 0;
	height: 50px;
	transition: transform 0.3s ease;
	width: 140px;
}

.cph-card__arrow svg {
	display: block;
	height: 100%;
	width: 100%;
}

.cph-card:hover .cph-card__arrow {
	transform: translateX(5px);
}

/* =============================================================================
   TEXT BUTTON (Pill shape with label)
   ============================================================================= */

.cph-card__text-btn {
	border: 1px solid var(--text-color, #fff);
	border-radius: 25px;
	color: var(--text-color, #fff);
	flex-shrink: 0;
	font-family: 'area-normal', sans-serif;
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 2.5px;
	padding: 14px 32px;
	text-transform: uppercase;
	transition: background 0.3s ease, color 0.3s ease;
}

.cph-card:hover .cph-card__text-btn {
	background: var(--text-color, #fff);
	color: var(--overlay-color, #000);
}

/* =============================================================================
   HOVER REVEAL (Title + Button fade-up on hover)
   ============================================================================= */

.cph-card__location,
.cph-card__text-btn {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.4s ease, transform 0.4s ease, background 0.3s ease, color 0.3s ease;
}

.cph-card__text-btn {
	transition-delay: 0.08s;
}

.cph-card:hover .cph-card__location,
.cph-card:hover .cph-card__text-btn {
	opacity: 1;
	transform: translateY(0);
}

/* =============================================================================
   RESPONSIVE: TABLET
   ============================================================================= */

@media (max-width: 1199px) {

	/* Homepage Bento - rows still use card height */
	.cph-portfolio-grid--homepage-bento {
		grid-template-rows: var(--card-height, 400px) var(--card-height, 400px);
	}

	.cph-portfolio-grid--homepage-bento-4 {
		grid-template-rows: var(--card-height, 400px) calc(var(--card-height, 400px) * 0.81);
	}

	/* Projects Grid - full-width cards slightly shorter on tablet */
	.cph-portfolio-grid--featured-2col .cph-card--full-width {
		min-height: calc(var(--card-height, 400px) * 1.15);
	}

	/* Typography adjustments */
	.cph-card__location {
		font-size: 24px;
	}

	.cph-card__excerpt {
		font-size: 18px;
	}

	.cph-card__arrow {
		height: 42px;
		width: 120px;
	}

	.cph-card__text-btn {
		font-size: 11px;
		padding: 12px 28px;
	}

	.cph-card__content {
		bottom: 30px;
		left: 30px;
		right: 30px;
	}

	.cph-card__extra {
		left: 30px;
		right: 30px;
	}
}

/* =============================================================================
   RESPONSIVE: MOBILE
   ============================================================================= */

@media (max-width: 999px) {

	/* Show title + button by default on touch devices (no hover) */
	.cph-card__location,
	.cph-card__text-btn {
		opacity: 1;
		transform: translateY(0);
	}

	/* All grids stack on mobile */
	.cph-portfolio-grid--homepage-bento,
	.cph-portfolio-grid--homepage-bento-4,
	.cph-portfolio-grid--featured-2col {
		grid-template-columns: 1fr;
		grid-template-rows: auto;
		min-height: auto;
	}

	/* Reset grid spans */
	.cph-portfolio-grid--homepage-bento .cph-card--slot-1,
	.cph-portfolio-grid--homepage-bento-4 .cph-card--slot-1 {
		grid-column: auto;
		grid-row: auto;
	}

	.cph-portfolio-grid--homepage-bento-4 .cph-card--slot-4 {
		grid-column: auto;
	}

	/* Projects Grid - full-width cards use same height as regular on mobile */
	.cph-portfolio-grid--featured-2col .cph-card--full-width {
		grid-column: auto;
		min-height: var(--card-height, 400px);
	}

	/* Card heights */
	.cph-card {
		min-height: 350px;
	}

	.cph-card--large {
		min-height: 400px;
	}

	.cph-portfolio-grid--homepage-bento .cph-card,
	.cph-portfolio-grid--homepage-bento-4 .cph-card {
		height: auto;
		min-height: 350px;
	}

	/* Content positioning */
	.cph-card__content {
		bottom: 25px;
		left: 25px;
		right: 25px;
	}

	.cph-card__extra {
		left: 25px;
		right: 25px;
		transform: translateY(-55%);
	}

	/* Typography */
	.cph-card__location {
		font-size: 20px;
		letter-spacing: 1px;
	}

	.cph-card__excerpt {
		font-size: 16px;
		line-height: 1.8;
	}

	.cph-card__logo {
		margin-bottom: 20px;
	}

	/* Arrow */
	.cph-card__arrow {
		height: 36px;
		width: 100px;
	}

	.cph-card__text-btn {
		font-size: 10px;
		letter-spacing: 2px;
		padding: 10px 24px;
	}
}

/* =============================================================================
   RESPONSIVE: SMALL MOBILE
   ============================================================================= */

@media (max-width: 599px) {

	.cph-card {
		min-height: 300px;
	}

	.cph-portfolio-grid--homepage-bento .cph-card,
	.cph-portfolio-grid--homepage-bento-4 .cph-card {
		height: auto;
		min-height: 300px;
	}

	.cph-card__content {
		align-items: flex-start;
		bottom: 20px;
		flex-direction: column;
		gap: 15px;
		left: 20px;
		right: 20px;
	}

	.cph-card__location {
		font-size: 18px;
	}

	.cph-card__arrow {
		align-self: flex-end;
		height: 32px;
		width: 90px;
	}

	.cph-card__text-btn {
		align-self: center;
		font-size: 10px;
		padding: 10px 22px;
	}

	.cph-card__extra {
		left: 20px;
		right: 20px;
	}

	.cph-card__excerpt {
		font-size: 14px;
	}

}

/* =============================================================================
   EMPTY CARD STATE (When no Portfolio selected)
   ============================================================================= */

.cph-card:empty {
	display: none;
}

/* =============================================================================
   NO CONTENT STATE (Portfolio exists but has no page content)
   ============================================================================= */

/* No-content cards: hover effects work, but no pointer cursor */
.cph-card--no-content {
	cursor: default;
}

/* =============================================================================
   LOWER THIRD EFFECT (Title hover animation)
   ============================================================================= */

/* Container needs position context for the bar */
.cph-portfolio-grid--lower-third .cph-card__location {
	position: relative;
	z-index: 1;
}

/* The animated bar (pseudo-element) */
.cph-portfolio-grid--lower-third .cph-card__location::before {
	background: var(--lower-third-bar-color, #fff);
	content: '';
	height: calc(100% + 40px);
	/* 20px padding top + bottom */
	left: -40px;
	/* Pin to card edge (content is 40px from edge) */
	position: absolute;
	top: 50%;
	transform: translateY(-45%) scaleX(0);
	/* -45% to visually center with uppercase text */
	transform-origin: left center;
	transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	width: calc(100% + 80px + 40px);
	/* full text + left offset + 40px right extension */
	z-index: -1;
}

/* Animate bar on card hover */
.cph-portfolio-grid--lower-third .cph-card:hover .cph-card__location::before {
	transform: translateY(-45%) scaleX(1);
}

/* Change text color on hover */
.cph-portfolio-grid--lower-third .cph-card:hover .cph-card__location {
	color: var(--lower-third-text-color, var(--text-color, #fff));
	transition: color 0.3s ease 0.1s;
	/* Slight delay so bar appears first */
}

/* Responsive: adjust left offset for tablet */
@media (max-width: 1199px) {
	.cph-portfolio-grid--lower-third .cph-card__location::before {
		left: -30px;
		width: calc(100% + 60px + 40px);
	}
}

/* Responsive: adjust left offset for mobile */
@media (max-width: 999px) {
	.cph-portfolio-grid--lower-third .cph-card__location::before {
		left: -25px;
		width: calc(100% + 50px + 40px);
	}
}

/* Responsive: adjust for small mobile */
@media (max-width: 599px) {
	.cph-portfolio-grid--lower-third .cph-card__location::before {
		left: -20px;
		width: calc(100% + 40px + 30px);
		/* Slightly less extension on small screens */
	}
}

/* =============================================================================
   LAYOUT: MASONRY
   =============================================================================
   CSS Grid with per-item sizing from Salient's masonry_item_sizing meta.
   regular = 1col × 1row, wide = 2col × 1row, tall = 1col × 2row, wide_tall = 2col × 2row.
   ============================================================================= */

/* ── Filter Bar ──────────────────────────────────────────────────────────── */

.cph-masonry__filter {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 5vw;
	justify-content: center;
	margin-bottom: 48px;
}

.cph-masonry__filter-btn {
	background: transparent;
	border: none;
	color: #000;
	cursor: pointer;
	font-family: 'Poppins', sans-serif;
	font-size: max(16px, 1.5vw);
	font-weight: 500;
	letter-spacing: 0.01em;
	padding: 8px 4px;
	text-transform: uppercase;
	transition: color 0.3s ease !important;
}

.cph-masonry__filter-btn:hover {
	color: #bbcb81 !important;
}

.cph-masonry__filter-btn.is-active {
	color: var(--ag-olive, #87A80E);
}

/* ── Masonry Grid ────────────────────────────────────────────────────────── */

.cph-masonry__grid {
	display: grid;
	gap: var(--grid-gap, 20px);
	grid-auto-flow: dense;
	grid-auto-rows: var(--masonry-row-height, 400px);
	grid-template-columns: repeat(var(--masonry-columns, 2), 1fr);
	width: 100%;
}

/* ── Item Sizing ─────────────────────────────────────────────────────────── */

.cph-masonry__item {
	min-height: 0;
	overflow: hidden;
}

/* Regular: 1×1 (default, no span needed) */

/* Wide: spans 2 columns */
.cph-masonry__item--wide {
	grid-column: span 2;
}

/* Tall: spans 2 rows */
.cph-masonry__item--tall {
	grid-row: span 2;
}

/* Wide + Tall: spans 2 columns and 2 rows */
.cph-masonry__item--wide_tall {
	grid-column: span 2;
	grid-row: span 2;
}

/* Cards inside masonry items must fill their container */
.cph-masonry__item .cph-card {
	height: 100%;
	min-height: 0;
}

/* ── Masonry Filter Animation ────────────────────────────────────────────── */

.cph-masonry__item {
	opacity: 1;
	transform: scale(1);
	transition: opacity 0.35s ease, transform 0.35s ease;
}

.cph-masonry__item.is-filtering-out {
	opacity: 0;
	transform: scale(0.95);
}

.cph-masonry__item.is-hidden {
	display: none;
}

.cph-masonry__item.is-filtering-in {
	opacity: 0;
	transform: scale(0.95);
}

/* ── Masonry Responsive: Tablet ──────────────────────────────────────────── */

@media (max-width: 999px) {

	/* Cap at 2 columns on tablet */
	.cph-masonry__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.cph-masonry__filter {
		gap: 6px 16px;
		margin-bottom: 32px;
	}

	.cph-masonry__filter-btn {
		font-size: 11px;
	}
}

/* ── Masonry Responsive: Mobile ──────────────────────────────────────────── */

@media (max-width: 689px) {

	/* Single column on mobile */
	.cph-masonry__grid {
		grid-template-columns: 1fr;
		grid-auto-rows: 300px;
	}

	/* Reset all spans on mobile */
	.cph-masonry__item--wide,
	.cph-masonry__item--tall,
	.cph-masonry__item--wide_tall {
		grid-column: auto;
		grid-row: auto;
	}
}

/* =============================================================================
   LAYOUT: ZIGZAG
   =============================================================================
   Alternating 50/50 rows. Odd rows: image-left / text-right.
   Even rows: image-right / text-left (via CSS order swap).
   ============================================================================= */

/* ── Filter Bar ──────────────────────────────────────────────────────────── */

.cph-zigzag__filter {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 10vw;
	justify-content: center;
	margin-bottom: 48px;
}

.cph-zigzag__filter-btn {
	background: transparent;
	border: none;
	color: #000;
	cursor: pointer;
	font-family: 'Poppins', sans-serif;
	font-size: max(16px, 1.7vw);
	font-weight: 500;
	letter-spacing: 0.01em;
	padding: 8px 4px;
	text-transform: uppercase;
	transition: color 0.3s ease !important;
}

.cph-zigzag__filter-btn:hover {
	color: #bbcb81 !important;
}

.cph-zigzag__filter-btn.is-active {
	color: var(--ag-olive, #87A80E);
}

/* ── Row Container ───────────────────────────────────────────────────────── */

.cph-zigzag__rows {
	display: flex;
	flex-direction: column;
	gap: var(--zigzag-row-gap, 40px);
}

/* ── Individual Row ──────────────────────────────────────────────────────── */

.cph-zigzag__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: var(--zigzag-row-height, 500px);
	opacity: 1;
	transform: translateY(0);
	transition: opacity 0.35s ease, transform 0.35s ease;
}

.cph-zigzag__row.is-filtering-out {
	opacity: 0;
	transform: translateY(12px);
}

.cph-zigzag__row.is-hidden {
	display: none;
}

.cph-zigzag__row.is-filtering-in {
	opacity: 0;
	transform: translateY(12px);
}

/* Flipped rows: image right, text left (toggled by JS for filter-safe zigzag) */
.cph-zigzag__row--flipped .cph-zigzag__image {
	order: 2;
}

.cph-zigzag__row--flipped .cph-zigzag__text {
	order: 1;
}

/* ── Image Panel ─────────────────────────────────────────────────────────── */

.cph-zigzag__image {
	overflow: hidden;
	position: relative;
}

.cph-zigzag__image img,
.row .col .cph-zigzag__image img {
	display: block;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s ease;
	width: 100%;
}

.cph-zigzag__row:hover .cph-zigzag__image img {
	transform: scale(1.03);
}

/* ── Text Panel ──────────────────────────────────────────────────────────── */

.cph-zigzag__text {
	align-items: flex-start;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 48px 64px;
}

/* ── Eyebrow ─────────────────────────────────────────────────────────────── */

.cph-zigzag__eyebrow {
	margin-bottom: 20px;
	text-align: left;
}

.cph-zigzag__eyebrow-tag {
	color: var(--ag-olive, #87A80E);
	font-family: 'Poppins', sans-serif;
	font-size: max(16px, 1.5vw);
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}


/* ── Title ───────────────────────────────────────────────────────────────── */

.cph-zigzag__title {
	color: #333;
	font-family: 'Poppins', sans-serif;
	font-size: max(34px, 3vw) !important;
	font-weight: 300;
	line-height: 1.2;
	margin: 0 0 40px;
	text-align: left;
}

/* ── Button ──────────────────────────────────────────────────────────────── */

.cph-zigzag__btn {
	border: 2px solid var(--ag-olive, #87A80E);
	border-radius: 50px;
	color: #221F20;
	display: inline-block;
	font-family: 'Poppins', sans-serif;
	font-size: max(16px, 1vw);
	font-weight: 600;
	letter-spacing: 0.05em;
	margin-top: 40px;
	padding: 24px 60px;
	text-box-edge: cap alphabetic;
	text-box-trim: trim-both;
	text-decoration: none;
	text-transform: uppercase;
	transition: border-color 0.3s ease, color 0.3s ease, background 0.3s ease;
}

a.cph-zigzag__btn:hover {
	border-color: var(--ag-olive, #87A80E);
	color: var(--ag-olive, #87A80E);
}

.cph-zigzag__btn--disabled {
	cursor: default;
	opacity: 0.4;
}

/* ── Hidden rows (filter) ────────────────────────────────────────────────── */

.cph-zigzag__row[style*="display: none"] {
	/* Prevent layout shift from gap on hidden items */
}

/* ── Zigzag Responsive: Tablet ───────────────────────────────────────────── */

@media (max-width: 1199px) {
	.cph-zigzag__text {
		padding: 40px 48px;
	}

	.cph-zigzag__btn {
		font-size: 11px;
		padding: 12px 28px;
	}
}

/* ── Zigzag Responsive: Mobile ───────────────────────────────────────────── */

@media (max-width: 999px) {
	.cph-zigzag__row {
		grid-template-columns: 1fr;
		min-height: auto;
	}

	/* Reset order: image always on top */
	.cph-zigzag__row--flipped .cph-zigzag__image,
	.cph-zigzag__row--flipped .cph-zigzag__text {
		order: unset;
	}

	.cph-zigzag__image {
		min-height: 300px;
	}

	.cph-zigzag__text {
		padding: 32px 24px;
	}

	.cph-zigzag__btn {
		margin-top: 10px;
	}

	.cph-zigzag__filter {
		gap: 6px 16px;
		margin-bottom: 32px;
	}

	.cph-zigzag__filter-btn {
		font-size: 11px;
	}

	/* ── Keep Zigzag on Tablet: restore 2-col layout ─────────────────────── */

	.cph-portfolio-grid--zigzag-keep-tablet .cph-zigzag__row {
		grid-template-columns: 1fr 1fr;
		min-height: var(--zigzag-row-height, 400px);
	}

	.cph-portfolio-grid--zigzag-keep-tablet .cph-zigzag__row--flipped .cph-zigzag__image {
		order: 2;
	}

	.cph-portfolio-grid--zigzag-keep-tablet .cph-zigzag__row--flipped .cph-zigzag__text {
		order: 1;
	}

	.cph-portfolio-grid--zigzag-keep-tablet .cph-zigzag__image {
		min-height: unset;
	}

	.cph-portfolio-grid--zigzag-keep-tablet .cph-zigzag__text {
		padding: 32px 40px;
	}
}

/* ── Zigzag Responsive: Small Mobile ─────────────────────────────────────── */

@media (max-width: 599px) {
	.cph-zigzag__image {
		min-height: 240px;
	}

	.cph-zigzag__text {
		padding: 24px 20px;
	}

	.cph-zigzag__btn {
		font-size: 10px;
		padding: 10px 24px;
	}

	/* Revert keep-tablet back to stacked on small screens */
	.cph-portfolio-grid--zigzag-keep-tablet .cph-zigzag__row {
		grid-template-columns: 1fr;
		min-height: auto;
	}

	.cph-portfolio-grid--zigzag-keep-tablet .cph-zigzag__row--flipped .cph-zigzag__image,
	.cph-portfolio-grid--zigzag-keep-tablet .cph-zigzag__row--flipped .cph-zigzag__text {
		order: unset;
	}

	.cph-portfolio-grid--zigzag-keep-tablet .cph-zigzag__image {
		min-height: 240px;
	}

	.cph-portfolio-grid--zigzag-keep-tablet .cph-zigzag__text {
		padding: 24px 20px;
	}
}

/* =============================================================================
   ANIMATION INTEGRATION (optional GSAP classes)
   =============================================================================
   The .fx-up and .curtain-wipe classes are handled by GSAP JavaScript.
   No CSS declarations needed here.
   ============================================================================= */