/* ==============================================
   MFHU Theme — Portfolio section
   ============================================== */

.pf-w {
	max-width: 1200px;
	width: 100%;
}

.pf-w .slbl {
	color: var(--prism-ice);
}

.pf-grid {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: 0.8rem;
}

.pt {
	display: block;
	position: relative;
	overflow: hidden;
	cursor: pointer;
	box-shadow: 0 10px 35px rgba(0, 0, 0, 0.35);
}

.pt:hover {
	z-index: 10;
}

.pt:nth-child(1) {
	grid-column: 1 / 6;
	height: 260px;
	clip-path: polygon(0% 5%, 96% 0%, 100% 92%, 3% 100%);
	--rest: rotate(-2deg);
}

.pt:nth-child(2) {
	grid-column: 6 / 13;
	height: 260px;
	clip-path: polygon(4% 0%, 100% 4%, 97% 100%, 0% 95%);
	--rest: rotate(1.5deg);
}

.pt:nth-child(3) {
	grid-column: 1 / 5;
	height: 220px;
	clip-path: polygon(0% 0%, 95% 6%, 100% 100%, 5% 94%);
	--rest: rotate(2.5deg);
}

.pt:nth-child(4) {
	grid-column: 5 / 9;
	height: 220px;
	clip-path: polygon(6% 0%, 100% 4%, 94% 96%, 0% 100%);
	--rest: rotate(-2deg);
}

.pt:nth-child(5) {
	grid-column: 9 / 13;
	height: 220px;
	clip-path: polygon(3% 4%, 97% 0%, 100% 97%, 0% 93%);
	--rest: rotate(1.8deg);
}

/* ---- Portfolio item backgrounds ---- */
.pt-bg {
	position: absolute;
	inset: -10px;
	transition: transform 0.8s var(--ease);
}

.pt:hover .pt-bg {
	transform: scale(1.12);
}

.pt:nth-child(1) .pt-bg { background: linear-gradient(140deg, #000a1a, #001a3a, #000a1a); }
.pt:nth-child(2) .pt-bg { background: linear-gradient(140deg, #0e0020, #1e003a, #0e0020); }
.pt:nth-child(3) .pt-bg { background: linear-gradient(140deg, #000e10, #002020, #000e10); }
.pt:nth-child(4) .pt-bg { background: linear-gradient(140deg, #1a0800, #2a1000, #1a0800); }
.pt:nth-child(5) .pt-bg { background: linear-gradient(140deg, #06001a, #0c003a, #06001a); }

/* ---- Prismatic glow dot ---- */
.pt-glow {
	position: absolute;
	width: 8px;
	height: 8px;
	z-index: 2;
	clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

/*
 * Per-card glow position — anchored near the polygon's top-left corner.
 *
 * Each clip-path insets the corners differently, so the glow dot
 * must be placed relative to where the top-left vertex actually sits.
 *
 * 1: TL = (0%, 5%)    → left: 1rem,              top: calc(5% + 0.8rem)
 * 2: TL = (4%, 0%)    → left: calc(4% + 1rem),   top: 0.8rem
 * 3: TL = (0%, 0%)    → left: 1rem,              top: 0.8rem
 * 4: TL = (6%, 0%)    → left: calc(6% + 1rem),   top: 0.8rem
 * 5: TL = (3%, 4%)    → left: calc(3% + 1rem),   top: calc(4% + 0.8rem)
 */
.pt:nth-child(1) .pt-glow { top: calc(5% + 0.8rem); left: 1rem;            background: var(--prism-cyan);    box-shadow: 0 0 15px var(--prism-cyan); }
.pt:nth-child(2) .pt-glow { top: 0.8rem;            left: calc(4% + 1rem);  background: var(--prism-magenta); box-shadow: 0 0 15px var(--prism-magenta); }
.pt:nth-child(3) .pt-glow { top: 0.8rem;            left: 1rem;             background: var(--prism-green);   box-shadow: 0 0 15px var(--prism-green); }
.pt:nth-child(4) .pt-glow { top: 0.8rem;            left: calc(6% + 1rem);  background: var(--prism-orange);  box-shadow: 0 0 15px var(--prism-orange); }
.pt:nth-child(5) .pt-glow { top: calc(4% + 0.8rem); left: calc(3% + 1rem);  background: var(--prism-violet);  box-shadow: 0 0 15px var(--prism-violet); }

/* ---- Portfolio item info ---- */
.pt-info {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 2rem 2rem 1.8rem;
	z-index: 2;
	background: linear-gradient(to top, rgba(1, 1, 8, 0.93) 0%, rgba(1, 1, 8, 0.7) 60%, transparent 100%);
}

/*
 * Per-card content distortion — calculated from polygon geometry.
 *
 * skewX  = atan(left-edge horizontal lean / left-edge height)
 * skewY  = atan(bottom-edge vertical drop / bottom-edge width)
 *
 * 1: polygon(0% 5%, 96% 0%, 100% 92%, 3% 100%)
 *    left: (0,5)→(3,100) lean=3/95  → skewX ≈ +1.8°
 *    bottom: (3,100)→(100,92) slope=-8/97 → skewY ≈ -4.7°
 *    BL inset: 3%
 *
 * 2: polygon(4% 0%, 100% 4%, 97% 100%, 0% 95%)
 *    left: (4,0)→(0,95) lean=-4/95  → skewX ≈ -2.4°
 *    bottom: (0,95)→(97,100) slope=5/97 → skewY ≈ +3.0°
 *    BR inset: 3%
 *
 * 3: polygon(0% 0%, 95% 6%, 100% 100%, 5% 94%)
 *    left: (0,0)→(5,94) lean=5/94   → skewX ≈ +3.0°
 *    bottom: (5,94)→(100,100) slope=6/95 → skewY ≈ +3.6°
 *    BL inset: 5%
 *
 * 4: polygon(6% 0%, 100% 4%, 94% 96%, 0% 100%)
 *    left: (6,0)→(0,100) lean=-6/100 → skewX ≈ -3.4°
 *    bottom: (0,100)→(94,96) slope=-4/94 → skewY ≈ -2.4°
 *    BR inset: 6%
 *
 * 5: polygon(3% 4%, 97% 0%, 100% 97%, 0% 93%)
 *    left: (3,4)→(0,93) lean=-3/89  → skewX ≈ -1.9°
 *    bottom: (0,93)→(100,97) slope=4/100 → skewY ≈ +2.3°
 */
.pt:nth-child(1) .pt-info { transform: skew(1.8deg, -4.7deg); padding-left: calc(3% + 2rem); }
.pt:nth-child(2) .pt-info { transform: skew(-2.4deg, 3.0deg); padding-right: calc(3% + 2rem); }
.pt:nth-child(3) .pt-info { transform: skew(3.0deg, 3.6deg);  padding-left: calc(5% + 2rem); }
.pt:nth-child(4) .pt-info { transform: skew(-3.4deg, -2.4deg); padding-right: calc(6% + 2rem); }
.pt:nth-child(5) .pt-info { transform: skew(-1.9deg, 2.3deg); }

.pt-tg {
	font-family: var(--mono);
	font-size: 0.5rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	margin-bottom: 0.3rem;
	display: block;
}

.pt:nth-child(1) .pt-tg { color: var(--prism-cyan); }
.pt:nth-child(2) .pt-tg { color: var(--prism-magenta); }
.pt:nth-child(3) .pt-tg { color: var(--prism-green); }
.pt:nth-child(4) .pt-tg { color: var(--prism-orange); }
.pt:nth-child(5) .pt-tg { color: var(--prism-violet); }

.pt-info h3 {
	font-family: var(--font);
	font-weight: 300;
	font-size: 1.1rem;
	color: var(--text);
	margin-bottom: 0.15rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.pt-info p {
	font-size: 0.72rem;
	color: var(--dim);
}