/**
 * article.css
 * -----------------------------------------------------------------------------
 * Layout and block styling for the TinySpacer single-article template.
 *
 * Depends on the design tokens and base components defined in global.css
 * (loaded first). This file ONLY styles article-specific structures; it never
 * redefines shared components such as .ts-btn, .ts-card, .ts-badge,
 * .ts-newsletter, .ts-breadcrumb or .ts-section-heading — it composes with them.
 *
 * Mobile-first: base rules target small screens; min-width media queries add
 * enhancements. Breakpoints follow the theme convention (40em / 48em / 64em).
 *
 * Contents:
 *   1.  Article shell + layout grid
 *   2.  Article header
 *   3.  Quick summary callout
 *   4.  Table of contents (inline + sidebar)
 *   5.  Entry content (typography for the post body)
 *   6.  Tags + page links
 *   7.  Pinterest CTA
 *   8.  FAQ accordion
 *   9.  Related posts (continue organizing)
 *   10. Newsletter block
 *   11. Comments
 *   12. Reduced motion / forced colors
 * @package TinySpacer
 */

/* -----------------------------------------------------------------------------
 * 1. Article shell + layout grid
 * -------------------------------------------------------------------------- */

.ts-article-shell {
	padding-top: var(--ts-space-8);
	padding-bottom: var(--ts-space-12);
}

.ts-article {
	color: var(--ts-color-text);
}

/*
 * On mobile the layout is a single column. The existing .ts-layout-sidebar
 * (from global.css) introduces the two-column grid at 64em; we only need to
 * ensure the main column can shrink and the aside gets breathing room.
 */
.ts-article__layout {
	margin-top: var(--ts-space-8);
}

.ts-article__main {
	min-width: 0; /* prevent overflow from long code/URLs inside the grid track */
}

.ts-article__aside {
	margin-top: var(--ts-space-8);
}

@media (min-width: 64em) {
	.ts-article__aside {
		margin-top: 0;
	}
}

/* -----------------------------------------------------------------------------
 * 2. Article header
 * -------------------------------------------------------------------------- */

.ts-article-header {
	max-width: var(--ts-container-narrow);
	margin-inline: auto;
}

.ts-article-header__body {
	margin-top: var(--ts-space-5);
}

.ts-article-header__category {
	margin-bottom: var(--ts-space-4);
}

.ts-article-header__title {
	margin: 0 0 var(--ts-space-4);
}

.ts-article-header__excerpt {
	margin: 0 0 var(--ts-space-6);
	color: var(--ts-color-text-muted);
}

.ts-article-header__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ts-space-2) var(--ts-space-3);
	font-size: var(--ts-text-sm);
	color: var(--ts-color-text-muted);
}

.ts-article-header__author {
	display: inline-flex;
	align-items: center;
	gap: var(--ts-space-2);
}

.ts-article-header__avatar {
	border-radius: var(--ts-radius-circle);
	width: 2rem;
	height: 2rem;
	object-fit: cover;
}

.ts-article-header__author-name span {
	color: var(--ts-color-heading);
	font-weight: var(--ts-weight-semibold);
}

.ts-article-header__meta-sep {
	color: var(--ts-color-border-strong);
}

.ts-article-header__figure {
	margin: var(--ts-space-8) 0 0;
}

.ts-article-header__image {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--ts-radius-lg);
	box-shadow: var(--ts-shadow-sm);
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.ts-article-header__caption {
	margin-top: var(--ts-space-3);
	font-size: var(--ts-text-sm);
	color: var(--ts-color-text-subtle);
	text-align: center;
}

@media (min-width: 48em) {
	.ts-article-header__figure {
		margin-top: var(--ts-space-10);
	}
}

/* -----------------------------------------------------------------------------
 * 3. Quick summary callout
 * -------------------------------------------------------------------------- */

.ts-quick-summary {
	margin-bottom: var(--ts-space-8);
	padding: var(--ts-space-6);
	background-color: var(--ts-color-primary-soft);
	border: 1px solid var(--ts-color-border);
	border-radius: var(--ts-radius-lg);
}

.ts-quick-summary__header {
	display: flex;
	align-items: center;
	gap: var(--ts-space-2);
	margin-bottom: var(--ts-space-3);
}

.ts-quick-summary__icon {
	display: inline-flex;
	color: var(--ts-color-primary);
}

.ts-quick-summary__title {
	margin: 0;
	font-family: var(--ts-font-heading);
	font-size: var(--ts-text-lg);
	font-weight: var(--ts-weight-semibold);
	color: var(--ts-color-heading);
}

.ts-quick-summary__lead {
	margin: 0 0 var(--ts-space-4);
	color: var(--ts-color-text-muted);
	font-size: var(--ts-text-sm);
}

.ts-quick-summary__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: var(--ts-space-3);
}

.ts-quick-summary__item {
	display: flex;
	align-items: flex-start;
	gap: var(--ts-space-3);
}

.ts-quick-summary__bullet {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 1.5rem;
	margin-top: 0.1em;
	color: var(--ts-color-on-primary);
	background-color: var(--ts-color-primary);
	border-radius: var(--ts-radius-circle);
}

.ts-quick-summary__text {
	color: var(--ts-color-text);
	line-height: var(--ts-leading-snug);
}

/* -----------------------------------------------------------------------------
 * 4. Table of contents
 *    - Inline copy shows on mobile inside the content column.
 *    - Sidebar copy shows sticky in the aside from 64em up.
 * -------------------------------------------------------------------------- */

/* The sidebar TOC is hidden below the two-column breakpoint. */
.ts-toc--sidebar {
	display: none;
}

.ts-toc--inline {
	margin-bottom: var(--ts-space-8);
	border: 1px solid var(--ts-color-border);
	border-radius: var(--ts-radius-md);
	background-color: var(--ts-color-surface);
}

.ts-toc__details {
	padding: 0;
}

.ts-toc__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ts-space-3);
	padding: var(--ts-space-4) var(--ts-space-5);
	cursor: pointer;
	font-family: var(--ts-font-heading);
	font-weight: var(--ts-weight-semibold);
	color: var(--ts-color-heading);
	list-style: none;
}

.ts-toc__summary::-webkit-details-marker {
	display: none;
}

.ts-toc__summary:focus-visible {
	outline: none;
	box-shadow: var(--ts-shadow-focus);
	border-radius: var(--ts-radius-md);
}

.ts-toc__summary-icon {
	display: inline-flex;
	color: var(--ts-color-text-muted);
	transition: transform var(--ts-transition-base) var(--ts-ease-out);
}

.ts-toc__details[open] .ts-toc__summary-icon {
	transform: rotate(180deg);
}

.ts-toc__title {
	margin: 0 0 var(--ts-space-3);
	font-family: var(--ts-font-heading);
	font-size: var(--ts-text-sm);
	font-weight: var(--ts-weight-semibold);
	text-transform: uppercase;
	letter-spacing: var(--ts-tracking-wide);
	color: var(--ts-color-text-muted);
}

.ts-toc__list {
	margin: 0;
	padding: 0 var(--ts-space-5) var(--ts-space-5);
	list-style: none;
	counter-reset: ts-toc;
	display: grid;
	gap: var(--ts-space-1);
}

.ts-toc__item {
	counter-increment: ts-toc;
}

.ts-toc__link {
	display: flex;
	gap: var(--ts-space-2);
	padding: var(--ts-space-2) 0;
	color: var(--ts-color-text-muted);
	text-decoration: none;
	line-height: var(--ts-leading-snug);
	border-radius: var(--ts-radius-sm);
	transition: color var(--ts-transition-fast) var(--ts-ease-out);
}

.ts-toc__link::before {
	content: counter(ts-toc) ".";
	flex: 0 0 auto;
	color: var(--ts-color-primary);
	font-variant-numeric: tabular-nums;
	font-weight: var(--ts-weight-semibold);
}

.ts-toc__link:hover,
.ts-toc__link:focus-visible {
	color: var(--ts-color-link);
}

.ts-toc__link:focus-visible {
	outline: none;
	box-shadow: var(--ts-shadow-focus);
}

@media (min-width: 64em) {
	/* Below the breakpoint the inline copy carried the TOC; hide it now. */
	.ts-toc--inline {
		display: none;
	}

	.ts-toc--sidebar {
		display: block;
		position: sticky;
		top: calc(72px + var(--ts-space-5)); /* clear the sticky 72px header */
		padding: var(--ts-space-5);
		border: 1px solid var(--ts-color-border);
		border-radius: var(--ts-radius-md);
		background-color: var(--ts-color-surface);
		max-height: calc(100vh - 72px - var(--ts-space-8));
		overflow-y: auto;
	}
}

/* -----------------------------------------------------------------------------
 * 5. Entry content — typography for the rendered post body
 * -------------------------------------------------------------------------- */

.ts-article__content {
	font-size: var(--ts-text-lg);
	line-height: var(--ts-leading-relaxed);
	color: var(--ts-color-text);
}

.ts-article__content > * + * {
	margin-top: var(--ts-space-5);
}

.ts-article__content h2,
.ts-article__content h3,
.ts-article__content h4 {
	font-family: var(--ts-font-heading);
	color: var(--ts-color-heading);
	line-height: var(--ts-leading-snug);
	scroll-margin-top: calc(72px + var(--ts-space-5)); /* anchor offset under header */
}

.ts-article__content h2 {
	margin-top: var(--ts-space-10);
	font-size: var(--ts-text-2xl);
	font-weight: var(--ts-weight-bold);
}

.ts-article__content h3 {
	margin-top: var(--ts-space-8);
	font-size: var(--ts-text-xl);
	font-weight: var(--ts-weight-semibold);
}

.ts-article__content h4 {
	margin-top: var(--ts-space-6);
	font-size: var(--ts-text-lg);
	font-weight: var(--ts-weight-semibold);
}

.ts-article__content a {
	color: var(--ts-color-link);
	text-underline-offset: 0.2em;
}

.ts-article__content ul,
.ts-article__content ol {
	padding-left: var(--ts-space-6);
}

.ts-article__content li + li {
	margin-top: var(--ts-space-2);
}

.ts-article__content img,
.ts-article__content figure {
	border-radius: var(--ts-radius-md);
	max-width: 100%;
	height: auto;
}

.ts-article__content blockquote {
	margin-inline: 0;
	padding: var(--ts-space-4) var(--ts-space-6);
	border-left: 4px solid var(--ts-color-primary);
	background-color: var(--ts-color-surface-alt);
	border-radius: var(--ts-radius-sm);
	color: var(--ts-color-text-muted);
	font-style: italic;
}

.ts-article__content pre {
	padding: var(--ts-space-4);
	overflow-x: auto;
	background-color: var(--ts-color-surface-alt);
	border-radius: var(--ts-radius-md);
	font-family: var(--ts-font-mono);
	font-size: var(--ts-text-sm);
}

.ts-article__content code {
	font-family: var(--ts-font-mono);
	font-size: 0.9em;
}

/* -----------------------------------------------------------------------------
 * 6. Tags + page links
 * -------------------------------------------------------------------------- */

.ts-article__tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ts-space-3);
	margin-top: var(--ts-space-8);
	padding-top: var(--ts-space-6);
	border-top: 1px solid var(--ts-color-border);
}

.ts-article__tags-label {
	font-family: var(--ts-font-heading);
	font-weight: var(--ts-weight-semibold);
	color: var(--ts-color-heading);
}

.ts-article__tags-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ts-page-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ts-space-2);
	margin-top: var(--ts-space-6);
}

.ts-page-links__title {
	font-weight: var(--ts-weight-semibold);
	color: var(--ts-color-heading);
}

/* -----------------------------------------------------------------------------
 * 7. Pinterest CTA
 *    Pinterest brand red is scoped locally so it never enters the design tokens.
 * -------------------------------------------------------------------------- */

.ts-pin-cta {
	--ts-pinterest-red: #e60023;
	margin-top: var(--ts-space-8);
}

.ts-pin-cta__inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--ts-space-4);
	padding: var(--ts-space-6);
	background-color: var(--ts-color-surface);
	border: 1px solid var(--ts-color-border);
	border-radius: var(--ts-radius-lg);
	box-shadow: var(--ts-shadow-sm);
}

.ts-pin-cta__icon {
	display: inline-flex;
	color: var(--ts-pinterest-red);
}

.ts-pin-cta__content {
	flex: 1 1 auto;
}

.ts-pin-cta__title {
	margin: 0 0 var(--ts-space-2);
	font-family: var(--ts-font-heading);
	font-size: var(--ts-text-xl);
	font-weight: var(--ts-weight-semibold);
	color: var(--ts-color-heading);
}

.ts-pin-cta__text {
	margin: 0;
	color: var(--ts-color-text-muted);
}

/* Reuse .ts-btn geometry but paint it in Pinterest red for this one CTA. */
.ts-pin-cta__button {
	flex: 0 0 auto;
	gap: var(--ts-space-2);
	background-color: var(--ts-pinterest-red);
	border-color: var(--ts-pinterest-red);
	color: var(--ts-color-white);
}

.ts-pin-cta__button:hover,
.ts-pin-cta__button:focus-visible {
	background-color: #c8001f;
	border-color: #c8001f;
	color: var(--ts-color-white);
}

.ts-pin-cta__button-icon {
	display: inline-block;
}

@media (min-width: 48em) {
	.ts-pin-cta__inner {
		flex-direction: row;
		align-items: center;
	}
}

/* -----------------------------------------------------------------------------
 * 8. FAQ accordion (native <details>/<summary>, no JS)
 * -------------------------------------------------------------------------- */

.ts-faq {
	margin-top: var(--ts-space-10);
}

.ts-faq__list {
	display: grid;
	gap: var(--ts-space-3);
	margin-top: var(--ts-space-6);
}

.ts-faq__item {
	border: 1px solid var(--ts-color-border);
	border-radius: var(--ts-radius-md);
	background-color: var(--ts-color-surface);
	overflow: hidden;
}

.ts-faq__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ts-space-4);
	padding: var(--ts-space-4) var(--ts-space-5);
	cursor: pointer;
	font-family: var(--ts-font-heading);
	font-size: var(--ts-text-lg);
	font-weight: var(--ts-weight-semibold);
	color: var(--ts-color-heading);
	list-style: none;
}

.ts-faq__question::-webkit-details-marker {
	display: none;
}

.ts-faq__question:focus-visible {
	outline: none;
	box-shadow: var(--ts-shadow-focus);
	border-radius: var(--ts-radius-md);
}

.ts-faq__icon {
	flex: 0 0 auto;
	display: inline-flex;
	color: var(--ts-color-primary);
}

/* Plus turns into a minus when the item is open: hide the vertical stroke. */
.ts-faq__item[open] .ts-faq__icon-v {
	opacity: 0;
}

.ts-faq__answer {
	padding: 0 var(--ts-space-5) var(--ts-space-5);
	color: var(--ts-color-text-muted);
	line-height: var(--ts-leading-relaxed);
}

.ts-faq__answer p {
	margin: 0;
}

/* -----------------------------------------------------------------------------
 * 9. Related posts (continue organizing)
 * -------------------------------------------------------------------------- */

.ts-related {
	margin-top: var(--ts-space-12);
	background-color: var(--ts-color-surface-alt);
}

.ts-related__grid {
	margin-top: var(--ts-space-8);
}

/* -----------------------------------------------------------------------------
 * 10. Newsletter block
 * -------------------------------------------------------------------------- */

.ts-newsletter-block {
	margin-top: var(--ts-space-4);
}

/* Visually hide the honeypot without removing it from the DOM (bots still fill it). */
.ts-newsletter__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* -----------------------------------------------------------------------------
 * 11. Comments
 * -------------------------------------------------------------------------- */

.ts-article__comments {
	margin-top: var(--ts-space-12);
}

/* -----------------------------------------------------------------------------
 * 12. Reduced motion / forced colors
 * -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.ts-toc__summary-icon,
	.ts-toc__link {
		transition: none;
	}
}

@media (forced-colors: active) {
	.ts-quick-summary,
	.ts-toc--inline,
	.ts-toc--sidebar,
	.ts-faq__item,
	.ts-pin-cta__inner {
		border: 1px solid CanvasText;
	}

	.ts-quick-summary__bullet {
		border: 1px solid CanvasText;
	}

	.ts-faq__question:focus-visible,
	.ts-toc__summary:focus-visible,
	.ts-toc__link:focus-visible {
		outline: 2px solid CanvasText;
	}
}