/**
 * Story/content pages — «О нас» now, «О бренде» and the B2B section
 * next. One stylesheet for all three because they are the same page
 * grammar three times: a dark cover band, then alternating light and
 * dark bands built from a small set of shared blocks (figures strip,
 * statement, timeline, brand list, definition list, doors).
 *
 * Enqueued by page template, not by page ID — see the story-template
 * list in profhairclub_shop_scripts().
 *
 * A note that applies to almost every colour rule below. style.css has
 * two broadly-scoped rules that outrank a component's own single class
 * wherever the component happens to render inside their scope:
 *
 *   h1, h2, h3, h4 { color: var(--phc-ink) }   (0,0,1) — direct element
 *   .site-main a:not(…)  { color: yellow-deep } (0,4,1) — every link
 *
 * The first is beaten by any single class, so every heading sitting on a
 * dark band gets one explicitly rather than inheriting paper from its
 * section — inheritance loses to a direct match. The second is why these
 * templates don't carry `site-main` at all, and why `.phc-page-door` and
 * `.phc-brands__link` are also on that rule's exclusion list: belt and
 * braces, so the doors keep their colour if a future template does.
 * This is the single most frequent bug on this project — five separate
 * occurrences so far — so specificity here is deliberate, never
 * accidental, and never left to cross-file source order.
 *
 * @package ProfHairClub_shop
 */

/* -------------------------------------------------------------
   Page shell
   ------------------------------------------------------------- */
.phc-page {
	/* No max-width and no padding: bands run edge to edge and each
	   section supplies its own .phc-container. */
	max-width: none;
	margin: 0;
	padding: 0;
}

/* -------------------------------------------------------------
   Full-height cover variant (template-parts/page/cover.php,
   variant=full) — same visual result as the front-page hero
   (full viewport, decorative glow, scroll cue, cascading text) built on
   this site's plain CSS/vanilla-JS reveal mechanism instead of that
   page's GSAP/ScrollTrigger/Lenis stack, so pages using it don't have to
   load that stack too. See main.js for the scroll-cue click handler and
   the lightweight photo parallax.
   ------------------------------------------------------------- */
.phc-page-cover--full {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-block: calc(var(--phc-header-h) + 2.5rem) 5rem;
}

.phc-page-cover--full .phc-cover-photo {
	transform: scale(1.12);
}

.phc-page-cover__field {
	position: absolute;
	inset: -10%;
	background:
		radial-gradient(60% 50% at 82% 12%, rgba(240, 196, 25, 0.16), transparent 60%),
		radial-gradient(45% 45% at 8% 88%, rgba(240, 196, 25, 0.08), transparent 65%);
	will-change: transform;
	pointer-events: none;
}

.phc-page-cover--full.has-photo .phc-page-cover__field {
	opacity: 0.55;
	mix-blend-mode: soft-light;
}

/* Scroll cue — same markup/animation as the front page's own
   (assets/css/front-page.css), duplicated here rather than pulled in
   whole: that stylesheet is enqueued only on the front page, and it
   carries a lot more than these dozen lines (manifesto, categories rail,
   etc.) that a brand page has no use for. */
.phc-page-cover--full .phc-scroll-cue {
	position: absolute;
	left: 50%;
	bottom: clamp(20px, 3vw, 40px);
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	background: none;
	border: none;
	color: rgba(247, 245, 239, 0.6);
	font-size: 0.72rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	cursor: pointer;
}

.phc-page-cover--full .phc-scroll-cue__line {
	width: 1px;
	height: 34px;
	background: currentColor;
	position: relative;
	overflow: hidden;
}

.phc-page-cover--full .phc-scroll-cue__line::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--phc-yellow);
	transform: translateY(-100%);
	animation: phc-scroll-cue 2.2s var(--phc-ease) infinite;
}

@keyframes phc-scroll-cue {
	0% { transform: translateY(-100%); }
	50% { transform: translateY(0); }
	100% { transform: translateY(100%); }
}

@media (prefers-reduced-motion: reduce) {
	.phc-page-cover--full .phc-scroll-cue__line::after {
		animation: none;
	}
}

.phc-page-section {
	position: relative;
	padding-block: clamp(3.5rem, 8vw, 7rem);
	background: var(--phc-paper);
	color: var(--phc-ink);
}

/* Figures strip supplies its own vertical rhythm via its cells, so the
   section around it must not add any — otherwise the hairlines float in
   the middle of an empty band instead of butting against the cover. */
.phc-page-section--flush {
	padding-block: 0;
}

.phc-page-section--dark {
	background: var(--phc-black);
	color: var(--phc-paper);
}

/* Single class, so it beats the global `h2 { color: var(--phc-ink) }`
   on light bands; the dark override below needs two, to beat this one
   without depending on which file loaded last. */
.phc-page-section__title {
	margin-top: 0.9rem;
	font-size: clamp(1.5rem, 3.4vw, 2.4rem);
	color: var(--phc-ink);
	text-wrap: balance;
	max-width: 34ch;
}

.phc-page-section--dark .phc-page-section__title {
	color: var(--phc-paper);
}

/* .phc-eyebrow's ::before rule paints its little rule yellow-deep,
   which is a light-background colour — on black it disappears. */
.phc-page-section--dark .phc-eyebrow {
	color: rgba(247, 245, 239, 0.62);
}

.phc-page-section--dark .phc-eyebrow::before {
	background: var(--phc-yellow);
}

/* -------------------------------------------------------------
   Cover band -- NOT here.

   `.phc-page-cover` moved to style.css (section 12), beside the
   breadcrumb and cover photo/scrim it is built from. Two unrelated page
   families use the band now -- the story pages here and the
   informational/legal pages in template-info-page.php -- and the second
   set must not have to load this whole stylesheet just to get a header.
   Markup stays in template-parts/page/cover.php.
   ------------------------------------------------------------- */

/* -------------------------------------------------------------
   Figures strip
   ------------------------------------------------------------- */
.phc-figs {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1px;
	margin: 0;
	background: var(--phc-mist);
	border-block: 1px solid var(--phc-mist);
}

.phc-figs__item {
	background: var(--phc-paper);
	padding: clamp(1.4rem, 3vw, 2.2rem) var(--phc-gutter);
}

.phc-figs__n {
	font-family: var(--phc-font-display);
	font-weight: 600;
	font-size: clamp(2rem, 5vw, 3.2rem);
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--phc-ink);
	/* Years and counts sit in a row of three: without tabular figures the
	   digits are unevenly spaced and the numbers stop lining up. */
	font-variant-numeric: tabular-nums;
}

.phc-figs__suffix {
	color: var(--phc-yellow-deep);
}

.phc-figs__l {
	margin: 0.6rem 0 0;
	font-size: 0.88rem;
	color: var(--phc-stone);
	max-width: 32ch;
}

@media (min-width: 720px) {
	.phc-figs {
		grid-template-columns: repeat(3, 1fr);
	}

	/* Cells stop needing the full page gutter once they sit side by side —
	   at three across it would eat most of a column. */
	.phc-figs__item {
		padding-inline: clamp(1.2rem, 2.6vw, 2rem);
	}

	.phc-figs__item:first-child {
		padding-left: var(--phc-gutter);
	}

	.phc-figs__item:last-child {
		padding-right: var(--phc-gutter);
	}
}

/* -------------------------------------------------------------
   Statement bands
   ------------------------------------------------------------- */
.phc-say__line {
	font-family: var(--phc-font-display);
	font-weight: 600;
	font-size: clamp(1.7rem, 5vw, 3.4rem);
	line-height: 1.08;
	letter-spacing: -0.015em;
	color: var(--phc-ink);
	max-width: 26ch;
	text-wrap: balance;
}

.phc-say__line em {
	font-style: italic;
	color: var(--phc-yellow-deep);
}

.phc-page-section--dark .phc-say__line {
	color: var(--phc-paper);
}

.phc-page-section--dark .phc-say__line em {
	color: var(--phc-yellow);
}

.phc-say__line--small {
	font-size: clamp(1.25rem, 3.2vw, 2rem);
	max-width: 32ch;
	margin-top: 1.1rem;
}

.phc-say__note {
	margin-top: 1.4rem;
	max-width: 48ch;
	color: var(--phc-graphite);
}

.phc-page-section--dark .phc-say__note {
	color: rgba(247, 245, 239, 0.68);
}

.phc-say__figure {
	font-family: var(--phc-font-display);
	font-weight: 600;
	font-size: clamp(4rem, 14vw, 8.5rem);
	line-height: 0.88;
	letter-spacing: -0.035em;
	color: var(--phc-yellow);
	font-variant-numeric: tabular-nums;
}

/* Button row for a .phc-say CTA band (page-dlya-salonov.php,
   page-optovikam.php). Not .phc-pro__ctas — that class's flex/gap rule
   lives in front-page.css, which these templates never load. */
.phc-page-ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 0.8rem;
	margin-top: 1.6rem;
}

/* Brand detail page (page-brand.php) — a short checklist under the "О
   бренде" paragraph. Same ✓-list language as .phc-brand-story__highlights
   in brand-story.css and .phc-account-banner__list in account.css, just
   on a light band here instead of a dark one. */
.phc-brand-highlights {
	margin-top: 1.6rem;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	max-width: 44ch;
}

.phc-brand-highlights li {
	position: relative;
	padding-left: 1.5rem;
	color: var(--phc-graphite);
	font-size: 0.92rem;
}

.phc-brand-highlights li::before {
	content: "\2713";
	position: absolute;
	left: 0;
	color: var(--phc-yellow-deep);
	font-weight: 700;
}

/* page-consultation.php's own "Что вы получите" section already put this
   list on a dark band with no override here — graphite-on-black, close
   to unreadable. Caught while building page-delivery.php, which reuses
   the same .phc-page-section--dark + .phc-brand-highlights combination
   deliberately (this time on a light band instead, see that template),
   but this fix belongs here regardless of which page uses it. */
.phc-page-section--dark .phc-brand-highlights li {
	color: rgba(247, 245, 239, 0.75);
}

/* -------------------------------------------------------------
   Timeline — the spine of «О нас»
   ------------------------------------------------------------- */
.phc-timeline {
	margin-top: clamp(1.6rem, 4vw, 2.6rem);
}

.phc-timeline__row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.35rem 1.75rem;
	padding-block: clamp(1.2rem, 2.6vw, 1.8rem);
	border-top: 1px solid var(--phc-mist);
}

.phc-timeline__year {
	position: relative;
	font-family: var(--phc-font-display);
	font-weight: 600;
	font-size: clamp(1.4rem, 3.4vw, 2.1rem);
	line-height: 1;
	color: var(--phc-ink);
	font-variant-numeric: tabular-nums;
}

.phc-timeline__title {
	font-family: var(--phc-font-sans);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--phc-ink);
	letter-spacing: 0;
}

.phc-timeline__text {
	margin-top: 0.4rem;
	color: var(--phc-graphite);
	max-width: 58ch;
}

@media (min-width: 720px) {
	.phc-timeline__row {
		/* Fixed first column so every year starts on the same vertical,
		   which is what makes the column read as an axis. It has to fit
		   the widest value — «2021–2026», not a bare four-digit year. */
		grid-template-columns: 9.5rem minmax(0, 1fr);
	}

	/* Marker on that axis. Decorative, hence no aria involvement, but it
	   is doing real work: it's the only thing making the eye read the
	   years as points on one line rather than as six separate headings.
	   Sits in the grid gap, so it can't overlap either column. */
	.phc-timeline__year::after {
		content: "";
		position: absolute;
		right: -0.95rem;
		top: 0.4em;
		width: 7px;
		height: 7px;
		border-radius: 999px;
		background: var(--phc-yellow);
	}
}

/* -------------------------------------------------------------
   Brand portfolio
   ------------------------------------------------------------- */
.phc-brands {
	margin-top: clamp(1.4rem, 3.5vw, 2.2rem);
	border-top: 1px solid var(--phc-fog);
}

.phc-brands__row {
	border-bottom: 1px solid var(--phc-fog);
}

.phc-brands__link {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.4rem 1.2rem;
	padding-block: clamp(0.85rem, 2vw, 1.15rem);
	text-decoration: none;
	color: var(--phc-paper);
	transition: color 0.3s var(--phc-ease);
}

.phc-brands__name {
	font-family: var(--phc-font-display);
	font-weight: 600;
	font-size: clamp(1.15rem, 2.8vw, 1.7rem);
	line-height: 1.15;
}

.phc-brands__status {
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--phc-yellow);
	white-space: nowrap;
}

.phc-brands__link:hover .phc-brands__name,
.phc-brands__link:focus-visible .phc-brands__name {
	color: var(--phc-yellow);
}

/* -------------------------------------------------------------
   Definition list — «Как мы работаем»
   ------------------------------------------------------------- */
.phc-defs {
	margin: clamp(1.4rem, 3.5vw, 2.2rem) 0 0;
}

.phc-defs__row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.4rem 1.75rem;
	padding-block: clamp(1.1rem, 2.4vw, 1.6rem);
	border-top: 1px solid var(--phc-mist);
}

.phc-defs__term {
	font-weight: 700;
	font-size: 1rem;
	color: var(--phc-ink);
}

.phc-defs__text {
	margin: 0;
	color: var(--phc-graphite);
	max-width: 62ch;
}

@media (min-width: 900px) {
	.phc-defs__row {
		grid-template-columns: 12rem minmax(0, 1fr);
	}
}

/* -------------------------------------------------------------
   Section cover — a brand-page section whose photo is its own
   full-bleed background (dark editorial shots especially) instead of
   a plain inline image. Markup reuses .phc-cover-photo/.phc-cover-scrim
   (style.css) as-is; this only adds the positioning context they need
   and a bit of extra breathing room since there's no breadcrumb/h1
   pushing the band open like the page's own top cover has.
   ------------------------------------------------------------- */
.phc-section-cover {
	position: relative;
	overflow: hidden;
	padding-block: clamp(3.5rem, 9vw, 6.5rem);
}

.phc-section-cover__inner {
	position: relative;
	z-index: 1;
}

/* -------------------------------------------------------------
   Section photo — inline "journal" photo under a brand-page section
   (factory/production/product), separate from the cover band photo
   ------------------------------------------------------------- */
.phc-section-photo {
	display: block;
	width: 100%;
	/* Reserve the box before the lazy image arrives: with only a max-height
	   an unloaded <img> is 0px tall, so the next section rode up into the
	   photo's slot and "covered" it. object-fit crops to this ratio. */
	aspect-ratio: 16 / 10;
	max-height: 460px;
	object-fit: cover;
	border-radius: 4px;
	margin-top: clamp(1.6rem, 3.5vw, 2.4rem);
}

/* -------------------------------------------------------------
   Priorities grid — brand-page "01/02/03" cards
   ------------------------------------------------------------- */
.phc-priorities {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1px;
	margin: clamp(1.4rem, 3.5vw, 2.2rem) 0 0;
	padding: 0;
	list-style: none;
	background: var(--phc-mist);
	border-block: 1px solid var(--phc-mist);
}

.phc-priorities__item {
	background: var(--phc-paper);
	padding: clamp(1.4rem, 3vw, 2.2rem) var(--phc-gutter);
}

.phc-priorities__n {
	display: block;
	font-family: var(--phc-font-display);
	font-weight: 600;
	font-size: clamp(1.8rem, 4vw, 2.6rem);
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--phc-yellow-deep);
	font-variant-numeric: tabular-nums;
}

.phc-priorities__title {
	margin: 0.6rem 0 0.3rem;
	font-family: var(--phc-font-display);
	font-weight: 600;
	font-size: 1.15rem;
	color: var(--phc-ink);
}

.phc-priorities__text {
	margin: 0;
	font-size: 0.92rem;
	color: var(--phc-stone);
	max-width: 32ch;
}

@media (min-width: 720px) {
	.phc-priorities {
		grid-template-columns: repeat(3, 1fr);
	}

	.phc-priorities__item {
		padding-inline: clamp(1.2rem, 2.6vw, 2rem);
	}

	.phc-priorities__item:first-child {
		padding-left: var(--phc-gutter);
	}

	.phc-priorities__item:last-child {
		padding-right: var(--phc-gutter);
	}
}

/* -------------------------------------------------------------
   Doors
   ------------------------------------------------------------- */
.phc-doors {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(0.8rem, 2vw, 1.1rem);
	margin-top: clamp(1.6rem, 4vw, 2.4rem);
}

.phc-page-door {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: clamp(1.3rem, 3vw, 1.7rem) clamp(1.1rem, 2.4vw, 1.4rem);
	background: var(--phc-white);
	border: 1px solid var(--phc-mist);
	border-radius: var(--phc-radius-m);
	text-decoration: none;
	color: var(--phc-ink);
	transition: border-color 0.3s var(--phc-ease), transform 0.3s var(--phc-ease);
}

.phc-page-door:hover,
.phc-page-door:focus-visible {
	border-color: var(--phc-yellow-deep);
	transform: translateY(-3px);
}

.phc-page-door__kicker {
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--phc-stone);
}

.phc-page-door__title {
	font-family: var(--phc-font-display);
	font-weight: 600;
	font-size: clamp(1.1rem, 2.4vw, 1.35rem);
	line-height: 1.16;
	color: var(--phc-ink);
}

.phc-page-door__text {
	font-size: 0.9rem;
	color: var(--phc-graphite);
}

/* margin-top:auto pins the call to action to the bottom edge, so three
   doors with different amounts of copy still line their arrows up. */
.phc-page-door__go {
	margin-top: auto;
	padding-top: 0.7rem;
	font-size: 0.82rem;
	font-weight: 700;
	color: var(--phc-yellow-deep);
}

.phc-page-section--dark .phc-page-door {
	background: var(--phc-fog);
	border-color: var(--phc-fog);
	color: var(--phc-paper);
}

.phc-page-section--dark .phc-page-door__title {
	color: var(--phc-paper);
}

.phc-page-section--dark .phc-page-door__text {
	color: rgba(247, 245, 239, 0.68);
}

.phc-page-section--dark .phc-page-door__go {
	color: var(--phc-yellow);
}

@media (min-width: 720px) {
	.phc-doors {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* -------------------------------------------------------------
   404
   ------------------------------------------------------------- */
.phc-404__direct {
	margin-top: 2.4rem;
	text-align: center;
	color: var(--phc-graphite);
}

.phc-404__direct a {
	font-weight: 700;
	color: var(--phc-ink);
}

/* -------------------------------------------------------------
   Editor prose escape hatch (page body, usually empty)
   ------------------------------------------------------------- */
.phc-page-prose {
	max-width: 68ch;
}

.phc-page-prose > * + * {
	margin-top: 1.1rem;
}

.phc-page-prose h2,
.phc-page-prose h3 {
	margin-top: 2rem;
	color: var(--phc-ink);
}

.phc-page-prose a {
	color: var(--phc-yellow-deep);
}

.phc-page-prose ul,
.phc-page-prose ol {
	padding-left: 1.3rem;
	list-style: revert;
}

.phc-page-prose li + li {
	margin-top: 0.4rem;
}

/* -------------------------------------------------------------
   Motion
   ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.phc-page-door:hover,
	.phc-page-door:focus-visible {
		transform: none;
	}
}