/** Exposé (single immobilie): one layout for every site; colours, radii and fonts come from theme.json, this file only places. */

.fyh-expose {
	--fyh-expose-column: 52rem;
	--fyh-expose-gallery-height: clamp( 26rem, 76vh, 46rem );
	--fyh-expose-wide: 64rem;
	--fyh-expose-gap: clamp( 3.5rem, 7vw, 5.5rem );
	--fyh-expose-edge: var(--wp--custom--layout--gutter, clamp( 1.25rem, 5vw, 6rem ));
	margin-block-start: 0 !important;
	padding-bottom: var(--fyh-expose-gap);
}
.fyh-expose > * { max-width: none !important; }

/* --- Gallery: from the top edge, under the overlay navigation ------------------------------ */
.fyh-expose > .fyh-carousel,
.fyh-expose > .fyh-carousel + .sgui-shadcn:where(:has( > .sgui-gallery)) { margin: 0 !important; padding: 0 !important; }
.fyh-expose > :where(.fyh-carousel + .sgui-shadcn:where(:has( > .sgui-gallery))) .sgui-gallery { position: relative; margin: 0; }
.fyh-expose > :where(.fyh-carousel + .sgui-shadcn:where(:has( > .sgui-gallery))) .sgui-gallery::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	z-index: 2;
	height: clamp( 7.5rem, 18vh, 11rem );
	background: linear-gradient( to bottom, color-mix( in srgb, var(--wp--preset--color--ink-deep, #101622) 68%, transparent ), transparent );
	pointer-events: none;
}
.fyh-expose > :where(.fyh-carousel + .sgui-shadcn:where(:has( > .sgui-gallery))) .sgui-gallery-image { display: block; border-radius: 0 0 var(--wp--custom--radius--lg, 28px) var(--wp--custom--radius--lg, 28px); }
.fyh-expose > :where(.fyh-carousel + .sgui-shadcn:where(:has( > .sgui-gallery))) .sgui-gallery-image img { display: block; height: var(--fyh-expose-gallery-height); }
.fyh-expose > :where(.fyh-carousel + .sgui-shadcn:where(:has( > .sgui-gallery))) :is([data-slot="carousel-previous"], [data-slot="carousel-next"]) { z-index: 3; top: 46%; }
/* The head card's photo tab counts the pictures. */
.fyh-expose > :where(.fyh-carousel + .sgui-shadcn:where(:has( > .sgui-gallery))) .sgui-gallery > p { display: none; }
/* Without JavaScript the native carousel shows; its images start at the top edge too. */
.fyh-expose > .fyh-carousel .fyh-carousel__slide img { height: var(--fyh-expose-gallery-height); border-radius: 0 0 var(--wp--custom--radius--lg, 28px) var(--wp--custom--radius--lg, 28px); opacity: 1; box-shadow: none; }
.fyh-expose > .fyh-carousel .fyh-carousel__slide { flex-basis: 75%; }
.fyh-expose > .fyh-carousel.fyh-carousel--single .fyh-carousel__slide { flex-basis: 100%; }
/* Match Embla's first centered photo before React commits, without resizing the native track. */
.fyh-expose > .fyh-carousel:where(:not(.fyh-carousel--single):not(.fyh-carousel--plans)) .fyh-carousel__container { transform: translateX(12.5%); }

/* --- Head card: overlaps the gallery ------------------------------------------------------ */
.fyh-expose > .fyh-icard {
	position: relative;
	z-index: 3;
	width: min( var(--fyh-expose-wide), calc( 100% - 2 * var(--fyh-expose-edge) ) );
	margin: calc( -1 * clamp( 3.5rem, 7vw, 5rem ) ) auto 0 !important;
	padding: clamp( 1.75rem, 3.5vw, 2.75rem );
	border-radius: var(--wp--custom--radius--lg, 28px);
	background: var(--wp--preset--color--base, #fff);
	box-shadow: var(--fyh-glass-lift) !important;
}
.fyh-expose .fyh-icard__title { max-width: 100%; text-wrap: pretty; }
.fyh-expose .fyh-icard__ico {
	background: color-mix( in srgb, var(--wp--custom--ui--primary, var(--wp--preset--color--ink)) 8%, var(--wp--preset--color--base, #fff) );
	color: var(--wp--custom--ui--primary, var(--wp--preset--color--ink));
}
.fyh-expose .fyh-icard__counter { background: var(--wp--custom--ui--primary, var(--wp--preset--color--ink)); }

/* --- Reading column ------------------------------------------------------------------------ */
.fyh-expose__body {
	display: flex;
	flex-direction: column;
	gap: var(--fyh-expose-gap);
	width: min( var(--fyh-expose-column), calc( 100% - 2 * var(--fyh-expose-edge) ) );
	margin: var(--fyh-expose-gap) auto 0 !important;
}
.fyh-expose__body > * { max-width: none !important; margin: 0 !important; }
.fyh-expose .fyh-prose { max-width: none; }
.fyh-expose [id] { scroll-margin-top: calc( var(--fyh-nav-height, 76px) + 1.5rem ); }

/* Facts, conditions, energy: flat sections on one column, no frames around them. */
.fyh-expose .fyh-det { gap: var(--fyh-expose-gap); }
.fyh-expose .fyh-det__block.sgui-card {
	--card: transparent;
	padding: 0;
	border-radius: 0 !important;
	box-shadow: none !important;
}
.fyh-expose .fyh-det__grid { gap: 1.75rem 2rem; }

/* Floor plans are documents: the whole sheet on white, one plan at a time. */
.fyh-expose__body .sgui-gallery { margin: 0; }
.fyh-expose__body .sgui-gallery-image.is-plan {
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: var(--wp--custom--radius--md, 16px);
	background: var(--wp--preset--color--base, #fff);
}
.fyh-expose__body .sgui-gallery-image.is-plan img {
	height: clamp( 18rem, 42vw, 30rem );
	padding: clamp( 1rem, 2.5vw, 2rem );
	background: var(--wp--preset--color--base, #fff);
}
/* One plan per view. The slide width is a shadcn utility (!important in @layer utilities); for important
   declarations an earlier layer wins, so this override sits in @layer components. */
@layer components {
	.fyh-expose__body .sgui-gallery [data-slot="carousel-item"]:has(.is-plan) { flex-basis: 100% !important; }
}

/* --- Advisor and request card --------------------------------------------------------------- */
.fyh-expose > .fyh-kontakt {
	width: min( var(--fyh-expose-column), calc( 100% - 2 * var(--fyh-expose-edge) ) );
	margin: var(--fyh-expose-gap) auto 0 !important;
}
.fyh-expose .fyh-kontakt__head,
.fyh-expose .fyh-kontakt__row { max-width: none; }
.fyh-expose .fyh-kontakt__head { margin-bottom: 2rem; text-align: left; }
.fyh-expose .fyh-kontakt__h2 { max-width: none; margin: 0; font-size: clamp( 1.75rem, 3vw, 2.4rem ); }
@media ( min-width: 900px ) {
	.fyh-expose .fyh-kontakt__row { display: flex; align-items: center; }
	.fyh-expose .fyh-kontakt__photo { position: relative; inset: auto; flex: 0 0 42%; width: auto; height: clamp( 30rem, 40vw, 35rem ); }
	.fyh-expose .fyh-kontakt__card { flex: 1; width: auto; min-height: 0; margin: 0 0 0 -2.5rem; }
}

/* --- Further objects ------------------------------------------------------------------------- */
.fyh-expose > .fyh-imgrid,
.fyh-expose > [id="weitere-objekte"] { margin-top: var(--fyh-expose-gap) !important; }

/* --- Phones: the card rises onto the photo edge as a sheet ------------------------------------ */
@media ( max-width: 767px ) {
	.fyh-expose { --fyh-expose-gallery-height: clamp( 21rem, 92vw, 27rem ); }
	.fyh-expose > .fyh-carousel .fyh-carousel__slide { flex-basis: 90%; }
	.fyh-expose > .fyh-carousel:where(:not(.fyh-carousel--single):not(.fyh-carousel--plans)) .fyh-carousel__container { transform: translateX(5%); }
	.fyh-expose > .fyh-carousel .fyh-carousel__slide img { border-radius: 0; }
	.fyh-expose > :where(.fyh-carousel + .sgui-shadcn:where(:has( > .sgui-gallery))) .sgui-gallery-image { border-radius: 0; }
	.fyh-expose > :where(.fyh-carousel + .sgui-shadcn:where(:has( > .sgui-gallery))) .sgui-gallery-image img { display: block; height: var(--fyh-expose-gallery-height); }
	.fyh-expose > .fyh-icard {
		width: 100%;
		margin-top: -1.75rem !important;
		padding: 1.75rem var(--fyh-expose-edge) 1.5rem;
		border-radius: var(--wp--custom--radius--lg, 28px) var(--wp--custom--radius--lg, 28px) 0 0;
		box-shadow: none !important;
	}
	.fyh-expose .fyh-icard__counter { left: var(--fyh-expose-edge); }
}