/*
 * Catalog pages in the Lovable layout: hero, toolbar (filters / count / sort / view),
 * filters sidebar (a sheet on phones and tablets) and the result cards.
 * Used by locations and events (pages push it); tokens come from design.css.
 * Hook classes the page scripts rely on (.catalog-wrap, .btn-filters-open, .btn-sorting,
 * .sorting-options, .view-toggle-btn, .count-title, .like-button) are kept in the markup;
 * the look comes from the ct-* classes. All font sizes are em (accessibility text size).
 */

/* Lovable page background instead of the old grey .site one, as .hp on the home page */
.ct-page {
	background-color: var(--ds-background);
}

/* ---------- Hero ---------- */

.ct-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	/* the transparent header (body.header-overlay) sits on top of the hero: --header-h from header.blade.php */
	padding: calc(var(--header-h, 64px) + 4rem) 0 3rem;
	background-color: var(--ds-ink);
	color: #fff;
	/* Same height on every list (as the tallest one: lead on two lines + search); the text sits at the bottom,
	   so a shorter lead / no search adds room above the eyebrow, not between the text and the search or filter bar */
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 28.5rem;
}

.ct-hero > .ds-shell {
	width: 100%;
}

/* Discover pattern, as .brand-pattern in Lovable */
.ct-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: url(../img/discover-pattern.svg) center / cover no-repeat;
	opacity: 0.09;
	pointer-events: none;
}

.ct-hero__eyebrow {
	margin: 0;
	color: var(--ds-gold);
	font-size: 0.875em;
	font-weight: 600;
	line-height: 1.4286;
}

.ct-page .ct-hero__title {
	margin: 0.5rem 0 0;
	font-family: var(--ds-font-display);
	letter-spacing: var(--ds-heading-tracking);
	font-size: 2.25em;
	font-weight: 600;
	line-height: 1.1111;
	color: #fff;
}

.ct-hero__lead {
	max-width: 42rem;
	margin: 1rem 0 0;
	font-size: 1em;
	line-height: 1.625;
	color: rgba(255, 255, 255, 0.7);
}

.ct-hero__search {
	position: relative;
	max-width: 48rem;
	margin: 1.75rem 0 0;
}

.ct-hero__search::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 1.25rem;
	width: 20px;
	height: 20px;
	transform: translateY(-50%);
	background-color: var(--ds-ink-soft);
	-webkit-mask: url(../img/lucide/search.svg) center / contain no-repeat;
	mask: url(../img/lucide/search.svg) center / contain no-repeat;
	pointer-events: none;
}

.ct-hero__search input {
	display: block;
	width: 100%;
	height: 3.5rem;
	margin: 0;
	padding: 2px 3rem 0 3.25rem;
	border: 0;
	border-radius: var(--ds-radius);
	background-color: var(--ds-card);
	box-shadow: var(--ds-shadow-card);
	font-family: var(--ds-font-sans);
	font-size: 1em;
	color: var(--ds-foreground);
	outline: none;
	-webkit-appearance: none;
	appearance: none;
}

.ct-hero__search input::placeholder {
	color: var(--ds-ink-soft);
	opacity: 1;
}

.ct-hero__search input:focus-visible {
	box-shadow: 0 0 0 1px var(--ds-gold), var(--ds-shadow-card);
}

/* Phones: the 3rem right padding from Lovable wastes room for the placeholder */
@media (max-width: 639px) {
	.ct-hero__search input {
		padding-right: 1rem;
	}
}

@media (min-width: 768px) {
	.ct-hero {
		padding: calc(var(--header-h, 64px) + 5rem) 0 4rem;
		min-height: 29.5rem;
	}

	.ct-page .ct-hero__title {
		font-size: 3.75em;
		line-height: 1;
	}

	.ct-hero__lead {
		font-size: 1.125em;
	}
}

/* ---------- Catalog section ---------- */

/* Bottom space of every list and detail page before the newsletter banner: 3rem, 4rem from 768px
   (same in .tp-results, .bl-body and detail.css) */
.ct {
	padding-top: 2rem;
	padding-bottom: 3rem;
}

@media (min-width: 768px) {
	.ct {
		padding-top: 2.5rem;
		padding-bottom: 4rem;
	}
}

.ct-alert {
	margin-bottom: 1rem;
	padding: 0.75rem 1rem;
	border: 1px solid transparent;
	border-radius: var(--ds-radius-md);
	font-size: 0.9375em;
}

.ct-alert--success {
	border-color: #bbf7d0;
	background-color: #f0fdf4;
	color: #166534;
}

.ct-alert--error {
	border-color: #fecaca;
	background-color: #fef2f2;
	color: #991b1b;
}

/* Outline button (Lovable variant="outline", size sm) */
.ct-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	height: 2.25rem;
	margin: 0;
	padding: 2px 1rem 0;
	border: 1px solid var(--ds-border);
	border-radius: var(--ds-radius-md);
	background-color: var(--ds-background);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
	font-family: var(--ds-font-sans);
	font-size: 0.875em;
	font-weight: 500;
	line-height: 1.4286;
	white-space: nowrap;
	color: var(--ds-foreground);
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--ds-transition), color var(--ds-transition), border-color var(--ds-transition);
}

.ct-btn:hover,
.ct-btn:focus-visible {
	background-color: var(--ds-accent);
	color: var(--ds-accent-foreground);
}

.ct-btn--primary {
	border-color: var(--ds-primary);
	background-color: var(--ds-primary);
	color: var(--ds-primary-foreground);
}

.ct-btn--primary:hover,
.ct-btn--primary:focus-visible {
	border-color: var(--ds-primary-hover);
	background-color: var(--ds-primary-hover);
	color: var(--ds-primary-foreground);
}

/* Round counter: selected filters in a group / in total */
.ct-badge {
	display: inline-grid;
	place-items: center;
	min-width: 1.25rem;
	height: 1.25rem;
	padding: 1px 0.25rem 0;
	border-radius: var(--ds-radius-full);
	background-color: var(--ds-primary);
	color: var(--ds-primary-foreground);
	font-size: 0.6875em;
	font-weight: 600;
	line-height: 1;
}

.ct-badge[hidden] {
	display: none;
}

/* ---------- Toolbar ---------- */

.ct-toolbar {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid var(--ds-border);
}

.ct-toolbar__group {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
}

.ct-toolbar__group:first-child {
	gap: 0.75rem;
}

@media (min-width: 1024px) {
	.ct-toolbar {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
}

/* Filters button: sheet trigger below 1024px, sidebar toggle above */
.ct-filters-btn::before {
	content: '';
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	background-color: currentColor;
	-webkit-mask: url(../img/lucide/sliders-horizontal.svg) center / contain no-repeat;
	mask: url(../img/lucide/sliders-horizontal.svg) center / contain no-repeat;
}

/* Sidebar shown: the toggle closes it */
.ct-wrap:not(.hide-filters) .btn-filters-open::before {
	-webkit-mask-image: url(../img/lucide/x.svg);
	mask-image: url(../img/lucide/x.svg);
}

.ct-filters-btn .ct-badge {
	font-size: 0.7857em; /* 11px inside the 14px button */
}

.ct-filters-btn.btn-filters-open {
	display: none;
}

@media (min-width: 1024px) {
	.ct-filters-btn--sheet {
		display: none;
	}

	.ct-filters-btn.btn-filters-open {
		display: inline-flex;
	}
}

.ct-count {
	margin: 0;
	font-size: 0.875em;
	line-height: 1.4286;
	color: var(--ds-ink-soft);
}

.ct-count strong {
	font-size: 1.1429em; /* 16px */
	font-weight: 600;
	color: var(--ds-foreground);
}

/* Sort select */
.ct-sort {
	position: relative;
}

.ct-sort__btn {
	/* block, not flex: the label is a bare text node (the page scripts set innerText),
	   so only a block can cut it with "…" when the button gets narrow on phones */
	position: relative;
	display: block;
	width: 100%;
	min-width: 190px;
	height: 2.5rem;
	margin: 0;
	padding: 2px 2.25rem 0 2.25rem;
	overflow: hidden;
	text-overflow: ellipsis;
	border: 1px solid var(--ds-border);
	border-radius: var(--ds-radius-md);
	background-color: transparent;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
	font-family: var(--ds-font-sans);
	font-size: 0.875em;
	line-height: 1.4286;
	white-space: nowrap;
	color: var(--ds-foreground);
	text-align: left;
	cursor: pointer;
}

.ct-sort--wide .ct-sort__btn {
	min-width: 210px;
}

.ct-sort__btn::before,
.ct-sort__btn::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 0.75rem;
	transform: translateY(-50%);
	width: 16px;
	height: 16px;
	background-color: currentColor;
	-webkit-mask: url(../img/lucide/arrow-up-down.svg) center / contain no-repeat;
	mask: url(../img/lucide/arrow-up-down.svg) center / contain no-repeat;
	pointer-events: none;
}

.ct-sort__btn::after {
	left: auto;
	right: 0.75rem;
	opacity: 0.5;
	-webkit-mask-image: url(../img/lucide/chevron-down.svg);
	mask-image: url(../img/lucide/chevron-down.svg);
}

.ct-sort__btn:focus-visible {
	outline: none;
	box-shadow: 0 0 0 1px var(--ds-primary);
}

.ct-sort__menu {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	z-index: 50;
	display: none;
	min-width: 100%;
	margin: 0;
	padding: 0.25rem;
	border: 1px solid var(--ds-border);
	border-radius: var(--ds-radius-md);
	background-color: var(--ds-card);
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
	list-style: none;
}

.ct-sort__menu.active {
	display: block;
}

.ct-sort__menu li {
	margin: 0;
}

.ct-sort__menu a {
	position: relative;
	display: block;
	padding: calc(0.375rem + 1px) 2rem calc(0.375rem - 1px) 0.5rem;
	border-radius: var(--ds-radius-sm);
	font-size: 0.875em;
	line-height: 1.4286;
	white-space: nowrap;
	color: var(--ds-foreground);
	text-decoration: none;
}

.ct-sort__menu a:hover,
.ct-sort__menu a:focus-visible {
	outline: none;
	background-color: var(--ds-accent);
	color: var(--ds-accent-foreground);
}

.ct-sort__menu a.active::after {
	content: '';
	position: absolute;
	top: 50%;
	right: 0.5rem;
	width: 16px;
	height: 16px;
	transform: translateY(-50%);
	background-color: currentColor;
	-webkit-mask: url(../img/lucide/check.svg) center / contain no-repeat;
	mask: url(../img/lucide/check.svg) center / contain no-repeat;
}

/* View switcher: grid / list (/ map) */
.ct-views.view-toggle {
	display: flex;
	align-items: center;
	gap: 0;
	height: 2.5rem;
	margin: 0;
	padding: 0.25rem;
	border: 1px solid var(--ds-border);
	border-radius: var(--ds-radius-md);
	background-color: var(--ds-background);
}

.ct-views .ct-views__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	height: 2rem;
	padding: 2px 0.625rem 0;
	border: 0;
	border-radius: var(--ds-radius-md);
	background-color: transparent;
	font-family: var(--ds-font-sans);
	font-size: 0.75em;
	font-weight: 500;
	line-height: 1.3333;
	white-space: nowrap;
	color: var(--ds-foreground);
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--ds-transition), color var(--ds-transition);
}

.ct-views .ct-views__btn::before {
	content: '';
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	background-color: currentColor;
	-webkit-mask: url(../img/lucide/grid-2x2.svg) center / contain no-repeat;
	mask: url(../img/lucide/grid-2x2.svg) center / contain no-repeat;
}


.ct-views .ct-views__btn--list::before {
	-webkit-mask-image: url(../img/lucide/list.svg);
	mask-image: url(../img/lucide/list.svg);
}

.ct-views .ct-views__btn--map::before {
	-webkit-mask-image: url(../img/lucide/map.svg);
	mask-image: url(../img/lucide/map.svg);
}

.ct-views .ct-views__btn span {
	display: none;
}

.ct-views .ct-views__btn:hover,
.ct-views .ct-views__btn:focus-visible {
	background-color: var(--ds-accent);
	color: var(--ds-accent-foreground);
}

.ct-views .ct-views__btn.active {
	background-color: var(--ds-primary);
	color: var(--ds-primary-foreground);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1) !important;
}

.ct-views .ct-views__btn.active:hover {
	background-color: var(--ds-primary-hover);
	color: var(--ds-primary-foreground);
}

@media (min-width: 640px) {
	.ct-views .ct-views__btn span {
		display: inline;
	}
}

/* Phones: grid and list look the same there (one card per row), so the switch is hidden;
   Locations keep the map button, the Events group (no map) goes away */
@media (max-width: 639px) {
	.ct-views .ct-views__btn--grid,
	.ct-views .ct-views__btn--list,
	.ct-views.ct-views--no-map {
		display: none;
	}
}

/* Phones: sorting and the view switch share one row, the sort label shrinks with "…" */
@media (max-width: 639px) {
	.ct-toolbar__group:last-child {
		flex-wrap: nowrap;
	}

	.ct-sort {
		flex: 1 1 auto;
		min-width: 0;
	}

	.ct-sort .ct-sort__btn {
		min-width: 0;
	}
}

/* ---------- Layout: sidebar + results ---------- */

.ct-body {
	padding-top: 2rem;
}

.ct-results {
	min-width: 0;
}

/* Filter groups (accordion) */
.ct-acc {
	border-bottom: 1px solid var(--ds-border);
}

.ct-page .ct-acc__head {
	display: flex;
	margin: 0;
	font-family: var(--ds-font-sans);
	font-size: 1em;
	line-height: 1.5;
}

.ct-acc__btn {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	margin: 0;
	padding: 1rem 0;
	border: 0;
	background: none;
	font-family: var(--ds-font-sans);
	font-size: 1em;
	font-weight: 500;
	line-height: 1.5;
	color: var(--ds-foreground);
	text-align: left;
	cursor: pointer;
}

.ct-acc__btn::after {
	content: '';
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	background-color: var(--ds-muted-foreground);
	-webkit-mask: url(../img/lucide/chevron-down.svg) center / contain no-repeat;
	mask: url(../img/lucide/chevron-down.svg) center / contain no-repeat;
	transform: rotate(180deg);
	transition: transform 0.2s ease;
}

.ct-acc__btn.collapsed::after {
	transform: none;
}

.ct-acc__title {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.ct-acc__body {
	display: grid;
	gap: 0.25rem;
	/* every group scrolls inside after 16rem, so long lists don't push the rest down */
	max-height: 16rem;
	overflow-y: auto;
	padding: 0 0.5rem 1rem 0;
}


/* Checkbox */
.ct-check {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	margin: 0;
	padding: 0.5rem 0.25rem;
	border-radius: var(--ds-radius-md);
	font-size: 0.9375em;
	font-weight: 400;
	line-height: 1.375;
	color: var(--ds-foreground);
	cursor: pointer;
	transition: background-color var(--ds-transition);
}

.ct-check:hover {
	background-color: rgba(252, 239, 207, 0.6);
}

.ct-check input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}

.ct-check__box {
	display: grid;
	place-content: center;
	flex-shrink: 0;
	width: 1.25rem;
	height: 1.25rem;
	margin-top: 0.125rem;
	border: 1px solid var(--ds-primary);
	border-radius: var(--ds-radius-sm);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
	transition: background-color var(--ds-transition);
}

.ct-check input:checked + .ct-check__box {
	background-color: var(--ds-primary);
}

.ct-check input:checked + .ct-check__box::after {
	content: '';
	width: 16px;
	height: 16px;
	background-color: var(--ds-primary-foreground);
	-webkit-mask: url(../img/lucide/check.svg) center / contain no-repeat;
	mask: url(../img/lucide/check.svg) center / contain no-repeat;
}

.ct-check input:focus-visible + .ct-check__box {
	outline: 2px solid var(--ds-primary);
	outline-offset: 2px;
}

/* Desktop: sticky sidebar that collapses to the left */
@media (min-width: 1024px) {
	.ct-body {
		display: flex;
		gap: 2rem;
	}

	.ct-results {
		flex: 1;
	}

	.ct-sidebar {
		position: sticky;
		top: 6rem;
		align-self: flex-start;
		flex-shrink: 0;
		width: 17rem;
		max-height: calc(100vh - 7rem);
		overflow-x: hidden;
		overflow-y: auto;
		transition: width 0.3s ease-out, opacity 0.3s ease-out, margin 0.3s ease-out;
	}

	.ct-sidebar__inner {
		width: 17rem;
	}

	.ct-wrap.hide-filters .ct-sidebar {
		width: 0;
		margin-right: -2rem;
		opacity: 0;
		visibility: hidden;
	}

	.ct-sheet-overlay,
	.ct-sidebar__close,
	.ct-sidebar__foot {
		display: none;
	}
}

/* Phones and tablets: the sidebar is a sheet from the left (Lovable Sheet) */
@media (max-width: 1023px) {
	html.ct-sheet-lock {
		overflow: hidden;
	}

	.ct-sheet-overlay {
		position: fixed;
		inset: 0;
		z-index: 1000;
		background-color: rgba(0, 0, 0, 0.8);
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.3s ease;
	}

	.ct-sidebar {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		z-index: 1001;
		width: 92vw;
		max-width: 28rem;
		overflow-y: auto;
		border-right: 1px solid var(--ds-border);
		background-color: var(--ds-background);
		box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
		transform: translateX(-100%);
		visibility: hidden;
		transition: transform 0.3s ease-in-out, visibility 0s linear 0.3s;
	}

	.ct-wrap.is-sheet-open .ct-sheet-overlay {
		opacity: 1;
		pointer-events: auto;
	}

	.ct-wrap.is-sheet-open .ct-sidebar {
		transform: none;
		visibility: visible;
		transition: transform 0.5s ease-in-out, visibility 0s;
	}

	.ct-sidebar__inner {
		display: flex;
		flex-direction: column;
		min-height: 100%;
		padding: 2.75rem 1.5rem 0; /* room for the close button above the first group */
	}

	.ct-sidebar__inner form {
		flex: 1;
	}

	.ct-sidebar__close {
		position: absolute;
		top: 1rem;
		right: 1rem;
		width: 1.5rem;
		height: 1.5rem;
		padding: 0;
		border: 0;
		border-radius: var(--ds-radius-sm);
		background-color: var(--ds-foreground);
		opacity: 0.7;
		cursor: pointer;
		-webkit-mask: url(../img/lucide/x.svg) center / 16px no-repeat;
		mask: url(../img/lucide/x.svg) center / 16px no-repeat;
		transition: opacity var(--ds-transition);
	}

	.ct-sidebar__close:hover {
		opacity: 1;
	}


	.ct-sidebar__foot {
		position: sticky;
		bottom: 0;
		margin: 1.5rem -1.5rem 0;
		padding: 1rem;
		border-top: 1px solid var(--ds-border);
		background-color: var(--ds-background);
	}

	.ct-sidebar__foot .ct-btn {
		gap: 0.3em; /* text and the count span are flex items: the gap stands in for the spaces */
		width: 100%;
		height: 2.75rem;
	}
}

/* ---------- Results ---------- */

.ct-list {
	display: grid;
	gap: 1.25rem;
}

.ct-list--events.grid-view {
	gap: 2rem 1.25rem;
}

@media (min-width: 640px) {
	.ct-list.grid-view {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1280px) {
	.ct-list.grid-view {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.ct-list.list-view {
	gap: 1rem;
}

/* Card */
.ct-card {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--ds-border);
	border-radius: var(--ds-radius);
	background-color: var(--ds-card);
	box-shadow: var(--ds-shadow-card);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ct-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--ds-shadow-card-hover);
}

.ct-card__media {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background-color: var(--ds-surface);
}

.ct-card--event .ct-card__media {
	aspect-ratio: 3 / 2;
}

.ct-card__img,
.ct-card__img picture {
	display: block;
	width: 100%;
	height: 100%;
}

.ct-card__img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.ct-card:hover .ct-card__img img {
	transform: scale(1.03);
}

.ct-card__tag {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	max-width: calc(100% - 1.5rem);
	padding: calc(0.25rem + 1px) 0.625rem calc(0.25rem - 1px);
	border-radius: var(--ds-radius-md);
	background-color: rgba(255, 255, 255, 0.95);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
	font-size: 0.75em;
	font-weight: 600;
	line-height: 1.3333;
	color: var(--ds-primary);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	pointer-events: none;
}

/* Event day on the photo */
.ct-card__day {
	position: absolute;
	bottom: 0.75rem;
	left: 0.75rem;
	display: grid;
	min-width: 3.5rem;
	padding: 0.5rem 0.625rem;
	border-radius: var(--ds-radius-md);
	background-color: var(--ds-primary);
	box-shadow: var(--ds-shadow-card);
	color: var(--ds-primary-foreground);
	text-align: center;
	pointer-events: none;
}

.ct-card__day strong {
	font-size: 1.5em;
	font-weight: 700;
	line-height: 1;
}

.ct-card__day span {
	margin-top: 0.25rem;
	font-size: 0.6875em;
	font-weight: 600;
	line-height: 1.2;
	text-transform: uppercase;
}

.ct-card__body {
	position: relative;
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 1.25rem;
}

.ct-card--event .ct-card__body {
	min-height: 13rem;
}

.ct-card__when {
	margin: 0 0 0.5rem;
	padding-right: 2.5rem;
	font-size: 0.75em;
	font-weight: 600;
	line-height: 1.3333;
	color: var(--ds-primary);
}

/* Save heart (.ds-save, components.css) in the body's top-right corner */
.ct-card__body > .ds-save {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
}

.ct-card__link {
	display: block;
	padding-right: 2rem;
	color: inherit;
	text-decoration: none;
}

.ct-page .ct-card__title {
	margin: 0;
	font-family: var(--ds-font-display);
	letter-spacing: var(--ds-heading-tracking);
	font-size: 1.25em;
	font-weight: 600;
	line-height: 1.4;
	color: var(--ds-ink);
	transition: color var(--ds-transition);
}

.ct-page .ct-card:hover .ct-card__title {
	color: var(--ds-primary);
}

.ct-card__meta {
	display: flex;
	align-items: flex-start;
	gap: 0.375rem;
	margin: 0.5rem 0 0;
	font-size: 0.875em;
	line-height: 1.4286;
	color: var(--ds-ink-soft);
}

.ct-card__meta::before {
	content: '';
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	margin-top: 0.125rem;
	background-color: var(--ds-primary);
	-webkit-mask: url(../img/lucide/map-pin.svg) center / contain no-repeat;
	mask: url(../img/lucide/map-pin.svg) center / contain no-repeat;
}

.ct-card__meta--time::before {
	-webkit-mask-image: url(../img/lucide/clock-3.svg);
	mask-image: url(../img/lucide/clock-3.svg);
}

.ct-card__metas {
	display: grid;
	gap: 0.5rem;
	margin-top: 1rem;
}

.ct-card__metas .ct-card__meta {
	gap: 0.5rem;
	margin: 0;
}

.ct-card__text {
	display: -webkit-box;
	max-width: 36rem;
	margin: 1rem 0 0;
	overflow: hidden;
	font-size: 0.875em;
	line-height: 1.625;
	color: var(--ds-ink-soft);
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}

/* Grid: the description only on phones (one card per row); from 640px there are 2+ columns */
@media (min-width: 640px) {
	.ct-card__text--mobile {
		display: none;
	}
}

.ct-card__price {
	margin: auto 0 0;
	padding-top: 1.25rem;
	font-size: 0.875em;
	font-weight: 600;
	line-height: 1.4286;
	color: var(--ds-foreground);
}

/* List view: photo on the left */
@media (min-width: 640px) {
	.ct-list.list-view .ct-card {
		display: grid;
		grid-template-columns: 15rem minmax(0, 1fr);
	}

	.ct-list.list-view .ct-card__media {
		aspect-ratio: auto;
		min-height: 13rem;
	}

	.ct-list.list-view .ct-card__img {
		position: absolute;
		inset: 0;
	}
}

/* Phones: a bit tighter so long titles fit */
@media (max-width: 639px) {
	.ct-card__body {
		padding: 1rem;
	}

	.ct-card--event .ct-card__body {
		min-height: 0;
	}
}

/* Nothing found (Lovable): tall dashed box, search icon in a circle, primary reset button */
.ct-empty {
	grid-column: 1 / -1;
	display: grid;
	place-items: center;
	min-height: 24rem;
	padding: 2rem 1.5rem;
	border: 1px dashed var(--ds-border);
	border-radius: var(--ds-radius);
	background-color: var(--ds-surface);
	text-align: center;
}

.ct-empty__icon {
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	margin: 0 auto;
	border-radius: var(--ds-radius-full);
	background-color: var(--ds-accent);
}

.ct-empty__icon::before {
	content: '';
	width: 24px;
	height: 24px;
	background-color: var(--ds-primary);
	-webkit-mask: url(../img/lucide/search.svg) center / contain no-repeat;
	mask: url(../img/lucide/search.svg) center / contain no-repeat;
}

.ct-page .ct-empty__title {
	margin: 1rem 0 0;
	font-family: var(--ds-font-display);
	letter-spacing: var(--ds-heading-tracking);
	font-size: 1.5em;
	font-weight: 600;
	line-height: 1.3333;
	color: var(--ds-ink);
}

.ct-empty__hint {
	max-width: 28rem;
	margin: 0.5rem auto 0;
	font-size: 0.875em;
	line-height: 1.4286;
	color: var(--ds-ink-soft);
}

.ct-empty .ct-btn {
	margin-top: 1.25rem;
}

/* ---------- Selected filters as tags (row under the toolbar) ---------- */

.ct-chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	padding: 1rem 0;
	border-bottom: 1px solid var(--ds-border);
}

.ct-chips__list {
	display: contents;
}

.ct-chips__list li {
	margin: 0;
	list-style: none;
}

.ct-chips__list .chip a {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 2rem;
	padding: calc(0.375rem + 1px) 0.75rem calc(0.375rem - 1px);
	border-radius: var(--ds-radius-md);
	background-color: var(--ds-secondary);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
	font-size: 0.75em;
	font-weight: 500;
	line-height: 1.3333;
	color: var(--ds-foreground);
	text-align: left;
	text-decoration: none;
	transition: background-color var(--ds-transition);
}

.ct-chips__list .chip a::after {
	content: '';
	flex-shrink: 0;
	width: 14px;
	height: 14px;
	background-color: currentColor;
	-webkit-mask: url(../img/lucide/x.svg) center / contain no-repeat;
	mask: url(../img/lucide/x.svg) center / contain no-repeat;
}

.ct-chips__list .chip a:hover,
.ct-chips__list .chip a:focus-visible {
	background-color: rgba(243, 241, 235, 0.8);
}

.ct-chips__clear {
	display: inline-flex;
	align-items: center;
	height: 2rem;
	padding: 2px 0.75rem 0;
	border-radius: var(--ds-radius-md);
	font-size: 0.75em;
	font-weight: 500;
	color: var(--ds-foreground);
	text-decoration: none;
	transition: background-color var(--ds-transition), color var(--ds-transition);
}

.ct-chips__clear:hover,
.ct-chips__clear:focus-visible {
	background-color: var(--ds-accent);
	color: var(--ds-accent-foreground);
}

/* ---------- Dates filter (events): trigger, shortcuts, calendar popover ---------- */

.ct-dates__trigger {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	width: 100%;
	min-height: 2.75rem;
	margin: 0;
	padding: calc(0.5rem + 1px) 0.75rem calc(0.5rem - 1px);
	border: 1px solid var(--ds-border);
	border-radius: var(--ds-radius-md);
	background-color: var(--ds-background);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
	font-family: var(--ds-font-sans);
	font-size: 0.875em;
	line-height: 1.4286;
	color: var(--ds-ink-soft);
	text-align: left;
	cursor: pointer;
	transition: background-color var(--ds-transition), color var(--ds-transition);
}

.ct-dates__trigger.is-set {
	color: var(--ds-foreground);
}

.ct-dates__trigger::before {
	content: '';
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	background-color: var(--ds-primary);
	-webkit-mask: url(../img/lucide/calendar-days.svg) center / contain no-repeat;
	mask: url(../img/lucide/calendar-days.svg) center / contain no-repeat;
}

.ct-dates__trigger:hover,
.ct-dates__trigger:focus-visible {
	outline: none;
	background-color: var(--ds-accent);
	color: var(--ds-accent-foreground);
}

.ct-dates__label {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ct-dates__shortcuts {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
	margin-top: 0.5rem;
}

.ct-dates__shortcut {
	display: inline-flex;
	align-items: center;
	height: 2rem;
	margin: 0;
	padding: 2px 0.625rem 0;
	border: 0;
	border-radius: var(--ds-radius-md);
	background: none;
	font-family: var(--ds-font-sans);
	font-size: 0.75em;
	font-weight: 500;
	color: var(--ds-ink-soft);
	cursor: pointer;
	transition: background-color var(--ds-transition), color var(--ds-transition);
}

.ct-dates__shortcut:hover,
.ct-dates__shortcut:focus-visible,
.ct-dates__shortcut.is-active {
	outline: none;
	background-color: var(--ds-accent);
	color: var(--ds-primary);
}

/* Popover lives in <body> (catalog.js) so the scrolling sidebar does not clip it */
.ct-dates__popover {
	position: fixed;
	z-index: 1100; /* above the mobile filters sheet */
	padding: 0.75rem;
	border: 1px solid var(--ds-border);
	border-radius: var(--ds-radius-md);
	background-color: var(--ds-card);
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
	font-family: var(--ds-font-sans);
	color: var(--ds-foreground);
}

.ct-dates__popover[hidden] {
	display: none;
}

.ct-cal__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 2rem;
}

.ct-cal__caption {
	font-size: 0.875em;
	font-weight: 500;
}

.ct-cal__nav {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	padding: 0;
	border: 0;
	border-radius: var(--ds-radius-md);
	background: none;
	color: var(--ds-foreground);
	cursor: pointer;
	transition: background-color var(--ds-transition);
}

.ct-cal__nav::before {
	content: '';
	width: 16px;
	height: 16px;
	background-color: currentColor;
	-webkit-mask: url(../img/lucide/chevron-down.svg) center / contain no-repeat;
	mask: url(../img/lucide/chevron-down.svg) center / contain no-repeat;
	transform: rotate(90deg);
}

.ct-cal__nav--next::before {
	transform: rotate(-90deg);
}

.ct-cal__nav:hover,
.ct-cal__nav:focus-visible {
	outline: none;
	background-color: var(--ds-accent);
}

.ct-cal__grid {
	margin-top: 1rem;
	border-collapse: separate;
	border-spacing: 0;
}

.ct-cal__grid th {
	width: 2rem;
	padding: 0 0 0.25rem;
	font-size: 0.8em;
	font-weight: 400;
	color: var(--ds-muted-foreground);
	text-align: center;
}

.ct-cal__grid td {
	padding: 0.5rem 0 0;
}

.ct-cal__day {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	margin: 0;
	padding: 1px 0 0;
	border: 0;
	border-radius: var(--ds-radius-md);
	background: none;
	font-family: var(--ds-font-sans);
	font-size: 0.875em;
	line-height: 1;
	color: var(--ds-foreground);
	cursor: pointer;
	transition: background-color var(--ds-transition), color var(--ds-transition);
}

.ct-cal__day:hover,
.ct-cal__day:focus-visible {
	outline: none;
	background-color: var(--ds-accent);
	color: var(--ds-accent-foreground);
}

/* Today: bold blue figure, no fill, so it is not mistaken for the middle of a range */
.ct-cal__day.is-today {
	font-weight: 700;
	color: var(--ds-primary);
}

.ct-cal__day.is-outside {
	color: var(--ds-muted-foreground);
}

.ct-cal__day.is-middle {
	border-radius: 0;
	background-color: var(--ds-accent);
	color: var(--ds-accent-foreground);
}

.ct-cal__day.is-start,
.ct-cal__day.is-end {
	background-color: var(--ds-primary);
	color: var(--ds-primary-foreground);
}


/* ==========================================================================
   Trips list (resources/views/pages/trips/index.blade.php): hero, then a search + filters bar
   overlapping its bottom (no sidebar), toolbar, cards (shared trip-card, components.css).
   ========================================================================== */

/* Room under the hero text for the overlapping bar */
.ct-hero--overlap {
	padding-bottom: 5rem;
}

@media (min-width: 768px) {
	.ct-hero--overlap {
		padding-bottom: 7rem;
	}
}

.tp-bar-wrap {
	position: relative;
	z-index: 5;
	margin-top: -2.5rem;
}

@media (min-width: 768px) {
	.tp-bar-wrap {
		margin-top: -3.5rem;
	}
}

.tp-bar {
	display: grid;
	gap: 0.75rem;
	padding: 0.75rem;
	border: 1px solid var(--ds-border);
	border-radius: var(--ds-radius);
	background-color: var(--ds-card);
	box-shadow: var(--ds-shadow-card-hover);
}

@media (min-width: 768px) {
	.tp-bar {
		grid-template-columns: minmax(12rem, 1.5fr) minmax(10rem, 1fr) minmax(10rem, 1fr);
		padding: 1rem;
	}
}

/* Search field with a search icon and a clear button */
.tp-search {
	position: relative;
	display: block;
	margin: 0;
}

.tp-search::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 1rem;
	width: 18px;
	height: 18px;
	transform: translateY(-50%);
	background-color: var(--ds-ink-soft);
	-webkit-mask: url(../img/lucide/search.svg) center / contain no-repeat;
	mask: url(../img/lucide/search.svg) center / contain no-repeat;
	pointer-events: none;
}

.tp-search input {
	display: block;
	width: 100%;
	height: 48px;
	margin: 0;
	padding: 0 2.5rem 0 2.75rem;
	border: 0;
	border-radius: var(--ds-radius-md);
	background-color: var(--ds-surface);
	font-family: var(--ds-font-sans);
	font-size: 1em;
	color: var(--ds-foreground);
	-webkit-appearance: none;
	appearance: none;
}

.tp-search input::-webkit-search-cancel-button {
	display: none;
}

.tp-search input::placeholder {
	color: var(--ds-muted-foreground);
	opacity: 1;
}

.tp-search input:focus-visible {
	outline: none;
	box-shadow: 0 0 0 1px var(--ds-primary);
}

@media (min-width: 768px) {
	.tp-search input {
		font-size: 0.875em;
	}
}

.tp-search__clear {
	position: absolute;
	top: 50%;
	right: 0.375rem;
	display: grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	padding: 0;
	border: 0;
	border-radius: var(--ds-radius-md);
	background: none;
	color: var(--ds-ink-soft);
	transform: translateY(-50%);
	cursor: pointer;
}

.tp-search__clear::before {
	content: '';
	width: 16px;
	height: 16px;
	background-color: currentColor;
	-webkit-mask: url(../img/lucide/x.svg) center / contain no-repeat;
	mask: url(../img/lucide/x.svg) center / contain no-repeat;
}

.tp-search__clear:hover {
	background-color: var(--ds-accent);
	color: var(--ds-accent-foreground);
}

.tp-search__clear[hidden] {
	display: none;
}

/* Dropdown: surface button + popover with checkboxes */
.tp-dd {
	position: relative;
}

.tp-dd__btn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	width: 100%;
	height: 48px;
	padding: 0 1rem;
	border: 0;
	border-radius: var(--ds-radius-md);
	background-color: var(--ds-surface);
	color: var(--ds-foreground);
	font-family: var(--ds-font-sans);
	font-size: 0.875em;
	font-weight: 500;
	text-align: left;
	cursor: pointer;
	transition: background-color var(--ds-transition);
}

.tp-dd__btn::after {
	content: '';
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	background-color: var(--ds-ink-soft);
	-webkit-mask: url(../img/lucide/chevron-down.svg) center / contain no-repeat;
	mask: url(../img/lucide/chevron-down.svg) center / contain no-repeat;
	transition: transform var(--ds-transition);
}

.tp-dd__btn:hover {
	background-color: rgba(252, 239, 207, 0.6);
}

.tp-dd__btn[aria-expanded="true"] {
	background-color: rgba(252, 239, 207, 0.7);
}

.tp-dd__btn[aria-expanded="true"]::after {
	transform: rotate(180deg);
}

.tp-dd__btn:focus-visible {
	outline: none;
	box-shadow: 0 0 0 2px var(--ds-primary);
}

.tp-dd__label {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.tp-dd__label .ct-badge {
	font-size: 0.7857em;
}

.tp-dd__panel {
	position: absolute;
	top: calc(100% + 0.375rem);
	left: 0;
	z-index: 20;
	width: 16rem;
	max-width: calc(100vw - 2.5rem);
	border: 1px solid var(--ds-border);
	border-radius: var(--ds-radius);
	background-color: var(--ds-card);
	box-shadow: var(--ds-shadow-card-hover);
}

.tp-dd__panel[hidden] {
	display: none;
}

/* Phones: the panel spans the bar */
@media (max-width: 767px) {
	.tp-dd__panel {
		width: 100%;
		max-width: none;
	}
}

.tp-dd__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 2.75rem;
	padding: 0.5rem 1rem;
	border-bottom: 1px solid var(--ds-border);
	font-size: 0.875em;
	font-weight: 600;
	color: var(--ds-foreground);
}

.tp-dd__clear {
	height: 1.75rem;
	padding: 0 0.5rem;
	border: 0;
	border-radius: var(--ds-radius-md);
	background: none;
	color: var(--ds-foreground);
	font-family: inherit;
	font-size: 0.8571em; /* 12px in the 14px head */
	font-weight: 500;
	cursor: pointer;
}

.tp-dd__clear:hover {
	background-color: var(--ds-accent);
}

.tp-dd__clear[hidden] {
	display: none;
}

.tp-dd__list {
	max-height: 16rem;
	padding: 0.5rem;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.tp-dd__list .ct-check {
	padding: 0.5rem;
	border-radius: var(--ds-radius-md);
	font-size: 0.9375em;
	line-height: 1.375;
}

/* Results */
.tp-results {
	padding-top: 2.5rem;
	padding-bottom: 3rem;
	transition: opacity 0.2s ease;
}

.tp-results.is-loading {
	opacity: 0.55;
	pointer-events: none;
}

@media (min-width: 768px) {
	.tp-results {
		padding-top: 3rem;
		padding-bottom: 4rem;
	}
}

/* Count and sort side by side from 640px (Lovable sm:) */
@media (min-width: 640px) {
	.tp-toolbar {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
}

.tp-list {
	margin-top: 2rem;
}

.tp-list.grid-view {
	gap: 2rem 1.25rem;
}

.tp-results .ct-pagination {
	margin-top: 2.5rem;
}

/* ---------- Guides list: 4 controls in the bar, dropdown icon / groups, guide grid ---------- */

/* Phones: every control full width, one under another; from 640px search on its own row with the three dropdowns
   in one row below; one row from 1280px */
.tp-bar--4 {
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 640px) {
	.tp-bar--4 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.tp-bar--4 > .tp-search {
	grid-column: 1 / -1;
}

.tp-bar--4 > * {
	min-width: 0;
}

@media (min-width: 1280px) {
	.tp-bar--4 {
		grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
	}

	.tp-bar--4 > .tp-search {
		grid-column: auto;
	}
}

.tp-dd__icon {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	background-color: var(--ds-primary);
	-webkit-mask: var(--tp-icon) center / contain no-repeat;
	mask: var(--tp-icon) center / contain no-repeat;
}

.tp-dd__text {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

.tp-dd__list .tp-dd__group {
	margin: 0.5rem 0.5rem 0.25rem;
	font-size: 0.75em;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ds-ink-soft);
}

.tp-dd__list .tp-dd__group:first-child {
	margin-top: 0.25rem;
}

.gd-list > .ct-empty {
	grid-column: 1 / -1;
}


/* ==========================================================================
   Blog lists ("Натхнення", news, videos, legends): resources/views/pages/blog/index.blade.php
   Title + search, rubric tabs, lead article with two beside it, 3-column grid, ad banner between rows
   ========================================================================== */

.bl-head {
	padding-top: 2.5rem;
	padding-bottom: 2rem;
}

@media (min-width: 768px) {
	.bl-head {
		padding-top: 3.5rem;
		padding-bottom: 2.5rem;
	}
}

.bl-head__row {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

@media (min-width: 768px) {
	.bl-head__row {
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
	}
}

.ds .bl-head__eyebrow {
	margin: 0;
	font-size: 0.875em;
	font-weight: 500;
	line-height: 1.43;
	color: var(--ds-primary);
}

.ds .bl-head__title {
	margin: 0.75rem 0 0;
	font-family: var(--ds-font-display);
	font-size: 2.25em;
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: var(--ds-heading-tracking);
	color: var(--ds-ink);
}

@media (min-width: 768px) {
	.ds .bl-head__title {
		font-size: 3.75em;
	}
}

.bl-search {
	width: 100%;
	margin: 0;
}

@media (min-width: 768px) {
	.bl-search {
		max-width: 20rem;
	}
}

/* Standalone field (not inside the filter bar card): border + light shadow as in Lovable */
.bl-search .tp-search input {
	border: 1px solid var(--ds-border);
	box-shadow: 0 1px 2px rgba(25, 32, 45, 0.06);
}

.bl-search .tp-search input:focus-visible {
	border-color: var(--ds-primary);
	box-shadow: 0 0 0 1px var(--ds-primary);
}

/* Rubric tabs: underlined links */
.bl-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.25rem;
	margin-top: 2rem;
	border-bottom: 1px solid var(--ds-border);
}

@media (min-width: 768px) {
	.bl-tabs {
		gap: 0.5rem 1.75rem;
		margin-top: 2.5rem;
	}
}

.ds .bl-tabs__item {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	margin-bottom: -1px;
	border-bottom: 2px solid transparent;
	font-size: 0.875em;
	font-weight: 500;
	white-space: nowrap;
	color: var(--ds-ink-soft);
	text-decoration: none;
	transition: color var(--ds-transition), border-color var(--ds-transition);
}

@media (min-width: 768px) {
	.ds .bl-tabs__item {
		font-size: 1em;
	}
}

.ds .bl-tabs__item:hover,
.ds .bl-tabs__item.is-active {
	color: var(--ds-primary);
}

.ds .bl-tabs__item.is-active {
	border-bottom-color: var(--ds-primary);
}

.bl-body {
	padding-bottom: 3rem;
}

@media (min-width: 768px) {
	.bl-body {
		padding-bottom: 4rem;
	}
}

/* Lead article + two beside it */
.bl-lead {
	display: grid;
	gap: 2rem;
}

.bl-lead__side {
	display: grid;
	align-content: start;
	gap: 1.75rem;
}

@media (min-width: 640px) {
	.bl-lead__side {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.bl-lead {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 2.5rem;
	}

	.bl-lead__side {
		grid-template-columns: minmax(0, 1fr);
	}
}

.bl-more--after-lead {
	margin-top: 2.5rem;
	padding-top: 2.5rem;
	border-top: 1px solid var(--ds-border);
}

@media (min-width: 768px) {
	.bl-more--after-lead {
		margin-top: 3rem;
		padding-top: 3rem;
	}
}

.bl-grid {
	display: grid;
	gap: 2.5rem 1.75rem;
}

@media (min-width: 640px) {
	.bl-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.bl-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.bl-grid + .bl-grid {
	margin-top: 2.5rem;
}

/* Article card */
.bl-card {
	min-width: 0;
}

.ds .bl-card__link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.bl-card__media {
	aspect-ratio: 3 / 2;
	overflow: hidden;
	border-radius: var(--ds-radius);
	background-color: var(--ds-muted);
}

.bl-card--lead .bl-card__media {
	aspect-ratio: 16 / 10;
}

.bl-card__media picture,
.bl-card__media img {
	display: block;
	width: 100%;
	height: 100%;
}

.bl-card__media img {
	object-fit: cover;
	transition: transform 0.5s ease;
}

.bl-card__link:hover .bl-card__media img {
	transform: scale(1.03);
}

@media (prefers-reduced-motion: reduce) {
	.bl-card__link:hover .bl-card__media img {
		transform: none;
	}
}

.bl-card__body {
	padding-top: 1rem;
}

.ds .bl-card__rubric {
	margin: 0;
	font-size: 0.75em;
	font-weight: 600;
	line-height: 1.33;
	color: var(--ds-primary);
}

.ds .bl-card__title {
	margin: 0.5rem 0 0;
	font-family: var(--ds-font-display);
	font-size: 1.25em;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: var(--ds-heading-tracking);
	color: var(--ds-ink);
	transition: color var(--ds-transition);
}

.ds .bl-card--lead .bl-card__title {
	font-size: 1.5em;
	line-height: 1.33;
}

@media (min-width: 768px) {
	.ds .bl-card--lead .bl-card__title {
		font-size: 1.875em;
		line-height: 1.2;
	}
}

.ds .bl-card__link:hover .bl-card__title {
	color: var(--ds-primary);
}

.bl-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem 1rem;
	margin-top: 1rem;
	font-size: 0.75em;
	line-height: 1.33;
	color: var(--ds-ink-soft);
}

.bl-card__views {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
}

.bl-card__views-icon {
	width: 14px;
	height: 14px;
	background-color: currentColor;
	-webkit-mask: url(../img/lucide/eye.svg) center / contain no-repeat;
	mask: url(../img/lucide/eye.svg) center / contain no-repeat;
}

/* Side articles: photo left of the text on wide screens */
@media (min-width: 1024px) {
	.bl-card--side .bl-card__link {
		display: grid;
		grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
		align-items: start;
		gap: 1.25rem;
	}

	.bl-card--side .bl-card__body {
		padding-top: 0;
	}

	.ds .bl-card--side .bl-card__title {
		font-size: 1.125em;
	}
}

/* Ad banner between the grid rows (Реклама → Leaderboard, place "blog"): the advertiser's picture as is */
.bl-ad {
	position: relative;
	margin-block: 3rem;
	overflow: hidden;
	border-radius: var(--ds-radius);
	background-color: var(--ds-muted);
}

@media (min-width: 768px) {
	.bl-ad {
		margin-block: 3.5rem;
	}
}

.bl-more > .bl-ad:last-child,
.bl-lead + .bl-ad {
	margin-bottom: 0;
}

.bl-ad__link,
.bl-ad__link img {
	display: block;
	width: 100%;
}

.bl-ad__link img {
	height: auto;
}

.ds .bl-ad__label {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	padding: 0.125rem 0.5rem;
	border-radius: var(--ds-radius-full);
	background-color: rgba(255, 255, 255, 0.85);
	font-size: 0.6875em;
	font-weight: 500;
	line-height: 1.5;
	color: var(--ds-ink-soft);
	pointer-events: none;
}

.bl-body .ct-pagination {
	margin-top: 3rem;
}


/* ==========================================================================
   Virtual tours list (/virtual-tours): resources/views/pages/virtual-tours/index.blade.php
   Hero = partials/catalog/hero (as places / events); "Оберіть напрямок" + 1 / 2 / 3 column region cards
   ========================================================================== */

.vt-list__head {
	margin-bottom: 2rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid var(--ds-border);
}

.ds .vt-list__title {
	margin: 0;
	font-family: var(--ds-font-display);
	font-size: 1.5em;
	font-weight: 600;
	line-height: 1.33;
	letter-spacing: var(--ds-heading-tracking);
	color: var(--ds-ink);
}

.vt-grid {
	display: grid;
	gap: 2rem 1.5rem;
}

@media (min-width: 640px) {
	.vt-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.vt-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.ds .vt-card {
	display: block;
	min-width: 0;
	border-radius: var(--ds-radius-md);
	color: var(--ds-ink);
	text-decoration: none;
}

.vt-card:focus-visible {
	outline: 2px solid var(--ds-primary);
	outline-offset: 4px;
}

.vt-card__media {
	position: relative;
	display: block;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	border-radius: var(--ds-radius);
	background-color: var(--ds-muted);
}

.vt-card__media picture,
.vt-card__media img {
	display: block;
	width: 100%;
	height: 100%;
}

.vt-card__media img {
	object-fit: cover;
	transition: transform 0.5s ease;
}

.vt-card:hover .vt-card__media img {
	transform: scale(1.035);
}

.vt-card__badge {
	position: absolute;
	bottom: 0.75rem;
	left: 0.75rem;
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.25rem 0.625rem;
	border-radius: var(--ds-radius-sm, 4px);
	background-color: rgba(18, 32, 70, 0.9);
	font-size: 0.75em;
	font-weight: 600;
	line-height: 1.33;
	color: #fff;
}

.vt-card__badge-icon {
	width: 16px;
	height: 16px;
	background-color: var(--ds-gold);
	-webkit-mask: url(../img/lucide/rotate-3d.svg) center / contain no-repeat;
	mask: url(../img/lucide/rotate-3d.svg) center / contain no-repeat;
}

.vt-card__row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 1rem;
}

.vt-card__title {
	font-family: var(--ds-font-display);
	font-size: 1.25em;
	font-weight: 600;
	line-height: 1.375;
	letter-spacing: var(--ds-heading-tracking);
	transition: color var(--ds-transition);
}

.vt-card:hover .vt-card__title {
	color: var(--ds-primary);
}

.vt-card__arrow {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	margin-top: 0.25rem;
	background-color: var(--ds-primary);
	-webkit-mask: url(../img/lucide/arrow-up-right.svg) center / contain no-repeat;
	mask: url(../img/lucide/arrow-up-right.svg) center / contain no-repeat;
	transition: transform var(--ds-transition);
}

.vt-card:hover .vt-card__arrow {
	transform: translate(2px, -2px);
}

.vt-card__note {
	display: block;
	margin-top: 0.5rem;
	font-size: 0.75em;
	line-height: 1.6;
	color: var(--ds-ink-soft);
}

@media (prefers-reduced-motion: reduce) {
	.vt-card:hover .vt-card__media img,
	.vt-card:hover .vt-card__arrow {
		transform: none;
	}
}