/* Existing Universal Media Gallery structure and lifecycle; no new media requests. */
.tj-umg[data-tj-ui="cinematic"] { --tj-umg-pink: var(--tj-pink); --tj-umg-cream: var(--tj-text); background: var(--tj-bg); color: var(--tj-text); font-family: var(--tj-font-body); }
.tj-umg[data-tj-ui="cinematic"] :is(.tj-umg-topbar,.tj-umg-viewer-bar) { background: var(--tj-bg-alt); color: var(--tj-text); border-bottom: 1px solid var(--tj-border); box-shadow: none; gap: .75rem; }
.tj-umg[data-tj-ui="cinematic"] .tj-umg-heading h2 { color: var(--tj-text); font-family: var(--tj-font-heading); font-size: clamp(1.5rem,4vw,2.5rem); font-weight: 700; }
.tj-umg[data-tj-ui="cinematic"] .tj-umg-kicker { padding: 0; background: transparent; color: var(--tj-pink-soft); font-size: .75rem; font-weight: 700; }
.tj-umg[data-tj-ui="cinematic"] .tj-umg-heading p { color: var(--tj-text-muted); }
.tj-umg[data-tj-ui="cinematic"] :is(.tj-umg-close,.tj-umg-back,.tj-umg-nav) { min-width: 44px; min-height: 44px; border: 1px solid var(--tj-border); border-radius: var(--tj-radius-sm); background: var(--tj-surface-raised); color: var(--tj-text); box-shadow: none; }
.tj-umg[data-tj-ui="cinematic"] :is(.tj-umg-close,.tj-umg-nav):hover { background: var(--tj-pink); color: var(--tj-on-accent); }
.tj-umg[data-tj-ui="cinematic"] .tj-umg-back { font-size: .875rem; font-weight: 600; }
.tj-umg[data-tj-ui="cinematic"] .tj-umg-viewer-title { color: var(--tj-text); font-size: .875rem; font-weight: 600; white-space: normal; text-transform: none; }
.tj-umg[data-tj-ui="cinematic"] .tj-umg-filters { background: var(--tj-surface); border-color: var(--tj-border); }
.tj-umg[data-tj-ui="cinematic"] .tj-umg-filters button { min-height: 44px; border: 1px solid var(--tj-border); border-radius: 2rem; background: transparent; color: var(--tj-text); font-size: .875rem; font-weight: 600; }
.tj-umg[data-tj-ui="cinematic"] .tj-umg-filters button.is-active { background: var(--tj-pink); color: var(--tj-on-accent); }
.tj-umg[data-tj-ui="cinematic"] .tj-umg-gallery-scroll { background: var(--tj-bg); }
.tj-umg[data-tj-ui="cinematic"] .tj-umg-stage-wrap { display: grid; grid-template-columns: minmax(0,1fr) minmax(16rem,20rem); grid-template-rows: minmax(0,1fr); background: var(--tj-bg); }
.tj-umg[data-tj-ui="cinematic"] .tj-umg-stage { position: relative; inset: auto; grid-area: 1/1; min-width: 0; min-height: 0; padding: 1rem 3.75rem; }
.tj-umg[data-tj-ui="cinematic"] .tj-umg-stage :is(img,video) { object-fit: contain; box-shadow: none; }
.tj-umg[data-tj-ui="cinematic"] .tj-umg-nav { position: relative; inset: auto; grid-area: 1/1; align-self: center; justify-self: start; margin: .5rem; transform: none; width: 44px; height: 44px; font-size: 1.75rem; backdrop-filter: none; }
.tj-umg[data-tj-ui="cinematic"] .tj-umg-next { justify-self: end; }
.tj-umg[data-tj-ui="cinematic"] .tj-umg-info { position: relative; inset: auto; grid-area: 1/2; min-width: 0; max-width: none; max-height: 100%; padding: 1.25rem; overflow: auto; border-left: 1px solid var(--tj-border); background: var(--tj-surface); color: var(--tj-text); backdrop-filter: none; }
.tj-umg[data-tj-ui="cinematic"] .tj-umg-info strong { font-family: var(--tj-font-heading); font-size: 1.25rem; font-weight: 700; line-height: 1.3; }
.tj-umg[data-tj-ui="cinematic"] .tj-umg-info small { color: var(--tj-pink-soft); font-size: .75rem; font-weight: 600; }
.tj-umg[data-tj-ui="cinematic"] .tj-umg-info p { display: block; color: var(--tj-text-muted); font-size: .875rem; line-height: 1.5; }
.tj-umg[data-tj-ui="cinematic"] :is(.tj-umg-audio-stage,.tj-umg-document-stage) { min-width: 0; max-width: 100%; border: 1px solid var(--tj-border); border-radius: var(--tj-radius-card); background: var(--tj-surface); box-shadow: none; }
.tj-umg[data-tj-ui="cinematic"] .tj-umg-filmstrip { min-width: 0; background: var(--tj-bg-alt); border-top: 1px solid var(--tj-border); scrollbar-color: var(--tj-text-subtle) var(--tj-bg-alt); }
.tj-umg[data-tj-ui="cinematic"] .tj-umg-thumb { border: 2px solid var(--tj-border); border-radius: var(--tj-radius-sm); }
.tj-umg[data-tj-ui="cinematic"] .tj-umg-thumb.is-active { border-color: var(--tj-pink-soft); box-shadow: 0 0 0 1px var(--tj-pink-soft); }
.tj-umg[data-tj-ui="cinematic"] :is(a,button,[tabindex]):focus-visible { outline: 3px solid var(--tj-focus); outline-offset: 3px; }
@media(max-width:800px) {
  .tj-umg[data-tj-ui="cinematic"] .tj-umg-stage-wrap { grid-template-columns: minmax(0,1fr); grid-template-rows: minmax(0,1fr) auto; }
  .tj-umg[data-tj-ui="cinematic"] .tj-umg-info { grid-area: 2/1; max-height: min(30dvh,12rem); border-left: 0; border-top: 1px solid var(--tj-border); padding: 1rem; }
  .tj-umg[data-tj-ui="cinematic"] .tj-umg-stage { padding: .5rem 3.25rem; }
  .tj-umg[data-tj-ui="cinematic"] .tj-umg-viewer-title { display: block; }
}

/* Keep native document fallback actions consistent with the shared accent buttons. */
.tj-umg[data-tj-ui="cinematic"] .tj-umg-document-fallback { min-width:0; padding:clamp(1rem,3vw,1.875rem); background:var(--tj-surface); color:var(--tj-text); }
.tj-umg[data-tj-ui="cinematic"] .tj-umg-document-fallback a { display:inline-flex; align-items:center; justify-content:center; min-height:44px; max-width:100%; border:1px solid var(--tj-pink); border-radius:var(--tj-radius-sm); background:var(--tj-pink); color:var(--tj-on-accent); font:600 .875rem/1.4 var(--tj-font-body); overflow-wrap:anywhere; }
.tj-umg[data-tj-ui="cinematic"] .tj-umg-document-fallback a:hover { background:var(--tj-pink-hover); border-color:var(--tj-pink-hover); color:var(--tj-white); }