/* SHOPSTYLE — страница «О нас» (/o-nas/), ТЗ п.10 + п.7 (появление фото при скролле).
   Палитра и шрифт — из style.css (--ss-bg, --ss-text, --ss-accent, --ss-muted, --ss-line).
   Разметка — Gutenberg: core/group с классами ss-*, core/image, core/heading, core/paragraph, core/buttons. */

/* --- общее --- */
.ss-about-eyebrow {
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ss-muted);
}
.ss-about-h2 {
	font-size: 26px;
	font-weight: 300;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	line-height: 1.25;
}
/* ссылка «Смотреть новую коллекцию» — абзац с классом, внутри обычная ссылка редактора */
.ss-about-style__text .ss-about-link {
	margin: 8px 0 14px;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	line-height: 1.75;
}
.ss-about-link a { text-decoration: underline; text-underline-offset: 4px; }
.ss-about-link a:hover { color: var(--ss-accent); }

/* --- появление при скролле: фото въезжают снизу (ТЗ п.7, лёгкий вариант) ---
   Без JS: CSS scroll-driven animation (animation-timeline: view()). Где не поддерживается — фото видны сразу. */
@keyframes ss-reveal {
	from { opacity: 0; transform: translateY(var(--ss-reveal-y, 28px)); }
	to   { opacity: 1; transform: none; }
}
@supports (animation-timeline: view()) {
	.ss-reveal {
		animation: ss-reveal linear both;
		animation-timeline: view();
		animation-range: entry 10% entry 55%;
	}
	/* первый экран уже в кадре — просто проявляется при загрузке */
	.ss-about-hero__media.ss-reveal { animation: ss-reveal .9s ease both; animation-timeline: auto; }
	/* ступенчатость коллажа и карточек — сдвиг диапазона вместо transition-delay */
	.ss-about-collage__item--b.ss-reveal { animation-range: entry 20% entry 65%; }
	.ss-about-collage__item--c.ss-reveal { animation-range: entry 30% entry 75%; }
	.ss-about-collage__item--d.ss-reveal { animation-range: entry 40% entry 85%; }
	.ss-about-store:nth-child(2).ss-reveal { animation-range: entry 20% entry 65%; }
	.ss-about-store:nth-child(3).ss-reveal { animation-range: entry 30% entry 75%; }
}
@media (prefers-reduced-motion: reduce) {
	.ss-reveal { animation: none; }
}

/* --- 1. Первый экран: фото на всю ширину + философия --- */
/* на всю ширину экрана из .container (замена vc_row stretch_row_content_no_spaces);
   --wd-scroll-w ставит JS Woodmart (scrollBar.js), до его запуска — 0 */
.ss-about-hero { margin-inline: calc(50% - 50vw + var(--wd-scroll-w, 0px) / 2); }
.ss-about-hero__media {
	height: min(78vh, 760px);
	overflow: hidden;
	background-color: var(--bgcolor-gray-300, #E5E0D9);
}
/* figure. — специфичность выше инлайн-стиля WP .wp-block-image img{height:auto} */
figure.ss-about-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 22%; /* фото портретные 810x1080 — кадрируем по верхней трети */
}
.ss-about-hero__text {
	max-width: 620px;
	margin-inline: auto;
	padding: 56px 20px 24px;
	text-align: center;
}
.ss-about-hero__title {
	font-size: 36px;
	font-weight: 300;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	line-height: 1.2;
}
.ss-about-hero__lead {
	font-size: 16px;
	line-height: 1.7;
	color: var(--ss-text);
}

/* --- 2. Наш стиль: текст + коллаж --- */
.ss-about-style {
	display: grid;
	grid-template-columns: 5fr 7fr;
	gap: 48px 64px;
	align-items: center;
	padding: 56px 0 24px;
}
.ss-about-style__text p { font-size: 15px; line-height: 1.75; margin: 0 0 14px; }
.ss-about-collage {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	align-items: start;
}
.ss-about-collage__item { overflow: hidden; background-color: #E5E0D9; }
figure.ss-about-collage__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* разные размеры «как коллаж»: высокий / низкий / квадрат / высокий, правая колонка сдвинута вниз */
.ss-about-collage__item--a { aspect-ratio: 4 / 5; }
.ss-about-collage__item--b { aspect-ratio: 3 / 4; width: 82%; justify-self: end; }
.ss-about-collage__item--c { aspect-ratio: 1 / 1; width: 82%; }
.ss-about-collage__item--d { aspect-ratio: 4 / 5; }
/* фото чуть наезжает на текст — «поверх текста» из ТЗ п.7 */
.ss-about-collage__item--a { margin-left: -40px; }

/* --- 3. Три магазина --- */
.ss-about-stores { padding: 56px 0 24px; border-top: 1px solid var(--ss-line); }
.ss-about-stores__head { max-width: 620px; margin-inline: auto; text-align: center; }
.ss-about-stores__note { font-size: 14px; line-height: 1.7; color: var(--ss-muted); }
.ss-about-stores__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
.ss-about-store { text-align: left; }
/* фото магазина: сейчас абзац-плейсхолдер [IMG], потом — блок «Изображение» с тем же классом */
.ss-about-store__photo {
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background-color: #E5E0D9;
}
figure.ss-about-store__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ss-about-store__name {
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.ss-about-store__addr { font-size: 14px; }
.ss-about-store__hours { font-size: 13px; color: var(--ss-muted); }
.ss-about-store__route {
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.ss-about-store__route a { text-decoration: underline; text-underline-offset: 4px; }
.ss-about-stores__contacts {
	text-align: center;
	font-size: 13px;
	color: var(--ss-muted);
}
.ss-about-stores__contacts a { text-decoration: underline; text-underline-offset: 3px; }

/* плейсхолдер фото — заметный, пока Benny не даст снимки магазинов */
.ss-img-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	border: 1px dashed var(--ss-accent);
	color: var(--ss-accent);
	font-size: 12px;
	letter-spacing: 0.04em;
	text-align: center;
}

/* --- 4. Финал: две кнопки --- */
.ss-about-cta {
	padding: 56px 0 72px;
	text-align: center;
	border-top: 1px solid var(--ss-line);
}
.ss-about-cta__text { font-size: 15px; color: var(--ss-muted); }
.ss-about-cta__buttons { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
/* core/button не умеет класс на <a> — повторяем вид .btn.btn-style-bordered.btn-color-default из style.css:171.
   ponytail: дубль 12 строк; убрать, когда селектор добавят в список .btn в style.css */
.ss-about-cta__buttons .wp-block-button .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 180px;
	padding: 12px 26px;
	border: 1px solid var(--ss-text);
	border-radius: 0;
	background-color: transparent;
	color: var(--ss-text);
	box-shadow: none;
	font-family: var(--wd-text-font);
	font-weight: 500;
	font-size: 12px;
	line-height: 18px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	transition: all .25s ease;
}
.ss-about-cta__buttons .wp-block-button .wp-block-button__link:hover {
	background-color: var(--ss-text);
	color: var(--ss-bg);
}

/* --- вертикальные отступы прямых детей групп ---
   base.css Woodmart (подключён ПОСЛЕ этого файла): :is(.wd-entry-content, .is-layout-flow, …, .is-layout-constrained>.wp-block-group__inner-container) > * { margin-block: 0 20px }
   + … > :last-child { margin-bottom: 0 }. Специфичность :is() = самого тяжёлого аргумента = (0,2,0).
   Каждый core/group на фронте получает .is-layout-flow, поэтому margin-block детей задаём только здесь, с весом (0,2,1): body + родитель > ребёнок.
   Горизонтальные отступы (margin-inline/-left) base.css не трогает — они остались в правилах выше. */
body .ss-about-hero > .ss-about-hero__media,
body .ss-about-hero > .ss-about-hero__text,
body .ss-about-hero__text > .ss-about-hero__lead,
body .ss-about-style > .wp-block-group,
body .ss-about-collage > .ss-about-collage__item,
body .ss-about-stores > .ss-about-stores__grid,
body .ss-about-stores__head > .ss-about-stores__note,
body .ss-about-stores__grid > .ss-about-store,
body .ss-about-store > .ss-about-store__route,
body .ss-about-cta > .ss-about-cta__buttons { margin-block: 0; }
body .wp-block-group > .ss-about-eyebrow { margin-block: 0 12px; }
body .wp-block-group > .ss-about-h2 { margin-block: 0 20px; }
body .ss-about-hero__text > .ss-about-hero__title { margin-block: 0 18px; }
body .ss-about-collage > .ss-about-collage__item--b { margin-block: 56px 0; }
body .ss-about-stores > .ss-about-stores__head { margin-block: 0 36px; }
body .ss-about-stores > .ss-about-stores__contacts { margin-block: 32px 0; }
body .ss-about-store > .ss-about-store__photo { margin-block: 0 16px; }
body .ss-about-store > .ss-about-store__name { margin-block: 0 6px; }
body .ss-about-store > .ss-about-store__addr { margin-block: 0 2px; }
body .ss-about-store > .ss-about-store__hours { margin-block: 0 10px; }
body .ss-about-cta > .ss-about-cta__text { margin-block: 0 24px; }
/* зазоры между секциями — как в WPB-версии (35px .wpb_content_element + 20px .vc_row; после hero ещё +20px пустого .vc_row-full-width).
   ponytail: повтор артефакта билдера ради 1:1 с утверждёнными снимками; убрать — секции сомкнутся до 20px. */
body .entry-content > .ss-about-hero { margin-bottom: 75px; }
body .entry-content > .ss-about-style,
body .entry-content > .ss-about-stores { margin-bottom: 55px; }
body .entry-content > .ss-about-cta { margin-bottom: 35px; }

/* --- мобильные --- */
@media (max-width: 1024px) {
	.ss-about-style { grid-template-columns: 1fr; gap: 36px; }
	.ss-about-collage__item--a { margin-left: 0; }
}
@media (max-width: 768px) {
	.ss-about-hero__media { height: 62vh; }
	.ss-about-hero__text { padding: 36px 16px 16px; }
	.ss-about-hero__title { font-size: 26px; }
	.ss-about-hero__lead { font-size: 15px; }
	.ss-about-h2 { font-size: 20px; }
	.ss-about-style, .ss-about-stores, .ss-about-cta { padding-top: 40px; }
	.ss-about-collage { gap: 10px; }
	.ss-about-collage__item--b { width: 88%; }
	body .ss-about-collage > .ss-about-collage__item--b { margin-top: 32px; }
	.ss-about-collage__item--c { width: 88%; }
	.ss-about-stores__grid { grid-template-columns: 1fr; gap: 28px; }
	.ss-about-store__photo { aspect-ratio: 16 / 10; }
	.ss-about-cta__buttons .wp-block-button .wp-block-button__link { padding: 12px 20px; } /* 44px как .btn в ДО */
	body .entry-content > .ss-about-hero { margin-bottom: 55px; } /* в WPB-версии на мобайле пустой .vc_row-full-width не давал +20 */
	.ss-reveal { --ss-reveal-y: 18px; }
}

/* ===== правки 14.09 ===== */
/* коллаж «Наш стиль»: плотнее, без сдвигов и наезда на текст */
.ss-about-collage{gap:10px;align-items:stretch}
.ss-about-collage__item--a,.ss-about-collage__item--b,.ss-about-collage__item--c,.ss-about-collage__item--d{width:100%;margin:0;aspect-ratio:4/5;justify-self:stretch}
.ss-about-style{gap:40px 48px}
@media (max-width:767px){.ss-about-collage{gap:8px}.ss-about-style{gap:28px}}
/* магазины: без фото-плейсхолдеров — компактные карточки */
.ss-about-store__photo{display:none}
.ss-about-stores__grid{gap:20px}
.ss-about-store{padding:22px 22px 20px;border:1px solid var(--ss-line)}
.ss-about-store__name{margin-top:0}
@media (max-width:767px){.ss-about-stores__grid{grid-template-columns:1fr}}
/* фото шапки на десктопе — горизонтальное (uploads/2026/09/hero-o-nas-desktop.webp), на телефоне прежнее */
@media (min-width:1025px){body.ss-onas-desktop figure.ss-about-hero__media{background:url(/wp-content/uploads/2026/09/hero-o-nas-desktop.webp) 50% 40%/cover no-repeat}body.ss-onas-desktop figure.ss-about-hero__media img{opacity:0}}