/**
 * Pinterest First Editorial - Single article.
 *
 * Article column, header, hero, multi-page links, related content,
 * previous/next navigation and native comment styling. Loaded conditionally on
 * singular views (single posts and static pages) by inc/enqueue.php, so
 * archives and the homepage never download it (Docs/ARCHITECTURE.md, Asset
 * Loading; Docs/IMPLEMENTATION_PLAN.md Phase 7 and Phase 8).
 *
 * Component-scoped only: it does not restyle the header, homepage or archive
 * modules, and it reuses the shared primitives (breadcrumbs, author meta, card
 * media, buttons) instead of redefining them. Generic Gutenberg block styling
 * belongs to assets/css/blocks.css, not here.
 *
 * All values come from tokens.css (Docs/ARCHITECTURE.md, CSS Rules).
 *
 * @package Pinterest_First_Editorial
 */

/* -------------------------------------------------------------------------
 * Article column - long-form content stays within the reading measure
 * (Docs/DESIGN_SYSTEM.md #9). The page shell padding is restated here rather
 * than shared with .pfe-page-shell because the two stylesheets load on
 * mutually exclusive views; both use the same spacing tokens, so there is no
 * divergent value.
 * ---------------------------------------------------------------------- */

.pfe-article-shell {
	max-width: var(--pfe-reading-measure);
	margin-inline: auto;
	padding-block: var(--pfe-space-8) var(--pfe-space-10);
}

/* -------------------------------------------------------------------------
 * Article header - explicit token rhythm for the canonical order:
 * breadcrumbs, category, H1, deck, metadata, hero (Docs/DECISIONS.md #10;
 * Docs/DESIGN_SYSTEM.md #17).
 * ---------------------------------------------------------------------- */

.pfe-article__header > * {
	margin-block: 0;
}

.pfe-article__category {
	margin-block-start: var(--pfe-space-4);
	font-size: var(--pfe-font-size-xs);
	font-weight: var(--pfe-font-weight-semibold);
	letter-spacing: var(--pfe-tracking-wide);
	text-transform: uppercase;
	text-decoration: none;
	color: var(--pfe-color-accent-strong);
}

.pfe-article__category:hover {
	color: var(--pfe-color-accent-hover);
	text-decoration: underline;
	text-underline-offset: var(--pfe-underline-offset);
}

.pfe-article__title {
	margin-block-start: var(--pfe-space-2);
	color: var(--pfe-color-text);
}

.pfe-article__deck {
	margin-block-start: var(--pfe-space-3);
	font-size: var(--pfe-font-size-xl);
	font-weight: var(--pfe-font-weight-regular);
	line-height: var(--pfe-leading-snug);
	color: var(--pfe-color-text-secondary);
}

.pfe-article__meta {
	margin-block-start: var(--pfe-space-5);
}

/* -------------------------------------------------------------------------
 * Hero image - the single eager, high-priority image on the article. It reuses
 * the shared card media frame (srcset/sizes, intrinsic size and the neutral
 * missing-image fallback all come from pfe_card_media()).
 * ---------------------------------------------------------------------- */

.pfe-article__hero {
	margin-block-start: var(--pfe-space-7);
}

.pfe-article__hero-frame {
	border-radius: var(--pfe-radius-lg);
}

/* -------------------------------------------------------------------------
 * Article content - the WordPress post body rendered exactly once.
 * ---------------------------------------------------------------------- */

.pfe-article__content {
	margin-block-start: var(--pfe-space-7);
	font-size: var(--pfe-font-size-lg);
	line-height: var(--pfe-leading-relaxed);
}

.pfe-article__content > *:first-child {
	margin-block-start: 0;
}

/* -------------------------------------------------------------------------
 * Content containment (Docs/IMPLEMENTATION_PLAN.md, Phase 12;
 * Docs/DECISIONS.md #28).
 *
 * Editorial content can carry media and wide Gutenberg blocks. Nothing in the
 * post body may widen the reading measure past the viewport: media is capped
 * to the column and fixed-dimension content scrolls inside its own box, so a
 * single article never scrolls sideways at 360px.
 * ---------------------------------------------------------------------- */

.pfe-article__content img,
.pfe-article__content video,
.pfe-article__content audio,
.pfe-article__content iframe,
.pfe-article__content embed,
.pfe-article__content object {
	max-width: 100%;
}

.pfe-article__content pre,
.pfe-article__content table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
}

/* Multi-page articles (<!--nextpage-->): quiet, compact page links. */
.pfe-article__pages {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--pfe-space-2);
	margin-block-start: var(--pfe-space-7);
	font-size: var(--pfe-font-size-sm);
	font-weight: var(--pfe-font-weight-semibold);
}

.pfe-article__page-number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--pfe-tap-target);
	min-height: var(--pfe-tap-target);
	padding-inline: var(--pfe-space-2);
	text-align: center;
}

.pfe-article__pages a .pfe-article__page-number {
	text-decoration: underline;
}

/* -------------------------------------------------------------------------
 * Previous / next navigation - stacked on mobile, two columns from 768px up.
 * Each control is a full-size, keyboard-focusable link with visible text.
 * ---------------------------------------------------------------------- */

.pfe-article__footer {
	margin-block-start: var(--pfe-space-9);
}

.pfe-post-nav {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--pfe-space-4);
	padding-block-start: var(--pfe-space-7);
	border-block-start: 1px solid var(--pfe-color-border);
}

@media (min-width: 768px) {

	.pfe-post-nav {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.pfe-post-nav__link--next {
		text-align: end;
	}
}

.pfe-post-nav__link {
	display: flex;
	flex-direction: column;
	gap: var(--pfe-space-1);
	padding: var(--pfe-space-4);
	border: 1px solid var(--pfe-color-border); /* 1px matches the header hairline. */
	border-radius: var(--pfe-radius-sm);
	background-color: var(--pfe-color-surface);
	color: var(--pfe-color-text);
	text-decoration: none;
	transition: border-color var(--pfe-transition-fast);
}

.pfe-post-nav__link:hover {
	border-color: var(--pfe-color-accent);
}

.pfe-post-nav__label {
	font-size: var(--pfe-font-size-xs);
	font-weight: var(--pfe-font-weight-semibold);
	letter-spacing: var(--pfe-tracking-wide);
	text-transform: uppercase;
	color: var(--pfe-color-text-secondary);
}

.pfe-post-nav__title {
	font-size: var(--pfe-font-size-md);
	font-weight: var(--pfe-font-weight-semibold);
	line-height: var(--pfe-leading-snug);
	color: var(--pfe-color-text);
}

/* -------------------------------------------------------------------------
 * Related content - the "more like this" discovery grid between the article
 * body and the previous/next navigation. It reuses the shared section header
 * and the .pfe-card--related component (both already styled in
 * components.css); this file adds only the section rhythm and the grid
 * (Docs/DECISIONS.md #10; Docs/IMPLEMENTATION_PLAN.md Phase 8).
 *
 * The grid is capped one step below the full-width locked grid because the
 * article column is limited to the reading measure: two thumbnail columns on
 * small screens, three once the column is wide enough
 * (Docs/DECISIONS.md #20; Docs/DESIGN_SYSTEM.md #3).
 * ---------------------------------------------------------------------- */

.pfe-related {
	margin-block-start: var(--pfe-space-9);
	padding-block-start: var(--pfe-space-8);
	border-block-start: 1px solid var(--pfe-color-border);
}

.pfe-related .pfe-section-header {
	margin-block-end: var(--pfe-space-6);
}

.pfe-related__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--pfe-space-5) var(--pfe-space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 1024px) {

	.pfe-related__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* -------------------------------------------------------------------------
 * Comments - native WordPress markup, lightly styled
 * (Docs/DECISIONS.md #18).
 * ---------------------------------------------------------------------- */

.pfe-comments {
	margin-block-start: var(--pfe-space-9);
	padding-block-start: var(--pfe-space-8);
	border-block-start: 1px solid var(--pfe-color-border);
}

.pfe-comments__title {
	margin-block: 0 var(--pfe-space-6);
}

.pfe-comments__list,
.pfe-comments__list .children {
	margin: 0;
	padding: 0;
	list-style: none;
}

.pfe-comments__list .children {
	margin-block-start: var(--pfe-space-5);
	padding-inline-start: var(--pfe-space-5);
}

.pfe-comments__list .comment-body {
	padding-block: var(--pfe-space-5);
	border-block-start: 1px solid var(--pfe-color-border);
}

.pfe-comments__list .comment-body > *:last-child {
	margin-block-end: 0;
}

.pfe-comments .comment-author {
	display: flex;
	align-items: center;
	gap: var(--pfe-space-3);
	font-weight: var(--pfe-font-weight-semibold);
}

.pfe-comments .comment-author .avatar {
	width: var(--pfe-space-9);
	height: var(--pfe-space-9);
	border-radius: 50%;
}

.pfe-comments .comment-metadata {
	margin-block-start: var(--pfe-space-1);
	font-size: var(--pfe-font-size-sm);
	color: var(--pfe-color-text-secondary);
}

.pfe-comments .reply {
	margin-block-start: var(--pfe-space-3);
	font-size: var(--pfe-font-size-sm);
	font-weight: var(--pfe-font-weight-semibold);
}

.pfe-comments__closed {
	margin-block-start: var(--pfe-space-5);
	font-size: var(--pfe-font-size-sm);
	color: var(--pfe-color-text-secondary);
}

.pfe-comments .comment-form {
	display: flex;
	flex-direction: column;
	gap: var(--pfe-space-4);
	margin-block-start: var(--pfe-space-7);
}

.pfe-comments .comment-reply-title {
	margin: 0;
}

.pfe-comments .comment-form label {
	display: block;
	margin-block-end: var(--pfe-space-2);
	font-size: var(--pfe-font-size-sm);
	font-weight: var(--pfe-font-weight-semibold);
}

.pfe-comments .comment-form input[type="text"],
.pfe-comments .comment-form input[type="email"],
.pfe-comments .comment-form input[type="url"],
.pfe-comments .comment-form textarea {
	width: 100%;
	min-height: var(--pfe-tap-target);
	padding: var(--pfe-space-3) var(--pfe-space-4);
	border: 1px solid var(--pfe-color-border);
	border-radius: var(--pfe-radius-sm);
	background-color: var(--pfe-color-surface);
	color: var(--pfe-color-text);
	font-family: inherit;
	font-size: var(--pfe-font-size-md);
}

.pfe-comments .comment-form textarea {
	min-height: calc(var(--pfe-tap-target) * 3);
}

.pfe-comments .comment-form input:focus,
.pfe-comments .comment-form textarea:focus {
	border-color: var(--pfe-color-accent);
}

.pfe-comments .comment-notes,
.pfe-comments .logged-in-as {
	font-size: var(--pfe-font-size-sm);
	color: var(--pfe-color-text-secondary);
}

.pfe-comments .comment-form-cookies-consent {
	display: flex;
	align-items: flex-start;
	gap: var(--pfe-space-2);
}

.pfe-comments .comment-form-cookies-consent label {
	margin-block-end: 0;
	font-weight: var(--pfe-font-weight-regular);
}

.pfe-comments .form-submit {
	margin: 0;
}

/* Page-level accent button restates the hairline: --pfe-header-border-width is
 * scoped to .pfe-site-header, matching the note in archives.css. */
.pfe-comments .pfe-button {
	border: 1px solid var(--pfe-color-accent-strong);
}