/* Стиль A: минимализм, чёрно-белая база + один акцентный цвет.
   Поменять акцент — поменять переменную --accent ниже. */

:root {
	--accent: #d85a30;
	--accent-dark: #993c1d;
	--ink: #1f1f1f;
	--ink-secondary: #5f5e5a;
	--surface: #f1efe8;
	--frame-black: #141312;
	--font-display: 'Spectral', Georgia, serif;
	--font-body: 'IBM Plex Sans', -apple-system, sans-serif;
	--font-mono: 'IBM Plex Mono', 'Courier New', monospace;
}

body {
	color: var(--ink);
	font-family: var(--font-body);
}

.portfolio-page h1,
.portfolio-page h2,
.portfolio-page h3,
.portfolio-hero-content h1,
.portfolio-card-body h3,
.portfolio-menu-card .label {
	font-family: var(--font-display) !important;
}

/* ---------- Сигнатура: уголки видоискателя на фото ----------
   Лёгкий приём, который держит всю фотографическую тему сайта: на герое — крупные
   уголки по всем 4 углам, на карточках — мелкие, только по диагонали (tl/br). */
.viewfinder-frame {
	position: relative;
}

.vf-corner {
	position: absolute;
	width: 18px;
	height: 18px;
	border-color: var(--accent);
	pointer-events: none;
}

.vf-corner.tl {
	top: 14px;
	left: 14px;
	border-top: 1.5px solid var(--accent);
	border-left: 1.5px solid var(--accent);
}

.vf-corner.tr {
	top: 14px;
	right: 14px;
	border-top: 1.5px solid var(--accent);
	border-right: 1.5px solid var(--accent);
}

.vf-corner.bl {
	bottom: 14px;
	left: 14px;
	border-bottom: 1.5px solid var(--accent);
	border-left: 1.5px solid var(--accent);
}

.vf-corner.br {
	bottom: 14px;
	right: 14px;
	border-bottom: 1.5px solid var(--accent);
	border-right: 1.5px solid var(--accent);
}

.vf-corner--sm {
	width: 10px;
	height: 10px;
	border-color: var(--ink-secondary);
}

/* Моноширинная подпись-метка ("кадр № 001", категория · год) — общий для сайта приём подписи к снимку. */
.portfolio-mono-caption {
	font-family: var(--font-mono);
	font-size: 10.5px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* ---------- Универсальная обёртка под все кастомные шаблоны страниц ----------
   Намеренно НЕ называем её ast-container/content-area/ast-row — это служебные
   классы темы Astra с собственной flex/grid-раскладкой под сайдбар, переиспользование
   их имени ломает вёрстку (заголовок и контент разъезжаются по колонкам). */
.portfolio-page {
	display: block;
	width: 100%;
	max-width: 760px;
	margin: 0 auto;
	padding: 40px 24px 64px;
	box-sizing: border-box;
}

.portfolio-page > * {
	width: 100%;
}

.portfolio-page h1 {
	font-size: 1.9rem;
	margin: 0 0 8px;
}

.portfolio-page h2,
.portfolio-page h3 {
	margin-top: 32px;
}

.portfolio-page p,
.portfolio-project-content p {
	line-height: 1.7;
	color: var(--ink);
}

.portfolio-page img {
	max-width: 100%;
	height: auto;
	border-radius: 4px;
}

/* ---------- Шапка / меню ---------- */
.site-header,
.ast-primary-header-bar {
	border-bottom: 1px solid #e3e1d9;
}

.main-header-menu .menu-item > .menu-link {
	letter-spacing: 0.02em;
	font-weight: 500;
}

.main-header-menu .menu-item > .menu-link:hover {
	color: var(--accent);
}

/* ---------- Главная: блок-герой ---------- */
/* Раньше тут был трюк с width:100vw + отрицательными полями, чтобы вырваться из контейнера темы —
   он конфликтовал с тем, как Astra считает ширину колонки, и ломал раскладку (герой и меню
   "сплющивались" в одну строку). Теперь герой просто 100% ширины СВОЕГО контейнера.
   Чтобы фото реально доходило до краёв экрана (без полей по бокам) — в редакторе страницы
   "Главная" справа в настройках Astra ("Page" → "Astra Settings" / "Атрибуты страницы")
   выбрать "Content Layout" → "Full Width" (или "No Sidebar") — это штатный способ темы
   убрать боковые отступы контейнера, без конфликтов с раскладкой. */
.portfolio-hero {
	position: relative;
	width: 100%;
	min-height: 70vh;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	background-color: #111;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	color: #fff;
	overflow: hidden;
}

.portfolio-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	/* градиент темнее снизу (там текст) и легче сверху — фото видно, но подпись читается */
	background: linear-gradient(to top, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.35) 45%, rgba(0, 0, 0, 0.25) 100%);
}

.portfolio-hero-content {
	position: relative;
	z-index: 1;
	max-width: 640px;
	padding: 0 24px;
}

.portfolio-hero-content h1 {
	font-size: 2.4rem;
	font-weight: 500;
	margin-bottom: 12px;
	color: #fff;
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
}

.portfolio-hero-content p {
	font-size: 1.05rem;
	opacity: 0.95;
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}

/* Фото внутри героя (вставленное в текст страницы "Главная" через редактор) —
   растягиваем на весь объём колонки героя (компенсируя боковые отступы отрицательным полем),
   тонкая линия сверху отделяет его от текста. */
.portfolio-hero-content img {
	display: block;
	width: calc(100% + 48px);
	max-width: calc(100% + 48px);
	height: auto;
	margin: 28px -24px 0;
	padding-top: 24px;
	border-top: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 0;
}

.portfolio-hero-caption {
	position: absolute;
	z-index: 1;
	bottom: 24px;
	left: 38px;
	color: rgba(255, 255, 255, 0.7);
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}

@media (max-width: 768px) {
	.portfolio-hero-caption {
		left: 24px;
		bottom: 16px;
	}
}

/* ---------- Главная: карточки-меню ---------- */
.portfolio-menu-grid {
	display: grid;
	width: 100%;
	grid-template-columns: repeat(4, 1fr);
	gap: 1px;
	background: #e3e1d9;
}

@media (max-width: 768px) {
	.portfolio-menu-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

.portfolio-menu-card {
	position: relative;
	overflow: hidden;
	background: #fff;
	padding: 0;
	text-align: center;
	text-decoration: none;
	color: var(--ink);
	transition: background-color 0.15s ease;
	display: flex;
	align-items: stretch;
	min-height: 160px;
}

.portfolio-menu-card:hover {
	background: var(--surface);
}

/* Картинка карточки — занимает ВСЮ площадь карточки (а не узкую полосу), подпись лежит
   поверх неё. Картинка задаётся через "Произвольные поля" страницы "Главная" (см. functions.php),
   позиция (0-100) определяет, какой кусок картинки виден в кадре.
   Пока на карточку не наводят — чёрно-белая + тёмный градиент для читаемости подписи,
   при наведении/фокусе — цветная. */
.portfolio-menu-card-image {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-repeat: no-repeat;
	filter: grayscale(1);
	transition: filter 0.25s ease;
}

.portfolio-menu-card-image::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.25) 55%, rgba(0, 0, 0, 0.15) 100%);
}

.portfolio-menu-card:hover .portfolio-menu-card-image,
.portfolio-menu-card:focus .portfolio-menu-card-image,
.portfolio-menu-card:focus-within .portfolio-menu-card-image {
	filter: grayscale(0);
}

.portfolio-menu-card .label {
	position: relative;
	z-index: 1;
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	font-weight: 500;
	letter-spacing: 0.02em;
	color: inherit;
}

.portfolio-menu-card.has-image .label {
	color: #fff;
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}

/* ---------- Заголовок архива проектов + фильтр по категориям ---------- */
.portfolio-archive-header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	margin: 32px 0 8px;
	padding-bottom: 16px;
	border-bottom: 1px solid #e3e1d9;
}

.portfolio-archive-header h1 {
	margin: 0;
}

.portfolio-filter-bar {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.portfolio-filter-pill {
	border: 1px solid #e3e1d9;
	background: #fff;
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	padding: 4px 12px;
}

.portfolio-filter-pill:hover {
	border-color: var(--accent);
	color: var(--accent);
}

/* ---------- Карточки проектов / блога ---------- */
.portfolio-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 24px;
	margin: 32px 0;
}

.portfolio-card {
	border: 1px solid #e3e1d9;
	border-radius: 4px;
	overflow: hidden;
	background: #fff;
}

.portfolio-card img {
	width: 100%;
	display: block;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.portfolio-card-body {
	padding: 16px 18px;
}

.portfolio-card-body h3 {
	font-size: 1.1rem;
	font-weight: 500;
	margin: 0 0 6px;
}

.portfolio-card-body p {
	font-size: 0.9rem;
	color: var(--ink-secondary);
	margin: 0 0 10px;
}

/* Метка-подпись под фото: "категория · год" моноширинным шрифтом — заменяет обычные текстовые теги. */
.portfolio-card-meta {
	font-family: var(--font-mono);
	font-size: 10.5px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--accent);
	margin: 0 0 6px;
}

.portfolio-tag {
	display: inline-block;
	font-size: 0.75rem;
	padding: 2px 10px;
	border-radius: 3px;
	background: var(--surface);
	color: var(--ink-secondary);
	margin-right: 4px;
}

/* Обёртка превью-картинки на карточке — relative, чтобы можно было поставить уголки видоискателя. */
.portfolio-card-thumb {
	position: relative;
	display: block;
}

/* ---------- Кнопка "перейти на сайт проекта" ---------- */
.portfolio-external-link {
	display: inline-block;
	margin-top: 16px;
	padding: 12px 24px;
	background: var(--accent);
	color: #fff;
	text-decoration: none;
	border-radius: 3px;
	font-weight: 500;
}

.portfolio-external-link:hover {
	background: var(--accent-dark);
	color: #fff;
}

/* ---------- Блок донатов (внизу страницы "Обо мне") ---------- */
.portfolio-donate {
	margin-top: 48px;
	padding-top: 24px;
	border-top: 1px solid #e3e1d9;
	text-align: center;
}

/* Иконки соцсетей — кружки с инициалами вместо текстовых ссылок.
   Если хочешь подставить настоящие логотипы — поменяй <span> на <img src="..."> в template-about.php,
   размер картинки 40x40 px. */
.portfolio-social-icons {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 14px;
	margin-bottom: 22px;
}

.portfolio-social-icons a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--surface);
	color: var(--ink-secondary);
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.portfolio-social-icons a svg {
	width: 19px;
	height: 19px;
	display: block;
}

.portfolio-social-icons a:hover {
	background: var(--accent);
	color: #fff;
}

/* Кнопка донатов — переиспользуем стиль .portfolio-external-link */
.portfolio-donate-btn {
	display: inline-block;
	margin-top: 0;
}