/**
 * Concierge listings — Bairro Alto Hotel
 *
 * Depends on concierge-base.css, which brings the shared tokens and
 * components (.exp-shell, .exp-btn, .exp-eyebrow, .exp-h2, .exp-list).
 */

/* ---------------------------------------------------------------
 * Breadcrumbs and hero
 * ------------------------------------------------------------- */

.arc-crumbbar {
	background: var(--bah-paper);
	padding-block: 24px;
}

@media (max-width: 768px) {
	.arc-crumbbar {
		padding-block: 12px;
	}
}

.arc-crumbs ol {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--bah-soft);
}

.arc-crumbs li {
	color: var(--bah-soft);
}

.arc-crumbs li:last-child {
	color: var(--bah-ink);
}

.arc-crumbs li + li::before {
	content: "/";
	margin-right: 8px;
	color: var(--bah-soft);
}

.arc-crumbs a {
	color: inherit;
	text-decoration: none;
}

.arc-crumbs a:hover {
	color: var(--bah-accent);
}

.arc-hero {
	position: relative;
	padding: 40px 0 32px;
}

.arc-hero--image {
	min-height: 642px;
	padding: 96px 0 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: #FFFFFF;
}

.arc-hero__media {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.arc-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.arc-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(36, 25, 22, 0.15) 0%, rgba(36, 25, 22, 0.72) 100%);
}

.arc-hero__frame {
	position: absolute;
	inset: 32px;
	border: 1px solid rgba(216, 198, 176, 0.7);
	pointer-events: none;
}

.arc-hero__inner {
	position: relative;
}

.arc-hero--image .arc-hero__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}

.arc-hero__title {
	margin: 0;
	font-family: var(--bah-display);
	font-size: clamp(38px, calc(28.76px + 2.368vw), 64px);
	font-weight: 500;
	line-height: 1.05;
	letter-spacing: -0.77px;
	color: var(--bah-ink);
}

.arc-hero--image .exp-eyebrow {
	color: rgba(255, 255, 255, 0.82);
}

.arc-hero--image .arc-hero__title {
	font-size: clamp(44px, calc(29.79px + 3.643vw), 84px);
	line-height: 0.96;
	letter-spacing: -1.008px;
	text-transform: uppercase;
	color: #FFFFFF;
}

/* Sizing/color are shared (concierge-base.css); only the margin differs here. */
.arc-hero__divider {
	margin: 16px auto 32px auto;
}

.arc-intro {
	background-color: var(--bah-dark);
	background-image: url("/wp-content/uploads/2026/07/bg-dark.png");
	background-repeat: no-repeat;
	background-position: left 50% top 0;
	background-size: cover;
	padding-block: 64px;
	text-align: center;
}

.arc-intro p {
	margin: 0 auto;
	max-width: 720px;
	font-size: 18px;
	line-height: 1.667;
	color: var(--bah-soft);
}

@media (max-width: 768px) {
	.arc-intro p {
		font-size: 16px;
	}
}

/* ---------------------------------------------------------------
 * Category hub (Comer e Beber / Experiências) — one wide block per
 * taxonomy category, alternating image/text, instead of a grid.
 * ------------------------------------------------------------- */

.arc-hub {
	overflow: hidden;
}

.arc-hubrow {
	display: flex;
	flex-wrap: wrap;
	background: var(--bah-paper);
}

.arc-hubrow__text {
	order: 1;
	max-height: calc(100dvh - 84px);
	min-height: fit-content;
	padding: 48px 32px;
	flex: 1 1 50%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: var(--bah-body);
}

.arc-hubrow__text-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	max-width: 582px;
	margin: 0 auto;
}

.arc-hubrow__media {
	order: 2;
	aspect-ratio: 1 / 1;
	flex: 1 1 50%;
	min-height: 280px;
	background: linear-gradient(155deg, #4a3a32, #241916);
	overflow: hidden;
}

@media (min-width: 999px) {
	.arc-hubrow__text {
		aspect-ratio: 1 / 1;
	}
}

@media (max-width: 1000px) {
	.arc-hubrow {
		flex-direction: column;
	}

	.arc-hubrow.arc-hubrow--reverse .arc-hubrow__text,
	.arc-hubrow .arc-hubrow__text {
		order: 1;
	}

	.arc-hubrow.arc-hubrow--reverse .arc-hubrow__media,
	.arc-hubrow .arc-hubrow__media {
		order: 2;
	}
}

.arc-hubrow--reverse .arc-hubrow__text {
	order: 2;
}

.arc-hubrow--reverse .arc-hubrow__media {
	order: 1;
}

.arc-hubrow__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.arc-hubrow__eyebrow {
	margin: 0 0 12px;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 1.15px;
	text-transform: uppercase;
	color: var(--bah-soft);
}

.arc-hubrow__title {
	margin: 0 0 16px;
	font-family: var(--bah-display);
	font-size: clamp(32px, calc(26.32px + 1.457vw), 48px);
	font-weight: 500;
	line-height: 1.2;
	color: var(--bah-body);
}

/* Sizing/color are shared (concierge-base.css); only the margin differs here. */
.arc-hubrow__divider {
	margin: 0 0 20px;
}

.arc-hubrow__desc {
	margin: 0 0 24px;
	max-width: 48ch;
	font-size: 18px;
	line-height: 1.556;
	color: var(--bah-body);
}

/* Base + the ::after double-border trick are shared with .exp-btn.exp-btn--outline
   and .bah-catslide__btn in concierge-base.css; only the padding/hover
   colors specific to this context are declared here. */
.arc-hubrow__btn {
	padding: 12px 24px;
	transition: 200ms all ease;
}

.arc-hubrow__btn:hover {
	background-color: var(--bah-muted) !important;
	border-color: var(--bah-muted) !important;
	color: var(--bah-paper);
	padding: 12px 32px !important;
}

.arc-hubrow__btn:hover::after {
	border-color: var(--bah-muted) !important;
	color: var(--bah-muted) !important;
}

/* ---------------------------------------------------------------
 * Sort bar and filters
 * ------------------------------------------------------------- */

.arc-toolbar {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 16px 24px;
	padding-block: 24px;
	border-block: 1px solid var(--bah-rule);
}

.arc-toolbar__count {
	font-size: 13px;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	color: var(--bah-soft);
}

.arc-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.arc-chip {
	display: inline-block;
	padding: 8px 14px;
	border: 1px solid var(--bah-border);
	border-radius: var(--bah-radius);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--bah-body);
	background: transparent;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.arc-chip:hover {
	background: var(--bah-surface);
}

.arc-chip.is-active {
	background: var(--bah-dark);
	border-color: var(--bah-dark);
	color: var(--bah-on-dark);
}

.arc-sort {
	display: flex;
	align-items: center;
	gap: 12px;
}

.arc-sort__label {
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--bah-ink);
	white-space: nowrap;
	margin: 0;
}

.arc-sort__select {
	min-width: 142px;
	height: 45px;
	padding: 0 34px 0 16px;
	background-color: var(--bah-surface);
	border: 1px solid var(--bah-border);
	border-radius: var(--bah-radius);
	font-family: var(--bah-sans);
	font-size: 14px;
	font-weight: 400;
	color: var(--bah-ink);
	cursor: pointer;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_206_5839)'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23281E1D' stroke-width='1.1' stroke-linecap='square'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_206_5839'%3E%3Crect width='10' height='6' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
	background-position: right 16px center;
	background-size: 10px 6px;
	background-repeat: no-repeat;
	transition: border-color 0.2s ease;
}

.arc-sort__select:hover {
	border-color: var(--bah-accent);
}

/* ---------------------------------------------------------------
 * Grid, carousel and cards
 *
 * The grid (.arc-grid) is a category's main listing — static, responsive,
 * no pagination (more items just add rows). The carousel (.arc-carousel)
 * is only for curation ("Os mais populares"), when it has more items than
 * fit on one row.
 * ------------------------------------------------------------- */

.arc-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
}

@media (max-width: 1200px) {
	.arc-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 1488px) {
	.arc-grid {
		gap: 24px;
	}
}

/*
 * Vertical breathing room only on the archive/category page's main grid
 * (`template-parts/archive-default.php`, e.g. `/experiencias/enoturismo/`)
 * — `main.arc` is that template's unique marker (`<main class="exp arc">`).
 * `>` (direct child) combinators all the way to `.arc-grid`, not just
 * `main.arc .arc-grid`: the curation section (`.arc-curated`,
 * template-parts/section-curated.php) can also have an `.arc-grid` (the
 * `.arc-grid--center` variant, when the carousel doesn't end up kicking in)
 * *and* lives inside that same `main.arc` — but one level deeper, inside
 * `<section class="arc-curated">`, so the direct-child chain doesn't match
 * it and that grid is left out, with no need for `:not()`.
 */
main.arc > .exp-shell.ct-container > .arc-grid {
	padding-block: 96px;
}

@media (max-width: 768px) {
	main.arc > .exp-shell.ct-container > .arc-grid {
		padding-block: 64px;
	}
}

.arc-grid[data-columns="4"] {
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}

@media (max-width: 1100px) {
	.arc-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.arc-grid[data-columns="4"] {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 768px) {
	.arc-grid,
	.arc-grid[data-columns="4"] {
		grid-template-columns: 1fr;
	}
}

/*
 * `.arc-grid--center` — the fallback grid variant of the
 * grid-becomes-carousel mechanism (bah_shortcode_curated_stores,
 * bah_shortcode_boutique_products, section-curated.php, home-spotlight.php):
 * with fewer items than columns, `1fr` still takes up the whole row and the
 * cards end up sitting flush left. Switches to flexbox so each card only
 * takes up the width it would have in a grid column and the set stays
 * centered.
 */
.arc-grid--center {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.arc-grid--center > * {
	flex: 0 1 calc((100% - 64px) / 3);
}

@media (max-width: 1100px) {
	.arc-grid--center > * {
		flex: 0 1 calc((100% - 32px) / 2);
	}
}

@media (max-width: 700px) {
	.arc-grid--center > * {
		flex: 0 1 100%;
	}
}

/*
 * `width: 100%` isn't decorative: `.arc-carousel` always lives inside
 * `.exp-shell` (display:flex; flex-direction:column), and a flex child
 * with no width of its own is subject to the content's "automatic
 * minimum size" — here, the `.swiper-wrapper` inside it, which Swiper
 * measures and widens to fit every slide side by side. Without this,
 * `.arc-carousel` would grow to that wrapper's width (confirmed by
 * testing: 4200px+ in a 1920px window) instead of staying capped at
 * `.exp-shell`'s 1488px, and each slide ended up huge, without end.
 */
.arc-carousel {
	width: 100%;
	overflow: hidden;
}

.arc-carousel .swiper-wrapper {
	align-items: stretch;
}

.arc-carousel .swiper-slide {
	width: 475px;
	height: auto;
}

.arc-carousel .swiper-slide .arc-card {
	height: 100%;
}

/*
 * `.arc-carousel--responsive` (section-curated.php, "Os mais populares"
 * with 3 items or fewer): below 1000px it's the same as any other
 * `.arc-carousel` (a slider, see initArchiveCarousels() in concierge.js,
 * which only instantiates Swiper at this width for this variant). Above
 * that, Swiper doesn't even come to exist, and this rule makes the
 * `.swiper-wrapper`/`.swiper-slide` look like `.arc-grid--center`
 * (centered grid, no pagination or arrows) instead of the fixed-width
 * (475px/slide) carousel of rows with more than 3 items.
 */
@media (min-width: 1000.02px) {
	.arc-carousel--responsive {
		padding-top: 0;
		overflow: visible;
	}

	.arc-carousel--responsive .swiper-wrapper {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 32px;
	}

	.arc-carousel--responsive .swiper-slide {
		width: auto;
		flex: 0 1 calc((100% - 64px) / 3);
	}

	.arc-carousel--responsive ~ .arc-carousel__nav {
		display: none;
	}
}

/*
 * `.arc-carousel--categories` ("Categorias em destaque", 354×480 —
 * section-categories.php/bah_shortcode_boutique_categories()) and
 * `.arc-carousel--voices` ("O que dizem os nossos hóspedes" —
 * single-experience.php, `.exp-voices__grid`): proportional cards
 * (aspect-ratio/intrinsic height), not the rest of `.arc-carousel`'s
 * fixed 475px width — that's why `width: auto` always applies, whether
 * Swiper is active (width comes from `slidesPerView` via JS) or not
 * (width comes from the `flex` below). Both variants share the exact
 * same layout mechanics, just with different card content.
 *
 * With more than 4 items it's always a carousel (initArchiveCarousels()
 * never turns Swiper off); with 4 or fewer (`--responsive`) it's a
 * centered grid (4 columns, or 2 below 1200px) down to 768px, the point
 * from which it also becomes a carousel — the same mechanism as
 * `.arc-carousel--responsive` above, just with its own breakpoint
 * (768px, not 1000px) and 4 columns instead of 3.
 */
.arc-carousel--categories .swiper-slide,
.arc-carousel--voices .swiper-slide {
	width: auto;
}

@media (min-width: 768.02px) {
	.arc-carousel--categories.arc-carousel--responsive,
	.arc-carousel--voices.arc-carousel--responsive {
		padding-top: 0;
		overflow: visible;
	}

	.arc-carousel--categories.arc-carousel--responsive .swiper-wrapper,
	.arc-carousel--voices.arc-carousel--responsive .swiper-wrapper {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 24px;
	}

	.arc-carousel--categories.arc-carousel--responsive .swiper-slide,
	.arc-carousel--voices.arc-carousel--responsive .swiper-slide {
		flex: 0 1 calc((100% - 72px) / 4);
	}

	.arc-carousel--categories.arc-carousel--responsive ~ .arc-carousel__nav,
	.arc-carousel--voices.arc-carousel--responsive ~ .arc-carousel__nav {
		display: none;
	}
}

@media (max-width: 1199.98px) and (min-width: 768.02px) {
	.arc-carousel--categories.arc-carousel--responsive .swiper-slide,
	.arc-carousel--voices.arc-carousel--responsive .swiper-slide {
		flex: 0 1 calc((100% - 24px) / 2);
	}
}

.arc-carousel__nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding-top: 32px;
}

/* "Ver Todos os Produtos" — bah_shortcode_boutique_products(), swaps the
   carousel above for the (until then hidden) `[data-boutique-all]` grid,
   see initBoutiqueViewAll() in concierge.js. Each of these three needs its
   own `[hidden]` rule: `display: grid/block/flex` above (Swiper's own CSS,
   in `.arc-carousel`'s case) are author-stylesheet rules, which — same
   specificity or not — always win over the browser's own
   `[hidden] { display: none }` from the user-agent stylesheet. */
.arc-grid[hidden],
.arc-carousel[hidden],
.arc-carousel__nav[hidden] {
	display: none;
}

.arc-viewall {
	margin: 32px 0 0;
	text-align: center;
}

/*
 * `justify-content: center`: Swiper marks this pagination with
 * `swiper-pagination-horizontal` (`width: 100%` in the library's own
 * CSS) — on desktop this goes unnoticed because `.arc-carousel__nav`
 * (space-between) forces it to shrink to fit next to the arrows, but on
 * mobile, with no arrows (see `.arc-carousel__arrows` below), it takes
 * up the whole row and, without this, the content would sit flush left
 * instead of centered.
 */
.arc-carousel__pagination {
	position: static !important;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
}

@media (min-width: 999px) {

	.arc-carousel__pagination {
		margin-left: 156px;
	}

}

/*
 * `.arc-carousel__pagination`, not `.arc-carousel`: the dashes live in
 * `.arc-carousel__nav`, a sibling of `.arc-carousel` (not a descendant
 * of it) — see the markup in section-curated.php/home-spotlight.php.
 * With `.arc-carousel .swiper-pagination-bullet` this rule never matched
 * anything, and Swiper's own default blue dot showed underneath.
 *
 * The rest of the design (size/color/counter) is shared with the site's
 * other Swiper paginations in concierge-base.css; only the margin reset
 * (Swiper sets inline margins on the bullets by default) is needed here.
 */
.arc-carousel__pagination .swiper-pagination-bullet {
	margin: 0 !important;
}

.arc-carousel__arrows {
	display: flex;
	gap: 12px;
	margin-left: auto;
}

.arc-carousel__arrow {
	width: 56px;
	height: 56px;
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	background: var(--bah-surface);
	border: 1px solid var(--bah-border);
	border-radius: 50%;
	box-shadow: 0 1px 4px rgba(40, 30, 29, 0.12);
	color: var(--bah-ink);
	font-size: 18px;
	cursor: pointer;
	transition: border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.arc-carousel__arrow svg {
	stroke-width: 1.5px;
}

.arc-carousel__arrow:hover {
	border-color: var(--bah-accent);
	color: var(--bah-accent);
	box-shadow: 0 2px 8px rgba(40, 30, 29, 0.18);
}

.arc-carousel__arrow.swiper-button-disabled {
	opacity: 0.35;
	cursor: default;
}

/*
 * Arrows only on desktop — below 1000px (the same breakpoint used in
 * the rest of the site to switch navigation to a drag gesture) only the
 * pagination (dashes + "01 / 04") stays, as in `.bah-catslider`. The
 * centering itself comes from `justify-content: center` on
 * `.arc-carousel__pagination` (above) — with no arrows beside it, the
 * pagination takes up the whole row, so it's the one that has to center
 * its own content, not `.arc-carousel__nav`.
 */
@media (max-width: 1000px) {
	.arc-carousel__arrows {
		display: none;
	}
}

.arc-card {
	display: flex;
	flex-direction: column;
	background: var(--bah-surface);
	border: 1px solid var(--bah-border);
	border-radius: var(--bah-radius);
	overflow: hidden;
	transition: 500ms all ease;
}

.arc-card:hover {
	transform: translateY(-2px);
	box-shadow:
		0px 2px 4px 0px rgba(0, 0, 0, 0.03),
		0px 4px 8px -1px rgba(0, 0, 0, 0.04),
		0px 10px 16px -2px rgba(0, 0, 0, 0.05),
		0px 20px 32px -4px rgba(0, 0, 0, 0.06),
		0px 40px 64px -8px rgba(0, 0, 0, 0.07);
}

/* "Exclusivo BAH" cards (venue, store, experience): the same background
   gets a film of the badge's color (--bah-badge at 30%), instead of
   plain white — see .arc-card__vip further below. */
.arc-card--exclusive {
	background: color-mix(in srgb, var(--bah-badge) 30%, var(--bah-surface));
}

.arc-card__media {
	position: relative;
	height: 280px;
	background: var(--bah-paper);
}

.arc-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.arc-card--product .arc-card__media {
	height: 240px;
}

.arc-card__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(36, 25, 22, 0) 55%, rgba(36, 25, 22, 0.35) 100%);
	pointer-events: none;
}

.arc-card__badge {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 1;
	margin: 0;
	padding: 6px 10px;
	background: rgba(248, 233, 218, 0.94);
	border: 1px solid var(--bah-border);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--bah-accent);
}

/* "Michelin" badge: same over-photo pill background as `.arc-card__badge`,
   mirrored to the top-right corner, with a pill (fully rounded) shape and
   a row of 3 star icons — filled from the right for however many stars
   the venue has earned, per `.arc-card__michelin-stars` further below. */
.arc-card__michelin {
	position: absolute;
	top: 24px;
	right: 24px;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 8px 12px;
	background: var(--bah-badge);
	border-radius: 6px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--bah-accent);
	border: 1px solid var(--bah-border);
}

/* Line and fill share the same accent color (#AA8866) — only the SHAPE
   differs between an earned and an unearned star, same as
   `.exp-feedback__stars` (concierge-base.css). */
.arc-card__michelin-stars {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	color: var(--bah-accent);
}

.arc-card__michelin-stars svg {
	flex: 0 0 auto;
	width: 12px;
	height: 12px;
}

.arc-card__badge--benefit {
	background: var(--bah-dark);
	border-color: var(--bah-dark);
	color: var(--bah-on-dark);
}

.arc-card__body {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	flex: 1;
	padding: 32px;
	text-align: center;
}

.arc-card__title {
	margin: 0;
	font-family: var(--bah-display);
	font-size: clamp(25px, calc(22.51px + 0.637vw), 32px);
	font-weight: 400;
	line-height: 1.15;
	color: var(--bah-ink);
}

.arc-card__title a {
	color: inherit;
	text-decoration: none;
}

.arc-card__title a:hover,
.arc-card__title a:focus-visible {
	color: var(--bah-accent);
}

.arc-card__meta {
	font-size: 16px;
	color: var(--bah-body);
}

.arc-card__chef {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--bah-accent);
}

/* Sizing/color are shared (concierge-base.css); only the margin differs here. */
.arc-card__divider {
	margin: 12px 0;
}

.arc-tags {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.arc-tags li {
	padding: 4px 8px;
	border: 1px solid var(--bah-border);
	border-radius: var(--bah-radius);
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--bah-soft);
}

/* Level/duration labels — only on experience cards (tours), when those
   fields are filled in. */
.arc-card__specs {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: -4px 0 4px;
}

.arc-card__spec {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 5px 12px;
	background: rgba(255, 255, 255, 0.9);
	border: 1px solid var(--bah-border);
	border-radius: var(--bah-radius);
}

.arc-card__spec svg {
	flex: none;
	width: 16px;
	height: 16px;
	color: var(--bah-soft);
}

.arc-card__speclabel {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--bah-soft);
}

.arc-card__specvalue {
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0.72px;
	color: var(--bah-ink);
}

.arc-card__text {
	font-size: 16px;
	line-height: 1.49;
	color: var(--bah-body);
}

.arc-card__price {
	font-size: 18px;
	font-weight: 700;
	color: var(--bah-ink);
}

.arc-card__note {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-size: 12px;
	letter-spacing: 1px;
	line-height: 1.2;
	color: var(--bah-body);
}

.arc-card__note .exp-note__icon {
	color: var(--bah-soft);
}

.arc-card__actions {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: auto;
	padding-top: 16px;
	width: 100%;
}

.arc-card__actions .exp-btn {
	flex: 1 1 180px;
	max-width: 200px;
	justify-content: center;
}

@media (max-width: 1448px) {
	.arc-card__body {
		padding: 24px;
		gap: 8px;
	}
}

/* ---------------------------------------------------------------
 * Final CTA ("Pedir ajuda ao concierge") — dark background, light text.
 * ------------------------------------------------------------- */

.exp-cta--dark {
	background: var(--bah-ink);
	border-top: 0;
	color: var(--bah-on-dark);
}

.exp-cta--dark .exp-eyebrow {
	color: var(--bah-soft);
}

.exp-cta--dark .exp-h2 {
	font-size: clamp(35px, calc(27.54px + 1.913vw), 56px);
	letter-spacing: -0.56px;
	text-transform: uppercase;
	color: #FFFFFF;
}

.exp-cta--dark .exp-cta__body {
	color: var(--bah-paper);
}

/*
 * Base + the `::after` double-border trick are shared with
 * `.bah-catslide__btn` in concierge-base.css; only the padding/hover
 * colors specific to this dark-CTA context are declared here.
 * `margin-top: 0`: `.exp-cta__body`'s own `gap: 24px` (concierge-base.css)
 * already spaces this button from the text above it — the shared rule's
 * `margin-top: 32px` (meant for contexts with no flex gap) would stack on
 * top of it.
 */
.exp-cta.exp-cta--dark .exp-btn.exp-btn--dark {
	margin-top: 0;
	padding: 12px 24px;
	transition: 200ms all ease;
	align-self: unset;
}

.exp-cta.exp-cta--dark .exp-btn.exp-btn--dark:hover {
	background-color: var(--bah-paper);
	border-color: var(--bah-paper);
	color: var(--bah-muted);
	padding: 12px 32px;
}

.exp-cta.exp-cta--dark .exp-btn.exp-btn--dark:hover::after {
	border-color: var(--bah-paper);
	color: var(--bah-paper);
}

/* ---------------------------------------------------------------
 * Curation, categories, pagination, empty state
 * ------------------------------------------------------------- */

.arc-curated {
	padding-block: 96px;
	border-top: 1px solid var(--bah-rule);
	background-color: #FFFFFF;
}

.arc-curated .arc-grid {
	padding-block: 0;
}

.arc-categories {
	padding-block: 96px;
	border-top: 1px solid var(--bah-rule);
}

@media (max-width: 768px) {
	.arc-curated {
		padding-block: 64px;
	}

	.arc-categories {
		padding-block: 64px;
	}
}

/*
 * `.arc-categories__grid` always lives inside `.arc-carousel--categories
 * .swiper` (see template-parts/section-categories.php and
 * bah_shortcode_boutique_categories()) — it's itself the
 * `.swiper-wrapper`, so `width: 100%` already comes from Swiper's own
 * CSS, and the rest of the layout (centered grid with 4 or fewer
 * categories / 2 columns below 1200px / carousel below 768px) comes
 * from the `.arc-carousel--categories` rules further below, alongside
 * the rest of the `.arc-carousel` component. `.exp-voices__grid`
 * (concierge-base.css, single-experience.php) works the exact same way,
 * just inside `.arc-carousel--voices` instead.
 */

.arc-category {
	position: relative;
	display: block;
	aspect-ratio: 354 / 480;
	border: 1px solid var(--bah-border);
	overflow: hidden;
	color: inherit;
	text-decoration: none;
	transition: 500ms all ease;
}

.arc-category:hover {
	transform: translateY(-2px);
    box-shadow: rgba(0, 0, 0, 0.03) 0px 2px 4px 0px, rgba(0, 0, 0, 0.04) 0px 4px 8px -1px, rgba(0, 0, 0, 0.05) 0px 10px 16px -2px, rgba(0, 0, 0, 0.06) 0px 20px 32px -4px, rgba(0, 0, 0, 0.07) 0px 40px 64px -8px;
}

.arc-category__media {
	position: absolute;
	inset: 0;
}

.arc-category__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.arc-category__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(28, 21, 19, 0.1) 0%, rgba(28, 21, 19, 0.6) 60%, rgba(28, 21, 19, 0.92) 100%);
}

.arc-category__body {
	position: absolute;
	inset: auto 0 0 0;
	display: flex;
	flex-direction: column;
	gap: 11px;
	padding: 0 28px 32px;
}

.arc-category__title {
	margin: 0;
	font-family: var(--bah-display);
	font-size: clamp(23px, calc(21.22px + 0.455vw), 28px);
	font-weight: 400;
	line-height: 1.125;
	color: #FFFFFF;
}

.arc-category__text {
	font-size: 16px;
	line-height: 1.4;
	color: #FFFFFF;
}

/*
 * Same style/hover as `.home-wellness__itemlink` (concierge-home.css) —
 * `align-self: flex-start` for the same reason as there:
 * `.arc-category__body` is `display: flex; flex-direction: column` with
 * no `align-items` of its own, so a child of it stretches to the card's
 * full width by default without this. The text color is white (not the
 * `#6C635B` from there) to stay legible over the card's dark photo/
 * gradient — the stroke's color was already `--bah-soft` in both
 * states, so that part is copied over as-is.
 */
.arc-category__link {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: 6px;
	padding: 6px 0;
	border-top: 1px solid transparent;
	border-bottom: 1px solid var(--bah-soft);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.83px;
	text-transform: uppercase;
	text-decoration: none;
	color: #FFFFFF;
	transition: 200ms all ease;
}

.arc-category__link:hover {
	border-top: 1px solid #ad9f8c;
	border-bottom: 1px solid #ad9f8c;
	padding: 6px 4px;
}

.arc-category__link svg {
	width: 12px;
	height: 12px;
	color: inherit;
}

.arc-category:hover .arc-category__link {
	border-top: 1px solid #ad9f8c;
	border-bottom: 1px solid #ad9f8c;
	padding: 6px 4px;
}

.arc-empty {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	padding-block: 72px;
	color: var(--bah-muted);
}

/* ---------------------------------------------------------------
 * Wellness
 *
 * `.wel-row` (Dentro do Hotel / Fora do Hotel) and `.wel-fitness` (Fitness
 * Centre, when the service has a Gallery) always live outside
 * `.exp-shell`/`.ct-container` — like `.arc-hero` — so they can stretch
 * the image/carousel edge to edge (100% of the window), as in Figma.
 * ------------------------------------------------------------- */

.wel-group {
	border-top: 1px solid var(--bah-rule);
}

.wel-group .exp-sectionhead {
	padding-block: 56px;
}

.wel-rows {
	display: flex;
	flex-direction: column;
}

.wel-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: stretch;
	border-top: 1px solid var(--bah-rule);
}

.wel-rows > .wel-row:first-child {
	border-top: none;
}

.wel-row:nth-child(even) .wel-row__media {
	order: 2;
}

.wel-row__media {
	max-height: 843px;
	height: 100%;
	background: var(--bah-paper);
}

.wel-row__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.wel-row__body {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	padding: 72px 64px;
	text-align: center;
}

.wel-row__body .exp-eyebrow,
.wel-fitness__head .exp-eyebrow {
	margin: 0 !important;
	font-size: 16px;
	font-weight: 400;
	letter-spacing: 1.15px;
	color: var(--bah-soft);
}

.wel-row__body .arc-tags,
.wel-fitness__head .arc-tags {
	justify-content: center;
}

.wel-row__title {
	margin: 0;
	font-family: var(--bah-display);
	font-size: clamp(32px, calc(26.32px + 1.457vw), 48px);
	font-weight: 500;
	line-height: 1.2;
	color: #333333;
}


.wel-row__text {
	max-width: 640px;
	font-size: 14px;
	line-height: 1.71;
	color: var(--bah-body);
}

.wel-row__list {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}

.wel-row__body .exp-list,
.wel-fitness__list .exp-list {
	align-items: center;
}

.wel-row__body .exp-list li,
.wel-fitness__list .exp-list li {
	font-size: 16px;
	line-height: 1.49;
	color: var(--bah-body);
}

.wel-row__listtitle {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 1.25px;
	text-transform: uppercase;
	color: var(--bah-ink);
}

.wel-row__specs {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin: 0;
}

.wel-row__specs > div {
	text-align: center;
}

.wel-row__specs dt {
	margin: 0 0 4px;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 1.25px;
	text-transform: uppercase;
	color: var(--bah-ink);
}

.wel-row__specs dd {
	margin: 0;
	font-size: 16px;
	line-height: 1.49;
	color: var(--bah-body);
}

.wel-row__body .wel-row__note,
.wel-fitness__head .wel-row__note {
	margin: 0;
	font-size: 12px;
	line-height: 1.2;
	color: var(--bah-body);
}

.wel-row__actions .exp-btn {
	padding: 12px 24px;
	border-width: 2px;
	border-color: var(--bah-soft);
	font-size: 17px;
	letter-spacing: 0.9px;
	color: var(--bah-soft);
	background: transparent;
}

.wel-row__actions .exp-btn:hover,
.wel-row__actions .exp-btn:focus-visible {
	background: var(--bah-soft);
	border-color: var(--bah-soft);
	color: var(--bah-surface);
}

/*
 * Fitness Centre — wide header (same fields as `.wel-row__body`,
 * centered, inside the normal `.exp-shell`) followed by the edge-to-edge
 * image carousel.
 */
.wel-fitness {
	border-top: 1px solid var(--bah-rule);
}

.wel-fitness__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	max-width: 900px;
	margin: 0 auto;
	padding: 96px 0 64px 0;
	text-align: center;
}

.wel-fitness__title {
	margin: 0;
	font-family: var(--bah-display);
	font-size: clamp(32px, calc(26.32px + 1.457vw), 48px);
	font-weight: 500;
	line-height: 1.2;
	text-transform: uppercase;
	color: #333333;
}


.wel-fitness__text {
	font-size: 18px;
	line-height: 1.6;
	color: var(--bah-body);
}

.wel-fitness__list {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}

.wel-fitness__gallery {
	padding-bottom: 48px;
}

.arc-carousel--peek {
	padding-top: 0;
	padding-bottom: 24px;
}

.arc-carousel--peek .swiper-wrapper {
	align-items: center;
}

.arc-carousel--peek .swiper-slide {
	width: 896px;
	max-width: 78vw;
	height: 540px;
}

.arc-carousel--peek .swiper-slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.wel-tips {
	padding-block: 72px;
	border-top: 1px solid var(--bah-rule);
}

.wel-tips__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.wel-tip {
	padding: 28px 24px;
	background: var(--bah-surface);
	border: 1px solid var(--bah-border);
	border-radius: var(--bah-radius);
}

.wel-tip__number {
	display: block;
	margin-bottom: 12px;
	font-family: var(--bah-display);
	font-size: clamp(23px, calc(21.22px + 0.455vw), 28px);
	color: var(--bah-soft);
}

.wel-tip__title {
	margin: 0 0 8px;
	font-size: 16px;
	font-weight: 700;
	color: var(--bah-ink);
}

.wel-tip__text {
	font-size: 15px;
	color: var(--bah-body);
}

/* ---------------------------------------------------------------
 * Responsive
 * ------------------------------------------------------------- */

@media (max-width: 900px) {
	.wel-row {
		grid-template-columns: 1fr;
	}

	.wel-row:nth-child(even) .wel-row__media {
		order: 0;
	}

	.wel-row__media {
		min-height: 0;
		aspect-ratio: 1 / 1;
	}

	.wel-row__body {
		padding: 40px 24px;
	}

	.wel-fitness__head {
		padding: 48px 24px 48px;
	}

	.arc-carousel--peek .swiper-slide {
		width: 100%;
		max-width: 100vw;
		height: auto;
		aspect-ratio: 1 / 1;
	}

	.arc-toolbar {
		flex-direction: column;
		align-items: stretch;
	}

	.arc-sort {
		margin-left: 0;
		justify-content: space-between;
	}

	.arc-hubrow__text {
		padding: 48px 64px;
	}
}

@media (max-width: 600px) {
	.wel-row__actions .exp-btn,
	.wel-fitness__head .wel-row__actions .exp-btn {
		font-size: 14px;
	}

	.arc-hero--image {
		min-height: 507px;
		padding: 72px 0 40px;
	}

	.arc-hero--image .arc-hero__title {
		line-height: 1.09;
	}

	.arc-hero__frame {
		inset: 20px;
	}

	.arc-card__media {
		height: 220px;
	}

	/* Hub category blocks — on mobile they stop alternating and always
	   stack text over image, with a light background/dark text. */
	.arc-hubrow,
	.arc-hubrow--reverse {
		display: block;
		min-height: 0;
		background: var(--bah-paper);
	}

	.arc-hubrow__text,
	.arc-hubrow--reverse .arc-hubrow__text {
		order: 0;
		padding: 48px 24px;
		color: var(--bah-ink);
	}

	.arc-hubrow__media,
	.arc-hubrow--reverse .arc-hubrow__media {
		order: 0;
		min-height: 260px;
	}

	.arc-hubrow__title {
		color: #333333;
	}

	.arc-hubrow__desc {
		color: var(--bah-body);
	}
}