/* SLTC Interactive Bento Gallery — v6.6.0 */

.sltc-gallery-page{background:#0b0f1a;color:#e6ecf5;min-height:100vh}
.sltc-gallery-hero{padding:80px 0 30px;text-align:center;background:radial-gradient(1200px 500px at 50% -10%,rgba(99,140,255,.25),transparent 60%),#0b0f1a}
.sltc-gallery-eyebrow{display:inline-block;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:#7ea4ff;background:rgba(126,164,255,.1);padding:6px 14px;border-radius:999px;margin-bottom:14px}
.sltc-gallery-title{font-size:clamp(2.2rem,5vw,3.6rem);font-weight:800;letter-spacing:-.02em;margin:0 0 12px;background:linear-gradient(180deg,#fff,#9fb5dd);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.sltc-gallery-sub{max-width:640px;margin:0 auto;color:#9aa6bd;font-size:1rem;line-height:1.6}
.sltc-gallery-wrap{padding:40px 0 100px}

/* Filter chips */
.sltc-gallery-filters{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:36px}
.sltc-gf-chip{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);color:#cfd8eb;padding:8px 16px;border-radius:999px;cursor:pointer;font-size:13px;font-weight:500;transition:all .25s ease;font-family:inherit}
.sltc-gf-chip:hover{background:rgba(255,255,255,.1);color:#fff;transform:translateY(-1px)}
.sltc-gf-chip.is-active{background:linear-gradient(135deg,#3b6cf6,#8a5cff);color:#fff;border-color:transparent;box-shadow:0 6px 20px rgba(59,108,246,.4)}

.sltc-gallery-empty{text-align:center;padding:80px 20px;color:#9aa6bd;background:rgba(255,255,255,.03);border:1px dashed rgba(255,255,255,.1);border-radius:16px}

/* Bento Grid */
.sltc-bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:180px;gap:14px;perspective:1200px}
.sltc-bento-tile{position:relative;border-radius:18px;overflow:hidden;cursor:pointer;background:#1a2236;border:1px solid rgba(255,255,255,.06);padding:0;transition:transform .5s cubic-bezier(.22,1,.36,1),box-shadow .4s ease;opacity:0;transform:translateY(20px) scale(.95);animation:sltc-bento-in .6s cubic-bezier(.22,1,.36,1) var(--d,0ms) forwards;font-family:inherit;color:#fff;text-align:left;will-change:transform}
@keyframes sltc-bento-in{to{opacity:1;transform:translateY(0) scale(1)}}
.sltc-bento-tile.is-hidden{display:none}
.sltc-bento-tile:hover{transform:translateY(-6px) scale(1.02);box-shadow:0 24px 50px -20px rgba(59,108,246,.5),0 0 0 1px rgba(126,164,255,.3)}
.sltc-bento-tile:hover .sltc-bento-img{transform:scale(1.08)}
.sltc-bento-tile:hover .sltc-bento-shade{opacity:.95}
.sltc-bento-tile:hover .sltc-bento-cap{transform:translateY(0)}
.sltc-bento-tile:hover .sltc-bento-play{transform:translate(-50%,-50%) scale(1.15)}
.sltc-bento-tile:focus-visible{outline:2px solid #7ea4ff;outline-offset:3px}

.sltc-bento-tile--small{grid-column:span 1;grid-row:span 1}
.sltc-bento-tile--wide{grid-column:span 2;grid-row:span 1}
.sltc-bento-tile--tall{grid-column:span 1;grid-row:span 2}
.sltc-bento-tile--large{grid-column:span 2;grid-row:span 2}

.sltc-bento-media{position:absolute;inset:0;overflow:hidden}
.sltc-bento-img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s cubic-bezier(.22,1,.36,1)}
.sltc-bento-shade{position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(7,11,22,.85) 100%);opacity:.7;transition:opacity .4s ease;pointer-events:none}
.sltc-bento-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:56px;height:56px;border-radius:50%;background:rgba(255,255,255,.95);color:#0b0f1a;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(0,0,0,.4);transition:transform .35s cubic-bezier(.22,1,.36,1)}
.sltc-bento-play svg{margin-left:3px}
.sltc-bento-cap{position:absolute;left:0;right:0;bottom:0;padding:16px 18px;color:#fff;transform:translateY(8px);transition:transform .4s ease;pointer-events:none}
.sltc-bento-tag{display:inline-block;font-size:10px;letter-spacing:.18em;text-transform:uppercase;background:rgba(255,255,255,.18);backdrop-filter:blur(8px);padding:4px 10px;border-radius:999px;margin-bottom:8px}
.sltc-bento-title{display:block;font-size:1rem;font-weight:600;line-height:1.3;text-shadow:0 2px 10px rgba(0,0,0,.6)}

/* Tablet */
@media (max-width:1024px){
  .sltc-bento{grid-template-columns:repeat(3,1fr);grid-auto-rows:160px}
  .sltc-bento-tile--large,.sltc-bento-tile--wide{grid-column:span 2}
}
/* Mobile */
@media (max-width:640px){
  .sltc-gallery-hero{padding:50px 0 20px}
  .sltc-bento{grid-template-columns:repeat(2,1fr);grid-auto-rows:140px;gap:10px}
  .sltc-bento-tile--large{grid-column:span 2;grid-row:span 2}
  .sltc-bento-tile--wide{grid-column:span 2;grid-row:span 1}
  .sltc-bento-tile--tall{grid-column:span 1;grid-row:span 2}
  .sltc-bento-tile--small{grid-column:span 1;grid-row:span 1}
  .sltc-bento-cap{padding:12px 14px;transform:translateY(0)}
  .sltc-bento-title{font-size:.85rem}
  .sltc-bento-play{width:46px;height:46px}
}

/* Modal */
.sltc-bento-modal{position:fixed;inset:0;background:rgba(7,11,22,.92);backdrop-filter:blur(14px);z-index:10000;display:none;align-items:center;justify-content:center;padding:24px;opacity:0;transition:opacity .35s ease}
.sltc-bento-modal.is-open{display:flex;opacity:1}
.sltc-bento-modal-close{position:fixed;top:18px;right:20px;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:#fff;font-size:28px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:2;transition:background .2s ease,transform .2s ease}
.sltc-bento-modal-close:hover{background:rgba(255,255,255,.2);transform:rotate(90deg)}
.sltc-bento-modal-nav{position:fixed;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:#fff;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:2;transition:background .2s,transform .2s}
.sltc-bento-modal-nav:hover{background:rgba(255,255,255,.2)}
.sltc-bento-modal-nav--prev{left:20px}
.sltc-bento-modal-nav--next{right:20px}

.sltc-bento-modal-card{background:#121a2e;border-radius:20px;overflow:hidden;display:grid;grid-template-columns:1.4fr 1fr;max-width:1100px;width:100%;max-height:90vh;box-shadow:0 30px 80px rgba(0,0,0,.6);transform:scale(.92);transition:transform .4s cubic-bezier(.22,1,.36,1);border:1px solid rgba(255,255,255,.08)}
.sltc-bento-modal.is-open .sltc-bento-modal-card{transform:scale(1)}
.sltc-bento-modal-media{background:#000;display:flex;align-items:center;justify-content:center;min-height:300px;max-height:90vh;overflow:hidden}
.sltc-bento-modal-media img,.sltc-bento-modal-media video{max-width:100%;max-height:90vh;width:100%;height:100%;object-fit:contain;display:block}
.sltc-bento-modal-media iframe{width:100%;height:100%;min-height:480px;border:0}
.sltc-bento-modal-meta{padding:36px 32px;color:#e6ecf5;display:flex;flex-direction:column;gap:14px;overflow-y:auto}
.sltc-bento-modal-tag{align-self:flex-start;font-size:10px;letter-spacing:.2em;text-transform:uppercase;background:linear-gradient(135deg,#3b6cf6,#8a5cff);padding:5px 12px;border-radius:999px}
.sltc-bento-modal-tag:empty{display:none}
.sltc-bento-modal-title{font-size:1.6rem;font-weight:700;margin:0;line-height:1.25}
.sltc-bento-modal-desc{color:#9aa6bd;font-size:.95rem;line-height:1.7;margin:0}
.sltc-bento-modal-count{margin-top:auto;font-size:12px;color:#7a86a0;letter-spacing:.1em}

@media (max-width:900px){
  .sltc-bento-modal{padding:0}
  .sltc-bento-modal-card{grid-template-columns:1fr;max-height:100vh;height:100vh;border-radius:0}
  .sltc-bento-modal-media{max-height:55vh;min-height:200px}
  .sltc-bento-modal-media iframe{min-height:300px}
  .sltc-bento-modal-meta{padding:20px 22px;gap:10px}
  .sltc-bento-modal-title{font-size:1.2rem}
  .sltc-bento-modal-nav{width:40px;height:40px}
  .sltc-bento-modal-nav--prev{left:8px}
  .sltc-bento-modal-nav--next{right:8px}
  .sltc-bento-modal-close{top:10px;right:10px;width:38px;height:38px;font-size:22px}
}