/**
 * Rajgir Parent Theme
 *
 * Component CSS — Media
 *
 * Canonical path:
 * assets/css/components/media.css
 *
 * Media presentation components:
 * - Image
 * - Video
 * - Thumbnail
 * - Avatar
 * - Gallery
 * - Media Placeholder
 *
 * Architecture:
 *
 * RG_MEDIA
 *     ↓
 * Media Asset / Metadata / Reference
 *     ↓
 * Approved Delivery
 *     ↓
 * Rajgir Theme
 *     ↓
 * Media Presentation
 *
 * This file does NOT own:
 * - media storage;
 * - media processing;
 * - image optimization;
 * - video transcoding;
 * - media validation;
 * - media lifecycle;
 * - CDN selection;
 * - object storage;
 * - media database authority.
 *
 * @package Rajgir
 */


/* ==========================================================================
   1. MEDIA FOUNDATION
   ========================================================================== */

.rg-media {
	display: block;

	max-width: 100%;
}


/* ==========================================================================
   2. IMAGE
   ========================================================================== */

.rg-media__image,
.rg-image {
	display: block;

	width: 100%;
	max-width: 100%;

	height: auto;
}


/* ==========================================================================
   3. IMAGE LINK
   ========================================================================== */

.rg-media__link,
.rg-image-link {
	display: block;

	max-width: 100%;

	color: inherit;

	text-decoration: none;
}


/* ==========================================================================
   4. IMAGE FIGURE
   ========================================================================== */

.rg-media__figure,
.rg-image-figure {
	margin: 0;

	max-width: 100%;
}


/* ==========================================================================
   5. IMAGE CAPTION
   ========================================================================== */

.rg-media__caption,
.rg-image-caption,
figcaption {
	margin-top:
		var(--rajgir-space-media-caption-gap);

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

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

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

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


/* ==========================================================================
   6. RESPONSIVE IMAGE FOUNDATION
   ========================================================================== */

.rg-media img,
.rg-image,
.rg-thumbnail img,
.rg-avatar img,
.rg-gallery img {
	max-width: 100%;
	height: auto;
}


/*
 * Responsive delivery itself is determined by the approved media
 * delivery architecture / HTML attributes / media service.
 *
 * CSS does not create image derivatives.
 */


/* ==========================================================================
   7. IMAGE OBJECT FIT
   ========================================================================== */

.rg-media--cover .rg-media__image,
.rg-image--cover {
	width: 100%;

	height: 100%;

	object-fit: cover;
}


/* ==========================================================================
   8. IMAGE OBJECT CONTAIN
   ========================================================================== */

.rg-media--contain .rg-media__image,
.rg-image--contain {
	width: 100%;

	height: 100%;

	object-fit: contain;
}


/* ==========================================================================
   9. MEDIA RATIO CONTAINER
   ========================================================================== */

.rg-media--ratio {
	position: relative;

	overflow: hidden;

	width: 100%;

	aspect-ratio:
		var(--rajgir-media-ratio);
}


/* ==========================================================================
   10. RATIO IMAGE
   ========================================================================== */

.rg-media--ratio .rg-media__image {
	width: 100%;
	height: 100%;

	object-fit: cover;
}


/* ==========================================================================
   11. MEDIA ALIGNMENT
   ========================================================================== */

.rg-media--center {
	display: flex;

	align-items: center;
	justify-content: center;
}


/* ==========================================================================
   12. MEDIA FULL WIDTH
   ========================================================================== */

.rg-media--full {
	width: 100%;
}


/* ==========================================================================
   13. THUMBNAIL
   ========================================================================== */

.rg-thumbnail {
	display: block;

	position: relative;

	width:
		var(--rajgir-thumbnail-size);

	height:
		var(--rajgir-thumbnail-size);

	overflow: hidden;

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

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


/* ==========================================================================
   14. THUMBNAIL IMAGE
   ========================================================================== */

.rg-thumbnail img,
.rg-thumbnail__image {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;
}


/* ==========================================================================
   15. THUMBNAIL LINK
   ========================================================================== */

.rg-thumbnail a {
	display: block;

	width: 100%;
	height: 100%;

	color: inherit;

	text-decoration: none;
}


/* ==========================================================================
   16. THUMBNAIL SIZES
   ========================================================================== */

.rg-thumbnail--small {
	width:
		var(--rajgir-thumbnail-size-sm);

	height:
		var(--rajgir-thumbnail-size-sm);
}


.rg-thumbnail--medium {
	width:
		var(--rajgir-thumbnail-size-md);

	height:
		var(--rajgir-thumbnail-size-md);
}


.rg-thumbnail--large {
	width:
		var(--rajgir-thumbnail-size-lg);

	height:
		var(--rajgir-thumbnail-size-lg);
}


/* ==========================================================================
   17. AVATAR
   ========================================================================== */

.rg-avatar {
	display: inline-flex;

	align-items: center;
	justify-content: center;

	flex:
		0 0 auto;

	width:
		var(--rajgir-avatar-size);

	height:
		var(--rajgir-avatar-size);

	overflow: hidden;

	border-radius: 50%;

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


/* ==========================================================================
   18. AVATAR IMAGE
   ========================================================================== */

.rg-avatar img,
.rg-avatar__image {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;
}


/* ==========================================================================
   19. AVATAR SIZES
   ========================================================================== */

.rg-avatar--small {
	width:
		var(--rajgir-avatar-size-sm);

	height:
		var(--rajgir-avatar-size-sm);
}


.rg-avatar--medium {
	width:
		var(--rajgir-avatar-size-md);

	height:
		var(--rajgir-avatar-size-md);
}


.rg-avatar--large {
	width:
		var(--rajgir-avatar-size-lg);

	height:
		var(--rajgir-avatar-size-lg);
}


/* ==========================================================================
   20. AVATAR LINK
   ========================================================================== */

.rg-avatar a {
	display: inline-flex;

	width: 100%;
	height: 100%;

	border-radius: inherit;
}


/* ==========================================================================
   21. AVATAR FOCUS
   ========================================================================== */

.rg-avatar a:focus-visible {
	outline:
		2px solid var(--rajgir-color-focus);

	outline-offset:
		2px;
}


/* ==========================================================================
   22. VIDEO
   ========================================================================== */

.rg-video {
	display: block;

	width: 100%;

	max-width: 100%;

	overflow: hidden;

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

	border-radius:
		var(--rajgir-radius-media);
}


/* ==========================================================================
   23. VIDEO ELEMENT
   ========================================================================== */

.rg-video video,
.rg-video__player {
	display: block;

	width: 100%;
	max-width: 100%;

	height: auto;
}


/* ==========================================================================
   24. VIDEO RESPONSIVE CONTAINER
   ========================================================================== */

.rg-video--responsive {
	position: relative;

	width: 100%;

	aspect-ratio:
		var(--rajgir-video-ratio);

	overflow: hidden;
}


/* ==========================================================================
   25. RESPONSIVE VIDEO
   ========================================================================== */

.rg-video--responsive video,
.rg-video--responsive .rg-video__player {
	width: 100%;
	height: 100%;

	object-fit: contain;
}


/* ==========================================================================
   26. VIDEO POSTER
   ========================================================================== */

.rg-video__poster {
	display: block;

	width: 100%;
	height: auto;
}


/* ==========================================================================
   27. VIDEO THUMBNAIL
   ========================================================================== */

.rg-video-thumbnail {
	position: relative;

	display: block;

	width: 100%;

	overflow: hidden;

	background:
		var(--rajgir-color-media-background);
}


/* ==========================================================================
   28. VIDEO THUMBNAIL IMAGE
   ========================================================================== */

.rg-video-thumbnail img {
	display: block;

	width: 100%;
	height: auto;
}


/* ==========================================================================
   29. VIDEO PLAY INDICATOR
   ========================================================================== */

.rg-video-thumbnail__play {
	position: absolute;

	inset: 50% auto auto 50%;

	display: inline-flex;

	align-items: center;
	justify-content: center;

	width:
		var(--rajgir-video-play-size);

	height:
		var(--rajgir-video-play-size);

	transform:
		translate(-50%, -50%);

	border-radius: 50%;

	background:
		var(--rajgir-color-media-control);

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


/* ==========================================================================
   30. VIDEO PLAY FOCUS
   ========================================================================== */

.rg-video-thumbnail:focus-visible,
.rg-video-thumbnail a:focus-visible {
	outline:
		2px solid var(--rajgir-color-focus);

	outline-offset:
		2px;
}


/* ==========================================================================
   31. VIDEO CONTROLS
   ========================================================================== */

.rg-video__controls {
	display: flex;

	align-items: center;

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


/*
 * Native browser controls remain available where the implementation
 * contract requires them.
 */


/* ==========================================================================
   32. GALLERY
   ========================================================================== */

.rg-gallery {
	display: grid;

	grid-template-columns:
		repeat(
			auto-fit,
			minmax(
				var(--rajgir-gallery-min-column),
				1fr
			)
		);

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

	width: 100%;
}


/* ==========================================================================
   33. GALLERY ITEM
   ========================================================================== */

.rg-gallery__item {
	position: relative;

	min-width: 0;

	overflow: hidden;

	border-radius:
		var(--rajgir-radius-gallery);
}


/* ==========================================================================
   34. GALLERY IMAGE
   ========================================================================== */

.rg-gallery__item img,
.rg-gallery__image {
	display: block;

	width: 100%;
	height: auto;
}


/* ==========================================================================
   35. GALLERY LINK
   ========================================================================== */

.rg-gallery__item a {
	display: block;

	color: inherit;

	text-decoration: none;
}


/* ==========================================================================
   36. GALLERY FOCUS
   ========================================================================== */

.rg-gallery__item a:focus-visible {
	outline:
		2px solid var(--rajgir-color-focus);

	outline-offset:
		2px;
}


/* ==========================================================================
   37. GALLERY CAPTION
   ========================================================================== */

.rg-gallery__caption {
	padding:
		var(--rajgir-space-gallery-caption);

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

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

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


/* ==========================================================================
   38. MEDIA PLACEHOLDER
   ========================================================================== */

.rg-media-placeholder {
	display: flex;

	align-items: center;
	justify-content: center;

	width: 100%;

	min-height:
		var(--rajgir-media-placeholder-min-height);

	padding:
		var(--rajgir-space-media-placeholder);

	background:
		var(--rajgir-color-media-placeholder);

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

	border-radius:
		var(--rajgir-radius-media);
}


/* ==========================================================================
   39. MEDIA PLACEHOLDER CONTENT
   ========================================================================== */

.rg-media-placeholder__content {
	display: flex;

	flex-direction: column;

	align-items: center;

	justify-content: center;

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

	max-width:
		var(--rajgir-media-placeholder-content-width);

	text-align: center;
}


/* ==========================================================================
   40. MEDIA PLACEHOLDER ICON
   ========================================================================== */

.rg-media-placeholder__icon {
	display: inline-flex;

	align-items: center;
	justify-content: center;

	width:
		var(--rajgir-size-icon-lg);

	height:
		var(--rajgir-size-icon-lg);
}


/* ==========================================================================
   41. MEDIA PLACEHOLDER TEXT
   ========================================================================== */

.rg-media-placeholder__text {
	margin: 0;

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

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


/* ==========================================================================
   42. MEDIA ERROR
   ========================================================================== */

.rg-media--error {
	display: flex;

	align-items: center;
	justify-content: center;

	min-height:
		var(--rajgir-media-error-min-height);

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

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

	border-radius:
		var(--rajgir-radius-media);
}


/* ==========================================================================
   43. MEDIA ERROR MESSAGE
   ========================================================================== */

.rg-media--error .rg-media__message {
	margin: 0;

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

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


/* ==========================================================================
   44. MEDIA LOADING
   ========================================================================== */

.rg-media--loading {
	position: relative;

	background:
		var(--rajgir-color-skeleton);
}


/* ==========================================================================
   45. MEDIA LOADING IMAGE
   ========================================================================== */

.rg-media--loading .rg-media__image {
	visibility: hidden;
}


/* ==========================================================================
   46. MEDIA SKELETON
   ========================================================================== */

.rg-media-skeleton {
	display: block;

	width: 100%;

	min-height:
		var(--rajgir-media-skeleton-min-height);

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

	border-radius:
		var(--rajgir-radius-media);
}


/* ==========================================================================
   47. DECORATIVE MEDIA
   ========================================================================== */

.rg-media--decorative img {
	display: block;
}


/*
 * Decorative media should not receive unnecessary semantic burden.
 *
 * Alt semantics belong to the HTML/media contract, not CSS.
 */


/* ==========================================================================
   48. MEDIA ACCESSIBILITY
   ========================================================================== */

/*
 * Meaningful images must have appropriate alternative text.
 *
 * Decorative images should be represented appropriately by semantic
 * markup.
 *
 * CSS does not generate or replace alt text.
 */


/* ==========================================================================
   49. MEDIA PERFORMANCE
   ========================================================================== */

/*
 * Below-the-fold / non-critical media may use lazy loading where
 * the approved delivery contract permits it.
 *
 * Critical above-the-fold media must not be blindly lazy-loaded.
 *
 * Loading strategy belongs to the markup/application/media contract.
 */


/* ==========================================================================
   50. NO BLIND PRELOAD
   ========================================================================== */

/*
 * This component does not preload media.
 *
 * Critical media identification belongs to the appropriate performance
 * and delivery architecture.
 */


/* ==========================================================================
   51. IMAGE LAYOUT STABILITY
   ========================================================================== */

/*
 * Where dimensions or aspect ratio are known and appropriate, the
 * presentation should reserve predictable space to reduce layout shift.
 *
 * Exact dimensions are intentionally not invented here.
 */


/* ==========================================================================
   52. RESPONSIVE DELIVERY BOUNDARY
   ========================================================================== */

/*
 * Preferred media flow:
 *
 * SOURCE
 *   ↓
 * VALIDATION
 *   ↓
 * METADATA
 *   ↓
 * OPTIMIZATION
 *   ↓
 * DERIVATIVES
 *   ↓
 * RESPONSIVE VARIANT
 *   ↓
 * STORAGE
 *   ↓
 * CACHE
 *   ↓
 * CDN
 *   ↓
 * BROWSER
 *   ↓
 * UI
 */


/* ==========================================================================
   53. MEDIA SIZE SAFETY
   ========================================================================== */

.rg-media img,
.rg-video video,
.rg-video__player {
	max-width: 100%;
}


/* ==========================================================================
   54. MEDIA OVERFLOW SAFETY
   ========================================================================== */

.rg-media,
.rg-image,
.rg-thumbnail,
.rg-avatar,
.rg-gallery,
.rg-video {
	min-width: 0;
}


/* ==========================================================================
   55. MEDIA LINKS
   ========================================================================== */

.rg-media a,
.rg-thumbnail a,
.rg-gallery a {
	color: inherit;
}


/* ==========================================================================
   56. MEDIA HOVER
   ========================================================================== */

.rg-media a:hover,
.rg-thumbnail a:hover,
.rg-gallery a:hover {
	color: inherit;
}


/*
 * Media hover effects must remain subtle.
 *
 * Avoid unnecessary transforms or expensive effects on media-heavy
 * surfaces.
 */


/* ==========================================================================
   57. MEDIA FOCUS
   ========================================================================== */

.rg-media a:focus-visible,
.rg-thumbnail a:focus-visible,
.rg-gallery a:focus-visible,
.rg-video a:focus-visible {
	outline:
		2px solid var(--rajgir-color-focus);

	outline-offset:
		2px;
}


/* ==========================================================================
   58. IMAGE CARD COMPATIBILITY
   ========================================================================== */

.rg-news-card__image,
.rg-tourism-card__image,
.rg-vibhuti-card__image {
	display: block;

	width: 100%;

	max-width: 100%;

	height: auto;
}


/* ==========================================================================
   59. FEED MEDIA COMPATIBILITY
   ========================================================================== */

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

	width: 100%;

	max-width: 100%;
}


/* ==========================================================================
   60. PROFILE MEDIA COMPATIBILITY
   ========================================================================== */

.rg-profile-avatar,
.rg-profile-cover {
	max-width: 100%;
}


/* ==========================================================================
   61. TOURISM MEDIA COMPATIBILITY
   ========================================================================== */

.rg-tourism-media {
	width: 100%;

	max-width: 100%;
}


/* ==========================================================================
   62. BUSINESS MEDIA COMPATIBILITY
   ========================================================================== */

.rg-business-media {
	width: 100%;

	max-width: 100%;
}


/* ==========================================================================
   63. PRODUCT MEDIA COMPATIBILITY
   ========================================================================== */

.rg-product-media {
	width: 100%;

	max-width: 100%;
}


/* ==========================================================================
   64. EVENT MEDIA COMPATIBILITY
   ========================================================================== */

.rg-event-media {
	width: 100%;

	max-width: 100%;
}


/* ==========================================================================
   65. VIDEO THUMBNAIL PERFORMANCE
   ========================================================================== */

/*
 * Video feed:
 *
 * Thumbnail / Preview
 *       ↓
 * Full Video
 *
 * Full video resource should not be unnecessarily loaded merely to
 * display a preview.
 */


/* ==========================================================================
   66. GALLERY PERFORMANCE
   ========================================================================== */

/*
 * Preferred progressive experience:
 *
 * Thumbnail
 *    ↓
 * Preview
 *    ↓
 * Full Image
 *
 * Full-resolution media should be requested on demand where the
 * approved UX/media contract permits.
 */


/* ==========================================================================
   67. LIGHTBOX PERFORMANCE
   ========================================================================== */

/*
 * A lightbox must not unnecessarily preload full-resolution media
 * before the user needs it where the architecture can avoid it.
 */


/* ==========================================================================
   68. AVATAR PERFORMANCE
   ========================================================================== */

/*
 * Avatar display should use an appropriate small variant.
 *
 * Large originals should not be unnecessarily delivered for small
 * avatar contexts.
 */


/* ==========================================================================
   69. FEED IMAGE PERFORMANCE
   ========================================================================== */

/*
 * Feed media may use:
 *
 * Thumbnail
 * +
 * Responsive Variant
 * +
 * Lazy Loading
 * +
 * Progressive Video
 *
 * according to the approved feature contract.
 */


/* ==========================================================================
   70. MOBILE MEDIA
   ========================================================================== */

@media (max-width: 767px) {

	.rg-gallery {
		grid-template-columns:
			repeat(
				2,
				minmax(0, 1fr)
			);
	}

	.rg-video--responsive {
		aspect-ratio:
			var(--rajgir-video-mobile-ratio);
	}

}


/* ==========================================================================
   71. TABLET MEDIA
   ========================================================================== */

@media (min-width: 768px) and (max-width: 1023px) {

	.rg-gallery {
		grid-template-columns:
			repeat(
				var(--rajgir-gallery-tablet-columns),
				minmax(0, 1fr)
			);
	}

}


/* ==========================================================================
   72. DESKTOP MEDIA
   ========================================================================== */

@media (min-width: 1024px) {

	.rg-gallery {
		grid-template-columns:
			repeat(
				var(--rajgir-gallery-desktop-columns),
				minmax(0, 1fr)
			);
	}

}


/* ==========================================================================
   73. REDUCED MOTION
   ========================================================================== */

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

	.rg-media *,
	.rg-gallery *,
	.rg-video * {
		scroll-behavior: auto;
	}

}


/* ==========================================================================
   74. MEDIA SECURITY BOUNDARY
   ========================================================================== */

/*
 * Media presentation must never bypass:
 *
 * - upload validation;
 * - sanitization;
 * - file security;
 * - storage security;
 * - access control.
 *
 * Theme presentation is not Media Management authority.
 */


/* ==========================================================================
   75. MEDIA SEO BOUNDARY
   ========================================================================== */

/*
 * Media may provide:
 *
 * - image metadata;
 * - media references;
 * - alt / asset information;
 * - delivery representation.
 *
 * But:
 *
 * RG_MEDIA
 *     ≠
 * RG_SEO
 *
 * SEO ownership remains with the SEO architecture.
 */


/* ==========================================================================
   76. MEDIA SEARCH BOUNDARY
   ========================================================================== */

/*
 * RG_MEDIA
 *     ↓
 * Approved Media Representation
 *     ↓
 * RG_SEARCH
 *
 * Media is not the global Search Engine owner.
 */


/* ==========================================================================
   77. MEDIA DOMAIN BOUNDARY
   ========================================================================== */

/*
 * Theme
 *     =
 * Media Presentation Consumer
 *
 * RG_MEDIA
 *     =
 * Media Management Authority
 */


/* ==========================================================================
   78. NO LARGE VIDEO IN THEME
   ========================================================================== */

/*
 * Large video must not be:
 *
 * - loaded into PHP memory for processing;
 * - stored as a normal database BLOB;
 * - processed by Theme presentation code.
 *
 * Large video architecture belongs to:
 *
 * Video API
 *     ↓
 * Media Service
 *     ↓
 * Media Storage
 *     ↓
 * CDN / Delivery
 */


/* ==========================================================================
   79. MEDIA COMPONENT REUSE
   ========================================================================== */

/*
 * Reusable media presentation concepts:
 *
 * MediaThumbnail
 * VideoCard
 * VideoPlayer
 * MediaPreview
 * Avatar
 * Gallery
 * MediaSkeleton
 * MediaError
 *
 * Platform-specific presentation may differ while the underlying
 * media/data contract remains shared.
 */


/* ==========================================================================
   80. COMPONENT BOUNDARY
   ========================================================================== */

/*
 * media.css
 *     ↓
 * Visual presentation
 *
 * Template / Component PHP
 *     ↓
 * Semantic markup + media reference
 *
 * RG_MEDIA
 *     ↓
 * Media management
 *
 * CDN / Storage
 *     ↓
 * Delivery
 */


/* ==========================================================================
   81. NO MEDIA AUTHORITY
   ========================================================================== */

/*
 * This component must never become:
 *
 * Media Storage Engine
 * Media Processing Engine
 * Media Security Engine
 * Media Lifecycle Engine
 * CDN Manager
 *
 * Those responsibilities belong to the approved Media architecture.
 */


/* ==========================================================================
   82. FINAL MEDIA RULE
   ========================================================================== */

/*
 * MEDIA
 *
 * Optimized
 * +
 * Responsive
 * +
 * Accessible
 * +
 * SEO-Compatible
 * +
 * Performance-Aware
 * +
 * Security-Compatible
 *
 * while preserving the ownership boundary:
 *
 * Theme
 *     =
 * Presentation
 *
 * RG_MEDIA
 *     =
 * Management Authority
 */