/**
 * Pages in blocks — Concierge Bairro Alto Hotel
 *
 * Generic style for the block editor's content (core blocks) used on any
 * Page, including the homepage. `.exp p { margin: 0 }` (concierge-base.css)
 * is meant for the tech-sheet components, not for running prose — that's
 * why `.page-content` restores the normal spacing.
 */

.page-content > *:first-child {
	margin-top: 0;
}

/* ---------------------------------------------------------------
 * Core blocks — adapted to the brand's tokens
 * ------------------------------------------------------------- */

.page-content .wp-block-heading {
	font-family: var(--bah-display);
	font-weight: 500;
	color: var(--bah-ink);
	line-height: 1.15;
}

.page-content h2.wp-block-heading {
	font-size: clamp(28px, calc(23.74px + 1.093vw), 40px);
}

.page-content h3.wp-block-heading {
	font-size: clamp(20px, calc(18.58px + 0.364vw), 24px);
}

.page-content .wp-block-button__link {
	padding: 14px 28px;
	border-radius: var(--bah-radius);
	font-family: var(--bah-sans);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	text-decoration: none;
}

.page-content .wp-block-button:not(.is-style-outline) .wp-block-button__link {
	background-color: var(--bah-dark);
	color: var(--bah-on-dark);
}

.page-content .wp-block-button.is-style-outline .wp-block-button__link {
	border: 1px solid var(--bah-soft);
	color: var(--bah-ink);
}

.page-content .wp-block-group {
	padding: 72px 24px;
}

.page-content > .wp-block-group.alignfull {
	padding-inline: max(24px, calc((100% - var(--bah-shell)) / 2));
}

.page-content .wp-block-cover {
	min-height: 70vh;
}

.page-content .wp-block-cover__inner-container {
	max-width: var(--bah-shell);
	margin-inline: auto;
	padding-inline: 24px;
}

.page-content .wp-block-cover .wp-block-heading,
.page-content .wp-block-cover p {
	color: inherit;
}

.page-content .wp-block-columns {
	gap: var(--bah-gap);
}

/* Shortcode block: ensures the dynamic grid takes up the full width, even
   when the rest of the page is constrained to a single text column. */
.page-content .wp-block-shortcode {
	display: block;
}

@media (max-width: 782px) {
	.page-content .wp-block-group {
		padding: 48px 20px;
	}
}

/* ---------------------------------------------------------------
 * "Boas Práticas para Dormir Melhor" slider (.tips-mobile-slider,
 * the Wellness page) — a GreenShift block, not a theme PHP template.
 *
 * Above 1000px it's GreenShift's own 5-column grid (CSS saved inline per
 * post). Below 1000px GreenShift already stacks each card at 100% width
 * (`.gspb_row__col--24`); here that vertical stacking is swapped for a
 * horizontal Swiper, one card at a time — the same visual system as the
 * "Fora do Hotel" carousel (.home-wellness__carousel/.bah-catslider) — see
 * initTipsSlider() in concierge.js and the "Bem-Estar" > Mobile design in
 * Penpot.
 *
 * `!important` on `flex-wrap`: GreenShift saves that value with an #id
 * selector, more specific than any class here — the same issue documented
 * on the `.bah-fluid-*` classes in concierge-base.css.
 *
 * `width: 100%` on `.tips-mobile-slider` itself: this block's parent is a
 * flex column with `align-items: center` (heading + intro + this block,
 * all centered), which by default doesn't stretch children on the
 * cross-axis — without this, Swiper measures the slide's width from the
 * content's "shrink-to-fit" (the sum of the 5 cards, much wider than the
 * screen) instead of the actual available width, and each slide came out
 * cropped.
 *
 * `max-width: 280px` + `centeredSlides`/`spaceBetween: 24` (JS): the
 * active card sits centered with its neighbors peeking in from the
 * sides — the same pattern as `.arc-carousel--peek`
 * (initArchiveCarousels(), in concierge.js). That's why Swiper uses
 * `slidesPerView: 'auto'` here instead of `1`: only that way does it
 * respect each slide's CSS-declared width instead of stretching it to the
 * container's width.
 *
 * No `autoHeight`: the 5 cards have text of different lengths, but unlike
 * `.home-wellness__carousel`, here we don't want switching slides to push
 * the rest of the page down — so `autoHeight: true` (which adjusts the
 * height to the active card on every switch) is NOT used. Without that
 * option, the `.swiper-wrapper`'s flexbox default `align-items: stretch`
 * already makes all 5 `.swiper-slide` match the tallest one's height (the
 * same goal as `lockMobileHeight()` in initCategorySliders(), just that
 * there it has to be done by hand because of `loop: true`; here
 * `loop: false`, so flexbox alone is enough).
 *
 * "01 / 05" counter + dashes: the same custom pagination as
 * `[bah_category_slider]` (`renderCustom()` in initTipsSlider(), the same
 * format as initCategorySliders() in concierge.js).
 * ------------------------------------------------------------- */

.tips-mobile-slider__pagination {
	display: none;
}

.tips-mobile-slider {
	overflow: visible !important;
}

@media (max-width: 1000px) {
	.tips-mobile-slider {
		width: 100%;
	}

	.tips-mobile-slider .gspb_row__content {
		flex-wrap: nowrap !important;
	}

	.tips-mobile-slider .gspb_row__col--24 {
		flex-shrink: 0;
		max-width: 280px;
	}

	.tips-mobile-slider__pagination {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 18px;
		margin-top: 12px;
	}

	/* Dash/counter sizing and colors are shared with the other Swiper
	   carousels' pagination in concierge-base.css. */
}