/* =========== © 2024 Centroarts.com - https://honista.com =========== */

/*! Flickity v2.3.0 https://flickity.metafizzy.co ---------------------------------------------- */
.flickity-enabled { position: relative; }
.flickity-enabled:focus { outline: none; }
.flickity-viewport { overflow: hidden; position: relative; height: 100%; }
.flickity-slider { position: absolute; width: 100%; height: 100%; }

/* draggable */
.flickity-enabled.is-draggable {
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.flickity-enabled.is-draggable .flickity-viewport { cursor: move; cursor: -webkit-grab; cursor: grab; }
.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down { cursor: -webkit-grabbing; cursor: grabbing; }

/* ---- flickity-button ---- */
.flickity-button { position: absolute; background: hsla(0, 0%, 100%, 0.75); border: none; color: #333; }
.flickity-button:hover { background: white; cursor: pointer; }
.flickity-button:active { opacity: 0.6; }
.flickity-button:disabled { opacity: 0.3; cursor: auto; pointer-events: none; }
.flickity-button-icon { fill: currentColor; }

/* ---- previous/next buttons ---- */
.flickity-prev-next-button { top: 50%; border-radius: 50%; transform: translateY(-50%); }
.flickity-prev-next-button.previous { left: 10px; }
.flickity-prev-next-button.next { right: 10px; }
.flickity-rtl .flickity-prev-next-button.previous { left: auto; right: 10px; }
.flickity-rtl .flickity-prev-next-button.next { right: auto; left: 10px; }
.flickity-prev-next-button .flickity-button-icon { position: absolute; left: 20%; top: 20%; width: 60%; height: 60%; }

/* ================ Carousel Blog Honista ================ */
.blog-carousel { overflow: hidden; position: relative; padding-bottom: var(--section-gap); }
.blog-carousel .carousel .flickity-viewport { overflow: visible; }
.blog-carousel .carousel .flickity-page-dots { display: none; }

.blog-carousel .gradient-bg {
	position: absolute; z-index: -1; inset: 0; top: auto; height: 100%;
	max-height: 200px; box-shadow: inset 0 -1px 0 0 rgba(var(--color-primary-rgb), 0.1);
}

@media (max-width: 991px) {
	.blog-carousel .flickity-button { display: none !important; }
}
@media (min-width: 992px) {
	.blog-carousel .flickity-button { width: 80px; height: 80px; margin-top: -40px; transform: translate(0, 0); }
	.blog-carousel .flickity-button::after { left: 0; top: 0; right: 0; bottom: 0; }
	.blog-carousel .flickity-button.previous { left: 0; margin-left: -32px; }
	.blog-carousel .flickity-button.next { right: var(--block-gap); margin-right: -32px; }
	.blog-carousel .flickity-rtl .flickity-button.next { right: auto !important; left: 0 !important; margin-left: -32px !important; margin-right: 0; }
	.blog-carousel .flickity-rtl .flickity-button.previous { left: auto !important; right: var(--block-gap) !important; margin-right: -32px !important; margin-left: 0; }

	.blog-carousel .flickity-button {
		direction: ltr;
		top: calc(var(--post-img-height) / 2); outline: none !important; user-select: none;
		background-color: rgba(var(--color-body-rgb), 0.5) !important; color: var(--color-primary);
		backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
		transition: background-color .2s ease, opacity .2s ease;
	}
	.blog-carousel .flickity-button:not([disabled]) { opacity: 1 !important; }
	.blog-carousel .flickity-button::after {
		content: ""; position: absolute; z-index: 1; left: 50%; top: 50%; transform: scale(1.0);
		width: 60px; height: 60px; margin-left: -30px; margin-top: -30px; box-shadow: inset 0 0 0 1px var(--color-primary); opacity: .1; border-radius: inherit;
		transition: transform .2s ease, opacity .4s ease;
	}
	.blog-carousel .flickity-button:not([disabled]):hover { background-color: rgba(var(--color-body-rgb), 0.7) !important; }
	.blog-carousel .flickity-button:hover::after { transform: scale(1.05); opacity: .2; }
	.blog-carousel .flickity-button:active::after { transform: scale(0.95); opacity: .3; }
	.blog-carousel .flickity-button:disabled { opacity: 0; }

	.blog-carousel .flickity-prev-next-button .flickity-button-icon {
		position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
		width: 24px; height: 24px;
	}
}