/* ==========================================================================
   Pankaj Yogpeeth: post.css
   The blog article page (blog-details.php). Builds on blog.css (cover,
   breadcrumb, eyebrow, glass tokens, mint field, panels, buttons) and
   prose.css (the article body: plain elements styled by .pyp-prose, the
   same reading engine as the course page; prose_clean() in
   config/general.php strips every class and inline style from the post).
   ========================================================================== */

/* 1. Compact cover: title and byline, the poster whole beside them
   ========================================================================== */
.pyp-post-hero__grid {
	display: grid;
	gap: 22px;
	align-items: center;
}

.pyp-post-hero__copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	min-width: 0;
}

.pyp-post-hero .pyp-blog-eyebrow a { color: inherit; text-decoration: none; }
.pyp-post-hero .pyp-blog-eyebrow a:hover { color: var(--pyp-forest); }

.pyp-post-hero__title {
	margin: 0;
	font: 500 clamp(28px, 3vw, 46px)/1.12 var(--pyp-font-menu);
	letter-spacing: -0.015em;
	color: var(--pyp-forest);
	text-wrap: balance;
}

.pyp-post-hero__dek {
	max-width: 62ch;
	margin: 0;
	font: 400 clamp(15px, 1.15vw, 17px)/1.6 var(--pyp-font-sans);
	color: var(--pyp-ink-soft);
	text-wrap: pretty;
}

/* Byline: avatar, name, then date and reading time with the generated icons */
.pyp-post-byline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 14px;
	margin-top: 4px;
	padding: 8px 16px 8px 8px;
	border: var(--pyp-glass-edge);
	border-radius: 999px;
	background: var(--pyp-glass-bg);
	-webkit-backdrop-filter: var(--pyp-glass-blur);
	backdrop-filter: var(--pyp-glass-blur);
	box-shadow: var(--pyp-glass-shadow);
}

.pyp-post-byline__avatar {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--pyp-tile);
	box-shadow: 0 8px 16px -10px rgba(15, 59, 39, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.2);
	color: #fff;
	font: 600 13px/1 var(--pyp-font-sans);
	letter-spacing: 0.04em;
}

.pyp-post-byline__who { display: grid; gap: 2px; line-height: 1.15; }
.pyp-post-byline__who small { font: 600 10px/1 var(--pyp-font-sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--pyp-ink-soft); }
.pyp-post-byline__who b { font: 500 15px/1.2 var(--pyp-font-menu); color: var(--pyp-forest); }

.pyp-post-byline__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
	margin: 0;
	padding: 0 0 0 14px;
	border-left: 1px solid rgba(15, 59, 39, 0.12);
	list-style: none;
	font-size: 13px;
	color: var(--pyp-ink-soft);
}

.pyp-post-byline__facts li { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.pyp-post-byline__facts svg { width: 16px; height: 16px; fill: var(--pyp-green); }

/* The poster: a 16:9 frame for a 16:9 upload, so nothing is ever cut away */
.pyp-post-hero__poster {
	margin: 0;
	padding: 8px;
	border: var(--pyp-glass-edge);
	border-radius: 26px;
	background: var(--pyp-glass-bg);
	-webkit-backdrop-filter: var(--pyp-glass-blur);
	backdrop-filter: var(--pyp-glass-blur);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 30px 60px -32px rgba(15, 59, 39, 0.55);
}

.pyp-post-hero__poster img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: contain;
	border-radius: 19px;
	background: rgba(242, 246, 241, 0.8);
}

@media (min-width: 1100px) {
	.pyp-post-hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(32px, 3.5vw, 56px); }
}


/* 2. Article and sidebar
   ========================================================================== */
.pyp-post-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 18px;
}

.pyp-post-article { min-width: 0; }

/* The reading sheet: frosted, but near-opaque so long text stays easy on the eyes */
.pyp-post-sheet {
	padding: clamp(20px, 3.2vw, 48px);
	border: var(--pyp-glass-edge);
	border-radius: 28px;
	background: linear-gradient(160deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.78));
	-webkit-backdrop-filter: var(--pyp-glass-blur);
	backdrop-filter: var(--pyp-glass-blur);
	box-shadow: var(--pyp-glass-shadow);
}

/* Topics and sharing close the sheet */
.pyp-post-topics,
.pyp-post-share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 28px 0 0;
	padding-top: 20px;
	border-top: 1px solid rgba(15, 59, 39, 0.08);
}

.pyp-post-topics + .pyp-post-share { margin-top: 14px; padding-top: 0; border-top: 0; }

.pyp-post-topics span,
.pyp-post-share > span {
	margin-right: 6px;
	font: 600 11px/1 var(--pyp-font-sans);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--pyp-green);
}

.pyp-post-topics a {
	padding: 7px 12px;
	border-radius: 999px;
	background: rgba(29, 112, 68, 0.08);
	color: var(--pyp-forest);
	font: 500 13.5px/1 var(--pyp-font-menu);
	text-decoration: none;
}

.pyp-post-topics a:hover { background: var(--pyp-green); color: #fff; }

.pyp-post-share :is(a, button) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border: 1px solid rgba(15, 59, 39, 0.1);
	border-radius: 999px;
	background: #fff;
	color: var(--pyp-forest);
	font: 500 13.5px/1 var(--pyp-font-menu);
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--pyp-dur-fast) var(--pyp-ease-out), color var(--pyp-dur-fast) var(--pyp-ease-out), transform var(--pyp-dur-fast) var(--pyp-ease-out);
}

.pyp-post-share a { padding: 0; }
.pyp-post-share .bi { font-size: 16px; }
.pyp-post-share :is(a, button):hover { background: var(--pyp-green); color: #fff; }
.pyp-post-share :is(a, button):active { transform: scale(0.95); }
.pyp-post-share button.is-done { background: var(--pyp-green); color: #fff; }

/* Blocks after the sheet: helpful resources and the questions */
.pyp-post-block { margin-top: clamp(28px, 3vw, 44px); }
.pyp-post-block .pyp-blog-eyebrow { margin-bottom: 8px; }

.pyp-post-block__title {
	margin: 0 0 16px;
	font: 500 clamp(22px, 2vw, 30px)/1.15 var(--pyp-font-menu);
	letter-spacing: -0.015em;
	color: var(--pyp-forest);
}

.pyp-post-reads {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pyp-post-read {
	display: flex;
	align-items: center;
	gap: 12px;
	height: 100%;
	padding: 12px 16px 12px 12px;
	border: var(--pyp-glass-edge);
	border-radius: 20px;
	background: var(--pyp-glass-bg);
	-webkit-backdrop-filter: var(--pyp-glass-blur);
	backdrop-filter: var(--pyp-glass-blur);
	box-shadow: var(--pyp-glass-shadow);
	color: var(--pyp-forest);
	text-decoration: none;
	transition: transform 300ms var(--pyp-ease-out), box-shadow 300ms var(--pyp-ease-out);
}

.pyp-post-read__icon {
	display: grid;
	flex-shrink: 0;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: 13px;
	background: var(--pyp-tile);
	color: #fff;
}

.pyp-post-read__icon svg { width: 22px; height: 22px; fill: currentColor; }
.pyp-post-read__text { display: grid; gap: 3px; flex: 1; min-width: 0; }
.pyp-post-read__text small { font: 600 10px/1 var(--pyp-font-sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--pyp-green); }
.pyp-post-read__text b { font: 500 15px/1.35 var(--pyp-font-menu); color: var(--pyp-forest); }
.pyp-post-read > .bi { color: var(--pyp-green); transition: transform 200ms var(--pyp-ease-out); }

@media (hover: hover) and (pointer: fine) {
	a.pyp-post-read:hover { transform: translateY(-2px); box-shadow: var(--pyp-glass-shadow-lift); }
	a.pyp-post-read:hover > .bi { transform: translateX(3px); }
}

/* Questions: glass rows that open in place */
.pyp-post-faq { display: grid; gap: 10px; }

.pyp-post-faq details {
	border: var(--pyp-glass-edge);
	border-radius: 20px;
	background: var(--pyp-glass-bg);
	-webkit-backdrop-filter: var(--pyp-glass-blur);
	backdrop-filter: var(--pyp-glass-blur);
	box-shadow: var(--pyp-glass-shadow);
}

.pyp-post-faq summary {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px 18px;
	list-style: none;
	cursor: pointer;
}

.pyp-post-faq summary::-webkit-details-marker { display: none; }

.pyp-post-faq__n {
	display: grid;
	flex-shrink: 0;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: rgba(29, 112, 68, 0.1);
	color: var(--pyp-green);
	font: 600 12px/1 var(--pyp-font-sans);
	font-variant-numeric: tabular-nums;
}

.pyp-post-faq__q { flex: 1; font: 500 16.5px/1.4 var(--pyp-font-menu); color: var(--pyp-forest); }

.pyp-post-faq__icon {
	position: relative;
	flex-shrink: 0;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: #fff;
	box-shadow: var(--pyp-neu-raised);
}

.pyp-post-faq__icon::before,
.pyp-post-faq__icon::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 11px;
	height: 1.6px;
	border-radius: 2px;
	background: var(--pyp-green);
	transform: translate(-50%, -50%);
	transition: transform 300ms var(--pyp-ease-out);
}

.pyp-post-faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.pyp-post-faq details[open] .pyp-post-faq__icon::after { transform: translate(-50%, -50%) rotate(0deg); }
.pyp-post-faq details[open] .pyp-post-faq__n { background: var(--pyp-tile); color: #fff; }

.pyp-post-faq details > p {
	margin: 0;
	padding: 0 20px 18px 66px;
	font: 400 15.5px/1.7 var(--pyp-font-menu);
	color: var(--pyp-ink-soft);
}

/* Previous / next */
.pyp-post-pager {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
	gap: 12px;
	margin-top: clamp(28px, 3vw, 44px);
}

.pyp-post-pager__link {
	display: grid;
	gap: 6px;
	padding: 16px 18px;
	border: var(--pyp-glass-edge);
	border-radius: 20px;
	background: var(--pyp-glass-bg);
	-webkit-backdrop-filter: var(--pyp-glass-blur);
	backdrop-filter: var(--pyp-glass-blur);
	box-shadow: var(--pyp-glass-shadow);
	text-decoration: none;
	transition: transform 300ms var(--pyp-ease-out), box-shadow 300ms var(--pyp-ease-out);
}

.pyp-post-pager__link.is-next { text-align: right; justify-items: end; }
.pyp-post-pager__link small { display: inline-flex; align-items: center; gap: 6px; font: 600 10.5px/1 var(--pyp-font-sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--pyp-green); }
.pyp-post-pager__link b { display: -webkit-box; overflow: hidden; font: 500 16px/1.35 var(--pyp-font-menu); color: var(--pyp-forest); -webkit-box-orient: vertical; -webkit-line-clamp: 2; }

@media (hover: hover) and (pointer: fine) {
	.pyp-post-pager__link:hover { transform: translateY(-2px); box-shadow: var(--pyp-glass-shadow-lift); }
}

/* Sidebar: "On this page" with reading progress (post.js), then the invitation */
.pyp-post-toc { padding: 0; }
.pyp-post-toc details { display: flex; flex-direction: column; }

.pyp-post-toc summary {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 16px 18px;
	list-style: none;
	cursor: pointer;
}

.pyp-post-toc summary::-webkit-details-marker { display: none; }

.pyp-post-toc__title {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font: 500 16px/1 var(--pyp-font-menu);
	color: var(--pyp-forest);
}

.pyp-post-toc__title svg { width: 20px; height: 20px; fill: var(--pyp-green); }

.pyp-post-toc__count {
	padding: 4px 8px;
	border-radius: 999px;
	background: rgba(29, 112, 68, 0.1);
	color: var(--pyp-green);
	font: 600 11.5px/1 var(--pyp-font-sans);
	font-variant-numeric: tabular-nums;
}

.pyp-post-toc summary .bi { margin-left: auto; color: var(--pyp-ink-soft); font-size: 13px; transition: transform var(--pyp-dur) var(--pyp-ease-out); }
.pyp-post-toc details[open] summary .bi { transform: rotate(180deg); }

.pyp-post-toc__progress {
	position: absolute;
	right: 18px;
	bottom: 0;
	left: 18px;
	height: 2px;
	overflow: hidden;
	border-radius: 2px;
	background: rgba(15, 59, 39, 0.08);
}

.pyp-post-toc__progress i {
	display: block;
	height: 100%;
	background: linear-gradient(90deg, var(--pyp-green), var(--pyp-leaf));
	transform: scaleX(var(--pyp-read, 0));
	transform-origin: left center;
	transition: transform 160ms linear;
}

/* The index is a quiet reading timeline: a hairline down the left with a node per chapter.
   Chapters already read turn the thread green (post.js adds .is-read); the one being read
   gets a filled node with a soft halo and forest type. No boxes, no bars. */
.pyp-post-toc ol {
	--pyp-toc-node: 15px; /* centre of a link's first line, from its top */
	position: relative; /* offsetTop of the links is measured against the list (post.js) */
	display: grid;
	margin: 0;
	padding: 10px 14px 14px 12px;
	overflow-y: auto;
	overscroll-behavior: contain;
	list-style: none;
	scrollbar-width: thin;
	scrollbar-color: rgba(29, 112, 68, 0.25) transparent;
}

.pyp-post-toc ol a {
	position: relative;
	display: block;
	padding: 6px 4px 6px 26px;
	color: var(--pyp-ink-soft);
	font-size: 13.5px;
	line-height: 1.35;
	text-decoration: none;
	transition: color 240ms var(--pyp-ease-out);
}

/* The thread */
.pyp-post-toc ol a::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 8px;
	width: 1.5px;
	background: rgba(15, 59, 39, 0.1);
	transition: background-color 400ms var(--pyp-ease-out);
}

.pyp-post-toc ol li:first-child a::before { top: var(--pyp-toc-node); }
.pyp-post-toc ol li:last-child a::before { bottom: calc(100% - var(--pyp-toc-node)); }

/* The node */
.pyp-post-toc ol a::after {
	content: '';
	position: absolute;
	top: calc(var(--pyp-toc-node) - 4.5px);
	left: calc(8.75px - 4.5px);
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #fbfdf9;
	box-shadow: inset 0 0 0 1.5px rgba(15, 59, 39, 0.22);
	transition: background-color 300ms var(--pyp-ease-out), box-shadow 300ms var(--pyp-ease-out), transform 300ms var(--pyp-ease-out);
}

.pyp-post-toc ol a em {
	display: -webkit-box;
	overflow: hidden;
	font-style: normal;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.pyp-post-toc ol a:hover { color: var(--pyp-forest); }
.pyp-post-toc ol a:hover::after { box-shadow: inset 0 0 0 1.5px var(--pyp-green); }
.pyp-post-toc ol a:focus-visible { outline: 2px solid var(--pyp-green); outline-offset: 2px; border-radius: 6px; }

/* Read: the thread and node fill in */
.pyp-post-toc ol a.is-read::before { background: var(--pyp-green); }
.pyp-post-toc ol a.is-read::after { background: var(--pyp-green); box-shadow: none; transform: scale(0.72); }

/* Being read: the thread runs green down to a filled node with a halo */
.pyp-post-toc ol a[aria-current] { color: var(--pyp-forest); font-weight: 600; }
.pyp-post-toc ol a[aria-current]::before { background: linear-gradient(to bottom, var(--pyp-green) var(--pyp-toc-node), rgba(15, 59, 39, 0.1) var(--pyp-toc-node)); }
.pyp-post-toc ol a[aria-current]::after {
	background: var(--pyp-green);
	box-shadow: 0 0 0 4px rgba(29, 112, 68, 0.14), 0 0 0 8px rgba(156, 207, 104, 0.12);
	transform: scale(1.1);
}

.pyp-post-invite__actions { display: flex; align-items: center; gap: 10px; }

.pyp-post-invite__wa {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border: var(--pyp-glass-edge);
	border-radius: 50%;
	background: #fff;
	box-shadow: var(--pyp-neu-raised);
	color: #1a9e55;
	font-size: 19px;
	transition: transform var(--pyp-dur-fast) var(--pyp-ease-out);
}

.pyp-post-invite__wa:hover { color: #128c4a; transform: translateY(-2px); }

/* Desktop: two columns, the sidebar sticks (Canvas sticky-sidebar-wrap, no CSS sticky) */
@media (min-width: 992px) {
	.pyp-post-layout {
		grid-template-columns: minmax(0, 1fr) clamp(290px, 24vw, 350px);
		column-gap: clamp(28px, 3vw, 48px);
		align-items: start;
	}

	.pyp-post-rail { display: block; }
	.pyp-post-rail .pyp-blog-panel + .pyp-blog-panel { margin-top: 16px; }
}

/* Below 992px the sidebar dissolves: the index (folded) above the article, the invitation after it */
@media (max-width: 991.98px) {
	.pyp-post-rail,
	.pyp-post-rail > .scwStickySidebar { display: contents; }

	.pyp-post-toc { order: 1; }
	.pyp-post-article { order: 2; }
	.pyp-post-invite { order: 3; }
}


/* 3. Keep reading: three glass tiles with whole posters
   ========================================================================== */
.pyp-post-more {
	padding-block: clamp(32px, 4vw, 60px);
	background: linear-gradient(180deg, #f6f9f1, #eef5e7);
	border-top: 1px solid rgba(255, 255, 255, 0.8);
}

.pyp-post-more__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px 20px;
	margin-bottom: 20px;
}

.pyp-post-more__head .pyp-blog-eyebrow { margin-bottom: 8px; }
.pyp-post-more__head .pyp-post-block__title { margin: 0; }

.pyp-post-more__all {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 0;
	font: 500 15px/1 var(--pyp-font-menu);
	color: var(--pyp-green);
	text-decoration: none;
}

.pyp-post-more__all .bi { transition: transform 200ms var(--pyp-ease-out); }
.pyp-post-more__all:hover .bi { transform: translateX(3px); }

.pyp-post-more__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); /* three tiles share the full width */
	gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pyp-post-tile {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 7px;
	border: var(--pyp-glass-edge);
	border-radius: 22px;
	background: var(--pyp-glass-bg);
	-webkit-backdrop-filter: var(--pyp-glass-blur);
	backdrop-filter: var(--pyp-glass-blur);
	box-shadow: var(--pyp-glass-shadow);
	transition: transform 450ms var(--pyp-ease-out), box-shadow 450ms var(--pyp-ease-out);
}

.pyp-post-tile__media { display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 16px; background: rgba(242, 246, 241, 0.8); }
.pyp-post-tile__media img { display: block; width: 100%; height: 100%; object-fit: contain; transition: transform 1000ms var(--pyp-ease-out); }
.pyp-post-tile__body { display: grid; gap: 6px; padding: 12px 10px 8px; }
.pyp-post-tile__body small { font-size: 12px; color: var(--pyp-ink-soft); }
.pyp-post-tile h3 { display: -webkit-box; margin: 0; overflow: hidden; font: 500 17px/1.32 var(--pyp-font-menu); color: var(--pyp-forest); -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.pyp-post-tile:has(.pyp-blog-link:focus-visible) { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--pyp-green); }

@media (hover: hover) and (pointer: fine) {
	.pyp-post-tile:hover { transform: translateY(-4px); box-shadow: var(--pyp-glass-shadow-lift); }
	.pyp-post-tile:hover img { transform: scale(1.03); }
	.pyp-post-tile:hover h3 { color: var(--pyp-green); }
}


/* 4. Small screens and reduced motion
   ========================================================================== */
@media (max-width: 767.98px) {
	.pyp-post-byline { border-radius: 22px; padding: 8px 12px 8px 8px; }
	.pyp-post-byline__facts { width: 100%; padding: 8px 0 0; border-left: 0; border-top: 1px solid rgba(15, 59, 39, 0.1); }
	.pyp-post-sheet { border-radius: 22px; }
	.pyp-post-faq details > p { padding-left: 20px; }
	.pyp-post-share > span { width: 100%; margin-bottom: 4px; }
}

@media (prefers-reduced-motion: reduce) {
	.pyp-post-read,
	.pyp-post-pager__link,
	.pyp-post-tile,
	.pyp-post-tile__media img,
	.pyp-post-faq__icon::after,
	.pyp-post-toc__progress i,
	.pyp-post-toc ol a,
	.pyp-post-toc ol a::before,
	.pyp-post-toc ol a::after { transition: none; }
}