/* ============================================================
   projects.css — Projects slider page (loaded on /projects).
   Synced 1:1 with design file p4_4.
   ============================================================ */

/* ===== Projects slider — glass ===== */
.proj-slider { position: relative; }
.proj-track-outer { overflow: hidden; width: 100%; border-radius: 20px; }
.proj-track {
	display: flex; width: 100%;
	transition: transform .6s cubic-bezier(.2, .8, .2, 1);
	will-change: transform;
}
.proj-slide {
	width: 100%; flex: 0 0 100%;
	display: grid; grid-template-columns: 1fr 1fr; gap: 22px;
	align-items: stretch; padding: 4px; min-width: 0;
}
.proj-slide .proj-card.proj-full { grid-column: 1 / -1; }

.proj-card {
	position: relative; padding: 32px 30px; border-radius: 20px;
	background: linear-gradient(180deg, rgba(15, 33, 30, .6), rgba(7, 17, 15, .6));
	backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
	border: 1px solid var(--border-subtle);
	display: flex; flex-direction: column; gap: 18px;
	overflow: hidden; min-width: 0;
	transition: all .4s cubic-bezier(.2, .8, .2, 1);
}
.proj-card::before {
	content: ""; position: absolute; inset: 0; border-radius: 20px; padding: 1px;
	background: linear-gradient(135deg, rgba(103, 211, 204, .4), transparent 50%);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor; mask-composite: exclude;
	opacity: 0; transition: opacity .4s; pointer-events: none;
}
.proj-card::after {
	content: ""; position: absolute; inset: 0; opacity: 0; pointer-events: none;
	background: radial-gradient(circle at 50% 0%, rgba(103, 211, 204, .18), transparent 60%);
	transition: opacity .4s;
}
.proj-card:hover { transform: translateY(-6px); border-color: rgba(103, 211, 204, .4); }
.proj-card:hover::before { opacity: 1; }
.proj-card:hover::after { opacity: 1; }

.proj-card.proj-full {
	display: grid; grid-template-columns: 1fr 1fr; gap: 28px 44px;
	align-items: start; padding: 40px;
}
.proj-card.proj-full .proj-head     { grid-column: 1; }
.proj-card.proj-full .proj-overview { grid-column: 1; }
.proj-card.proj-full .proj-did      { grid-column: 1; }
.proj-card.proj-full .proj-result   { grid-column: 2; grid-row: 1 / 4; }
.proj-card.proj-full .proj-tech     { grid-column: 1; }

.proj-num {
	position: absolute; top: 18px; right: 24px;
	font-family: var(--mono); font-size: 52px; font-weight: 700; line-height: 1;
	color: rgba(103, 211, 204, .08);
	letter-spacing: -.04em; user-select: none; pointer-events: none;
	z-index: 0;
}

.proj-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; position: relative; z-index: 1; }
.proj-badge {
	display: inline-flex; align-items: center; gap: 6px;
	font-family: var(--mono); font-size: 11px; font-weight: 500; line-height: 1;
	padding: 6px 12px; border-radius: 100px; white-space: nowrap;
	background: rgba(103, 211, 204, .1);
	border: 1px solid rgba(103, 211, 204, .3);
	color: var(--accent-mid);
}

.proj-card h3 {
	font-size: 19px; font-weight: 700; line-height: 1.25;
	color: var(--text-main); padding-right: 56px; letter-spacing: -.01em;
	position: relative; z-index: 1;
}

.proj-overview {
	font-size: 14.5px; line-height: 1.65; color: var(--text-soft);
	position: relative; z-index: 1;
}

.proj-lbl {
	font-family: var(--mono); font-size: 11px; font-weight: 600;
	text-transform: uppercase; letter-spacing: .14em;
	color: var(--accent-mid); margin-bottom: 12px;
	display: flex; align-items: center; gap: 8px;
}
.proj-lbl::before {
	content: ""; width: 18px; height: 1px;
	background: linear-gradient(90deg, var(--accent-mid), transparent);
}

.proj-list { list-style: none; display: grid; gap: 2px; }
.proj-list li {
	font-size: 13.5px; color: var(--text-soft); line-height: 1.55;
	padding: 6px 0 6px 18px; position: relative;
	border-bottom: 1px solid rgba(103, 211, 204, .06);
}
.proj-list li:last-child { border-bottom: none; }
.proj-list li::before {
	content: "›"; position: absolute; left: 2px; top: 5px;
	color: var(--accent-mid); font-size: 15px; font-weight: 700; line-height: 1.3;
}

.proj-hl-list { list-style: none; display: grid; gap: 10px; }
.proj-hl-list li {
	font-size: 13.5px; color: var(--text-soft); line-height: 1.55;
	padding-left: 30px; position: relative;
}
.proj-hl-list li::before {
	content: "✓"; position: absolute; left: 0; top: 1px;
	width: 20px; height: 20px; border-radius: 50%;
	background: var(--gradient-1);
	color: var(--text-invert); font-size: 11px; font-weight: 900;
	display: grid; place-items: center;
	box-shadow: 0 4px 12px var(--glow-strong);
}

.proj-result .proj-lbl { color: var(--accent-light); }

.proj-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.proj-tag {
	font-family: var(--mono); font-size: 11px; font-weight: 500;
	padding: 5px 10px; border-radius: 6px;
	border: 1px solid var(--border-subtle);
	color: var(--text-muted); background: rgba(103, 211, 204, .04);
	transition: all .25s ease;
}
.proj-card:hover .proj-tag { color: var(--accent-mid); border-color: rgba(103, 211, 204, .3); }

/* Nav */
.proj-nav {
	display: flex; align-items: center; justify-content: center;
	gap: 18px; margin-top: 36px;
}
.proj-btn {
	width: 46px; height: 46px; border-radius: 50%;
	border: 1px solid var(--border-subtle);
	background: rgba(103, 211, 204, .08);
	color: var(--accent-mid);
	display: grid; place-items: center; cursor: pointer; flex-shrink: 0;
	transition: all .25s ease;
}
.proj-btn:hover:not(:disabled) {
	background: var(--gradient-1);
	border-color: var(--accent-mid); color: var(--text-invert);
	transform: scale(1.08);
	box-shadow: 0 8px 24px var(--glow-strong);
}
.proj-btn:disabled { opacity: .3; cursor: default; }

.proj-dots { display: flex; gap: 10px; align-items: center; }
.proj-dot {
	width: 8px; height: 8px; border-radius: 50%;
	border: 1px solid var(--accent-mid);
	background: transparent; cursor: pointer;
	transition: all .25s ease;
}
.proj-dot.on {
	background: var(--accent-mid); transform: scale(1.35);
	box-shadow: 0 0 10px var(--glow-strong);
}

.proj-count {
	font-family: var(--mono); font-size: 12px;
	color: var(--text-muted); min-width: 48px; text-align: center; letter-spacing: .08em;
}

/* Responsive */
@media (max-width: 960px) {
	.proj-slide { grid-template-columns: 1fr; }
	.proj-card.proj-full { grid-template-columns: 1fr; padding: 32px 26px; gap: 22px; }
	.proj-card.proj-full .proj-result { grid-column: 1; grid-row: auto; }
}
@media (max-width: 560px) {
	.proj-card { padding: 26px 22px; }
	.proj-card h3 { font-size: 17px; padding-right: 44px; }
	.proj-num { font-size: 42px; top: 14px; right: 18px; }
}