/*
 * Prohori — article stylesheet.
 * Loaded on singular views only.
 */

.a-article {
	max-width: 100%;
	min-width: 0;
}

.a-article__head {
	display: flex;
	flex-direction: column;
	gap: var(--s3);
	max-width: var(--measure);
	margin-bottom: var(--s5);
}

.a-article__title {
	font-size: var(--fs-2xl);
	letter-spacing: -0.02em;
}

@media (min-width: 48rem) {
	.a-article__title { font-size: var(--fs-4xl); }
}

.a-article__dek {
	font-size: var(--fs-lg);
	line-height: 1.55;
	color: var(--ink-muted);
}

.lang-bn .a-article__dek {
	line-height: 1.8;
}

.a-article__figure {
	margin-bottom: var(--s5);
}

.a-article__image {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: var(--radius);
	background: var(--surface-2);
}

.a-article__caption,
.a-figure figcaption,
.wp-element-caption {
	margin-top: var(--s2);
	font-size: var(--fs-xs);
	color: var(--ink-faint);
	line-height: 1.5;
}

/* ---- Body copy ---------------------------------------------------- */

.a-article__body {
	max-width: var(--measure);
	font-size: var(--fs-base);
	line-height: var(--lh-base);
}

.a-article__body > * + * {
	margin-top: var(--s4);
}

.a-article__body p {
	line-height: inherit;
}

.a-article__body h2 {
	margin-top: var(--s6);
	font-size: var(--fs-xl);
}

.a-article__body h3 {
	margin-top: var(--s5);
	font-size: var(--fs-lg);
}

.a-article__body a {
	color: var(--accent);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.a-article__body a:hover {
	text-decoration-thickness: 2px;
}

.a-article__body ul,
.a-article__body ol {
	padding-inline-start: var(--s5);
}

.a-article__body li + li {
	margin-top: var(--s2);
}

.a-article__body blockquote {
	margin: var(--s6) 0;
	padding-inline-start: var(--s5);
	border-inline-start: 3px solid var(--accent);
	font-family: var(--font-heading);
	font-size: var(--fs-lg);
	line-height: 1.5;
	color: var(--ink);
}

.lang-bn .a-article__body blockquote {
	line-height: 1.75;
}

.a-article__body img,
.a-article__body figure {
	border-radius: var(--radius);
}

.a-article__body table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--fs-sm);
}

.a-article__body th,
.a-article__body td {
	padding: var(--s2) var(--s3);
	border: 1px solid var(--border);
	text-align: start;
}

.a-article__body pre {
	overflow-x: auto;
	padding: var(--s4);
	background: var(--surface-2);
	border-radius: var(--radius);
	font-size: var(--fs-sm);
}

.a-embed {
	position: relative;
	aspect-ratio: 16 / 9;
}

.a-embed iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	border-radius: var(--radius);
}

.a-article__credit {
	max-width: var(--measure);
	margin-top: var(--s5);
	font-size: var(--fs-sm);
	color: var(--ink-faint);
	font-style: italic;
}

.a-article__pages {
	display: flex;
	gap: var(--s2);
	margin-top: var(--s5);
	font-size: var(--fs-sm);
}

/* ---- Tags --------------------------------------------------------- */

.a-article__tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s2);
	max-width: var(--measure);
	margin-top: var(--s5);
	font-size: var(--fs-sm);
}

.a-article__tags-label {
	font-weight: 600;
	color: var(--ink-muted);
}

.a-article__tags a {
	padding: var(--s1) var(--s3);
	background: var(--surface-2);
	border-radius: 999px;
	font-size: var(--fs-xs);
	transition: background var(--speed), color var(--speed);
}

.a-article__tags a:hover {
	background: var(--accent);
	color: var(--accent-ink);
}

/* ---- Share -------------------------------------------------------- */

.c-share {
	display: flex;
	align-items: center;
	gap: var(--s2);
}

.c-share__label {
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ink-faint);
}

.lang-bn .c-share__label {
	text-transform: none;
	letter-spacing: 0;
}

.c-share__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	color: var(--ink-muted);
	transition: background var(--speed), color var(--speed), border-color var(--speed);
}

.c-share__link:hover {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--accent-ink);
}

.c-share__link.is-copied {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--accent-ink);
}

/* Brand marks are solid, so they need no stroke and read better a touch
   smaller than the outlined interface icons. */
.c-share__link .prohori-icon {
	width: 17px;
	height: 17px;
}

.c-share__link--facebook:hover { background: #1877f2; border-color: #1877f2; color: #fff; }
.c-share__link--x:hover        { background: #000;     border-color: #000;     color: #fff; }
.c-share__link--whatsapp:hover { background: #25d366;  border-color: #25d366;  color: #fff; }

.c-share__status {
	font-size: var(--fs-xs);
	color: var(--ink-muted);
	min-height: 1em;
}

.c-share__status:empty {
	display: none;
}

/* ---- Reading progress --------------------------------------------- */

.c-progress {
	position: fixed;
	top: 0;
	inset-inline: 0;
	height: 3px;
	z-index: var(--z-overlay);
	background: transparent;
	pointer-events: none;
}

.c-progress__bar {
	display: block;
	height: 100%;
	width: 100%;
	background: var(--accent);
	transform: scaleX(0);
	transform-origin: 0 50%;
}

/* ---- Translation prompt ------------------------------------------- */

.a-translation {
	display: flex;
	align-items: center;
	gap: var(--s2);
	max-width: var(--measure);
	margin-top: var(--s6);
	padding: var(--s3) var(--s4);
	background: var(--surface-2);
	border-inline-start: 3px solid var(--accent);
	border-radius: var(--radius);
	color: var(--ink-muted);
}

.a-translation__link {
	font-weight: 600;
	color: var(--ink);
}

.a-translation__link:hover {
	color: var(--accent);
	text-decoration: underline;
}

/* ---- Author box --------------------------------------------------- */

.a-author {
	display: flex;
	gap: var(--s4);
	max-width: var(--measure);
	margin-top: var(--s6);
	padding: var(--s5);
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
}

.a-author__avatar {
	flex: none;
	border-radius: 50%;
}

.a-author__name {
	font-size: var(--fs-lg);
}

.a-author__bio {
	margin-top: var(--s2);
	font-size: var(--fs-sm);
	color: var(--ink-muted);
}

/* ---- Prev / next -------------------------------------------------- */

.a-postnav {
	display: grid;
	gap: var(--s4);
	margin-top: var(--s6);
	padding-top: var(--s5);
	border-top: 1px solid var(--border);
}

@media (min-width: 40rem) {
	.a-postnav { grid-template-columns: 1fr 1fr; }
	.a-postnav__item--next { text-align: end; }
}

.a-postnav__label {
	display: block;
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ink-faint);
	margin-bottom: var(--s1);
}

.lang-bn .a-postnav__label {
	text-transform: none;
	letter-spacing: 0;
}

.a-postnav__title {
	font-family: var(--font-heading);
	font-size: var(--fs-md);
	font-weight: 600;
	line-height: 1.4;
}

.a-postnav__item:hover .a-postnav__title {
	color: var(--accent);
}

/* ---- Related ------------------------------------------------------ */

.a-related {
	margin-top: var(--s7);
}

.a-related__grid {
	display: grid;
	gap: var(--s5);
}

@media (min-width: 40rem) {
	.a-related__grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---- Comments ----------------------------------------------------- */

.c-comments {
	max-width: var(--measure);
	margin-top: var(--s7);
	padding-top: var(--s6);
	border-top: 1px solid var(--border);
}

.c-comments__title {
	font-size: var(--fs-xl);
	margin-bottom: var(--s5);
}

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

.c-comments__list .children {
	margin-inline-start: var(--s5);
	padding-inline-start: var(--s4);
	border-inline-start: 1px solid var(--border);
}

.c-comment {
	padding-block: var(--s4);
	border-bottom: 1px solid var(--border);
}

.c-comment__head {
	display: flex;
	align-items: center;
	gap: var(--s3);
	margin-bottom: var(--s3);
}

.c-comment__avatar {
	border-radius: 50%;
}

.c-comment__author {
	display: block;
	font-weight: 600;
}

.c-comment__date {
	font-size: var(--fs-xs);
	color: var(--ink-faint);
}

.c-comment__text {
	font-size: var(--fs-sm);
}

.c-comment__text > * + * {
	margin-top: var(--s3);
}

.c-comment__foot {
	margin-top: var(--s3);
	font-size: var(--fs-xs);
	font-weight: 600;
}

.c-comment__foot a:hover {
	color: var(--accent);
}

.c-comment__moderation {
	font-size: var(--fs-xs);
	color: var(--ink-faint);
	font-style: italic;
}

.comment-form {
	display: grid;
	gap: var(--s3);
	margin-top: var(--s6);
}

.comment-form label {
	display: block;
	margin-bottom: var(--s1);
	font-size: var(--fs-sm);
	font-weight: 600;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100%;
	padding: var(--s3);
	font: inherit;
	font-size: var(--fs-sm);
	color: var(--ink);
	background: var(--surface);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius);
}

.comment-form textarea {
	min-height: 140px;
	resize: vertical;
}

.comment-form .submit {
	justify-self: start;
	min-height: 44px;
	padding-inline: var(--s5);
	background: var(--accent);
	color: var(--accent-ink);
	border: 0;
	border-radius: var(--radius);
	font-weight: 600;
	cursor: pointer;
}

.comment-form .comment-form-cookies-consent {
	display: flex;
	align-items: center;
	gap: var(--s2);
	font-size: var(--fs-xs);
}

.comment-form .comment-form-cookies-consent label {
	margin: 0;
	font-weight: 400;
}

/* ---- Article head, meta and foot ---------------------------------- */

.a-article__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--s4);
	padding-block: var(--s3);
	border-block: 1px solid var(--border);
}

.a-article__meta .c-byline {
	gap: var(--s4);
}

.a-article__foot {
	display: flex;
	justify-content: flex-start;
	max-width: var(--measure);
	margin-top: var(--s6);
	padding-top: var(--s5);
	border-top: 1px solid var(--border);
}

/* ---- Sidebar rail -------------------------------------------------- */

.l-rail {
	min-width: 0;
}

.l-rail__inner {
	display: flex;
	flex-direction: column;
	gap: var(--s5);
}

@media (min-width: 64rem) {
	/* Sticky, but only as tall as the viewport, so a long rail can still be
	   scrolled through instead of being cut off. */
	.l-rail__inner {
		position: sticky;
		top: 88px;
		max-height: calc(100vh - 104px);
		overflow-y: auto;
		overscroll-behavior: contain;
		scrollbar-width: thin;
		padding-inline-end: 2px;
	}
}

.c-panel {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: var(--s4) var(--s4) var(--s2);
}

.c-panel__title {
	font-family: var(--font-body);
	font-size: var(--fs-sm);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink);
	padding-bottom: var(--s2);
	border-bottom: 2px solid var(--accent);
}

.lang-bn .c-panel__title {
	text-transform: none;
	letter-spacing: 0.01em;
	font-size: var(--fs-md);
}

.c-panel__list {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: none;
}

.c-panel__item {
	display: flex;
	gap: var(--s3);
	align-items: flex-start;
	padding-block: var(--s3);
	border-bottom: 1px solid var(--border);
}

.c-panel__item:last-child {
	border-bottom: 0;
}

.c-panel__media {
	flex: none;
	width: 84px;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 3px;
	background: var(--surface-2);
}

.c-panel__media .c-thumb__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.c-panel__rank {
	flex: none;
	width: 26px;
	font-family: var(--font-heading);
	font-size: var(--fs-xl);
	font-weight: 700;
	line-height: 1;
	color: var(--border-strong);
}

.c-panel--read .c-panel__item:first-child .c-panel__rank {
	color: var(--accent);
}

.c-panel__body {
	min-width: 0;
}

.c-panel__headline {
	font-size: var(--fs-sm);
	font-weight: 600;
	line-height: 1.4;
	font-family: var(--font-heading);
}

.lang-bn .c-panel__headline {
	line-height: 1.6;
}

.c-panel__headline a:hover {
	color: var(--accent);
}

.c-panel__date {
	display: block;
	margin-top: var(--s1);
	font-size: var(--fs-xs);
	color: var(--ink-faint);
}

.c-panel__tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s2);
	list-style: none;
	margin: var(--s3) 0 var(--s3);
	padding: 0;
}

.c-panel__tag {
	display: inline-flex;
	align-items: center;
	gap: var(--s2);
	min-height: 34px;
	padding: 0 var(--s3);
	border: 1px solid var(--border);
	border-radius: 999px;
	font-size: var(--fs-xs);
	font-weight: 600;
	transition: background var(--speed), color var(--speed), border-color var(--speed);
}

.c-panel__tag:hover {
	background: var(--eyebrow, var(--accent));
	border-color: var(--eyebrow, var(--accent));
	color: #fff;
}

.c-panel__tag-count {
	font-size: 11px;
	color: var(--ink-faint);
}

.c-panel__tag:hover .c-panel__tag-count {
	color: inherit;
}

.l-rail__widgets {
	display: flex;
	flex-direction: column;
	gap: var(--s5);
}

/* ---- Ad slots ------------------------------------------------------ */

.c-ad {
	display: block;
}

.c-ad__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: var(--ad-ratio, 300 / 250);
	overflow: hidden;
}

.c-ad__placeholder {
	background:
		repeating-linear-gradient(
			-45deg,
			var(--surface-2),
			var(--surface-2) 12px,
			var(--bg) 12px,
			var(--bg) 24px
		);
	border: 1px dashed var(--border-strong);
	border-radius: var(--radius);
	color: var(--ink-faint);
	font-size: var(--fs-xs);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.lang-bn .c-ad__placeholder {
	text-transform: none;
	letter-spacing: 0.02em;
}

.c-ad--article_end {
	max-width: var(--measure);
	margin-top: var(--s6);
}

/* A tall sidebar ad would dominate a short article; cap it and let the
   creative letterbox rather than stretching the rail. */
.c-ad--sidebar_mid .c-ad__inner {
	max-height: 600px;
}