/* JHR Loop Grid – frontend */

.jhr-loop-grid {
	position: relative;
	width: 100%;
}

.jhr-loop-grid__items {
	--jhr-lg-columns: 3;
	--jhr-lg-column-gap: 20px;
	--jhr-lg-row-gap: 20px;
	display: grid;
	grid-template-columns: repeat(var(--jhr-lg-columns), minmax(0, 1fr));
	column-gap: var(--jhr-lg-column-gap);
	row-gap: var(--jhr-lg-row-gap);
	width: 100%;
}

.jhr-loop-item {
	min-width: 0;
	position: relative;
}

/* ---------------------------------------------------------------------------
   Equal height

   The grid already stretches every cell to the tallest item in its row. The
   job here is to carry that height down through every wrapper to the element
   that actually draws the card (background, border, shadow).

   This uses flex growth rather than height: 100%. A percentage height only
   resolves if every ancestor has a definite height, so one wrapper that
   doesn't (Elementor's .e-con-inner, a legacy .elementor-section-wrap or
   .elementor-container, a nested "card" container) silently breaks the chain
   and the card collapses back to its content height. A flex item that grows
   doesn't depend on its parent's height being definite, only on the parent
   being a flex container with room to fill.
   --------------------------------------------------------------------------- */

.jhr-loop-grid__items--equal-height {
	align-items: stretch;
}

/* 1. Grid cell: fills the row, passes height to its children. */
.jhr-loop-grid__items--equal-height > .jhr-loop-item {
	display: flex;
	flex-direction: column;
}

/* 2. Elementor document wrapper (and the legacy section-wrap on old installs). */
.jhr-loop-grid__items--equal-height > .jhr-loop-item > .elementor,
.jhr-loop-grid__items--equal-height > .jhr-loop-item > .elementor > .elementor-section-wrap {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

/* 3. Top-level elements of the loop template. With one top-level container
      (the usual card) it fills the cell. With several stacked ones, the last
      takes up the slack so the card's bottom edge still lines up. */
.jhr-loop-grid__items--equal-height > .jhr-loop-item > .elementor > .elementor-element,
.jhr-loop-grid__items--equal-height > .jhr-loop-item > .elementor > .elementor-section-wrap > .elementor-element {
	flex: 0 0 auto;
}

.jhr-loop-grid__items--equal-height > .jhr-loop-item > .elementor > .elementor-element:last-child,
.jhr-loop-grid__items--equal-height > .jhr-loop-item > .elementor > .elementor-section-wrap > .elementor-element:last-child {
	flex-grow: 1;
}

/* 4a. Flexbox container, "Boxed" width: content sits in .e-con-inner. */
.jhr-loop-grid__items--equal-height .jhr-loop-item > .elementor > .e-con-boxed > .e-con-inner {
	flex-grow: 1;
}

/* 4b. A nested container that is the only child of the top-level one: the
       common "outer wrapper > card" pattern. Without this the outer wrapper
       stretches but the visible card inside it doesn't. */
.jhr-loop-grid__items--equal-height .jhr-loop-item > .elementor > .e-con > .e-con:only-child,
.jhr-loop-grid__items--equal-height .jhr-loop-item > .elementor > .e-con > .e-con-inner > .e-con:only-child {
	flex-grow: 1;
	align-self: stretch;
}

/* 4c. Legacy section > column layout. The section becomes a flex row so its
       container can grow; auto margins still centre a boxed container, and
       Elementor's columns already stretch to the container's height. */
.jhr-loop-grid__items--equal-height .jhr-loop-item .elementor-top-section {
	display: flex;
}

.jhr-loop-grid__items--equal-height .jhr-loop-item .elementor-top-section > .elementor-container {
	flex: 1 1 auto;
}

/* ---------------------------------------------------------------------------
   Alternate layout (zig-zag)

   Mirrors the columns of every other item: image left / content right, then
   image right / content left. Turned on in Style > Items > Alternate Layout,
   which adds these wrapper classes:

     .jhr-lg-flip-yes                  feature on
     .jhr-lg-flip-on-even | -odd       which items are mirrored
     .jhr-lg-flip-in-nested | -top | -class
                                       which container holds the columns

   and sets --jhr-lg-flip-active (1 or 0) per breakpoint.

   Children are reversed with `order: -1, -2, -3…` rather than by switching
   the container to row-reverse. Elementor sets flex-direction per
   breakpoint through its own --flex-direction variable; overriding it would
   also have to know whether the template is row or column at each size.
   `order` leaves the direction alone, so a template that stacks on mobile
   still stacks, and --jhr-lg-flip-active: 0 puts every child back to
   order 0 (template order) on the breakpoints where the flip is off.

   Step 1: every element inside a mirrored item learns its position among its
   siblings. This is only a variable; nothing uses it except step 2.
   --------------------------------------------------------------------------- */

.jhr-lg-flip-yes .jhr-loop-item :nth-child(1) { --jhr-lg-flip-n: -1; }
.jhr-lg-flip-yes .jhr-loop-item :nth-child(2) { --jhr-lg-flip-n: -2; }
.jhr-lg-flip-yes .jhr-loop-item :nth-child(3) { --jhr-lg-flip-n: -3; }
.jhr-lg-flip-yes .jhr-loop-item :nth-child(4) { --jhr-lg-flip-n: -4; }
.jhr-lg-flip-yes .jhr-loop-item :nth-child(5) { --jhr-lg-flip-n: -5; }
.jhr-lg-flip-yes .jhr-loop-item :nth-child(6) { --jhr-lg-flip-n: -6; }
.jhr-lg-flip-yes .jhr-loop-item :nth-child(7) { --jhr-lg-flip-n: -7; }
.jhr-lg-flip-yes .jhr-loop-item :nth-child(8) { --jhr-lg-flip-n: -8; }

/* Step 2: the direct children of the columns container, in mirrored items
   only, take that position as a negative order, which reverses them.
   Boxed containers keep their children in .e-con-inner, hence the extra
   "> .e-con-inner" line for each container form. */
:is(
	/* Nested container: Container > Container > [Image, Content] */
	.jhr-lg-flip-yes.jhr-lg-flip-in-nested :is(.jhr-lg-flip-on-even .jhr-loop-item--even, .jhr-lg-flip-on-odd .jhr-loop-item--odd) > .elementor > .e-con > .e-con,
	.jhr-lg-flip-yes.jhr-lg-flip-in-nested :is(.jhr-lg-flip-on-even .jhr-loop-item--even, .jhr-lg-flip-on-odd .jhr-loop-item--odd) > .elementor > .e-con > .e-con > .e-con-inner,
	.jhr-lg-flip-yes.jhr-lg-flip-in-nested :is(.jhr-lg-flip-on-even .jhr-loop-item--even, .jhr-lg-flip-on-odd .jhr-loop-item--odd) > .elementor > .e-con > .e-con-inner > .e-con,
	.jhr-lg-flip-yes.jhr-lg-flip-in-nested :is(.jhr-lg-flip-on-even .jhr-loop-item--even, .jhr-lg-flip-on-odd .jhr-loop-item--odd) > .elementor > .e-con > .e-con-inner > .e-con > .e-con-inner,
	/* Legacy: section > column > inner section */
	.jhr-lg-flip-yes.jhr-lg-flip-in-nested :is(.jhr-lg-flip-on-even .jhr-loop-item--even, .jhr-lg-flip-on-odd .jhr-loop-item--odd) > .elementor .elementor-top-section .elementor-inner-section > .elementor-container,

	/* Top-level container: Container > [Image, Content] */
	.jhr-lg-flip-yes.jhr-lg-flip-in-top :is(.jhr-lg-flip-on-even .jhr-loop-item--even, .jhr-lg-flip-on-odd .jhr-loop-item--odd) > .elementor > .e-con,
	.jhr-lg-flip-yes.jhr-lg-flip-in-top :is(.jhr-lg-flip-on-even .jhr-loop-item--even, .jhr-lg-flip-on-odd .jhr-loop-item--odd) > .elementor > .e-con > .e-con-inner,
	/* Legacy: section > [column, column] */
	.jhr-lg-flip-yes.jhr-lg-flip-in-top :is(.jhr-lg-flip-on-even .jhr-loop-item--even, .jhr-lg-flip-on-odd .jhr-loop-item--odd) > .elementor > .elementor-top-section > .elementor-container,

	/* Any container or section given the CSS class jhr-lg-flip */
	.jhr-lg-flip-yes.jhr-lg-flip-in-class :is(.jhr-lg-flip-on-even .jhr-loop-item--even, .jhr-lg-flip-on-odd .jhr-loop-item--odd) .jhr-lg-flip,
	.jhr-lg-flip-yes.jhr-lg-flip-in-class :is(.jhr-lg-flip-on-even .jhr-loop-item--even, .jhr-lg-flip-on-odd .jhr-loop-item--odd) .jhr-lg-flip > .e-con-inner,
	.jhr-lg-flip-yes.jhr-lg-flip-in-class :is(.jhr-lg-flip-on-even .jhr-loop-item--even, .jhr-lg-flip-on-odd .jhr-loop-item--odd) .jhr-lg-flip > .elementor-container
) > * {
	order: calc(var(--jhr-lg-flip-active, 1) * var(--jhr-lg-flip-n, 0));
}

/* Masonry */
.jhr-loop-grid__items--masonry {
	display: block;
	position: relative;
}

.jhr-loop-grid__items--masonry.jhr-lg-masonry-ready > .jhr-loop-item {
	position: absolute;
	top: 0;
	left: 0;
	transition: top 0.2s ease, left 0.2s ease;
}

/* Pagination */
.jhr-loop-grid__pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-top: 30px;
	width: 100%;
}

.jhr-loop-grid__pagination a,
.jhr-loop-grid__pagination span {
	text-decoration: none;
	line-height: 1;
	padding: 6px 10px;
	display: inline-block;
}

.jhr-loop-grid__pagination .current {
	font-weight: 700;
}

.jhr-loop-grid__pagination--load-more {
	flex-direction: column;
}

.jhr-loop-grid__load-more-btn {
	cursor: pointer;
	border: none;
	background-color: #61ce70;
	color: #fff;
	padding: 12px 26px;
	font-size: 15px;
	line-height: 1;
	border-radius: 3px;
}

.jhr-loop-grid__load-more-btn[disabled] {
	opacity: 0.6;
	cursor: default;
}

.jhr-loop-grid__scroll-sentinel {
	width: 100%;
	height: 1px;
}

.jhr-loop-grid__spinner {
	display: none;
	width: 22px;
	height: 22px;
	margin-top: 12px;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: jhr-lg-spin 0.8s linear infinite;
}

.jhr-loop-grid.is-loading .jhr-loop-grid__spinner {
	display: block;
}

@keyframes jhr-lg-spin {
	to {
		transform: rotate(360deg);
	}
}

.jhr-loop-grid__no-more {
	margin-top: 10px;
	opacity: 0.8;
}

/* ---------------------------------------------------------------------------
   Linked titles

   With a link set, Elementor prints <h2 class="elementor-heading-title"><a>.
   The Typography control styles the <h2>; Elementor's own heading CSS then
   passes only colour, font-size and line-height down to the <a>:

     .elementor-heading-title a { color: inherit; font-size: inherit; line-height: inherit; }

   Font family, weight, style, spacing and case are left to inheritance, and
   inheritance loses to any direct rule on links (the theme's "a { font-family }").
   So the link took the theme's link font while colour and size still worked.
   These lines hand the rest of the typography down the same way.
   --------------------------------------------------------------------------- */

.jhr-loop-item .elementor-heading-title a,
.jhr-loop-item .elementor-heading-title a:hover,
.jhr-loop-item .elementor-heading-title a:focus {
	font-family: inherit;
	font-weight: inherit;
	font-style: inherit;
	letter-spacing: inherit;
	word-spacing: inherit;
	text-transform: inherit;
}

/* Messages */
.jhr-loop-grid__nothing-found {
	width: 100%;
	text-align: center;
	padding: 20px 0;
}

.jhr-loop-grid__notice {
	padding: 20px;
	border: 1px dashed #c4c4c4;
	color: #6d7882;
	text-align: center;
	font-size: 13px;
}