/**
 * Travel26 Attraction Grid
 *
 * Contents
 * 1. Variables and grid
 * 2. Card and hover effects
 * 3. Photo
 * 4. Number badge, type and area, name, description
 * 5. Editor hint
 * 6. Reduced motion
 *
 * Colours read the Inoforest Core Design System when it is active, with the Travel26 design as fallback.
 */

/* 1. Variables and grid --------------------------------------------------------- */
.travel26-attractions {
	--travel26-attractions-columns: 3;
	--travel26-attractions-gap: 30px;
	--travel26-attractions-radius: 24px;
	--travel26-attractions-ratio: 16 / 11;
	--travel26-attractions-num: 52px;
	display: grid;
	grid-template-columns: repeat(var(--travel26-attractions-columns), minmax(0, 1fr));
	gap: var(--travel26-attractions-gap);
}

/* 2. Card and hover effects --------------------------------------------------------- */
.travel26-attractions .travel26-attractions__card {
	height: 100%;
	overflow: hidden;
	background: #fff;
	border-radius: var(--travel26-attractions-radius);
	box-shadow: 0 2px 6px rgba(13, 27, 42, 0.06);
	transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.travel26-attractions[data-hover="lift"] .travel26-attractions__card:hover {
	box-shadow: 0 14px 40px rgba(13, 27, 42, 0.1);
	transform: translateY(-8px);
}

/* 3. Photo ------------------------------------------------------------------------------ */
.travel26-attractions .travel26-attractions__media {
	position: relative;
	overflow: hidden;
	aspect-ratio: var(--travel26-attractions-ratio);
	background: #f4f8f8;
}

.travel26-attractions .travel26-attractions__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
	transition: transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.travel26-attractions:not([data-hover="none"]) .travel26-attractions__card:hover .travel26-attractions__media img {
	transform: scale(1.08);
}

/* 4. Number badge, type and area, name, description ----------------------------------- */
.travel26-attractions .travel26-attractions__body {
	position: relative;
	padding: 36px 26px 26px;
}

.travel26-attractions .travel26-attractions__num {
	position: absolute;
	top: calc(var(--travel26-attractions-num) / -2);
	left: 22px;
	display: grid;
	place-items: center;
	width: var(--travel26-attractions-num);
	height: var(--travel26-attractions-num);
	font-weight: 800;
	color: #fff;
	background: var(--inoforest-color-accent, #ff6a3d);
	border: 4px solid #fff;
	border-radius: 50%;
}

.travel26-attractions .travel26-attractions__tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 8px;
	font-size: 0.8rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--inoforest-color-primary, #0b7a75);
}

.travel26-attractions .travel26-attractions__tag svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.travel26-attractions .travel26-attractions__title {
	margin: 0 0 8px;
	font-size: 1.25rem;
	color: var(--inoforest-color-heading, #0d1b2a);
}

.travel26-attractions .travel26-attractions__text {
	margin: 0;
	font-size: 0.95rem;
}

/* 5. Editor hint ------------------------------------------------------------------- */
.travel26-attractions__empty {
	margin: 0 0 16px;
	padding: 14px 18px;
	font-size: 13px;
	text-align: center;
	border: 1px dashed var(--inoforest-color-border, #e5ebef);
	border-radius: 12px;
}

/* 6. Reduced motion ---------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.travel26-attractions .travel26-attractions__card,
	.travel26-attractions .travel26-attractions__media img {
		transition: none;
	}

	.travel26-attractions[data-hover="lift"] .travel26-attractions__card:hover,
	.travel26-attractions:not([data-hover="none"]) .travel26-attractions__card:hover .travel26-attractions__media img {
		transform: none;
	}
}