/* ==========================================================
   C And Sand Accommodation Cards
   ========================================================== */

.cs-card {
	position: relative;

	width: 100%;
	min-width: 0;
	box-sizing: border-box;

	background: #f5f5f5;

	border-radius: 18px;

	overflow: hidden;

	border: 2px solid rgba(255,255,255,0.8);

	box-shadow:
		0 2px 3px rgba(255,255,255,0.95) inset,
		0 -2px 3px rgba(255,255,255,0.8) inset,
		3px 4px 6px rgba(0,0,0,0.22),
		0 12px 20px rgba(0,0,0,0.20);
}

.cs-card::before {
	content: "";
	position: absolute;
	inset: 0;

	background-image: url("https://csand.co.za/wp-content/uploads/2026/08/1000_F_575682242_mLIYn5Jgsfwz3AMC4KJgdEIQndjzpawu-removebg-preview.png");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100% auto;

	opacity: 0.30;

	pointer-events: none;
	z-index: 0;
}

.cs-card > * {
	position: relative;
	z-index: 1;
}


/* ----------------------------------------------------------
   Header
   ---------------------------------------------------------- */

.cs-card-header {

	padding: 25px;

	text-align: center;

}

.cs-card-title {

	margin: 0;

	font-size: 2rem;

	white-space: nowrap;

	overflow: hidden;

	text-overflow: ellipsis;

}


/* ----------------------------------------------------------
   Card Body
   ---------------------------------------------------------- */

.cs-card-body {

	display: grid;

	grid-template-columns: 1.15fr 1fr;

	gap: 30px;

	padding: 20px 35px 25px;

	align-items: center;

	min-width: 0;

	box-sizing: border-box;

}


/* ----------------------------------------------------------
Image
---------------------------------------------------------- */

.cs-card-image {

	min-width: 0;

	width: 100%;

	transform: translate(-10px, -10px);

}

.cs-card-image img {

	width: 100%;

	height: 250px;

	object-fit: cover;

	display: block;

	border-radius: 9px;

	max-width: 100%;
}


/* ----------------------------------------------------------
   Details
   ---------------------------------------------------------- */

.cs-card-details {

	display: flex;

	flex-direction: column;

	min-width: 0;

}

.cs-card-info {

	flex: 1;

	min-width: 0;

	font-size: 1.1rem;

	line-height: 2;

}

.cs-card-button {

	margin-top: 25px;

	text-align: center;

}


/* ----------------------------------------------------------
Button
---------------------------------------------------------- */

.cs-button {

	display: block;

	width: 100%;

	max-width: 220px;

	min-width: 0;

	box-sizing: border-box;

	padding: 13px 12px;

	white-space: nowrap;

	text-align: center;

	font-size: clamp(14px, 1.2vw, 16px);

	line-height: 1.2;

	border-radius: 999px;

	text-decoration: none;

	font-weight: bold;

	color: #222;

	background: linear-gradient(#ffe6b5,#f7bf62);

	transition: .25s;

}

.cs-button:hover {

	transform: translateY(-2px);

}


/* ==========================================================
   RIBBONS
   ========================================================== */

.cs-ribbon {

	position: absolute;

	width: 260px;

	text-align: center;

	padding: 8px 0;

	font-size: 26px;

	font-weight: 700;

	z-index: 20;

	box-shadow: 0 4px 10px rgba(0,0,0,.25);

}


/* ----------------------------------------------------------
   Bottom Left Ribbon
   ---------------------------------------------------------- */

.cs-ribbon-left {

	left: -57px;

	bottom: 47px;

	transform: rotate(45deg);

	color: #000;

}


/* ----------------------------------------------------------
   Top Right Ribbon
   ---------------------------------------------------------- */

.cs-ribbon-right {

	right: -72px;

	top: 47px;

	transform: rotate(45deg);

}


/* ----------------------------------------------------------
   Recommended
   ---------------------------------------------------------- */

.cs-ribbon-recommended {

	background: linear-gradient(
		90deg,
		#b56b00,
		#ffb52e,
		#ffe7a6,
		#ffb52e,
		#8f5a00
	);

}


/* ----------------------------------------------------------
   Special Offer
   ---------------------------------------------------------- */

.cs-ribbon-special {

	background: linear-gradient(
		90deg,
		#b56b00,
		#ffb52e,
		#ffe7a6,
		#ffb52e,
		#8f5a00
	);

}


/* ----------------------------------------------------------
   Booked
   ---------------------------------------------------------- */

.cs-ribbon-booked {

	background: linear-gradient(
		90deg,
		#880000,
		#ff3b00,
		#ffd4d4,
		#ff3b00,
		#880000
	);

}


/* ----------------------------------------------------------
   Featured
   ---------------------------------------------------------- */

.cs-ribbon-featured {

	background: linear-gradient(
		90deg,
		#2d2d2d,
		#555,
		#bdbdbd,
		#555,
		#2d2d2d
	);

	color: #fff;

}


/* ==========================================================
Archive Grid
========================================================== */

.cs-archive-grid {

	display: grid !important;

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

	gap: 27px 40px;

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

	min-width: 0;

	box-sizing: border-box;

	align-items: start;
}

.cs-archive-grid .cs-card {

	width: 100%;

	min-width: 0;

	max-width: none;

	margin: 0;

	box-sizing: border-box;
}

/* ==========================================================
   Desktop Card Polish
   ========================================================== */

@media (min-width: 769px) {

	.cs-card-header {
    	padding: 20px 25px 5px;

	}

	.cs-card-body {

		gap: 24px;

		padding: 30px 35px 35px;

	}

	.cs-card-image img {

		height: 250px;

	}

	.cs-card-info {

		line-height: 1.8;

	}

	.cs-card-button {

		margin-top: 10px;

	}

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 768px) {

	/* Archive */

	.cs-archive-grid {

		grid-template-columns: 1fr;

		gap: 40px;

		width: 100%;

		min-width: 0;

	}


	/* Card */

	.cs-card {

		width: 100%;

		min-width: 0;

	}


	/* Card Body */

	.cs-card-body {

		grid-template-columns: 1fr;

		gap: 20px;

		padding: 25px;

		align-items: center;

	}


	/* Mobile Image */

	.cs-card-image {

		width: 100%;

		min-width: 0;

		transform: none;

		padding: 0;

	}


	.cs-card-image img {

		width: 100%;

		height: 240px;

		object-fit: cover;

		display: block;

		border-radius: 9px;

	}


	/* Mobile Title */

    .cs-card-header {
		padding: 20px 1px 5px !important;
	}

	.cs-card-title {
		font-size: 1.6rem;
		transform: translateX(-35px) !important;
	}

}


	/* Mobile Details */

	.cs-card-details {

		width: 100%;

		min-width: 0;

		margin-top: 10px;

		padding-left: 0;

	}


	.cs-card-info {

		width: 100%;

		font-size: 1.1rem;

		line-height: 2;

	}


	/* Mobile Button */

	.cs-card-button {

		width: 100%;

		margin-top: 20px;

		text-align: center;

	}


	.cs-button {

		width: 100%;

		max-width: 280px;

		min-width: 0;

		box-sizing: border-box;

	}


	/* Mobile Ribbons */

	.cs-ribbon {

		width: 180px;

		font-size: 18px;

	}


	.cs-ribbon-left {

		left: -42px;

		bottom: 29px;

	}


	.cs-ribbon-right {

		right: -55px;

		top: 24px;

	}
	
		/* Mobile Palm Leaf Background */

	.cs-card::before {
		background-size: cover !important;
		background-position: center center !important;
		background-repeat: no-repeat !important;
		opacity: 0.30;
	}

}