/* singulary-ui/ratgeber-teaser: left axis follows the page shell, the rail runs to the viewport edge. */

.fyh-rt {
	--fyh-rt-inset: var(--wp--custom--layout--gutter, var(--wp--style--root--padding-left, 1.5rem));
	background: var(--wp--preset--color--base);
	padding-block: var(--wp--custom--layout--section-space, clamp(4rem, 5.5vw, 5rem));
	padding-left: var(--fyh-rt-inset);
	padding-right: 0;
}

.fyh-rt__box { position: relative; min-width: 0; }
.fyh-rt__head { display: flex; flex-direction: column; gap: .75rem; margin: 0 0 clamp( 1.75rem, 3vw, 2.5rem ); padding-right: var(--fyh-rt-inset); }
.fyh-rt__head-left { display: flex; flex-direction: column; gap: .72rem; min-width: 0; }
.fyh-rt__h2 { margin: 0; max-width: 21ch; font-size: var(--wp--custom--type--section-size, clamp(1.875rem, 3vw, 2.5rem)); line-height: var(--wp--custom--type--section-leading, 1.15); font-weight: var(--wp--custom--type--section-weight, 650); letter-spacing: var(--wp--custom--type--section-tracking, -.025em); color: var(--wp--preset--color--ink); text-wrap: balance; }
.fyh-rt__h2 span { color: var(--wp--preset--color--muted); }

.fyh-rt__grid {
	display: flex;
	gap: clamp( 1rem, 1.8vw, 1.35rem );
	box-sizing: border-box;
	width: 100vw;
	min-width: 0;
	margin: 0 0 0 calc( -1 * var(--fyh-rt-inset) );
	padding: .25rem var(--fyh-rt-inset) .85rem;
	overflow-x: auto;
	overflow-y: hidden;
	list-style: none;
	scroll-padding-inline: var(--fyh-rt-inset);
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}
.fyh-rt__grid::-webkit-scrollbar { display: none; }
/* Few posts fill the row; many posts keep the snap carousel. */
.fyh-rt__cell { display: flex; flex: 1 0 clamp( 19rem, 27vw, 23rem ); min-width: 0; scroll-snap-align: start; scroll-snap-stop: always; }

.fyh-rtcard {
	display: flex;
	flex-direction: column;
	width: 100%;
	min-width: 0;
	min-height: 27rem;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: 20px;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	transition: transform .2s ease, border-color .2s ease;
}
.fyh-rtcard:hover { border-color: color-mix( in srgb, var(--wp--preset--color--ink) 25%, var(--wp--preset--color--hairline) ); }
.fyh-rtcard:focus-visible { outline: 2px solid var(--wp--custom--ui--primary, var(--wp--preset--color--brand)); outline-offset: 3px; }

/* Same brand action tile as in the listings. */
.fyh-rtcard.fyh-rtcard--all { justify-content: flex-end; padding: clamp( 1.5rem, 3vw, 2rem ); border-color: transparent; --foreground: var(--wp--custom--ui--primary, var(--wp--preset--color--brand)); color: var(--wp--preset--color--on-dark); }
.fyh-rtcard.fyh-rtcard--all:hover { --foreground: var(--wp--preset--color--navy); }
.fyh-rtcard--all:focus-visible { outline-color: var(--wp--preset--color--ink); }
.fyh-rtcard__all-eyebrow { margin-bottom: .75rem; color: var(--wp--preset--color--on-dark-soft); font-size: var(--wp--custom--type--label-size, .75rem); font-weight: var(--wp--custom--type--label-weight, 600); letter-spacing: var(--wp--custom--type--label-tracking, .12em); text-transform: uppercase; }
/* Same role as the listings ink tile: 24px / 600, one ink-card title across the page. */
.fyh-rtcard__all-title { max-width: 13ch; color: inherit; font-size: 1.5rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.2; text-wrap: balance; }
.fyh-rtcard__all-copy { max-width: 29ch; margin-top: .9rem; color: var(--wp--preset--color--on-dark-soft); font-size: .88rem; line-height: 1.55; }
.fyh-rtcard__all-link { display: inline-flex; align-items: center; gap: .45rem; margin-top: 2rem; color: inherit; font-size: .82rem; font-weight: 600; }
.fyh-rtcard__all-link svg { width: 15px; height: 15px; transition: transform .18s ease; }
.fyh-rtcard--all:hover .fyh-rtcard__all-link svg { transform: translateX( 3px ); }

/* Placeholder clearly labelled as such instead of a fake article. */
.fyh-rt__empty {
	position: relative;
	display: flex;
	width: calc( 100% - var(--fyh-rt-inset) );
	max-width: 58rem;
	min-height: 0;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-end;
	gap: .72rem;
	overflow: hidden;
	padding: clamp( 1.25rem, 3vw, 2rem );
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: 16px;
	background: var(--wp--preset--color--surface);
}
.fyh-rt__empty-eyebrow { color: var(--wp--preset--color--brand); font-size: var(--wp--custom--type--label-size, .75rem); font-weight: var(--wp--custom--type--label-weight, 600); letter-spacing: var(--wp--custom--type--label-tracking, .08em); text-transform: uppercase; }
.fyh-rt__empty-title { max-width: 18ch; color: var(--wp--preset--color--ink); font-size: clamp( 1.35rem, 2.5vw, 1.75rem ); font-weight: 600; letter-spacing: -.035em; line-height: 1.25; text-wrap: balance; }
.fyh-rt__empty-copy { max-width: 54ch; color: var(--wp--preset--color--muted); font-size: 1rem; line-height: 1.6; text-wrap: pretty; }
.fyh-rt__empty-action { margin-top: .65rem; }
.fyh-rt__empty-action svg { width: 15px; height: 15px; }

/* One article on a wide screen: the article takes two thirds as a horizontal card
   (photo left, text right), the guide card one third. No empty ink field. */
@media ( min-width: 900px ) {
	.fyh-rt__grid:not( :has( > :where(.fyh-rt__cell):nth-child( 3 ) ) ) > .fyh-rt__cell:first-child { flex: 2 1 0; }
	.fyh-rt__grid:not( :has( > .fyh-rt__cell:nth-child( 3 ) ) ) > .fyh-rt__cell--all { flex: 1 1 0; }
	.fyh-rt__grid:not( :has( > .fyh-rt__cell:nth-child( 3 ) ) ) .sgui-post-card { display: grid !important; grid-template-columns: minmax( 0, 1.1fr ) minmax( 0, 1fr ); grid-template-rows: 1fr auto; gap: 0 !important; min-height: 22rem; }
	.fyh-rt__grid:not( :has( > .fyh-rt__cell:nth-child( 3 ) ) ) .sgui-post-card__media { grid-column: 1; grid-row: 1 / 3; aspect-ratio: auto; height: 100%; }
	.fyh-rt__grid:not( :has( > .fyh-rt__cell:nth-child( 3 ) ) ) .sgui-post-card__header { grid-column: 2; grid-row: 1; align-self: center; padding-inline: clamp( 1.5rem, 2.5vw, 2.25rem ) !important; }
	/* The footer is a hairline row of the text column, not a grey strip with a stray corner. */
	.fyh-rt__grid:not( :has( > .fyh-rt__cell:nth-child( 3 ) ) ) .sgui-post-card__footer { grid-column: 2; grid-row: 2; padding-inline: clamp( 1.5rem, 2.5vw, 2.25rem ) !important; background: transparent !important; border-radius: 0 !important; }
	.fyh-rt__grid:not( :has( > .fyh-rt__cell:nth-child( 3 ) ) ) .fyh-rtcard { min-height: 0; }
}

@media ( max-width: 639px ) {
	.fyh-rt { padding-block: 4rem; }
	.fyh-rt__cell { flex-basis: min( 82vw, 21rem ); }
	.fyh-rtcard { min-height: 25.5rem; }
	.fyh-rt__empty { width: calc( 100% - var(--fyh-rt-inset) ); min-height: 0; }
	/* One article plus the guide card stack in the column; a half-visible ink card
	   reads as broken. From three cells on the snap rail returns. */
	.fyh-rt__grid:not( :has( > .fyh-rt__cell:nth-child( 3 ) ) ) { flex-direction: column; width: auto; margin-left: 0; padding: .25rem var(--fyh-rt-inset) 0 0; overflow: visible; }
	.fyh-rt__grid:not( :has( > .fyh-rt__cell:nth-child( 3 ) ) ) .fyh-rtcard { min-height: 0; }
	.fyh-rt__grid:not( :has( > .fyh-rt__cell:nth-child( 3 ) ) ) .fyh-rtcard--all { min-height: 14rem; }
}

@media ( prefers-reduced-motion: reduce ) {
	.fyh-rtcard, .fyh-rtcard__all-link svg { transition: none; }
}