/**
 * Rajgir Parent Theme
 *
 * Layout CSS — Page Layout
 *
 * Canonical path:
 * assets/css/layouts/page-layout.css
 *
 * Responsibility:
 * - Main page composition
 * - Main content layout
 * - Optional sidebar composition
 * - Page sections
 * - Responsive page structure
 *
 * Architecture:
 *
 * Viewport
 *    ↓
 * Full Width Surface
 *    ↓
 * .rg-container
 *    ↓
 * Main Content + Optional Sidebar
 *    ↓
 * Page Sections
 *
 * Does NOT own:
 * - Business logic
 * - Domain logic
 * - Search ranking
 * - Booking logic
 * - Authentication
 * - Authorization
 * - Database operations
 *
 * @package Rajgir
 */

defined( 'ABSPATH' ) || exit;


/* ==========================================================================
   1. PAGE LAYOUT FOUNDATION
   ========================================================================== */

.rg-layout {
	width: 100%;

	min-width: 0;

	margin: 0;

	padding: 0;

	box-sizing: border-box;
}


/* ==========================================================================
   2. PAGE LAYOUT CHILD BOX SIZING
   ========================================================================== */

.rg-layout *,
.rg-layout *::before,
.rg-layout *::after {
	box-sizing: border-box;
}


/* ==========================================================================
   3. MAIN PAGE WRAPPER
   ========================================================================== */

.rg-site-content {
	width: 100%;

	min-width: 0;
}


/* ==========================================================================
   4. MAIN CONTENT
   ========================================================================== */

.rg-site-main,
.rg-main-content {
	width: 100%;

	min-width: 0;

	margin: 0;

	padding: 0;
}


/* ==========================================================================
   5. PAGE CONTAINER
   ========================================================================== */

.rg-layout > .rg-container,
.rg-site-content > .rg-container {
	width:
		min(
			100% - (2 * var(--rg-content-padding)),
			var(--rg-content-width)
		);

	margin-inline: auto;

	min-width: 0;
}


/* ==========================================================================
   6. MAIN + SIDEBAR FOUNDATION
   ========================================================================== */

/*
 * Desktop architecture:
 *
 * .rg-container
 *      ↓
 * .rg-page-layout
 *      ├── Main Content
 *      └── Optional Sidebar
 *
 * Main + Sidebar is a genuine two-dimensional page-layout requirement,
 * therefore CSS Grid is preferred.
 */

.rg-page-layout {
	display: grid;

	grid-template-columns:
		minmax(0, 1fr);

	gap:
		var(--rajgir-space-page-layout-gap);

	width: 100%;

	min-width: 0;
}


/* ==========================================================================
   7. MAIN COLUMN
   ========================================================================== */

.rg-page-layout__main {
	min-width: 0;

	width: 100%;
}


/* ==========================================================================
   8. SIDEBAR COLUMN
   ========================================================================== */

.rg-page-layout__sidebar {
	min-width: 0;

	width: 100%;
}


/* ==========================================================================
   9. OPTIONAL SIDEBAR
   ========================================================================== */

/*
 * Sidebar is optional and purpose-driven.
 *
 * The parent layout must not reserve sidebar space when no sidebar
 * content exists.
 */


/* ==========================================================================
   10. MAIN CONTENT WIDTH
   ========================================================================== */

/*
 * Main content must not automatically expand to unlimited viewport width.
 *
 * Global content boundary is controlled by:
 *
 * .rg-container
 *
 * Readability-sensitive surfaces may apply a more specific approved
 * reading-width token at their owning component/pattern level.
 */


/* ==========================================================================
   11. PAGE SECTION
   ========================================================================== */

.rg-section {
	width: 100%;

	min-width: 0;

	margin: 0;
}


/* ==========================================================================
   12. FULL-WIDTH SECTION
   ========================================================================== */

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


/* ==========================================================================
   13. SECTION INNER CONTAINER
   ========================================================================== */

.rg-section__inner {
	width:
		min(
			100% - (2 * var(--rg-content-padding)),
			var(--rg-content-width)
		);

	margin-inline: auto;

	min-width: 0;
}


/* ==========================================================================
   14. SECTION STACK
   ========================================================================== */

.rg-section + .rg-section {
	margin-top:
		var(--rajgir-space-section-gap);
}


/* ==========================================================================
   15. VERTICAL STACK
   ========================================================================== */

.rg-stack {
	display: flex;

	flex-direction: column;

	min-width: 0;

	width: 100%;
}


/* ==========================================================================
   16. STACK ITEM
   ========================================================================== */

.rg-stack > * {
	min-width: 0;

	max-width: 100%;
}


/* ==========================================================================
   17. STACK SPACING
   ========================================================================== */

.rg-stack--spacing {
	gap:
		var(--rajgir-space-stack-gap);
}


/* ==========================================================================
   18. CONTENT AREA
   ========================================================================== */

.rg-content-area {
	min-width: 0;

	width: 100%;
}


/* ==========================================================================
   19. READING CONTENT
   ========================================================================== */

/*
 * Articles, long-form text, forms and business information should retain
 * readable content width.
 *
 * Exact maximum reading width is intentionally not invented here.
 */

.rg-reading-content {
	min-width: 0;

	max-width:
		var(--rg-reading-content-width);

	margin-inline: auto;
}


/* ==========================================================================
   20. CONTENT LIST
   ========================================================================== */

.rg-content-list {
	display: grid;

	grid-template-columns:
		minmax(0, 1fr);

	gap:
		var(--rajgir-space-content-list-gap);

	width: 100%;

	min-width: 0;
}


/* ==========================================================================
   21. TWO COLUMN LAYOUT
   ========================================================================== */

.rg-layout--two-column {
	display: grid;

	grid-template-columns:
		minmax(0, 1fr);

	gap:
		var(--rajgir-space-page-layout-gap);

	min-width: 0;
}


/* ==========================================================================
   22. THREE COLUMN LAYOUT
   ========================================================================== */

.rg-layout--three-column {
	display: grid;

	grid-template-columns:
		minmax(0, 1fr);

	gap:
		var(--rajgir-space-page-layout-gap);

	min-width: 0;
}


/*
 * Additional columns must be introduced only where the owning design
 * requirement actually needs them.
 */


/* ==========================================================================
   23. MAIN + SIDEBAR DESKTOP
   ========================================================================== */

@media (min-width: 1024px) {

	.rg-page-layout {
		grid-template-columns:
			minmax(0, 1fr)
			minmax(
				0,
				var(--rg-sidebar-width)
			);
	}

	.rg-page-layout__sidebar {
		align-self: start;
	}

}


/* ==========================================================================
   24. TWO COLUMN DESKTOP
   ========================================================================== */

@media (min-width: 1024px) {

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

}


/* ==========================================================================
   25. THREE COLUMN LARGE SCREEN
   ========================================================================== */

@media (min-width: 1200px) {

	.rg-layout--three-column {
		grid-template-columns:
			repeat(
				3,
				minmax(0, 1fr)
			);
	}

}


/* ==========================================================================
   26. MOBILE BASE
   ========================================================================== */

/*
 * Mobile is the base layout.
 *
 * Do not construct desktop first and then squeeze it into mobile.
 */

@media (max-width: 767px) {

	.rg-page-layout,
	.rg-layout--two-column,
	.rg-layout--three-column {
		grid-template-columns:
			minmax(0, 1fr);
	}

	.rg-page-layout__main,
	.rg-page-layout__sidebar {
		width: 100%;

		min-width: 0;
	}

}


/* ==========================================================================
   27. MOBILE SIDEBAR ORDER
   ========================================================================== */

/*
 * Default mobile presentation:
 *
 * Main Content
 *      ↓
 * Relevant Sidebar Content
 *
 * Semantic DOM order remains authoritative.
 */

@media (max-width: 767px) {

	.rg-page-layout__sidebar {
		margin-top:
			var(--rajgir-space-mobile-sidebar-gap);
	}

}


/* ==========================================================================
   28. TABLET LAYOUT
   ========================================================================== */

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

	.rg-page-layout {
		grid-template-columns:
			minmax(0, 1fr);
	}

	.rg-page-layout__sidebar {
		margin-top:
			var(--rajgir-space-tablet-sidebar-gap);
	}

}


/* ==========================================================================
   29. DESKTOP LAYOUT
   ========================================================================== */

/*
 * Desktop may use:
 *
 * Container
 *    ↓
 * Main Content
 *    +
 * Optional Sidebar
 *
 * Sidebar remains optional and purpose-driven.
 */


/* ==========================================================================
   30. LARGE DESKTOP
   ========================================================================== */

@media (min-width: 1200px) {

	.rg-page-layout {
		gap:
			var(--rajgir-space-page-layout-large-gap);
	}

}


/* ==========================================================================
   31. FULL WIDTH PAGE SURFACE
   ========================================================================== */

.rg-page-surface {
	width: 100%;

	min-width: 0;
}


/* ==========================================================================
   32. FULL WIDTH BACKGROUND + CONTAINER CONTENT
   ========================================================================== */

.rg-page-surface > .rg-container {
	width:
		min(
			100% - (2 * var(--rg-content-padding)),
			var(--rg-content-width)
		);

	margin-inline: auto;
}


/* ==========================================================================
   33. PAGE HEADER
   ========================================================================== */

.rg-page-header {
	width: 100%;

	min-width: 0;

	margin: 0 0
		var(--rajgir-space-page-header-gap);
}


/* ==========================================================================
   34. PAGE HEADER INNER
   ========================================================================== */

.rg-page-header > .rg-container {
	min-width: 0;
}


/* ==========================================================================
   35. PAGE TITLE
   ========================================================================== */

.rg-page-title {
	margin-top: 0;

	margin-bottom:
		var(--rajgir-space-page-title-gap);

	max-width: 100%;

	overflow-wrap:
		break-word;
}


/* ==========================================================================
   36. PAGE DESCRIPTION
   ========================================================================== */

.rg-page-description {
	max-width:
		var(--rg-reading-content-width);

	margin-bottom: 0;

	overflow-wrap:
		break-word;
}


/* ==========================================================================
   37. PAGE CONTENT
   ========================================================================== */

.rg-page-content {
	width: 100%;

	min-width: 0;
}


/* ==========================================================================
   38. PAGE CONTENT + SIDEBAR
   ========================================================================== */

.rg-page-content-layout {
	display: grid;

	grid-template-columns:
		minmax(0, 1fr);

	gap:
		var(--rajgir-space-page-layout-gap);

	width: 100%;

	min-width: 0;
}


/* ==========================================================================
   39. DESKTOP PAGE CONTENT + SIDEBAR
   ========================================================================== */

@media (min-width: 1024px) {

	.rg-page-content-layout {
		grid-template-columns:
			minmax(0, 1fr)
			minmax(
				0,
				var(--rg-sidebar-width)
			);
	}

}


/* ==========================================================================
   40. ARTICLE LAYOUT
   ========================================================================== */

.rg-article-layout {
	width: 100%;

	min-width: 0;
}


/* ==========================================================================
   41. ARTICLE READING WIDTH
   ========================================================================== */

.rg-article-layout__content {
	max-width:
		var(--rg-reading-content-width);

	margin-inline: auto;

	min-width: 0;
}


/* ==========================================================================
   42. FORM LAYOUT
   ========================================================================== */

.rg-form-layout {
	width: 100%;

	min-width: 0;
}


/* ==========================================================================
   43. FORM READING WIDTH
   ========================================================================== */

.rg-form-layout__content {
	max-width:
		var(--rg-reading-content-width);

	margin-inline: auto;

	min-width: 0;
}


/* ==========================================================================
   44. DASHBOARD LAYOUT
   ========================================================================== */

.rg-dashboard-layout {
	display: grid;

	grid-template-columns:
		minmax(0, 1fr);

	gap:
		var(--rajgir-space-dashboard-layout-gap);

	width: 100%;

	min-width: 0;
}


/* ==========================================================================
   45. DASHBOARD DESKTOP
   ========================================================================== */

@media (min-width: 1024px) {

	.rg-dashboard-layout {
		grid-template-columns:
			minmax(
				0,
				var(--rg-dashboard-sidebar-width)
			)
			minmax(0, 1fr);
	}

}


/* ==========================================================================
   46. DASHBOARD MOBILE
   ========================================================================== */

@media (max-width: 767px) {

	.rg-dashboard-layout {
		grid-template-columns:
			minmax(0, 1fr);
	}

}


/* ==========================================================================
   47. LAYOUT ALIGNMENT
   ========================================================================== */

.rg-layout--center {
	margin-inline: auto;
}


/* ==========================================================================
   48. LAYOUT WIDTH SAFETY
   ========================================================================== */

.rg-layout,
.rg-page-layout,
.rg-page-content-layout,
.rg-content-area,
.rg-section,
.rg-stack {
	max-width: 100%;
}


/* ==========================================================================
   49. CHILD WIDTH SAFETY
   ========================================================================== */

.rg-layout img,
.rg-layout video,
.rg-layout iframe,
.rg-page-layout img,
.rg-page-layout video,
.rg-page-layout iframe {
	max-width: 100%;
}


/* ==========================================================================
   50. FORM WIDTH SAFETY
   ========================================================================== */

.rg-layout form {
	max-width: 100%;
}


/* ==========================================================================
   51. TABLE SAFETY
   ========================================================================== */

.rg-layout table {
	width: 100%;

	max-width: 100%;
}


/* ==========================================================================
   52. CODE BLOCK SAFETY
   ========================================================================== */

.rg-layout pre,
.rg-page-layout pre {
	max-width: 100%;

	overflow-x: auto;
}


/* ==========================================================================
   53. NO BLIND OVERFLOW HIDING
   ========================================================================== */

/*
 * overflow:hidden is deliberately NOT applied to the entire page
 * layout.
 *
 * Content must remain discoverable.
 */


/* ==========================================================================
   54. HORIZONTAL SCROLL PROTECTION
   ========================================================================== */

.rg-layout,
.rg-page-layout,
.rg-page-content-layout {
	min-width: 0;
}


/*
 * Child components must still handle intrinsically overflowing content
 * according to their own component contract.
 */


/* ==========================================================================
   55. ABSOLUTE POSITIONING BOUNDARY
   ========================================================================== */

/*
 * Entire page layout must remain normal-flow based.
 *
 * position:absolute is NOT used as a page-layout construction method.
 *
 * Genuine positioned UI may be handled by its own component.
 */


/* ==========================================================================
   56. FIXED UI BOUNDARY
   ========================================================================== */

/*
 * Fixed elements such as:
 *
 * - Header
 * - Bottom Navigation
 * - Floating Action
 *
 * must preserve content visibility and accessibility.
 *
 * Page layout does not blindly compensate for every possible fixed
 * surface.
 */


/* ==========================================================================
   57. STICKY SIDEBAR COMPATIBILITY
   ========================================================================== */

.rg-page-layout__sidebar.rg-sidebar--sticky {
	align-self: start;
}


/* ==========================================================================
   58. STICKY SIDEBAR MOBILE RESET
   ========================================================================== */

@media (max-width: 767px) {

	.rg-page-layout__sidebar.rg-sidebar--sticky {
		position: static;

		top: auto;
	}

}


/* ==========================================================================
   59. GRID GAP
   ========================================================================== */

/*
 * All major page-layout gaps consume centralized spacing tokens.
 *
 * No arbitrary pixel spacing is introduced.
 */


/* ==========================================================================
   60. FLEX COMPATIBILITY
   ========================================================================== */

.rg-layout--flex {
	display: flex;

	flex-wrap: wrap;

	min-width: 0;
}


/* ==========================================================================
   61. FLEX CHILD SAFETY
   ========================================================================== */

.rg-layout--flex > * {
	min-width: 0;

	max-width: 100%;
}


/* ==========================================================================
   62. FLEX HORIZONTAL
   ========================================================================== */

.rg-layout--flex-row {
	flex-direction: row;
}


/* ==========================================================================
   63. FLEX VERTICAL
   ========================================================================== */

.rg-layout--flex-column {
	flex-direction: column;
}


/* ==========================================================================
   64. FLEX GAP
   ========================================================================== */

.rg-layout--flex {
	gap:
		var(--rajgir-space-layout-flex-gap);
}


/* ==========================================================================
   65. MOBILE FLEX
   ========================================================================== */

@media (max-width: 767px) {

	.rg-layout--flex-row {
		flex-direction: column;
	}

}


/* ==========================================================================
   66. SEMANTIC ORDER
   ========================================================================== */

/*
 * CSS visual ordering must not be used to contradict meaningful
 * semantic document order.
 */


/* ==========================================================================
   67. ACCESSIBILITY
   ========================================================================== */

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

	outline-offset:
		2px;
}


/* ==========================================================================
   68. CONTENT VISIBILITY
   ========================================================================== */

/*
 * No layout rule may intentionally hide essential content at a
 * viewport merely to make the design fit.
 */


/* ==========================================================================
   69. MOBILE SAFE AREA
   ========================================================================== */

@media (max-width: 767px) {

	.rg-layout {
		padding-bottom:
			env(
				safe-area-inset-bottom,
				0px
			);
	}

}


/*
 * Safe-area handling should only affect surfaces where it is actually
 * applicable.
 */


/* ==========================================================================
   70. RESPONSIVE MEDIA
   ========================================================================== */

.rg-layout img,
.rg-layout video {
	height: auto;
}


/* ==========================================================================
   71. PERFORMANCE
   ========================================================================== */

/*
 * Page layout uses CSS layout primitives.
 *
 * It does not depend on JavaScript for ordinary page composition.
 */


/* ==========================================================================
   72. NO LAYOUT JS
   ========================================================================== */

/*
 * Do not use JavaScript merely to calculate:
 *
 * - container width;
 * - sidebar width;
 * - normal page columns;
 * - ordinary responsive stacking.
 *
 * CSS handles these concerns.
 */


/* ==========================================================================
   73. SEO / CONTENT STRUCTURE
   ========================================================================== */

/*
 * Layout must preserve:
 *
 * - semantic headings;
 * - readable text;
 * - crawlable links;
 * - meaningful document order;
 * - public content visibility.
 */


/* ==========================================================================
   74. DOMAIN BOUNDARY
   ========================================================================== */

/*
 * page-layout.css is a presentation/layout layer.
 *
 * It must never become the owner of:
 *
 * RG_TOURISM
 * RG_BIZ
 * RG_FEED
 * RG_SEARCH
 * RG_BOOKING
 * RG_MARKET
 * RG_MEDIA
 * RG_VIDEO
 * RG_COMPLAINT
 * RG_SEO
 * RG_AUTH
 *
 * Domain ownership remains outside Theme layout CSS.
 */


/* ==========================================================================
   75. COMPONENT BOUNDARY
   ========================================================================== */

/*
 * PAGE LAYOUT
 *     ↓
 * Main / Sidebar / Sections
 *
 * COMPONENTS
 *     ↓
 * Button / Card / Form / Badge / Modal / Media
 *
 * Page layout composes components.
 * It does not replace them.
 */


/* ==========================================================================
   76. CONTAINER BOUNDARY
   ========================================================================== */

/*
 * container.css
 *     =
 * Global horizontal content boundary
 *
 * page-layout.css
 *     =
 * Main / Sidebar / Section composition
 */


/* ==========================================================================
   77. SIDEBAR BOUNDARY
   ========================================================================== */

/*
 * sidebar.css
 *     =
 * Sidebar presentation
 *
 * page-layout.css
 *     =
 * Sidebar placement within page composition
 */


/* ==========================================================================
   78. HEADER / FOOTER BOUNDARY
   ========================================================================== */

/*
 * header.css
 *     =
 * Header layout
 *
 * footer.css
 *     =
 * Footer layout
 *
 * page-layout.css
 *     =
 * Page content layout
 */


/* ==========================================================================
   79. MOBILE-FIRST PRINCIPLE
   ========================================================================== */

/*
 * Canonical responsive flow:
 *
 * Mobile
 *     ↓
 * Tablet
 *     ↓
 * Desktop
 *     ↓
 * Large Screen
 *
 * Desktop is an enhancement, not the base.
 */


/* ==========================================================================
   80. GRID / FLEX SELECTION
   ========================================================================== */

/*
 * Requirement-based rule:
 *
 * 2D layout
 *     ↓
 * CSS Grid
 *
 * 1D alignment
 *     ↓
 * Flexbox
 *
 * Genuine positioned UI
 *     ↓
 * Positioning
 *
 * Full-page absolute positioning
 *     ↓
 * PROHIBITED
 */


/* ==========================================================================
   81. RESPONSIVE DISTINCTNESS
   ========================================================================== */

/*
 * Desktop and mobile are distinct layout surfaces.
 *
 * Mobile:
 *     Single-column content-first
 *
 * Desktop:
 *     Main + Optional Sidebar where useful
 */


/* ==========================================================================
   82. OPTIONAL SIDEBAR PRINCIPLE
   ========================================================================== */

/*
 * Sidebar is:
 *
 * Optional
 * +
 * Purpose-driven
 *
 * It should provide actual value such as:
 *
 * - Related Content
 * - Filters
 * - Contextual Navigation
 * - Supplementary Information
 * - Dashboard Tools
 */


/* ==========================================================================
   83. LARGE SCREEN PRINCIPLE
   ========================================================================== */

/*
 * Larger viewport
 *     ≠
 * Unlimited content width
 *
 * Content remains within the centralized container boundary.
 */


/* ==========================================================================
   84. REDUCED MOTION
   ========================================================================== */

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

	.rg-layout *,
	.rg-layout *::before,
	.rg-layout *::after {
		scroll-behavior: auto;
	}

}


/* ==========================================================================
   85. PRINT
   ========================================================================== */

@media print {

	.rg-layout,
	.rg-page-layout,
	.rg-page-content-layout {
		display: block;

		width: 100%;

		max-width: 100%;
	}

	.rg-page-layout__sidebar {
		margin-top:
			var(--rajgir-space-section-gap);
	}

}


/* ==========================================================================
   86. FINAL PAGE LAYOUT ARCHITECTURE
   ========================================================================== */

/*
 *
 * RAJGIR PAGE LAYOUT
 *
 * Viewport
 *     ↓
 * Full Width Surface
 *     ↓
 * .rg-container
 *     ↓
 * ┌───────────────────────────────┐
 * │ Main Content │ Optional Side  │
 * └───────────────────────────────┘
 *     ↓
 * Page Sections
 *     ↓
 * Components
 *
 *
 * Mobile:
 *
 * Main Content
 *     ↓
 * Relevant Sidebar Content
 *
 *
 * Governing principles:
 *
 * Mobile First
 * Fluid Before Fixed
 * Centralized Container
 * Grid/Flex by Requirement
 * No Absolute Page Layout
 * No Arbitrary Spacing
 * Centralized Responsive Strategy
 * Optional Purpose-Driven Sidebar
 * Accessible Semantic Structure
 * Performance-Aware Layout
 * No Duplicate Layout System
 */