/**
 * Home/city section components. Visual source: approved-v1 refs 01/02.
 * Sections share the heading row pattern; individual sections extend it.
 */

/* ------------------------------------------------------------------
 * Breadcrumbs (product, city, search)
 * ---------------------------------------------------------------- */
.nbf-breadcrumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--nbf-space-2);
	padding-block: var(--nbf-space-4);
	font-size: var(--nbf-fs-xs);
	color: var(--nbf-color-text-3);
}

.nbf-breadcrumbs a {
	color: var(--nbf-color-primary-700);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* ------------------------------------------------------------------
 * Shared section heading row
 * ---------------------------------------------------------------- */
.nbf-section-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--nbf-space-4);
	margin-block-end: var(--nbf-space-5);
}

.nbf-section-head__title {
	margin: 0;
	font-size: var(--nbf-fs-2xl);
}

.nbf-section-head__subtitle {
	margin: var(--nbf-space-1) 0 0;
	color: var(--nbf-color-text-2);
	font-size: var(--nbf-fs-sm);
}

.nbf-section-head__view-all {
	font-size: var(--nbf-fs-sm);
	font-weight: var(--nbf-fw-medium);
	white-space: nowrap;
}

@media (max-width: 767px) {
	.nbf-section-head__title {
		font-size: var(--nbf-fs-xl);
	}
}

/* ------------------------------------------------------------------
 * Hero
 * ---------------------------------------------------------------- */
.nbf-hero {
	margin-block-start: var(--nbf-space-4);
}

.nbf-hero__frame {
	position: relative;
	border-radius: var(--nbf-radius-xl);
	overflow: hidden;
	background: var(--nbf-color-surface-tint);
	/* Reserve height before media loads: no CLS. */
	aspect-ratio: 16 / 6;
	display: flex;
	align-items: center;
	/* Approved home hero: copy and search occupy the PHYSICAL LEFT area
	 * with the activity photograph on the physical right. In this RTL
	 * document, flex-end is the physical left. */
	justify-content: flex-end;
}

/* A hero that also carries the compact search needs more vertical room
 * than a copy-only one. */
.nbf-hero--with-search .nbf-hero__frame {
	aspect-ratio: 16 / 6.6;
}

.nbf-hero__media,
.nbf-hero__media picture {
	position: absolute;
	inset: 0;
}

.nbf-hero__img,
.nbf-hero__placeholder {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

/* Hero photography is wider than the 16/6 frame, so `cover` trims the
   top and bottom. Hold the crop slightly above centre: the horizon and
   the rider sit in the upper half, the lower band is open water. */
.nbf-hero__img {
	object-position: 50% 42%;
}

/* With the copy on the left, bias the crop so the rider/subject stays in
 * the right half rather than behind the headline. Desktop only: the mobile
 * composition overlays the copy on the whole frame and picks its own crop,
 * and this two-class selector would otherwise outrank it. */
@media (min-width: 768px) {
	/* The supplied hero photography carries its subject at ~33% from the
	 * left; the approved composition wants it on the physical RIGHT, away
	 * from the copy. No crop can move a baked-in subject, so the image is
	 * mirrored (there is no text in the photo). Desktop only — the mobile
	 * composition overlays the copy and picks its own crop. */
	.nbf-hero--mirror .nbf-hero__img {
		transform: scaleX(-1);
	}
}

.nbf-hero__placeholder {
	background:
		radial-gradient(120% 120% at 15% 20%, rgb(255 255 255 / 0.75) 0%, transparent 45%),
		linear-gradient(200deg, #bfe0f8 0%, #7fb8e8 45%, #2f7fc4 100%);
}

/* Readability wash over the text side */
/* Readability wash over the text side. Gradient directions are physical
 * (there is no logical keyword with usable support), and the copy sits on
 * the physical left, so the opaque stop belongs at the left edge. */
.nbf-hero--overlay-soft .nbf-hero__media::after,
.nbf-hero--overlay-strong .nbf-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to right, rgb(240 248 255 / 0.93) 0%, rgb(240 248 255 / 0.6) 44%, transparent 74%);
}

.nbf-hero--overlay-strong .nbf-hero__media::after {
	background: linear-gradient(to right, rgb(240 248 255 / 0.97) 0%, rgb(240 248 255 / 0.78) 55%, rgb(240 248 255 / 0.2) 100%);
}

.nbf-hero__content {
	position: relative;
	max-inline-size: 34rem;
	padding: var(--nbf-space-8) var(--nbf-space-10);
}

.nbf-hero--with-search .nbf-hero__content {
	/* Room for the three-field search row without crowding the photo. */
	max-inline-size: 40rem;
	padding-inline: var(--nbf-space-8);
}

.nbf-hero--align-center .nbf-hero__content {
	text-align: center;
}

.nbf-hero__eyebrow {
	color: var(--nbf-color-primary-700);
	font-size: var(--nbf-fs-sm);
	font-weight: var(--nbf-fw-bold);
	margin-block-end: var(--nbf-space-2);
}

.nbf-hero__title {
	font-size: var(--nbf-fs-3xl);
	margin-block-end: var(--nbf-space-3);
	    font-weight: 900;
}

.nbf-hero__desc {
	color: var(--nbf-color-text-2);
	margin-block-end: var(--nbf-space-5);
	font-size: 15px;
}

.nbf-hero__cta {
	margin: 0;
}

/* Mobile hero: purpose-built composition, not a shrunk desktop. */
@media (max-width: 767px) {
	.nbf-hero__frame {
		aspect-ratio: auto;
		min-block-size: 17rem;
		align-items: flex-end;
	}

	/* On mobile the copy sits over the full frame, so the crop is chosen
	   for legibility: anchoring to the top puts open sky behind the
	   headline. Measured against the other anchor points, this is both
	   the lightest and the least busy backdrop for dark text. Frame
	   height and composition are unchanged. */
	.nbf-hero__img {
		object-position: 50% 0%;
	}

	.nbf-hero--overlay-soft .nbf-hero__media::after,
	.nbf-hero--overlay-strong .nbf-hero__media::after {
		background: linear-gradient(to top, rgb(240 248 255 / 0.96) 15%, rgb(240 248 255 / 0.55) 45%, transparent 75%);
	}

	.nbf-hero__content {
		padding: var(--nbf-space-5);
		text-align: center;
		margin-inline: auto;
	}

	.nbf-hero__title {
		font-size: var(--nbf-fs-2xl);
	}

	.nbf-hero__desc {
		font-size: var(--nbf-fs-sm);
	}

	.nbf-hero--with-search .nbf-hero__frame {
		aspect-ratio: auto;
	}
}

/* ------------------------------------------------------------------
 * Compact hero search (inside the hero, desktop)
 * ---------------------------------------------------------------- */
/* Mobile shows NO inline hero search — search opens from the shared header
 * control (approved mobile behavior). Hidden is therefore the base state,
 * enabled from the desktop breakpoint up, so no later rule can leak it back
 * onto phones. */
.nbf-hero-search {
	display: none;
}

@media (min-width: 768px) {
	.nbf-hero-search {
		display: grid;
		grid-template-columns: 1fr 1fr auto;
		align-items: end;
		gap: var(--nbf-space-3);
		margin-block: var(--nbf-space-5) 0;
		padding: var(--nbf-space-3);
		background: rgb(255 255 255 / 46%);
		border: 1px solid var(--nbf-color-border);
		border-radius: var(--nbf-radius-lg);
		box-shadow: var(--nbf-shadow-sm);
		text-align: start;
	}
}

.nbf-hero-search__field {
	display: grid;
	gap: var(--nbf-space-1);
	min-inline-size: 0;
}

.nbf-hero-search__field .nbf-field__label {
	font-size: var(--nbf-fs-xs);
	color: var(--nbf-color-text-2);
}

.nbf-hero-search__submit {
	white-space: nowrap;
	font-size: 15px;
}

@media (min-width: 768px) and (max-width: 1023px) {
	/* Tablet: the button drops to its own row rather than squeezing the
	 * two selects below a usable width. */
	.nbf-hero-search {
		grid-template-columns: 1fr 1fr;
	}

	.nbf-hero-search__submit {
		grid-column: 1 / -1;
	}
}

/* ------------------------------------------------------------------
 * Search bar (below hero, desktop only)
 * ---------------------------------------------------------------- */
.nbf-search-bar {
	margin-block-start: calc(-1 * var(--nbf-space-8));
	margin-block-end: var(--nbf-section-gap);
}

.nbf-search-bar__form {
	display: flex;
	align-items: end;
	gap: var(--nbf-space-4);
	background: var(--nbf-color-surface);
	border: 1px solid var(--nbf-color-border);
	border-radius: var(--nbf-radius-lg);
	box-shadow: var(--nbf-shadow-md);
	padding: var(--nbf-space-4) var(--nbf-space-5);
	max-inline-size: 52rem;
	margin-inline: auto;
	position: relative;
}

.nbf-search-bar__field {
	flex: 1;
}

.nbf-search-bar__field .nbf-field__label {
	display: block;
	margin-block-end: var(--nbf-space-1);
}

.nbf-search-bar__submit {
	flex-shrink: 0;
}

/* Spec: no large search form on mobile home — header icon only. */
@media (max-width: 767px) {
	.nbf-search-bar {
		display: none;
	}
}

/* ------------------------------------------------------------------
 * Card collections: grid mode & carousel mode (shared by sections)
 * ---------------------------------------------------------------- */
.nbf-cards--grid {
	display: grid;
	grid-template-columns: repeat(var(--nbf-per-view, 4), minmax(0, 1fr));
	gap: var(--nbf-space-4);
}

.nbf-cards--carousel {
	--nbf-gap: var(--nbf-space-4);
	display: flex; /* overrides .nbf-scroller's grid: % widths need flex */
	gap: var(--nbf-gap);
	/* Controlled clipping on the viewport itself; the native scrollbar is
	 * hidden because the arrows are the affordance. */
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	/* Room for the card hover lift and focus ring, which would otherwise be
	 * clipped by the scroll viewport. */
	padding-block: var(--nbf-space-1) var(--nbf-space-3);
}

.nbf-cards--carousel::-webkit-scrollbar {
	display: none;
}

.nbf-cards--carousel > * {
	flex-shrink: 0;
	scroll-snap-align: start;
	inline-size: calc((100% - (var(--nbf-per-view, 4) - 1) * var(--nbf-gap)) / var(--nbf-per-view, 4));
}

/* Mobile: every collection becomes a scroller with a partial next card. */
@media (max-width: 767px) {
	.nbf-cards--grid {
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: calc((100% - var(--nbf-space-3)) / var(--nbf-per-view-m, 1.2));
		grid-template-columns: none;
		gap: var(--nbf-space-3);
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x proximity;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		padding-block: var(--nbf-space-1) var(--nbf-space-3);
	}

	.nbf-cards--grid::-webkit-scrollbar {
		display: none;
	}

	.nbf-cards--grid > * {
		scroll-snap-align: start;
	}

	.nbf-cards--carousel > * {
		inline-size: calc((100% - var(--nbf-space-3)) / var(--nbf-per-view-m, 1.2));
	}

	.nbf-cards--carousel {
		--nbf-gap: var(--nbf-space-3);
	}
}

/* ------------------------------------------------------------------
 * Shared carousel controls (added by carousel.js)
 *
 * Arrows are mandatory on desktop AND mobile and must stay usable at
 * 360px, so they overlay the track edges instead of sitting outside it —
 * an outside offset would widen the page at small widths.
 * ---------------------------------------------------------------- */
.nbf-carousel-wrap {
	position: relative;
}

.nbf-carousel-nav {
	position: absolute;
	inset-block-start: 50%;
	transform: translateY(-50%);
	z-index: 3;
	box-shadow: var(--nbf-shadow-md);
	background: var(--nbf-color-surface);
	border: 1px solid var(--nbf-color-border);
	transition: opacity var(--nbf-duration) var(--nbf-ease);
}

.nbf-carousel-nav--prev {
	inset-inline-start: var(--nbf-space-1);
}

.nbf-carousel-nav--next {
	inset-inline-end: var(--nbf-space-1);
}

/* Clear disabled state at each end of the track. */
.nbf-carousel-nav[disabled] {
	opacity: 0.35;
	cursor: default;
	box-shadow: none;
}

/* A track whose items all fit has nothing to page through, so its arrows
 * are removed rather than shown permanently disabled. This is what lets one
 * collection carry arrows only where it actually scrolls: a desktop grid
 * shows none (matching the approved reference), and the same collection
 * turned mobile scroller shows them. carousel.js re-evaluates on resize,
 * filtering and load-more. */
.nbf-carousel-wrap--static .nbf-carousel-nav {
	display: none;
}

@media (min-width: 1024px) {
	/* Desktop has room to sit just off the track edge. */
	.nbf-carousel-nav--prev {
		inset-inline-start: calc(-1 * var(--nbf-space-3));
	}

	.nbf-carousel-nav--next {
		inset-inline-end: calc(-1 * var(--nbf-space-3));
	}
}

@media (prefers-reduced-motion: reduce) {
	.nbf-carousel-nav {
		transition: none;
	}
}

/* ------------------------------------------------------------------
 * Product card
 *
 * Composition from issue-03-popular-activities/approved-target.png: photo
 * on top, then a white panel that overlaps the lower part of the image
 * with rounded upper corners, holding centered title/excerpt/price and a
 * full-width primary button.
 *
 * Equal heights inside one row/carousel come from stretching the card and
 * pushing the price+action to the bottom, so a two-line title never makes
 * one card taller than its neighbours.
 * ---------------------------------------------------------------- */
.nbf-product-card {
	/* The panel overlaps the media, so the card cannot clip its children. */
	overflow: visible;
	block-size: 100%;
	background: transparent;
	border: 0;
	box-shadow: none;
}

.nbf-product-card .nbf-media-card__media {
	border-radius: var(--nbf-radius-lg);
	overflow: hidden;
	aspect-ratio: 4 / 3.4;
}

.nbf-product-card .nbf-media-card__media img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

/* White content panel lifted over the lower part of the photo. */
.nbf-product-card__panel {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	align-items: center;
	text-align: center;
	gap: var(--nbf-space-2);
	margin-inline: var(--nbf-space-3);
	margin-block-start: calc(-1 * var(--nbf-space-8));
	padding: var(--nbf-space-4) var(--nbf-space-3);
	background: var(--nbf-color-surface);
	border: 1px solid var(--nbf-color-border);
	border-radius: var(--nbf-radius-lg) var(--nbf-radius-lg) var(--nbf-radius-md) var(--nbf-radius-md);
	box-shadow: var(--nbf-shadow-sm);
}

.nbf-product-card .nbf-media-card__title,
.nbf-product-card .nbf-media-card__subtitle {
	margin-block-end: 0;
}

.nbf-product-card .nbf-media-card__subtitle {
	/* Clamped so one long excerpt cannot stretch a single card. */
	min-block-size: 2.5em;
}

/* Price sits at a consistent height, directly above the button. */
.nbf-product-card__price {
	margin-block-start: auto;
	justify-content: center;
}

.nbf-product-card__action {
	margin-block-start: var(--nbf-space-1);
	inline-size: 100%;
}

.nbf-product-card:hover .nbf-product-card__panel,
.nbf-product-card:focus-within .nbf-product-card__panel {
	box-shadow: var(--nbf-shadow-md);
}

/* The lift belongs to the whole card, not the bare surface. */
.nbf-product-card.nbf-card--interactive:hover {
	box-shadow: none;
}

.nbf-product-card__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 100%;
	block-size: 100%;
	color: var(--nbf-color-primary-200);
	background:
		radial-gradient(100% 100% at 20% 15%, rgb(255 255 255 / 0.7) 0%, transparent 50%),
		linear-gradient(210deg, #d6ebfb 0%, #9ccaee 60%, #5d9fd6 100%);
}

.nbf-media-card__badge--end {
	inset-inline-start: auto;
	inset-inline-end: var(--nbf-space-3);
}

/* Up to three compact variation controls. Kept to one row so a variable
 * product card is not visibly taller than a simple one. */
.nbf-product-card__variants {
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	gap: var(--nbf-space-1);
	list-style: none;
	margin: 0;
	padding: 0;
	position: relative;
	z-index: 2;
	inline-size: 100%;
	min-inline-size: 0;
}

.nbf-product-card__variants > li {
	min-inline-size: 0;
}

.nbf-product-card__variant {
	min-block-size: 1.75rem;
	max-inline-size: 100%;
	padding-inline: var(--nbf-space-2);
	font-size: var(--nbf-fs-2xs);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Selected variation must read clearly, on tap as well as hover. */
.nbf-product-card__variant[aria-pressed="true"] {
	background: var(--nbf-color-primary-600);
	border-color: var(--nbf-color-primary-600);
	color: #fff;
}

/* ------------------------------------------------------------------
 * City card
 * ---------------------------------------------------------------- */
.nbf-city-card__link {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	border-radius: var(--nbf-radius-lg);
	overflow: hidden;
	background: var(--nbf-color-surface-sunken);
}

.nbf-city-card__img,
.nbf-city-card__placeholder {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	transition: transform var(--nbf-duration-slow) var(--nbf-ease);
}

.nbf-city-card__placeholder {
	background: linear-gradient(215deg, #cfe6f9 0%, #8fc0e9 55%, #4a90c9 100%);
}

.nbf-city-card__link:hover .nbf-city-card__img {
	transform: scale(1.04);
}

.nbf-city-card__link:focus-visible {
	outline: 2px solid var(--nbf-color-focus-ring);
	outline-offset: 2px;
}

.nbf-city-card__name {
	position: absolute;
	inset-block-end: var(--nbf-space-3);
	inset-inline-start: var(--nbf-space-3);
	padding: 0.125rem var(--nbf-space-3);
	background: rgb(255 255 255 / 0.92);
	border-radius: var(--nbf-radius-pill);
	font-size: var(--nbf-fs-sm);
	font-weight: var(--nbf-fw-bold);
	color: var(--nbf-color-text);
}

/* ------------------------------------------------------------------
 * Category card
 * ---------------------------------------------------------------- */
.nbf-categories__list {
	gap: var(--nbf-space-2);
	align-items: stretch;
}

/* Fixed icon slot + clamped two-line label: every tile aligns its icon
 * and text on the same lines whether the name is one or two lines long. */
.nbf-category-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: var(--nbf-space-2);
	inline-size: 7.25rem;
	min-inline-size: 7.25rem;
	min-block-size: 6.25rem;
	block-size: 100%;
	padding: var(--nbf-space-2);
	background: var(--nbf-color-surface);
	border: 1px solid var(--nbf-color-border);
	border-radius: var(--nbf-radius-lg);
	color: var(--nbf-color-text);
	font-size: var(--nbf-fs-sm);
	font-weight: var(--nbf-fw-medium);
	text-align: center;
	transition:
		border-color var(--nbf-duration) var(--nbf-ease),
		box-shadow var(--nbf-duration) var(--nbf-ease),
		color var(--nbf-duration) var(--nbf-ease);
}

.nbf-category-card:hover {
	text-decoration: none;
	color: var(--nbf-color-primary-600);
	border-color: var(--nbf-color-primary-300);
	box-shadow: var(--nbf-shadow-sm);
}

.nbf-category-card__icon {
	color: var(--nbf-color-primary-600);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	block-size: 2.25rem;
	flex-shrink: 0;
}

.nbf-category-card__label {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	line-height: 1.4;
	font-weight: 600;
	font-size: 15px;
}

.nbf-category-card--all {
	background: var(--nbf-color-primary-50);
	border-color: var(--nbf-color-primary-200);
}

/* Filter controls are buttons; reset the UA button chrome the shared
 * category styling does not already cover. */
.nbf-category-card {
	appearance: none;
	cursor: pointer;
	font: inherit;
}

.nbf-categories__form {
	margin: 0;
}

/* Selected category: unmistakable active state. */
.nbf-category-card[aria-pressed="true"] {
	background: var(--nbf-color-primary-600);
	border-color: var(--nbf-color-primary-600);
	color: #fff;
	box-shadow: var(--nbf-shadow-sm);
}

.nbf-category-card[aria-pressed="true"] .nbf-category-card__icon {
	color: #fff;
}

/* ------------------------------------------------------------------
 * In-page filtering: card enter transition + empty state
 * ---------------------------------------------------------------- */

/* Only a JS-managed listing hides anything: without JS every
 * server-rendered card stays visible. */
[data-nbf-managed] [data-nbf-card] {
	transition:
		opacity var(--nbf-duration) var(--nbf-ease),
		transform var(--nbf-duration) var(--nbf-ease);
}

[data-nbf-managed] [data-nbf-card].is-entering {
	opacity: 0;
	transform: translateY(var(--nbf-space-3)) scale(0.98);
}

.nbf-filter-empty {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--nbf-space-3);
	margin-block: var(--nbf-space-5) 0;
	padding: var(--nbf-space-5);
	background: var(--nbf-color-surface-tint);
	border: 1px solid var(--nbf-color-border);
	border-radius: var(--nbf-radius-lg);
	color: var(--nbf-color-text-2);
	text-align: center;
}

.nbf-filter-empty svg {
	color: var(--nbf-color-primary-600);
	flex: none;
}

.nbf-products-section__more {
	display: flex;
	justify-content: center;
	margin-block: var(--nbf-space-6) 0;
}

@media (prefers-reduced-motion: reduce) {
	[data-nbf-managed] [data-nbf-card] {
		transition: none;
	}

	[data-nbf-managed] [data-nbf-card].is-entering {
		opacity: 1;
		transform: none;
	}
}

/* ------------------------------------------------------------------
 * Special offers
 * ---------------------------------------------------------------- */
.nbf-offers__timing {
	display: inline-flex;
	align-items: center;
	gap: var(--nbf-space-2);
	margin-block: calc(-1 * var(--nbf-space-3)) var(--nbf-space-4);
	color: var(--nbf-color-warning);
	font-size: var(--nbf-fs-sm);
	font-weight: var(--nbf-fw-medium);
}

.nbf-offer-card,
.nbf-offer-card__link {
	block-size: 100%;
}

.nbf-offer-card__link {
	position: relative;
	display: block;
	aspect-ratio: 16 / 10;
	border-radius: var(--nbf-radius-lg);
	overflow: hidden;
	background: var(--nbf-color-surface-sunken);
	color: inherit;
}

.nbf-offer-card__media {
	position: absolute;
	inset: 0;
	display: block;
}

.nbf-offer-card__link:hover {
	text-decoration: none;
}

.nbf-offer-card__link:focus-visible {
	outline: 2px solid var(--nbf-color-focus-ring);
	outline-offset: 2px;
}

.nbf-offer-card__img,
.nbf-offer-card__placeholder {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.nbf-offer-card__placeholder {
	background: linear-gradient(215deg, #cfe6f9 0%, #86bce6 55%, #3d86c2 100%);
}

/* Discount badge in the top corner, per the approved card. */
.nbf-offer-card__badge {
	position: absolute;
	inset-block-start: var(--nbf-space-3);
	inset-inline-start: var(--nbf-space-3);
	z-index: 2;
}

/* Lightly translucent panel over the lower portion of the photo, anchored
 * toward the PHYSICAL LEFT of the card as the approved design shows.
 * `left` is deliberate here, not a logical property: the anchoring is a
 * fixed property of the composition, not of the reading direction. */
.nbf-offer-card__body {
	position: absolute;
	inset-block-end: var(--nbf-space-4);
	left: var(--nbf-space-4);
	z-index: 2;
	display: grid;
	justify-items: center;
	text-align: center;
	gap: var(--nbf-space-1);
	inline-size: min(17rem, 62%);
	padding: var(--nbf-space-3) var(--nbf-space-4);
	background: rgb(255 255 255 / 0.9);
	border-radius: var(--nbf-radius-lg);
	box-shadow: var(--nbf-shadow-sm);
}

.nbf-offer-card__body .nbf-price {
	justify-content: center;
}

.nbf-offer-card__cta {
	inline-size: 100%;
	justify-content: center;
}

@media (max-width: 767px) {
	/* At phone widths the panel spans the card instead of hugging one
	 * side, which would leave the Persian copy too narrow to read. */
	.nbf-offer-card__body {
		left: var(--nbf-space-3);
		right: var(--nbf-space-3);
		inline-size: auto;
	}
}

.nbf-offer-card__title {
	font-weight: var(--nbf-fw-black);
	font-size: var(--nbf-fs-lg);
}

.nbf-offer-card__subtitle {
	font-size: var(--nbf-fs-xs);
	color: var(--nbf-color-text-2);
}

.nbf-offer-card__body .nbf-btn {
	margin-block-start: var(--nbf-space-1);
}

/* ------------------------------------------------------------------
 * Gallery — photo cards with a circular play overlay, opening the popup
 * ---------------------------------------------------------------- */
.nbf-gallery__item {
	margin: 0;
	border-radius: var(--nbf-radius-lg);
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background: var(--nbf-color-surface-sunken);
}

.nbf-gallery__trigger {
	position: relative;
	display: block;
	inline-size: 100%;
	block-size: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	appearance: none;
}

.nbf-gallery__img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	transition: transform var(--nbf-duration-slow) var(--nbf-ease);
}

.nbf-gallery__trigger:hover .nbf-gallery__img,
.nbf-gallery__trigger:focus-visible .nbf-gallery__img {
	transform: scale(1.04);
}

/* Circular action overlay on every media card. */
.nbf-gallery__overlay {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	transform: translate(50%, -50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 3rem;
	block-size: 3rem;
	border-radius: var(--nbf-radius-full);
	background: rgb(255 255 255 / 0.92);
	color: var(--nbf-color-primary-700);
	box-shadow: var(--nbf-shadow-md);
	transition:
		transform var(--nbf-duration) var(--nbf-ease),
		background-color var(--nbf-duration) var(--nbf-ease);
}

.nbf-gallery__trigger:hover .nbf-gallery__overlay,
.nbf-gallery__trigger:focus-visible .nbf-gallery__overlay {
	background: #fff;
	transform: translate(50%, -50%) scale(1.08);
}

.nbf-gallery__trigger:focus-visible {
	outline: 2px solid var(--nbf-color-focus-ring);
	outline-offset: -2px;
}

@media (max-width: 767px) {
	.nbf-gallery__overlay {
		inline-size: 2.25rem;
		block-size: 2.25rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.nbf-gallery__img,
	.nbf-gallery__overlay {
		transition: none;
	}

	.nbf-gallery__trigger:hover .nbf-gallery__img,
	.nbf-gallery__trigger:focus-visible .nbf-gallery__img {
		transform: none;
	}

	.nbf-gallery__trigger:hover .nbf-gallery__overlay,
	.nbf-gallery__trigger:focus-visible .nbf-gallery__overlay {
		transform: translate(50%, -50%);
	}
}

/* ------------------------------------------------------------------
 * FAQ section (two-column desktop like ref 01, single column mobile)
 * ---------------------------------------------------------------- */
.nbf-faq-section__list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--nbf-space-3);
	align-items: start;
}

.nbf-faq-section__list .nbf-accordion + .nbf-accordion {
	margin-block-start: 0;
}

.nbf-faq-section__more {
	margin-block-start: var(--nbf-space-4);
	text-align: center;
}

@media (max-width: 767px) {
	.nbf-faq-section__list {
		grid-template-columns: 1fr;
	}
}

/* ------------------------------------------------------------------
 * CTA banner
 * ---------------------------------------------------------------- */
.nbf-cta__frame {
	position: relative;
	overflow: hidden;
	border-radius: var(--nbf-radius-xl);
	background: linear-gradient(120deg, var(--nbf-color-primary-700) 0%, var(--nbf-color-primary-500) 60%, var(--nbf-color-primary-400) 100%);
	color: var(--nbf-color-text-inverse);
}

.nbf-cta__img {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	opacity: 0.25;
}

.nbf-cta__content {
	position: relative;
	padding: var(--nbf-space-8) var(--nbf-space-10);
	max-inline-size: 36rem;
}

.nbf-cta--align-center .nbf-cta__content {
	margin-inline: auto;
	text-align: center;
}

.nbf-cta__title {
	color: inherit;
	font-size: var(--nbf-fs-2xl);
	margin-block-end: var(--nbf-space-2);
}

.nbf-cta__desc {
	color: rgb(255 255 255 / 0.85);
	margin-block-end: var(--nbf-space-4);
}

.nbf-cta__action {
	margin: 0;
}

@media (max-width: 767px) {
	.nbf-cta__content {
		padding: var(--nbf-space-6) var(--nbf-space-5);
		text-align: center;
		margin-inline: auto;
	}
}

/* ------------------------------------------------------------------
 * Trust strip
 * ---------------------------------------------------------------- */
.nbf-trust__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.nbf-trust__item {
	display: flex;
	align-items: center;
	gap: var(--nbf-space-3);
	padding: var(--nbf-space-4);
	background: var(--nbf-color-surface);
	border: 1px solid var(--nbf-color-border);
	border-radius: var(--nbf-radius-lg);
}

.nbf-trust__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 3rem;
	block-size: 3rem;
	flex-shrink: 0;
	border-radius: var(--nbf-radius-pill);
	background: var(--nbf-color-primary-50);
	color: var(--nbf-color-primary-600);
}

.nbf-trust__text {
	display: grid;
	gap: 0.125rem;
	font-size: var(--nbf-fs-sm);
}

.nbf-trust__text span {
	color: var(--nbf-color-text-3);
	font-size: var(--nbf-fs-xs);
}

/* ------------------------------------------------------------------
 * SEO content prose
 * ---------------------------------------------------------------- */
.nbf-seo-content__inner {
	max-inline-size: 52rem;
}

.nbf-seo-content__prose {
	color: var(--nbf-color-text-2);
	font-size: var(--nbf-fs-sm);
	line-height: var(--nbf-lh-body);
}

/* ------------------------------------------------------------------
 * City landing: intro + all-activities pagination
 * ---------------------------------------------------------------- */
.nbf-city-intro__grid--with-media {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: var(--nbf-space-6);
	align-items: start;
}

.nbf-city-intro__media {
	margin: 0;
	border-radius: var(--nbf-radius-xl);
	overflow: hidden;
}

.nbf-city-all__pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--nbf-space-2);
	margin-block-start: var(--nbf-space-5);
}

.nbf-city-all__page {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: var(--nbf-tap-target);
	min-block-size: var(--nbf-tap-target);
	border: 1px solid var(--nbf-color-border);
	border-radius: var(--nbf-radius-md);
	background: var(--nbf-color-surface);
	color: var(--nbf-color-text-2);
	font-weight: var(--nbf-fw-medium);
}

.nbf-city-all__page:hover {
	text-decoration: none;
	border-color: var(--nbf-color-primary-300);
	color: var(--nbf-color-primary-600);
}

.nbf-city-all__page.is-current {
	background: var(--nbf-color-primary-600);
	border-color: var(--nbf-color-primary-600);
	color: var(--nbf-color-text-inverse);
}

.nbf-city-all__more {
	text-align: center;
	margin-block-start: var(--nbf-space-4);
}

@media (max-width: 767px) {
	.nbf-city-intro__grid--with-media {
		grid-template-columns: 1fr;
	}

	/* All-activities stays a vertical grid on mobile (comparison list),
	 * unlike the horizontal home carousels. */
	.nbf-city-all__grid {
		display: grid;
		grid-auto-flow: row;
		grid-template-columns: 1fr;
		overflow: visible;
	}
}

/* ------------------------------------------------------------------
 * Search results page
 * ---------------------------------------------------------------- */
.nbf-search-page__head {
	padding-block: var(--nbf-space-6) var(--nbf-space-3);
}

.nbf-search-page__head h1 {
	margin-block-end: var(--nbf-space-1);
}

.nbf-search-page__filters {
	margin-block-end: var(--nbf-space-5);
}

.nbf-search-page__filters-toggle {
	list-style: none;
	display: none; /* desktop: filters always visible */
	margin-block-end: var(--nbf-space-3);
}

.nbf-search-page__filters-toggle::-webkit-details-marker {
	display: none;
}

.nbf-search-page__form {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: var(--nbf-space-3);
	align-items: end;
	padding: var(--nbf-space-4);
}

.nbf-search-page__form .nbf-field {
	margin: 0;
}

.nbf-search-page__checks {
	display: flex;
	flex-wrap: wrap;
	gap: var(--nbf-space-4);
	grid-column: 1 / -1;
}

.nbf-search-page__submit {
	grid-column: 1 / -1;
	display: flex;
	gap: var(--nbf-space-3);
}

.nbf-search-page__grid {
	margin-block-end: var(--nbf-space-5);
}

.nbf-search-page__empty {
	max-inline-size: 28rem;
	margin-inline: auto;
	margin-block: var(--nbf-space-10);
	padding: var(--nbf-space-8);
	text-align: center;
	display: grid;
	justify-items: center;
	gap: var(--nbf-space-2);
	color: var(--nbf-color-primary-300);
}

.nbf-search-page__empty h2 {
	color: var(--nbf-color-text);
	margin: 0;
}

@media (max-width: 767px) {
	/* Mobile: filters collapse behind a disclosure (JS closes it;
	 * without JS everything stays visible). */
	.nbf-search-page__filters-toggle {
		display: block;
		cursor: pointer;
	}

	.nbf-search-page__filters-toggle:focus-visible {
		outline: 2px solid var(--nbf-color-focus-ring);
		outline-offset: 2px;
	}

	.nbf-search-page__form {
		grid-template-columns: 1fr;
	}

	/* Results stay a vertical list for comparison. */
	.nbf-search-page__grid {
		display: grid;
		grid-auto-flow: row;
		grid-template-columns: 1fr;
		overflow: visible;
	}
}