/**
 * «О брендах» scroll-story (page-brands.php) — one full-viewport banner
 * per brand, all sharing the same plain dark gradient (no per-brand
 * photos yet — see the docblock in page-brands.php for the plan to add
 * them later without a second design pass).
 *
 * scroll-snap-type: y proximity, NOT mandatory like front-page.php's own
 * story — page-about.php already paid for this lesson on its own taller
 * sections (its docblock explains why): a banner with a full description
 * paragraph and a highlights list is much closer to that timeline's
 * height than to the front page's terse one-line chapters, and
 * `mandatory` on a slide taller than the viewport produces one you can't
 * finish reading — it snaps you back before you're done. `proximity`
 * only snaps when already close to a slide, never fights the user.
 *
 * @package ProfHairClub_shop
 */

.phc-brand-story {
	scroll-snap-type: y proximity;
}

.phc-brand-story__slide {
	position: relative;
	overflow: hidden;
	min-height: 100vh;
	display: flex;
	align-items: center;
	scroll-snap-align: start;
	background: linear-gradient( 155deg, #2a271f, var( --phc-black ) );
	color: var( --phc-paper );
	padding-block: clamp( 3rem, 8vw, 5rem );
}

/* .phc-cover-photo/.phc-cover-scrim (style.css) need their parent
   `position: relative; overflow: hidden` above, and the text needs to
   sit on top of both — same stacking as .phc-page-cover__inner. A brand
   with no photo yet keeps the plain gradient background exactly as
   before; nothing here changes for it.

   Extra `.phc-brand-story` ancestor is load-bearing, not decoration: the
   alternating-gradient rule below is `.phc-brand-story__slide:nth-child(even)`
   — same (0,2,0) specificity as a bare `.phc-brand-story__slide.has-photo`
   would be, and it sits later in this file, so on a tie it would win and
   the gradient would show through a lazy-loading (or slow) photo instead
   of a plain black backstop. Same recurring specificity trap as
   everywhere else on this site — see profhairclub-project memory. */
.phc-brand-story .phc-brand-story__slide.has-photo {
	background: var( --phc-black );
}

/* The opening cover: template-parts/page/cover.php already supplies its
   own dark background and internal padding-block (calibrated for header
   clearance) — this variant clears the generic slide's own flex/padding
   so the cover isn't double-padded inside it, and instead stretches
   .phc-page-cover itself to fill the full-viewport slide and centers its
   own content, matching how tall the front page's own hero chapter is. */
.phc-brand-story__slide--hero {
	position: relative;
	display: block;
	padding: 0;
}

.phc-brand-story__slide--hero .phc-page-cover {
	min-height: 100vh;
	display: flex;
	align-items: center;
}

/* -------------------------------------------------------------
   Dot navigation + scroll cue — same markup/classes as the front page's
   own story (front-page.css), duplicated rather than loading that whole
   stylesheet here (it's front-page-only, and everything else in it is
   irrelevant to this page — see the top of this file).
   ------------------------------------------------------------- */
.phc-story-dots {
	position: fixed;
	right: clamp( 14px, 2.4vw, 34px );
	top: 50%;
	transform: translateY( -50% );
	z-index: 55;
	display: none;
	flex-direction: column;
	gap: 14px;
}

.phc-story-dots a {
	width: 9px;
	height: 9px;
	border-radius: 999px;
	border: 1px solid var( --phc-stone );
	transition: background-color 0.3s var( --phc-ease ), transform 0.3s var( --phc-ease ), border-color 0.3s var( --phc-ease );
}

.phc-story-dots a.is-active {
	background: var( --phc-yellow-deep );
	border-color: var( --phc-yellow-deep );
	transform: scale( 1.4 );
}

@media ( min-width: 960px ) {
	.phc-story-dots {
		display: flex;
	}
}

.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-scroll-cue__line {
	width: 1px;
	height: 34px;
	background: currentColor;
	position: relative;
	overflow: hidden;
}

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

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

/* Subtle rhythm between banners without needing per-brand photography —
   same two dark tones, gradient angle flipped every other slide. */
.phc-brand-story__slide:nth-child( even ) {
	background: linear-gradient( 205deg, #2a271f, var( --phc-black ) );
}

.phc-brand-story__inner {
	margin-top: 40%;
	position: relative;
	z-index: 1;
	max-width: 720px;
}

/* Two classes needed for both overrides below, same reason as every
   other dark-band eyebrow on this site (see story-pages.css's top note):
   .phc-eyebrow alone is (0,1,0) and would only win on file load order. */
.phc-brand-story__eyebrow {
	color: rgba( 247, 245, 239, 0.55 );
	font-variant-numeric: tabular-nums;
}

.phc-brand-story__eyebrow::before {
	background: var( --phc-yellow );
}

.phc-brand-story__name {
	margin-top: 1rem;
	font-family: var( --phc-font-display );
	font-weight: 600;
	font-size: clamp( 2.4rem, 7vw, 4.5rem );
	line-height: 1.05;
	color: var( --phc-paper );
}

.phc-brand-story__tagline {
	margin-top: 0.8rem;
	font-family: var( --phc-font-display );
	font-weight: 600;
	font-size: clamp( 1.1rem, 2.2vw, 1.4rem );
	color: var( --phc-yellow );
}

.phc-brand-story__desc {
	margin-top: 1.2rem;
	max-width: 56ch;
	color: rgba( 247, 245, 239, 0.72 );
}

.phc-brand-story__highlights {
	margin-top: 1.6rem;
	display: block;
	flex-wrap: wrap;
	gap: 0.6rem 1.6rem;
}

.phc-brand-story__highlights li {
	position: relative;
	padding-left: 1.4rem;
	font-size: 0.88rem;
	color: rgba( 247, 245, 239, 0.85 );
}

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

/* Duplicated from story-pages.css's own .phc-page-ctas rather than
   loading that whole stylesheet just for this one 5-line helper — this
   page's own cover/buttons already come from the always-loaded
   style.css, and nothing else here needs story-pages.css. */
.phc-page-ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 0.8rem;
}

.phc-brand-story__slide .phc-page-ctas {
	margin-top: 2rem;
}

/* .phc-btn--ghost's border/text default to var(--phc-ink) via
   `color: inherit` from its own dark-on-light-page ancestor elsewhere on
   the site — here that ancestor is this dark slide, so inherit already
   resolves to --phc-paper correctly. No override needed; noted so nobody
   "fixes" this later assuming it's broken. */