/* ==========================================================================
   KrianJourneys Destinations — Frontend Styles
   Scoped entirely under .kjdest- so nothing here leaks into, or is
   affected by, the active theme, other plugins, or the Tour Packages
   module's own .kjtour- styles. Loaded ONLY on destination pages/shortcode.
   Reuses the same --kjtour-* color variables defined in kjtour-frontend.css
   (Deep Ocean Blue / Teal / Sunset Orange) so both modules stay visually
   consistent; falls back to literal values if that file isn't loaded.
   ========================================================================== */

:root{
	--kjdest-primary:var(--kjtour-primary, #0F4C81);
	--kjdest-secondary:var(--kjtour-secondary, #14B8A6);
	--kjdest-accent:var(--kjtour-accent, #F97316);
	--kjdest-text:var(--kjtour-text, #1F2937);
	--kjdest-muted:var(--kjtour-muted, #5b6b7a);
	--kjdest-bg:var(--kjtour-bg, #f4f8fa);
	--kjdest-white:#ffffff;
	--kjdest-border:var(--kjtour-border, #e3edf1);
}

.kjdest-grid, .kjdest-page, .kjdest-archive-wrap,
.kjdest-single-body, .kjdest-archive-body{
	font-family:'Poppins', sans-serif;
	color:var(--kjdest-text);
}

.kjdest-grid *, .kjdest-page *, .kjdest-archive-wrap *{
	box-sizing:border-box;
}

/* ---------------- GRID / CARDS ---------------- */

.kjdest-grid{
	display:grid;
	grid-template-columns:repeat(var(--kjdest-cols, 3), 1fr);
	gap:26px;
	max-width:1280px;
	margin:0 auto;
	padding:10px 0 40px;
}

.kjdest-card{
	background:var(--kjdest-white);
	border:1px solid var(--kjdest-border);
	border-radius:16px;
	overflow:hidden;
	box-shadow:0 8px 22px rgba(15,76,129,0.08);
	transition:0.3s;
	display:flex;
	flex-direction:column;
}

.kjdest-card:hover{
	transform:translateY(-6px);
	box-shadow:0 18px 34px rgba(15,76,129,0.16);
	border-color:var(--kjdest-secondary);
}

.kjdest-card-media{
	position:relative;
	height:210px;
	overflow:hidden;
	background:var(--kjdest-bg);
}

.kjdest-card-media img{
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
	transition:0.4s;
}

.kjdest-card:hover .kjdest-card-media img{
	transform:scale(1.06);
}

.kjdest-card-media-fallback{
	display:flex;
	align-items:center;
	justify-content:center;
	height:100%;
	font-size:34px;
	color:#c8d6de;
}

.kjdest-badge-featured{
	position:absolute;
	top:14px;
	right:14px;
	background:var(--kjdest-accent);
	color:#fff;
	font-size:11.5px;
	font-weight:700;
	padding:6px 12px;
	border-radius:20px;
	display:flex;
	align-items:center;
	gap:5px;
	box-shadow:0 4px 10px rgba(249,115,22,0.35);
}

.kjdest-badge-region{
	position:absolute;
	top:14px;
	left:14px;
	font-size:11px;
	font-weight:700;
	padding:6px 12px;
	border-radius:20px;
	color:#fff;
}

.kjdest-badge-region-domestic{
	background:var(--kjdest-primary);
}

.kjdest-badge-region-international{
	background:var(--kjdest-secondary);
}

.kjdest-card-body{
	padding:22px 22px 24px;
	display:flex;
	flex-direction:column;
	flex:1;
}

.kjdest-card-country{
	font-size:12.5px;
	font-weight:600;
	color:var(--kjdest-secondary);
	display:flex;
	align-items:center;
	gap:6px;
	margin-bottom:8px;
}

.kjdest-card-title{
	font-size:18px;
	font-weight:700;
	margin-bottom:6px;
}

.kjdest-card-title a{
	color:var(--kjdest-text);
	text-decoration:none;
}

.kjdest-card-title a:hover{
	color:var(--kjdest-primary);
}

.kjdest-card-subtitle{
	font-size:12.5px;
	font-weight:600;
	color:var(--kjdest-accent);
	margin-bottom:10px;
}

.kjdest-card-desc{
	font-size:13.5px;
	line-height:1.7;
	color:var(--kjdest-muted);
	margin-bottom:14px;
}

.kjdest-card-divider{
	height:1px;
	background:var(--kjdest-border);
	margin:6px 0 16px;
}

.kjdest-card-footer{
	margin-top:auto;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:10px;
}

.kjdest-card-pkg-count{
	font-size:12px;
	font-weight:600;
	color:var(--kjdest-muted);
	display:flex;
	align-items:center;
	gap:6px;
	white-space:nowrap;
}

.kjdest-card-footer .kjtour-btn{
	flex:none;
	padding:9px 16px;
}

.kjdest-empty{
	text-align:center;
	color:var(--kjdest-muted);
	padding:40px 0;
}

/* ---------------- SECTION LABELS (archive page) ---------------- */

.kjdest-section-label{
	max-width:1280px;
	margin:48px auto 22px;
	padding:0 24px;
	font-size:13px;
	font-weight:700;
	text-transform:uppercase;
	letter-spacing:0.06em;
	color:var(--kjdest-primary);
	display:flex;
	align-items:center;
	gap:10px;
}

.kjdest-section-label i{
	color:var(--kjdest-accent);
}

.kjdest-section-label-intl{
	color:var(--kjdest-secondary);
}

.kjdest-section-label::after{
	content:'';
	flex:1;
	height:1px;
	background:var(--kjdest-border);
}

/* ---------------- ARCHIVE PAGE ---------------- */

.kjdest-single-body, .kjdest-archive-body{
	margin:0;
	background:var(--kjdest-bg);
}

.kjdest-archive-wrap{
	max-width:1280px;
	margin:0 auto;
	padding:14px 24px 30px;
}

.kjdest-archive-header{
	text-align:center;
	max-width:680px;
	margin:0 auto 20px;
}

.kjdest-eyebrow{
	display:inline-block;
	font-size:12px;
	font-weight:700;
	letter-spacing:0.08em;
	text-transform:uppercase;
	color:var(--kjdest-accent);
	background:rgba(249,115,22,0.1);
	padding:6px 16px;
	border-radius:20px;
	margin-bottom:16px;
}

.kjdest-archive-header h1{
	font-size:30px;
	font-weight:800;
	color:var(--kjdest-primary);
	margin-bottom:12px;
}

.kjdest-archive-header p{
	font-size:14.5px;
	color:var(--kjdest-muted);
	line-height:1.7;
}

.kjdest-archive-back{
	text-align:center;
	margin-top:20px;
	padding-bottom:20px;
}

.kjdest-archive-back a{
	color:var(--kjdest-primary);
	font-weight:600;
	font-size:13.5px;
	text-decoration:none;
	display:inline-flex;
	align-items:center;
	gap:8px;
}

.kjdest-archive-back a:hover{
	color:var(--kjdest-accent);
}

/* ---------------- SINGLE DESTINATION PAGE ---------------- */

.kjdest-body-wrap{
	max-width:1100px;
	margin:0 auto;
	padding:6px 24px 70px;
}

/* QUICK META ROW — compact pills only, no duplicate title/banner */
.kjdest-page-meta{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	gap:10px;
	margin-bottom:18px;
}

.kjdest-hero-pill{
	display:inline-flex;
	align-items:center;
	gap:6px;
	background:var(--kjdest-accent);
	color:#fff;
	font-size:12px;
	font-weight:700;
	padding:6px 14px;
	border-radius:20px;
}

.kjdest-page-meta-subtitle{
	font-size:14.5px;
	font-weight:500;
	color:var(--kjdest-muted);
}

/* QUICK FACTS STRIP */
.kjdest-facts{
	display:flex;
	gap:16px;
	flex-wrap:wrap;
	background:var(--kjdest-white);
	border:1px solid var(--kjdest-border);
	border-radius:16px;
	padding:20px 24px;
	margin-bottom:32px;
	box-shadow:0 8px 22px rgba(15,76,129,0.06);
}

.kjdest-fact{
	display:flex;
	align-items:center;
	gap:12px;
	flex:1;
	min-width:180px;
}

.kjdest-fact i{
	font-size:18px;
	color:var(--kjdest-accent);
	width:34px;
	height:34px;
	display:flex;
	align-items:center;
	justify-content:center;
	background:rgba(249,115,22,0.1);
	border-radius:10px;
	flex-shrink:0;
}

.kjdest-fact span{
	display:block;
	font-size:11.5px;
	color:var(--kjdest-muted);
	margin-bottom:2px;
}

.kjdest-fact strong{
	display:block;
	font-size:14.5px;
	color:var(--kjdest-text);
	font-weight:700;
}

/* GALLERY */
.kjdest-gallery{
	display:grid;
	grid-template-columns:2fr 1fr;
	gap:14px;
	margin-bottom:40px;
	background:var(--kjdest-white);
	padding:16px;
	border-radius:16px;
	box-shadow:0 8px 24px rgba(15,76,129,0.08);
}

.kjdest-gallery-main{
	border-radius:12px;
	overflow:hidden;
	height:380px;
}

.kjdest-gallery-main img{
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
	transition:0.3s;
}

.kjdest-gallery-thumbs{
	display:flex;
	flex-direction:column;
	gap:14px;
}

.kjdest-gallery-thumb{
	width:100%;
	height:183px;
	object-fit:cover;
	border-radius:12px;
	cursor:pointer;
	transition:0.25s;
	border:2px solid transparent;
}

.kjdest-gallery-thumb:hover{
	border-color:var(--kjdest-secondary);
	opacity:0.9;
}

/* MAIN / SIDEBAR COLUMNS */
.kjdest-columns{
	display:grid;
	grid-template-columns:2fr 1fr;
	gap:40px;
	align-items:start;
}

.kjdest-description{
	font-size:14.5px;
	line-height:1.9;
	color:var(--kjdest-text);
	margin-bottom:10px;
}

.kjdest-description p{
	margin-bottom:14px;
}

.kjdest-section{
	margin-top:36px;
	padding-top:30px;
	border-top:1px solid var(--kjdest-border);
}

.kjdest-section h2{
	font-size:19px;
	font-weight:700;
	color:var(--kjdest-primary);
	margin-bottom:18px;
}

.kjdest-highlights{
	list-style:none;
	margin:0;
	padding:0;
	display:flex;
	flex-direction:column;
	gap:14px;
}

.kjdest-highlights li{
	font-size:14px;
	line-height:1.7;
	display:flex;
	align-items:flex-start;
	gap:12px;
	background:var(--kjdest-bg);
	padding:14px 16px;
	border-radius:10px;
	border-left:3px solid var(--kjdest-secondary);
}

.kjdest-highlights i{
	color:var(--kjdest-accent);
	margin-top:3px;
}

/* SIDEBAR INFO CARD */
.kjdest-sidebar{
	position:sticky;
	top:24px;
}

.kjdest-info-card{
	background:var(--kjdest-white);
	border:1px solid var(--kjdest-border);
	border-radius:16px;
	padding:26px 24px;
	box-shadow:0 10px 26px rgba(15,76,129,0.1);
}

.kjdest-info-card h3{
	font-size:17px;
	font-weight:700;
	color:var(--kjdest-text);
	margin-bottom:8px;
}

.kjdest-info-sub{
	font-size:12.5px;
	color:var(--kjdest-muted);
	line-height:1.6;
	margin-bottom:16px;
}

.kjdest-info-divider{
	height:1px;
	background:var(--kjdest-border);
	margin-bottom:16px;
}

/* PACKAGES FOR THIS DESTINATION */
.kjdest-packages-section{
	margin-top:56px;
	padding-top:40px;
	border-top:1px solid var(--kjdest-border);
}

.kjdest-packages-section h2{
	font-size:24px;
	font-weight:800;
	color:var(--kjdest-primary);
	text-align:center;
	margin-bottom:30px;
}

.kjdest-packages-section .kjtour-grid{
	--kjtour-cols:3;
	max-width:none;
	padding:0;
}

/* ---------------- RESPONSIVE ---------------- */

@media(max-width:992px){
	.kjdest-grid{
		grid-template-columns:repeat(2, 1fr);
	}

	.kjdest-columns{
		grid-template-columns:1fr;
	}

	.kjdest-sidebar{
		position:static;
	}

	.kjdest-gallery{
		grid-template-columns:1fr;
	}

	.kjdest-gallery-thumbs{
		flex-direction:row;
	}

	.kjdest-gallery-main{
		height:280px;
	}

	.kjdest-gallery-thumb{
		height:130px;
	}

	.kjdest-packages-section .kjtour-grid{
		grid-template-columns:repeat(2, 1fr);
	}
}

@media(max-width:640px){
	.kjdest-grid{
		grid-template-columns:1fr;
	}

	.kjdest-body-wrap{
		padding:16px 16px 50px;
	}

	.kjdest-facts{
		flex-direction:column;
	}

	.kjdest-archive-header h1{
		font-size:23px;
	}

	.kjdest-packages-section .kjtour-grid{
		grid-template-columns:1fr;
	}

	.kjdest-card-footer{
		flex-direction:column;
		align-items:stretch;
	}

	.kjdest-card-footer .kjtour-btn{
		flex:1;
	}
}

/* ==========================================================================
   Circle destination display — [kj_destinations style="circle"]
   Compact "Browse by Destination" strip: round photo + name below.
   Designed to be pasted anywhere (homepage, widget, any post/page).
   ========================================================================== */
.kjdest-circle-grid{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	gap:28px;
	padding:10px 0;
}

.kjdest-circle-item{
	display:flex;
	flex-direction:column;
	align-items:center;
	width:110px;
	text-decoration:none;
	text-align:center;
}

.kjdest-circle-photo{
	display:block;
	width:96px;
	height:96px;
	border-radius:50%;
	overflow:hidden;
	border:3px solid #fff;
	box-shadow:0 2px 10px rgba(0,0,0,0.15);
	transition:transform 0.25s ease, box-shadow 0.25s ease;
}

.kjdest-circle-photo img{
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
}

.kjdest-circle-item:hover .kjdest-circle-photo{
	transform:translateY(-4px);
	box-shadow:0 6px 16px rgba(0,0,0,0.2);
}

.kjdest-circle-name{
	margin-top:10px;
	font-family:'Poppins', sans-serif;
	font-weight:600;
	font-size:14px;
	color:#1d1d1d;
	line-height:1.3;
}

@media(max-width:640px){
	.kjdest-circle-grid{
		gap:18px;
	}
	.kjdest-circle-item{
		width:84px;
	}
	.kjdest-circle-photo{
		width:76px;
		height:76px;
	}
	.kjdest-circle-name{
		font-size:12.5px;
	}
}