/* Mavan Page Grid — base styles (override in the widget's Style tab) */

.mavan-page-grid {--mavan-page-grid-gap: 24px;}

/* Grid */
.mavan-page-grid {--mavan-scroll-offset: 120px;}
.mavan-page-grid__grid {--mavan-cols: 3; display: grid; grid-template-columns: repeat(var(--mavan-cols), minmax(0, 1fr)); gap: 40px var(--mavan-page-grid-gap);}
/* Card layout — driven by CSS variables the widget's "Card Layout" controls set
   per breakpoint (Top / Bottom / Left / Right / Behind). Defaults = image on top. */
.mavan-page-grid a.mavan-page-grid__item, .mavan-page-grid a.mavan-page-grid__item:is(:hover, :focus, :active, :visited) {color: inherit; text-decoration: none;}
.mavan-page-grid__item {position: relative; box-sizing: border-box; display: var(--mc-display, flex); flex-direction: var(--mc-dir, column); grid-template-areas: "stack"; grid-template-columns: minmax(0, 1fr); gap: var(--mavan-card-inner-gap, var(--mc-gap-default, 0px)); color: inherit; text-decoration: none; transition: background-color var(--mavan-card-speed, .3s) ease, border-color var(--mavan-card-speed, .3s) ease, box-shadow var(--mavan-card-speed, .3s) ease, transform var(--mavan-card-speed, .3s) ease;}
.mavan-page-grid__item > .mavan-page-grid__image {position: relative; grid-area: stack; justify-self: stretch; max-width: 100%; flex: var(--mc-img-flex, 0 0 auto); align-self: var(--mc-img-self, stretch); min-width: 0;}
.mavan-page-grid__image::after {content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background-color: var(--mc-overlay, transparent); transition: background-color var(--mavan-card-speed, .3s) ease;}
.mavan-card-shade-yes .mavan-page-grid__image::after {background-image: var(--mc-shade, none);}
.mavan-page-grid__content {position: relative; z-index: 2; grid-area: stack; box-sizing: border-box; display: flex; flex-direction: column; flex: 1 1 auto; justify-content: var(--mc-justify, var(--mc-justify-default, flex-start)); min-width: 0; padding: var(--mc-pad-default, 0); text-align: var(--mc-text-align, inherit); color: var(--mc-text, inherit); pointer-events: var(--mc-pe, auto);}
.mavan-page-grid__content a {pointer-events: auto;}
.mavan-page-grid__item[hidden] {display: none;}
.mavan-page-grid__item.is-entering {animation: mavan-page-grid-in .35s ease both;}
@keyframes mavan-page-grid-in {from {opacity: 0; transform: translateY(8px);} to {opacity: 1; transform: none;}}

.mavan-page-grid__image {display: block; aspect-ratio: var(--mc-ratio-override, var(--mavan-img-ratio, 4 / 3)); overflow: hidden; isolation: isolate; border-radius: 10px; background: rgba(0, 0, 0, .06);}
.mavan-page-grid__image img {display: block; width: 100%; height: 100%; object-fit: cover;}

.mavan-page-grid__title {margin: 14px 0 0; font-size: .9375rem; font-weight: 600; line-height: 1.35; color: inherit; transition: color .2s ease;}
/* Titles follow the card text colour even when the Kit sets a heading colour (class + tag beats the Kit's "h3") */
:where(.mavan-page-grid__content) > :is(h1, h2, h3, h4, h5, h6, div, p, span).mavan-page-grid__title {color: var(--mc-text, inherit);}
.mavan-page-grid__excerpt {display: block; margin-top: 4px; font-size: .875rem; opacity: .75;}
.mavan-page-grid__image img {transition: opacity var(--mavan-card-speed, .3s) ease;}

/* Hover zoom — own GPU layer + ease-out curve for a smooth, shimmer-free scale */
.mavan-page-grid-zoom-yes .mavan-page-grid__image {-webkit-mask-image: -webkit-radial-gradient(white, black); transform: translateZ(0);}
.mavan-page-grid-zoom-yes .mavan-page-grid__image img {transform: translateZ(0) scale(1); backface-visibility: hidden; will-change: transform; transition: transform .7s cubic-bezier(.22, .61, .36, 1);}
.mavan-page-grid-zoom-yes .mavan-page-grid__item:is(:hover, :focus-visible) .mavan-page-grid__image img {transform: translateZ(0) scale(1.05);}

.mavan-page-grid__empty {margin: 24px 0 0; opacity: .7;}
.mavan-page-grid__notice {padding: 20px; text-align: center; border: 1px dashed currentColor; opacity: .6;}

@media (max-width: 1024px) {.mavan-page-grid__grid {--mavan-cols: 2;}}
@media (max-width: 767px)  {.mavan-page-grid__grid {--mavan-cols: 1;}}

/* Pagination */
.mavan-page-grid__pagination {display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-top: 48px;}
.mavan-page-grid .mavan-page-grid__pagination[hidden] {display: none;}
/* Spread (grid) layout: Previous hugs the left, Next the right, numbers in the true center */
.mavan-page-grid .mavan-page-grid__page--prev {justify-self: start;}
.mavan-page-grid .mavan-page-grid__page--next {justify-self: end;}
/* Page buttons are role="button" spans (not <button>), so site-wide button styles never apply. */
.mavan-page-grid .mavan-page-grid__page {display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-width: 44px; min-height: 44px; margin: 0; padding: 10px 16px; font: inherit; font-size: .9375rem; line-height: 1; color: inherit; background: #fff; border: 0; border-radius: 999px; cursor: pointer; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; transition: background-color .2s ease, color .2s ease, opacity .2s ease;}
.mavan-page-grid .mavan-page-grid__page:is(:hover, :focus) {color: inherit; background: rgba(0, 0, 0, .06);}
.mavan-page-grid .mavan-page-grid__page:focus-visible {outline: 2px solid currentColor; outline-offset: 2px;}
.mavan-page-grid .mavan-page-grid__page[aria-current="page"] {color: #fff; background: #0F0F0F; cursor: default;}
.mavan-page-grid .mavan-page-grid__page[aria-disabled="true"] {opacity: .4; cursor: default; pointer-events: none;}
.mavan-page-grid .mavan-page-grid__page--more {padding: 14px 28px; font-weight: 600;}
.mavan-page-grid__ellipsis {min-width: 24px; text-align: center; opacity: .6;}
.mavan-page-grid__numbers {display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px;}
.mavan-page-grid .mavan-page-grid__page:is(.mavan-page-grid__page--prev, .mavan-page-grid__page--next) {gap: 8px;}
.mavan-page-grid__page-icon {display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 14px; height: 14px; font-size: 14px; line-height: 1;}
.mavan-page-grid__page-icon :is(svg, img) {display: block; width: 100%; height: 100%; object-fit: contain;}
.mavan-page-grid__page-icon--icon svg {fill: currentColor;}
.mavan-page-grid__page-icon i {font-size: inherit;}
.mavan-page-grid__sr {position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;}


@media (prefers-reduced-motion: reduce) {
	.mavan-page-grid__item.is-entering {animation: none;}
	.mavan-page-grid-zoom-yes .mavan-page-grid__image img {transition: none;}
}

/* Gallery Grid (extends the Page Grid) */
.mavan-gallery-grid__item {margin: 0;}
.mavan-gallery-grid .mavan-page-grid__image {display: block;}
.mavan-gallery-grid__content {margin-top: 12px;}
.mavan-gallery-grid__content .mavan-page-grid__title {margin-top: 0;}

/* Lightbox arrows fallback — Elementor positions these with its Swiper CSS,
   which isn't always loaded on pages without a carousel. */
.elementor-lightbox .elementor-swiper-button {position: absolute; top: 50%; z-index: 1; display: inline-flex; align-items: center; justify-content: center; padding: 10px; font-size: var(--lightbox-navigation-icons-size, 25px); line-height: 1; color: var(--lightbox-ui-color, rgba(238, 238, 238, .9)); cursor: pointer; transform: translateY(-50%); outline: none;}
.elementor-lightbox .elementor-swiper-button:hover {color: var(--lightbox-ui-color-hover, #fff);}
.elementor-lightbox .elementor-swiper-button-prev {left: 10px;}
.elementor-lightbox .elementor-swiper-button-next {right: 10px;}
.elementor-lightbox .elementor-swiper-button svg {width: 1em; height: 1em; fill: currentColor;}
.elementor-lightbox .elementor-swiper-button.swiper-button-disabled {opacity: .3; cursor: default;}
.elementor-lightbox .elementor-swiper-button.swiper-button-lock {display: none;}

/* Post Grid (extends the Page Grid) — blog cards */
.mavan-post-grid__item {margin: 0;}
:where(.mavan-post-grid) .mavan-page-grid__image {border-radius: 12px;}
.mavan-post-grid__meta {display: flex; flex-wrap: wrap; align-items: center; justify-content: var(--mc-items, flex-start); gap: 8px 12px; margin-top: 18px;}
.mavan-post-grid__badge {display: inline-block; padding: 6px 12px; font-size: .75rem; font-weight: 600; line-height: 1.4; color: var(--color-navy-blue, #1E3A5F); background-color: var(--color-ice-blue, #F3FBFE); border-radius: 4px;}
.mavan-post-grid__date {font-size: .75rem; color: var(--mc-text, var(--color-gray, #6C6C6C));}
:where(.mavan-post-grid .mavan-page-grid__content) > :is(h1, h2, h3, h4, h5, h6, div, p, span).mavan-page-grid__title {margin-top: 18px; font-size: 1rem; line-height: 1.4; color: var(--mc-text, var(--color-black, #0F0F0F));}
/* Card links ignore the Kit's global link colour (Site Settings → Typography → Links):
   they take the card / title colour, so the widget's own color settings work. */
.mavan-page-grid .mavan-page-grid__title a.mavan-post-grid__link,
.mavan-page-grid .mavan-page-grid__title a.mavan-post-grid__link:is(:hover, :focus, :active, :visited) {color: inherit; text-decoration: none;}
.mavan-page-grid .mavan-page-grid__item a.mavan-post-grid__more {color: var(--mavan-more-color, var(--mc-text, var(--color-navy-blue, #1E3A5F))); text-decoration: none;}
/* Hover colour on real hover / keyboard focus only — not :visited (posts you've
   read would look hovered) or plain :focus (a clicked link keeps focus after
   the browser's Back button). Visited links still beat the Kit's link colour
   through the rule above, which matches every state. */
.mavan-page-grid .mavan-page-grid__item a.mavan-post-grid__more:is(:hover, :focus-visible) {color: var(--mavan-more-hover, var(--mavan-more-color, var(--mc-text, var(--color-navy-blue, #1E3A5F))));}
:where(.mavan-post-grid) .mavan-page-grid__excerpt {margin: 8px 0 0; font-size: .875rem; line-height: 1.6; color: var(--mc-text, var(--color-gray, #6C6C6C)); opacity: 1;}
.mavan-post-grid__more {display: inline-flex; align-items: center; gap: 6px; align-self: var(--mc-items, flex-start); margin-top: var(--mavan-more-gap, 18px); padding-bottom: 2px; font-size: .75rem; font-weight: 600; line-height: 1.4; color: var(--mc-text, var(--color-navy-blue, #1E3A5F)); text-decoration: none; transition: color .2s ease, gap .2s ease;}
.mavan-post-grid-underline-yes .mavan-post-grid__more {border-bottom: 1px solid currentColor;}
/* Bottom-aligned: the gap becomes padding so margin-top:auto can push it down */
.mavan-post-grid-more-bottom-yes .mavan-post-grid__more {margin-top: auto; padding-top: var(--mavan-more-gap, 18px);}
.mavan-post-grid__arrow {display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 10px; height: 10px; font-size: 10px; line-height: 1; transition: transform .2s ease;}
.mavan-post-grid__arrow :is(svg, img) {display: block; width: 100%; height: 100%; object-fit: contain;}
.mavan-post-grid__arrow i {font-size: inherit; line-height: 1;}
/* Library icons + uploaded SVGs follow the icon color, unless "Keep uploaded SVG's own colors" is on */
.elementor-widget:not(.mavan-post-grid-svg-own-yes) .mavan-post-grid__arrow--icon svg {fill: currentColor;}
.elementor-widget:not(.mavan-post-grid-svg-own-yes) .mavan-post-grid__arrow--icon svg :is(path, circle, rect, polygon, ellipse, line, polyline):not([fill="none"]) {fill: currentColor;}
.elementor-widget:not(.mavan-post-grid-svg-own-yes) .mavan-post-grid__arrow--icon svg [stroke]:not([stroke="none"]) {stroke: currentColor;}
.mavan-post-grid-icon-before .mavan-post-grid__arrow {order: -1;}
.mavan-post-grid-nudge-yes .mavan-post-grid__more:is(:hover, :focus-visible) .mavan-post-grid__arrow,
.mavan-post-grid-nudge-yes .mavan-post-grid__item:hover .mavan-post-grid__arrow {transform: translateX(3px);}
.mavan-post-grid-nudge-yes.mavan-post-grid-icon-before .mavan-post-grid__more:is(:hover, :focus-visible) .mavan-post-grid__arrow,
.mavan-post-grid-nudge-yes.mavan-post-grid-icon-before .mavan-post-grid__item:hover .mavan-post-grid__arrow {transform: translateX(-3px);}
@media (prefers-reduced-motion: reduce) {.mavan-post-grid__arrow {transition: none;}}