.pomar-activities,
.pomar-activities * {
	box-sizing: border-box;
}

.pomar-activities {
	width: 100%;
	max-width: var(--container-max, 1440px);
	margin: 0 auto;
	padding: var(--space-9, 96px) var(--space-5, 24px);
	display: flex;
	flex-direction: column;
	gap: var(--space-6, 32px);
	color: var(--text-body, #4d463e);
}

.pomar-activities__header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--space-6, 32px);
}

.pomar-activities__heading {
	max-width: 680px;
	display: flex;
	flex-direction: column;
	gap: var(--space-3, 12px);
}

.pomar-activities__eyebrow,
.pomar-activities__title,
.pomar-activities__intro,
.pomar-activities__count,
.pomar-activities__meta,
.pomar-activities__description,
.pomar-activities__empty,
.pomar-activities__footer {
	margin: 0;
}

.pomar-activities__eyebrow,
.pomar-activities__count,
.pomar-activities__meta {
	font: var(--type-eyebrow, 600 12px/1.25 sans-serif);
	letter-spacing: var(--tracking-eyebrow, .1em);
	text-transform: uppercase;
	color: var(--text-muted, #756d64);
}

.pomar-activities__title {
	font: var(--type-h2, italic 400 48px/1.15 serif);
	font-size: var(--text-3xl, 48px);
	color: var(--text-heading, #241c14);
}

.pomar-activities__intro {
	font: var(--type-body-lg, 400 18px/1.65 sans-serif);
	color: var(--text-body, #4d463e);
	text-wrap: pretty;
}

.pomar-activities__count {
	flex: none;
	padding-bottom: 6px;
	font-size: var(--text-2xs, 11px);
	white-space: nowrap;
}

.pomar-activities__count--mobile {
	display: none;
}

.pomar-activities__controls {
	display: none;
}

.pomar-activities.is-enhanced .pomar-activities__controls {
	display: flex;
	align-items: center;
	gap: var(--space-3, 12px);
	padding-bottom: var(--space-2, 8px);
	border-bottom: 1px solid var(--border-subtle, #e1d6c8);
}

.pomar-activities__filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-3, 12px);
}

.pomar-activities__filter {
	min-width: 0;
	height: 36px;
	padding: 0 var(--space-4, 16px);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	border: 1px solid var(--border-subtle, #e1d6c8);
	border-radius: var(--radius-pill, 999px);
	background: var(--surface-card, #fff);
	color: var(--text-body, #4d463e);
	font: var(--type-small, 400 14px/1.4 sans-serif);
	font-size: var(--text-sm, 14px);
	letter-spacing: .04em;
	white-space: nowrap;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: background-color var(--dur-med, 180ms) var(--ease-out, ease-out), border-color var(--dur-med, 180ms) var(--ease-out, ease-out), color var(--dur-med, 180ms) var(--ease-out, ease-out);
}

.pomar-activities__filter:hover {
	border-color: var(--sun-500, #e5d145);
}

.pomar-activities__filter.is-active {
	border-color: var(--sun-500, #e5d145);
	background: var(--accent, #f1dd43);
	color: var(--clay-900, #241c14);
}

.pomar-activities__filter:focus-visible,
.pomar-activities__reset:focus-visible {
	outline: 3px solid var(--sun-500, #e5d145);
	outline: 3px solid color-mix(in srgb, var(--sun-500, #e5d145) 55%, transparent);
	outline-offset: 3px;
}

.pomar-activities__controls-meta {
	margin-left: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3, 12px);
}

.pomar-activities .pomar-activities__reset,
.pomar-activities .pomar-activities__reset:hover,
.pomar-activities .pomar-activities__reset:focus,
.pomar-activities .pomar-activities__reset:active {
	padding: 4px 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	transform: none;
	color: var(--text-link, #916c45);
	font: var(--type-small, 400 14px/1.4 sans-serif);
	font-size: var(--text-sm, 14px);
	text-decoration: underline;
	text-decoration-color: var(--text-link, #916c45);
	text-decoration-color: color-mix(in srgb, var(--text-link, #916c45) 35%, transparent);
	text-underline-offset: 3px;
	cursor: pointer;
}

.pomar-activities .pomar-activities__reset:hover {
	color: var(--text-link, #916c45);
	text-decoration-thickness: 1px;
}

.pomar-activities__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	align-items: start;
	gap: var(--space-5, 24px);
}

.pomar-activities__card {
	min-width: 0;
	padding: var(--card-pad, 24px);
	display: flex;
	flex-direction: column;
	gap: var(--space-4, 16px);
	border: 1px solid var(--border-subtle, #e1d6c8);
	border-radius: var(--radius-lg, 24px);
	background: var(--surface-card, #fff);
	box-shadow: var(--shadow-xs, 0 1px 2px rgba(36, 28, 20, .06));
	transition: box-shadow var(--dur-med, 180ms) var(--ease-out, ease-out), transform var(--dur-fast, 120ms) var(--ease-out, ease-out);
}

.pomar-activities__image-wrap {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--radius-md, 16px);
	background: var(--sand-200, #f3eadf);
}

.pomar-activities__image,
.pomar-activities__image-placeholder {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
}

.pomar-activities__image {
	object-fit: cover;
}

.pomar-activities__image-placeholder {
	background:
		linear-gradient(135deg, transparent 48%, rgba(145, 108, 69, .12) 49%, rgba(145, 108, 69, .12) 51%, transparent 52%),
		var(--sand-200, #f3eadf);
}

.pomar-activities__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.pomar-activities__tag {
	height: 26px;
	padding: 0 10px;
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--border-subtle, #e1d6c8);
	border-radius: var(--radius-pill, 999px);
	background: var(--sand-200, #f3eadf);
	color: var(--clay-700, #5e4936);
	font: var(--type-small, 400 14px/1.4 sans-serif);
	font-size: var(--text-xs, 12px);
	letter-spacing: .03em;
}

.pomar-activities__card-heading {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.pomar-activities__card-title {
	margin: 0;
	font: var(--type-h3, 400 24px/1.25 serif);
	font-size: var(--text-xl, 24px);
	color: var(--text-heading, #241c14);
	text-wrap: balance;
}

.pomar-activities__meta {
	font-size: var(--text-2xs, 11px);
}

.pomar-activities__description {
	font: var(--type-body, 400 16px/1.65 sans-serif);
	font-size: var(--text-sm, 14px);
	color: var(--text-body, #4d463e);
	text-wrap: pretty;
}

.pomar-activities__empty {
	padding: var(--space-6, 32px);
	border: 1px dashed var(--border-subtle, #e1d6c8);
	border-radius: var(--radius-lg, 24px);
	background: var(--surface-card, #fff);
	font: var(--type-body, 400 16px/1.65 sans-serif);
	text-align: center;
}

.pomar-activities__footer {
	font: var(--type-small, 400 14px/1.4 sans-serif);
	font-size: var(--text-sm, 14px);
	color: var(--text-muted, #756d64);
}

.pomar-activities [hidden] {
	display: none !important;
}

@media (hover: hover) {
	.pomar-activities__card:hover {
		box-shadow: var(--shadow-lg, 0 18px 40px rgba(36, 28, 20, .12));
		transform: translateY(-2px);
	}
}

@media (max-width: 1099px) {
	.pomar-activities__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 719px) {
	.pomar-activities {
		padding: var(--space-7, 48px) var(--space-4, 16px);
		gap: var(--space-4, 16px);
	}

	.pomar-activities__header {
		display: block;
	}

	.pomar-activities__heading {
		max-width: none;
	}

	.pomar-activities__title {
		font-size: var(--text-2xl, 36px);
	}

	.pomar-activities__intro {
		font: var(--type-body, 400 16px/1.65 sans-serif);
		font-size: var(--text-sm, 14px);
	}

	.pomar-activities__count--desktop {
		display: none;
	}

	.pomar-activities__count--mobile {
		display: block;
		padding: 0;
	}

	.pomar-activities.is-enhanced .pomar-activities__controls {
		margin: 0 calc(var(--space-4, 16px) * -1);
		padding: var(--space-2, 8px) 0 0;
		display: flex;
		align-items: stretch;
		flex-direction: column;
		gap: var(--space-2, 8px);
		border: 0;
	}

	.pomar-activities__filters {
		padding: 0 var(--space-4, 16px);
		display: flex;
		flex-wrap: nowrap;
		gap: var(--space-2, 8px);
		overflow-x: auto;
		overscroll-behavior-inline: contain;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.pomar-activities__filters::-webkit-scrollbar {
		display: none;
	}

	.pomar-activities__controls-meta {
		width: auto;
		margin: 0 var(--space-4, 16px);
		padding-bottom: var(--space-3, 12px);
		border-bottom: 1px solid var(--border-subtle, #e1d6c8);
	}

	.pomar-activities__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-4, 16px);
	}

	.pomar-activities__card {
		padding: var(--space-4, 16px);
		gap: var(--space-3, 12px);
	}

	.pomar-activities__card-title {
		font-size: var(--text-lg, 20px);
	}

	.pomar-activities__footer {
		font-size: var(--text-xs, 12px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.pomar-activities__filter,
	.pomar-activities__card {
		transition: none;
	}
}
