/**
 * About group (ઈતિહાસ / કેળવણી મંડળ / વેબ સાઈટ પ્રોજેક્ટ / પ્રવૃત્તિઓ).
 * Prose layout helpers + the samuday-simple-table widget (Figma 76:3810).
 */

/* Article column must be allowed to shrink next to the fixed 340px sidebar. */
.sd-article { min-width: 0; }
.sd-article .elementor-widget-text-editor p:last-child { margin-bottom: 0; }

/* Quote block bar keeps its full height even though the container is empty. */
.sd-quote-bar { min-height: 100%; align-self: stretch; }

/* Sidebar cards: link colour follows the card text colour. */
.sd-side .elementor-icon-list-item a,
.sd-side .elementor-icon-list-item a:hover { color: inherit; }
.sd-side--dark .elementor-icon-list-item a:hover { color: var(--sd-accent-gold, #c9a24a); }

/* Check list in the Kelavani article. */
.sd-checklist .elementor-icon-list-icon svg { width: 18px; height: 18px; }

/* ------------------------------------------------------------- Table */
.sd-table-wrap { width: 100%; }
.sd-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	background: #fff;
	border: 1px solid var(--sd-border-default, #e7dcc6);
	border-radius: 16px;
	overflow: hidden;
	font-family: "Mukta Vaani", sans-serif;
}
.sd-table thead th {
	background: var(--sd-background-cream-deep, #f4ead6);
	color: var(--sd-text-muted, #7a6656);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0.3px;
	text-transform: uppercase;
	text-align: left;
	padding: 14px 16px;
}
.sd-table tbody td {
	padding: 16px;
	font-size: 15px;
	line-height: 1.5;
	color: var(--sd-text-primary, #3b2416);
	border: 0;
}
.sd-table tbody td:first-child { font-weight: 500; }
.sd-table tbody tr:nth-child(even) td { background: var(--sd-surface-card-tint, #fffbf3); }
.sd-table th:nth-child(1), .sd-table td:nth-child(1) { width: 42%; }

.sd-pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 6px;
	margin-top: 48px;
}
.sd-pagination .sd-page {
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	border: 1px solid var(--sd-border-default, #e7dcc6);
	background: #fff;
	color: var(--sd-text-primary, #3b2416);
	font: 500 15px/1.5 "Mukta Vaani", sans-serif;
	cursor: pointer;
	padding: 0;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.sd-pagination .sd-page:hover { border-color: var(--sd-primary-maroon, #7a1f1f); color: var(--sd-primary-maroon, #7a1f1f); }
.sd-pagination .sd-page.is-active {
	background: var(--sd-primary-maroon, #7a1f1f);
	border-color: var(--sd-primary-maroon, #7a1f1f);
	color: var(--sd-text-on-dark, #fff8ec);
}
.sd-pagination .sd-page[disabled] { opacity: 0.4; cursor: default; }

/* Mobile: table rows become stacked cards (Figma mobile frames). */
@media (max-width: 767px) {
	.sd-table, .sd-table tbody, .sd-table tr, .sd-table td { display: block; width: 100%; }
	.sd-table { background: transparent; border: 0; border-radius: 0; overflow: visible; }
	.sd-table thead { display: none; }
	.sd-table tbody tr {
		background: #fff;
		border: 1px solid var(--sd-border-default, #e7dcc6);
		border-radius: 16px;
		padding: 6px 16px;
		margin-bottom: 12px;
	}
	.sd-table tbody tr[hidden] { display: none; }
	.sd-table tbody tr:nth-child(even) td { background: transparent; }
	.sd-table tbody td {
		display: flex;
		justify-content: space-between;
		gap: 16px;
		padding: 10px 0;
		border-bottom: 1px solid var(--sd-border-default, #e7dcc6);
	}
	.sd-table tbody td:last-child { border-bottom: 0; }
	.sd-table tbody td::before {
		content: attr(data-label);
		flex: 0 0 38%;
		font-size: 13px;
		font-weight: 500;
		letter-spacing: 0.3px;
		text-transform: uppercase;
		color: var(--sd-text-muted, #7a6656);
	}
	.sd-table tbody td span { text-align: right; }
	.sd-pagination { margin-top: 24px; }
}

/* ------------------------------------------------ About-page icon/avatar fixes */
/* Elementor forces `fill: currentColor` on icon / icon-list SVGs; the plugin icon set is
   stroke-based with fill="none" on the root, so closed shapes render as solid blobs.
   Scoped to the four About pages (20 itihas, 73 kelavani-mandal, 74 website-project, 22 pravruttio). */
.page-id-20 .elementor-icon svg[fill="none"],
.page-id-73 .elementor-icon svg[fill="none"],
.page-id-74 .elementor-icon svg[fill="none"],
.page-id-22 .elementor-icon svg[fill="none"],
.page-id-20 .elementor-icon-list-icon svg[fill="none"],
.page-id-73 .elementor-icon-list-icon svg[fill="none"],
.page-id-74 .elementor-icon-list-icon svg[fill="none"],
.page-id-22 .elementor-icon-list-icon svg[fill="none"] { fill: none; }

/* Initials avatar must be a 96px circle (Figma Member card), not a pill. */
.elementor-widget-heading.sd-about-avatar { height: 96px; }
.sd-about-avatar .elementor-widget-container,
.sd-about-avatar .elementor-heading-title { height: 100%; }

/* lib.php puts `sd-btn sd-btn--<variant>` on the Elementor button WIDGET wrapper, where the
   plugin's tokens CSS (.sd-btn = a real anchor button) adds its own padding, background and
   pill radius around the actual .elementor-button. Neutralise it here so buttons are the
   47px Figma size. Scoped to the About pages. */
:is(.page-id-20, .page-id-73, .page-id-74, .page-id-22) .elementor-widget-button.sd-btn,
:is(.page-id-20, .page-id-73, .page-id-74, .page-id-22) .elementor-widget-button.sd-btn:hover {
	display: block;
	padding: 0;
	gap: 0;
	margin: 0;
	border: 0;
	border-radius: 0;
	background-color: transparent;
	box-shadow: none;
}