/* ==========================================================================
   Pringomart — design system.

   Ported from the Laravel project's resources/css/app.css + tailwind.config.js,
   which is the design source of truth. Token values are carried across exactly;
   only the delivery changes (Tailwind utilities → plain CSS on the theme's
   existing class names).

   Loaded LAST so it owns the palette. The legacy token names used throughout
   main.css and home.css are re-pointed at these tokens in section 3, which
   re-themes every component already written without touching their rules.

   Colours are stored as space-separated RGB triplets, exactly as in the source,
   so any value can be used at partial opacity with rgb(var(--x) / 0.4).

   1. Public palette (light)
   2. Public palette (dark)
   3. Legacy alias bridge
   4. Scale: radius, shadow, type, spacing
   5. Base
   6. Card system
   7. Utilities
   ========================================================================== */

/* 1. Public palette — light ----------------------------------------------- */

:root {
	/* Brand ramp. --brand-600 is the logo blue. */
	--brand-50: 239 247 253;
	--brand-100: 217 237 250;
	--brand-200: 179 218 244;
	--brand-300: 124 192 234;
	--brand-400: 56 160 220;
	--brand-500: 13 132 201;
	--brand-600: 3 115 184;
	--brand-700: 4 94 151;
	--brand-800: 9 78 123;
	--brand-900: 13 65 101;

	/* The logo's brushed-silver frame, used sparingly. */
	--accent-50: 244 246 247;
	--accent-100: 229 233 235;
	--accent-400: 154 161 166;
	--accent-500: 131 131 131;
	--accent-600: 107 111 114;
	--accent-700: 85 89 92;

	/* Neutral surfaces and text. */
	--surface: 255 255 255;
	--surface-muted: 247 249 250;
	--surface-raised: 255 255 255;
	--line: 227 233 236;
	--ink: 17 32 38;
	--ink-muted: 89 106 114;
	--ink-subtle: 134 150 158;

	--success: 16 138 94;
	--danger: 200 54 54;

	/* Hero gradient — deliberately outside the brand ramp, so the logo blue
	   stays reserved for interactive elements. Deep violet → coral. */
	--hero-1: 88 28 152;
	--hero-2: 150 40 173;
	--hero-3: 214 62 146;
	--hero-4: 248 124 88;

	/* Footer: fixed dark navy in both themes, an anchor at the end of the
	   page, so it does not follow the surface tokens. */
	--footer-bg: 20 30 44;
	--footer-ink: 232 238 245;
	--footer-muted: 156 172 190;
	--footer-line: 46 62 84;

	/* Semantic aliases — the handles the site is re-themed by. */
	--brand-primary: var(--brand-600);
	--brand-primary-dark: var(--brand-800);
	--brand-primary-light: var(--brand-50);
	--brand-accent: var(--accent-500);
	--brand-soft: var(--brand-100);

	--text-primary: var(--ink);
	--text-secondary: var(--ink-muted);
	--border: var(--line);
}

/* 2. Public palette — dark ------------------------------------------------ */

/*
 * The source uses a `.dark` class on <html>; this theme's dark-mode module
 * uses [data-theme="dark"]. Both are honoured so neither system has to change
 * and a child theme can use either.
 */
:root[data-theme="dark"],
html.dark {
	--surface: 12 20 24;
	--surface-muted: 17 27 32;
	--surface-raised: 22 33 39;
	--line: 38 52 59;
	--ink: 236 243 245;
	--ink-muted: 156 175 183;
	--ink-subtle: 118 137 145;

	/* The aliases re-resolve through the tokens above; only the ones that
	   must shift are restated. */
	--brand-primary: var(--brand-400);
	--brand-primary-dark: var(--brand-300);
	--brand-primary-light: var(--brand-900);
	--brand-soft: var(--brand-800);

	color-scheme: dark;
}

/* 3. Legacy alias bridge --------------------------------------------------- */

/*
 * main.css and home.css were written against an older hex-based token set.
 * Rather than rewriting ~2,000 declarations, those names are re-pointed here
 * at the ported palette — so every existing component adopts the Laravel
 * colours immediately, and new markup can use the tokens above directly.
 */
:root {
	--bg-primary: rgb(var(--surface));
	--bg-secondary: rgb(var(--surface-muted));
	--bg-card: rgb(var(--surface-raised));
	--border-color: rgb(var(--line));

	--accent-color: rgb(var(--brand-primary));
	--accent-hover: rgb(var(--brand-primary-dark));
	--secondary-color: rgb(var(--brand-accent));

	--success-color: rgb(var(--success));
	--danger-color: rgb(var(--danger));
	--warning-color: 234 179 8;
	--online-color: rgb(var(--success));

	/* The header follows the surface; the footer is the fixed navy anchor. */
	--header-bg: rgb(var(--surface-raised));
	--header-text: rgb(var(--ink));
	--header-border: rgb(var(--line));
	--nav-bg: rgb(var(--footer-bg));
	--nav-text: rgb(var(--footer-ink));
	--footer-bg-color: rgb(var(--footer-bg));
}

/* --text-primary / --text-secondary are triplets in the ported system but
   were plain colours in the legacy one, so the two consumers are separated. */
:root {
	--text-muted: rgb(var(--ink-subtle));
}

body.pm-body,
.pm-body {
	color: rgb(var(--ink));
	background: rgb(var(--surface-muted));
}

/* Legacy rules that read var(--text-primary) directly as a colour. */
.pm-body :where(h1, h2, h3, h4, h5, h6) {
	color: rgb(var(--ink));
}

/* 4. Scale ----------------------------------------------------------------- */

:root {
	/* tailwind.config.js → borderRadius */
	--radius-card: 0.875rem;
	--radius-pill: 9999px;
	--radius-sm: 0.5rem;
	--radius: 0.75rem;
	--radius-lg: 1rem;
	--card-radius: var(--radius-card);

	/* tailwind.config.js → boxShadow */
	--shadow-card: 0 1px 2px 0 rgb(15 23 42 / 0.04), 0 1px 3px 0 rgb(15 23 42 / 0.06);
	--shadow-card-hover: 0 10px 24px -8px rgb(15 23 42 / 0.15);
	--shadow-popover: 0 12px 32px -8px rgb(15 23 42 / 0.2);

	--shadow-sm: var(--shadow-card);
	--shadow-md: var(--shadow-card-hover);
	--shadow-lg: var(--shadow-popover);
	--card-shadow: var(--shadow-card);

	/* maxWidth.shell — the container. */
	--container: 80rem;
	--prose: 44rem;

	/* transitionDuration.DEFAULT */
	--transition: 150ms;
	--dur-fast: 150ms;
	--dur-slow: 500ms;
	--ease: cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme="dark"],
html.dark {
	/* Shadows need more weight to read on dark surfaces. */
	--shadow-card: 0 1px 2px 0 rgb(0 0 0 / 0.4), 0 1px 3px 0 rgb(0 0 0 / 0.5);
	--shadow-card-hover: 0 10px 24px -8px rgb(0 0 0 / 0.6);
	--shadow-popover: 0 12px 32px -8px rgb(0 0 0 / 0.65);
}

/* 5. Base ------------------------------------------------------------------ */

/*
 * Bengali first: both families carry the full conjunct set and Latin glyphs,
 * so mixed Bengali/English text stays consistent in one run.
 */
body.pm-body {
	font-family: "Hind Siliguri", "Noto Sans Bengali", "Inter", "SolaimanLipi",
		ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	font-size: 1rem;
	line-height: 1.85; /* fontSize.body — Bengali needs more leading */
	-webkit-text-size-adjust: 100%;
}

/* Nothing should ever cause a sideways scroll on a phone. */
html,
body.pm-body {
	overflow-x: clip;
}

:focus-visible {
	outline: 2px solid rgb(var(--brand-500));
	outline-offset: 2px;
}

.pm-container {
	max-width: var(--container);
}

/* The source's type scale. Bengali leading pairs, not Latin ones. */
.pm-text-body-sm { font-size: 0.9375rem; line-height: 1.8; }
.pm-text-body    { font-size: 1rem;      line-height: 1.85; }
.pm-text-body-lg { font-size: 1.0625rem; line-height: 1.9; }
.pm-text-article { font-size: 1.125rem;  line-height: 1.95; }

.pm-prose {
	font-size: 1.125rem;
	line-height: 1.95;
	max-width: none;
}

/* 6. Card system ----------------------------------------------------------- */

/*
 * Ported from PostCard.jsx. The standard vertical card: image, category pill,
 * clamped title, clamped excerpt, and a meta row pinned to the foot of the card
 * so a grid of cards stays aligned whatever the excerpt's length.
 */
.pm-card,
.pm-entry {
	background: rgb(var(--surface-raised));
	border: 1px solid rgb(var(--line));
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-card);
}

.pm-entry {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	transition: transform 300ms var(--ease), border-color 300ms var(--ease),
		box-shadow 300ms var(--ease);
}

.pm-entry:hover {
	/* hover:-translate-y-0.5 */
	transform: translateY(-2px);
	border-color: rgb(var(--brand-primary) / 0.4);
	box-shadow: var(--shadow-card-hover);
}

.pm-entry__thumb {
	display: block;
	overflow: hidden;
}

.pm-entry__img {
	display: block;
	width: 100%;
	height: 12rem; /* h-48 */
	object-fit: cover;
	transition: transform 500ms var(--ease);
}

@media (min-width: 640px) {
	.pm-entry__img {
		height: 13rem; /* sm:h-52 */
	}
}

.pm-entry:hover .pm-entry__img {
	transform: scale(1.05);
}

.pm-entry__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 0;
	padding: 1.25rem; /* p-5 */
}

@media (min-width: 640px) {
	.pm-entry__body {
		padding: 1.5rem; /* sm:p-6 */
	}
}

/* Category pill: brand-50 fill, brand-800 text. */
.pm-entry .pm-badge--cat,
.pm-chip--cat {
	position: static;
	align-self: flex-start;
	margin-bottom: 0.625rem;
	padding: 0.125rem 0.625rem;
	background: rgb(var(--brand-50));
	border-radius: var(--radius-pill);
	color: rgb(var(--brand-800));
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.6;
	text-transform: none;
	letter-spacing: 0;
	box-shadow: none;
}

.pm-entry .pm-badge--cat:hover {
	background: rgb(var(--brand-100));
	color: rgb(var(--brand-800));
}

.pm-entry__title {
	margin: 0;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.375; /* leading-snug */
	letter-spacing: 0;
	min-height: 0;
}

@media (min-width: 640px) {
	.pm-entry__title {
		font-size: 1.125rem; /* sm:text-lg */
	}
}

.pm-entry__title a {
	color: rgb(var(--ink));
	background-image: none;
	transition: color var(--dur-fast) var(--ease);
}

.pm-entry:hover .pm-entry__title a {
	color: rgb(var(--brand-primary-dark));
}

.pm-entry__excerpt {
	margin: 0.5rem 0 0;
	color: rgb(var(--ink-muted));
	font-size: 0.9375rem;
	line-height: 1.8;
}

/* The meta row shares the bottom with the save control. */
.pm-entry__author {
	margin-top: 0.75rem;
	font-size: 0.8125rem;
	color: rgb(var(--ink-muted));
}

.pm-entry__stats {
	margin-top: auto;
	padding-top: 1rem;
	border-top: 0;
	color: rgb(var(--ink-subtle));
	font-size: 0.8125rem;
}

/* 7b. Header ---------------------------------------------------------------
   Ported from SiteHeader.jsx. Three zones; below `lg` the navigation becomes
   a drawer trigger and the logo moves to the centre. Sticky rather than fixed,
   so hiding on scroll never leaves a gap or shifts the page.
   -------------------------------------------------------------------------- */

:root {
	--header-h: 64px;
	--header-h-mobile: 64px;
}

.pm-header {
	position: sticky;
	top: 0;
	z-index: 40;
	transition: transform 300ms var(--ease);
}

.pm-header[data-hidden="1"] {
	transform: translateY(-100%);
}

.pm-header__bar {
	background: rgb(var(--surface) / 0.95);
	border-bottom: 1px solid rgb(var(--line));
	color: rgb(var(--ink));
}

/* A translucent bar is only safe where it can blur what passes under it. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.pm-header__bar {
		background: rgb(var(--surface) / 0.85);
		-webkit-backdrop-filter: blur(12px);
		backdrop-filter: blur(12px);
	}
}

.pm-header__row {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	min-height: var(--header-h-mobile);
}

@media (min-width: 640px) {
	.pm-header__row {
		gap: 0.75rem;
	}
}

@media (min-width: 1024px) {
	.pm-header__row {
		min-height: var(--header-h);
	}
}

/* The round utility button: one size for every control in the bar. */
.pm-iconbtn {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	background: none;
	border: 0;
	border-radius: var(--radius-pill);
	color: rgb(var(--ink-muted));
	transition: background-color 200ms var(--ease), color 200ms var(--ease);
}

.pm-iconbtn:hover {
	background: rgb(var(--surface-muted));
	color: rgb(var(--brand-primary));
}

@media (min-width: 640px) {
	.pm-iconbtn {
		width: 2.5rem;
		height: 2.5rem;
	}
}

/* Logo: centred below lg, inline-start from lg. */
.pm-header__brand {
	display: flex;
	flex: 1 1 auto;
	min-width: 0;
	justify-content: center;
}

.pm-header__brand .pm-logo {
	color: rgb(var(--ink));
	font-size: 1.15rem;
	font-weight: 800;
	letter-spacing: -0.02em;
}

.pm-header__brand .pm-logo__img {
	max-height: 28px;
	width: auto;
}

@media (min-width: 1024px) {
	.pm-header__brand {
		flex: 0 0 auto;
		justify-content: flex-start;
	}

	.pm-header__brand .pm-logo__img {
		max-height: 40px;
	}
}

/* Primary navigation: wide layout only. */
.pm-header .pm-nav {
	display: none;
}

@media (min-width: 1024px) {
	.pm-header .pm-nav {
		display: flex;
		flex: 1 1 auto;
		align-items: center;
		justify-content: center;
		min-width: 0;
	}
}

.pm-header .pm-nav__list {
	display: flex;
	align-items: center;
	gap: 0.125rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pm-header .pm-nav__list > li {
	position: relative;
}

.pm-header .pm-nav__list > li > a {
	display: block;
	padding: 0.5rem 0.875rem;
	border-radius: var(--radius-pill);
	color: rgb(var(--ink-muted));
	font-size: 0.875rem;
	font-weight: 600;
	white-space: nowrap;
	transition: background-color 200ms var(--ease), color 200ms var(--ease);
}

.pm-header .pm-nav__list > li > a:hover {
	background: rgb(var(--surface-muted));
	color: rgb(var(--brand-primary));
}

.pm-header .pm-nav__list > .current-menu-item > a,
.pm-header .pm-nav__list > .current-menu-parent > a {
	background: rgb(var(--brand-primary-light));
	color: rgb(var(--brand-primary-dark));
}

/* Utilities. */
.pm-header__actions {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 0.25rem;
}

@media (min-width: 640px) {
	.pm-header__actions {
		gap: 0.375rem;
	}
}

/* Guest controls. */
.pm-btn-login {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	background: rgb(var(--brand-primary));
	border-radius: var(--radius-pill);
	color: #fff;
	font-size: 0.875rem;
	font-weight: 700;
	transition: background-color 200ms var(--ease);
}

.pm-btn-login:hover {
	background: rgb(var(--brand-primary-dark));
	color: #fff;
}

.pm-btn-login__label {
	display: none;
}

/* Below `sm` there is no room for the logo and a labelled button side by
   side, so the login control becomes an icon of the same touch size. */
@media (min-width: 640px) {
	.pm-btn-login {
		width: auto;
		height: 2.5rem;
		padding-inline: 1.25rem;
	}

	.pm-btn-login__label {
		display: inline;
	}

	.pm-btn-login__icon {
		display: none;
	}
}

.pm-btn-ghost {
	display: none;
}

@media (min-width: 640px) {
	.pm-btn-ghost {
		display: inline-flex;
		align-items: center;
		height: 2.5rem;
		padding-inline: 1rem;
		border: 1px solid rgb(var(--line));
		border-radius: var(--radius-pill);
		color: rgb(var(--ink-muted));
		font-size: 0.875rem;
		font-weight: 700;
		transition: border-color 200ms var(--ease), color 200ms var(--ease);
	}

	.pm-btn-ghost:hover {
		border-color: rgb(var(--brand-primary));
		color: rgb(var(--brand-primary));
	}
}

/* Account control. */
.pm-usermenu {
	position: relative;
}

.pm-usermenu__btn {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.25rem 0.25rem 0.25rem 0.625rem;
	background: none;
	border: 0;
	border-radius: var(--radius-pill);
	color: rgb(var(--ink));
	font-size: 0.875rem;
	font-weight: 500;
	transition: background-color 200ms var(--ease);
}

.pm-usermenu__btn:hover {
	background: rgb(var(--surface-muted));
}

.pm-usermenu__name {
	display: none;
	max-width: 7rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

@media (min-width: 1280px) {
	.pm-usermenu__name {
		display: block;
	}
}

/* Popovers: the account menu and the notification panel share one shell. */
.pm-pop {
	position: absolute;
	top: 100%;
	right: 0;
	z-index: 50;
	margin-top: 0.5rem;
	width: 14rem;
	overflow: hidden;
	background: rgb(var(--surface-raised));
	border: 1px solid rgb(var(--line));
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-popover);
}

.pm-notify__panel {
	width: min(21rem, calc(100vw - 2rem));
}

.pm-pop__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	padding: 0.75rem 1rem;
	border-bottom: 1px solid rgb(var(--line));
}

.pm-pop__head--stack {
	display: block;
}

.pm-usermenu__title {
	margin: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 0.875rem;
	font-weight: 600;
	color: rgb(var(--ink));
}

.pm-usermenu__sub {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	margin: 0.25rem 0 0;
	font-size: 0.75rem;
	color: rgb(var(--ink-muted));
}

.pm-pop__list {
	padding-block: 0.25rem;
}

.pm-pop__list a {
	display: block;
	padding: 0.5rem 1rem;
	color: rgb(var(--ink-muted));
	font-size: 0.875rem;
	transition: background-color 200ms var(--ease), color 200ms var(--ease);
}

.pm-pop__list a:hover {
	background: rgb(var(--surface-muted));
	color: rgb(var(--ink));
}

.pm-pop__foot {
	padding-block: 0.25rem;
	border-top: 1px solid rgb(var(--line));
}

.pm-pop__danger {
	display: block;
	width: 100%;
	padding: 0.5rem 1rem;
	color: rgb(var(--danger));
	font-size: 0.875rem;
	font-weight: 600;
	text-align: start;
	transition: background-color 200ms var(--ease);
}

.pm-pop__danger:hover {
	background: rgb(var(--surface-muted));
	color: rgb(var(--danger));
}

/* Collapsible search panel, below the bar. */
.pm-searchpanel {
	overflow: hidden;
	max-height: 0;
	opacity: 0;
	border-top: 0 solid rgb(var(--line));
	transition: max-height 200ms var(--ease), opacity 200ms var(--ease);
}

/* `hidden` is removed by the script before the height animates, so the panel
   can transition rather than appear instantly. */
.pm-searchpanel[hidden] {
	display: block;
}

.pm-searchpanel.is-open {
	max-height: 14rem;
	opacity: 1;
	border-top-width: 1px;
}

.pm-searchpanel__form {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding-block: 0.75rem;
}

.pm-searchpanel__field {
	position: relative;
	flex: 1 1 auto;
	display: block;
}

.pm-searchpanel__icon {
	position: absolute;
	top: 50%;
	inset-inline-start: 0.875rem;
	transform: translateY(-50%);
	color: rgb(var(--ink-subtle));
	pointer-events: none;
}

.pm-searchpanel__input {
	width: 100%;
	padding: 0.625rem 1rem 0.625rem 2.75rem;
	background: rgb(var(--surface-muted));
	border: 1px solid rgb(var(--line));
	border-radius: var(--radius-pill);
	color: rgb(var(--ink));
	font-size: 0.875rem;
}

.pm-searchpanel__input::placeholder {
	color: rgb(var(--ink-subtle));
}

.pm-searchpanel__input:focus {
	background: rgb(var(--surface));
	border-color: rgb(var(--brand-primary));
	outline: none;
}

.pm-btn-search {
	flex: 0 0 auto;
	padding: 0.625rem 1.25rem;
	background: rgb(var(--brand-primary));
	border: 0;
	border-radius: var(--radius-pill);
	color: #fff;
	font-size: 0.875rem;
	font-weight: 700;
	transition: background-color 200ms var(--ease);
}

.pm-btn-search:hover {
	background: rgb(var(--brand-primary-dark));
}

/* Mega panel for the category item. */
.pm-has-mega { position: static; }

.pm-header .pm-nav { position: relative; }

.pm-mega {
	position: absolute;
	top: calc(100% + 0.5rem);
	left: 50%;
	transform: translate(-50%, 6px);
	z-index: 50;
	width: min(44rem, calc(100vw - 3rem));
	padding: 0.75rem;
	background: rgb(var(--surface-raised));
	border: 1px solid rgb(var(--line));
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-popover);
	opacity: 0;
	visibility: hidden;
	transition: opacity 160ms var(--ease), transform 160ms var(--ease), visibility 160ms var(--ease);
}

.pm-has-mega:hover > .pm-mega,
.pm-has-mega:focus-within > .pm-mega {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
}

.pm-mega__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.125rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pm-mega__item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0.625rem;
	border-radius: var(--radius-sm);
	color: rgb(var(--ink));
	font-size: 0.875rem;
	font-weight: 500;
	transition: background-color 150ms var(--ease), color 150ms var(--ease);
}

.pm-mega__item:hover {
	background: rgb(var(--surface-muted));
	color: rgb(var(--brand-primary-dark));
}

.pm-mega__dot {
	flex: 0 0 0.5rem;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: var(--pm-cat-color, rgb(var(--brand-primary)));
}

.pm-mega__name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pm-mega__count {
	margin-inline-start: auto;
	color: rgb(var(--ink-subtle));
	font-size: 0.75rem;
}

/* 7b-ii. Announcement strip -------------------------------------------------
   Ported from NoticeBar.jsx. One row from `md` up that never wraps; below it
   the message takes a line of its own and the three parts stack centred, so
   the bar grows to fit rather than squeezing onto one line.
   -------------------------------------------------------------------------- */

.pm-announce {
	background: linear-gradient(
		to right,
		rgb(var(--brand-primary)),
		rgb(var(--brand-primary-dark)),
		rgb(var(--brand-primary))
	);
	border-bottom: 1px solid rgb(var(--line));
	color: #fff;
}

.pm-announce__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.625rem 0.5rem;
	padding-block: 0.75rem;
}

@media (min-width: 640px) {
	.pm-announce__row {
		gap: 0.625rem 0.75rem;
	}
}

@media (min-width: 768px) {
	.pm-announce__row {
		flex-wrap: nowrap;
		gap: 0.75rem;
		padding-block: 0.625rem;
		/* Guarantees the row can never push the bar wider than the viewport,
		   however long the message gets. */
		overflow: hidden;
	}
}

.pm-announce__tag {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 0.375rem;
	padding: 0.125rem 0.625rem;
	background: rgb(255 255 255 / 0.2);
	border-radius: var(--radius-pill);
	color: #fff;
	font-size: 0.6875rem;
	font-weight: 700;
	white-space: nowrap;
}

.pm-announce__text {
	width: 100%;
	min-width: 0;
	margin: 0;
	color: rgb(255 255 255 / 0.95);
	font-size: 0.75rem;
	line-height: 1.625;
	text-align: center;
}

@media (min-width: 640px) {
	.pm-announce__tag {
		font-size: 0.75rem;
	}

	.pm-announce__text {
		font-size: 0.9375rem;
		line-height: 1.8;
	}
}

@media (min-width: 768px) {
	.pm-announce__text {
		width: auto;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		text-align: start;
	}
}

.pm-announce__btn {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 0.25rem;
	padding: 0.25rem 0.625rem;
	background: #fff;
	border-radius: var(--radius-pill);
	color: rgb(var(--brand-primary-dark));
	font-size: 0.6875rem;
	font-weight: 700;
	white-space: nowrap;
	transition: background-color 150ms var(--ease);
}

.pm-announce__btn:hover {
	background: rgb(255 255 255 / 0.9);
	color: rgb(var(--brand-primary-dark));
}

.pm-announce__btn--inert {
	opacity: 0.9;
	cursor: default;
}

@media (min-width: 640px) {
	.pm-announce__btn {
		padding-inline: 0.75rem;
		font-size: 0.75rem;
	}
}

.pm-announce__arrow {
	flex: 0 0 auto;
}

/* 7b-iii. Hero --------------------------------------------------------------
   Ported from HeroSlider.jsx. Two designs, one breakpoint: below `lg` the hero
   is a single cover card on the page's own surface; from `lg` it becomes the
   full-bleed gradient band with the text left and the image right.

   One markup tree reflows between them — below `lg` the image and the body
   share grid cell 1/1 so the text sits over the picture; from `lg` they fall
   back into normal flow as two columns.
   -------------------------------------------------------------------------- */

.pm-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: rgb(var(--surface));
}

.pm-hero__inner {
	position: relative;
	padding-block: 1rem;
}

.pm-hero__slide {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}

.pm-hero__slide[hidden] {
	display: none;
}

/* Below lg both children occupy the same cell. */
.pm-hero__media,
.pm-hero__body {
	grid-area: 1 / 1;
}

.pm-hero__media {
	position: relative;
}

.pm-hero__frame {
	display: block;
	overflow: hidden;
	border-radius: 1rem;
	box-shadow: var(--shadow-card-hover);
	/* A ring rather than a border, so it sits outside the box and cannot
	   change the image's own dimensions or ratio. */
	outline: 3px solid #fff;
	outline-offset: -3px;
}

.pm-hero__img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	background: rgb(var(--surface-muted));
}

.pm-hero__img--empty {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	background: rgb(var(--surface-muted));
}

.pm-hero__scrim {
	position: absolute;
	inset: 0;
	border-radius: 1rem;
	pointer-events: none;
	background: linear-gradient(to top, rgb(0 0 0 / 0.9), rgb(0 0 0 / 0.5), transparent);
}

.pm-hero__body {
	z-index: 10;
	align-self: end;
	padding: 1rem 1rem 0.5rem;
	color: #fff;
}

.pm-hero__cat {
	display: inline-flex;
	max-width: 100%;
	align-items: center;
	gap: 0.375rem;
	padding: 0.25rem 0.75rem;
	background: rgb(255 255 255 / 0.2);
	border-radius: var(--radius-pill);
	color: #fff;
	font-size: 0.6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.025em;
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	transition: background-color 150ms var(--ease);
}

.pm-hero__cat:hover {
	background: rgb(255 255 255 / 0.3);
	color: #fff;
}

.pm-hero__catdot {
	flex: 0 0 0.375rem;
	width: 0.375rem;
	height: 0.375rem;
	border-radius: 50%;
	background: #fff;
}

.pm-hero__catname {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pm-hero__title {
	margin: 0.75rem 0 0;
	font-size: 1.25rem;
	font-weight: 800;
	line-height: 1.25;
	color: #fff;
}

.pm-hero__title a {
	color: #fff;
	text-decoration-color: rgb(255 255 255 / 0.4);
	text-underline-offset: 4px;
}

.pm-hero__title a:hover {
	color: #fff;
	text-decoration: underline;
}

/* Below lg the text sits on the card itself, where an excerpt would crowd
   the image. */
.pm-hero__excerpt {
	display: none;
}

.pm-hero__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 1rem;
	color: rgb(255 255 255 / 0.8);
	font-size: 0.8125rem;
}

.pm-hero__author {
	color: #fff;
	font-weight: 600;
}

.pm-hero__author:hover {
	color: #fff;
	text-decoration: underline;
}

.pm-hero__meta .pm-dotsep {
	color: rgb(255 255 255 / 0.5);
}

.pm-hero__cta {
	display: none;
}

/* Dots sit inside the card's overlay, on the image rather than claiming a
   layout row beneath it. */
.pm-hero__dots {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	margin: 0.75rem 0 0;
	padding: 0;
	list-style: none;
}

.pm-hero__dotbtn {
	/* A 40px hit area around a 10px dot, without adding height to the
	   overlay. */
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 2.5rem;
	padding: 0;
	background: none;
	border: 0;
}

.pm-hero__dotmark {
	display: block;
	width: 0.625rem;
	height: 0.625rem;
	background: rgb(255 255 255 / 0.5);
	border-radius: var(--radius-pill);
	box-shadow: 0 1px 2px rgb(0 0 0 / 0.25);
	transition: width 200ms var(--ease), background-color 200ms var(--ease);
}

.pm-hero__dotbtn.is-active .pm-hero__dotmark {
	width: 1.5rem;
	background: #fff;
}

/* Arrows and the decorative blobs belong to the gradient band. */
.pm-hero__arrows,
.pm-hero__blob {
	display: none;
}

@media (min-width: 640px) {
	.pm-hero__img,
	.pm-hero__img--empty {
		aspect-ratio: 16 / 10;
	}

	.pm-hero__body {
		padding: 1.5rem 1.5rem 0.75rem;
	}

	.pm-hero__title {
		margin-top: 1rem;
		font-size: 1.5rem;
	}
}

@media (min-width: 1024px) {
	/* The full-bleed gradient band. */
	.pm-hero {
		background-image: linear-gradient(
			125deg,
			rgb(var(--hero-1)) 0%,
			rgb(var(--hero-2)) 34%,
			rgb(var(--hero-3)) 66%,
			rgb(var(--hero-4)) 100%
		);
	}

	.pm-hero__inner {
		padding-block: 4rem;
	}

	/* Released back into normal flow: text left, image right. */
	.pm-hero__slide {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: center;
		gap: 3rem;
	}

	.pm-hero__media {
		grid-area: auto;
		order: 2;
	}

	.pm-hero__body {
		grid-area: auto;
		order: 1;
		align-self: auto;
		padding: 0;
	}

	.pm-hero__frame {
		border-radius: var(--radius-card);
		outline-width: 4px;
		outline-offset: -4px;
	}

	.pm-hero__img,
	.pm-hero__img--empty {
		aspect-ratio: 16 / 9;
		background: rgb(255 255 255 / 0.1);
	}

	/* No scrim once the text is beside the image rather than on it. */
	.pm-hero__scrim {
		display: none;
	}

	.pm-hero__title {
		font-size: 2.25rem;
	}

	.pm-hero__excerpt {
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		overflow: hidden;
		max-width: 36rem;
		margin: 1rem 0 0;
		color: rgb(255 255 255 / 0.8);
		font-size: 0.9375rem;
		line-height: 1.8;
	}

	.pm-hero__cta {
		display: inline-flex;
		align-items: center;
		gap: 0.5rem;
		min-height: 2.75rem;
		margin-top: 1.75rem;
		padding: 0.625rem 1.5rem;
		background: #fff;
		border-radius: var(--radius-pill);
		color: rgb(var(--brand-primary-dark));
		font-size: 0.875rem;
		font-weight: 700;
		box-shadow: var(--shadow-card);
		transition: background-color 150ms var(--ease);
	}

	.pm-hero__cta:hover {
		background: rgb(255 255 255 / 0.9);
		color: rgb(var(--brand-primary-dark));
	}

	/* The dots serve below lg only. */
	.pm-hero__dots {
		display: none;
	}

	.pm-hero__arrows {
		position: absolute;
		inset-block: 0;
		inset-inline: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-inline: 1.25rem;
		pointer-events: none;
	}

	.pm-hero__arrow {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 2.75rem;
		height: 2.75rem;
		background: rgb(255 255 255 / 0.15);
		border: 1px solid rgb(255 255 255 / 0.25);
		border-radius: 50%;
		color: #fff;
		pointer-events: auto;
		-webkit-backdrop-filter: blur(4px);
		backdrop-filter: blur(4px);
		transition: background-color 150ms var(--ease);
	}

	.pm-hero__arrow:hover {
		background: rgb(255 255 255 / 0.3);
	}

	/* Tinted with white rather than a colour, so the blobs soften the
	   gradient without introducing a fifth hue. */
	.pm-hero__blob {
		position: absolute;
		display: block;
		width: 24rem;
		height: 24rem;
		border-radius: 50%;
		filter: blur(64px);
		pointer-events: none;
	}

	.pm-hero__blob--a {
		top: -8rem;
		inset-inline-end: -6rem;
		background: rgb(255 255 255 / 0.15);
	}

	.pm-hero__blob--b {
		bottom: -10rem;
		inset-inline-start: -6rem;
		background: rgb(255 255 255 / 0.1);
	}
}

/* 7b-iv. Featured strip -----------------------------------------------------
   Ported from FeaturedStrip.jsx. The row scrolls within its own box, so the
   document never gains a horizontal scrollbar; the negative margin lets the
   first and last cards reach the container edge while keeping the scrollable
   area padded.
   -------------------------------------------------------------------------- */

.pm-strip {
	background: rgb(var(--surface-muted));
	border-bottom: 1px solid rgb(var(--line));
}

.pm-strip__row {
	display: flex;
	gap: 0.625rem;
	margin: 0 -0.25rem;
	padding: 0 0.25rem 0.25rem;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.pm-strip__row::-webkit-scrollbar {
	display: none;
}

.pm-strip .pm-container {
	padding-block: 0.75rem;
}

.pm-strip__card {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 0.75rem;
	width: 15rem;
	padding: 0.625rem;
	background: rgb(var(--surface));
	border: 1px solid rgb(var(--line));
	border-radius: 0.75rem;
	text-align: start;
	scroll-snap-align: start;
	transition: border-color 200ms var(--ease), background-color 200ms var(--ease),
		box-shadow 200ms var(--ease);
}

.pm-strip__card:hover {
	border-color: rgb(var(--brand-primary) / 0.4);
	box-shadow: var(--shadow-card);
}

.pm-strip__card.is-active {
	border-color: rgb(var(--brand-primary));
	background: rgb(var(--brand-primary-light) / 0.4);
	box-shadow: var(--shadow-card);
}

.pm-strip__thumb {
	flex: 0 0 auto;
	width: 4rem;
	height: 3rem;
	object-fit: cover;
	border-radius: var(--radius-sm);
}

.pm-strip__thumb--empty {
	display: block;
	background: rgb(var(--surface-muted));
}

.pm-strip__body {
	flex: 1 1 auto;
	min-width: 0;
}

.pm-strip__label {
	display: block;
	margin-bottom: 0.125rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: rgb(var(--brand-primary));
	font-size: 0.625rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.025em;
}

.pm-strip__title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	color: rgb(var(--ink));
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.375;
	transition: color 200ms var(--ease);
}

.pm-strip__card:hover .pm-strip__title,
.pm-strip__card.is-active .pm-strip__title {
	color: rgb(var(--brand-primary-dark));
}

@media (min-width: 640px) {
	.pm-strip .pm-container {
		padding-block: 1rem;
	}

	.pm-strip__card {
		width: 16.5rem;
	}

	.pm-strip__thumb {
		width: 5rem;
		height: 3.5rem;
	}
}

/* 7b-v. Homepage layout -----------------------------------------------------
   Ported from Pages/Public/Home.jsx. A 12-column grid from `lg`: eight for the
   posts, four for the sidebar. Below that it is one column and the sidebar
   follows the content, which is the markup order already.
   -------------------------------------------------------------------------- */

.pm-home {
	padding-block: 2.5rem;
}

.pm-home__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 2rem;
}

.pm-home__main,
.pm-home__side {
	min-width: 0;
}

@media (min-width: 640px) {
	.pm-home {
		padding-block: 3rem;
	}
}

@media (min-width: 1024px) {
	.pm-home__grid {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		gap: 2.5rem;
	}

	.pm-home__main {
		grid-column: span 8 / span 8;
	}

	.pm-home__side {
		grid-column: span 4 / span 4;
	}

	.pm-home__sticky {
		position: sticky;
		top: 6rem;
	}
}

/* An accent bar rather than a heavier type size: premium without growing the
   heading or competing with the hero. */
.pm-sectiontitle {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0 0 1.5rem;
	color: rgb(var(--ink));
	font-size: 1.25rem;
	font-weight: 800;
	line-height: 1.3;
}

.pm-sectiontitle__bar {
	flex: 0 0 auto;
	width: 0.375rem;
	height: 1.5rem;
	border-radius: var(--radius-pill);
	background: rgb(var(--brand-primary));
}

@media (min-width: 640px) {
	.pm-sectiontitle {
		font-size: 1.5rem;
	}

	.pm-sectiontitle__bar {
		height: 1.75rem;
	}
}

.pm-postgrid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.5rem;
}

@media (min-width: 640px) {
	.pm-postgrid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.pm-postgrid {
		gap: 1.75rem;
	}
}

.pm-home .pm-pagination {
	margin-top: 2.5rem;
}

/* 7b-vi. Sidebar ------------------------------------------------------------
   Ported from widgets/Sidebar.jsx and ui/Card.jsx's Panel.

   Categories and Popular are one panel of rows separated by hairlines rather
   than a stack of cards: the body padding drops to zero so the lines run the
   full width, and no line is drawn after the last row.
   -------------------------------------------------------------------------- */

.pm-side {
	display: grid;
	gap: 1.5rem;
	align-content: start;
}

/* Search widget. */
.pm-side__search {
	padding: 0.75rem;
	background: rgb(var(--surface-raised));
	border: 1px solid rgb(var(--line));
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-card);
}

.pm-side__searchfield {
	position: relative;
	display: block;
}

.pm-side__searchinput {
	width: 100%;
	padding: 0.75rem 3rem 0.75rem 1.25rem;
	background: rgb(var(--surface-muted));
	border: 1px solid rgb(var(--line));
	border-radius: var(--radius-pill);
	color: rgb(var(--ink));
	font-size: 0.875rem;
}

.pm-side__searchinput::placeholder {
	color: rgb(var(--ink-subtle));
}

.pm-side__searchinput:focus {
	background: rgb(var(--surface));
	border-color: rgb(var(--brand-primary));
	outline: none;
}

.pm-side__searchbtn {
	position: absolute;
	top: 50%;
	inset-inline-end: 0.375rem;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	background: none;
	border: 0;
	border-radius: 50%;
	color: rgb(var(--ink-subtle));
	transition: background-color 150ms var(--ease), color 150ms var(--ease);
}

.pm-side__searchbtn:hover {
	background: rgb(var(--brand-primary));
	color: #fff;
}

/* Panel shell. */
.pm-panel {
	overflow: hidden;
	background: rgb(var(--surface-raised));
	border: 1px solid rgb(var(--line));
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-card);
}

.pm-panel__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.875rem 1.25rem;
	border-bottom: 1px solid rgb(var(--line));
}

.pm-panel__title {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	margin: 0;
	color: rgb(var(--ink));
	font-size: 0.875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.025em;
}

.pm-panel__accent {
	flex: 0 0 auto;
	width: 0.375rem;
	height: 1rem;
	border-radius: var(--radius-pill);
	background: rgb(var(--brand-primary));
}

.pm-panel__rows {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* A line between items, and none at the ends. */
.pm-panel__rows > li + li {
	border-top: 1px solid rgb(var(--line));
}

.pm-panel__row {
	padding: 0.875rem 1.25rem;
}

/* Popular row: thumbnail and title only. */
.pm-siderow {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.pm-siderow__thumb {
	flex: 0 0 auto;
	display: block;
	width: 4rem;
	height: 4rem;
	overflow: hidden;
	border-radius: var(--radius-sm);
	box-shadow: 0 0 0 1px rgb(var(--line));
	transition: box-shadow 150ms var(--ease);
}

.pm-siderow:hover .pm-siderow__thumb {
	box-shadow: 0 0 0 1px rgb(var(--brand-primary) / 0.4);
}

.pm-siderow__thumb img,
.pm-siderow__empty {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	background: rgb(var(--surface-muted));
}

.pm-siderow__title {
	min-width: 0;
	margin: 0;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.375;
}

.pm-siderow__title a {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	color: rgb(var(--ink));
	transition: color 150ms var(--ease);
}

.pm-siderow:hover .pm-siderow__title a {
	color: rgb(var(--brand-primary-dark));
}

/* Category row. */
.pm-catrow {
	display: flex;
	/* Keeps the badge on the first line when a long Bengali name wraps. */
	align-items: flex-start;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.875rem 1.25rem;
	transition: background-color 200ms var(--ease);
}

.pm-catrow:hover {
	background: rgb(var(--brand-primary-light));
}

.pm-catrow__name {
	/* Lets the name wrap instead of forcing the row wider than the panel. */
	min-width: 0;
	color: rgb(var(--ink-muted));
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.625;
	transition: color 200ms var(--ease);
}

.pm-catrow:hover .pm-catrow__name {
	color: rgb(var(--brand-primary-dark));
}

.pm-catrow__count {
	flex: 0 0 auto;
	margin-top: 0.125rem;
	padding: 0.125rem 0.625rem;
	background: rgb(var(--surface-muted));
	border-radius: var(--radius-pill);
	color: rgb(var(--ink-subtle));
	font-size: 0.75rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	transition: background-color 200ms var(--ease), color 200ms var(--ease);
}

.pm-catrow:hover .pm-catrow__count {
	background: rgb(var(--surface));
	color: rgb(var(--brand-primary-dark));
}

/* 7b-vii. Footer ------------------------------------------------------------
   Ported from SiteFooter.jsx. The brand block keeps its own wider track; the
   three columns share the rest. Below `lg` the columns sit in their own grid;
   from `lg` that wrapper is dissolved with `display: contents` so each column
   joins the parent grid directly.

   The footer surface is a fixed dark navy in both themes — a deliberate anchor
   at the end of the page, which is why it does not follow the surface tokens.
   -------------------------------------------------------------------------- */

.pm-footer {
	margin-top: auto;
	background: rgb(var(--footer-bg));
	color: rgb(var(--footer-ink));
}

.pm-footer__inner {
	padding-block: 2.5rem;
}

.pm-footer__grid {
	display: grid;
	gap: 2rem;
}

.pm-footer__cols {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 2rem;
}

.pm-footer__brand .pm-logo,
.pm-footer__brand .pm-logo:hover {
	color: rgb(var(--footer-ink));
	font-size: 1.2rem;
	font-weight: 800;
}

.pm-footer__about {
	max-width: 28rem;
	margin: 1.25rem 0 0;
	color: rgb(var(--footer-muted));
	font-size: 0.9375rem;
	line-height: 1.8;
}

.pm-footer__social {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin: 1.25rem 0 0;
	padding: 0;
	list-style: none;
}

.pm-socialbtn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: var(--radius-sm);
	background: rgb(255 255 255 / 0.1);
	color: #fff;
	font-size: 0.85rem;
	font-weight: 700;
	transition: transform 200ms var(--ease), opacity 200ms var(--ease);
}

.pm-socialbtn:hover {
	transform: scale(1.05);
	opacity: 0.9;
	color: #fff;
}

/* Each network keeps its own mark colour. */
.pm-socialbtn--facebook { background: #1877f2; }
.pm-socialbtn--twitter,
.pm-socialbtn--x        { background: #0f1419; }
.pm-socialbtn--youtube  { background: #ff0000; }
.pm-socialbtn--linkedin { background: #0a66c2; }
.pm-socialbtn--telegram { background: #229ed9; }
.pm-socialbtn--instagram {
	background: linear-gradient(to bottom right, #f9ce34, #ee2a7b 55%, #6228d7);
}

.pm-footer__heading {
	margin: 0 0 1.25rem;
	color: rgb(var(--footer-ink));
	font-size: 1rem;
	font-weight: 700;
}

.pm-footer__links {
	display: grid;
	gap: 0.625rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pm-footer__links a {
	display: inline-block;
	color: rgb(var(--footer-muted));
	font-size: 0.9375rem;
	transition: color 150ms var(--ease);
}

.pm-footer__links a:hover {
	color: #fff;
}

/* The bordered social card. */
.pm-socialcard {
	padding: 0.875rem;
	border: 1px solid rgb(var(--footer-line));
	border-radius: 0.75rem;
}

.pm-socialcard__head {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.pm-socialcard__icon {
	flex: 0 0 auto;
	color: rgb(var(--footer-ink));
}

.pm-socialcard__title {
	margin: 0;
	color: rgb(var(--footer-ink));
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.4;
	text-wrap: balance;
}

.pm-socialcard__desc {
	margin: 0.125rem 0 0;
	color: rgb(var(--footer-muted));
	font-size: 0.8125rem;
}

.pm-socialcard__icons {
	margin-top: 0.75rem;
}

/* Bottom bar. */
.pm-footer__bottom {
	margin-top: 2rem;
	padding-top: 1.25rem;
	border-top: 1px solid rgb(var(--footer-line));
}

.pm-footer__bottomrow {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
}

.pm-footer__copy {
	margin: 0;
	color: rgb(var(--footer-muted));
	font-size: 0.9375rem;
	text-align: center;
}

.pm-footer__bottomlinks {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.25rem 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pm-footer__bottomlinks a {
	color: rgb(var(--footer-muted));
	font-size: 0.9375rem;
	transition: color 150ms var(--ease);
}

.pm-footer__bottomlinks a:hover {
	color: rgb(var(--footer-ink));
}

@media (min-width: 640px) {
	.pm-footer__grid {
		gap: 2.5rem;
	}

	/* A phone always gets one column: two narrow columns of Bengali link text
	   wrap a word per line. The chosen count applies from `sm`, where a tablet
	   has the width to use it. */
	.pm-footer__cols {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.pm-socialcard {
		padding: 1rem;
	}

	.pm-footer__bottomrow {
		flex-direction: row;
	}

	.pm-footer__copy {
		text-align: start;
	}
}

@media (min-width: 1024px) {
	.pm-footer__inner {
		padding-block: 3rem;
	}

	.pm-footer__grid {
		grid-template-columns: 1.4fr 1fr 1fr 1.3fr;
		gap: 3rem;
	}

	/* Dissolved, so every column joins the parent grid directly. */
	.pm-footer__cols {
		display: contents;
	}

	.pm-footer__bottom {
		margin-top: 2.5rem;
	}

	.pm-socialbtn {
		width: 36px;
		height: 36px;
	}
}

/* The social card spans the full row below `lg` whatever the column count. */
@media (max-width: 1023px) {
	.pm-footer__col--wide {
		grid-column: 1 / -1;
	}
}

/* 7c. Mobile drawer ---------------------------------------------------------
   Ported from MobileMenu.jsx.
   -------------------------------------------------------------------------- */

.pm-drawer-overlay {
	position: fixed;
	inset: 0;
	z-index: 50;
	background: rgb(var(--ink) / 0.5);
	opacity: 0;
	transition: opacity 200ms var(--ease);
}

.pm-drawer-overlay.is-open {
	opacity: 1;
}

.pm-drawer {
	position: fixed;
	inset-block: 0;
	inset-inline-start: 0;
	z-index: 51;
	display: flex;
	flex-direction: column;
	width: min(20rem, 85vw);
	background: rgb(var(--surface));
	box-shadow: var(--shadow-popover);
	transform: translateX(-100%);
	transition: transform 300ms var(--ease);
}

.pm-drawer.is-open {
	transform: translateX(0);
}

@media (min-width: 1024px) {
	.pm-drawer,
	.pm-drawer-overlay {
		display: none;
	}
}

.pm-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	padding: 0.75rem 1rem;
	border-bottom: 1px solid rgb(var(--line));
}

.pm-drawer__head .pm-logo {
	color: rgb(var(--ink));
	font-size: 1.05rem;
	font-weight: 800;
}

.pm-drawer__body {
	flex: 1 1 auto;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 1rem;
}

.pm-drawer__user {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 1rem;
	padding: 0.75rem;
	background: rgb(var(--surface-muted));
	border-radius: var(--radius-card);
}

.pm-drawer__userbody {
	min-width: 0;
}

.pm-drawer__username {
	margin: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 0.875rem;
	font-weight: 600;
	color: rgb(var(--ink));
}

.pm-drawer__usermeta {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	margin: 0.125rem 0 0;
	font-size: 0.75rem;
	color: rgb(var(--ink-muted));
}

.pm-drawer__list {
	display: grid;
	gap: 0.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Every row is a comfortable touch target. */
.pm-drawer__list a {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	min-height: 2.75rem;
	padding: 0.75rem;
	border-radius: var(--radius-sm);
	color: rgb(var(--ink));
	font-size: 1rem;
	font-weight: 600;
	transition: background-color 200ms var(--ease), color 200ms var(--ease);
}

.pm-drawer__list a:hover {
	background: rgb(var(--surface-muted));
}

.pm-drawer__list--sub a {
	padding-block: 0.625rem;
	color: rgb(var(--ink-muted));
	font-size: 0.875rem;
	font-weight: 500;
}

.pm-drawer__list--sub a:hover {
	color: rgb(var(--ink));
}

.pm-drawer__name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pm-drawer__label {
	margin: 1.25rem 0 0.25rem;
	padding-inline: 0.75rem;
	color: rgb(var(--ink-subtle));
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.pm-drawer__foot {
	padding: 1rem;
	border-top: 1px solid rgb(var(--line));
}

.pm-drawer__logout {
	display: flex;
	align-items: center;
	min-height: 2.75rem;
	padding: 0.75rem;
	border-radius: var(--radius-sm);
	color: rgb(var(--danger));
	font-size: 0.875rem;
	font-weight: 600;
	transition: background-color 200ms var(--ease);
}

.pm-drawer__logout:hover {
	background: rgb(var(--surface-muted));
	color: rgb(var(--danger));
}

body.pm-drawer-open {
	overflow: hidden;
}

/* 7. Utilities -------------------------------------------------------------- */

.clamp-2,
.pm-clamp-2 {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.clamp-3,
.pm-clamp-3 {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.pm-badge--rank {
	background: rgb(var(--brand-50));
	color: rgb(var(--brand-800));
}

[data-theme="dark"] .pm-badge--rank,
html.dark .pm-badge--rank {
	background: rgb(var(--brand-800));
	color: rgb(var(--brand-100));
}