/**
 * Tour Booking — product archive (tour category) listing cards.
 *
 * Renders the products loop as a single-column list of horizontal tour cards.
 */

/* ---- Virtual tour-type archive wrapper (/tour-type/land|full/) ----
   Trang này render bằng template riêng (không có bootstrap inline như page.php),
   nên tự cấp container + tiêu đề tại đây. */
.myct-tt-archive {
	max-width: 1140px;
	margin: 0 auto;
	padding: 24px 16px 48px;
}
.myct-tt-archive-title {
	margin: 0 0 18px;
	font-size: 2rem;
	font-weight: 800;
	text-transform: uppercase;
	color: #11161f;
}
.myct-tt-archive-title:has( + .myct-tt-intro ) {
	margin-bottom: 6px;
}
.myct-tt-intro {
	margin: 0 0 22px;
	max-width: 820px;
}
.myct-tt-intro-tagline {
	margin: 0 0 6px;
	font-size: 1.1rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .02em;
	color: #015d38;
}
.myct-tt-intro-text {
	margin: 0;
	color: #3d4552;
	line-height: 1.6;
}
.myct-tt-empty {
	padding: 24px 0;
	color: #5a6473;
}

/* Bootstrap columns default to min-width:auto, so any nowrap content inside
   (the departure-dates scroller) makes the whole column grow instead of letting
   the scroller overflow. This file only loads on tour archive pages, so it is
   safe to let the Bootstrap column + Woo wrappers shrink here. */
.col,
[class*="col-"],
.woocommerce,
.woocommerce .products {
	min-width: 0;
}

/* Force the WooCommerce products list to one full-width column for tour cards.
   Neutralise the Woo flex/grid grid so the <li> can't grow to its content width
   (which would stop the inner departure-dates scroller from ever overflowing). */
ul.products:has( > li.myct-tour-card-li ),
ul.products.columns-1,
ul.products.columns-2,
ul.products.columns-3,
ul.products.columns-4,
ul.products.columns-5,
ul.products.columns-6 {
	display: block !important;
	grid-template-columns: none !important;
}
ul.products li.product.myct-tour-card-li {
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
	float: none !important;
	clear: both !important;
	display: block !important;
	margin: 0 0 18px !important;
	padding: 0 !important;
	list-style: none;
}

/* Theme bọc nội dung trang trong .overlay (display:flex; align-items:flex-start),
   khiến lưới sản phẩm bị co bằng bề rộng nội dung và dồn về trái (không tràn full).
   Ép các wrapper giãn hết bề rộng — chỉ áp dụng trên trang tour archive vì file
   này chỉ được enqueue ở đó.
   The theme's .overlay shrink-wraps and left-aligns the product list; stretch the
   wrappers to full width here. */
.overlay.bg-light {
	align-items: stretch;
}
.overlay.bg-light > div,
.woocommerce,
.woocommerce .products {
	width: 100%;
}

/* ==========================================================================
   Thẻ tour (myct_render_tour_card, inc/tour-booking/archive.php)
   Ảnh | danh mục + tiêu đề + thông tin nhanh + vị trí/mã + ngày khởi hành | giá + nút.
   Image | category, title, quick facts, location/code, departures | price + CTA.
   ========================================================================== */
.myct-tcard {
	--tc-green: #015d38;
	--tc-green-2: #02814f;
	--tc-tint: #eaf5ef;
	--tc-ink: #11161f;
	--tc-text: #4b5563;
	--tc-muted: #8a93a0;
	--tc-line: #e6ebe8;
	position: relative;
	display: flex;
	align-items: stretch;
	background: #fff;
	border: 1px solid var(--tc-line);
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 2px 6px rgba( 17, 22, 31, .04 ), 0 8px 24px rgba( 1, 93, 56, .05 );
	transition: box-shadow .25s ease, border-color .25s ease, transform .25s ease;
}

.myct-tcard:hover {
	transform: translateY( -3px );
	border-color: #cfe3d8;
	box-shadow: 0 4px 10px rgba( 17, 22, 31, .05 ), 0 18px 40px rgba( 1, 93, 56, .12 );
}

/* ---- Media ----
   Ảnh position:absolute nên tỉ lệ ảnh gốc không đẩy chiều cao card; khung giãn theo
   card, ảnh phủ kín bằng object-fit:cover. The image never drives the card height. */
.myct-tcard__media {
	flex: 0 0 300px;
	max-width: 300px;
	align-self: stretch;
	position: relative;
	min-height: 210px;
	display: block;
	overflow: hidden;
	/* Nền trung tính: tour chưa có ảnh vẫn giữ đúng ô. */
	background: #eef1f4;
}

.myct-tcard__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
	margin: 0;
	border-radius: 0;
	transition: transform .5s ease;
}

.myct-tcard:hover .myct-tcard__media img {
	transform: scale( 1.05 );
}

/* ---- Body ---- */
.myct-tcard__body {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 22px 26px;
}

.myct-tcard__cat {
	align-self: flex-start;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--tc-green-2);
}

.myct-tcard__title {
	margin: 0;
	font-family: 'Quicksand', sans-serif;
	font-size: 21px !important;
	font-weight: 700 !important;
	line-height: 1.35;
	letter-spacing: .01em;
	text-transform: uppercase;
}

.myct-tcard__title a {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	color: var(--tc-ink) !important;
	font-weight: 700 !important;
	font-size: inherit !important;
	text-decoration: none;
	transition: color .2s ease;
}

.myct-tcard__title a:hover,
.myct-tcard:hover .myct-tcard__title a {
	color: var(--tc-green) !important;
}

/* Thông tin nhanh: số ngày · hạng khách sạn · số khách tối thiểu. */
/* Woo / lable_two đặt margin/padding cho mọi ul trong li.product — trả về 0. */
.myct-tcard ul.myct-tcard__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
}

/* Clearfix ::before/::after của woocommerce.css (.woocommerce .products ul) thành một
   flex item rỗng và vẫn ăn 8px gap — thụt chip đầu tiên vào. Tắt đi. */
.myct-tcard ul.myct-tcard__facts::before,
.myct-tcard ul.myct-tcard__facts::after {
	content: none;
	display: none;
}

.myct-tcard ul.myct-tcard__facts li {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 0;
	padding: 6px 12px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	color: #2d3a33;
	background: var(--tc-tint);
	border-radius: 999px;
	list-style: none;
}

ul.myct-tcard__facts li i {
	font-size: 12px;
	color: var(--tc-green-2);
}

/* Vị trí + mã tour: thông tin phụ, dồn xuống đáy cột. */
.myct-tcard__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 14px;
	margin-top: auto;
	padding-top: 12px;
	font-size: 13px;
	border-top: 1px dashed var(--tc-line);
}

.myct-tcard__loc {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--tc-text);
	font-weight: 600;
}

.myct-tcard__loc i {
	color: var(--tc-green-2);
}

.myct-tbadge {
	display: inline-block;
	padding: 2px 9px;
	border-radius: 6px;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.6;
}

/* Mã tour: nhãn phụ, chữ đơn cách cho dễ đọc / đọc qua điện thoại. */
.myct-tbadge--code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-weight: 600;
	letter-spacing: .04em;
	color: var(--tc-muted);
	background: #f3f5f7;
}

.myct-tbadge--grey {
	background: #eef1f4;
	color: #4a5160;
}

/* ---- Departure dates ---- */
.myct-tcard__dep {
	min-width: 0;
	max-width: 100%;
}

.myct-tcard__dep-label {
	display: block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--tc-muted);
	margin-bottom: 6px;
}

.myct-tcard__dates {
	display: flex;
	flex-wrap: nowrap;
	gap: 7px;
	max-width: 100%;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 6px;
	padding-right: 28px;
	scrollbar-width: thin;
	scrollbar-color: #cdd8d2 transparent;
	/* Mờ dần ở mép phải: báo còn ngày để cuộn ngang. Fade hints at more dates. */
	-webkit-mask-image: linear-gradient( 90deg, #000 calc( 100% - 40px ), transparent );
	mask-image: linear-gradient( 90deg, #000 calc( 100% - 40px ), transparent );
}
.myct-tcard__dates::-webkit-scrollbar {
	height: 6px;
}
.myct-tcard__dates::-webkit-scrollbar-thumb {
	background: #cdd8d2;
	border-radius: 3px;
}
.myct-tcard__dates::-webkit-scrollbar-track {
	background: transparent;
}

.myct-date {
	display: inline-block;
	flex: 0 0 auto;
	scroll-snap-align: start;
	padding: 4px 10px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
	border: 1px solid transparent;
	white-space: nowrap;
}

/* Mỗi ngày là link mở trang chi tiết với ngày đó chọn sẵn. */
a.myct-date {
	text-decoration: none;
	cursor: pointer;
	transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
a.myct-date:hover,
a.myct-date:focus-visible {
	text-decoration: none;
	transform: translateY( -1px );
	filter: brightness( .97 );
	box-shadow: 0 2px 6px rgba( 20, 40, 30, .14 );
}
a.myct-date:focus-visible {
	outline: 2px solid #1f8a44;
	outline-offset: 2px;
}

.myct-date.is-open {
	background: #eaf7ee;
	color: #1f8a44;
	border-color: #cdead6;
}

.myct-date.is-limited {
	background: #fdf1e3;
	color: #c9700f;
	border-color: #f6d8b4;
}

.myct-date--more {
	background: #eef1f4;
	color: #5a6473;
	border-color: #e0e4e8;
}

/* ---- Aside (price + CTA) ---- */
.myct-tcard__aside {
	flex: 0 0 220px;
	max-width: 220px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	padding: 22px 22px;
	text-align: center;
	background: linear-gradient( 180deg, #f7fbf9 0, #eef6f1 100% );
	border-left: 1px solid var(--tc-line);
}

.myct-tcard__from {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--tc-muted);
}

.myct-tcard__price {
	font-family: 'Quicksand', sans-serif;
	font-size: 28px;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -.01em;
	color: var(--tc-green);
	font-variant-numeric: tabular-nums;
}

.myct-tcard__allin {
	font-size: 12px;
	color: var(--tc-muted);
	margin-bottom: 14px;
}

a.myct-tselect {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	min-height: 44px;
	padding: 10px 18px;
	border: 0;
	border-radius: 999px;
	color: #fff !important;
	background: var(--tc-green);
	font-weight: 700;
	font-size: 14px;
	letter-spacing: .02em;
	text-decoration: none;
	box-shadow: 0 6px 16px rgba( 1, 93, 56, .22 );
	transition: background-color .2s ease, box-shadow .2s ease;
}

a.myct-tselect i {
	font-size: 12px;
	transition: transform .2s ease;
}

a.myct-tselect:hover,
a.myct-tselect:focus-visible,
.myct-tcard:hover a.myct-tselect {
	background: var(--tc-green-2);
	color: #fff !important;
	text-decoration: none;
	box-shadow: 0 8px 20px rgba( 1, 93, 56, .3 );
}

.myct-tcard:hover a.myct-tselect i {
	transform: translateX( 3px );
}

a.myct-tselect:focus-visible {
	outline: 3px solid #c99a1d;
	outline-offset: 2px;
}

/* PRE-WEDDING cards: the "UP TO" value under the package price. */
.myct-tcard__upto {
	display: block;
	margin: -10px 0 12px;
	font-size: 12px;
	color: #888;
	letter-spacing: .02em;
	white-space: nowrap;
}

/* ---- Responsive ---- */
@media (max-width: 991px) {
	.myct-tcard__media {
		flex-basis: 240px;
		max-width: 240px;
	}
	.myct-tcard__aside {
		flex-basis: 190px;
		max-width: 190px;
		padding: 18px 16px;
	}
	.myct-tcard__body {
		padding: 18px 20px;
	}
}

@media (max-width: 782px) {
	.myct-tcard {
		flex-wrap: wrap;
	}
	.myct-tcard:hover {
		transform: none;
	}
	.myct-tcard__media {
		flex-basis: 100%;
		max-width: 100%;
		/* Ảnh poster có chữ: 4:3 cắt ít hơn 16:9. Posters carry text, so 4:3 crops less. */
		aspect-ratio: 4 / 3;
		min-height: 0;
	}
	@supports not ( aspect-ratio: 4 / 3 ) {
		.myct-tcard__media {
			height: 240px;
		}
	}
	.myct-tcard__body {
		flex-basis: 100%;
		gap: 10px;
		padding: 16px 16px 14px;
	}
	.myct-tcard__title {
		font-size: 18px !important;
	}
	.myct-tcard__title a {
		-webkit-line-clamp: 3;
	}
	ul.myct-tcard__facts li {
		padding: 5px 10px;
		font-size: 12px;
	}
	/* Hàng giá + nút trên một dòng: giá bên trái, nút bên phải. */
	.myct-tcard__aside {
		flex-basis: 100%;
		max-width: 100%;
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas:
			"from btn"
			"price btn"
			"note btn"
			"upto btn";
		align-items: center;
		column-gap: 16px;
		row-gap: 0;
		padding: 14px 16px;
		text-align: left;
		border-left: 0;
		border-top: 1px solid var(--tc-line);
	}
	.myct-tcard__from {
		grid-area: from;
	}
	.myct-tcard__price {
		grid-area: price;
		font-size: 24px;
	}
	.myct-tcard__allin {
		grid-area: note;
		margin-bottom: 0;
	}
	.myct-tcard__upto {
		grid-area: upto;
		margin: 2px 0 0;
	}
	.myct-tcard__aside a.myct-tselect {
		grid-area: btn;
		width: auto;
		padding: 10px 20px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.myct-tcard,
	.myct-tcard__media img,
	a.myct-tselect,
	a.myct-tselect i {
		transition: none;
	}
	.myct-tcard:hover,
	.myct-tcard:hover .myct-tcard__media img {
		transform: none;
	}
}