@layer dg.tokens, dg.base, dg.layout, dg.components, dg.motion, dg.responsive;

@layer dg.tokens {
  .dg-media-experience {
    --dg-bg: var(--dl-bg-body, #f5f6f7);
    --dg-surface: var(--dl-bg-card, #fff);
    --dg-surface-soft: var(--dl-accent-info, #f5f6f7);
    --dg-surface-strong: var(--dl-accent, #e1e4e8);
    --dg-text: var(--dl-text-main, #4b4f54);
    --dg-muted: var(--dl-text-subtle, #777c82);
    --dg-border: var(--dl-border, #dde1e5);
    --dg-border-strong: var(--dl-border-strong, #c3c9d0);
    --dg-radius-sm: var(--dl-radius-sm, .25rem);
    --dg-stage: color-mix(in srgb, var(--dg-bg) 72%, var(--dg-border) 28%);
  }
}

@layer dg.base {
  .dg-media-experience, .dg-media-experience * { box-sizing: border-box; }
  .dg-media-experience { width: 100%; color: var(--dg-text); font: inherit; overflow-anchor: none; }
  .dg-media-experience.is-navigating { cursor: progress; }
  .dg-media-experience.is-navigating :where(a, button) { pointer-events: none; }
  .dg-media-experience :where(h1, h2, p, dl, dd) { margin: 0; }
  .dg-media-experience :where(a) { color: inherit; text-decoration: none; }
  .dg-media-experience :where(button) { color: inherit; font: inherit; }
}

@layer dg.layout {
  .dg-media-context { display: flex; align-items: center; justify-content: space-between; min-height: 2.25rem; margin-bottom: .65rem; }
  .dg-media-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(17.5rem, 19.5rem); gap: clamp(1.1rem, 2.2vw, 2rem); align-items: start; }
  .dg-media-primary { min-width: 0; }
  .dg-media-viewer { min-width: 0; }
  .dg-media-frame { width: 100%; min-width: 0; }
  .dg-media-frame--image { max-width: 100%; margin-inline: auto; }
  .dg-media-frame--portrait { width: fit-content; }
  .dg-media-stage { position: relative; display: grid; min-height: 0; place-items: center; overflow: hidden; border: 0; border-radius: var(--dg-radius-sm); background: transparent; isolation: isolate; touch-action: pan-y pinch-zoom; }
  .dg-media-stage.is-video { touch-action: auto; }
  .dg-media-open { display: grid; width: 100%; height: 100%; min-height: inherit; padding: 0; place-items: center; border: 0; background: transparent; cursor: zoom-in; }
  .dg-media-object { display: block; max-width: 100%; max-height: min(76vh, 48rem); object-fit: contain; opacity: 0; transition: opacity .24s ease, filter .2s ease; }
  .dg-media-object.is-ready { opacity: 1; }
  .dg-media-stage:not(.is-video) .dg-media-open { width: 100%; min-height: 0; }
  .dg-media-stage:not(.is-video) .dg-media-object { border-radius: var(--dg-radius-sm); }
  .dg-media-frame--landscape .dg-media-object,
  .dg-media-frame--square .dg-media-object { width: 100%; height: auto; max-height: none; }
  .dg-media-frame--portrait .dg-media-open { width: auto; }
  .dg-media-frame--portrait .dg-media-object { width: auto; max-height: min(76vh, 48rem); }
  .dg-media-stage.is-video { aspect-ratio: var(--dg-media-ratio, 16 / 9); min-height: 0; border: 0; border-radius: 0; background: transparent; clip-path: none; }
  .dg-media-stage.is-video .dg-media-object { width: 100%; height: 100%; min-height: 0; max-height: none; opacity: 1; }
  .dg-media-stage.is-video > .dg-media-loader { display: none; }
  .dg-media-stage.is-video video { border-radius: 0; object-fit: contain; }
}

@layer dg.components {
  .dg-media-context__back, .dg-media-context__position { display: inline-flex; align-items: center; gap: .45rem; color: var(--dg-muted); font-size: .72rem; font-weight: 600; letter-spacing: .04em; }
  .dg-media-context__back:hover { color: var(--dg-text); }
  .dg-media-context__controls { display: flex; align-items: center; gap: .25rem; }
  .dg-media-context__controls a { display: grid; width: 1.8rem; height: 1.8rem; place-items: center; border: 1px solid var(--dg-border); border-radius: var(--dl-radius-round, 50%); background: var(--dg-surface); color: var(--dg-muted); }
  .dg-media-context__back i, .dg-media-context__controls i { display: block; width: 1rem; height: 1rem; font-size: 1rem; line-height: 1; }
  .dg-media-context__controls a:hover { border-color: var(--dg-border-strong); color: var(--dg-text); }
  .dg-media-context__position { min-width: 3rem; justify-content: center; }
  .dg-media-loader { position: absolute; inset: 50% auto auto 50%; width: 1.25rem; height: 1.25rem; border: 1px solid color-mix(in srgb, var(--dg-muted) 35%, transparent); border-top-color: var(--dg-text); border-radius: 50%; animation: dg-media-spin .7s linear infinite; transform: translate(-50%, -50%); }
  .is-ready + .dg-media-loader, .dg-media-stage:has(.is-ready) > .dg-media-loader, .dg-media-strip__visual:has(.is-ready) > .dg-media-loader { display: none; }
  .dg-action-bar { display: flex; align-items: center; gap: .35rem; min-height: 3rem; margin-top: .15rem; padding: .35rem 0; overflow-x: auto; border: 0; border-bottom: 1px solid var(--dg-border); border-radius: 0; background: transparent; scrollbar-width: none; }
  .dg-action { display: inline-flex; align-items: center; flex: 0 0 auto; gap: .42rem; min-height: 2.3125rem; padding: 0 .45rem; border: 1px solid transparent; border-radius: var(--dg-radius-sm); background: transparent; color: var(--dg-muted); cursor: pointer; white-space: nowrap; transition: background-color .16s ease, color .16s ease; }
  .dg-action:hover, .dg-action.is-active { background: var(--dg-surface-strong); color: var(--dg-text); }
  .dg-action b { font-size: .68rem; font-weight: 600; }
  .dg-action--icon { margin-left: auto; }
  .dg-media-dialog { width: 100vw; max-width: none; height: 100vh; max-height: none; padding: 2.5rem; border: 0; background: #0b0b0ceb; }
  .dg-media-dialog::backdrop { background: #0b0b0c; }
  .dg-media-dialog img { width: 100%; height: 100%; object-fit: contain; }
  .dg-media-dialog button { position: fixed; z-index: 2; top: 1rem; right: 1rem; width: 2.4rem; height: 2.4rem; border: 1px solid #ffffff40; border-radius: var(--dg-radius-sm); background: #111b; color: #fff; cursor: pointer; font-size: 1.4rem; }
  .dg-media-toast { position: fixed; z-index: 100; right: 1rem; bottom: 1rem; padding: .65rem .8rem; border: 1px solid var(--dg-border-strong); border-radius: var(--dg-radius-sm); background: var(--dg-surface); opacity: 0; pointer-events: none; transform: translateY(.5rem); transition: opacity .18s ease, transform .18s ease; }
  .dg-media-toast.is-visible { opacity: 1; transform: none; }
}

@layer dg.motion {
  @keyframes dg-media-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
  @media (prefers-reduced-motion: reduce) { .dg-media-object, .dg-media-toast { transition: none; } .dg-media-loader { animation: none; } }
}

@layer dg.responsive {
  @media (max-width: 880px) {
    .dg-media-layout { display: flex; flex-direction: column; }
    .dg-media-primary { display: contents; }
    .dg-media-viewer { order: 1; }
    .dg-media-rail { order: 2; }
    .dg-media-collection { order: 3; width: 100%; }
    .dg-media-object { max-height: 68vh; }
  }
  @media (max-width: 560px) {
    .dg-image-page .site-breadcrumbs { display: none; }
    .dg-media-context { margin-top: .25rem; }
    .dg-action span { display: none; }
    .dg-action { min-width: 2.2rem; justify-content: center; }
    .dg-media-dialog { padding: .5rem; }
  }
}