/**
 * Shared project cards — Recess-in-Varanasi look
 * Use on landing + more_xp sections across projects.
 *
 * Markup (preferred):
 *   .more_xp.more_xp--grid|.more_xp--stack
 *     .xp_text
 *     ul > li > a > .project_thumb
 *       .project_thumb_image > img|placeholder
 *       .project_thumb_text > h2 + .tags
 *
 * Also supports Delhi’s .project_list > a > .project_thumb
 */

:root {
	--rt-card-bg: #ffffff;
	--rt-card-ink: #292723;
	--rt-card-accent: #bd8c22;
	--rt-card-muted: rgba(41, 39, 35, 0.55);
	--rt-card-image-bg: #252525;
	--rt-card-shadow: 7px 7px 0 0 rgba(0, 0, 0, 0.1);
	--rt-card-shadow-hover: 9px 9px 0 0 rgba(0, 0, 0, 0.12);
	--rt-card-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--rt-cards-surface: transparent;
	--rt-cards-max: 1120px;
	--rt-card-radius: 0;
	--rt-card-title-size: 1.05rem;
	--rt-card-tag-size: 0.85rem;
}

/* —— Section shell —— */
.more_xp a {
	color: inherit;
	text-decoration: none;
}

.xp_text {
	position: relative;
	text-align: center;
	width: 100%;
	box-sizing: border-box;
	padding: 40px 16px 12px;
	margin: 0;
	float: none;
	color: var(--rt-card-ink);
	font-size: clamp(1.15rem, 2.2vw, 1.5rem);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-weight: 600;
	line-height: 1.25;
}

.xp_text h1 {
	margin: 0;
	font-size: inherit;
	font-weight: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
}

.xp_border {
	height: 3px;
	width: 72px;
	margin: 10px auto 0;
	background: var(--rt-card-accent);
	border: 0;
	position: static;
	left: auto;
}

/* —— Card —— */
.project_thumb {
	width: 100%;
	max-width: none;
	margin: 0;
	padding-top: 1px;
	box-sizing: border-box;
	background: var(--rt-card-bg);
	border: 0 solid transparent;
	border-radius: var(--rt-card-radius);
	cursor: pointer;
	position: relative;
	float: none;
	box-shadow: var(--rt-card-shadow);
	transition: transform 0.35s var(--rt-card-ease), box-shadow 0.35s var(--rt-card-ease);
}

.project_thumb_image {
	opacity: 1;
	background: var(--rt-card-image-bg);
	height: auto;
	overflow: hidden;
	margin: 0;
	width: 100%;
	position: relative;
	border-radius: var(--rt-card-radius) var(--rt-card-radius) 0 0;
}

.project_thumb .project_thumb_image img,
.project_thumb_image img,
.project_thumb_image .placeholder,
.project_thumb_image .placeholder img {
	display: block;
	width: 100%;
	height: auto;
	opacity: 0.85;
	border: 0;
	transition: opacity 0.35s ease, transform 0.5s var(--rt-card-ease);
}

.project_thumb_image .placeholder {
	opacity: 1;
	position: relative;
	overflow: hidden;
}

.project_thumb_image .placeholder img {
	opacity: 0.85;
}

.project_thumb_image .placeholder img.img-large,
.project_thumb_image .placeholder img.loaded {
	opacity: 0.85;
}

.project_thumb_text {
	padding: 10px 12px 14px;
	text-align: left;
	text-transform: uppercase;
	color: var(--rt-card-ink);
	font-size: var(--rt-card-title-size);
	line-height: 1.25;
	box-sizing: border-box;
}

.project_thumb_text h2 {
	margin: 0;
	padding: 0;
	font-size: inherit;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: inherit;
	line-height: 1.2;
}

.project_thumb_text .tags {
	display: block;
	margin-top: 6px;
	color: var(--rt-card-accent);
	font-size: var(--rt-card-tag-size);
	letter-spacing: 0.02em;
	text-transform: none;
	font-weight: 400;
	line-height: 1.35;
}

.project_thumb:hover,
.project_thumb:focus-within {
	transform: translateY(-3px);
	box-shadow: var(--rt-card-shadow-hover);
}

.project_thumb:hover .project_thumb_image img,
.project_thumb:focus-within .project_thumb_image img,
.project_thumb:hover .project_thumb_image .placeholder img,
.project_thumb:focus-within .project_thumb_image .placeholder img {
	opacity: 1;
}

a:focus-visible .project_thumb {
	outline: 2px solid var(--rt-card-accent);
	outline-offset: 3px;
}

/* —— Stack layout (about sidebars: page CSS owns float/width) —— */
.more_xp--stack .xp_text {
	padding: 32px 0 8px;
	transform: none;
	margin: 0;
	left: auto;
}

.more_xp--stack ul {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	width: 98%;
	max-width: 400px;
	display: block;
}

.more_xp--stack ul li {
	float: none;
	width: 100%;
	margin: 0 0 22px;
	padding: 0;
	list-style: none;
}

.more_xp--stack .project_thumb {
	margin: 0 auto;
}

/* —— Grid layout (landing + project footers) —— */
.more_xp--grid {
	width: 100%;
	float: none;
	box-sizing: border-box;
	padding: 0 0 56px;
	background: var(--rt-cards-surface);
}

.more_xp--grid > ul,
.more_xp--grid .project_list {
	list-style: none;
	margin: 0 auto;
	padding: 8px 0 0;
	width: min(94%, var(--rt-cards-max));
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: stretch;
	gap: 0;
	box-sizing: border-box;
}

.more_xp--grid > ul li,
.more_xp--grid .project_list > a {
	float: none;
	display: block;
	width: 31%;
	margin: 0 1.15% 28px;
	padding: 0;
	box-sizing: border-box;
	text-decoration: none;
	color: inherit;
}

.more_xp--grid .project_thumb {
	height: 100%;
}

/* Landing: slightly roomier page chrome */
.more_xp--landing {
	--rt-cards-surface: transparent;
	padding-bottom: 32px;
	max-width: 1300px;
	margin: 0 auto;
}

.more_xp--landing .xp_text {
	padding-top: 48px;
	padding-bottom: 4px;
	font-family: "Oswald", "Segoe UI", sans-serif;
	font-weight: 400;
}

.more_xp--landing .project_thumb_text h2 {
	font-family: "Oswald", "Segoe UI", sans-serif;
	font-weight: 400;
}

@media screen and (max-width: 1024px) {
	.more_xp--grid > ul li,
	.more_xp--grid .project_list > a {
		width: 47%;
		margin: 0 1.5% 24px;
	}
}

@media screen and (max-width: 650px) {
	.more_xp--grid > ul,
	.more_xp--grid .project_list {
		width: 88%;
	}

	.more_xp--grid > ul li,
	.more_xp--grid .project_list > a {
		width: 100%;
		margin: 0 0 20px;
	}

	.xp_text {
		font-size: 1.1rem;
		padding: 28px 12px 8px;
	}

	.project_thumb_text {
		font-size: 1rem;
	}
}