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

/* Pinned, like the card's. The row's media box is sized by `min-height`, not by an
   aspect ratio, so there is no definite height for a percentage to resolve against
   — the same trap the cards hit. `inset: 0` does not need one. */
.tc-listrow__media.tc-listrow__media img {
	position: absolute;
	inset: 0;
	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;
	}
}