/**
 * 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-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%;
}

.myct-tcard {
	display: flex;
	align-items: stretch;
	gap: 18px;
	background: #fff;
	border: 1px solid #e6e9ec;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.05 );
	transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.myct-tcard:hover {
	box-shadow: 0 6px 18px rgba( 0, 0, 0, 0.10 );
	border-color: #d7dde2;
}

/* ---- Media ----
   Cỡ `medium` của WordPress chỉ GIỚI HẠN khung, không cắt: ảnh ngang ra
   300x200, ảnh dọc ra 172x300. Cách cũ (`height:100%` trên thẻ img nằm trong
   luồng) khiến ảnh tự đẩy chiều cao card theo tỉ lệ gốc của nó, rồi lại lấy
   chiều cao đó làm chiều cao của mình — nên mỗi card một cỡ tuỳ ảnh admin tải lên.

   Sửa gốc rễ: ảnh dùng position:absolute nên KHÔNG còn góp một pixel nào vào
   layout — tỉ lệ ảnh gốc không thể tác động tới chiều cao card nữa. Khung ảnh
   giãn đầy cả chiều rộng cột lẫn chiều cao card (align-self:stretch), ảnh phủ
   kín khung bằng object-fit:cover và tự cắt phần thừa.

   The uploaded image's ratio must not drive layout: absolutely positioning the
   img removes it from flow entirely, so the media box takes the full card height
   and cover crops whatever was uploaded to fit it. */
.myct-tcard__media {
	flex: 0 0 230px;
	max-width: 230px;
	/* Giãn theo chiều cao card, không để hở khoảng trắng ở cột trái. */
	align-self: stretch;
	/* Mốc định vị cho ảnh bên trong. */
	position: relative;
	/* Card có nội dung ngắn vẫn giữ được khung 4:3 tối thiểu (230 x 172). */
	min-height: 172px;
	display: block;
	overflow: hidden;
	/* Nền trung tính: tour chưa có ảnh vẫn giữ đúng ô, lưới không bị lệch. */
	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;
}

/* ---- Body ---- */
.myct-tcard__body {
	flex: 1 1 0;
	min-width: 0;
	padding: 16px 8px 16px 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 10px;
}

.myct-tcard__title {
	margin: 0;
	font-size: 25px !important;
	font-weight: 900 !important;
	line-height: 1.25;
	letter-spacing: 0.2px;
	text-transform: uppercase;
}

.myct-tcard__title a {
	color: #11161f !important;
	font-weight: 900 !important;
	font-size: inherit !important;
	text-decoration: none;
}

.myct-tcard__title a:hover {
	color: #015d38 !important;
}

.myct-tcard__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	font-size: 13px;
}

.myct-tcard__loc {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: #5a6473;
	font-weight: 600;
}

.myct-tcard__loc i {
	color: #16a34a;
}

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

.myct-tbadge--blue {
	background: #e8f1fb;
	color: #2b6cb0;
}

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

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

.myct-tcard__dep-label {
	display: block;
	font-size: 12px;
	font-weight: 700;
	color: #8a93a0;
	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;
	scrollbar-width: thin;
	scrollbar-color: #cdd8d2 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: 3px 9px;
	border-radius: 5px;
	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 + select) ---- */
.myct-tcard__aside {
	flex: 0 0 190px;
	max-width: 190px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding: 16px 18px;
	border-left: 1px solid #eef1f4;
	text-align: center;
}

.myct-tcard__from {
	font-size: 13px;
	color: #8a93a0;
}

.myct-tcard__price {
	font-size: 22px;
	font-weight: 800;
	color: #1d2433;
	line-height: 1.2;
}

.myct-tcard__allin {
	font-size: 12px;
	color: #8a93a0;
	margin-bottom: 8px;
}

.myct-tselect {
	display: inline-block;
	padding: 9px 26px;
	border: 1.5px solid #015d38;
	border-radius: 6px;
	color: #015d38;
	background: #fff;
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.3px;
	text-decoration: none;
	transition: background 0.15s ease, color 0.15s ease;
}

.myct-tselect:hover {
	background: #015d38;
	color: #fff;
}

/* ---- Responsive ---- */
@media (max-width: 782px) {
	.myct-tcard {
		flex-wrap: wrap;
	}
	.myct-tcard__media {
		flex-basis: 100%;
		max-width: 100%;
		/* Xuống một dòng riêng nên không còn chiều cao card để giãn theo: chốt
		   bằng tỉ lệ 16:9, co theo bề rộng máy và mọi card vẫn bằng nhau. */
		aspect-ratio: 16 / 9;
		min-height: 0;
	}
	@supports not ( aspect-ratio: 16 / 9 ) {
		.myct-tcard__media {
			height: 200px;
		}
	}
	.myct-tcard__body {
		flex-basis: 100%;
		padding: 16px;
	}
	.myct-tcard__aside {
		flex-basis: 100%;
		max-width: 100%;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: baseline;
		justify-content: flex-start;
		gap: 2px 8px;
		padding: 14px 16px;
		border-left: none;
		border-top: 1px solid #eef1f4;
		text-align: left;
	}
	/* Hàng giá: "From / giá / All In" gom sát nhau bên trái, không dàn đều 3 góc. */
	.myct-tcard__allin {
		margin-bottom: 0;
	}
	/* Nút SELECT xuống dòng riêng, kéo full bề rộng để dễ bấm trên mobile. */
	.myct-tcard__aside .myct-tselect {
		flex-basis: 100%;
		width: 100%;
		margin: 10px 0 0;
		text-align: center;
	}
}

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