/**
 * Klook Travels — frontend cards.
 *
 * Built on the Explore Osaka theme design tokens (--ink, --r, --g, --serif,
 * --sans, --sh-sm, --r1/--r2, --p/--p2/--p3) with safe fallbacks so the cards
 * match the theme and still render standalone.
 */

.kt-shortcode {
	--kt-ink: var(--ink, #1a1714);
	--kt-ink3: var(--ink3, #3e3a35);
	--kt-muted: var(--p3, #8a7f72);
	--kt-paper: var(--p, #ede7da);
	--kt-line: var(--p2, #d9d0c0);
	--kt-surface: var(--w, #faf7f2);
	--kt-red: var(--r, #c1281a);
	--kt-gold: var(--g, #f0c040);
	--kt-gold-dk: var(--gd, #9e7200);
	--kt-radius: var(--r2, 14px);
	--kt-radius-sm: var(--r0, 4px);
	--kt-shadow: var(--sh-sm, 0 2px 12px rgba(26, 23, 20, .07), 0 1px 3px rgba(26, 23, 20, .05));
	--kt-shadow-lg: var(--sh-md, 0 6px 32px rgba(26, 23, 20, .12), 0 2px 8px rgba(26, 23, 20, .06));
	--kt-sans: var(--sans, 'Plus Jakarta Sans', sans-serif);
	--kt-serif: var(--serif, 'Fraunces', Georgia, serif);
	font-family: var(--kt-sans);
	margin: 28px 0;
}

.kt-shortcode__title {
	color: var(--kt-ink);
	display: block;
	font-family: var(--kt-serif);
	font-size: clamp(22px, 3vw, 26px);
	font-weight: 700;
	line-height: 1.15;
	margin: 0 0 18px;
}

/* min(<track>, 100%) caps the column minimum at the container width so the
   track can never be wider than the screen — preventing horizontal overflow on
   viewports narrower than the track size (no media query needed). */
.kt-grid {
	display: grid;
	gap: 24px;
	grid-template-columns: repeat(auto-fill, minmax(min(270px, 100%), 1fr));
}

/* A grid of horizontal cards needs wide columns so the image (≈230px) and the
   body sit side by side without the content overflowing/clipping. */
.kt-grid--horizontal {
	grid-template-columns: repeat(auto-fill, minmax(min(420px, 100%), 1fr));
}

.kt-list {
	display: grid;
	gap: 18px;
}

/* ── Card ─────────────────────────────────────────────────────────────── */

.kt-card {
	background: var(--kt-surface);
	border: 1px solid var(--kt-line);
	border-radius: var(--kt-radius);
	box-shadow: var(--kt-shadow);
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	transition: transform .25s var(--ease, ease), box-shadow .25s ease, border-color .25s ease;
}

.kt-card:hover {
	border-color: var(--kt-muted);
	box-shadow: var(--kt-shadow-lg);
	transform: translateY(-4px);
}

.kt-card__media {
	aspect-ratio: 16 / 11;
	background: var(--kt-paper);
	overflow: hidden;
	position: relative;
}

/* !important defeats the theme's .post-content img / .page-content-inner img
   rules (height:auto, margin-block, border-radius, box-shadow) that otherwise
   shrink the image and leave empty space inside the card media. */
.kt-card__media img {
	border-radius: 0 !important;
	box-shadow: none !important;
	display: block;
	height: 100% !important;
	margin: 0 !important;
	max-width: none !important;
	object-fit: cover !important;
	transition: transform .4s ease;
	width: 100% !important;
}

.kt-card:hover .kt-card__media img {
	transform: scale(1.04);
}

.kt-card__badge {
	background: var(--kt-red);
	border-radius: var(--kt-radius-sm);
	color: #fff;
	font-size: 10.5px;
	font-weight: 700;
	left: 10px;
	letter-spacing: .02em;
	padding: 4px 8px;
	position: absolute;
	text-transform: uppercase;
	top: 10px;
}

.kt-card__body {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	gap: 8px;
	padding: 15px 17px 16px;
}

.kt-card__title {
	color: var(--kt-ink);
	display: block;
	font-family: var(--kt-serif);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.25;
}

.kt-card__stars {
	color: var(--kt-gold);
	display: inline-flex;
	gap: 1px;
}

.kt-card__stars svg {
	fill: currentColor;
	height: 13px;
	width: 13px;
}

.kt-card__meta {
	align-items: center;
	color: var(--kt-muted);
	display: flex;
	flex-wrap: wrap;
	font-size: 12px;
	font-weight: 600;
	gap: 6px 10px;
}

.kt-card__rating {
	align-items: center;
	background: var(--kt-gold);
	border-radius: var(--kt-radius-sm);
	color: var(--kt-ink);
	display: inline-flex;
	gap: 5px;
	line-height: 1.1;
	padding: 4px 7px;
}

.kt-card__rating .score {
	font-size: 12px;
	font-weight: 800;
}

.kt-card__rating .label {
	font-size: 8.5px;
	font-weight: 700;
	letter-spacing: .03em;
	text-transform: uppercase;
}

.kt-card__location {
	align-items: center;
	color: var(--kt-muted);
	display: flex;
	flex-wrap: wrap;
	font-size: 12.5px;
	font-weight: 500;
	gap: 5px;
}

.kt-card__location svg {
	flex-shrink: 0;
	height: 13px;
	opacity: .8;
	width: 13px;
}

/* Distance now sits inline within the location row (not its own line) so hotel
   cards have the same row count — and height — as tour cards. */
.kt-card__distance {
	color: var(--kt-muted);
	font-size: 11.5px;
	font-weight: 500;
}

.kt-card__place + .kt-card__distance::before {
	content: "·";
	margin-right: 4px;
}

.kt-card__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
}

.kt-tag {
	background: var(--kt-paper);
	border-radius: var(--kt-radius-sm);
	color: var(--kt-ink3);
	font-size: 10.5px;
	font-weight: 600;
	padding: 3px 8px;
}

.kt-card__foot {
	align-items: center;
	border-top: 1px dashed var(--kt-line);
	display: flex;
	gap: 12px;
	justify-content: space-between;
	margin-top: auto;
	padding-top: 12px;
}

.kt-card__price {
	display: flex;
	flex-direction: column;
	line-height: 1.1;
}

.kt-card__price-label {
	color: var(--kt-muted);
	font-size: 10.5px;
	font-weight: 600;
	text-transform: uppercase;
}

.kt-card__price-value {
	color: var(--kt-red);
	font-family: var(--kt-serif);
	font-size: 19px;
	font-weight: 700;
}

.kt-card__price-unit {
	color: var(--kt-muted);
	font-family: var(--kt-sans);
	font-size: 11px;
	font-weight: 600;
}

.kt-card__cta {
	align-items: center;
	border: 0;
	border-radius: var(--rp, 9999px);
	cursor: pointer;
	display: inline-flex;
	font-family: var(--kt-sans);
	font-size: 13px;
	font-weight: 700;
	gap: 7px;
	justify-content: center;
	line-height: 1;
	padding: 10px 18px;
	text-decoration: none;
	transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
	white-space: nowrap;
}

/* The Klook logo SVG is white (fill #ffffff), so it sits directly on the orange
   button with no background circle (a white circle would hide it). */
.kt-card__cta-icon {
	align-items: center;
	background: transparent;
	display: inline-flex;
	height: 18px;
	justify-content: center;
	width: 18px;
}

.kt-card__cta-icon img {
	border-radius: 0 !important;
	box-shadow: none !important;
	display: block;
	height: 18px !important;
	margin: 0 !important;
	max-width: none !important;
	object-fit: contain;
	width: 18px !important;
}

.kt-card__cta.klook-btn,
.kt-card__cta.klook-btn:visited {
	background: #ff6200;
	color: #fff;
	text-decoration: none!important;
}

.kt-card__cta.klook-btn:hover,
.kt-card__cta.klook-btn:focus {
	background: #e55700;
	box-shadow: 0 4px 12px rgba(255, 98, 0, .32);
	color: #fff;
	transform: translateY(-1px);
	text-decoration: none!important;
}

.kt-card__cta--disabled {
	background: var(--kt-paper);
	color: var(--kt-muted);
	cursor: not-allowed;
}

.klook-travels-error {
	background: #fff3f3;
	border: 1px solid #e1b4b4;
	border-radius: 6px;
	color: #7a1f1f;
	font-family: var(--sans, sans-serif);
	padding: 12px 14px;
}

/* ── Horizontal / list variant ────────────────────────────────────────── */

@media (min-width: 600px) {
	.kt-card--horizontal {
		flex-direction: row;
	}

	.kt-card--horizontal .kt-card__media {
		aspect-ratio: auto;
		flex-shrink: 0;
		width: 230px;
	}

	/* Take the image out of flow so its intrinsic (portrait vs landscape) height
	   no longer inflates the card. The card height is then driven by the body
	   content, and the image crops to fill whatever that height is — giving
	   consistent card heights regardless of the source image's shape. */
	.kt-card--horizontal .kt-card__media img {
		position: absolute;
		inset: 0;
	}

	.kt-card--horizontal .kt-card__body {
		flex-grow: 1;
	}
}

@media (max-width: 599px) {
	.kt-card--horizontal {
		flex-direction: column;
	}

	.kt-card--horizontal .kt-card__media {
		aspect-ratio: 16 / 11;
		width: 100%;
	}
}

/* ── Carousel ─────────────────────────────────────────────────────────── */

.kt-swiper-container {
	padding: 6px 0 26px;
	position: relative;
}

.kt-swiper {
	overflow: hidden;
	padding: 4px 4px 18px;
}

/* Fallback when Swiper is unavailable / not yet initialised: a clean
   scroll-snap row of full-width cards (no awkward peek), each at its natural
   height (align-items:flex-start avoids stretching shorter cards). */
.kt-swiper:not(.swiper-initialized) .swiper-wrapper {
	align-items: flex-start;
	display: flex;
	gap: 18px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
}

.kt-swiper:not(.swiper-initialized) .swiper-slide {
	flex: 0 0 100%;
	scroll-snap-align: start;
}

.kt-swiper .swiper-slide {
	height: auto;
}

.kt-swiper-nav {
	display: flex;
	gap: 8px;
	justify-content: flex-end;
	margin-bottom: 12px;
}

.kt-swiper-nav button {
	align-items: center;
	background: var(--kt-surface, #fff);
	border: 1px solid var(--kt-line, #d2cabf);
	border-radius: 999px;
	color: var(--kt-ink, #18212f);
	cursor: pointer;
	display: inline-flex;
	font-size: 16px;
	font-weight: 800;
	height: 34px;
	justify-content: center;
	line-height: 1;
	width: 34px;
}

.kt-swiper-nav button:hover,
.kt-swiper-nav button:focus {
	background: var(--kt-ink, #18212f);
	color: #fff;
}