/**
 * Shared tour-card styles.
 *
 * Every block that draws a card — tour-category-rows, tour-tabs, tour-list — emits
 * the same .tc-card markup from travel_core_render_card(), but each block ships its
 * own stylesheet, so these rules used to live only in tour-category-rows. Any other
 * block using cards then rendered them unstyled: no background photo, no gradient,
 * no arrow. That happened twice (the homepage tabs, then the category archive), so
 * the card's appearance now lives here, in one place, loaded whenever a card is
 * rendered.
 *
 * Block-specific rules — column counts, min-heights, the category-card variant —
 * stay in each block's own stylesheet.
 */

/* ---- Grid ---- */
.tc-cards {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--wp--preset--spacing--40, 1rem);
}

.tc-cards--3 {
	grid-template-columns: repeat(3, 1fr);
}

.tc-cards--4 {
	grid-template-columns: repeat(4, 1fr);
}

/* ---- Card ---- */
.tc-card {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	overflow: hidden;
	border-radius: 8px;
	/* 24px. The mockup's text sits 25–26px in from the card edge; CJK glyphs carry
	   a little side bearing, so 24 of padding lands the ink where the design has
	   it. The arrow is closer to the corner than this and positions itself. */
	padding: var(--wp--preset--spacing--50, 1.5rem);
	color: #fff;
	text-decoration: none;
	background-color: var(--wp--preset--color--primary, #1D3653);
	transition: transform 0.2s ease;
}

.tc-card:hover,
.tc-card:focus {
	color: #fff;
	transform: translateY(-4px);
}

.tc-card:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent, #E1C19F);
	outline-offset: 2px;
}

/* The photo fills the card behind the text, with a gradient so the text stays
   legible over a bright image. */
.tc-card__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
}

/* The photo is an <img> now, not a background — that is what buys it `srcset` and
   `loading="lazy"`, neither of which a background can have. `object-fit: cover`
   reproduces exactly what `background-size: cover` was doing.
   
   `display: block` matters: an inline image sits on the text baseline and leaves a
   few pixels of card colour along the bottom edge. */
/* ---- Horizontal row ----
 * Rendered by travel_core_render_row() for categories set to the 横向大行 layout.
 * The markup was there and the styles were not — `.list-row` in the theme is a
 * different component — so the photo showed as an empty box. */
.tc-listrow {
	display: grid;
	grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
	gap: var(--wp--preset--spacing--60, 2rem);
	align-items: center;
	margin-bottom: var(--wp--preset--spacing--70, 2.5rem);
}

.tc-listrow__media {
	display: block;
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 8px;
	background: var(--wp--preset--color--surface, #E5E7EC);
}

.tc-listrow__title {
	margin: 0 0 var(--wp--preset--spacing--30, 0.75rem);
	font-size: var(--wp--preset--font-size--x-large, 1.75rem);
	line-height: 1.3;
}

.tc-listrow__title a {
	color: var(--wp--preset--color--primary, #1D3653);
	text-decoration: none;
}

.tc-listrow__text {
	margin: 0 0 var(--wp--preset--spacing--40, 1rem);
	color: var(--wp--preset--color--subtle, #6B7280);
	line-height: 1.8;
}

.tc-listrow__cta {
	margin: 0;
	text-align: right;
}

@media (max-width: 768px) {
	.tc-listrow {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--40, 1rem);
	}
}

/* Two classes, not one.
 *
 * WooCommerce ships `.woocommerce img, .woocommerce-page img { height: auto }`, which
 * is one class plus an element — the same specificity as `.tc-card__media img` — and
 * its stylesheet loads after this one, so it won the tie and the image kept its own
 * height. That is what left the card's background showing under the photo.
 *
 * `height: auto` also cannot be worked around by positioning alone: an absolutely
 * positioned replaced element with `inset: 0` still takes its intrinsic height, so
 * the 100% has to win rather than be avoided.
 *
 * The class is doubled rather than qualified by its parent. Scoping it to `.tc-card`
 * missed the category cards, whose wrapper is `.tc-cat-card` — their images kept the
 * intrinsic 768×410 and overflowed the card. Repeating the media layer's own class
 * buys the same specificity without caring what the card around it is called. */
.tc-card__media.tc-card__media img,
.tc-listrow__media.tc-listrow__media img {
	display: block;
	object-fit: cover;
	object-position: center;
}

/* Pinned to the layer's edges rather than sized at 100%.
 *
 * A card's height comes from `min-height` plus whatever its text needs, so the
 * media layer has no definite height for a percentage to resolve against — the
 * image fell back to its own aspect ratio and left the card's background showing
 * below it. `inset: 0` on an absolutely positioned image does not need to know the
 * height; it just reaches both edges.
 *
 * `width`/`height: 100%` stays off: the width/height attributes WordPress writes
 * would otherwise fight the aspect ratio the browser derives from them. */
.tc-card__media.tc-card__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

/* The row's photo has a fixed aspect ratio, so a percentage resolves there and it
   can stay in flow. */
.tc-listrow__media.tc-listrow__media img {
	width: 100%;
	height: 100%;
}

.tc-card__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		rgba(20, 30, 45, 0.88) 0%,
		rgba(20, 30, 45, 0.45) 45%,
		rgba(20, 30, 45, 0.1) 100%
	);
}

.tc-card__body {
	position: relative;
	z-index: 1;
	display: block;
}

.tc-card__title {
	display: block;
	/* 22px in the mockup, against the 16px this was set to — the single biggest
	   difference between the two. */
	font-size: 1.375rem;
	font-weight: 600;
	line-height: 1.4;
}

.tc-card__duration {
	display: block;
	font-size: 1.375rem;
	font-weight: 600;
	line-height: 1.4;
}

.tc-card__meta {
	display: block;
	/* Measured 20px between the title's line box and the first line of this. */
	margin-top: 1.25rem;
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	/* Light neutral rather than the brand's muted blue: over a photograph the blue
	   reads as part of the image. The mockup's second line samples near #CACFD4. */
	color: rgba(255, 255, 255, 0.82);
	/* Two lines sit 18px apart in the mockup, not the 24 that 1.7 would give. */
	line-height: 1.3;
}

.tc-card__subtitle {
	display: block;
	font-size: var(--wp--preset--font-size--medium, 1rem);
	line-height: 1.5;
}

/* On the styles that carry an arrow, the meta column stops short of it. The
   mockup's "皇后镇、瓦纳卡、基督城、蒂卡波湖……" would fit on one line across the full
   261px of card, and it wraps after 12 characters — so the text column is about
   175px, leaving roughly 5rem clear on the right. Without this the last line runs
   under the arrow on any card with a longer list. */
.tc-card--badge .tc-card__meta,
.tc-card--duration .tc-card__meta {
	padding-right: 5rem;
}

/* The arrow sits 20px from the card's corner — inside the 24px padding, not level
   with the text. Positioned against the card itself, so it stays put whatever the
   body ends up being. */
.tc-card .card-arrow {
	position: absolute;
	right: 20px;
	bottom: 20px;
	width: 30px;
	height: 30px;
	border-color: rgba(255, 255, 255, 0.9);
}

/* Badge and arrow sit above the media layer. Their own look (the pill, the circle)
   comes from the theme's blocks.css, which styles them site-wide. */
.tc-card .card-badge {
	position: relative;
	z-index: 1;
}

.tc-card .card-arrow {
	z-index: 1;
}

/* ---- Empty state ---- */
.tc-empty {
	padding: 1rem;
	border: 1px dashed var(--wp--preset--color--border, #D8DCE5);
	border-radius: 4px;
	color: var(--wp--preset--color--subtle, #6B7280);
	text-align: center;
}

/* ---- Responsive ---- */
@media (max-width: 992px) {
	.tc-cards,
	.tc-cards--4 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 768px) {
	.tc-cards,
	.tc-cards--3,
	.tc-cards--4 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 480px) {
	.tc-cards,
	.tc-cards--3,
	.tc-cards--4 {
		grid-template-columns: 1fr;
	}
}

/* The lift on hover is decoration; don't animate it for people who'd rather not. */
@media (prefers-reduced-motion: reduce) {
	.tc-card {
		transition: none;
	}

	.tc-card:hover,
	.tc-card:focus {
		transform: none;
	}
}