/**
 * IQ CONSTRUCT — Homepage portfolio (`Lucrări realizate`, automatic mode).
 *
 * Filters by kind of work, the newest five projects as one large and four
 * smaller photographs, and a last card that leads into the whole portfolio.
 * Built on the V5 tokens (v5.css). Only transform and opacity animate.
 *
 * Placement is driven by two attributes the markup (and the script, after a
 * filter) sets: data-n on the grid (how many projects show, 1–5) and
 * data-slot on each shown project (its position, 1–5).
 */

.v5-pf {
	--pf-row: clamp(200px, 19vw, 290px);
	--pf-r: 14px;
	grid-column: content-start / content-end;
	min-inline-size: 0;
}

/* ── Filters ─────────────────────────────────────────────────────────────── */

.v5-pf__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 24px;
}

.v5-pf__filters[hidden] { display: none; }

.v5-pf__chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-block-size: 44px;
	padding: 0 16px 0 18px;
	border: 1px solid var(--v5-rule);
	border-radius: 999px;
	background: var(--v5-paper);
	color: var(--v5-ink);
	font: 500 15px/1 var(--v5-body);
	cursor: pointer;
	transition: background-color var(--v5-dur) var(--v5-ease), border-color var(--v5-dur) var(--v5-ease), color var(--v5-dur) var(--v5-ease);
}

.v5-pf__chip-n {
	display: inline-grid;
	place-items: center;
	min-inline-size: 24px;
	block-size: 24px;
	padding: 0 7px;
	border-radius: 999px;
	background: var(--v5-warm);
	color: var(--v5-graphite);
	font-size: 12px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	transition: background-color var(--v5-dur) var(--v5-ease), color var(--v5-dur) var(--v5-ease);
}

.v5-pf__chip:hover { border-color: var(--v5-ink); }

.v5-pf__chip[aria-pressed="true"] {
	background: var(--v5-ink);
	border-color: var(--v5-ink);
	color: #FFFFFF;
}

.v5-pf__chip[aria-pressed="true"] .v5-pf__chip-n { background: rgba(255, 255, 255, .16); color: #FFFFFF; }

.v5-pf__chip:focus-visible,
.v5-pf__card:focus-visible,
.v5-pf__more:focus-visible {
	outline: 2px solid var(--v5-ink);
	outline-offset: 3px;
}

.v5-pf__status {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

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

.v5-pf__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--v5-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.v5-pf__item { position: relative; min-inline-size: 0; margin: 0; }
.v5-pf__item[hidden] { display: none; }

/* Phones: the newest large, then two by two, the invitation last. */
.v5-pf__item[data-slot="1"] { grid-column: 1 / -1; aspect-ratio: 4 / 3; }
.v5-pf__item[data-slot]:not([data-slot="1"]) { aspect-ratio: 1; }
.v5-pf__item--cta { grid-column: 1 / -1; }
/* An odd number of small cards leaves a gap beside the last: the invitation
   takes it. */
.v5-pf__grid[data-n="2"] .v5-pf__item--cta,
.v5-pf__grid[data-n="4"] .v5-pf__item--cta { grid-column: auto; aspect-ratio: 1; }

@media (min-width: 768px) {
	.v5-pf__grid {
		grid-template-columns: repeat(6, minmax(0, 1fr));
		grid-template-rows: var(--pf-row) var(--pf-row) auto;
	}

	/* Undo the phone shapes (same specificity as the rules that set them). */
	.v5-pf__item[data-slot="1"],
	.v5-pf__item[data-slot]:not([data-slot="1"]),
	.v5-pf__grid .v5-pf__item--cta { aspect-ratio: auto; }

	/* The newest: two thirds wide, two rows tall. */
	.v5-pf__item[data-slot="1"] { grid-column: 1 / 5; grid-row: 1 / 3; }
	.v5-pf__item[data-slot="2"] { grid-column: 5 / 7; grid-row: 1; }
	.v5-pf__item[data-slot="3"] { grid-column: 5 / 7; grid-row: 2; }
	.v5-pf__item[data-slot="4"] { grid-column: 1 / 3; grid-row: 3; min-block-size: var(--pf-row); }
	.v5-pf__item[data-slot="5"] { grid-column: 3 / 5; grid-row: 3; min-block-size: var(--pf-row); }
	.v5-pf__item--cta { grid-column: 5 / 7; grid-row: 3; min-block-size: var(--pf-row); }

	/* Four: the fourth and the invitation share the last row. */
	.v5-pf__grid[data-n="4"] .v5-pf__item[data-slot="4"] { grid-column: 1 / 4; }
	.v5-pf__grid[data-n="4"] .v5-pf__item--cta { grid-column: 4 / 7; aspect-ratio: auto; }

	/* Three or fewer: the invitation becomes a bar under the photographs. */
	.v5-pf__grid[data-n="1"] .v5-pf__item--cta,
	.v5-pf__grid[data-n="2"] .v5-pf__item--cta,
	.v5-pf__grid[data-n="3"] .v5-pf__item--cta { grid-column: 1 / -1; min-block-size: 0; aspect-ratio: auto; }
	.v5-pf__grid[data-n="1"] .v5-pf__item[data-slot="1"] { grid-column: 1 / -1; }
	.v5-pf__grid[data-n="2"] .v5-pf__item[data-slot="2"] { grid-row: 1 / 3; }
}

/* ── Project card ────────────────────────────────────────────────────────── */

body .v5-pf a.v5-pf__card {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	block-size: 100%;
	overflow: hidden;
	isolation: isolate;
	border-radius: var(--pf-r);
	background: var(--v5-warm-deep);
	color: #FFFFFF;
	text-decoration: none;
}

/* Outranks the theme's img { height: auto } rules. */
.v5-pf .v5-pf__card > img.v5-pf__img {
	position: absolute;
	inset: 0;
	z-index: -2;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	transition: transform 900ms var(--v5-ease);
}

/* The caption sits on a gradient that is dark only where the text is. */
.v5-pf__card::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgba(10, 10, 10, 0) 38%, rgba(10, 10, 10, .45) 64%, rgba(10, 10, 10, .82) 100%);
}

.v5-pf__body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 20px 72px 20px 20px;
}

.v5-pf__meta {
	font: 600 11px/1.3 var(--v5-body);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .82);
}

.v5-pf__title {
	font-family: var(--v5-display);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -.015em;
	text-wrap: pretty;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.v5-pf__place { font: 400 13px/1.4 var(--v5-body); color: rgba(255, 255, 255, .8); }

.v5-pf__item[data-slot="1"] .v5-pf__body { padding: 28px 88px 28px 28px; }
.v5-pf__item[data-slot="1"] .v5-pf__title { font-size: clamp(20px, 2.1vw, 28px); line-height: 1.18; }

/* The arrow: a quiet circle that fills on hover. */
.v5-pf__go {
	position: absolute;
	inset-inline-end: 20px;
	inset-block-end: 20px;
	display: grid;
	place-items: center;
	inline-size: 44px;
	block-size: 44px;
	border: 1px solid rgba(255, 255, 255, .55);
	border-radius: 999px;
	color: #FFFFFF;
	transition: background-color var(--v5-dur) var(--v5-ease), border-color var(--v5-dur) var(--v5-ease), color var(--v5-dur) var(--v5-ease), transform var(--v5-dur) var(--v5-ease);
}

.v5-pf__item[data-slot="1"] .v5-pf__go { inset-inline-end: 28px; inset-block-end: 28px; }

.v5-pf__go::before,
.v5-pf__more-go::before {
	content: '';
	inline-size: 18px;
	block-size: 18px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}

@media (hover: hover) {
	.v5-pf .v5-pf__card:hover > img.v5-pf__img { transform: scale(1.045); }
	.v5-pf__card:hover .v5-pf__go { background: #FFFFFF; border-color: #FFFFFF; color: var(--v5-ink); transform: translateX(2px); }
}

/* ── The invitation ──────────────────────────────────────────────────────── */

body .v5-pf a.v5-pf__more {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 6px;
	block-size: 100%;
	padding: 24px 88px 24px 24px;
	border-radius: var(--pf-r);
	background: var(--v5-ink);
	color: #FFFFFF;
	text-decoration: none;
	transition: background-color var(--v5-dur) var(--v5-ease);
}

.v5-pf__peek { display: flex; margin-block-end: auto; padding-block-end: 20px; }
.v5-pf__peek:empty { display: none; }

.v5-pf__peek img {
	inline-size: 48px;
	block-size: 48px;
	border: 2px solid var(--v5-ink);
	border-radius: 999px;
	object-fit: cover;
	transition: transform var(--v5-dur) var(--v5-ease);
}

.v5-pf__peek img + img { margin-inline-start: -12px; }

.v5-pf__more-n {
	display: none;
	margin-block-end: auto;
	font-family: var(--v5-display);
	font-size: clamp(56px, 6vw, 88px);
	font-weight: 600;
	line-height: 1;
	letter-spacing: -.04em;
	color: rgba(255, 255, 255, .92);
	font-variant-numeric: tabular-nums;
}

.v5-pf__peek:empty + .v5-pf__more-n { display: block; }

.v5-pf__more-kicker {
	font: 600 11px/1.3 var(--v5-body);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .7);
}

.v5-pf__more-title {
	font-family: var(--v5-display);
	font-size: clamp(20px, 1.8vw, 24px);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -.02em;
	text-wrap: balance;
}

.v5-pf__more-go {
	position: absolute;
	inset-inline-end: 24px;
	inset-block-end: 24px;
	display: grid;
	place-items: center;
	inline-size: 48px;
	block-size: 48px;
	border-radius: 999px;
	background: #FFFFFF;
	color: var(--v5-ink);
	transition: transform var(--v5-dur) var(--v5-ease);
}

@media (hover: hover) {
	.v5-pf__more:hover { background: #26282B; }
	.v5-pf__more:hover .v5-pf__more-go { transform: translateX(3px); }
	.v5-pf__more:hover .v5-pf__peek img:nth-child(2) { transform: translateX(4px); }
	.v5-pf__more:hover .v5-pf__peek img:nth-child(3) { transform: translateX(8px); }
}

/* The bar version, under three or fewer photographs. */
@media (min-width: 768px) {
	.v5-pf__grid[data-n="1"] a.v5-pf__more,
	.v5-pf__grid[data-n="2"] a.v5-pf__more,
	.v5-pf__grid[data-n="3"] a.v5-pf__more {
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		gap: 20px;
		padding: 20px 96px 20px 24px;
	}

	.v5-pf__grid[data-n="1"] .v5-pf__peek,
	.v5-pf__grid[data-n="2"] .v5-pf__peek,
	.v5-pf__grid[data-n="3"] .v5-pf__peek { order: 3; margin: 0 0 0 auto; padding: 0; }

	.v5-pf__grid[data-n="1"] .v5-pf__more-n,
	.v5-pf__grid[data-n="2"] .v5-pf__more-n,
	.v5-pf__grid[data-n="3"] .v5-pf__more-n { display: none; }

	.v5-pf__grid[data-n="1"] .v5-pf__more-go,
	.v5-pf__grid[data-n="2"] .v5-pf__more-go,
	.v5-pf__grid[data-n="3"] .v5-pf__more-go { inset-block-end: 50%; translate: 0 50%; }
}

/* Phones: the half-width invitation keeps its words on two short lines. */
@media (max-width: 767px) {
	.v5-pf { --pf-r: 12px; }
	.v5-pf__filters { margin-block-end: 20px; }
	.v5-pf__chip { padding-inline: 14px 12px; font-size: 14px; }
	.v5-pf__body { padding: 14px 60px 14px 14px; }
	.v5-pf__item[data-slot="1"] .v5-pf__body { padding: 18px 72px 18px 18px; }
	.v5-pf__item[data-slot]:not([data-slot="1"]) .v5-pf__body { padding: 12px; }
	.v5-pf__item[data-slot]:not([data-slot="1"]) .v5-pf__meta,
	.v5-pf__item[data-slot]:not([data-slot="1"]) .v5-pf__go { display: none; }
	.v5-pf__title { font-size: 15px; }
	.v5-pf__item[data-slot="1"] .v5-pf__title { font-size: 20px; }
	.v5-pf__item[data-slot="1"] .v5-pf__go { inset-inline-end: 18px; inset-block-end: 18px; }
	body .v5-pf a.v5-pf__more { padding: 20px 80px 20px 20px; }
	.v5-pf__more-go { inset-inline-end: 20px; inset-block-end: 20px; }
	.v5-pf__grid[data-n="2"] a.v5-pf__more,
	.v5-pf__grid[data-n="4"] a.v5-pf__more { padding: 14px; }
	.v5-pf__grid[data-n="2"] .v5-pf__more-go,
	.v5-pf__grid[data-n="4"] .v5-pf__more-go { position: static; flex: none; margin-block-start: 6px; inline-size: 40px; block-size: 40px; }
	/* The square half-card has room for the number, the title and the arrow. */
	.v5-pf__grid[data-n="2"] .v5-pf__more-kicker,
	.v5-pf__grid[data-n="4"] .v5-pf__more-kicker { display: none; }
	.v5-pf__grid[data-n="2"] .v5-pf__peek,
	.v5-pf__grid[data-n="4"] .v5-pf__peek { padding-block-end: 0; }
	.v5-pf__grid[data-n="2"] .v5-pf__more-title,
	.v5-pf__grid[data-n="4"] .v5-pf__more-title { font-size: 17px; }
	.v5-pf__peek img { inline-size: 40px; block-size: 40px; }
	.v5-pf__more-n { font-size: 48px; }
	.v5-pf__grid:not([data-n="2"]):not([data-n="4"]) .v5-pf__more-n { display: none; }
}

/* A filter change: the new set rises in, one after another. */
.v5-pf__item.is-entering { animation: v5-pf-in 480ms var(--v5-ease) both; animation-delay: calc(var(--i, 0) * 50ms); }

@keyframes v5-pf-in {
	from { opacity: 0; transform: translateY(12px); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.v5-pf *, .v5-pf__item.is-entering { transition: none !important; animation: none !important; }
}