/**
 * Work page portfolio — viewport-relative spacing (vw) + clamp.
 * Targets design spec: ~150px vertical rhythm between rows at desktop, fluid gutters.
 *
 * @package Agency77
 */

.work-portfolio {
	/* ~150px at a 1600px-wide artboard ? 9.375vw; capped so it does not grow past 150px */
	--work-row-gap: clamp(3rem, 9.375vw, 9.375rem);
	--work-px: clamp(1rem, 4vw, 4rem);
	--work-gap: clamp(1.5rem, 4vw, 4rem);
}

.work-portfolio-section {
	margin-bottom: var(--work-row-gap);
}

.work-portfolio-section:last-child {
	margin-bottom: 0;
}

.work-portfolio-section--wide {
	max-width: min(100% - 2 * var(--work-px), 1600px);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--work-px);
	padding-right: var(--work-px);
}

.work-portfolio-section--narrow {
	max-width: min(100% - 2 * var(--work-px), 80rem);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--work-px);
	padding-right: var(--work-px);
}

.work-portfolio-section--center {
	max-width: min(100% - 2 * var(--work-px), 80rem);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--work-px);
	padding-right: var(--work-px);
	display: flex;
	justify-content: center;
}

.work-portfolio-center-inner {
	width: 100%;
	max-width: 100%;
}

/* Grids */
.work-portfolio-grid {
	display: grid;
	gap: var(--work-gap);
	align-items: start;
	grid-template-columns: 1fr;
}

@media (min-width: 768px) {
	.work-portfolio-grid--equal {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Hero row: wider left column (~62% / ~38%) — matches portfolio mock */
	.work-portfolio-grid--asym-top {
		grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr);
	}

	.work-portfolio-grid--narrow-asym {
		grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
	}
}

/* Image frames: heights derived from static px / 1600 reference width ? vw, with sensible min heights */
.work-portfolio-img {
	overflow: hidden;
	width: 100%;
}

.work-portfolio-img--abadia-ethical-luxury {
	height: clamp(220px, 31.25vw, 500px);
}

.work-portfolio-img--vedi-herbals {
	height: clamp(260px, 38.75vw, 620px);
}

.work-portfolio-img--curious-cheese {
	height: clamp(200px, 38.75vw, 620px);
}

.work-portfolio-img--art-throng {
	height: clamp(220px, 34.375vw, 550px);
}

.work-portfolio-img--cadence-theory {
	height: clamp(200px, 32.5vw, 520px);
}

.work-portfolio-img--oils-of-amun {
	height: clamp(220px, 38.75vw, 620px);
}

.work-portfolio-img--shantivijay-jewellers {
	height: clamp(200px, 34.375vw, 550px);
}

.work-portfolio-img--nistula {
	height: clamp(240px, 34.375vw, 550px);
}

.work-portfolio-img--t-zed {
	height: clamp(260px, 38.75vw, 620px);
}

.work-portfolio-img--famozi {
	height: clamp(200px, 32.5vw, 520px);
}

.work-portfolio-img--hpl-additives {
	height: clamp(240px, 34.375vw, 550px);
}

.work-portfolio-img--pepsi-drc {
	height: clamp(260px, 38.75vw, 620px);
}

.work-portfolio-img--advaya {
	height: clamp(220px, 38.75vw, 620px);
}

.work-portfolio-img--club-patio {
	height: clamp(200px, 34.375vw, 550px);
}

.work-portfolio-img--urban-farms {
	height: clamp(200px, 32.5vw, 520px);
}

.work-portfolio-img--fatorda-foods {
	height: clamp(240px, 34.375vw, 550px);
}

.work-portfolio-img--vogue-cafe-dubai {
	height: clamp(260px, 38.75vw, 620px);
}

.work-portfolio-img--maia-luxury-home-decor {
	height: clamp(200px, 32.5vw, 520px);
}

.work-portfolio-img--the-v-kolkata {
	height: clamp(240px, 34.375vw, 550px);
}

.work-portfolio-img--manavsini {
	height: clamp(260px, 38.75vw, 620px);
}

.work-portfolio-img--uber-eats-dubai {
	height: clamp(220px, 38.75vw, 620px);
}

.work-portfolio-img--carminas-curry {
	height: clamp(200px, 34.375vw, 550px);
}

.work-portfolio-img--venire {
	height: clamp(200px, 32.5vw, 520px);
}

/* Fallback for projects not in the map */
.work-portfolio-img--default {
	height: clamp(220px, 31.25vw, 500px);
}

/* Fluid type on Work page only (home featured cards keep theme utilities) */
.work-portfolio .work-portfolio-title {
	font-size: clamp(1.125rem, 2.2vw, 1.75rem);
	line-height: 1.25;
}

.work-portfolio .work-portfolio-meta {
	font-size: clamp(0.8125rem, 1.05vw, 1rem);
	line-height: 1.45;
}