/* =========================================================================
   PITO – Lịch Ngày Đặc Biệt · v1.7.4
   Front-end styles. Every rule is scoped under .pnd so the plugin never
   leaks into the theme. Colour tokens are re-declared inline from the
   settings screen (see pnd_inline_tokens()).
   ====================================================================== */

.pnd {
	--pnd-coral-1: #FF6B6B;
	--pnd-coral-2: #FF8A7A;
	--pnd-coral: #F36F56;
	--pnd-heading: #1E293B;
	--pnd-border: #E2E8F0;
	--pnd-border-strong: #CBD5E1;
	--pnd-gradient: linear-gradient(113.54deg, #FF6B6B 15.59%, #FF8A7A 76.55%);
	--pnd-wash: rgba(243, 111, 86, 0.08);
	--pnd-wash-strong: rgba(243, 111, 86, 0.10);

	--pnd-fg-1: rgba(26, 26, 26, 1);
	--pnd-fg-2: rgba(26, 26, 26, 0.80);
	--pnd-fg-3: rgba(26, 26, 26, 0.60);
	--pnd-fg-4: rgba(26, 26, 26, 0.40);
	--pnd-fg-5: rgba(26, 26, 26, 0.10);
	--pnd-surface-alt: #FAFAFA;

	--pnd-radius-md: 16px;
	--pnd-radius-card: 24px;
	--pnd-radius-image: 32px;
	--pnd-radius-pill: 1234px;
	--pnd-shadow-card: 0 20px 24px -4px rgba(26, 26, 26, 0.08);

	--pnd-font: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

	font-family: var(--pnd-font);
	color: var(--pnd-fg-2);
	-webkit-font-smoothing: antialiased;
}

.pnd *,
.pnd *::before,
.pnd *::after {
	box-sizing: border-box;
}

.pnd-page-inner {
	max-width: 960px;
	margin: 0 auto;
	padding: 8px 0 64px;
}

/* ---------- Breadcrumbs ---------- */

.pnd-crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	margin-bottom: 40px;
}

.pnd-crumb {
	color: var(--pnd-fg-4);
	text-decoration: none;
}

a.pnd-crumb:hover {
	color: var(--pnd-fg-2);
	text-decoration: underline;
}

.pnd-crumb--current {
	color: var(--pnd-fg-2);
	font-weight: 600;
}

.pnd-crumb-sep {
	color: var(--pnd-fg-5);
}

/* ---------- Headings & body copy ---------- */

.pnd .pnd-h1 {
	font-family: var(--pnd-font);
	font-size: 48px;
	line-height: 1.1;
	letter-spacing: -0.025em;
	font-weight: 800;
	color: var(--pnd-heading);
	margin: 0 0 20px;
}


.pnd .pnd-h2 {
	font-family: var(--pnd-font);
	font-size: 26px;
	line-height: 1.25;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--pnd-heading);
	margin: 0 0 24px;
}

.pnd .pnd-lede {
	font-size: 17px;
	line-height: 1.6;
	font-weight: 400;
	color: var(--pnd-fg-3);
	margin: 0;
	max-width: 520px;
	text-wrap: pretty;
}

.pnd .pnd-p {
	font-size: 17px;
	line-height: 1.6;
	font-weight: 400;
	color: var(--pnd-fg-2);
	margin: 0 0 40px;
	text-wrap: pretty;
}

.pnd .pnd-prose {
	font-size: 17px;
	line-height: 1.6;
	color: var(--pnd-fg-2);
	margin-bottom: 40px;
}

.pnd .pnd-prose h1,
.pnd .pnd-prose h2,
.pnd .pnd-prose h3,
.pnd .pnd-prose h4,
.pnd .pnd-prose h5,
.pnd .pnd-prose h6 {
	font-family: var(--pnd-font);
	color: var(--pnd-heading);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.25;
	margin: 15px 0;
	padding: 0;
}

.pnd .pnd-prose h1 {
	font-size: 30px;
}

.pnd .pnd-prose h2 {
	font-size: 24px;
}

.pnd .pnd-prose h3 {
	font-size: 20px;
}

.pnd .pnd-prose p {
	margin: 10px 0;
	padding: 0;
}

.pnd .pnd-prose a,
.pnd .pnd-p a {
	color: var(--pnd-coral);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.pnd .pnd-empty {
	font-size: 16px;
	color: var(--pnd-fg-4);
	padding: 28px;
	border: 1px dashed var(--pnd-border);
	border-radius: var(--pnd-radius-card);
	margin: 0 0 32px;
	text-align: center;
}

.pnd-center {
	display: flex;
	justify-content: center;
	margin-top: 32px;
}

/* ---------- Hero ---------- */

.pnd-hero {
	display: grid;
	grid-template-columns: 1fr 340px;
	gap: 40px;
	align-items: center;
	margin-bottom: 56px;
}

.pnd-hero--month {
	grid-template-columns: 1fr 300px;
	margin-bottom: 48px;
}


.pnd-hero__media {
	width: 100%;
	aspect-ratio: 340 / 220;
	border-radius: var(--pnd-radius-image);
	overflow: hidden;
	background: var(--pnd-surface-alt);
}

.pnd-hero__media--sm {
	aspect-ratio: 300 / 210;
}


.pnd .pnd-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: inherit;
}

.pnd-img-empty {
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px dashed var(--pnd-border-strong);
	color: var(--pnd-fg-4);
	font-size: 13px;
	text-align: center;
	padding: 12px;
}

/* ---------- Buttons ---------- */

.pnd .pnd-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 24px;
	border-radius: var(--pnd-radius-pill);
	font-family: var(--pnd-font);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
	border: 1px solid transparent;
	cursor: pointer;
	transition: filter 0.18s ease, transform 0.18s ease, background-color 0.18s ease, color 0.18s ease;
	white-space: nowrap;
}

.pnd .pnd-btn--solid {
	background: var(--pnd-gradient);
	color: #fff;
}

.pnd .pnd-btn--solid:hover {
	filter: brightness(0.95);
	transform: translateY(-1px);
	color: #fff;
}

.pnd .pnd-btn--outline {
	background: #fff;
	color: var(--pnd-fg-1);
	border-color: var(--pnd-border);
}

.pnd .pnd-btn--outline:hover {
	border-color: var(--pnd-border-strong);
	color: var(--pnd-coral);
}

/* ---------- Icon medallion ---------- */

.pnd-medallion {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	border-radius: var(--pnd-radius-pill);
	background: var(--pnd-wash);
	color: var(--pnd-coral);
}

.pnd-medallion--white {
	background: #fff;
}

.pnd .pnd-icon {
	display: block;
}

/* ---------- Overview: month cards ---------- */

.pnd-months {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	margin-bottom: 56px;
}

.pnd .pnd-month-card {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 20px;
	background: #fff;
	border: 1px solid var(--pnd-border);
	border-radius: var(--pnd-radius-card);
	text-decoration: none;
	transition: box-shadow 0.2s, transform 0.2s, border-color 0.2s;
}

.pnd .pnd-month-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--pnd-shadow-card);
	border-color: transparent;
}

.pnd-month-card__text {
	min-width: 0;
}

.pnd-month-card__name {
	display: block;
	font-size: 16px;
	font-weight: 700;
	color: var(--pnd-fg-1);
}

.pnd-month-card__count {
	display: block;
	font-size: 13px;
	font-weight: 400;
	color: var(--pnd-fg-4);
	margin-top: 2px;
}

/* ---------- Overview: reminder banner ---------- */

.pnd-banner {
	display: flex;
	align-items: center;
	gap: 24px;
	padding: 28px 32px;
	background: var(--pnd-wash);
	border-radius: var(--pnd-radius-card);
}

.pnd-banner__body {
	flex: 1;
	min-width: 0;
}

.pnd-banner__title {
	font-size: 18px;
	font-weight: 700;
	color: var(--pnd-fg-1);
	margin-bottom: 6px;
}

.pnd .pnd-banner__desc {
	font-size: 15px;
	line-height: 1.6;
	font-weight: 400;
	color: var(--pnd-fg-3);
	margin: 0;
	max-width: 480px;
}

/* ---------- Month: calendar grid ---------- */

.pnd-cal {
	border: 1px solid var(--pnd-border);
	border-radius: var(--pnd-radius-card);
	overflow: hidden;
	margin-bottom: 56px;
}

.pnd-cal__head {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	background: var(--pnd-surface-alt);
	border-bottom: 1px solid var(--pnd-border);
}

.pnd-cal__weekday {
	padding: 14px 0;
	text-align: center;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--pnd-fg-3);
}

.pnd-cal__body {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
}

.pnd-cal__cell {
	min-height: 82px;
	padding: 10px;
	border-right: 1px solid var(--pnd-border);
	border-bottom: 1px solid var(--pnd-border);
	display: flex;
	flex-direction: column;
	gap: 6px;
}

/* The grid is always a whole number of 7-column rows, so the 7th cell of
   every row is the one that must lose its right border. */
.pnd-cal__cell:nth-child(7n) {
	border-right: 0;
}

.pnd-cal__body .pnd-cal__cell:nth-last-child(-n + 7) {
	border-bottom: 0;
}

.pnd-cal__num {
	font-size: 14px;
	font-weight: 600;
	color: var(--pnd-fg-1);
}

.pnd-cal__cell.is-muted .pnd-cal__num {
	color: var(--pnd-fg-4);
}

.pnd .pnd-cal__event {
	display: block;
	padding: 5px 8px;
	border-radius: 8px;
	background: var(--pnd-wash-strong);
	color: var(--pnd-coral);
	font-size: 11px;
	font-weight: 600;
	line-height: 1.35;
	text-decoration: none;
}

.pnd .pnd-cal__event:hover {
	background: var(--pnd-coral);
	color: #fff;
}

/* Lunar days sit on a solar cell, so they carry a marker distinguishing them
   from days whose date is the date shown on the grid. */
.pnd .pnd-cal__event.is-lunar {
	background: transparent;
	box-shadow: inset 0 0 0 1px currentColor;
}

.pnd .pnd-cal__event.is-lunar::before {
	content: "☾ ";
}

.pnd .pnd-cal__event.is-lunar:hover {
	background: var(--pnd-coral);
	color: #fff;
}

/* A cell can hold more than one day. */
.pnd-cal__cell .pnd-cal__event + .pnd-cal__event {
	margin-top: 4px;
}

/* ---------- Month: highlight rows ---------- */

.pnd-rows {
	display: flex;
	flex-direction: column;
	margin-bottom: 32px;
}

.pnd .pnd-row {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 20px 4px;
	border-bottom: 1px solid var(--pnd-border);
	text-decoration: none;
}

.pnd .pnd-row:hover .pnd-row__title {
	color: var(--pnd-coral);
}

.pnd-row__body {
	flex: 1;
	min-width: 0;
}

.pnd-row__title {
	display: block;
	font-size: 16px;
	font-weight: 700;
	color: var(--pnd-fg-1);
	transition: color 0.15s;
}

.pnd-row__desc {
	display: block;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.6;
	color: var(--pnd-fg-3);
	margin-top: 3px;
}

.pnd-row__cta {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	font-weight: 600;
	color: var(--pnd-coral);
	white-space: nowrap;
}

/* =========================================================================
   Detail page
   ====================================================================== */

.pnd-page-inner--wide {
	max-width: 1080px;
}

/* ---------- Hero band ---------- */

.pnd-dhero {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 420px;
	gap: 56px;
	align-items: stretch;
	padding-bottom: 48px;
	margin-bottom: 48px;
	border-bottom: 1px solid var(--pnd-border);
}

.pnd-dhero__text {
	min-width: 0;
}

/* Category pill above the title. */
.pnd .pnd-badge {
	display: inline-flex;
	align-items: center;
	padding: 6px 14px;
	border-radius: var(--pnd-radius-pill);
	background: var(--pnd-wash);
	color: var(--pnd-coral);
	font-family: var(--pnd-font);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.01em;
	text-transform: none;
	white-space: nowrap;
}

.pnd .pnd-dhero__title {
	font-family: var(--pnd-font);
	font-size: 46px;
	line-height: 1.1;
	letter-spacing: -0.025em;
	font-weight: 800;
	color: var(--pnd-heading);
	margin: 16px 0 24px;
	text-wrap: pretty;
}

/* No badge above it — nothing to sit under. */
.pnd-dhero__text > .pnd-dhero__title:first-child {
	margin-top: 0;
}

.pnd .pnd-dhero__desc {
	font-size: 18px;
	line-height: 1.6;
	font-weight: 400;
	color: var(--pnd-fg-3);
	margin: 0 0 32px;
	text-wrap: pretty;
}

.pnd-dhero__media {
	width: 100%;
	min-height: 236px;
	border-radius: var(--pnd-radius-card);
	overflow: hidden;
	background: var(--pnd-surface-alt);
}

/* ---------- Quick facts ---------- */

.pnd-facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 2px 32px;
}

.pnd-fact {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 14px 0;
	border-top: 1px solid var(--pnd-border);
	min-width: 0;
}

.pnd-fact__text {
	min-width: 0;
}

.pnd-fact__label {
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--pnd-fg-4);
}

.pnd-fact__value {
	display: block;
	font-size: 15px;
	font-weight: 600;
	color: var(--pnd-fg-1);
	margin-top: 3px;
	line-height: 1.4;
}

/* ---------- Body: article + sidebar ---------- */

.pnd-detail__body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 288px;
	gap: 64px;
	align-items: start;
}

.pnd-detail__body.is-full {
	grid-template-columns: minmax(0, 1fr);
}

.pnd-detail__main {
	min-width: 0;
	max-width: 700px;
}

.pnd-detail__body.is-full .pnd-detail__main {
	max-width: 700px;
}

.pnd .pnd-lede-lg {
	font-size: 19px;
	line-height: 1.6;
	font-weight: 400;
	color: var(--pnd-fg-1);
	margin: 0 0 40px;
	text-wrap: pretty;
}

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

.pnd-side {
	position: sticky;
	top: var(--pnd-sticky-top, 88px);
	display: flex;
	flex-direction: column;
	gap: 28px;
	/* Sticky needs a bounded height or a long sidebar can never scroll to its
	   end; this keeps the whole thing reachable on short viewports. */
	max-height: calc(100vh - var(--pnd-sticky-top, 88px) - 24px);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.pnd-side__block--divided {
	padding-top: 24px;
	border-top: 1px solid var(--pnd-border);
}

.pnd-side__label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--pnd-fg-4);
	margin-bottom: 14px;
}

.pnd-toc {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.pnd .pnd-toc__link {
	padding: 9px 0 9px 14px;
	border-left: 2px solid var(--pnd-border);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--pnd-fg-3);
	text-decoration: none;
	transition: color 0.15s, border-color 0.15s;
}

.pnd .pnd-toc__link:hover,
.pnd .pnd-toc__link.is-active {
	color: var(--pnd-coral);
	border-left-color: var(--pnd-coral);
}

.pnd-side-days {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.pnd .pnd-side-day {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 11px 0;
	border-bottom: 1px solid var(--pnd-border);
	text-decoration: none;
}

.pnd .pnd-side-day:last-child {
	border-bottom: 0;
}

.pnd .pnd-side-day:hover .pnd-side-day__title {
	color: var(--pnd-coral);
}

.pnd-side-day__text {
	flex: 1;
	min-width: 0;
}

.pnd-side-day__title {
	display: block;
	font-size: 13px;
	font-weight: 700;
	color: var(--pnd-fg-1);
	line-height: 1.35;
	transition: color 0.15s;
}

.pnd-side-day__date {
	display: block;
	font-size: 12px;
	font-weight: 400;
	color: var(--pnd-fg-4);
	margin-top: 2px;
}

.pnd-side__cta {
	margin-top: 16px;
}

.pnd-side__cta .pnd-btn {
	width: 100%;
	padding: 10px 18px;
	font-size: 14px;
}

/* ---------- Detail: tips ---------- */

.pnd .pnd-tips {
	list-style: none;
	margin: 0 0 48px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.pnd .pnd-tip {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
}

.pnd-tip__mark {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	flex: none;
	border-radius: var(--pnd-radius-pill);
	background: #F0FAF4;
	color: #2E7D52;
}

.pnd-tip__text {
	font-size: 16px;
	font-weight: 400;
	line-height: 1.6;
	color: var(--pnd-fg-2);
}

/* ---------- Detail: CTA box ---------- */

.pnd-cta {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 220px;
	gap: 28px;
	align-items: center;
	padding: 32px;
	background: var(--pnd-wash);
	border-radius: var(--pnd-radius-card);
	margin-bottom: 48px;
}

.pnd-cta__body {
	min-width: 0;
}

.pnd-cta__title {
	font-size: 20px;
	font-weight: 800;
	color: var(--pnd-heading);
	margin-bottom: 10px;
}

.pnd .pnd-cta__desc {
	font-size: 15px;
	line-height: 1.6;
	font-weight: 400;
	color: var(--pnd-fg-3);
	margin: 0 0 20px;
}

.pnd-cta__media {
	width: 100%;
	aspect-ratio: 220 / 170;
	border-radius: var(--pnd-radius-card);
	overflow: hidden;
	background: #fff;
}

/* ---------- Detail: previous / next ---------- */

.pnd-adjacent {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.pnd .pnd-adjacent__card {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 20px 24px;
	border: 1px solid var(--pnd-border);
	border-radius: var(--pnd-radius-card);
	text-decoration: none;
	transition: box-shadow 0.2s, transform 0.2s, border-color 0.2s;
}

.pnd .pnd-adjacent__card--next {
	text-align: right;
}

.pnd .pnd-adjacent__card:hover {
	transform: translateY(-2px);
	box-shadow: var(--pnd-shadow-card);
	border-color: transparent;
}

.pnd .pnd-adjacent__card:hover .pnd-adjacent__title {
	color: var(--pnd-coral);
}

.pnd-adjacent__dir {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--pnd-fg-4);
}

.pnd-adjacent__title {
	font-size: 16px;
	font-weight: 700;
	color: var(--pnd-fg-1);
	line-height: 1.35;
	transition: color 0.15s;
}

.pnd-adjacent__date {
	font-size: 13px;
	font-weight: 400;
	color: var(--pnd-fg-4);
}

/* =========================================================================
   Responsive

   The detail page is the demanding one: a two-column article-plus-sidebar at
   desktop that has to become one readable column on a phone. Sticky is
   pointless on a phone — a sidebar pinned there would eat the screen — so
   below the breakpoint the sidebar stops sticking, the contents list becomes
   a tappable panel above the article, and the "other days" list drops to the
   end where it reads as related links rather than as chrome.
   ====================================================================== */

@media (max-width: 1080px) {
	.pnd-detail__body {
		gap: 40px;
	}

	.pnd-dhero {
		grid-template-columns: minmax(0, 1fr) 340px;
		gap: 40px;
	}
}

@media (max-width: 1024px) {
	.pnd-months {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ---------- Detail: one column ---------- */

@media (max-width: 940px) {
	.pnd-detail__body,
	.pnd-detail__body.is-full {
		display: flex;
		flex-direction: column;
		gap: 40px;
	}

	/* The wrapper stops generating a box, so its two blocks become flex items
	   of the body alongside the article and can be ordered around it. Ordering
	   the wrapper itself would move both blocks together — which is how the
	   contents list ended up below the article. */
	.pnd-side {
		display: contents;
	}

	.pnd-detail__main,
	.pnd-side__block {
		max-width: 700px;
		width: 100%;
		margin-left: auto;
		margin-right: auto;
	}

	/* Contents list above the article — it is navigation for what follows.
	   Other days after it, where they read as related links. */
	.pnd-toc-wrap {
		order: -1;
	}

	.pnd-detail__main {
		order: 0;
	}

	.pnd-side__block--divided {
		order: 1;
		padding-top: 0;
		border-top: 0;
	}

	/* Boxed, so an inline contents list still reads as a distinct panel. */
	.pnd-toc-wrap {
		padding: 18px 20px;
		background: var(--pnd-surface-alt);
		border-radius: var(--pnd-radius-md);
	}

	.pnd-toc-wrap .pnd-side__label {
		margin-bottom: 10px;
	}
}

@media (max-width: 860px) {
	.pnd-hero,
	.pnd-hero--month {
		grid-template-columns: 1fr;
		gap: 28px;
		margin-bottom: 40px;
	}

	.pnd-hero__media,
	.pnd-hero__media--sm {
		aspect-ratio: 16 / 9;
		order: -1;
	}

	/* Detail hero: heading and description first, then the image, then the
	   facts. Putting the image above the H1 would push the title itself off
	   the first screen. */
	.pnd-dhero {
		display: flex;
		flex-direction: column;
		gap: 24px;
		padding-bottom: 32px;
		margin-bottom: 32px;
	}

	.pnd-dhero__media {
		aspect-ratio: 16 / 9;
		min-height: 0;
		order: 2;
	}

	.pnd-dhero__text {
		display: flex;
		flex-direction: column;
	}

	.pnd .pnd-dhero__title {
		font-size: 32px;
		margin: 14px 0 16px;
	}

	.pnd .pnd-dhero__desc {
		font-size: 17px;
		margin-bottom: 0;
	}

	.pnd-facts {
		order: 3;
		grid-template-columns: 1fr;
		gap: 0;
		margin-top: 24px;
	}

	.pnd .pnd-h1 {
		font-size: 34px;
	}

	.pnd .pnd-h2 {
		font-size: 22px;
	}

	.pnd .pnd-lede,
	.pnd .pnd-p,
	.pnd .pnd-prose,
	.pnd .pnd-lede-lg {
		font-size: 16px;
	}

	.pnd-cta {
		grid-template-columns: 1fr;
		padding: 24px;
	}

	.pnd-cta__media {
		order: -1;
		aspect-ratio: 16 / 9;
	}

	.pnd-banner {
		flex-direction: column;
		align-items: flex-start;
		padding: 24px;
	}

	.pnd-banner__desc {
		max-width: none;
	}
}

@media (max-width: 640px) {
	.pnd-months {
		grid-template-columns: repeat(2, 1fr);
	}

	/* The 7-column calendar cannot shrink further without becoming unreadable,
	   so it scrolls sideways inside its own rounded frame. */
	.pnd-cal {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.pnd-cal__head,
	.pnd-cal__body {
		min-width: 620px;
	}

	.pnd .pnd-row {
		flex-wrap: wrap;
		gap: 12px;
	}

	.pnd-row__cta {
		width: 100%;
		justify-content: flex-end;
	}

	.pnd-page-inner {
		padding-bottom: 40px;
	}

	/* Prev / next stack, and "next" stops right-aligning — at full width a
	   right-aligned card just looks broken. */
	.pnd-adjacent {
		grid-template-columns: 1fr;
	}

	.pnd .pnd-adjacent__card--next {
		text-align: left;
	}

	.pnd-adjacent__empty {
		display: none;
	}

	.pnd .pnd-adjacent__card {
		padding: 16px 20px;
	}
}

@media (max-width: 420px) {
	.pnd-months {
		grid-template-columns: 1fr;
	}

	.pnd .pnd-h1 {
		font-size: 28px;
	}

	.pnd .pnd-dhero__title {
		font-size: 27px;
	}

	.pnd-cta {
		padding: 20px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pnd * {
		transition: none !important;
	}

	.pnd .pnd-month-card:hover,
	.pnd .pnd-adjacent__card:hover,
	.pnd .pnd-btn--solid:hover {
		transform: none;
	}
}