/**
 * ==========================================================
 * SHMT Premium Listing Layout
 * SasthaHouse Marketplace Toolkit
 * ==========================================================
 *
 * Part 1 / 2
 * Foundation, Desktop Grid & Layout System
 *
 * ==========================================================
 */

/* ==========================================================
   Root Layout
========================================================== */

.shmt-listing-layout{

	position:relative;

	width:100%;

	background:#f8fafc;

	min-height:100vh;

	padding-bottom:60px;

}

/* ==========================================================
   Premium Container
========================================================== */

.shmt-listing-layout .shmt-container{

	width:100%;

	max-width:1440px;

	margin:0 auto;

	padding:0 24px;

	box-sizing:border-box;

}

/* ==========================================================
   Hero
========================================================== */

.shmt-listing-layout__hero{

	margin-bottom:36px;

}

/* ==========================================================
   Desktop Grid
========================================================== */

.shmt-listing-layout__grid{

	display:grid;

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

	gap:36px;

	align-items:start;

}

/* ==========================================================
   Main Column
========================================================== */

.shmt-listing-layout__main{

	display:flex;

	flex-direction:column;

	gap:32px;

	min-width:0;

}

/* ==========================================================
   Sidebar
========================================================== */

.shmt-listing-layout__sidebar{

	position:relative;

}

.shmt-listing-layout__sidebar-inner{

	position:sticky;

	top:24px;

	display:flex;

	flex-direction:column;

	gap:24px;

}

/* ==========================================================
   Generic Section
========================================================== */

.shmt-listing-layout__section{

	position:relative;

	background:#ffffff;

	border:1px solid #e5e7eb;

	border-radius:20px;

	padding:28px;

	box-shadow:
		0 8px 30px rgba(15,23,42,.05);

	transition:
		transform .25s ease,
		box-shadow .25s ease,
		border-color .25s ease;

}

.shmt-listing-layout__section:hover{

	border-color:#dbe4f3;

	box-shadow:
		0 18px 48px rgba(15,23,42,.08);

}

/* ==========================================================
   Advertisement Slots
========================================================== */

.shmt-listing-layout__ad-slot{

	position:relative;

	background:#ffffff;

	border:2px dashed #d8dee8;

	border-radius:20px;

	padding:28px;

	min-height:140px;

	display:flex;

	align-items:center;

	justify-content:center;

	text-align:center;

	color:#6b7280;

	font-size:15px;

	font-weight:600;

	transition:.25s ease;

}

.shmt-listing-layout__ad-slot:hover{

	border-color:#c2ccd9;

	background:#fcfdff;

}

/* ==========================================================
   Seller Section
========================================================== */

.shmt-listing-layout__seller{

	margin-top:40px;

}

/* ==========================================================
   Related Listings
========================================================== */

.shmt-listing-layout__related{

	margin-top:40px;

}

/* ==========================================================
   Premium Cards
========================================================== */

.shmt-card{

	background:#ffffff;

	border-radius:20px;

	border:1px solid #e5e7eb;

	box-shadow:

		0 8px 30px rgba(15,23,42,.05);

	overflow:hidden;

}

.shmt-card-header{

	padding:28px;

}

.shmt-card-body{

	padding:28px;

}

.shmt-card-footer{

	padding:24px 28px;

	border-top:1px solid #eef2f7;

	background:#fafbfd;

}

/* ==========================================================
   Section Titles
========================================================== */

.shmt-section-title{

	font-size:1.45rem;

	font-weight:700;

	color:#111827;

	margin:0 0 22px;

	line-height:1.3;

}

/* ==========================================================
   Divider
========================================================== */

.shmt-divider{

	height:1px;

	background:#edf2f7;

	margin:26px 0;

}

/* ==========================================================
   Utility
========================================================== */

.shmt-hidden{

	display:none !important;

}

.shmt-full-width{

	width:100%;

}

.shmt-text-center{

	text-align:center;

}

.shmt-mt-0{

	margin-top:0;

}

.shmt-mb-0{

	margin-bottom:0;

}

/* ==========================================================
   SHMT Premium Listing Layout
   Part 2 / 2
   Responsive Layout & Mobile Experience
========================================================== */

/* ==========================================================
   Large Desktop
========================================================== */

@media (min-width:1600px){

	.shmt-listing-layout .shmt-container{

		max-width:1560px;

	}

}

/* ==========================================================
   Desktop
========================================================== */

@media (max-width:1400px){

	.shmt-listing-layout .shmt-container{

		padding:0 22px;

	}

	.shmt-listing-layout__grid{

		grid-template-columns:minmax(0,2fr) 360px;

		gap:30px;

	}

}

/* ==========================================================
   Laptop
========================================================== */

@media (max-width:1200px){

	.shmt-listing-layout .shmt-container{

		padding:0 20px;

	}

	.shmt-listing-layout__grid{

		grid-template-columns:1fr 340px;

		gap:24px;

	}

	.shmt-listing-layout__section{

		padding:24px;

	}

}

/* ==========================================================
   Tablet
========================================================== */

@media (max-width:991px){

	.shmt-listing-layout__grid{

		grid-template-columns:1fr;

	}

	.shmt-listing-layout__sidebar{

		order:-1;

	}

	.shmt-listing-layout__sidebar-inner{

		position:relative;

		top:auto;

	}

	.shmt-listing-layout__seller{

		margin-top:30px;

	}

	.shmt-listing-layout__related{

		margin-top:30px;

	}

}

/* ==========================================================
   Mobile
========================================================== */

@media (max-width:767px){

	.shmt-listing-layout{

		padding-bottom:95px;

	}

	.shmt-listing-layout .shmt-container{

		padding:0 16px;

	}

	.shmt-listing-layout__hero{

		margin-bottom:24px;

	}

	.shmt-listing-layout__main{

		gap:20px;

	}

	.shmt-listing-layout__section{

		padding:20px;

		border-radius:16px;

	}

	.shmt-listing-layout__ad-slot{

		padding:20px;

		min-height:110px;

		border-radius:16px;

	}

	.shmt-card{

		border-radius:16px;

	}

	.shmt-card-header{

		padding:20px;

	}

	.shmt-card-body{

		padding:20px;

	}

	.shmt-card-footer{

		padding:18px 20px;

	}

	.shmt-section-title{

		font-size:1.2rem;

		margin-bottom:18px;

	}

}

/* ==========================================================
   Small Mobile
========================================================== */

@media (max-width:480px){

	.shmt-listing-layout .shmt-container{

		padding:0 14px;

	}

	.shmt-listing-layout__section{

		padding:18px;

	}

	.shmt-card-header{

		padding:18px;

	}

	.shmt-card-body{

		padding:18px;

	}

	.shmt-card-footer{

		padding:16px 18px;

	}

}

/* ==========================================================
   Mobile Sticky Actions
========================================================== */

.shmt-listing-layout__mobile-actions{

	position:fixed;

	left:0;

	right:0;

	bottom:0;

	z-index:9999;

	background:#ffffff;

	border-top:1px solid #e5e7eb;

	padding:12px 16px;

	box-shadow:

		0 -10px 30px rgba(15,23,42,.10);

	display:none;

}

@media (max-width:767px){

	.shmt-listing-layout__mobile-actions{

		display:block;

	}

}

/* ==========================================================
   Advertisement Helpers
========================================================== */

.shmt-listing-layout__ad-slot:empty::before{

	content:"Advertisement";

	color:#94a3b8;

	font-size:.95rem;

	font-weight:600;

	letter-spacing:.04em;

	text-transform:uppercase;

}

/* ==========================================================
   Smooth Fade Animation
========================================================== */

.shmt-listing-layout__section,

.shmt-card,

.shmt-listing-layout__ad-slot{

	animation:shmtFadeUp .35s ease both;

}

@keyframes shmtFadeUp{

	from{

		opacity:0;

		transform:translateY(12px);

	}

	to{

		opacity:1;

		transform:translateY(0);

	}

}

/* ==========================================================
   Accessibility
========================================================== */

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

	*{

		animation:none !important;

		transition:none !important;

		scroll-behavior:auto !important;

	}

}

/* ==========================================================
   Print
========================================================== */

@media print{

	.shmt-listing-layout{

		background:#ffffff;

		padding:0;

	}

	.shmt-listing-layout__sidebar,

	.shmt-listing-layout__mobile-actions,

	.shmt-listing-layout__ad-slot{

		display:none !important;

	}

	.shmt-listing-layout__grid{

		grid-template-columns:1fr;

	}

	.shmt-listing-layout__section{

		box-shadow:none;

		border:1px solid #d1d5db;

		break-inside:avoid;

	}

}

/* ==========================================================
   End of Layout
========================================================== */