/* =====================================================================
   Otter Solutions — portfolio.css
   Filtry, karty projektów, modal szczegółów
   ===================================================================== */

/* ---------- Filtry ---------- */
.filters {
	display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
	margin-bottom: 40px;
}
.filter {
	color: var(--ink-2); font-weight: 600; font-size: .95rem;
	padding: 10px 20px; border-radius: 999px;
	border: 1.5px solid var(--line); background: var(--bg);
	transition: color .2s, background .2s, border-color .2s, transform .2s;
}
.filter:hover { border-color: var(--brand); color: var(--brand); transform: translateY(-1px); }
.filter.is-active {
	background: var(--grad); color: #fff; border-color: transparent;
	box-shadow: var(--shadow-brand);
}

/* ---------- Grid kart ---------- */
.portfolio-grid {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.portfolio-empty { text-align: center; color: var(--muted); padding: 30px 0; }

.project-card {
	background: var(--bg); border: 1px solid var(--line);
	border-radius: var(--radius); overflow: hidden;
	box-shadow: var(--shadow-sm);
	cursor: pointer;
	transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
	display: flex; flex-direction: column;
}
.project-card:hover, .project-card:focus-visible {
	transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: transparent;
	outline: none;
}

/* Góra karty — wizual */
.card-top {
	position: relative; padding: 26px; padding-bottom: 0;
	display: flex; align-items: center; justify-content: center;
	height: 150px;
}
.card-visual { display: grid; place-items: center; }

.card-logo {
	max-height: 92px; max-width: 92px; width: auto; object-fit: contain;
	filter: drop-shadow(0 8px 16px rgba(15,23,42,.12));
}

.card-initials {
	width: 84px; height: 84px; border-radius: 20px;
	display: grid; place-items: center; gap: 0;
	background: var(--grad); color: #fff;
	font-family: var(--font-display); font-weight: 800; font-size: 1.7rem;
	box-shadow: var(--shadow-brand);
}
.card-initials .card-fa { font-size: 2rem; line-height: 1; }
.card-initials span { font-size: 1.7rem; }
.card-initials .card-fa + span { display: none; }

.card-badge {
	position: absolute; top: 14px; right: 14px;
	background: rgba(245,158,11,.16); color: #b45309;
	font-size: .72rem; font-weight: 700; letter-spacing: .04em;
	padding: 5px 11px; border-radius: 999px; text-transform: uppercase;
}
.card-badge.star { background: rgba(79,70,229,.12); color: var(--brand); }

/* Treść karty */
.card-body { padding: 18px 24px 24px; display: flex; flex-direction: column; flex: 1; }
.card-cat {
	display: inline-block; font-size: .76rem; font-weight: 700; letter-spacing: .08em;
	text-transform: uppercase; color: var(--brand-2); margin-bottom: 7px;
}
.card-body h3 { margin-bottom: 8px; }
.card-body > p { font-size: .94rem; color: var(--ink-2); margin: 0 0 16px; flex: 1; }

.card-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.card-tags span {
	font-size: .74rem; font-weight: 600; color: var(--ink-2);
	background: var(--bg-softer); padding: 4px 10px; border-radius: 999px;
}

.card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.card-more { font-weight: 600; font-size: .9rem; color: var(--brand); }
.project-card:hover .card-more { color: var(--brand-3); }
.card-ver { font-size: .78rem; font-weight: 700; color: var(--muted); }

/* ---------- Modal ---------- */
.modal { position: fixed; inset: 0; z-index: 100; display: none; }
.modal.open { display: block; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(8,12,24,.66); backdrop-filter: blur(4px); animation: fade .25s ease; }
.modal-panel {
	position: relative; z-index: 1;
	max-width: 620px; margin: 6vh auto; width: calc(100% - 32px);
	background: var(--bg); border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg); overflow: hidden;
	animation: pop .3s cubic-bezier(.2,.7,.3,1);
}
.modal-close {
	position: absolute; top: 14px; right: 16px; z-index: 2;
	width: 40px; height: 40px; border-radius: 50%;
	font-size: 26px; line-height: 1; color: var(--muted);
	background: var(--bg-softer); transition: background .2s, color .2s;
}
.modal-close:hover { background: var(--line); color: var(--ink); }
.modal-body { padding: 34px 34px 36px; }
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: translateY(20px) scale(.97); } }

.m-head { display: flex; gap: 18px; align-items: center; margin-bottom: 20px; }
.m-visual { flex: none; }
.m-logo { width: 78px; height: 78px; object-fit: contain; }
.m-head .card-initials { width: 78px; height: 78px; font-size: 1.8rem; }
.m-head .card-cat { margin-bottom: 4px; }
.m-head h3 { font-size: 1.4rem; }
.m-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.m-tags span {
	font-size: .76rem; font-weight: 600; color: var(--ink-2);
	background: var(--bg-softer); padding: 4px 11px; border-radius: 999px;
}
.m-pill { background: var(--grad-soft) !important; color: var(--brand) !important; font-weight: 700; }
.m-short { font-size: 1.04rem; margin-bottom: 18px; }
.m-h4 { margin-bottom: 10px; }
.m-feats { display: flex; flex-direction: column; gap: 10px; }
.m-feats li { position: relative; padding-left: 28px; color: var(--ink-2); }
.m-feats li::before {
	content: "✓"; position: absolute; left: 0; top: 1px;
	width: 20px; height: 20px; border-radius: 50%; background: var(--grad);
	color: #fff; font-size: 11px; font-weight: 800;
	display: grid; place-items: center; line-height: 1;
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) { .portfolio-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) {
	.portfolio-grid { grid-template-columns: 1fr; }
	.modal-body { padding: 26px 22px 28px; }
	.m-head { flex-direction: column; text-align: center; align-items: center; }
	.m-tags { justify-content: center; }
}