/**
 * Building Portfolio Pro — портфолио и карта
 * ===========================================================================
 *
 * Слой 3. Всички стойности идват от семантичните токени.
 */

/* ---------------------------------------------------------------------------
 * Решетка със сгради
 * ------------------------------------------------------------------------- */

/* min(100%, …): карта, по-широка от телефона, иначе изнася страницата
 * настрани. */
.bpp-portfolio {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--bpp-bcard-min)), 1fr));
	gap: var(--bpp-grid-gap);
	font-family: var(--bpp-font-sans);
	color: var(--bpp-ink);
}

/* columns="2" на шорткода: по толкова на ред, колкото и широк да е
 * контейнерът. Три и четири се свиват до две на таблет, а на телефон всичко е
 * по едно — картата на обект е снимка и две в 375 px са пощенски марки. */
.bpp-portfolio--cols-1 { grid-template-columns: minmax(0, 1fr); }
.bpp-portfolio--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bpp-portfolio--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bpp-portfolio--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 900px) {
	.bpp-portfolio--cols-3,
	.bpp-portfolio--cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
	.bpp-portfolio--cols-2,
	.bpp-portfolio--cols-3,
	.bpp-portfolio--cols-4 { grid-template-columns: minmax(0, 1fr); }
}

.bpp-bcard {
	display: flex;
	flex-direction: column;
	background: var(--bpp-surface-raised);
	border: 1px solid var(--bpp-card-border);
	border-radius: var(--bpp-card-radius);
	box-shadow: var(--bpp-card-shadow);
	overflow: hidden;
	color: inherit;
	text-decoration: none;
	transition: border-color var(--bpp-duration-fast) var(--bpp-ease),
	            box-shadow var(--bpp-duration-fast) var(--bpp-ease);
}

/* Цветът се повтаря: `a:hover` на темата е по-силен от един клас. */
.bpp-bcard:hover {
	border-color: var(--bpp-card-hover-border);
	box-shadow: var(--bpp-card-hover-shadow);
	color: inherit;
}

.bpp-bcard__media {
	position: relative;
	aspect-ratio: 3 / 2;
	background: var(--bpp-card-media-bg);
	overflow: hidden;
}

/* Квадратът със стрелка в долния десен ъгъл на снимката. Казва „влез“, без
 * дума, и носи квадратите от херото на началната до всяка карта. Стрелката е
 * маска — цветът ѝ идва от токена, не от файла. */
.bpp-bcard__media::after,
.bpp-bcard__media::before {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	width: var(--bpp-card-go-size);
	height: var(--bpp-card-go-size);
	pointer-events: none;
}

.bpp-bcard__media::after {
	z-index: 1;
	background: var(--bpp-card-go-bg);
	transition: background-color var(--bpp-duration-fast) var(--bpp-ease);
}

.bpp-bcard__media::before {
	z-index: 2;
	background: var(--bpp-card-go-ink);
	-webkit-mask: var(--bpp-card-go-arrow) center / 45% no-repeat;
	mask: var(--bpp-card-go-arrow) center / 45% no-repeat;
	transition: transform var(--bpp-duration-base) var(--bpp-ease);
}

.bpp-bcard:hover .bpp-bcard__media::after,
.bpp-bcard:focus-visible .bpp-bcard__media::after { background: var(--bpp-card-go-hover); }

.bpp-bcard:hover .bpp-bcard__media::before { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
	.bpp-bcard:hover .bpp-bcard__media::before { transform: none; }
}

.bpp-bcard__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform var(--bpp-duration-slow) var(--bpp-ease);
}

.bpp-bcard:hover .bpp-bcard__media img { transform: scale(1.03); }

@media (prefers-reduced-motion: reduce) {
	.bpp-bcard:hover .bpp-bcard__media img { transform: none; }
}

.bpp-bcard__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: var(--bpp-space-1);
	padding: var(--bpp-space-5) var(--bpp-space-6) var(--bpp-space-6);
	background: var(--bpp-card-body-bg);
}

.bpp-bcard__title {
	font-size: var(--bpp-text-xl);
	font-weight: var(--bpp-heading-weight);
	line-height: var(--bpp-leading-tight);
	letter-spacing: -0.01em;
}

.bpp-bcard__subtitle {
	font-size: var(--bpp-text-md);
	color: var(--bpp-ink-muted);
}

/* Адресът е последният ред и стои на дъното: карти с различно дълъг подзаглавен
 * ред иначе свършват с адреса на различна височина. */
.bpp-bcard__address {
	margin-top: auto;
	padding-top: var(--bpp-space-2);
	font-size: var(--bpp-text-sm);
	color: var(--bpp-ink-faint);
}




/* ---------------------------------------------------------------------------
 * Карта
 * ------------------------------------------------------------------------- */

.bpp-map {
	width: 100%;
	border: 1px solid var(--bpp-panel-border);
	border-radius: var(--bpp-card-radius);
	overflow: hidden;
	background: var(--bpp-surface-sunk);
	font-family: var(--bpp-font-sans);
}

/* Leaflet рисува собствени контроли; изравняват се с останалия интерфейс,
 * без да се пренаписват. */
.bpp-map .leaflet-control-zoom a {
	color: var(--bpp-ink);
	background: var(--bpp-surface);
	border-color: var(--bpp-border);
}

.bpp-map .leaflet-control-zoom a:hover { background: var(--bpp-surface-hover); }

.bpp-map .leaflet-popup-content-wrapper {
	border-radius: var(--bpp-card-radius);
	padding: 0;
	overflow: hidden;
	box-shadow: var(--bpp-shadow-lg);
}

.bpp-map .leaflet-popup-content { margin: 0; width: 240px !important; }

.bpp-map__popup {
	display: flex;
	flex-direction: column;
	gap: var(--bpp-space-1);
	padding: var(--bpp-space-4);
	background: var(--bpp-surface-raised);
	color: var(--bpp-ink);
}

.bpp-map__popup img {
	width: calc(100% + var(--bpp-space-8));
	margin: calc(var(--bpp-space-4) * -1) calc(var(--bpp-space-4) * -1) var(--bpp-space-2);
	max-width: none;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	display: block;
}

.bpp-map__popup strong {
	font-size: var(--bpp-text-lg);
	font-weight: var(--bpp-weight-semibold);
}

.bpp-map__sub { font-size: var(--bpp-text-sm); color: var(--bpp-ink-muted); }
.bpp-map__address { font-size: var(--bpp-text-sm); color: var(--bpp-ink-faint); }

.bpp-map__stats {
	margin: var(--bpp-space-1) 0 var(--bpp-space-3);
	font-size: var(--bpp-text-md);
	font-weight: var(--bpp-weight-medium);
	color: var(--bpp-ink-muted);
}


/* ---------------------------------------------------------------------------
 * Точките и легендата
 *
 * Капката е SVG в divIcon, не картинка: цветът ѝ идва от токен и следва
 * темата, а двата вида обекти не искат два файла.
 * ------------------------------------------------------------------------- */

.bpp-pin {
	display: block;
	width: 28px;
	height: 40px;
	color: var(--bpp-pin-current);
	filter: drop-shadow(0 2px 3px var(--bpp-pin-shadow));
}

.bpp-pin--completed { color: var(--bpp-pin-completed); }

.bpp-pin svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* Капката е плътна в цвета си, а кръгчето в нея — в цвета на хартията:
 * изрязан отвор се слива с плочките, а бяло око се вижда и върху гора. */
.bpp-pin svg path {
	fill: currentColor;
	stroke: var(--bpp-pin-edge);
	stroke-width: 1;
}

.bpp-pin svg circle { fill: var(--bpp-pin-edge); }

/* Легендата лежи върху плочките, в долния ляв ъгъл на картата. Затова е
 * с фон и не приема мишката: тя обяснява, не се управлява. Размерите ѝ са
 * фиксирани, а не от типографската скала — картата е нейният контейнер и
 * токените на публичната част не стигат до контрола на Leaflet. */
.bpp-map-legend {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0 0 8px 8px;
	padding: 7px 10px;
	border-radius: var(--bpp-radius-md);
	background: var(--bpp-legend-bg);
	color: var(--bpp-legend-ink);
	font-family: var(--bpp-font-sans);
	font-size: 12px;
	line-height: 1.3;
	box-shadow: var(--bpp-shadow-sm);
	pointer-events: none;
}

.bpp-map-legend__item {
	display: flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
}

.bpp-map-legend__dot {
	width: 9px;
	height: 9px;
	flex: none;
	border-radius: 50%;
	background: var(--bpp-pin-current);
}

.bpp-map-legend__dot--completed { background: var(--bpp-pin-completed); }

/* Leaflet оцветява всяка връзка в картата (.leaflet-container a) и надвива
 * цвета на бутона. .leaflet-container е класът на самия .bpp-map, не на
 * елемент вътре в него. Селекторът е по-силен и от :hover на бутона, затова
 * и двете състояния се задават тук. */
.bpp-map.leaflet-container a.bpp-button--primary { color: var(--bpp-button-ink); }

.bpp-map.leaflet-container a.bpp-button--primary:hover,
.bpp-map.leaflet-container a.bpp-button--primary:focus-visible { color: var(--bpp-button-hover-ink); }