/* JMarzTech Content Layouts Pro — card styles, hover effects, carousel and slider effects. */

/* ---------- card styles ----------
   The text area already has 1em padding all round (free plugin); these only add the surface. */
.jmcl-card-boxed .jmcl-card{background:var(--jmcl-card-bg,rgba(127,127,127,.07));overflow:hidden}
.jmcl-card-outlined .jmcl-card{background:var(--jmcl-card-bg,transparent);border:1px solid rgba(127,127,127,.25);overflow:hidden}
.jmcl-card-shadow .jmcl-card{background:var(--jmcl-card-bg,#fff);box-shadow:0 1px 2px rgba(22,18,31,.06),0 8px 24px rgba(22,18,31,.1);overflow:hidden}
.jmcl-card-boxed:not(.jmcl-cap-overlay):not(.jmcl-cap-hover) .jmcl-card .jmcl-media,
.jmcl-card-outlined:not(.jmcl-cap-overlay):not(.jmcl-cap-hover) .jmcl-card .jmcl-media,
.jmcl-card-shadow:not(.jmcl-cap-overlay):not(.jmcl-cap-hover) .jmcl-card .jmcl-media{border-radius:0}
.jmcl-card-boxed .jmcl-noimg,.jmcl-card-shadow .jmcl-noimg{border:0}
.jmcl-card-boxed.jmcl-style-list .jmcl-card>.jmcl-body,.jmcl-card-outlined.jmcl-style-list .jmcl-card>.jmcl-body,.jmcl-card-shadow.jmcl-style-list .jmcl-card>.jmcl-body{padding:var(--jmcl-pad,1em)}

/* ---------- hover effects ---------- */
.jmcl-hv-none .jmcl-card:hover .jmcl-media img{transform:none}
.jmcl-hv-zoom .jmcl-media img,.jmcl-hv-zoomout .jmcl-media img,.jmcl-hv-tint .jmcl-media img,.jmcl-hv-mono .jmcl-media img,.jmcl-hv-monorev .jmcl-media img,.jmcl-hv-lift .jmcl-media img{transition:transform var(--jmcl-hv-ms,300ms) ease,filter var(--jmcl-hv-ms,300ms) ease}
.jmcl-hv-zoom .jmcl-card:hover .jmcl-media img,.jmcl-hv-zoomout .jmcl-card:hover .jmcl-media img{transform:scale(var(--jmcl-hv-scale,1.04))}
.jmcl-hv-tint .jmcl-media::after{content:"";position:absolute;inset:0;pointer-events:none;background:var(--jmcl-hv-tint,#6D28D9);opacity:0;transition:opacity var(--jmcl-hv-ms,300ms) ease}
.jmcl-hv-tint .jmcl-card:hover .jmcl-media::after{opacity:var(--jmcl-hv-opacity,.4)}
.jmcl-hv-tint .jmcl-card:hover .jmcl-media img{transform:none}
.jmcl-hv-mono .jmcl-media img{filter:grayscale(0)}
.jmcl-hv-mono .jmcl-card:hover .jmcl-media img{filter:grayscale(var(--jmcl-hv-grey,1));transform:none}
.jmcl-hv-monorev .jmcl-media img{filter:grayscale(var(--jmcl-hv-grey,1))}
.jmcl-hv-monorev .jmcl-card:hover .jmcl-media img{filter:grayscale(0);transform:none}
.jmcl-hv-lift .jmcl-card{transition:transform var(--jmcl-hv-ms,300ms) ease,box-shadow var(--jmcl-hv-ms,300ms) ease}
.jmcl-hv-lift .jmcl-card:hover{transform:translateY(var(--jmcl-hv-lift,-6px));box-shadow:var(--jmcl-hv-shadow,0 10px 20px) rgba(22,18,31,.18)}
.jmcl-hv-lift .jmcl-card:hover .jmcl-media img{transform:none}
/* A tap should not leave an effect stuck on: on touch screens effects apply only while pressed. */
@media (hover:none){
	.jmcl-hv-zoom .jmcl-card:hover .jmcl-media img,.jmcl-hv-zoomout .jmcl-card:hover .jmcl-media img,.jmcl-hv-mono .jmcl-card:hover .jmcl-media img{transform:none;filter:none}
	.jmcl-hv-monorev .jmcl-card:hover .jmcl-media img{filter:grayscale(var(--jmcl-hv-grey,1))}
	.jmcl-hv-monorev .jmcl-card:active .jmcl-media img{filter:grayscale(0)}
	.jmcl-hv-tint .jmcl-card:hover .jmcl-media::after{opacity:0}
	.jmcl-hv-lift .jmcl-card:hover{transform:none;box-shadow:none}
}
@media (prefers-reduced-motion:reduce){
	.jmcl-hv-zoom .jmcl-card:hover .jmcl-media img,.jmcl-hv-zoomout .jmcl-card:hover .jmcl-media img,.jmcl-hv-lift .jmcl-card:hover{transform:none}
}

/* ---------- carousel: a peek of the next card ---------- */
.jmcl-peek .jmcl-slide{flex-basis:calc((100% - var(--jmcl-peek,10%) - (var(--jmcl-per-view) - 1) * var(--jmcl-gap)) / var(--jmcl-per-view))}
.jmcl-style-slider .jmcl-slide.is-active .jmcl-card{opacity:1}

/* ---------- fade ---------- */
.jmcl-mode-fade .jmcl-track{display:grid;overflow:hidden;scroll-snap-type:none}
.jmcl-mode-fade .jmcl-slide{grid-area:1/1;opacity:0;visibility:hidden;transition:opacity .6s ease,visibility 0s linear .6s}
.jmcl-mode-fade .jmcl-slide.is-active{opacity:1;visibility:visible;transition:opacity .6s ease,visibility 0s}
@media (prefers-reduced-motion:reduce){.jmcl-mode-fade .jmcl-slide{transition:none}}

/* ---------- coverflow ---------- */
.jmcl-mode-coverflow .jmcl-track{padding:10px 20%;scroll-padding:0 20%;scroll-snap-type:x mandatory;perspective:1200px}
.jmcl-mode-coverflow .jmcl-slide{flex-basis:100%;scroll-snap-align:center;transition:transform .45s ease,opacity .45s ease,filter .45s ease;transform:scale(.84);opacity:.55;filter:saturate(.7)}
.jmcl-mode-coverflow .jmcl-slide.is-active{transform:none;opacity:1;filter:none}
.jmcl-mode-coverflow .jmcl-slide.is-before{transform:scale(.84) rotateY(18deg)}
.jmcl-mode-coverflow .jmcl-slide.is-after{transform:scale(.84) rotateY(-18deg)}
@media (max-width:600px){.jmcl-mode-coverflow .jmcl-track{padding:10px 10%;scroll-padding:0 10%}.jmcl-mode-coverflow .jmcl-slide{flex-basis:100%}}
@media (prefers-reduced-motion:reduce){.jmcl-mode-coverflow .jmcl-slide{transition:none}}

/* ---------- autoplay pause button ---------- */
.jmcl-play{position:absolute;top:10px;right:10px;z-index:4;width:34px;height:34px;padding:0;border:0;border-radius:50%;background:rgba(22,18,31,.6);color:#fff;font-size:13px;line-height:34px;cursor:pointer;opacity:.75;transition:opacity .2s}
.jmcl-play:hover,.jmcl-play:focus-visible{opacity:1}
.jmcl-play:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* ---------- thumbnails ---------- */
.jmcl-thumbs{display:flex;gap:8px;margin-top:12px;overflow-x:auto;padding:2px;scrollbar-width:thin}
.jmcl-thumb{flex:0 0 auto;width:84px;height:60px;padding:0;border:2px solid transparent;border-radius:8px;overflow:hidden;background:none;cursor:pointer;opacity:.6;transition:opacity .2s,border-color .2s}
.jmcl-thumb img,.jmcl-thumb .jmcl-ph{display:block;width:100%;height:100%;object-fit:cover;font-size:1.2rem;aspect-ratio:auto}
.jmcl-thumb:hover{opacity:.9}
.jmcl-thumb[aria-current="true"]{opacity:1;border-color:var(--jmcl-accent,#6D28D9)}
.jmcl-thumb:focus-visible{outline:2px solid var(--jmcl-accent,#6D28D9);outline-offset:2px}
.jmcl-has-thumbs .jmcl-dots{display:none}

/* Text above the image on a coloured card: the image sits inside the card, 1em from its edges. */
.jmcl-card-boxed.jmcl-cap-above .jmcl-card:not(.jmcl-noimg) .jmcl-media,
.jmcl-card-outlined.jmcl-cap-above .jmcl-card:not(.jmcl-noimg) .jmcl-media,
.jmcl-card-shadow.jmcl-cap-above .jmcl-card:not(.jmcl-noimg) .jmcl-media{margin:0 var(--jmcl-pad,1em) var(--jmcl-pad,1em);border-radius:max(0px,calc(var(--jmcl-radius) - 4px))}
.jmcl-card-boxed.jmcl-cap-above .jmcl-card .jmcl-body,
.jmcl-card-outlined.jmcl-cap-above .jmcl-card .jmcl-body,
.jmcl-card-shadow.jmcl-cap-above .jmcl-card .jmcl-body{padding-bottom:calc(var(--jmcl-pad,1em) * .75)}