/**
 * Niramay Admin Dashboard - [niramay_newsletters] frontend styles.
 *
 * Scoped under .niramay-newsletters (which also carries .niramay-front) so it never overrides the
 * website theme. Colours, radii, shadows and spacing come from the `--nrm-*` tokens printed inline
 * by Niramay_Design_Tokens::frontend_css() — i.e. the dashboard palette from Settings > Branding.
 * Fallback values keep the cards readable if the token block is ever missing.
 *
 * The grid itself is settings-driven: the wrapper receives --nl-cols / --nl-cols-md / --nl-cols-sm /
 * --nl-gap / --nl-ratio / --nl-width from Settings > Newsletters (each overridable per shortcode),
 * and `niramay-nl-cards-flat` switches the shadow off for a flatter look.
 */

.niramay-newsletters {
	--nl-cols: 3;
	--nl-cols-md: 2;
	--nl-cols-sm: 1;
	--nl-gap: 20px;
	--nl-ratio: 16 / 9;
	--nl-width: 1200px;
	color: var(--nrm-text, #171c26);
}

.niramay-newsletters.niramay-nl-center {
	max-width: var(--nl-width, 1200px);
	margin-left: auto;
	margin-right: auto;
}

.niramay-newsletters .niramay-nl-grid {
	display: grid;
	grid-template-columns: repeat(var(--nl-cols), minmax(0, 1fr));
	gap: var(--nl-gap);
}

.niramay-newsletters .niramay-nl-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--nrm-surface, #fff);
	border: 1px solid var(--nrm-border, #ebeaf1);
	border-radius: var(--nrm-radius-lg, 11px);
	transition: transform var(--nrm-transition, 160ms ease), box-shadow var(--nrm-transition, 160ms ease), border-color var(--nrm-transition, 160ms ease);
}

/* Elevated (default): a soft lift that says "clickable". */
.niramay-newsletters .niramay-nl-card {
	box-shadow: var(--nrm-shadow-sm, 0 2px 7px rgba(72, 72, 110, .07));
}

.niramay-newsletters .niramay-nl-card:hover {
	transform: translateY(-2px);
	border-color: var(--nrm-border-strong, #dddbe7);
	box-shadow: var(--nrm-shadow, 0 5px 14px rgba(72, 72, 110, .10));
}

/* Flat: no shadow, no lift — for sites that prefer a quieter grid. */
.niramay-newsletters.niramay-nl-cards-flat .niramay-nl-card {
	box-shadow: none;
}

.niramay-newsletters.niramay-nl-cards-flat .niramay-nl-card:hover {
	transform: none;
	box-shadow: none;
	background: var(--nrm-surface-2, #fbf9f6);
}

.niramay-newsletters .niramay-nl-thumb {
	width: 100%;
	height: auto;
	aspect-ratio: var(--nl-ratio);
	object-fit: cover;
	display: block;
	background: var(--nrm-surface-3, #f2ebe1);
	color: var(--nrm-brand-ink, #9a4614);
}

.niramay-newsletters .niramay-nl-thumb-fallback {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--nrm-brand-soft, #f2ebe1);
}

.niramay-newsletters .niramay-nl-thumb-fallback svg {
	width: 38px;
	height: 38px;
	stroke: var(--nrm-brand-ink, #9a4614);
	stroke-width: 1.4;
	fill: none;
	opacity: .85;
}

.niramay-newsletters .niramay-nl-card-body {
	display: flex;
	flex-direction: column;
	gap: var(--nrm-space-2, 8px);
	padding: var(--nrm-space-5, 20px);
}

.niramay-newsletters .niramay-nl-badge {
	align-self: flex-start;
	display: inline-block;
	padding: 3px 10px;
	border-radius: var(--nrm-radius-full, 999px);
	background: var(--nrm-brand-soft, #f2ebe1);
	color: var(--nrm-brand-ink, #9a4614);
	font-size: var(--nrm-font-xs, 12px);
	font-weight: 600;
	line-height: 1.5;
}

.niramay-newsletters .niramay-nl-card-title {
	margin: 0;
	font-family: var(--nrm-font-display, inherit);
	font-size: var(--nrm-font-lg, 18px);
	font-weight: 600;
	line-height: 1.32;
}

.niramay-newsletters .niramay-nl-card-title a {
	color: var(--nrm-text, #171c26);
	text-decoration: none;
}

.niramay-newsletters .niramay-nl-card-title a:hover {
	color: var(--nrm-brand-ink, #9a4614);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.niramay-newsletters .niramay-nl-date {
	font-size: var(--nrm-font-xs, 12px);
	color: var(--nrm-text-muted, #5c6474);
}

.niramay-newsletters .niramay-nl-desc {
	margin: 0;
	font-size: var(--nrm-font-base, 14px);
	line-height: 1.55;
	color: var(--nrm-text-secondary, #3f4757);
}

.niramay-newsletters .niramay-nl-card-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--nrm-space-2, 8px);
	margin-top: auto;
	padding-top: var(--nrm-space-4, 16px);
}

.niramay-newsletters .niramay-nl-button {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 9px 16px;
	border: 1px solid var(--nrm-border-strong, #dddbe7);
	border-radius: var(--nrm-radius, 7px);
	background: var(--nrm-surface, #fff);
	color: var(--nrm-text-secondary, #3f4757);
	font-size: var(--nrm-font-sm, 13px);
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
	transition: background var(--nrm-transition, 160ms ease), color var(--nrm-transition, 160ms ease), border-color var(--nrm-transition, 160ms ease);
}

.niramay-newsletters .niramay-nl-button:hover {
	background: var(--nrm-brand-soft, #f2ebe1);
	border-color: var(--nrm-brand, #d17839);
	color: var(--nrm-brand-ink, #9a4614);
}

.niramay-newsletters .niramay-nl-button-primary {
	border-color: var(--nrm-brand-strong, #ac4d1c);
	background: var(--nrm-brand-strong, #ac4d1c);
	color: var(--nrm-text-on-brand, #fff);
}

.niramay-newsletters .niramay-nl-button-primary:hover {
	background: var(--nrm-brand-ink, #9a4614);
	border-color: var(--nrm-brand-ink, #9a4614);
	color: var(--nrm-text-on-brand, #fff);
}

.niramay-newsletters a:focus-visible,
.niramay-newsletters .niramay-nl-button:focus-visible {
	outline: 2px solid var(--nrm-brand, #d17839);
	outline-offset: 2px;
}

/* List layout */
.niramay-newsletters .niramay-nl-list {
	display: flex;
	flex-direction: column;
	gap: var(--nl-gap);
}

.niramay-newsletters .niramay-nl-list .niramay-nl-card {
	flex-direction: row;
}

.niramay-newsletters .niramay-nl-list .niramay-nl-thumb {
	width: 280px;
	max-width: 40%;
	flex: 0 0 auto;
	aspect-ratio: auto;
	align-self: stretch;
	min-height: 180px;
}

/* Compact layout */
.niramay-newsletters .niramay-nl-compact {
	list-style: none;
	margin: 0;
	padding: 0;
}

.niramay-newsletters .niramay-nl-compact-item {
	display: flex;
	align-items: center;
	gap: var(--nrm-space-4, 16px);
	padding: var(--nrm-space-3, 12px) 0;
	border-bottom: 1px solid var(--nrm-border, #ebeaf1);
}

.niramay-newsletters .niramay-nl-compact-item:last-child {
	border-bottom: 0;
}

.niramay-newsletters .niramay-nl-compact .niramay-nl-thumb {
	width: 64px;
	height: 48px;
	flex: 0 0 auto;
	aspect-ratio: auto;
	object-fit: cover;
	border-radius: var(--nrm-radius-sm, 5px);
}

.niramay-newsletters .niramay-nl-compact-body {
	flex: 1;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--nrm-space-2, 8px);
}

.niramay-newsletters .niramay-nl-compact .niramay-nl-title {
	color: var(--nrm-text, #171c26);
	text-decoration: none;
	font-weight: 600;
}

.niramay-newsletters .niramay-nl-compact .niramay-nl-title:hover {
	color: var(--nrm-brand-ink, #9a4614);
}

/* Pagination */
.niramay-newsletters .niramay-nl-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: var(--nrm-space-1, 4px);
	margin-top: var(--nrm-space-6, 24px);
}

.niramay-newsletters .niramay-nl-page {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 12px;
	border: 1px solid var(--nrm-border-strong, #dddbe7);
	border-radius: var(--nrm-radius, 7px);
	background: var(--nrm-surface, #fff);
	color: var(--nrm-text-secondary, #3f4757);
	font-size: var(--nrm-font-sm, 13px);
	font-weight: 600;
	text-decoration: none;
	transition: background var(--nrm-transition, 160ms ease), color var(--nrm-transition, 160ms ease);
}

.niramay-newsletters .niramay-nl-page:hover {
	background: var(--nrm-brand-soft, #f2ebe1);
	color: var(--nrm-brand-ink, #9a4614);
}

.niramay-newsletters .niramay-nl-page-current,
.niramay-newsletters .niramay-nl-page-current:hover {
	border-color: var(--nrm-brand-strong, #ac4d1c);
	background: var(--nrm-brand-strong, #ac4d1c);
	color: var(--nrm-text-on-brand, #fff);
}

/* Empty state */
.niramay-newsletters.niramay-nl-empty {
	text-align: center;
	padding: var(--nrm-space-8, 40px) var(--nrm-space-5, 20px);
	color: var(--nrm-text-muted, #5c6474);
}

.niramay-newsletters .niramay-nl-debug {
	display: block;
	margin-top: var(--nrm-space-2, 8px);
	font-size: var(--nrm-font-xs, 12px);
	color: var(--nrm-text-muted, #5c6474);
}

/* Responsive: the breakpoints stay fixed, the column counts come from settings. */
@media (max-width: 900px) {
	.niramay-newsletters .niramay-nl-grid {
		grid-template-columns: repeat(var(--nl-cols-md), minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.niramay-newsletters .niramay-nl-grid {
		grid-template-columns: repeat(var(--nl-cols-sm), minmax(0, 1fr));
	}

	.niramay-newsletters .niramay-nl-list .niramay-nl-card {
		flex-direction: column;
	}

	.niramay-newsletters .niramay-nl-list .niramay-nl-thumb {
		width: 100%;
		max-width: none;
		aspect-ratio: var(--nl-ratio);
		min-height: 0;
	}
}

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