/**
 * Gintesa Widget Pack – Post Grid.
 *
 * Structural styles only. No colours or font families are hard-coded: typography and colours
 * come from the widget's style controls, which default to the site's Elementor global styles.
 * Where a neutral fallback is unavoidable, CSS system colours (Canvas / CanvasText) or
 * currentColor are used so the widget adapts to any theme.
 */

.gwp-post-grid {
	--gwp-transition: 300ms;
}

/* Grid ------------------------------------------------------------------ */

.gwp-post-grid__items {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 30px;
	align-items: start;
	transition: opacity var(--gwp-transition);
}

.gwp-post-grid--equal-height .gwp-post-grid__items {
	align-items: stretch;
}

.gwp-post-grid__body {
	position: relative;
}

/* Page swaps happen in place: dim the current posts while the next page loads, no layout jump. */
.gwp-post-grid__items[aria-busy="true"] {
	pointer-events: none;
	opacity: 0.5;
}

.gwp-post-grid__nav [aria-busy="true"],
.gwp-post-grid__nav .is-pending {
	cursor: progress;
}

.gwp-post-grid__item {
	display: flex;
	min-width: 0;
}

.gwp-post-grid__card {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	width: 100%;
	overflow: hidden;
	transition:
		background-color var(--gwp-transition),
		border-color var(--gwp-transition),
		box-shadow var(--gwp-transition),
		transform var(--gwp-transition);
}

.gwp-post-grid--equal-height .gwp-post-grid__card {
	height: 100%;
}

.gwp-post-grid__empty {
	grid-column: 1 / -1;
	margin: 0;
}

/* Thumbnail ------------------------------------------------------------- */

.gwp-post-grid__thumb {
	position: relative;
	flex-shrink: 0;
	height: var(--gwp-thumb-height, auto);
	overflow: hidden;
	/* Set by the "Aspect Ratio" / "Height" controls through CSS variables so responsive values never conflict. */
	aspect-ratio: var(--gwp-thumb-ratio, auto);
}

.gwp-post-grid--layout-grid .gwp-post-grid__thumb {
	margin-bottom: 1em;
}

.gwp-post-grid__thumb-link {
	display: block;
	height: 100%;
}

.gwp-post-grid__thumb img {
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
	object-fit: cover;
	transition:
		transform var(--gwp-transition),
		filter var(--gwp-transition),
		opacity var(--gwp-transition);
}

.gwp-post-grid__thumb--placeholder {
	aspect-ratio: var(--gwp-thumb-ratio, 3 / 2);
	background-color: color-mix(in srgb, currentColor 8%, transparent);
}

/* Hover effects */
.gwp-post-grid--hover-zoom-in .gwp-post-grid__card:hover .gwp-post-grid__thumb img,
.gwp-post-grid--hover-zoom-in .gwp-post-grid__card:focus-within .gwp-post-grid__thumb img {
	transform: scale(1.08);
}

.gwp-post-grid--hover-zoom-out .gwp-post-grid__thumb img {
	transform: scale(1.08);
}

.gwp-post-grid--hover-zoom-out .gwp-post-grid__card:hover .gwp-post-grid__thumb img,
.gwp-post-grid--hover-zoom-out .gwp-post-grid__card:focus-within .gwp-post-grid__thumb img {
	transform: scale(1);
}

.gwp-post-grid--hover-slide .gwp-post-grid__thumb img {
	transform: scale(1.12) translateX(-4%);
}

.gwp-post-grid--hover-slide .gwp-post-grid__card:hover .gwp-post-grid__thumb img,
.gwp-post-grid--hover-slide .gwp-post-grid__card:focus-within .gwp-post-grid__thumb img {
	transform: scale(1.12) translateX(4%);
}

/* Badges ---------------------------------------------------------------- */

.gwp-post-grid__badges {
	position: absolute;
	z-index: 3;
	top: var(--gwp-badge-offset, 1em);
	left: var(--gwp-badge-offset, 1em);
	display: flex;
	flex-wrap: wrap;
	gap: 0.25em;
	pointer-events: none;
}

.gwp-post-grid__badge {
	display: inline-block;
	padding: 0.25em 0.6em;
	font-size: 0.75em;
	line-height: 1.4;
	color: Canvas;
	text-decoration: none;
	pointer-events: auto;
}

/* Content --------------------------------------------------------------- */

.gwp-post-grid__content {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-width: 0;
}

.gwp-post-grid__title {
	margin: 0 0 0.5em;
}

.gwp-post-grid__title a,
.gwp-post-grid__meta a {
	color: inherit;
	text-decoration: none;
	transition: color var(--gwp-transition);
}

.gwp-post-grid__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 var(--gwp-meta-gap, 0.5em);
	margin-bottom: 0.75em;
	font-size: 0.875em;
}

.gwp-post-grid__meta-sep {
	opacity: 0.6;
}

.gwp-post-grid__excerpt {
	margin-bottom: 1em;
}

.gwp-post-grid__read-more {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	text-decoration: none;
	transition:
		color var(--gwp-transition),
		background-color var(--gwp-transition),
		border-color var(--gwp-transition);
}

.gwp-post-grid__read-more--button {
	padding: 0.6em 1.2em;
	color: Canvas;
}

.gwp-post-grid__read-more-icon {
	display: inline-flex;
	line-height: 1;
}

.gwp-post-grid__read-more-icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

/* List layout ----------------------------------------------------------- */

.gwp-post-grid--layout-list .gwp-post-grid__card {
	flex-direction: row;
	gap: 1.5em;
}

.gwp-post-grid--layout-list .gwp-post-grid__thumb {
	width: 40%;
}

/* Overlay layout -------------------------------------------------------- */

.gwp-post-grid--layout-overlay .gwp-post-grid__card {
	justify-content: flex-end;
	min-height: max(var(--gwp-overlay-height, 0px), var(--gwp-overlay-min-height, 10em));
	aspect-ratio: var(--gwp-thumb-ratio, auto);
	color: var(--gwp-overlay-text, Canvas);
}

.gwp-post-grid--layout-overlay .gwp-post-grid__thumb {
	position: absolute;
	z-index: 0;
	inset: 0;
	height: auto;
	margin: 0;
	aspect-ratio: auto;
}

.gwp-post-grid__overlay {
	position: absolute;
	z-index: 1;
	inset: 0;
	background-color: color-mix(in srgb, CanvasText 55%, transparent);
	pointer-events: none;
	transition: background-color var(--gwp-transition);
}

.gwp-post-grid--layout-overlay .gwp-post-grid__content {
	position: relative;
	z-index: 2;
	flex: 0 0 auto;
	padding: 1.5em;
	/* Clicks on empty content areas fall through to the image link below. */
	pointer-events: none;
}

.gwp-post-grid--layout-overlay .gwp-post-grid__content a,
.gwp-post-grid--layout-overlay .gwp-post-grid__content button {
	pointer-events: auto;
}

/* Filter bar ------------------------------------------------------------ */

.gwp-post-grid__filter {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
	margin-bottom: 1.5em;
}

.gwp-post-grid__filter-button {
	padding: 0.5em 1em;
	font: inherit;
	color: inherit;
	cursor: pointer;
	background: transparent;
	border: 1px solid color-mix(in srgb, currentColor 25%, transparent);
	transition:
		color var(--gwp-transition),
		background-color var(--gwp-transition),
		border-color var(--gwp-transition);
}

.gwp-post-grid__filter-button[aria-pressed="true"] {
	color: Canvas;
	border-color: transparent;
}

/* Pagination / load more ----------------------------------------------- */

.gwp-post-grid__nav:not(:empty) {
	margin-top: 2em;
}

.gwp-post-grid__pagination,
.gwp-post-grid__load-more-wrap {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5em;
}

.gwp-post-grid__page,
.gwp-post-grid__load-more {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5em;
	padding: 0.5em 0.9em;
	font: inherit;
	color: inherit;
	text-decoration: none;
	background: transparent;
	border: 1px solid color-mix(in srgb, currentColor 25%, transparent);
	transition:
		color var(--gwp-transition),
		background-color var(--gwp-transition),
		border-color var(--gwp-transition);
}

.gwp-post-grid__load-more {
	padding: 0.75em 1.75em;
	cursor: pointer;
}

.gwp-post-grid__load-more[disabled] {
	cursor: progress;
	opacity: 0.7;
}

.gwp-post-grid__page--current {
	color: Canvas;
	border-color: transparent;
}

.gwp-post-grid__page--dots {
	border-color: transparent;
}

/* Arrows ---------------------------------------------------------------- */

.gwp-post-grid__pagination--arrows {
	align-items: center;
	gap: 1em;
}

.gwp-post-grid__arrow {
	position: var(--gwp-arrow-position, static);
	z-index: 4;
	top: var(--gwp-arrow-top, auto);
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 2.75em;
	height: 2.75em;
	font-size: 1em;
	line-height: 1;
	color: inherit;
	text-decoration: none;
	border: 1px solid color-mix(in srgb, currentColor 25%, transparent);
	border-radius: 50%;
	transform: var(--gwp-arrow-transform, translateY(0));
	transition:
		color var(--gwp-transition),
		background-color var(--gwp-transition),
		border-color var(--gwp-transition),
		opacity var(--gwp-transition);
}

.gwp-post-grid__arrow--prev {
	left: var(--gwp-arrow-offset, 0.5em);
}

.gwp-post-grid__arrow--next {
	right: var(--gwp-arrow-offset, 0.5em);
}

.gwp-post-grid__arrow svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.gwp-post-grid__arrow[aria-disabled="true"] {
	cursor: default;
	opacity: 0.35;
}

.gwp-post-grid__counter {
	font-variant-numeric: tabular-nums;
}

/* Infinite scroll keeps the button as a no-JS / no-IntersectionObserver fallback. */
.gwp-post-grid--infinite .gwp-post-grid__load-more-wrap {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* Motion ---------------------------------------------------------------- */

/* With transitions enabled the leaving cards animate out, so no extra dimming is needed. */
.gwp-post-grid--animated .gwp-post-grid__items[aria-busy="true"] {
	opacity: 1;
}

.gwp-post-grid__item {
	will-change: auto;
}

.gwp-post-grid.is-animating .gwp-post-grid__item {
	will-change: transform, opacity;
}

/* Loading bar: an indeterminate sweep above the posts, shown only for slow requests. */
.gwp-post-grid__body::before {
	position: absolute;
	z-index: 5;
	top: calc(-1 * var(--gwp-progress-offset, 0.75em) - var(--gwp-progress-height, 3px));
	right: 0;
	left: 0;
	height: var(--gwp-progress-height, 3px);
	pointer-events: none;
	content: "";
	background-color: var(--gwp-progress-color, currentColor);
	border-radius: var(--gwp-progress-height, 3px);
	opacity: 0;
	transform: scaleX(0);
	transform-origin: left center;
	transition: opacity 200ms;
}

.gwp-post-grid--progress.is-loading-slow .gwp-post-grid__body::before {
	opacity: 1;
	animation: gwp-progress 1.1s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

@keyframes gwp-progress {

	0% {
		transform: scaleX(0);
		transform-origin: left center;
	}

	50% {
		transform: scaleX(1);
		transform-origin: left center;
	}

	50.01% {
		transform: scaleX(1);
		transform-origin: right center;
	}

	100% {
		transform: scaleX(0);
		transform-origin: right center;
	}
}

/* Micro-interactions on navigation controls. */
.gwp-post-grid__arrow > *,
.gwp-post-grid__page,
.gwp-post-grid__load-more,
.gwp-post-grid__filter-button {
	transition:
		color var(--gwp-transition),
		background-color var(--gwp-transition),
		border-color var(--gwp-transition),
		opacity var(--gwp-transition),
		transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

a.gwp-post-grid__arrow--next:hover > *,
a.gwp-post-grid__arrow--next:focus-visible > * {
	transform: translateX(0.18em);
}

a.gwp-post-grid__arrow--prev:hover > *,
a.gwp-post-grid__arrow--prev:focus-visible > * {
	transform: translateX(-0.18em);
}

a.gwp-post-grid__arrow:active {
	transform: var(--gwp-arrow-transform, translateY(0)) scale(0.9);
}

a.gwp-post-grid__page:hover,
.gwp-post-grid__load-more:hover:not([disabled]),
.gwp-post-grid__filter-button:hover {
	transform: translateY(-2px);
}

a.gwp-post-grid__page:active,
.gwp-post-grid__load-more:active:not([disabled]),
.gwp-post-grid__filter-button:active {
	transform: translateY(0) scale(0.95);
}

/* The page you just clicked reacts instantly while its posts load. */
.gwp-post-grid__page.is-pending,
.gwp-post-grid__arrow.is-pending {
	opacity: 0.6;
}

/* Accessibility --------------------------------------------------------- */

.gwp-post-grid a:focus-visible,
.gwp-post-grid button:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.gwp-post-grid *,
	.gwp-post-grid *::before {
		transition-duration: 0.01ms !important;
	}

	.gwp-post-grid .gwp-post-grid__card,
	.gwp-post-grid .gwp-post-grid__thumb img,
	.gwp-post-grid .gwp-post-grid__arrow > *,
	.gwp-post-grid .gwp-post-grid__page,
	.gwp-post-grid .gwp-post-grid__load-more,
	.gwp-post-grid .gwp-post-grid__filter-button {
		transform: none !important;
	}

	.gwp-post-grid--progress.is-loading-slow .gwp-post-grid__body::before {
		animation: none;
		transform: scaleX(1);
		opacity: 0.6;
	}
}