/**
 * Dynamic blocks embedded in Pages in blocks — Concierge Bairro Alto Hotel
 *
 * The overall layout (hero, sections, category blocks) now lives in the
 * block editor (core blocks/Greenshift); this file only styles what the
 * [bah_spotlight], [bah_wellness_preview], [bah_weather], and
 * [bah_category_slider] shortcodes print. Tokens shared with
 * concierge-base.css. Prefix `.home-`/`.bah-catslid*`.
 */

/* ---------------------------------------------------------------
 * Category slider ([bah_category_slider] shortcode, Swiper)
 * ------------------------------------------------------------- */

.bah-catslider {
	position: relative;
	overflow: hidden;
}

.bah-catslide {
	display: flex;
	flex-wrap: wrap;
	min-height: 843px;
}

.bah-catslide__text {
	order: 1;
	/*
	 * `flex-shrink: 0` (instead of the shorthand `flex: 1 1 500px`'s default
	 * of 1) + `min-width: 0` (which replaces a flex item's automatic
	 * minimum, which by default is the content's size — without this, a
	 * long title would push this column past 500px) is what makes the line
	 * break below deterministic, instead of depending on each category's
	 * text: this column is never bigger nor smaller than 500px, so the two
	 * columns (1000px) only wrap exactly below 1000px of container width —
	 * the same value used in the `@media` further below to hide the arrows
	 * and restore the pagination to a static row, so the two never fall out
	 * of sync. `max-width: 100%` is what lets this column shrink again once
	 * it's already wrapped onto its own row: without this, on screens
	 * narrower than 500px (regular phones), `flex-shrink: 0` would keep it
	 * from getting narrower than 500px, overflowing outside the slide (cut
	 * off by `.bah-catslider`'s `overflow: hidden`).
	 */
	flex: 1 0 50%;
	min-width: 0;
	max-width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 56px 32px;
	color: var(--bah-on-dark);
	background-color: #1C1513;
}

/*
 * The text lives inside this `max-width` instead of the spacing coming
 * from `.bah-catslide__text`'s padding (which would only have to grow/
 * shrink depending on the panel's width, squeezing the text at
 * intermediate resolutions, near the breakpoint) — this way the text never
 * exceeds a comfortable reading width on wide panels, nor gets squeezed on
 * narrow ones, and `.bah-catslide__text`'s padding (above) stays free just
 * to give breathing room to the navigation arrows, which sit flush against
 * the panel's margins.
 */
.bah-catslide__text-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	max-width: 582px;
}

.bah-catslide__media {
	order: 2;
	aspect-ratio: 1 / 1;
	flex: 1 0 50%;
	background: linear-gradient(155deg, #4a3a32, #241916);
	overflow: hidden;
}

/* Reversed rows (e.g. "Comer e Beber") — image on the left, text on the right */
.bah-catslider--reverse .bah-catslide__text {
	order: 2;
}

.bah-catslider--reverse .bah-catslide__media {
	order: 1;
}

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

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

.bah-catslide__title {
	margin: 0 0 16px;
	font-family: var(--bah-display);
	font-size: clamp(38px, calc(28.76px + 2.368vw), 64px);
	font-weight: 500;
	line-height: 1.2;
	color: #F9F9F9;
}

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

.bah-catslide__desc {
	margin: 0 0 24px;
	font-size: 18px;
	line-height: 28px;
	color: #D3D3D3;
}

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

.bah-catslide__btn:hover {
	background-color: var(--bah-paper);
	border-color: var(--bah-paper);
	color: var(--bah-muted);
	padding: 8px 32px;
}

.bah-catslide__btn:hover::after {
	border-color: var(--bah-paper);
	color: var(--bah-paper);
}

/* Nav + pagination float over the text column's own half of the slide,
   like the source design — not in a separate control bar below it. */
.bah-catslider__nav {
	position: absolute;
	z-index: 2;
	top: 50%;
	left: 0;
	width: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 32px;
	pointer-events: none;
}

.bah-catslider--reverse .bah-catslider__nav {
	left: 50%;
}

.bah-catslider__nav > * {
	pointer-events: auto;
}

.bah-catslider__arrow {
	width: 56px;
	height: 56px;
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	background: transparent;
	border: 1px solid var(--bah-on-dark);
	border-radius: 50%;
	color: var(--bah-on-dark);
	font-size: 16px;
	cursor: pointer;
}

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

/*
 * Pagination: on `.swiper-pagination` (initCategorySliders()'s
 * `renderCustom`, in concierge.js, generates two direct children here —
 * `.bah-catslider__counter` ["02 / 05"] and `.bah-catslider__dots` [the
 * dashes] — instead of Swiper's native dots, to include the counter that
 * was missing, in the same Penpot design).
 */
.bah-catslider .swiper-pagination {
	position: absolute;
	z-index: 2;
	bottom: 32px;
	left: 0;
	width: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
}

.bah-catslider--reverse .swiper-pagination {
	left: 50%;
}

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

@media (max-width: 1000px) {
	.bah-catslide__text {
		flex: 1 0 100%;
	}

	.bah-catslide__media {
		flex: 1 0 100%;
	}

	.bah-catslide__desc {
		font-size: 16px;
    	line-height: 1.6;
	}
}

/*
 * 1000px = exactly where `.bah-catslide__text`/`__media` (500px each,
 * shrink:0, above) switch from side-by-side to stacked — that's why this
 * is also where the pagination drops the absolute overlay (which only
 * makes sense floating over half the row) and becomes a static bar, and
 * where the arrows disappear (Penpot's mobile design doesn't have them;
 * only the dashes + counter stay, navigation is by drag gesture).
 */
@media (max-width: 1000px) {
	.bah-catslide {
		min-height: 0;
	}

	/*
	 * On mobile the image always comes first, text after — unlike desktop,
	 * where `--reverse` decides which side each one lands on. For the
	 * `--reverse` variant this matches the order it already had (`.text`
	 * at 2, `.media` at 1), so only the normal variant actually needs to
	 * change here.
	 */
	.bah-catslide__text {
		order: 2;
		padding: 32px 24px;
	}

	.bah-catslide__media {
		order: 1;
	}

	.bah-catslider__nav {
		display: none;
	}

	.bah-catslider .swiper-pagination,
	.bah-catslider--reverse .swiper-pagination {
		position: static;
		width: auto;
		left: auto;
		padding-bottom: 24px;
		background: #1C1513;
	}
}

/* ---------------------------------------------------------------
 * Weather widget ([bah_weather] shortcode)
 * ------------------------------------------------------------- */

.home-hero__weather {
	display: inline-flex;
	align-items: baseline;
	gap: 10px;
	padding: 10px 18px;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(216, 198, 176, 0.3);
	border-radius: 999px;
	font-size: 13px;
	font-family: var(--bah-sans);
	color: var(--bah-on-dark);
}

.home-hero__weatherlabel {
	margin: 0;
	font-weight: 700;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: var(--bah-soft);
}

.home-hero__weathervalue {
	margin: 0;
	font-weight: 600;
}

.home-hero__weatherdate {
	margin: 0;
	color: var(--bah-soft);
}

/* ---------------------------------------------------------------
 * Agora em Lisboa ([bah_spotlight] shortcode)
 *
 * The card and carousel are the same .arc-card/.arc-carousel/.arc-grid
 * from concierge-archives.css (shared with the listing pages and the
 * "Curadoria do Concierge" — see template-parts/section-curated.php).
 * ------------------------------------------------------------- */

.home-spotlight .arc-carousel {
	padding-top: 0;
}

/* ---------------------------------------------------------------
 * Wellness preview ([bah_wellness_preview] shortcode)
 * ------------------------------------------------------------- */

.home-wellness__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 48px;
}

.home-wellness__item {
	display: flex;
	align-items: center;
	gap: 32px;
	text-decoration: none;
	color: inherit;
}

.home-wellness__thumb {
	position: relative;
	flex: none;
	width: 216px;
	height: 216px;
	overflow: hidden;
	background: linear-gradient(155deg, var(--bah-badge), var(--bah-border));
	border-radius: var(--bah-radius);
}

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

.home-wellness__itembody {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.home-wellness__itemtitle {
	font-family: var(--bah-display);
	font-size: clamp(26px, calc(23.16px + 0.729vw), 34px);
	line-height: 1.18;
	font-weight: 400;
	color: var(--bah-ink);
}

.home-wellness__itemtext {
	font-size: 18px;
	color: var(--bah-body);
}

/*
 * Measured directly from the Figma/Penpot file ("Bem-Estar" > homepage
 * grid item): the link's "box" measures 114×36px around the text + arrow,
 * but only the base is visible as a stroke — hence `align-self: flex-start`
 * (so it doesn't stretch to the full width of the text column, which is
 * the default behavior of a child of `.home-wellness__itembody`, which is
 * `display: flex; flex-direction: column`) and `border-bottom` instead of
 * a `border` all around.
 */

.home-wellness__itemlink {
	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;
	color: #6C635B;
	transition: 200ms all ease;
}

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

.home-wellness__itemlink svg {
	width: 12px;
	height: 12px;
	color: inherit;
}

.home-wellness__item:hover  .home-wellness__itemlink {
	border-top: 1px solid #ad9f8c;
	border-bottom: 1px solid #ad9f8c;
	padding: 6px 4px;
}

/*
 * Swiper is always loaded (see $needs_swiper in concierge-setup.php), but
 * only kicks in on mobile — on wide screens `.swiper-wrapper` stays
 * `.home-wellness__grid` (static grid, see above) because Swiper never
 * actually gets instantiated with side-by-side slides at that width
 * (initWellnessCarousel(), in concierge.js, turns it off above 1180px via
 * `breakpoints: { 1181: { enabled: false } }`); only from 1180px down does
 * the rule below swap the grid for a flex row, which is what Swiper needs
 * to position the slides horizontally.
 */
.home-wellness__pagination {
	display: none;
}

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

@media (max-width: 1000px) {
	.home-wellness__grid {
		display: flex;
		gap: 0;
	}

	.home-wellness__item {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.home-wellness__itembody {
		align-items: center;
	}

	.home-wellness__itemlink {
		align-self: center;
	}

	/*
	 * Dash pagination + "01 / 05" counter — the same format as
	 * `.bah-catslider`/`.arc-carousel__pagination`, but in light tones
	 * (--bah-border/--bah-ink instead of --bah-on-dark/#F9F9F9, because
	 * this section sits on a light background, not dark). Dash sizing
	 * taken from the "Bem-Estar" > Mobile design in Penpot.
	 */
	.home-wellness__pagination {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 18px;
		margin-top: 48px;
	}

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