/*
 * JetEngine Bento Grid — column-track bento packing
 * Version: 2.22.0
 *
 * JavaScript sizes and positions the OUTER .jet-listing-grid__item elements on
 * a column-track grid with a square base cell. Column counts come from the
 * breakpoint table in the script (matched against the grid's own width, not the
 * viewport), so this stylesheet no longer declares them. Set --bento-columns
 * here or data-bento-columns on the widget to override a specific grid.
 *
 * No image or media element receives an aspect-ratio rule.
 */

.bento-grid,
.bento-grid > .elementor-widget-container,
.bento-grid .jet-listing-grid {
	min-width: 0;
	width: 100%;
	max-width: 100% !important;
	box-sizing: border-box;
}

.bento-grid .jet-listing-grid {
	overflow: hidden;
}

.bento-grid .jet-listing-grid__items {
	--bento-gap-fallback: 8px;

	display: block !important;
	position: relative !important;
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0;
	height: 0;
	margin: 0 !important;
	padding: 0 !important;
	box-sizing: border-box;
	overflow: hidden;
}

.bento-grid .jet-listing-grid__items > .jet-listing-grid__item {
	position: absolute !important;
	top: 0 !important;
	right: auto !important;
	bottom: auto !important;
	left: 0 !important;
	width: 0;
	height: 0;
	max-width: none !important;
	min-width: 0 !important;
	min-height: 0 !important;
	margin: 0 !important;
	flex: none !important;
	box-sizing: border-box;
	aspect-ratio: auto !important;
	overflow: hidden !important;
	opacity: 0;
	will-change: transform, width, height;
}

/*
 * Cards past the current batch are removed from the render tree, so their CSS
 * background images are never fetched and they cost no layout work. Their
 * <img>/<iframe> sources are parked in data attributes by the script.
 *
 * The nth-child rule is the pre-script default. It applies while the stylesheet
 * is parsed in <head>, before the first layout pass, so lazy images in cards
 * past the first batch are never requested at all. The script takes over with
 * [data-bento-deferred] as soon as it has batched the grid.
 */
.bento-grid .jet-listing-grid__items:not(.bento-batched) > .jet-listing-grid__item:nth-child(n+17) {
	display: none;
}

.bento-grid .jet-listing-grid__items > .jet-listing-grid__item[data-bento-deferred] {
	display: none !important;
}

/*
 * A card a fit grid (class bento-fit) left out because the grid closes up
 * better without it. Visible while measuring, so its size stays known and it
 * can be brought back on the next pass.
 */
.bento-grid .jet-listing-grid__items:not(.bento-measuring) > .jet-listing-grid__item[data-bento-dropped] {
	display: none !important;
}

/* Reveals the next batch. Nothing loads the next cards on its own. */
.bento-grid .bento-load-more-wrap {
	display: flex;
	justify-content: center;
	width: 100%;
	margin-top: var(--bento-load-more-gap, 32px);
}

.bento-grid .bento-load-more {
	font: inherit;
	line-height: 1;
	color: inherit;
	cursor: pointer;
	padding: 14px 32px;
	border: 1px solid currentColor;
	border-radius: var(--bento-load-more-radius, 999px);
	background-color: transparent;
	transition:
		color 200ms ease,
		background-color 200ms ease,
		border-color 200ms ease;
}

/*
 * A neutral wash rather than a colour inversion: the button inherits the
 * theme's text colour, and the plugin cannot know what it would be legible on.
 */
.bento-grid .bento-load-more:hover {
	background-color: var(--bento-load-more-hover-background, rgba(127, 127, 127, 0.16));
}

.bento-grid .bento-load-more:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/* Receives focus programmatically after the last batch, so it shows no ring. */
.bento-grid .jet-listing-grid__items > .jet-listing-grid__item[tabindex="-1"]:focus {
	outline: none;
}

@media (prefers-reduced-motion: reduce) {
	.bento-grid .bento-load-more {
		transition: none;
	}
}

.bento-grid .jet-listing-grid__items.bento-ready.bento-layout-settled {
	transition: height 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.bento-grid .jet-listing-grid__items.bento-ready > .jet-listing-grid__item {
	opacity: 1;
}

.bento-grid .jet-listing-grid__items.bento-ready.bento-layout-settled > .jet-listing-grid__item {
	transition:
		transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
		width 420ms cubic-bezier(0.22, 1, 0.36, 1),
		height 420ms cubic-bezier(0.22, 1, 0.36, 1),
		opacity 180ms ease;
}

/* Preload motion targets without touching the outer placement transform. */
.bento-grid.bento-scroll-posts .jet-listing-grid,
.bento-grid.bento-scroll-posts .jet-listing-grid__items {
	overflow: visible !important;
}

.bento-grid.bento-scroll-posts .jet-listing-grid__items:not(.bento-motion-ready) {
	translate: 0 -30px;
}

.bento-grid.bento-scroll-posts .jet-listing-grid__items > .jet-listing-grid__item:not([data-bento-motion]) > * {
	opacity: 0;
}

.bento-grid.bento-fade-posts .jet-listing-grid__items > .jet-listing-grid__item:not([data-bento-motion]) > * {
	opacity: 0;
	transform: translate3d(0, 30px, 0);
}

/* Make the exact Elementor hierarchy supplied by the user fill the card. */
.bento-grid .jet-listing-grid__items > .jet-listing-grid__item > .elementor,
.bento-grid .jet-listing-grid__items > .jet-listing-grid__item > .elementor > .e-con,
.bento-grid .jet-listing-grid__items > .jet-listing-grid__item > .elementor > .e-con > .e-con-inner {
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
	height: 100% !important;
	min-height: 0 !important;
	box-sizing: border-box;
	overflow: hidden;
}

.bento-grid .jet-listing-grid__items > .jet-listing-grid__item > .elementor > .e-con > .e-con-inner {
	flex: 1 1 auto;
}

.bento-grid .jet-listing-grid__items > .jet-listing-grid__item .elementor-element,
.bento-grid .jet-listing-grid__items > .jet-listing-grid__item .elementor-widget-container {
	min-width: 0;
	max-width: 100%;
	box-sizing: border-box;
}

/*
 * Long words break rather than being cut off.
 *
 * A card clips its overflow, so a word wider than the card does not wrap, it
 * simply disappears at the edge — and German headlines are full of words that
 * do this: MITTELSTANDSSUMMIT, PRÜFTECHNIK, AUTOMATISIERUNG. The result reads
 * as a card whose title has been truncated at random.
 *
 * hyphens breaks at the right places but needs the document language to be
 * declared; overflow-wrap needs nothing and breaks anywhere, so it is the
 * guarantee and hyphens is the improvement.
 */
.bento-grid .jet-listing-grid__items > .jet-listing-grid__item h1,
.bento-grid .jet-listing-grid__items > .jet-listing-grid__item h2,
.bento-grid .jet-listing-grid__items > .jet-listing-grid__item h3,
.bento-grid .jet-listing-grid__items > .jet-listing-grid__item h4,
.bento-grid .jet-listing-grid__items > .jet-listing-grid__item h5,
.bento-grid .jet-listing-grid__items > .jet-listing-grid__item h6,
.bento-grid .jet-listing-grid__items > .jet-listing-grid__item p,
.bento-grid .jet-listing-grid__items > .jet-listing-grid__item a,
.bento-grid .jet-listing-grid__items > .jet-listing-grid__item .bento-clamp-target {
	overflow-wrap: break-word;
	word-break: normal;
	hyphens: auto;
}

/*
 * Nothing in a card may push the grid wider than its container.
 *
 * The script sizes every card from the grid's own width, so the cards
 * themselves never overflow — but a table, a pre block, or an image with a
 * fixed width inside one can, and it takes the page's horizontal scrollbar with
 * it on a phone.
 */
.bento-grid .jet-listing-grid__items > .jet-listing-grid__item img,
.bento-grid .jet-listing-grid__items > .jet-listing-grid__item video,
.bento-grid .jet-listing-grid__items > .jet-listing-grid__item iframe,
.bento-grid .jet-listing-grid__items > .jet-listing-grid__item table {
	max-width: 100%;
}

/*
 * Content fitting.
 *
 * While the script measures how tall a card's content wants to be, the card and
 * its wrappers are released from their forced height so the content can take
 * the room it actually needs. The script sets each card's final width first,
 * reads every height in one pass, then removes this class.
 */
.bento-grid .jet-listing-grid__items.bento-measuring > .jet-listing-grid__item,
.bento-grid .jet-listing-grid__items.bento-measuring > .jet-listing-grid__item > .elementor,
.bento-grid .jet-listing-grid__items.bento-measuring > .jet-listing-grid__item > .elementor > .e-con,
.bento-grid .jet-listing-grid__items.bento-measuring > .jet-listing-grid__item > .elementor > .e-con > .e-con-inner {
	height: auto !important;
	overflow: visible !important;
	transition: none !important;
}

/*
 * A card that could not grow enough for its text. The content becomes a column
 * with the call to action held against the bottom edge, so the button that
 * opens the post stays reachable no matter how long the text above it is.
 *
 * Selected by classes the script applies rather than by a fixed path, because
 * Elementor nests containers freely and the widgets can sit at any depth. The
 * whole chain from the card down to the content becomes a column, otherwise a
 * nested container only as tall as its own contents would pin the button to
 * the bottom of itself instead of the bottom of the card.
 */
.bento-grid .jet-listing-grid__item[data-bento-clamped] .bento-flow,
.bento-grid .jet-listing-grid__item[data-bento-clamp-lines] .bento-flow {
	display: flex;
	flex-direction: column;
	/* Elementor containers wrap by default; a short card then wrapped its text
	   block into a second column that started at the top, over the image. */
	flex-wrap: nowrap !important;
	min-height: 0;
}

.bento-grid .jet-listing-grid__item[data-bento-clamped] > .bento-flow,
.bento-grid .jet-listing-grid__item[data-bento-clamp-lines] > .bento-flow {
	height: 100%;
}

.bento-grid .jet-listing-grid__item[data-bento-clamped] .bento-flow > *,
.bento-grid .jet-listing-grid__item[data-bento-clamp-lines] .bento-flow > * {
	min-height: 0;
}

/*
 * Only the text block that gets the ellipsis, and the branch holding it, may
 * give way when a card is short. Everything else keeps its size — the picture,
 * the date, the headline, the button, and the gaps Elementor puts between them.
 * With every section allowed to shrink, a short phone card collapsed its image
 * box and the date slid up over the photograph.
 */
.bento-grid .jet-listing-grid__item[data-bento-clamped] .bento-flow > *:not(.bento-flow-grow):not(.bento-clamp-target),
.bento-grid .jet-listing-grid__item[data-bento-clamp-lines] .bento-flow > *:not(.bento-flow-grow):not(.bento-clamp-target),
.bento-grid .jet-listing-grid__item .bento-media,
.bento-grid .jet-listing-grid__item .bento-keep,
.bento-grid .jet-listing-grid__item .bento-date,
.bento-grid .jet-listing-grid__item .bento-pin,
.bento-grid .jet-listing-grid__item .bento-pinned {
	flex-shrink: 0 !important;
}

/*
 * Only the branch above the clamped text takes the spare height. The branch
 * above the button hugs its contents, so margin-top:auto on the button lands
 * it against the card's bottom edge rather than its own wrapper's.
 */
.bento-grid .jet-listing-grid__item[data-bento-clamped] .bento-flow-grow,
.bento-grid .jet-listing-grid__item[data-bento-clamp-lines] .bento-flow-grow {
	flex: 1 1 auto;
}

.bento-grid .jet-listing-grid__item[data-bento-clamped] .bento-pinned,
.bento-grid .jet-listing-grid__item[data-bento-clamped] .bento-pin,
.bento-grid .jet-listing-grid__item[data-bento-clamp-lines] .bento-pinned,
.bento-grid .jet-listing-grid__item[data-bento-clamp-lines] .bento-pin {
	margin-top: auto;
	flex: 0 0 auto;
}

/* The text block takes whatever is left, and is cut off with an ellipsis. */
.bento-grid .jet-listing-grid__item[data-bento-clamped] .bento-clamp-target {
	flex: 1 1 auto;
	min-height: 0;
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--bento-clamp-lines, 3);
	line-clamp: var(--bento-clamp-lines, 3);
}

/*
 * The family line limit.
 *
 * Applied whether or not the card overflows, because it is a composition rule
 * rather than a fallback: a colour card shows the first three lines of its
 * excerpt and no more, however much room it happens to have. The rule above
 * handles the different case of a card whose content did not fit at all.
 */
.bento-grid .jet-listing-grid__item[data-bento-clamp-lines] .bento-clamp-fixed {
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--bento-clamp-lines, 3);
	line-clamp: var(--bento-clamp-lines, 3);
}

/*
 * A fixed clamp hugs its lines instead of taking the spare height.
 *
 * The overflow clamp gives its target flex:1 1 auto, which is right for it:
 * that target shows as much text as it can, so everything going spare is text
 * the reader gets. A fixed clamp shows three lines whatever it is handed, so
 * stretching it only opens a band of empty text box between the excerpt and the
 * button. The spare height belongs to the card, not to a box that will not use
 * it.
 */
.bento-grid .jet-listing-grid__item[data-bento-clamped] .bento-clamp-target.bento-clamp-fixed,
.bento-grid .jet-listing-grid__item[data-bento-clamp-lines] .bento-clamp-target.bento-clamp-fixed {
	flex: 0 0 auto;
}

/*
 * An already-clamped card must be measured unclamped.
 *
 * Otherwise the measurement reads the clamped height — exactly the height of
 * the card, because that is what the clamp was for — concludes the content
 * fits, and removes the clamp. The card is then left overflowing with nothing
 * to catch it: the text is cut off mid-sentence and the button is gone. It only
 * happens when a card is measured a second time, which is what a late image or
 * a web font triggers, so it presents as an intermittent fault on some cards
 * and not others.
 *
 * These carry !important because the clamp rules above match with equal
 * specificity and this state has to win outright while it lasts.
 */
/*
 * Heights are released but the flex layout is kept. Switching the containers
 * to display:block here used to drop Elementor's gap between the sections, so
 * every card was measured 40–50px short and then squeezed its content.
 */
.bento-grid .jet-listing-grid__items.bento-measuring .bento-flow {
	height: auto !important;
}

.bento-grid .jet-listing-grid__items.bento-measuring .bento-pinned {
	margin-top: 0 !important;
}

/*
 * :not(.bento-clamp-fixed) is what keeps the two clamps apart, and the reason
 * is the mirror image of the paragraph above. The overflow clamp is a response
 * to content that did not fit, so measuring with it in force would read back
 * the card's own height and conclude the content fits. A family line limit is
 * not a response to anything: the text beyond line three is never going to be
 * shown, so measuring as though it might sizes the card for content it will
 * then hide, and leaves the bottom of the card empty.
 */
.bento-grid .jet-listing-grid__items.bento-measuring .bento-clamp-target:not(.bento-clamp-fixed) {
	display: block !important;
	overflow: visible !important;
	-webkit-line-clamp: none !important;
	line-clamp: none !important;
	flex: 0 0 auto !important;
}

/*
 * Cards now snap to whole grid cells, so a card is close to its selected ratio
 * rather than exactly on it. Card media therefore has to crop rather than
 * letterbox. This is opt-in per grid, because a blanket object-fit rule would
 * also crop logos, icons, and author avatars sitting inside the same card.
 *
 * Add bento-cover-media beside bento-grid on the Listing Grid widget to enable
 * it, or write an equivalent rule against your own image widget's class.
 */
.bento-grid.bento-cover-media .jet-listing-grid__items > .jet-listing-grid__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * An empty tile the editor has offered up to plug holes.
 *
 * It may be a listing item like any other, in which case the rules above
 * already place it. It may also be a bare container dropped into the grid, and
 * those need the same treatment: the script gives every filler its position and
 * its size, so all this has to do is take them out of the normal flow.
 *
 * A filler the grid had no hole for is hidden by the script rather than by this
 * stylesheet, because "no hole this time" is a per-layout answer.
 */
.bento-grid .jet-listing-grid__items > .bento-fill {
	position: absolute;
	top: 0;
	left: 0;
	margin: 0;
	box-sizing: border-box;
	overflow: hidden;
}

/*
 * A tile this plugin made, as against one the editor built.
 *
 * Only the generated ones are given a look here. A tile somebody designed
 * already has one, and the point of letting them build their own is that the
 * plugin does not decide how it appears.
 *
 * The colour and the corner radius come from the settings screen and are
 * written inline, so this rule only has to establish what a tile is.
 */
.bento-grid .jet-listing-grid__items > .bento-fill-made {
	pointer-events: none;
	background-color: var(--bento-fill-color, #f0f0f0);
	border-radius: var(--bento-fill-radius, 25px);
}

.bento-grid .jet-listing-grid__items.bento-ready.bento-layout-settled > .bento-fill {
	transition:
		transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
		width 420ms cubic-bezier(0.22, 1, 0.36, 1),
		height 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
	.bento-grid .jet-listing-grid__items > .bento-fill {
		transition: none !important;
	}
}

/*
 * The Dynamic Field widgets that carry card_ratio and layout into the DOM. They
 * exist to be read by the script, never to be seen.
 */
.bento-grid .bento-ratio,
.bento-grid .bento-layout {
	display: none !important;
}

@media (max-width: 900px) {
	.bento-grid .jet-listing-grid__items {
		--bento-gap-fallback: 8px;
	}
}

@media (max-width: 600px) {
	.bento-grid .jet-listing-grid__items {
		--bento-gap-fallback: 10px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bento-grid .jet-listing-grid__items,
	.bento-grid .jet-listing-grid__items > .jet-listing-grid__item {
		transition: none !important;
	}
}