/*
 * Tourtify tour cards. They inherit the theme's fonts and colours, and buttons use the theme's button style
 * (wp-element-button). Adjust them from your theme's CSS with these custom properties, or turn these styles off in
 * WP Admin › Tourtify › Display and style .tourtify-* yourself.
 */
.tourtify-tours {
	--tourtify-gap: 1.5rem;
	--tourtify-radius: 12px;
	--tourtify-border: 1px solid rgba(0, 0, 0, 0.1);
	--tourtify-card-bg: var(--wp--preset--color--base, #fff);
	--tourtify-image-ratio: 4 / 3;
	--tourtify-muted: 0.75;
	--tourtify-card-min: 15rem;
	display: grid;
	/* Up to --tourtify-columns per row, fewer when the space is narrower than that many cards of --tourtify-card-min
	   (a sidebar, a narrow content column, a phone), whatever the screen size. */
	grid-template-columns: repeat(auto-fill, minmax(max(min(var(--tourtify-card-min), 100%), calc((100% - (var(--tourtify-columns, 3) - 1) * var(--tourtify-gap)) / var(--tourtify-columns, 3))), 1fr));
	gap: var(--tourtify-gap);
}
.tourtify-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: var(--tourtify-border);
	border-radius: var(--tourtify-radius);
	background: var(--tourtify-card-bg);
}
.tourtify-card__media { display: block; aspect-ratio: var(--tourtify-image-ratio); overflow: hidden; }
.tourtify-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.tourtify-card__media:hover img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) { .tourtify-card__media img { transition: none; } }
.tourtify-card__body { display: flex; flex: 1; flex-direction: column; gap: 0.5rem; padding: 1rem 1.1rem 1.1rem; }
.tourtify-card__title { margin: 0; font-size: 1.15em; line-height: 1.3; }
.tourtify-card__title a { color: inherit; text-decoration: none; }
.tourtify-card__title a:hover, .tourtify-card__title a:focus-visible { text-decoration: underline; }
.tourtify-card__meta { margin: 0; font-size: 0.875em; opacity: var(--tourtify-muted); }
.tourtify-card__summary { margin: 0; font-size: 0.95em; }
.tourtify-card__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin-top: auto; padding-top: 0.5rem; }
.tourtify-card__price { font-size: 0.9em; }
.tourtify-card__price strong { font-size: 1.15em; }
.tourtify-card__price span { opacity: var(--tourtify-muted); }
.tourtify-button { display: inline-block; text-decoration: none; cursor: pointer; }

/* List layout: one tour per row, photo beside the text; stacked when the space is narrow. */
.tourtify-tours--list { grid-template-columns: minmax(0, 1fr); container-type: inline-size; }
@container (min-width: 36rem) {
	.tourtify-tours--list .tourtify-card { flex-direction: row; }
	.tourtify-tours--list .tourtify-card__media { position: relative; flex: 0 0 34%; aspect-ratio: auto; min-height: 11rem; }
	.tourtify-tours--list .tourtify-card__media img { position: absolute; inset: 0; }
}

.tourtify-notice { padding: 0.75rem 1rem; border-left: 4px solid #d63638; background: #fcf0f1; color: #3c434a; font-size: 0.9em; }
.tourtify-notice a { color: inherit; }

/* In the block editor, a click selects the block instead of following a card's link. */
.editor-styles-wrapper .tourtify-tours a, .editor-styles-wrapper .tourtify-button { pointer-events: none; }