/* =========================================================
   Zomniverse — Learn Image Fullscreen

   PATCH 2026-08-11 | FULLSCREEN IMAGE RESPONSIBILITY

   Owns only the fullscreen image-viewer environment.

   The embedded viewer, controls and normal image presentation
   are owned by learn-image-viewer.css.

   This stylesheet is intentionally isolated so fullscreen can
   grow independently with future controls and functionality.
========================================================= */


/* =========================================================
   FULLSCREEN SHELL
========================================================= */

#learn-md-content .learn-image-viewer:fullscreen {
  position: fixed;

  display: grid;

  grid-template-rows:
    auto
    minmax(0, 1fr);

  width: 100vw;
  height: 100vh;

  margin: 0;
  padding: 0;

  overflow: hidden;

  border: 0;
  border-radius: 0;

  background: #ffffff;

  box-shadow: none;

  isolation: isolate;
}


/* =========================================================
   FULLSCREEN TOOLBAR
========================================================= */

#learn-md-content
.learn-image-viewer:fullscreen
.learn-image-toolbar {
  position: relative;
  z-index: 10;

  display: flex;
  justify-content: flex-end;
  align-items: center;

  flex: 0 0 auto;

  gap: 0.4rem;

  padding: 0.65rem 0.8rem;

  border: 0;
  border-bottom: 1px solid #e5e7eb;

  background:
    rgba(
      248,
      250,
      252,
      0.96
    );

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}


/* =========================================================
   FULLSCREEN CONTROLS

   Base control appearance remains owned by
   learn-image-viewer.css.

   Only fullscreen-specific changes belong here.
========================================================= */

#learn-md-content
.learn-image-viewer:fullscreen
.learn-image-control {
  position: relative;
  z-index: 11;
}


/* =========================================================
   FULLSCREEN IMAGE STAGE
========================================================= */

#learn-md-content
.learn-image-viewer:fullscreen
.learn-image-stage {
  position: relative;

  display: grid;
  place-items: center;

  width: 100%;
  height: 100%;

  min-width: 0;
  min-height: 0;

  margin: 0;
  padding: 2rem;

  box-sizing: border-box;

  overflow: hidden;

  background: #ffffff;

  /*
   * JS changes this to grab / grabbing when appropriate.
   */
  cursor: default;

  touch-action: none;
  user-select: none;
}


/* =========================================================
   FULLSCREEN IMAGE
========================================================= */

#learn-md-content
.learn-image-viewer:fullscreen
.learn-image-stage > img,

#learn-md-content
.learn-image-viewer:fullscreen
.learn-image-stage > a > img {
  display: block;

  max-width: 100%;
  max-height: 100%;

  width: auto;
  height: auto;

  margin: auto;

  object-fit: contain;

  user-select: none;
  -webkit-user-drag: none;

  transform-origin:
    center center;
}


/* =========================================================
   FULLSCREEN LINK WRAPPER
========================================================= */

#learn-md-content
.learn-image-viewer:fullscreen
.learn-image-stage > a {
  display: grid;
  place-items: center;

  width: max-content;
  max-width: 100%;

  height: max-content;
  max-height: 100%;

  margin: auto;
}


/* =========================================================
   FULLSCREEN SCROLLBARS

   The stage normally pans through pointer interaction, but
   scrollbars remain restrained if overflow becomes available.
========================================================= */

#learn-md-content
.learn-image-viewer:fullscreen
.learn-image-stage {
  scrollbar-width: thin;

  scrollbar-color:
    rgba(71, 85, 105, 0.42)
    transparent;
}

#learn-md-content
.learn-image-viewer:fullscreen
.learn-image-stage::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}

#learn-md-content
.learn-image-viewer:fullscreen
.learn-image-stage::-webkit-scrollbar-track {
  background: transparent;
}

#learn-md-content
.learn-image-viewer:fullscreen
.learn-image-stage::-webkit-scrollbar-thumb {
  border-radius: 999px;

  background:
    rgba(
      71,
      85,
      105,
      0.38
    );
}

#learn-md-content
.learn-image-viewer:fullscreen
.learn-image-stage::-webkit-scrollbar-thumb:hover {
  background:
    rgba(
      79,
      70,
      229,
      0.58
    );
}


/* =========================================================
   RESPONSIVE FULLSCREEN
========================================================= */

@media (max-width: 700px) {

  #learn-md-content
  .learn-image-viewer:fullscreen
  .learn-image-toolbar {
    padding:
      0.5rem
      0.6rem;
  }

  #learn-md-content
  .learn-image-viewer:fullscreen
  .learn-image-stage {
    padding: 1rem;
  }
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  #learn-md-content
  .learn-image-viewer:fullscreen
  .learn-image-stage > img,

  #learn-md-content
  .learn-image-viewer:fullscreen
  .learn-image-stage > a > img {
    transition: none;
  }
}