/* Front-end styles for idig/portfolio-grid */
.idig-portfolio-grid{--idig-gap:18px;--idig-radius:18px;--idig-pad:14px;--idig-cols-d:3;--idig-cols-t:2;--idig-cols-m:1;--idig-ar:16/10}
.idig-portfolio-grid__filters{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 18px}
.idig-portfolio-grid__filters.is-align-left{justify-content:flex-start}
.idig-portfolio-grid__filters.is-align-center{justify-content:center}

.idig-portfolio-grid__filter{appearance:none;border:1px solid color-mix(in srgb,currentColor 14%,transparent);background:transparent;border-radius:999px;padding:10px 14px;cursor:pointer;transition:transform .15s ease,background .2s ease,color .2s ease}
.idig-portfolio-grid__filter:hover{transform:translateY(-1px)}
.idig-portfolio-grid__filter.is-active{background: var(--wp--preset--color--charcoal);color: var(--wp--preset--color--lime);border-color: var(--wp--preset--color--lime);}

/* Style variations */
.idig-portfolio-grid__filters.is-tabs .idig-portfolio-grid__filter{border-radius:12px}
.idig-portfolio-grid__filters.is-chips .idig-portfolio-grid__filter{padding:8px 12px}

.idig-portfolio-grid__grid{display:grid;gap:var(--idig-gap);grid-template-columns:repeat(var(--idig-cols-m),minmax(0,1fr))}
@media (min-width:600px){.idig-portfolio-grid__grid{grid-template-columns:repeat(var(--idig-cols-t),minmax(0,1fr))}}
@media (min-width:960px){.idig-portfolio-grid__grid{grid-template-columns:repeat(var(--idig-cols-d),minmax(0,1fr))}}

.idig-portfolio-grid__card{display:block;text-decoration:none;color:inherit;border:1px solid color-mix(in srgb,currentColor 12%,transparent);border-radius:var(--idig-radius);overflow:hidden;background:Canvas;box-shadow:0 8px 30px color-mix(in srgb,currentColor 10%,transparent);transform:translateZ(0);transition:transform .18s ease, box-shadow .18s ease}
.idig-portfolio-grid[data-hover="lift"] .idig-portfolio-grid__card:hover{transform:translateY(-3px);box-shadow:0 14px 44px color-mix(in srgb,currentColor 14%,transparent)}
.idig-portfolio-grid[data-hover="zoom"] .idig-portfolio-grid__card:hover .idig-portfolio-grid__media img{transform:scale(1.04)}
.idig-portfolio-grid[data-hover="none"] .idig-portfolio-grid__card{transition:none}

.idig-portfolio-grid__media{aspect-ratio:var(--idig-ar);background:linear-gradient(135deg,color-mix(in srgb,currentColor 8%,transparent),color-mix(in srgb,currentColor 2%,transparent))}
.idig-portfolio-grid__media img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1);transition:transform .25s ease}

.idig-portfolio-grid[data-media-position="left"] .idig-portfolio-grid__card{display:grid;grid-template-columns:40% 1fr}
.idig-portfolio-grid[data-media-position="left"] .idig-portfolio-grid__media{aspect-ratio:auto;min-height:100%}

.idig-portfolio-grid__content{padding:var(--idig-pad);text-align:left}
.idig-portfolio-grid[data-content-align="center"] .idig-portfolio-grid__content{text-align:center}

.idig-portfolio-grid__title{margin:0 0 6px;font-size:1.05rem;line-height:1.2}
.idig-portfolio-grid__subtitle{margin:0 0 8px;opacity:.78}
.idig-portfolio-grid__position{margin:0;opacity:.78;font-size:.95rem}

.idig-portfolio-grid__placeholder{width:100%;height:100%}

.idig-portfolio-grid__card.is-hidden{display:none}

/* ===== ANIMATION INTENSITY =====
   --idig-intensity: 1..12 (set inline on wrapper)
   We convert it into useful distances/scales/blur. */
.idig-portfolio-grid{
	--idig-intensity: 6;
	--idig-move: calc(var(--idig-intensity) * 4px);   /* 24px at intensity 6 */
	--idig-scaleFrom: calc(1 - (var(--idig-intensity) * 0.01)); /* 0.94 at intensity 6 */
	--idig-blur: calc(var(--idig-intensity) * 0.6px); /* 3.6px at intensity 6 */
}

/* Non-FLIP animation helpers */
.idig-portfolio-grid__card.anim-fade{animation:idigFade .35s cubic-bezier(.2,.8,.2,1) both}
.idig-portfolio-grid__card.anim-scale{animation:idigScale .40s cubic-bezier(.2,.8,.2,1) both}
.idig-portfolio-grid__card.anim-slide{animation:idigSlide .40s cubic-bezier(.2,.8,.2,1) both}

.idig-portfolio-grid__card.anim-pop{animation:idigPop .45s cubic-bezier(.2,.9,.2,1) both}
.idig-portfolio-grid__card.anim-cascade{animation:idigCascade .45s cubic-bezier(.2,.8,.2,1) both}
.idig-portfolio-grid__card.anim-flip3d{animation:idigFlip3d .50s cubic-bezier(.2,.8,.2,1) both; transform-origin:center top}
.idig-portfolio-grid__card.anim-blur{animation:idigBlur .45s cubic-bezier(.2,.8,.2,1) both}
.idig-portfolio-grid__card.anim-rise{animation:idigRise .45s cubic-bezier(.2,.8,.2,1) both}

@keyframes idigFade{
	from{opacity:0}
	to{opacity:1}
}

@keyframes idigScale{
	from{opacity:0;transform:scale(var(--idig-scaleFrom))}
	to{opacity:1;transform:scale(1)}
}

@keyframes idigSlide{
	from{opacity:0;transform:translateY(var(--idig-move))}
	to{opacity:1;transform:translateY(0)}
}

@keyframes idigPop{
	0%{opacity:0;transform:scale(calc(var(--idig-scaleFrom) - 0.04))}
	70%{opacity:1;transform:scale(1.03)}
	100%{transform:scale(1)}
}

@keyframes idigCascade{
	from{opacity:0;transform:translateY(calc(var(--idig-move) * 1.25))}
	to{opacity:1;transform:translateY(0)}
}

@keyframes idigFlip3d{
	from{opacity:0;transform:rotateX(calc(var(--idig-intensity) * -2deg)) translateY(var(--idig-move))}
	to{opacity:1;transform:none}
}

@keyframes idigBlur{
	from{opacity:0;filter:blur(var(--idig-blur));transform:translateY(calc(var(--idig-move) * .7))}
	to{opacity:1;filter:blur(0);transform:translateY(0)}
}

@keyframes idigRise{
	from{opacity:0;transform:translateY(calc(var(--idig-move) * 1.4))}
	to{opacity:1;transform:translateY(0)}
}