/**
 * Journal (blog) styles — listing + Format 1 "Разбор".
 *
 * Templates: home.php, archive.php, single.php. Helpers: inc/blog.php.
 * Enqueued only on blog views (see functions.php), so product and cart
 * pages never pay for it.
 *
 * Everything here uses the design tokens from style.css — no new palette,
 * no new type. The journal is the same voice as the storefront, applied
 * to running text instead of products.
 *
 * @package ProfHairClub_shop
 */

/* -------------------------------------------------------------
   Shared: cover band
   Both the listing hero and an article's cover are the archive's
   dark band; the article variant just gets taller and takes a photo.
   ------------------------------------------------------------- */
.phc-journal-page,
.phc-article-page {
	padding-bottom: 5rem;
}

.phc-journal-hero,
.phc-article-cover {
	position: relative;
	overflow: hidden;
	background: var(--phc-black);
	color: var(--phc-paper);
}

.phc-journal-hero > .phc-container,
.phc-article-cover > .phc-container {
	position: relative;
	z-index: 1;
}

.phc-journal-hero {
	padding: calc(var(--phc-header-h) + 2.6rem) 0 clamp(34px, 5.5vw, 58px);
	margin-bottom: clamp(28px, 5vw, 52px);
}

/* No photo on the listing band, so the scrim stands in for one — same
   treatment the cart/checkout band uses. */
.phc-journal-hero .phc-cover-scrim {
	background:
		radial-gradient(115% 90% at 88% 8%, rgba(224, 203, 174, 0.24), transparent 62%),
		linear-gradient(90deg, rgba(10, 10, 8, 0.6), transparent 65%);
}

/* .phc-breadcrumb's base layout now lives in style.css; only the dark-band colours are set here. */
.phc-journal-hero .phc-breadcrumb,
.phc-article-cover .phc-breadcrumb {
	color: rgba(247, 245, 239, 0.6);
	margin-bottom: 1.3rem;
}

.phc-journal-hero .phc-breadcrumb a:hover,
.phc-article-cover .phc-breadcrumb a:hover,
.phc-journal-hero .phc-breadcrumb__current,
.phc-article-cover .phc-breadcrumb__current {
	color: var(--phc-paper);
}

.phc-journal-hero .phc-eyebrow {
	color: rgba(247, 245, 239, 0.7);
}

/* Two classes to beat the global `h1 { color: var(--phc-ink) }` without
   depending on source order — the trap this theme keeps hitting. */
.phc-journal-hero .phc-journal-hero__title {
	color: var(--phc-paper);
	font-size: clamp(1.9rem, 4.4vw, 3.2rem);
	margin-top: 0.45rem;
}

.phc-journal-hero .phc-journal-hero__desc {
	margin-top: 0.9rem;
	max-width: 54ch;
	color: rgba(247, 245, 239, 0.68);
	font-size: 0.95rem;
}

.phc-journal-hero .phc-journal-hero__desc p {
	margin: 0 0 0.6rem;
}

.phc-journal-hero .phc-journal-hero__desc p:last-child {
	margin-bottom: 0;
}

/* -------------------------------------------------------------
   Listing: chips, lead article, grid
   ------------------------------------------------------------- */
.phc-journal-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
	margin-bottom: clamp(1.5rem, 3vw, 2.2rem);
}

.phc-chip {
	display: inline-flex;
	align-items: center;
	padding: 0.42em 0.95em;
	border: 1px solid var(--phc-mist);
	border-radius: 999px;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--phc-graphite);
	text-decoration: none;
	transition: background-color 0.25s var(--phc-ease), color 0.25s var(--phc-ease), border-color 0.25s var(--phc-ease);
}

.phc-chip:hover {
	border-color: var(--phc-ink);
	color: var(--phc-ink);
}

.phc-chip.is-active {
	background: var(--phc-ink);
	border-color: var(--phc-ink);
	color: var(--phc-paper);
}

.phc-jfeature {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	gap: clamp(1.2rem, 3vw, 2.4rem);
	align-items: center;
	padding-bottom: clamp(1.6rem, 3vw, 2.4rem);
	margin-bottom: clamp(1.6rem, 3vw, 2.4rem);
	border-bottom: 1px solid var(--phc-mist);
}

.phc-jfeature__media {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--phc-radius-m);
	background: var(--phc-mist);
}

.phc-jfeature__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.7s var(--phc-ease);
}

.phc-jfeature__media:hover img {
	transform: scale(1.04);
}

.phc-jfeature__title {
	font-size: clamp(1.25rem, 2.6vw, 1.9rem);
	margin: 0.55rem 0 0.7rem;
}

/* `.site-main a` styling doesn't reach here (this template has no
   site-main), but posts link from other contexts too — keep it explicit. */
.phc-jfeature__title a {
	color: inherit;
	text-decoration: none;
}

.phc-jfeature__title a:hover {
	color: var(--phc-yellow-deep);
}

.phc-jfeature__excerpt {
	margin: 0;
	color: var(--phc-graphite);
	font-size: 0.92rem;
	line-height: 1.65;
	max-width: 52ch;
}

.phc-journal-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1.1rem, 2.4vw, 1.8rem);
}

.phc-jcard {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	text-decoration: none;
	color: inherit;
}

.phc-jcard__media {
	display: block;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	border-radius: var(--phc-radius-m);
	background: var(--phc-mist);
}

.phc-jcard__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.7s var(--phc-ease);
}

.phc-jcard:hover .phc-jcard__media img {
	transform: scale(1.04);
}

/* Posts with no featured image still need the card to hold its shape. */
.phc-jcard__noimg {
	display: block;
	width: 100%;
	height: 100%;
	background:
		radial-gradient(120% 100% at 80% 10%, rgba(224, 203, 174, 0.29), transparent 60%),
		var(--phc-mist);
}

.phc-jcard__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem;
}

.phc-jcard__cat {
	display: inline-flex;
	align-items: center;
	background: var(--phc-ink);
	color: var(--phc-paper);
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 0.32em 0.7em;
	border-radius: 999px;
	text-decoration: none;
}

.phc-jcard__time {
	font-size: 0.74rem;
	color: var(--phc-stone);
}

.phc-jcard__title {
	font-family: var(--phc-font-display);
	font-weight: 600;
	font-size: 1rem;
	line-height: 1.3;
	color: var(--phc-ink);
}

.phc-jcard:hover .phc-jcard__title {
	color: var(--phc-yellow-deep);
}

.phc-journal-empty {
	color: var(--phc-graphite);
	font-family: var(--phc-font-display);
	font-size: 1.15rem;
	padding: clamp(2rem, 5vw, 3.5rem) 0;
}

@media (max-width: 900px) {
	.phc-jfeature {
		grid-template-columns: 1fr;
	}

	.phc-journal-grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 540px) {
	.phc-journal-grid {
		grid-template-columns: 1fr;
	}
}

/* -------------------------------------------------------------
   Article cover
   ------------------------------------------------------------- */
.phc-article-cover {
	display: flex;
	align-items: flex-end;
	min-height: clamp(300px, 42vw, 460px);
	padding: calc(var(--phc-header-h) + 2.2rem) 0 clamp(28px, 4.5vw, 48px);
}

/* Photo variant: darker scrim, because the title sits directly on the
   image. Without a photo the band falls back to the flat black + wash. */
.phc-article-cover.has-photo .phc-cover-scrim {
	background:
		linear-gradient(180deg, rgba(10, 10, 8, 0.25) 0%, rgba(10, 10, 8, 0.62) 55%, rgba(10, 10, 8, 0.9) 100%),
		linear-gradient(90deg, rgba(10, 10, 8, 0.5), transparent 60%);
}

.phc-article-cover:not(.has-photo) .phc-cover-scrim {
	background:
		radial-gradient(115% 90% at 88% 8%, rgba(224, 203, 174, 0.24), transparent 62%),
		linear-gradient(90deg, rgba(10, 10, 8, 0.6), transparent 65%);
}

.phc-article-cover__in {
	max-width: 34ch;
}

.phc-article-cover__cat {
	margin-bottom: 0.9rem;
}

/* Two classes, same specificity reasoning as the listing title. */
.phc-article-cover .phc-article-cover__title {
	color: var(--phc-paper);
	font-size: clamp(1.7rem, 3.8vw, 2.9rem);
	margin: 0;
}

.phc-article-cover__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.7rem;
	margin-top: 1rem;
	font-size: 0.78rem;
	color: rgba(247, 245, 239, 0.68);
}

.phc-dot {
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.7;
}

/* -------------------------------------------------------------
   Article body: prose + sticky table of contents
   ------------------------------------------------------------- */
.phc-article-body {
	padding-top: clamp(2rem, 4vw, 3.4rem);
}

.phc-article-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 210px;
	gap: clamp(1.6rem, 4vw, 3.6rem);
	align-items: start;
}

/* Measure in ch, not px: it tracks the font size, so the line length stays
   readable if the type scale ever changes. */
.phc-prose {
	max-width: 68ch;
	min-width: 0;
}

.phc-prose > p,
.phc-prose > ul,
.phc-prose > ol {
	margin: 0 0 1.15rem;
	font-size: 1rem;
	line-height: 1.75;
	color: var(--phc-graphite);
}

.phc-prose > ul,
.phc-prose > ol {
	padding-left: 1.3rem;
}

.phc-prose > ul li,
.phc-prose > ol li {
	margin-bottom: 0.45rem;
}

/* First paragraph reads as a lede without needing an editor to mark it. */
.phc-prose > p:first-of-type {
	font-size: 1.1rem;
	line-height: 1.65;
	color: var(--phc-ink);
}

.phc-prose > h2 {
	font-size: clamp(1.3rem, 2.4vw, 1.65rem);
	margin: 2.2rem 0 0.8rem;
	scroll-margin-top: calc(var(--phc-header-h) + 1.5rem);
}

.phc-prose > h3 {
	font-size: clamp(1.1rem, 2vw, 1.3rem);
	margin: 1.8rem 0 0.6rem;
	scroll-margin-top: calc(var(--phc-header-h) + 1.5rem);
}

.phc-prose a {
	color: var(--phc-yellow-deep);
	text-decoration-thickness: 1px;
}

.phc-prose img {
	border-radius: var(--phc-radius-m);
	margin: 1.6rem 0;
}

.phc-prose figure {
	margin: 1.6rem 0;
}

.phc-prose figcaption {
	margin-top: 0.5rem;
	font-size: 0.8rem;
	color: var(--phc-stone);
}

/* Pull-quote. Editors get this by adding a plain blockquote — no custom
   block needed. */
.phc-prose blockquote {
	margin: 1.8rem 0;
	padding-left: 1.2rem;
	border-left: 2px solid var(--phc-yellow);
	font-family: var(--phc-font-display);
	font-style: italic;
	font-size: 1.2rem;
	line-height: 1.45;
	color: var(--phc-ink);
}

.phc-prose blockquote p {
	margin: 0 0 0.5rem;
}

.phc-prose blockquote p:last-child {
	margin-bottom: 0;
}

/* "На что смотреть в составе"-style callout: any list the editor wraps in
   a group with this class, or a WP "Highlight" style. */
.phc-prose .phc-callout,
.phc-prose .is-style-phc-callout {
	background: var(--phc-yellow-wash);
	border-radius: var(--phc-radius-m);
	padding: 1.1rem 1.3rem;
	margin: 1.7rem 0;
}

.phc-prose .phc-callout > :last-child {
	margin-bottom: 0;
}

.phc-toc {
	position: sticky;
	top: calc(var(--phc-header-h) + 1.5rem);
	border-left: 1px solid var(--phc-mist);
	padding-left: 1.1rem;
}

.phc-toc__title {
	margin: 0 0 0.8rem;
	font-family: var(--phc-font-sans);
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--phc-stone);
}

.phc-toc__link {
	display: block;
	padding: 0.3rem 0;
	font-size: 0.82rem;
	line-height: 1.4;
	color: var(--phc-graphite);
	text-decoration: none;
	transition: color 0.2s var(--phc-ease);
}

.phc-toc__link:hover {
	color: var(--phc-ink);
}

.phc-toc__link--h3 {
	padding-left: 0.8rem;
	font-size: 0.78rem;
	color: var(--phc-stone);
}

/* Product shelf at the end of the article. */
.phc-article-shelf {
	margin-top: clamp(2.2rem, 4vw, 3.2rem);
	padding-top: clamp(1.4rem, 3vw, 2rem);
	border-top: 1px solid var(--phc-mist);
}

.phc-article-shelf__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1rem;
	margin-top: 1.1rem;
}

@media (max-width: 620px) {
	.phc-article-shelf__grid {
		grid-template-columns: 1fr 1fr;
	}
}

/* Prev/next. */
.phc-article-nav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
	margin-top: clamp(2.4rem, 5vw, 4rem);
	padding-top: clamp(1.4rem, 3vw, 2rem);
	border-top: 1px solid var(--phc-mist);
}

.phc-article-nav__item {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	text-decoration: none;
	color: inherit;
}

.phc-article-nav__item--next {
	text-align: right;
	grid-column: 2;
}

.phc-article-nav__dir {
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--phc-stone);
}

.phc-article-nav__title {
	font-family: var(--phc-font-display);
	font-size: 0.98rem;
	line-height: 1.3;
	color: var(--phc-ink);
}

.phc-article-nav__item:hover .phc-article-nav__title {
	color: var(--phc-yellow-deep);
}

@media (max-width: 900px) {
	.phc-article-grid {
		grid-template-columns: 1fr;
	}

	/* Table of contents moves above the text and stops sticking — a
	   horizontal strip of links at the top of a phone screen is worse
	   than useless, but a collapsed list before the article works. */
	.phc-toc {
		position: static;
		grid-row: 1;
		border-left: none;
		border-bottom: 1px solid var(--phc-mist);
		padding-left: 0;
		padding-bottom: 1.1rem;
		margin-bottom: 1.4rem;
	}
}

@media (max-width: 540px) {
	.phc-article-nav {
		grid-template-columns: 1fr;
	}

	.phc-article-nav__item--next {
		grid-column: 1;
		text-align: left;
	}
}