/*!
 * Themeasy — Bento Grid
 *
 * Asymmetric CSS-grid mosaic with per-cell column/row spans, an optional
 * featured (highlight) tile, a cursor-tracked spotlight glow and per-cell 3D
 * tilt / media zoom on hover.
 *
 * Layering:
 * - Structure (grid template, spans, content) is pure CSS and always present,
 *   so the widget is fully usable with no JavaScript.
 * - Motion (spotlight position, tilt, reveal) is layered on by GSAP and gated
 *   behind the --static (editor) and matchMedia desktop / reduced-motion
 *   conditions in the JS. The CSS keeps every cell visible by default.
 *
 * Tokens consumed: --tms-primary-color, --tms-heading-color, --tms-body-color,
 * --tms-surface-color, --tms-border-color, --tms-white-color, --tms-radius-lg,
 * --tms-transition-base (public --tms-* design API).
 *
 * @author Themeasy
 * @link https://themeasy.co
 * @since 1.0.0
 */
.tms-bento-grid{--tms-bento-accent:var(--tms-primary-color,#5b6cff);--tms-bento-spotlight:var(--tms-primary-color,#5b6cff);--tms-bento-spotlight-size:420px;--tms-bento-radius:var(--tms-radius-lg,20px);--tms-bento-ease:cubic-bezier(.22, 1, .36, 1);--tms-bento-mx:50%;--tms-bento-my:50%;--tms-bento-glow:0;width:100%;position:relative}.tms-bento-grid__spotlight{z-index:0;pointer-events:none;opacity:var(--tms-bento-glow,0);background:radial-gradient(var(--tms-bento-spotlight-size) circle at var(--tms-bento-mx) var(--tms-bento-my), var(--tms-bento-spotlight), transparent 60%);transition:opacity .4s var(--tms-bento-ease);will-change:opacity;position:absolute;top:0;bottom:0;left:0;right:0}.tms-bento-grid--static .tms-bento-grid__spotlight{display:none}.tms-bento-grid__grid{z-index:1;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:220px;gap:16px;display:grid;position:relative}.tms-bento-grid__cell{grid-column:span 1;grid-row:span var(--tms-bento-rspan,1);border:1px solid var(--tms-border-color,#ffffff14);border-radius:var(--tms-bento-radius);background-color:var(--tms-surface-color,#12131a);isolation:isolate;transition:border-color .4s var(--tms-bento-ease), box-shadow .4s var(--tms-bento-ease), transform .4s var(--tms-bento-ease);transform-style:preserve-3d;display:flex;position:relative;overflow:hidden}.tms-bento-grid:not(.tms-bento-grid--static) .tms-bento-grid__cell{will-change:transform}.tms-bento-grid__cell--highlight{border-color:var(--tms-bento-accent);box-shadow:inset 0 0 0 1px var(--tms-bento-accent)}.tms-bento-grid__cell--highlight:before{content:"";z-index:1;pointer-events:none;background:linear-gradient(135deg, color-mix(in srgb, var(--tms-bento-accent) 22%, transparent), transparent 60%);position:absolute;top:0;bottom:0;left:0;right:0}.tms-bento-grid__media{z-index:1;border-radius:inherit;position:absolute;top:0;bottom:0;left:0;right:0;overflow:hidden}.tms-bento-grid__media-inner{transition:transform .6s var(--tms-bento-ease);position:absolute;top:0;bottom:0;left:0;right:0;transform:scale(1)}.tms-bento-grid__media-inner .tms-bento-grid__image{object-fit:cover;width:100%;height:100%;display:block}.tms-bento-grid__overlay{position:absolute;top:0;bottom:0;left:0;right:0}.tms-bento-grid__overlay:before{content:"";background-image:linear-gradient(#0000,#08090e26 40%,#08090ed9);position:absolute;top:0;bottom:0;left:0;right:0}.tms-bento-grid--overlay-custom .tms-bento-grid__overlay:before{content:none}.tms-bento-grid--zoom .tms-bento-grid__cell--has-image:hover .tms-bento-grid__media-inner{transform:scale(1.06)}.tms-bento-grid__content{z-index:2;flex-direction:column;justify-content:flex-end;width:100%;padding:28px;display:flex;position:relative;transform:translateZ(.01px)}.tms-bento-grid__content-inner{display:block}.tms-bento-grid__icon{color:var(--tms-bento-accent);justify-content:center;align-items:center;margin-bottom:16px;font-size:36px;line-height:1;display:inline-flex}.tms-bento-grid__icon svg{fill:currentColor;width:36px;height:36px}.tms-bento-grid__icon svg[fill=none]{fill:none;stroke:currentColor}.tms-bento-grid__eyebrow{font-family:var(--tms-accent-font);font-size:var(--tms-font-size-xs,.75rem);font-weight:var(--tms-bold-font-weight,700);letter-spacing:.08em;text-transform:uppercase;color:var(--tms-bento-accent);display:block}.tms-bento-grid__title{color:var(--tms-heading-color,#f5f6fa);font-size:var(--tms-h4-font-size,1.5rem);font-family:var(--tms-heading-font,inherit);font-weight:var(--tms-heading-font-weight,600);line-height:var(--tms-heading-line-height,1.2);margin:0}.tms-bento-grid__description{font-size:var(--tms-font-size-md,1rem);line-height:var(--tms-body-line-height,1.6);color:var(--tms-body-color,#f5f6fab8);margin:.5em 0 0}.tms-bento-grid__cell--has-image .tms-bento-grid__title{color:var(--tms-white-color,#fff)}.tms-bento-grid__cell--has-image .tms-bento-grid__description{color:#ffffffd1}.tms-bento-grid__link{z-index:3;position:absolute;top:0;bottom:0;left:0;right:0}.tms-bento-grid__link-label{clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.tms-bento-grid__arrow{width:22px;height:22px;color:var(--tms-bento-accent);transition:transform .4s var(--tms-bento-ease);margin-top:18px;display:inline-block;position:relative}.tms-bento-grid__arrow:before,.tms-bento-grid__arrow:after{content:"";position:absolute}.tms-bento-grid__arrow:before{background-color:currentColor;width:100%;height:2px;top:50%;left:0;transform:translateY(-50%)}.tms-bento-grid__arrow:after{border-top:2px solid;border-right:2px solid;width:10px;height:10px;top:50%;right:0;transform:translateY(-50%)rotate(45deg)}.tms-bento-grid__cell:hover .tms-bento-grid__arrow{transform:translate(6px)}.tms-bento-grid__link:focus-visible{outline:2px solid var(--tms-bento-accent);outline-offset:3px}.tms-bento-grid--revealing .tms-bento-grid__cell{opacity:0}@media (min-width:768px){.tms-bento-grid__cell{grid-column:span var(--tms-bento-cspan,1)}}@media (prefers-reduced-motion:reduce){.tms-bento-grid__cell,.tms-bento-grid__media-inner,.tms-bento-grid__arrow,.tms-bento-grid__spotlight{transition:none!important}.tms-bento-grid--revealing .tms-bento-grid__cell{opacity:1}}