/**
 * Maracuya — Post Slider block
 *
 * A row of post strips. The active strip is wide; the rest are narrow vertical
 * bars with a rounded top. Hovering a strip expands it (and the others shrink),
 * while the caption below swaps to that post's title. Arrows page the row.
 */

.mcya-pslider {
	--pslider-gap: 14px;
	--pslider-height: 440px;
	--pslider-active: 3.4;   /* flex-grow of the active strip vs others */
}

.mcya-pslider__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 28px;
}

.mcya-pslider__heading {
	font-size: var(--pslider-heading-size, clamp(1.8rem, 1.3rem + 1.6vw, 2.6rem));
	color: var(--pslider-heading-color, inherit);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.02em;
	margin: 0 0 6px;
}

.mcya-pslider__subheading {
	font-size: var(--pslider-subheading-size, 1.05rem);
	color: var(--pslider-subheading-color, inherit);
	opacity: 0.7;
	margin: 0;
}

.mcya-pslider__nav {
	display: flex;
	gap: 10px;
	flex-shrink: 0;
}

.mcya-pslider__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: none;
	border-radius: 10px;
	background: rgba(59, 158, 255, 0.12);
	color: #3b9eff;
	cursor: pointer;
	transition: background 0.2s ease, transform 0.2s ease;
}

.mcya-pslider__arrow:hover {
	background: #3b9eff;
	color: #fff;
}

.mcya-pslider__arrow:disabled {
	opacity: 0.4;
	cursor: default;
	background: rgba(120, 120, 120, 0.12);
	color: currentColor;
}

/* ── Strips ───────────────────────────────────────────────────────────────── */

.mcya-pslider__viewport {
	overflow: hidden;
}

.mcya-pslider.is-mode-strip .mcya-pslider__track {
	display: flex;
	gap: var(--pslider-gap);
	height: var(--pslider-height);
}

.mcya-pslider__item {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	border-radius: var(--pslider-radius, 16px);
	overflow: hidden;
	cursor: pointer;
	text-decoration: none;
	transition: flex-grow 0.55s cubic-bezier(0.2, 0.7, 0.2, 1);
	flex-grow: 1;
}

.mcya-pslider__item.is-active {
	flex-grow: var(--pslider-active);
}

.mcya-pslider__item .mcya-pslider__img,
.mcya-pslider__item img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.mcya-pslider__item.is-active img {
	transform: scale(1.03);
}

/* Subtle dim on inactive strips */
.mcya-pslider__item::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(15, 23, 42, 0.18);
	opacity: 1;
	transition: opacity 0.4s ease;
}

.mcya-pslider__item.is-active::after {
	opacity: 0;
}

/* ── Caption ──────────────────────────────────────────────────────────────── */

.mcya-pslider__caption {
	margin-top: 22px;
	min-height: 2.4em;
}

.mcya-pslider__caption-text {
	font-size: var(--pslider-caption-size, clamp(1.2rem, 1rem + 0.8vw, 1.6rem));
	color: var(--pslider-caption-color, inherit);
	font-weight: 700;
	line-height: 1.25;
	transition: opacity 0.3s ease;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */

@media (max-width: 782px) {
	.mcya-pslider { --pslider-height: 300px; }

	.mcya-pslider__head {
		flex-direction: column;
		gap: 16px;
	}

	/* On mobile, switch to a horizontal scroll of fixed-width strips. */
	.mcya-pslider__viewport {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	.mcya-pslider__track {
		gap: 10px;
	}
	.mcya-pslider__item {
		flex: 0 0 70%;
		border-radius: var(--pslider-radius, 16px);
	}
	.mcya-pslider__item.is-active {
		flex: 0 0 70%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mcya-pslider__item,
	.mcya-pslider__item img {
		transition: none;
	}
}

/* ═══ Slider mode ══════════════════════════════════════════════════════════ */
.mcya-pslider.is-mode-slider .mcya-pslider__viewport {
	overflow: hidden;
}
.mcya-pslider.is-mode-slider .mcya-pslider__track {
	display: flex;
	align-items: flex-start;   /* don't stretch slides; let each slide's
	                              media (aspect-ratio) define its own height */
	gap: var(--pslider-gap, 20px);
	transition: transform var(--pslider-transition, 500ms) cubic-bezier(0.4, 0, 0.2, 1);
	will-change: transform;
}

/* Slides per view: width = (100% - gaps) / N. Mobile = 1, tablet/desktop vars. */
.mcya-pslider.is-mode-slider .mcya-pslider__slide {
	flex: 0 0 100%;              /* mobile default: 1 per view */
	box-sizing: border-box;
	text-decoration: none;
	display: block;
}
@media (min-width: 768px) {
	.mcya-pslider.is-mode-slider .mcya-pslider__slide {
		flex-basis: calc((100% - (var(--pslider-slides-t, 2) - 1) * var(--pslider-gap, 20px)) / var(--pslider-slides-t, 2));
	}
}
@media (min-width: 1025px) {
	.mcya-pslider.is-mode-slider .mcya-pslider__slide {
		flex-basis: calc((100% - (var(--pslider-slides-d, 3) - 1) * var(--pslider-gap, 20px)) / var(--pslider-slides-d, 3));
	}
}

/* One clean media box per slide. aspect-ratio sizes it; every child
   (image, overlay, caption) is absolutely pinned to it — nothing depends on
   another child's box. This is the canonical aspect-ratio + object-fit pattern. */
.mcya-pslider.is-mode-slider .mcya-pslider__slide .mcya-pslider__slide-media {
	position: relative;
	width: 100%;
	overflow: hidden;
	border-radius: var(--pslider-radius, 16px);
	aspect-ratio: var(--pslider-aspect, 3 / 4) !important;
	height: auto !important;
}
/* No fixed aspect chosen ("original"): fall back to the image's own ratio. */
.mcya-pslider.is-mode-slider.has-aspect .mcya-pslider__slide .mcya-pslider__slide-media {
	aspect-ratio: var(--pslider-aspect, 3 / 4) !important;
}
.mcya-pslider.is-mode-slider:not(.has-aspect) .mcya-pslider__slide .mcya-pslider__slide-media {
	aspect-ratio: auto !important;
}

/* Image fills the media box and is cropped with object-fit. */
.mcya-pslider.is-mode-slider .mcya-pslider__slide-media img,
.mcya-pslider.is-mode-slider .mcya-pslider__slide-media .mcya-pslider__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
	margin: 0;
	max-width: none;
}
/* Original ratio: image is in normal flow so the box grows to its height. */
.mcya-pslider.is-mode-slider:not(.has-aspect) .mcya-pslider__slide-media img,
.mcya-pslider.is-mode-slider:not(.has-aspect) .mcya-pslider__slide-media .mcya-pslider__img {
	position: relative;
	inset: auto;
	height: auto;
}

/* Overlay pinned to the media box. The element's own opacity is reserved for
   the hover show/hide; the colour + its transparency live on ::before, so any
   colour source (hex or theme palette) works and hover still toggles cleanly. */
.mcya-pslider.is-mode-slider .mcya-pslider__slide-overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}
.mcya-pslider.is-mode-slider .mcya-pslider__slide-overlay::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--pslider-overlay-color, #0d0f12);
	opacity: var(--pslider-overlay-op, 0.45);
}

/* Caption pinned to the media box; flexbox positions the text inside it. */
.mcya-pslider.is-mode-slider .mcya-pslider__slide-caption {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	padding: clamp(16px, 4%, 32px);
	box-sizing: border-box;
}
/* Vertical position of the text block within the slide. */
.mcya-pslider.is-textpos-top    .mcya-pslider__slide-caption { justify-content: flex-start; }
.mcya-pslider.is-textpos-center .mcya-pslider__slide-caption { justify-content: center; }
.mcya-pslider.is-textpos-bottom .mcya-pslider__slide-caption { justify-content: flex-end; }
/* Horizontal alignment of the text block. */
.mcya-pslider.is-textalign-left   .mcya-pslider__slide-caption { align-items: flex-start; text-align: left; }
.mcya-pslider.is-textalign-center .mcya-pslider__slide-caption { align-items: center; text-align: center; }
.mcya-pslider.is-textalign-right  .mcya-pslider__slide-caption { align-items: flex-end; text-align: right; }
.mcya-pslider.is-mode-slider .mcya-pslider__slide-title {
	color: var(--pslider-text-color, #fff);
	font-weight: 600;
	font-size: var(--pslider-text-size, clamp(18px, 2vw, 28px));
	line-height: 1.2;
	text-shadow: 0 1px 14px rgba(0,0,0,0.4);
	max-width: 90%;
}

/* ── Overlay style: caption + overlay always visible ──────────────────────── */
.mcya-pslider.is-style-overlay .mcya-pslider__slide-overlay,
.mcya-pslider.is-style-overlay .mcya-pslider__slide-caption {
	opacity: 1;
}

/* ── Hover-reveal style (desktop): clean image, text on hover ─────────────── */
@media (hover: hover) {
	.mcya-pslider.is-style-hover .mcya-pslider__slide-overlay,
	.mcya-pslider.is-style-hover .mcya-pslider__slide-caption {
		opacity: 0;
		transition: opacity 0.35s ease;
	}
	.mcya-pslider.is-style-hover .mcya-pslider__slide:hover .mcya-pslider__slide-overlay,
	.mcya-pslider.is-style-hover .mcya-pslider__slide:hover .mcya-pslider__slide-caption {
		opacity: 1;
	}
}

/* On touch (no hover): hover-style shows static text only if the toggle is on. */
@media (hover: none) {
	.mcya-pslider.is-style-hover.is-mobile-text .mcya-pslider__slide-overlay,
	.mcya-pslider.is-style-hover.is-mobile-text .mcya-pslider__slide-caption {
		opacity: 1;
	}
	.mcya-pslider.is-style-hover:not(.is-mobile-text) .mcya-pslider__slide-overlay,
	.mcya-pslider.is-style-hover:not(.is-mobile-text) .mcya-pslider__slide-caption {
		opacity: 0;
	}
}

/* ═══ Arrows ═══════════════════════════════════════════════════════════════ */
/* Hide arrows entirely. */
.mcya-pslider.arrows-hidden .mcya-pslider__nav,
.mcya-pslider.arrows-hidden .mcya-pslider__arrow { display: none; }

/* Apply the customisable look to both arrow styles. */
.mcya-pslider .mcya-pslider__arrow {
	color: var(--pslider-arrow-color, #fff);
	background: var(--pslider-arrow-bg, #0d0f12);
	width: var(--pslider-arrow-size, 44px);
	height: var(--pslider-arrow-size, 44px);
	border-radius: var(--pslider-arrow-radius, 50px);
	border: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: opacity 0.25s ease, transform 0.15s ease, background 0.2s ease;
}
.mcya-pslider .mcya-pslider__arrow:not(.mcya-pslider__arrow--side):hover { transform: scale(1.06); }
.mcya-pslider .mcya-pslider__arrow:disabled { opacity: 0.35; cursor: default; }

/* When arrows sit on the sides, hide the header nav. */
.mcya-pslider.arrows-sides .mcya-pslider__nav { display: none; }

/* Sides style: centered vertically on the viewport edges. */
.mcya-pslider.arrows-sides .mcya-pslider__viewport { position: relative; }
.mcya-pslider__arrow--side {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	opacity: 0;                 /* revealed on hover (desktop) */
}
.mcya-pslider__arrow--side[data-dir="prev"] { left: 14px; }
.mcya-pslider__arrow--side[data-dir="next"] { right: 14px; }
.mcya-pslider__arrow--side:hover { transform: translateY(-50%) scale(1.06); }

/* Reveal side arrows when hovering the slider (desktop with hover). */
@media (hover: hover) {
	.mcya-pslider.arrows-sides:hover .mcya-pslider__arrow--side { opacity: 1; }
}
/* Touch devices: show side arrows always if enabled, else keep them hidden. */
@media (hover: none) {
	.mcya-pslider.arrows-sides.arrows-touch .mcya-pslider__arrow--side { opacity: 1; }
	.mcya-pslider.arrows-sides:not(.arrows-touch) .mcya-pslider__arrow--side { display: none; }
}

/* ── Mobile: smaller arrows, tighter to the edges ─────────────────────────── */
@media (max-width: 767px) {
	.mcya-pslider .mcya-pslider__arrow {
		width: calc(var(--pslider-arrow-size, 44px) * 0.7);
		height: calc(var(--pslider-arrow-size, 44px) * 0.7);
	}
	.mcya-pslider .mcya-pslider__arrow svg {
		width: 16px;
		height: 16px;
	}
	.mcya-pslider__arrow--side[data-dir="prev"] { left: 6px; }
	.mcya-pslider__arrow--side[data-dir="next"] { right: 6px; }
}

/* ── Touch "tap to reveal" (hover style on touch devices) ─────────────────── */
/* First tap reveals the overlay + title (JS adds .is-revealed); the second tap
   follows the link. Mirrors the desktop hover behaviour. */
@media (hover: none) {
	.mcya-pslider.is-style-hover .mcya-pslider__slide.is-revealed .mcya-pslider__slide-overlay,
	.mcya-pslider.is-style-hover .mcya-pslider__slide.is-revealed .mcya-pslider__slide-caption {
		opacity: 1;
	}
}