/**
 * Maracuya — Projects Grid + Filter
 * Every value comes from a CSS variable set by the block attributes.
 */

/* ── Filter bar ───────────────────────────────────────────────────────────── */
.mcya-pgrid__filter {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pg-filter-gap, 32px);
	align-items: center;
	margin-bottom: var(--pg-gap, 32px);
	padding: 0;
	width: 100%;
	box-sizing: border-box;
}
/* Filter bar wrapper (optional text label beside/above the buttons). */
.mcya-pgrid__filterbar { margin-bottom: var(--pg-gap, 32px); }
.mcya-pgrid__filterbar .mcya-pgrid__filter { margin-bottom: 0; }
.mcya-pgrid__filter-text {
	color: var(--pg-filter-text-color, inherit);
	font-weight: 500;
}
/* Text on the LEFT: label left, filter buttons centred in the remaining space. */
.mcya-pgrid__filterbar.is-textpos-left {
	display: flex;
	align-items: center;
	gap: 24px;
	flex-wrap: wrap;
}
.mcya-pgrid__filterbar.is-textpos-left .mcya-pgrid__filter-text { flex: 0 0 auto; }
.mcya-pgrid__filterbar.is-textpos-left .mcya-pgrid__filter {
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
	margin-bottom: 0;
}
.mcya-pgrid.is-filteralign-center .mcya-pgrid__filterbar.is-textpos-left { justify-content: center; }
.mcya-pgrid.is-filteralign-right  .mcya-pgrid__filterbar.is-textpos-left { justify-content: flex-end; }
.mcya-pgrid.is-filteralign-left   .mcya-pgrid__filterbar.is-textpos-left { justify-content: flex-start; }
/* Text on TOP: label above the buttons. */
.mcya-pgrid__filterbar.is-textpos-top {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
/* Alignment */
.mcya-pgrid.is-filteralign-left   .mcya-pgrid__filter { justify-content: flex-start; }
.mcya-pgrid.is-filteralign-center .mcya-pgrid__filter { justify-content: center; }
.mcya-pgrid.is-filteralign-right  .mcya-pgrid__filter { justify-content: flex-end; }
/* Optional top/bottom borders (mainly for the underline style). */
.mcya-pgrid.has-filter-borders .mcya-pgrid__filter {
	border-top: 1px solid var(--pg-filter-border, #e5e5e5);
	border-bottom: 1px solid var(--pg-filter-border, #e5e5e5);
}
/* Pill style never shows the top/bottom bar borders. */
.mcya-pgrid.is-filterstyle-pill .mcya-pgrid__filter {
	border-top: 0;
	border-bottom: 0;
}

.mcya-pgrid__btn {
	cursor: pointer;
	border: 0;
	background: transparent;
	padding: 0.75rem 0;
	font: inherit;
	font-size: var(--pg-filter-size, 16px);
	color: var(--pg-filter-color, var(--wp--preset--color--accent, currentColor));
	position: relative;
	transition: color 0.2s;
}
.mcya-pgrid__btn::after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: var(--pg-filter-underline, 3px);
	background: var(--pg-filter-active, var(--wp--preset--color--accent-hover, currentColor));
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.25s ease;
}
.mcya-pgrid__btn.is-active {
	color: var(--pg-filter-active, var(--wp--preset--color--accent-hover, currentColor));
}
.mcya-pgrid__btn.is-active::after { transform: scaleX(1); }

/* ── Filter style: TEXT (no underline) ─────────────────────────────────────── */
.mcya-pgrid.is-filterstyle-text .mcya-pgrid__btn::after { display: none; }
.mcya-pgrid.is-filterstyle-text .mcya-pgrid__btn { font-weight: 500; }
.mcya-pgrid.is-filterstyle-text .mcya-pgrid__btn.is-active { font-weight: 700; }

/* ── Filter style: PILL (rounded buttons) ──────────────────────────────────── */
.mcya-pgrid.is-filterstyle-pill .mcya-pgrid__btn {
	padding: 0.55rem 1.25rem;
	border-radius: 999px;
	background: var(--pg-filter-pill-bg, #f0f1f5);
	color: var(--pg-filter-color, #14181d);
	transition: background 0.2s, color 0.2s;
}
.mcya-pgrid.is-filterstyle-pill .mcya-pgrid__btn::after { display: none; }
.mcya-pgrid.is-filterstyle-pill .mcya-pgrid__btn:hover {
	background: var(--pg-filter-pill-active-bg, #3a55d9);
	color: var(--pg-filter-pill-active-text, #fff);
}
.mcya-pgrid.is-filterstyle-pill .mcya-pgrid__btn.is-active {
	background: var(--pg-filter-pill-active-bg, #3a55d9);
	color: var(--pg-filter-pill-active-text, #fff);
}

/* ── Grid ─────────────────────────────────────────────────────────────────── */
.mcya-pgrid__grid {
	display: grid;
	grid-template-columns: repeat(var(--pg-cols-m, 1), 1fr);
	gap: var(--pg-gap, 32px);
}
@media (min-width: 768px) {
	.mcya-pgrid__grid { grid-template-columns: repeat(var(--pg-cols-t, 2), 1fr); }
}
@media (min-width: 1025px) {
	.mcya-pgrid__grid { grid-template-columns: repeat(var(--pg-cols-d, 2), 1fr); }
}

/* ── Card ─────────────────────────────────────────────────────────────────── */
.mcya-pgrid__card {
	position: relative;
	overflow: hidden;
	display: block;
	text-decoration: none;
	line-height: 0;
	border-radius: var(--pg-radius, 0);
}

.mcya-pgrid__media {
	display: block;
	width: 100%;
}
.mcya-pgrid.has-aspect .mcya-pgrid__media {
	aspect-ratio: var(--pg-aspect, 16 / 9);
}
.mcya-pgrid__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.mcya-pgrid:not(.has-aspect) .mcya-pgrid__img { height: auto; }

/* Overlay: colour + opacity are separate so any colour source works. */
.mcya-pgrid__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: var(--pg-overlay-color, #0d0f12);
	opacity: 0;
	transition: opacity 0.6s ease;
}

/* Title */
.mcya-pgrid__title {
	position: absolute;
	inset: 0;
	display: flex;
	margin: 0;
	padding: var(--pg-title-pad, 20px);
	box-sizing: border-box;
	color: var(--pg-title-color, #fff);
	font-size: var(--pg-title-size, inherit);
	line-height: 1.3;
	opacity: 0;
	transition: opacity 0.4s ease;
	z-index: 2;
	pointer-events: none;
}
.mcya-pgrid.is-titlepos-top    .mcya-pgrid__title { align-items: flex-start; }
.mcya-pgrid.is-titlepos-center .mcya-pgrid__title { align-items: center; }
.mcya-pgrid.is-titlepos-bottom .mcya-pgrid__title { align-items: flex-end; }
.mcya-pgrid.is-titlealign-left   .mcya-pgrid__title { justify-content: flex-start; text-align: left; }
.mcya-pgrid.is-titlealign-center .mcya-pgrid__title { justify-content: center; text-align: center; }
.mcya-pgrid.is-titlealign-right  .mcya-pgrid__title { justify-content: flex-end; text-align: right; }

/* Visibility: always, or reveal on hover. */
.mcya-pgrid.is-title-always .mcya-pgrid__overlay { opacity: var(--pg-overlay-op, 0.5); }
.mcya-pgrid.is-title-always .mcya-pgrid__title { opacity: 1; }

.mcya-pgrid.is-title-hover .mcya-pgrid__card:hover .mcya-pgrid__overlay { opacity: var(--pg-overlay-op, 0.5); }
.mcya-pgrid.is-title-hover .mcya-pgrid__card:hover .mcya-pgrid__title { opacity: 1; }

/* ── Filter animation (stagger fade-in) ───────────────────────────────────── */
.mcya-pgrid.has-anim .mcya-pgrid__card {
	transition: opacity var(--pg-anim-dur, 500ms) cubic-bezier(.16, 1, .3, 1),
	            transform var(--pg-anim-dur, 500ms) cubic-bezier(.16, 1, .3, 1);
	transition-delay: var(--stagger, 0ms);
	will-change: opacity, transform;
}
.mcya-pgrid.has-anim .mcya-pgrid__card.is-enter {
	opacity: 0;
	transform: translateY(var(--pg-anim-offset, 16px)) scale(0.97);
	transition: none;
}

.mcya-pgrid__empty { margin: 0; }

/* ── Editor ───────────────────────────────────────────────────────────────── */
.mcya-pgrid-editor .mcya-pgrid__card { pointer-events: none; }

/* ── Touch "tap to reveal" ────────────────────────────────────────────────── */
/* On touch devices the hover title can't appear, so the first tap reveals it
   (JS adds .is-revealed) and the second tap follows the link. */
@media (hover: none) {
	.mcya-pgrid.is-title-hover .mcya-pgrid__card.is-revealed .mcya-pgrid__overlay {
		opacity: var(--pg-overlay-op, 0.5);
	}
	.mcya-pgrid.is-title-hover .mcya-pgrid__card.is-revealed .mcya-pgrid__title {
		opacity: 1;
	}
}

/* ══ Services card style ══════════════════════════════════════════════════════
   Static: image with title + excerpt bottom-left (always visible).
   Hover: a coloured circle grows from the TOP-RIGHT corner and fills the card;
   the content lifts up to make room for a text "read more" link with an arrow
   pinned to the right edge; a white star sits top-left and spins only while the
   circle is expanding (JS toggles .is-spinning), easing to a stop.
   Per-post colour = --pg-card-hover (inline from post meta). Radius = --pg-radius. */
.mcya-pgrid__card--services {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--pg-radius, 32px);
	text-decoration: none;
	line-height: 0;
}

.mcya-pgrid__card--services .mcya-pgrid__media {
	width: 100%;
}
.mcya-pgrid.has-aspect .mcya-pgrid__card--services .mcya-pgrid__media {
	aspect-ratio: var(--pg-aspect, 16 / 9);
}
.mcya-pgrid__card--services .mcya-pgrid__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Constant overlay so the white text stays readable on light photos. Sits above
   the image but below the expanding circle and the text. */
.mcya-pgrid__card--services .mcya-pgrid__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: var(--pg-overlay-color, #0d0f12);
	opacity: var(--pg-overlay-op, 0.5);
}

/* Expanding circle fill from the top-right corner. Grows with an ease-out
   (inertia) and fades in — opacity reaches 1 by roughly the middle of the grow,
   so the colour reads solid well before the circle finishes expanding. */
.mcya-pgrid__card--services .mcya-pgrid__fill {
	position: absolute;
	top: 0;
	right: 0;
	width: 0;
	height: 0;
	background: var(--pg-card-hover, #6ee7a0);
	border-radius: 50%;
	transform: translate(50%, -50%);
	opacity: 0;
	transition: width 0.85s cubic-bezier(0.16, 1, 0.3, 1),
	            height 0.85s cubic-bezier(0.16, 1, 0.3, 1),
	            opacity 0.4s ease;
	z-index: 1;
	pointer-events: none;
}
.mcya-pgrid__card--services:hover .mcya-pgrid__fill,
.mcya-pgrid__card--services.is-revealed .mcya-pgrid__fill {
	width: 320%;
	height: 320%;
	opacity: 1;
}

/* Alternative: circle grows from the BOTTOM-CENTRE (like the content lifting),
   as a true circle (not an oval), with no fade — same timing as the lift. */
.mcya-pgrid__card--services.is-fill-bottom .mcya-pgrid__fill {
	top: auto;
	bottom: 0;
	right: auto;
	left: 50%;
	/* Circle grows from diameter 0 (a real width/height grow, not a scale trick),
	   centred on the bottom edge, up to 300% of the card width — big enough to
	   cover the whole card for any aspect ratio. */
	width: 0;
	aspect-ratio: 1;
	height: auto;
	opacity: 1;
	transform: translate( -50%, 50% );
	transition: width 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
/* True circle: width and height both set to the SAME viewport-relative length
   (vmax) so the fill stays perfectly round regardless of the card's ratio, and
   is large enough to cover any card. */
.mcya-pgrid__card--services.is-fill-bottom:hover .mcya-pgrid__fill,
.mcya-pgrid__card--services.is-fill-bottom.is-revealed .mcya-pgrid__fill {
	width: 300%;
}

/* White star, top-left, half-tucked under the corner. Spins ONLY while the
   circle expands (.is-spinning added by JS on enter, removed after the spin). */
.mcya-pgrid__card--services .mcya-pgrid__pinwheel {
	position: absolute;
	top: 0;
	left: 0;
	width: 92px;
	height: 92px;
	transform: translate(-38%, -38%) rotate(0deg);
	color: #fff;
	opacity: 0;
	transition: opacity 0.3s ease 0.05s;
	z-index: 3;
	pointer-events: none;
	line-height: 0;
}
.mcya-pgrid__card--services .mcya-pgrid__pinwheel svg {
	width: 100%;
	height: 100%;
	display: block;
}
.mcya-pgrid__card--services:hover .mcya-pgrid__pinwheel,
.mcya-pgrid__card--services.is-revealed .mcya-pgrid__pinwheel {
	opacity: 1;
}
/* The one-shot inertial spin is triggered from JS (star.style.animation) so it
   runs only while the circle expands and eases to a stop. */
@keyframes mcya-pgrid-star-spin {
	from { transform: translate(-38%, -38%) rotate(var(--star-from, 0deg)); }
	to   { transform: translate(-38%, -38%) rotate(var(--star-to, 160deg)); }
}

/* Content: bottom-left, always visible; lifts on hover to reveal the link. */
.mcya-pgrid__card--services .mcya-pgrid__body {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-start;
	text-align: left;
	gap: 6px;
	padding: 28px;
	box-sizing: border-box;
	color: var(--pg-title-color, #fff);
	line-height: 1.3;
}
/* Honour the title-alignment control in this style too. */
.mcya-pgrid.is-titlealign-center .mcya-pgrid__card--services .mcya-pgrid__body { align-items: center; text-align: center; }
.mcya-pgrid.is-titlealign-right  .mcya-pgrid__card--services .mcya-pgrid__body { align-items: flex-end; text-align: right; }
/* Everything above the read-more shifts up by the link's height on hover. */
/* Title + excerpt sit in the flow; the read-more is absolute (bottom), so it
   takes no space. On hover we add bottom padding to the flow content, lifting
   BOTH together by exactly the read-more height — no per-element transforms. */
.mcya-pgrid__card--services .mcya-pgrid__body {
	transition: padding-bottom 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.mcya-pgrid__card--services:hover .mcya-pgrid__body,
.mcya-pgrid__card--services.is-revealed .mcya-pgrid__body {
	padding-bottom: 68px;
}
.mcya-pgrid__card--services .mcya-pgrid__title {
	/* Reset the overlay-style title rules so it aligns with the excerpt. */
	position: static !important;
	inset: auto !important;
	display: block !important;
	padding: 0 !important;
	margin: 0 !important;
	opacity: 1 !important;
	color: inherit;
	font-size: var(--pg-title-size, 1.4em) !important;
	font-weight: 600;
	line-height: 1.3;
}
.mcya-pgrid__card--services .mcya-pgrid__excerpt {
	margin: 0;
	padding: 0;
	font-size: 0.95em;
	line-height: 1.45;
}

/* Read-more: plain text link + arrow pinned to the right edge. Hidden until
   hover, then fades in where the lifted content made room. */
.mcya-pgrid__card--services .mcya-pgrid__more {
	position: absolute;
	left: 28px;
	right: 28px;
	bottom: 28px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	color: inherit;
	font-weight: 600;
	font-size: 0.95em;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 0.35s ease 0.1s, transform 0.35s ease 0.1s;
	z-index: 2;
	line-height: 1.3;
}
.mcya-pgrid__card--services:hover .mcya-pgrid__more,
.mcya-pgrid__card--services.is-revealed .mcya-pgrid__more {
	opacity: 1;
	transform: translateY(0);
}
.mcya-pgrid__card--services .mcya-pgrid__more-arrow {
	width: 1.5em;
	height: 1.5em;
	flex-shrink: 0;
}

@media (prefers-reduced-motion: reduce) {
	.mcya-pgrid__card--services .mcya-pgrid__fill,
	.mcya-pgrid__card--services .mcya-pgrid__title,
	.mcya-pgrid__card--services .mcya-pgrid__excerpt,
	.mcya-pgrid__card--services .mcya-pgrid__more { transition: none; }
	.mcya-pgrid__card--services .mcya-pgrid__pinwheel { animation: none !important; }
}

/* ══ CTA card (last "view all" card) ══════════════════════════════════════════
   Like a services card, but: star sits TOP-RIGHT on a coloured circle, the
   circle expands to fill on hover, the star does NOT spin, there's no read-more,
   and the content doesn't lift. Colours come from inline --pg-cta-* vars. */
/* Separate circular fill, centred on the star badge so it visually grows from
   under the star (not from the corner). translate(50%,-50%) centres it on the
   top/right point below, which we set to the star's centre (≈42px). */
.mcya-pgrid__card--cta .mcya-pgrid__fill {
	background: var(--pg-cta-circle, #c8f59d);
	top: 42px;
	right: 42px;
	transform: translate(50%, -50%);
}
.mcya-pgrid__card--cta:hover .mcya-pgrid__fill,
.mcya-pgrid__card--cta.is-revealed .mcya-pgrid__fill {
	width: 340%;
	height: 340%;
	opacity: 1;
}

/* The little badge circle fades out as the big fill takes over. */
.mcya-pgrid__card--cta .mcya-pgrid__cta-circle {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: var(--pg-cta-circle, #c8f59d);
	transition: opacity 0.3s ease;
}
.mcya-pgrid__card--cta:hover .mcya-pgrid__cta-circle,
.mcya-pgrid__card--cta.is-revealed .mcya-pgrid__cta-circle {
	opacity: 0;
}

/* Keep the CTA card the same size as the others: honour the grid aspect ratio
   even when it has no image, and never overflow its grid cell. */
.mcya-pgrid__card--cta { max-width: 100%; }
.mcya-pgrid.has-aspect .mcya-pgrid__card--cta .mcya-pgrid__media {
	aspect-ratio: var(--pg-aspect, 16 / 9);
	width: 100%;
	background: var(--pg-cta-circle, #c8f59d);
}
.mcya-pgrid:not(.has-aspect) .mcya-pgrid__card--cta .mcya-pgrid__media {
	min-height: 240px;
	background: var(--pg-cta-circle, #c8f59d);
}

/* The star badge: circle + star, top-right. The visible circle is the fill's
   starting state, so we hide the tiny star-circle once expanding — simplest is
   to let the star sit above the fill and keep its own small circle only at rest. */
.mcya-pgrid__card--cta .mcya-pgrid__cta-star {
	position: absolute;
	top: 20px;
	right: 20px;
	width: 44px;
	height: 44px;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}
.mcya-pgrid__card--cta .mcya-pgrid__cta-star svg {
	position: relative;
	width: 54%;
	height: 54%;
	color: var(--pg-cta-star, #2d3a8c);
}

/* CTA content stays put (no read-more, so no lift). */
.mcya-pgrid__card--cta .mcya-pgrid__body { padding-bottom: 28px !important; }
.mcya-pgrid__card--cta:hover .mcya-pgrid__body,
.mcya-pgrid__card--cta.is-revealed .mcya-pgrid__body { padding-bottom: 28px !important; }
.mcya-pgrid__card--cta .mcya-pgrid__title,
.mcya-pgrid__card--cta .mcya-pgrid__excerpt { transform: none !important; }

/* ── Pagination (page-number links) ───────────────────────────────────────── */
.mcya-pgrid__pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 8px;
	margin-top: 40px;
}
.mcya-pgrid__pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 12px;
	border-radius: 10px;
	text-decoration: none;
	font-size: 15px;
	line-height: 1;
	color: var(--pgrid-page-color, inherit);
	background: var(--pgrid-page-bg, transparent);
	border: 1px solid var(--pgrid-page-border, rgba(0,0,0,0.12));
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.mcya-pgrid__pagination .page-numbers:hover {
	background: var(--pgrid-page-hover-bg, rgba(0,0,0,0.05));
}
.mcya-pgrid__pagination .page-numbers.current {
	background: var(--pgrid-page-active-bg, var(--wp--preset--color--accent, #3a55d9));
	color: var(--pgrid-page-active-color, #fff);
	border-color: transparent;
}
.mcya-pgrid__pagination .page-numbers.dots {
	border: 0;
	background: transparent;
	min-width: auto;
	padding: 0 4px;
}