.bl-portfolio-filters { margin: 1.5rem 0; }

.bl-portfolio-grid { display: grid; gap: 1.5rem; }
.bl-portfolio--grid .bl-portfolio-grid,
.bl-portfolio--cases .bl-portfolio-grid { grid-template-columns: repeat(1, minmax(0, 1fr)); }
@media (min-width: 560px) {
	.bl-portfolio--grid .bl-portfolio-grid,
	.bl-portfolio--cases .bl-portfolio-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 782px) {
	.bl-portfolio-cols--2 .bl-portfolio-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.bl-portfolio-cols--3 .bl-portfolio-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.bl-portfolio-cols--4 .bl-portfolio-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.bl-portfolio--before-after .bl-portfolio-grid { grid-template-columns: minmax(0, 1fr); max-width: 900px; margin-inline: auto; }

/* В режиме карусели .bl-portfolio-grid вообще не рендерится — разметку
   слайдера печатает bl_swiper_open()/close(), карточка сама является слайдом. */
.bl-portfolio--carousel .bl-portfolio-case,
.bl-portfolio--carousel .bl-portfolio-item { height: 100%; }

/* Единственная карточка не должна ни растягиваться во всю ширину секции,
   ни сжиматься до ширины одной колонки из трёх. */
.bl-portfolio--cases .bl-portfolio-grid:has(> :only-child) { grid-template-columns: minmax(0, 34rem); }
.bl-portfolio--grid .bl-portfolio-grid:has(> :only-child) { grid-template-columns: minmax(0, 22rem); }
.bl-text-center .bl-portfolio-grid:has(> :only-child) { justify-content: center; }

/* grid item */
.bl-portfolio-item { position: relative; display: block; min-width: 0; color: inherit; text-decoration: none; }
.bl-portfolio-item__media { position: relative; display: block; }
a.bl-portfolio-item:focus-visible { outline: 3px solid color-mix(in srgb, var(--bl-accent) 50%, transparent); outline-offset: 3px; }
.bl-portfolio-item .bl-media-crop { transition: transform .2s ease; }
.bl-portfolio-item:hover .bl-media-crop { transform: scale(1.03); }

/* Работа без обложки: ровный прямоугольник вместо дыры в сетке. */
.bl-portfolio-item__blank {
	display: block;
	aspect-ratio: 4 / 3;
	border-radius: var(--bl-card-radius);
	background: color-mix(in srgb, var(--bl-text) 8%, transparent);
	border: 1px solid var(--bl-border);
}

.bl-portfolio-item__badge {
	position: absolute; top: .75rem; left: .75rem; max-width: calc(100% - 1.5rem);
	padding: .25em .75em; border-radius: var(--bl-radius-pill, 999px);
	/* Бейдж лежит поверх фотографии, поэтому подложка тёмная в обеих темах —
	   иначе на светлом снимке он становится нечитаемым. */
	background: color-mix(in srgb, var(--bl-color-text-light) 62%, transparent);
	color: #fff; font-size: .75rem;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bl-portfolio-item__title { display: block; margin-top: .6rem; font-weight: 600; overflow-wrap: anywhere; }

/* case cards */
.bl-portfolio-case {
	border-radius: var(--bl-card-radius);
	overflow: hidden;
	background: var(--bl-surface);
	border: var(--bl-border-width, 1px) solid var(--bl-border);
	box-shadow: var(--bl-shadow, none);
	display: flex;
	flex-direction: column;
	min-width: 0;
	transition: transform .28s cubic-bezier(.2,.8,.3,1), box-shadow .28s ease;
}
.bl-portfolio-case:hover { transform: translateY(-5px); box-shadow: var(--bl-shadow-medium); }
.bl-portfolio-case .bl-media-crop { border-radius: 0; box-shadow: none; }
/* Карточка обрезает содержимое по скруглению, поэтому отступ не меньше самого
   скругления — иначе текст в углу срезается. */
.bl-portfolio-case__body {
	/* Запасное значение обязательно: если --bl-card-radius окажется невалидным,
	   весь calc сгорит и у карточки пропадут внутренние отступы. */
	padding: max(1.75rem, calc(var(--bl-card-radius, 16px) * .8));
	display: flex;
	flex-direction: column;
	gap: .35rem;
	flex: 1 1 auto;
	overflow-wrap: anywhere;
}
.bl-portfolio-case__body h3 { margin: 0 0 .6em; font-size: 1.1875rem; letter-spacing: -0.015em; overflow-wrap: anywhere; }
.bl-portfolio-case__body p { margin: 0; font-size: .9375rem; line-height: 1.55; color: var(--bl-muted); }
.bl-portfolio-case__body p strong { color: var(--bl-text); font-weight: 650; }
.bl-portfolio-case__body p:last-of-type strong { color: var(--bl-accent); }
.bl-portfolio-case__body .bl-btn { margin-top: auto; align-self: flex-start; }
/* Отбивка от текста нужна только когда кнопка идёт сразу за ним,
   а не когда её оттолкнул вниз margin-top: auto. */
.bl-portfolio-case__body p + .bl-btn { margin-top: 1.25rem; }

/* before/after */
.bl-portfolio-ba__title { overflow-wrap: anywhere; }
.bl-portfolio-ba__slider { position: relative; overflow: hidden; border-radius: var(--bl-card-radius); }
.bl-portfolio-ba__after,
.bl-portfolio-ba__before { position: absolute; inset: 0; }
.bl-portfolio-ba__after { position: relative; }
.bl-portfolio-ba__before {
	clip-path: inset(0 50% 0 0);
	border-right: 2px solid var(--bl-surface);
}
.bl-portfolio-ba__before .bl-media-crop,
.bl-portfolio-ba__after .bl-media-crop { width: 100%; height: 100%; border-radius: 0; box-shadow: none; }
.bl-portfolio-ba__range {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	appearance: none;
	background: transparent;
	margin: 0;
	cursor: ew-resize;
}
.bl-portfolio-ba__range::-webkit-slider-thumb { appearance: none; width: 3px; height: 100%; background: transparent; }
.bl-portfolio-ba__range::-moz-range-thumb { width: 3px; height: 100%; background: transparent; border: none; }
.bl-portfolio-ba__range::-webkit-slider-runnable-track { background: transparent; }
.bl-portfolio-ba__range:focus-visible { outline: 3px solid color-mix(in srgb, var(--bl-accent) 50%, transparent); outline-offset: 2px; }