/* Страница «Портфолио» (page-portfolio.php). Макет: Figma «Портфолио · Desktop 1920 · v2» */

.pf-page {
	--pf-green: #429d48;
	--pf-pink: #d55c71;
	--pf-heading: #333;
	--pf-text: #4c4c4c;
	--pf-muted: #898989;
	--pf-border: #e6e6e6;
	--pf-brown: #946a2e;
	--pf-radius: 10px;
	color: var(--pf-text);
	font-family: Montserrat, Helvetica, sans-serif;
	padding-bottom: 50px;
}
.pf-page * {box-sizing: border-box;}
.pf-page :where(p, h1, h3) {margin: 0; padding: 0;}

/* Хлебные крошки и заголовок */
.pf-breadcrumbs {margin: 21px 0 24px; font-size: 14px; line-height: 17px; color: var(--pf-muted);}
.pf-breadcrumbs a, .pf-breadcrumbs span {color: var(--pf-muted); font-size: 14px;}
.pf-breadcrumbs .current-item {color: var(--pf-brown);}
.pf-breadcrumbs a:hover {color: var(--pf-green);}
.pf-title {font-weight: 600; font-size: 60px; line-height: 66px; color: var(--pf-heading); margin-bottom: 60px;}

/* Фильтры */
.pf-filters {display: flex; flex-direction: column; gap: 24px; margin-bottom: 40px;}
.pf-chips {display: flex; flex-wrap: wrap; gap: 10px;}
.pf-chip {
	display: inline-flex; align-items: center; padding: 11px 22px; border: 1px solid var(--pf-border); border-radius: 100px;
	background: #fff; color: var(--pf-heading); font-family: inherit; font-weight: 500; font-size: 16px; line-height: 20px;
	white-space: nowrap; cursor: pointer; transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.pf-chip:hover {border-color: var(--pf-green); color: var(--pf-green);}
.pf-chip.is-active {background: var(--pf-green); border-color: var(--pf-green); color: #fff;}
.pf-counter {font-size: 14px; line-height: 20px; color: var(--pf-muted);}

/* Сетка карточек */
.pf-grid {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 40px; row-gap: 56px;}
.pf-card {display: flex; flex-direction: column; gap: 20px; cursor: pointer;}
.pf-card[hidden] {display: none;}
.pf-card__cover {display: block; overflow: hidden; border-radius: var(--pf-radius); aspect-ratio: 7 / 4; background: #f3f6f3;}
.pf-card__photo {display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease;}
.pf-card:hover .pf-card__photo {transform: scale(1.04);}
.pf-card__body {display: flex; flex-direction: column; align-items: flex-start; gap: 10px;}
.pf-card__meta {font-size: 14px; line-height: 20px; color: var(--pf-muted);}
.pf-card__title {font-weight: 600; font-size: 24px; line-height: 30px; color: var(--pf-heading); transition: color 0.3s ease;}
.pf-card:hover .pf-card__title {color: var(--pf-green);}
.pf-card__link {
	margin-top: 2px; padding: 0; border: 0; background: none; font-family: inherit; font-weight: 500; font-size: 16px; line-height: 20px;
	color: var(--pf-green); cursor: pointer; transition: color 0.3s ease;
}
.pf-card__link:hover {color: var(--pf-pink);}
.pf-empty {font-size: 18px; line-height: 27px; color: var(--pf-muted); padding: 40px 0;}

/* Соцсети внизу страницы */
.pf-follow {display: flex; align-items: flex-end; align-items: last baseline; justify-content: flex-start; gap: 16px 24px; flex-wrap: wrap; margin-top: 60px; padding: 32px 40px; border-radius: var(--pf-radius); background: #f3f6f3;}
.pf-follow__text {font-weight: 500; font-size: 22px; line-height: 32px; color: var(--pf-heading);}
.pf-follow__text a, .pf-follow__text a:hover {color: var(--pf-green); text-decoration: underline; text-underline-offset: 3px;}
.pf-follow__icons {display: flex; gap: 16px; flex-shrink: 0;}
.pf-follow__icons a {display: block; width: 48px; height: 48px; border-radius: var(--pf-radius); transition: transform 0.3s ease, opacity 0.3s ease;}
.pf-follow__icons a:hover {transform: translateY(-2px); opacity: 0.85;}
.pf-follow__icons img {display: block; width: 100%; height: 100%;}
.pf-follow__icons .pf-follow__tg {padding: 12px; background: #2aabee;} /* иконка — белый самолётик без фона; подложка — фирменный синий Telegram */

@media (max-width: 1599px) {
	.pf-title {font-size: 52px; line-height: 58px; margin-bottom: 48px;}
	.pf-grid {column-gap: 32px; row-gap: 48px;}
	.pf-card__title {font-size: 22px; line-height: 28px;}
}
@media (max-width: 1199px) {
	.pf-grid {grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; row-gap: 40px;}
	.pf-title {font-size: 48px; line-height: 54px; margin-bottom: 40px;}
}
@media (max-width: 767px) {
	.pf-breadcrumbs {margin: 16px 0 16px;}
	.pf-title {font-size: 40px; line-height: 46px; margin-bottom: 28px;}
	.pf-filters {gap: 16px; margin-bottom: 28px;}
	.pf-chips {flex-wrap: nowrap; overflow-x: auto; margin: 0 -15px; padding: 0 15px 4px; scrollbar-width: none;}
	.pf-chips::-webkit-scrollbar {display: none;}
	.pf-chip {padding: 9px 18px; font-size: 15px;}
	.pf-grid {grid-template-columns: minmax(0, 1fr); row-gap: 36px;}
	.pf-card {gap: 16px;}
	.pf-card__title {font-size: 20px; line-height: 26px;}
	.pf-follow {margin-top: 40px; padding: 24px 20px;}
	.pf-follow__text {font-size: 18px; line-height: 26px;}
}