/**
 * Rajgir Parent Theme
 *
 * Component CSS — Cards
 *
 * Canonical path:
 * assets/css/components/cards.css
 *
 * Responsibility:
 * - Shared card presentation foundation.
 * - News card presentation.
 * - Feed card presentation.
 * - Tourism card presentation.
 * - Vibhuti card presentation.
 * - Generic content/post card presentation.
 * - Card media, body, title, excerpt, meta and footer.
 *
 * Architecture:
 *
 * TOKENS
 *    ↓
 * BASE
 *    ↓
 * CARDS
 *    ↓
 * TEMPLATE-PARTS / PATTERNS
 *
 * This file does NOT:
 * - own business logic;
 * - query application databases;
 * - perform ranking;
 * - perform recommendation;
 * - perform authorization;
 * - perform booking;
 * - perform payment;
 * - mutate application state.
 *
 * @package Rajgir
 */


/* ==========================================================================
   1. SHARED CARD FOUNDATION
   ========================================================================== */

.rg-news-card,
.rg-tourism-card,
.rg-vibhuti-card,
.rg-content-card,
.rg-post-card,
.rg-feed-card,
.rg-discovery-card {
	position: relative;

	width: 100%;
	min-width: 0;

	background:
		var(--rajgir-color-surface);

	border:
		1px solid var(--rajgir-color-border);

	border-radius:
		var(--rajgir-radius-card);

	box-shadow:
		var(--rajgir-shadow-card);

	overflow: hidden;
}


/* ==========================================================================
   2. CARD LINKS
   ========================================================================== */

.rg-news-card a,
.rg-tourism-card a,
.rg-vibhuti-card a,
.rg-content-card a,
.rg-post-card a,
.rg-feed-card a,
.rg-discovery-card a {
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.15em;
}


/* ==========================================================================
   3. CARD MEDIA
   ========================================================================== */

.rg-news-card__media,
.rg-tourism-card__media,
.rg-vibhuti-card__media,
.rg-content-card__media,
.rg-post-card__media,
.rg-feed-card__media,
.rg-card-media {
	display: block;

	width: 100%;

	overflow: hidden;
}


/* ==========================================================================
   4. CARD MEDIA LINK
   ========================================================================== */

.rg-news-card__media-link {
	display: block;

	width: 100%;
}


/* ==========================================================================
   5. CARD IMAGES
   ========================================================================== */

.rg-news-card__image,
.rg-tourism-card__image,
.rg-vibhuti-card__image,
.rg-content-card__image,
.rg-post-card__image,
.rg-feed-card__media img,
.rg-card-media img {
	display: block;

	width: 100%;
	max-width: 100%;
	height: auto;
}


/* ==========================================================================
   6. CARD IMAGE INTERACTION
   ========================================================================== */

.rg-news-card__media-link,
.rg-tourism-card__media,
.rg-vibhuti-card__media,
.rg-content-card__media,
.rg-post-card__media,
.rg-feed-card__media {
	color: inherit;

	text-decoration: none;
}


/* ==========================================================================
   7. CARD BODY
   ========================================================================== */

.rg-news-card__body,
.rg-tourism-card__body,
.rg-vibhuti-card__body,
.rg-content-card__body,
.rg-post-card__body,
.rg-feed-card__body,
.rg-card-content {
	padding:
		var(--rajgir-space-card-content);
}


/* ==========================================================================
   8. CARD HEADER
   ========================================================================== */

.rg-content-card__header,
.rg-card-header {
	display: flex;

	align-items: flex-start;

	gap:
		var(--rajgir-space-component-gap);

	min-width: 0;
}


/* ==========================================================================
   9. CARD TITLE
   ========================================================================== */

.rg-news-card__title,
.rg-tourism-card__title,
.rg-vibhuti-card__name,
.rg-content-card__title,
.rg-post-card__title,
.rg-feed-card__title,
.rg-card-title {
	margin:
		0 0 var(--rajgir-space-card-title-gap);

	color:
		var(--rajgir-color-text);

	font-family:
		var(--rajgir-type-card-title-font-family);

	font-size:
		var(--rajgir-type-card-title-font-size);

	font-weight:
		var(--rajgir-type-card-title-font-weight);

	line-height:
		var(--rajgir-type-card-title-line-height);

	overflow-wrap:
		break-word;
}


/* ==========================================================================
   10. CARD TITLE LINKS
   ========================================================================== */

.rg-news-card__title a,
.rg-tourism-card__title-link,
.rg-vibhuti-card__name-link,
.rg-content-card__title a,
.rg-post-card__title a,
.rg-feed-card__title a,
.rg-card-title a {
	color:
		var(--rajgir-color-text);

	text-decoration:
		none;
}


/* ==========================================================================
   11. CARD TITLE HOVER
   ========================================================================== */

.rg-news-card__title a:hover,
.rg-tourism-card__title-link:hover,
.rg-vibhuti-card__name-link:hover,
.rg-content-card__title a:hover,
.rg-post-card__title a:hover,
.rg-feed-card__title a:hover,
.rg-card-title a:hover {
	color:
		var(--rajgir-color-primary);
}


/* ==========================================================================
   12. CARD TITLE FOCUS
   ========================================================================== */

.rg-news-card__title a:focus-visible,
.rg-tourism-card__title-link:focus-visible,
.rg-vibhuti-card__name-link:focus-visible,
.rg-content-card__title a:focus-visible,
.rg-post-card__title a:focus-visible,
.rg-feed-card__title a:focus-visible,
.rg-card-title a:focus-visible {
	outline:
		2px solid var(--rajgir-color-focus);

	outline-offset:
		2px;
}


/* ==========================================================================
   13. CARD EXCERPT
   ========================================================================== */

.rg-news-card__excerpt,
.rg-content-card__excerpt,
.rg-post-card__excerpt,
.rg-feed-card__excerpt,
.rg-excerpt {
	margin:
		0;

	color:
		var(--rajgir-color-text-muted);

	font-family:
		var(--rajgir-font-family-body);

	font-size:
		var(--rajgir-font-size-card-excerpt);

	line-height:
		var(--rajgir-line-height-card-excerpt);
}


/* ==========================================================================
   14. NEWS CARD
   ========================================================================== */

.rg-news-card,
.news-card {
	display: flex;

	flex-direction: column;
}


/* ==========================================================================
   15. NEWS CARD BODY
   ========================================================================== */

.rg-news-card__body {
	display: flex;

	flex-direction: column;

	gap:
		var(--rajgir-space-card-section-gap);
}


/* ==========================================================================
   16. NEWS CATEGORY
   ========================================================================== */

.rg-news-card__category {
	display: inline-flex;

	align-items: center;

	align-self: flex-start;
}


/* ==========================================================================
   17. NEWS CATEGORY LINK
   ========================================================================== */

.rg-news-card__category-link {
	display: inline-flex;

	align-items: center;

	color:
		var(--rajgir-color-primary);

	font-size:
		var(--rajgir-font-size-small);

	font-weight:
		var(--rajgir-font-weight-semibold);

	text-decoration: none;
}


/* ==========================================================================
   18. NEWS META
   ========================================================================== */

.rg-news-card__meta,
.news-card__meta,
.rg-content-card__meta {
	display: flex;

	align-items: center;

	flex-wrap: wrap;

	gap:
		var(--rajgir-space-meta-gap);

	color:
		var(--rajgir-color-text-muted);

	font-size:
		var(--rajgir-font-size-small);

	line-height:
		var(--rajgir-line-height-small);
}


/* ==========================================================================
   19. NEWS ACTIONS
   ========================================================================== */

.rg-news-card__actions,
.news-card__actions,
.rg-content-card__footer,
.rg-post-card__footer {
	display: flex;

	align-items: center;

	flex-wrap: wrap;

	gap:
		var(--rajgir-space-component-gap);

	margin-top:
		var(--rajgir-space-card-section-gap);
}


/* ==========================================================================
   20. NEWS READ MORE
   ========================================================================== */

.rg-news-card__read-more,
.news-card__read-more,
.rg-content-card__read-more,
.rg-post-card__read-more {
	display: inline-flex;

	align-items: center;

	color:
		var(--rajgir-color-primary);

	font-weight:
		var(--rajgir-font-weight-semibold);

	text-decoration: none;
}


/* ==========================================================================
   21. NEWS READ MORE HOVER
   ========================================================================== */

.rg-news-card__read-more:hover,
.news-card__read-more:hover,
.rg-content-card__read-more:hover,
.rg-post-card__read-more:hover {
	color:
		var(--rajgir-color-primary-hover);
}


/* ==========================================================================
   22. TOURISM CARD
   ========================================================================== */

.rg-tourism-card,
.tourism-card {
	display: flex;

	flex-direction: column;
}


/* ==========================================================================
   23. TOURISM CARD BODY
   ========================================================================== */

.rg-tourism-card__body {
	display: flex;

	flex-direction: column;

	gap:
		var(--rajgir-space-card-section-gap);
}


/* ==========================================================================
   24. TOURISM CARD TITLE
   ========================================================================== */

.rg-tourism-card__title {
	margin:
		0;
}


/* ==========================================================================
   25. TOURISM LOCATION
   ========================================================================== */

.rg-tourism-card__location {
	color:
		var(--rajgir-color-text-muted);

	font-size:
		var(--rajgir-font-size-small);

	line-height:
		var(--rajgir-line-height-small);
}


/* ==========================================================================
   26. TOURISM CONTEXT
   ========================================================================== */

.rg-tourism-card__context {
	margin:
		0;

	color:
		var(--rajgir-color-text-muted);

	font-family:
		var(--rajgir-font-family-body);

	font-size:
		var(--rajgir-font-size-card-excerpt);

	line-height:
		var(--rajgir-line-height-card-excerpt);
}


/* ==========================================================================
   27. TOURISM CTA
   ========================================================================== */

.rg-tourism-card__cta {
	display: inline-flex;

	align-items: center;

	align-self: flex-start;

	gap:
		var(--rajgir-space-icon-gap);

	color:
		var(--rajgir-color-primary);

	font-weight:
		var(--rajgir-font-weight-semibold);

	text-decoration: none;
}


/* ==========================================================================
   28. TOURISM CTA ICON
   ========================================================================== */

.rg-tourism-card__cta-icon {
	display: inline-flex;

	align-items: center;

	justify-content: center;
}


/* ==========================================================================
   29. VIBHUTI CARD
   ========================================================================== */

.rg-vibhuti-card,
.vibhuti-card {
	display: flex;

	flex-direction: column;
}


/* ==========================================================================
   30. VIBHUTI CARD BODY
   ========================================================================== */

.rg-vibhuti-card__body {
	display: flex;

	flex-direction: column;

	gap:
		var(--rajgir-space-card-section-gap);
}


/* ==========================================================================
   31. VIBHUTI NAME
   ========================================================================== */

.rg-vibhuti-card__name {
	margin:
		0;
}


/* ==========================================================================
   32. VIBHUTI CLASSIFICATION
   ========================================================================== */

.rg-vibhuti-card__classification {
	margin:
		0;

	color:
		var(--rajgir-color-text-muted);

	font-size:
		var(--rajgir-font-size-small);

	line-height:
		var(--rajgir-line-height-small);
}


/* ==========================================================================
   33. VIBHUTI RECOGNITION
   ========================================================================== */

.rg-vibhuti-card__recognition {
	margin:
		0;

	color:
		var(--rajgir-color-text);
}

.rg-vibhuti-card__recognition-label {
	font-weight:
		var(--rajgir-font-weight-semibold);
}


/* ==========================================================================
   34. VIBHUTI CONTEXT
   ========================================================================== */

.rg-vibhuti-card__context {
	margin:
		0;

	color:
		var(--rajgir-color-text-muted);

	font-family:
		var(--rajgir-font-family-body);

	font-size:
		var(--rajgir-font-size-card-excerpt);

	line-height:
		var(--rajgir-line-height-card-excerpt);
}


/* ==========================================================================
   35. VIBHUTI CTA
   ========================================================================== */

.rg-vibhuti-card__cta {
	display: inline-flex;

	align-items: center;

	align-self: flex-start;

	gap:
		var(--rajgir-space-icon-gap);

	color:
		var(--rajgir-color-primary);

	font-weight:
		var(--rajgir-font-weight-semibold);

	text-decoration: none;
}


/* ==========================================================================
   36. GENERIC CONTENT CARD
   ========================================================================== */

.rg-content-card,
.rg-post-card {
	display: flex;

	flex-direction: column;
}


/* ==========================================================================
   37. GENERIC CONTENT CARD MEDIA
   ========================================================================== */

.rg-content-card__media,
.rg-post-card__media {
	display: block;

	width: 100%;
}


/* ==========================================================================
   38. GENERIC CONTENT CARD BODY
   ========================================================================== */

.rg-content-card__body,
.rg-post-card__body {
	display: flex;

	flex-direction: column;

	gap:
		var(--rajgir-space-card-section-gap);
}


/* ==========================================================================
   39. GENERIC CARD DATE / POST TYPE
   ========================================================================== */

.rg-content-card__date,
.rg-content-card__post-type,
.rg-post-card__date,
.rg-post-card__post-type {
	color:
		var(--rajgir-color-text-muted);

	font-size:
		var(--rajgir-font-size-small);
}


/* ==========================================================================
   40. FEED CARD
   ========================================================================== */

.rg-feed-card {
	display: flex;

	flex-direction: column;
}


/* ==========================================================================
   41. FEED CARD HEADER
   ========================================================================== */

.rg-feed-card .rg-card-header {
	display: flex;

	align-items: center;

	gap:
		var(--rajgir-space-component-gap);

	padding:
		var(--rajgir-space-card-header);
}


/* ==========================================================================
   42. FEED CARD INFO
   ========================================================================== */

.rg-card-info {
	flex:
		1 1 auto;

	min-width:
		0;
}


/* ==========================================================================
   43. FEED AUTHOR
   ========================================================================== */

.rg-author {
	color:
		var(--rajgir-color-text);

	font-weight:
		var(--rajgir-font-weight-semibold);
}


/* ==========================================================================
   44. FEED META
   ========================================================================== */

.rg-meta {
	margin-top:
		var(--rajgir-space-meta-top);

	color:
		var(--rajgir-color-text-muted);

	font-size:
		var(--rajgir-font-size-small);
}


/* ==========================================================================
   45. FEED TYPE
   ========================================================================== */

.rg-feed-card__type {
	display: inline-flex;

	align-items: center;

	align-self: flex-start;

	color:
		var(--rajgir-color-text-muted);

	font-size:
		var(--rajgir-font-size-small);

	font-weight:
		var(--rajgir-font-weight-semibold);
}


/* ==========================================================================
   46. FEED CONTENT
   ========================================================================== */

.rg-feed-card .rg-card-content {
	padding:
		var(--rajgir-space-card-content);
}


/* ==========================================================================
   47. FEED CARD MEDIA
   ========================================================================== */

.rg-feed-card .rg-card-media {
	display: block;

	width: 100%;
}


/* ==========================================================================
   48. FEED CARD MEDIA IMAGE
   ========================================================================== */

.rg-feed-card .rg-card-media img {
	display: block;

	width: 100%;
	height: auto;
}


/* ==========================================================================
   49. FEED CARD ACTIONS
   ========================================================================== */

.rg-feed-card .rg-card-actions {
	display: flex;

	align-items: center;

	gap:
		var(--rajgir-space-component-gap);

	padding:
		var(--rajgir-space-card-actions);

	border-top:
		1px solid var(--rajgir-color-border);
}


/* ==========================================================================
   50. DISCOVERY CARD
   ========================================================================== */

.rg-discovery-card {
	display: flex;

	align-items: center;

	gap:
		var(--rajgir-space-component-gap);

	padding:
		var(--rajgir-space-card-content);

	color:
		var(--rajgir-color-text);

	text-decoration: none;
}


/* ==========================================================================
   51. DISCOVERY CARD HOVER
   ========================================================================== */

.rg-discovery-card:hover {
	background:
		var(--rajgir-color-surface-hover);
}


/* ==========================================================================
   52. CARD HOVER
   ========================================================================== */

/*
 * Cards are not automatically made clickable.
 *
 * Hover treatment remains subtle and does not communicate
 * business state.
 */

.rg-news-card:hover,
.rg-tourism-card:hover,
.rg-vibhuti-card:hover,
.rg-content-card:hover,
.rg-post-card:hover,
.rg-feed-card:hover {
	border-color:
		var(--rajgir-color-border-hover);
}


/* ==========================================================================
   53. CARD FOCUS WITHIN
   ========================================================================== */

.rg-news-card:focus-within,
.rg-tourism-card:focus-within,
.rg-vibhuti-card:focus-within,
.rg-content-card:focus-within,
.rg-post-card:focus-within,
.rg-feed-card:focus-within {
	border-color:
		var(--rajgir-color-focus);
}


/* ==========================================================================
   54. CARD MEDIA ASPECT-RATIO
   ========================================================================== */

/*
 * Do not force an aspect ratio globally.
 *
 * Individual media components may provide an approved aspect ratio
 * where the design contract requires one.
 */


/* ==========================================================================
   55. CARD IMAGE FAILURE SAFETY
   ========================================================================== */

.rg-news-card__image,
.rg-tourism-card__image,
.rg-vibhuti-card__image,
.rg-content-card__image,
.rg-post-card__image {
	background:
		var(--rajgir-color-surface);
}


/* ==========================================================================
   56. CARD CONTENT WRAPPING
   ========================================================================== */

.rg-news-card,
.rg-tourism-card,
.rg-vibhuti-card,
.rg-content-card,
.rg-post-card,
.rg-feed-card {
	overflow-wrap:
		break-word;
}


/* ==========================================================================
   57. CARD ACCESSIBILITY
   ========================================================================== */

.rg-news-card a:focus-visible,
.rg-tourism-card a:focus-visible,
.rg-vibhuti-card a:focus-visible,
.rg-content-card a:focus-visible,
.rg-post-card a:focus-visible,
.rg-feed-card a:focus-visible {
	outline:
		2px solid var(--rajgir-color-focus);

	outline-offset:
		2px;
}


/* ==========================================================================
   58. CARD MOTION
   ========================================================================== */

.rg-news-card,
.rg-tourism-card,
.rg-vibhuti-card,
.rg-content-card,
.rg-post-card,
.rg-feed-card,
.rg-discovery-card {
	transition:
		var(--rajgir-motion-transition-fast);
}


/* ==========================================================================
   59. REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

	.rg-news-card,
	.rg-tourism-card,
	.rg-vibhuti-card,
	.rg-content-card,
	.rg-post-card,
	.rg-feed-card,
	.rg-discovery-card {
		transition:
			none;
	}

}


/* ==========================================================================
   60. CARD RESPONSIBILITY BOUNDARY
   ========================================================================== */

/*
 * This file owns reusable card presentation.
 *
 * It does NOT decide:
 *
 * - which content is recommended;
 * - which post ranks first;
 * - which tourism place is selected;
 * - whether a user is authorized;
 * - whether a booking is available;
 * - whether a payment succeeds;
 * - whether a complaint is resolved.
 *
 * Those decisions remain with their approved application/domain owners.
 */


/* ==========================================================================
   61. COMPONENT REUSE RULE
   ========================================================================== */

/*
 * Preferred composition:
 *
 * Pattern
 *    ↓
 * Card
 *    ↓
 * Media / Meta / Badge / Button
 *    ↓
 * Tokens
 *
 * Do not create a separate giant card for every page.
 */


/* ==========================================================================
   62. NO GIANT CARD SYSTEM
   ========================================================================== */

/*
 * News Card
 * Tourism Card
 * Vibhuti Card
 * Feed Card
 * Content Card
 *
 * may share the common visual foundation, while retaining their
 * domain-specific presentation classes.
 *
 * Do not merge unrelated business responsibilities into one card.
 */