/* ==========================================================================
   Travel Hub - Tour card                              (Redesign Phase 1C)

   Markup: template-parts/components/product-card.php. One card, everywhere a
   Tour is listed. The grid around it decides columns; the card decides only
   its own inner rhythm, so it looks the same in the archive, on a destination
   page and under "You might also like".

   Row balance comes from the card being a flex column: the foot is pushed to
   the bottom with margin-block-start:auto, so prices and cues line up across a
   row whatever the title length - no fixed heights.
   ========================================================================== */

.th-card {
	position: relative;
	display: flex;
	flex-direction: column;
	min-inline-size: 0;
	block-size: 100%;
	overflow: hidden;
	border: var(--th-border);
	border-radius: var(--th-radius-card);
	background: var(--th-color-surface);
	box-shadow: var(--th-shadow-card);
	transition: box-shadow var(--th-dur) var(--th-ease), border-color var(--th-dur) var(--th-ease), transform var(--th-dur) var(--th-ease);
}
.th-card:hover { box-shadow: var(--th-shadow-raised); border-color: var(--th-border-color-strong); }
.th-card:focus-within { box-shadow: var(--th-shadow-raised), var(--th-focus-ring); }

/* 1. Media - the box is sized by aspect-ratio before the image arrives. */
.th-card__media { --th-ratio: var(--th-ratio-card); flex: 0 0 auto; border-radius: 0; }
.th-card__image { transition: transform 0.6s var(--th-ease); }
.th-card:hover .th-card__image { transform: scale(1.03); }

/* Image-less fallback: a designed panel, not an empty box. */
.th-card__fallback {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-end;
	gap: var(--th-space-2);
	padding: var(--th-card-pad);
	color: rgba(255, 255, 255, 0.92);
	background: linear-gradient(160deg, #0B3556 0%, #0E5A72 100%);
}
.th-card__media[data-family="sea"] .th-card__fallback { background: linear-gradient(160deg, #0A4A6E 0%, #0E7A6C 100%); }
.th-card__media[data-family="desert"] .th-card__fallback { background: linear-gradient(160deg, #6B3A12 0%, #B8671E 100%); }
.th-card__media[data-family="culture"] .th-card__fallback { background: linear-gradient(160deg, #1D2B45 0%, #5C4A2A 100%); }
.th-card__art {
	position: absolute;
	inset-block-start: 22%;
	inset-inline-start: 50%;
	inline-size: 44%;
	transform: translateX(-50%);
	fill: none;
	stroke: rgba(255, 255, 255, 0.34);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}
[dir="rtl"] .th-card__art { transform: translateX(50%); }
.th-card__fallback-place {
	position: relative;
	font-size: var(--th-fs-small);
	font-weight: var(--th-fw-heading);
	letter-spacing: 0.02em;
}

/* 2-6. Body */
.th-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: var(--th-card-media-gap) var(--th-card-pad) var(--th-card-pad);
}

.th-card__context {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--th-space-2) var(--th-space-3);
	margin: 0 0 var(--th-card-title-gap);
	min-block-size: 28px;
}
.th-card__place { color: var(--th-color-muted); font-size: var(--th-fs-small); font-weight: var(--th-fw-ui); }

.th-card__title {
	margin: 0;
	color: var(--th-color-ink);
	font-size: var(--th-fs-h4);
	font-weight: var(--th-fw-heading);
	line-height: var(--th-lh-snug);
	letter-spacing: 0;
}
.th-card__link { color: inherit; text-decoration: none; }
.th-card__link:focus-visible { outline: none; }
/* The stretched link: the whole card is the hit area, the title is the link. */
.th-card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.th-card:hover .th-card__link { color: var(--th-color-action-hover); }

.th-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--th-card-meta-gap) var(--th-space-4);
	margin: var(--th-card-title-gap) 0 0;
	padding: 0;
	list-style: none;
	color: var(--th-color-muted);
	font-size: var(--th-fs-small);
	line-height: var(--th-lh-ui);
}
.th-card__meta-item { display: inline-flex; align-items: center; gap: var(--th-space-2); }
.th-card__meta-item::before {
	content: "";
	inline-size: 16px;
	block-size: 16px;
	flex: 0 0 auto;
	background: currentColor;
	-webkit-mask: var(--th-card-icon) center / contain no-repeat;
	mask: var(--th-card-icon) center / contain no-repeat;
	opacity: 0.8;
}
.th-card__meta-item--time { --th-card-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6'%3E%3Ccircle cx='8' cy='8' r='6.2'/%3E%3Cpath d='M8 4.6V8l2.3 1.5' stroke-linecap='round'/%3E%3C/svg%3E"); }
.th-card__meta-item--group { --th-card-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6'%3E%3Ccircle cx='6' cy='5.5' r='2.4'/%3E%3Cpath d='M1.8 13.4c.6-2.4 2.2-3.6 4.2-3.6s3.6 1.2 4.2 3.6' stroke-linecap='round'/%3E%3Cpath d='M10.6 3.4a2.3 2.3 0 0 1 0 4.4M12 9.9c1.2.5 2 1.6 2.3 3.5' stroke-linecap='round'/%3E%3C/svg%3E"); }

.th-card__foot {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--th-space-3);
	margin-block-start: auto;
	padding-block-start: var(--th-card-foot-gap);
}

.th-card__price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 var(--th-space-1);
	margin: 0;
	color: var(--th-color-muted);
	font-size: var(--th-fs-small);
	line-height: var(--th-lh-ui);
}
.th-card__price-amount {
	color: var(--th-color-ink);
	font-size: var(--th-fs-h3);
	font-weight: var(--th-fw-display);
	letter-spacing: -0.01em;
	unicode-bidi: isolate;
}
.th-card__price--inquiry { color: var(--th-color-ink); font-weight: var(--th-fw-heading); }

.th-card__cue {
	display: inline-flex;
	align-items: center;
	gap: var(--th-space-1);
	flex: 0 0 auto;
	color: var(--th-color-action);
	font-size: var(--th-fs-small);
	font-weight: var(--th-fw-heading);
	white-space: nowrap;
}
.th-card__cue-icon { inline-size: 16px; block-size: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--th-dur) var(--th-ease); }
.th-card:hover .th-card__cue-icon { transform: translateX(3px); }
[dir="rtl"] .th-card__cue-icon { transform: scaleX(-1); }
[dir="rtl"] .th-card:hover .th-card__cue-icon { transform: scaleX(-1) translateX(3px); }

@media (prefers-reduced-motion: reduce) {
	.th-card,
	.th-card__image,
	.th-card__cue-icon { transition: none; }
	.th-card:hover .th-card__image { transform: none; }
}

/* --------------------------------------------------------------------------
   Card grids in existing templates adopt the canonical grid rhythm, so a
   card row has the same gap wherever it appears.
   -------------------------------------------------------------------------- */
.thui-grid:has(> .th-card),
.thh-tours__grid:has(> .th-card),
.thv3__related:has(> .th-card),
.thsx-grid--tours {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--th-grid-gap);
	align-items: stretch;
}
@media (min-width: 768px) {
	.thui-grid:has(> .th-card),
	.thh-tours__grid:has(> .th-card),
	.thsx-grid--tours { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
	.thui-grid--3:has(> .th-card),
	.thsx-grid--tours { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.thh-tours__grid:has(> .th-card) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Search results wrap each card in an <li>; the item must fill its row cell. */
.thsx-grid--tours { margin: 0; padding: 0; list-style: none; }
.thsx-grid--tours > .thsx-grid__item { display: flex; }

/* ==========================================================================
   Place card - a destination (Phase 1D, shared with the Home in 1F)
   Same surface, radius, border and shadow as the Tour card; 3:2 media. A
   place without its own photograph shows the designed brand panel.
   ========================================================================== */
.th-places { margin: 0; padding: 0; list-style: none; }
.th-place {
	position: relative;
	overflow: hidden;
	border: var(--th-border);
	border-radius: var(--th-radius-card);
	background: var(--th-color-surface);
	box-shadow: var(--th-shadow-card);
	transition: box-shadow var(--th-dur) var(--th-ease);
}
.th-place:hover { box-shadow: var(--th-shadow-raised); }
.th-place:focus-within { box-shadow: var(--th-shadow-raised), var(--th-focus-ring); }
.th-place__media { background: linear-gradient(160deg, #0A4A6E 0%, #0E7A6C 100%); }
.th-place__body { padding: var(--th-card-pad); }
.th-place__title { margin: 0; color: var(--th-color-ink); font-size: var(--th-fs-h4); }
.th-place__link { color: inherit; text-decoration: none; }
.th-place__link:focus-visible { outline: none; }
.th-place__link::after { content: ""; position: absolute; inset: 0; }
.th-place__meta { margin: var(--th-space-2) 0 0; color: var(--th-color-muted); font-size: var(--th-fs-small); }
.th-place__fallback { background: linear-gradient(160deg, #0A4A6E 0%, #0E7A6C 100%); }
.th-place__kicker {
	margin: 0 0 var(--th-space-1);
	color: var(--th-color-accent-ink);
	font-size: var(--th-fs-micro);
	font-weight: var(--th-fw-heading);
	letter-spacing: var(--th-ls-eyebrow);
	text-transform: uppercase;
}
.th-place__lede {
	margin: var(--th-space-2) 0 0;
	color: var(--th-color-text);
	font-size: var(--th-fs-small);
	line-height: var(--th-lh-body);
}
@media (prefers-reduced-motion: reduce) {
	.th-place { transition: none; }
}