/* ==========================================================================
   JGG tour card (inc/jgg-trips-archive.php jgg_tour_card): tours page + "You might also like".
   Photo 3:2 (+ Popular), title, duration • Free Cancellation, rating | From price
   (sale red). Same height in a row, rating/price on one line at the bottom. Square corners.
   ========================================================================== */
.jgg-tcard, .jgg-tcard * { box-sizing: border-box; border-radius: 0 !important; }
html body .jgg-tcard.category-trips-single:not(#jgg-a) {
	position: relative;
	display: flex;
	flex-direction: column;
	width: auto !important;
	max-width: none !important;
	flex: none !important;
	margin: 0 !important;
	padding: 0 !important;
	background: #fff !important;
	border: 1px solid #e6e6e6 !important;
	box-shadow: none !important;
	font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	color: #111;
}
body .jgg-tcard__img { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: #f4f4f4; }
body .jgg-tcard__img img:not(#jgg-a) { display: block; width: 100%; height: 100% !important; max-width: none; object-fit: cover; }
body .jgg-tcard__tag {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 2;
	padding: 4px 9px;
	font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #f7ec46;
	background: #000;
}

body .jgg-tcard__body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 16px 16px 0; }
html body .jgg-tcard .jgg-tcard__title:not(#jgg-a) { margin: 0 0 8px !important; padding: 0 !important; font-family: inherit !important; font-size: 20px !important; font-weight: 700 !important; line-height: 1.2 !important; letter-spacing: -0.015em !important; color: #111 !important; }
html body .jgg-tcard .jgg-tcard__title a:not(#jgg-a) { color: inherit !important; text-decoration: none !important; }
html body .jgg-tcard .jgg-tcard__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; } /* whole card opens the tour */
body .jgg-tcard:hover .jgg-tcard__title a { text-decoration: underline !important; text-underline-offset: 3px; }
body .jgg-tcard__title a:focus-visible { outline: none; }
body .jgg-tcard:has(.jgg-tcard__title a:focus-visible) { outline: 2px solid #000; outline-offset: 2px; }
html body .jgg-tcard .jgg-tcard__meta:not(#jgg-a) { margin: 0 0 16px !important; font-size: 13px; font-weight: 500; line-height: 1.4; color: #555; }
body .jgg-tcard__foot {
	display: flex;
	align-items: last baseline; /* rating level with the price (the price's last line when it wraps) */
	justify-content: space-between;
	gap: 10px;
	margin-top: auto;
	padding: 14px 0 16px;
	border-top: 1px solid #e6e6e6;
}
html body .jgg-tcard .jgg-tcard__title:has(+ .jgg-tcard__foot):not(#jgg-a) { margin-bottom: 16px !important; } /* no meta line: same space above the divider */
body .jgg-tcard__rating { display: inline-flex; flex: 0 0 auto; align-items: baseline; gap: 4px; font-size: 16px; font-weight: 500; line-height: 22px; white-space: nowrap; }
body .jgg-tcard__rating strong { font-weight: 600; }
body .jgg-tcard__price { display: inline-flex; flex: 1 1 auto; min-width: 0; align-items: baseline; flex-wrap: wrap; justify-content: flex-end; gap: 2px 5px; margin-left: auto; line-height: 26px; text-align: right; } /* too long for one line: "From ¥300,000" moves above, the price stays level with the rating */
body .jgg-tcard__price small { line-height: 1; font-size: 12px; font-weight: 500; color: #555; }
body .jgg-tcard__price del.jgg-was { margin: 0; line-height: 1; font-size: 12px; font-weight: 500; color: #6b6b6b; text-decoration: line-through; }
body .jgg-tcard__price strong { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; color: #111; white-space: nowrap; }
body .jgg-tcard__price strong.jgg-sale { color: #d0213f; }
body .jgg-tcard__price:has(del.jgg-was) strong { flex-basis: 100%; text-align: right; } /* on sale: "From ¥300,000" always on its own line above the red price, at every width */