.interactive-bento-gallery{max-width:64rem;margin:0 auto;padding:var(--spacing-xl) var(--spacing-md)}.interactive-bento-gallery__header{margin-bottom:var(--spacing-xl);text-align:center}.interactive-bento-gallery__title{font-size:clamp(1.5rem,4vw,2.5rem);font-weight:var(--font-weight-bold);background:linear-gradient(135deg,var(--color-text) 0,var(--color-text-secondary) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:var(--spacing-xs)}.interactive-bento-gallery__description{margin-top:var(--spacing-sm);font-size:clamp(.875rem,2vw,1rem);color:var(--color-text-secondary)}.interactive-bento-gallery__grid{display:grid;grid-template-columns:1fr;gap:var(--spacing-sm);grid-auto-rows:80px}@media (min-width:640px){.interactive-bento-gallery__grid{grid-template-columns:repeat(3,1fr);grid-auto-rows:60px}}@media (min-width:1024px){.interactive-bento-gallery__grid{grid-template-columns:repeat(4,1fr)}}.interactive-bento-gallery__item{position:relative;overflow:hidden;border-radius:var(--radius-lg);cursor:move}.interactive-bento-gallery__item--span-1,.interactive-bento-gallery__item--span-2,.interactive-bento-gallery__item--span-3,.interactive-bento-gallery__item--span-large,.interactive-bento-gallery__item--span-tall,.interactive-bento-gallery__item--span-wide{grid-column:span 1;grid-row:span 2}@media (min-width:640px){.interactive-bento-gallery__item--span-1{grid-column:span 1;grid-row:span 2}.interactive-bento-gallery__item--span-2,.interactive-bento-gallery__item--span-wide{grid-column:span 2;grid-row:span 2}.interactive-bento-gallery__item--span-3,.interactive-bento-gallery__item--span-tall{grid-column:span 1;grid-row:span 3}.interactive-bento-gallery__item--span-large{grid-column:span 2;grid-row:span 2}}@media (min-width:1024px){.interactive-bento-gallery__item--span-large{grid-row:span 3}}.interactive-bento-gallery__media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.interactive-bento-gallery__item-info,.interactive-bento-gallery__item-overlay{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:var(--spacing-sm)}.interactive-bento-gallery__item-gradient{position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.8) 0,rgba(0,0,0,.4) 50%,transparent)}.interactive-bento-gallery__item-title{position:relative;color:#fff;font-size:clamp(.75rem,2vw,1rem);font-weight:var(--font-weight-medium);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:var(--spacing-2xs)}.interactive-bento-gallery__item-desc{position:relative;color:rgba(255,255,255,.7);font-size:clamp(.625rem,1.5vw,.875rem);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.media-item{width:100%;height:100%;object-fit:cover}.media-item--video{position:relative;overflow:hidden}.media-item__video{width:100%;height:100%;object-fit:cover;transition:opacity var(--transition-fast);transform:translateZ(0);will-change:transform}.media-item--image{cursor:pointer}.media-item__loader{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.1)}.media-item__spinner{width:1.5rem;height:1.5rem;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(1turn)}}.gallery-modal{position:fixed;inset:0;width:100%;min-height:100vh;min-height:100svh;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);background:rgba(255,255,255,.9);border-radius:0;overflow:hidden;z-index:100}@media (min-width:640px){.gallery-modal{border-radius:var(--radius-md);height:90vh}}@media (min-width:768px){.gallery-modal{border-radius:var(--radius-lg);height:600px}}.gallery-modal__content{height:100%;display:flex;flex-direction:column}.gallery-modal__main{flex:1 1;padding:var(--spacing-sm);display:flex;align-items:center;justify-content:center;background:rgba(245,245,245,.5)}@media (min-width:640px){.gallery-modal__main{padding:var(--spacing-md)}}.gallery-modal__media-wrapper{position:relative;width:100%;aspect-ratio:16/9;max-width:95%;max-height:70vh;border-radius:var(--radius-md);overflow:hidden}@media (min-width:640px){.gallery-modal__media-wrapper{max-width:85%}}@media (min-width:768px){.gallery-modal__media-wrapper{max-width:48rem}}.gallery-modal__media{width:100%;height:100%;object-fit:contain;background:rgba(17,24,39,.2)}.gallery-modal__media-info{position:absolute;bottom:0;left:0;right:0;padding:var(--spacing-sm);background:linear-gradient(0deg,rgba(0,0,0,.5) 0,transparent)}@media (min-width:640px){.gallery-modal__media-info{padding:var(--spacing-md)}}.gallery-modal__media-title{color:#fff;font-size:clamp(1rem,2.5vw,1.25rem);font-weight:var(--font-weight-semibold)}.gallery-modal__media-desc{color:rgba(255,255,255,.8);font-size:clamp(.75rem,1.5vw,.875rem);margin-top:var(--spacing-2xs)}.gallery-modal__close{position:absolute;top:var(--spacing-sm);right:var(--spacing-sm);padding:var(--spacing-sm);border-radius:50%;background:rgba(229,231,235,.8);color:var(--color-text);border:none;cursor:pointer;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:background var(--transition-fast)}.gallery-modal__close:hover{background:rgba(209,213,219,.8)}.gallery-dock{position:fixed;z-index:150;left:50%;bottom:var(--spacing-md);transform:translateX(-50%);touch-action:none}.gallery-dock__inner{position:relative;border-radius:var(--radius-lg);background:rgba(56,189,248,.2);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid rgba(96,165,250,.3);cursor:grab}.gallery-dock__inner:active{cursor:grabbing}.gallery-dock__items{display:flex;align-items:center;gap:-.5rem;padding:var(--spacing-sm) var(--spacing-md)}.gallery-dock__item{position:relative;width:2rem;height:2rem;flex-shrink:0;border-radius:var(--radius-md);overflow:hidden;cursor:pointer;margin-left:-.5rem}@media (min-width:640px){.gallery-dock__item{width:2.25rem;height:2.25rem}}@media (min-width:768px){.gallery-dock__item{width:2.5rem;height:2.5rem}}.gallery-dock__item:first-child{margin-left:0}.gallery-dock__item:hover{z-index:20}.gallery-dock__item--active{outline:2px solid rgba(255,255,255,.7)}.gallery-dock__item:not(.gallery-dock__item--active):hover{outline:2px solid rgba(255,255,255,.3)}.gallery-dock__media{width:100%;height:100%;object-fit:cover}.gallery-dock__item-overlay{position:absolute;inset:0;background:linear-gradient(180deg,transparent 0,rgba(255,255,255,.05) 50%,rgba(255,255,255,.2))}.gallery-dock__item-glow{position:absolute;inset:-.5rem;background:rgba(255,255,255,.2);filter:blur(16px)}