/*
 * Article lightbox responsive override.
 * Loaded after the compiled child stylesheet so rotation updates cannot be
 * overridden by legacy max-height rules.
 *
 * The overlay fills the rotated viewport, but the image itself is bounded by
 * that viewport rather than stretched to its width: on a phone held sideways a
 * width-driven image is taller than the screen, and the overlay's overflow
 * clipping would silently cut the top and bottom off.
 */
@media (orientation: landscape) and (max-width: 1366px) {
  .lightbox-overlay:target {
    box-sizing: border-box;
    height: 100dvh !important;
    inset: 0 !important;
    max-height: none !important;
    max-width: none !important;
    overflow: hidden !important;
    padding:
      max(0.5rem, env(safe-area-inset-top))
      max(0.5rem, env(safe-area-inset-right))
      max(0.5rem, env(safe-area-inset-bottom))
      max(0.5rem, env(safe-area-inset-left)) !important;
    transform: none !important;
    width: 100dvw !important;
  }

  .lightbox-overlay:target .image-wrapper,
  .lightbox-overlay:target .img-close-trigger {
    display: grid !important;
    height: 100% !important;
    margin: 0 !important;
    max-height: none !important;
    max-width: none !important;
    overflow: hidden !important;
    place-items: center;
    width: 100% !important;
  }

  .lightbox-overlay:target .img-close-trigger img {
    height: auto !important;
    max-height: calc(100dvh - 1rem - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    max-width: calc(100vw - 1rem - env(safe-area-inset-left) - env(safe-area-inset-right)) !important;
    object-fit: contain;
    width: auto !important;
  }
}