/*
 * Lekcija 3.0 · F14 · GLOBAL RESPONSIVE UTILITIES
 *
 * Composition may reflow; product/access/state truth may not.
 * This file intentionally contains no membership/access business logic.
 */

/* ---------- SAFE GLOBAL MEDIA ---------- */

img,
svg,
video,
canvas,
iframe {
  max-width: 100%;
}

img,
video {
  height: auto;
}

/* ---------- VISIBILITY HELPERS ---------- */

.lk3-only-mobile,
.lk3-only-tablet,
.lk3-only-desktop {
  display: none !important;
}

/* These helpers are presentation-only. Never use them to create
   different protected/business truth between viewport sizes. */

/* ---------- RESPONSIVE COMPOSITION ---------- */

.lk3-responsive-stack {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.lk3-responsive-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.lk3-responsive-media {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

.lk3-shrink-safe {
  min-width: 0;
  max-width: 100%;
}

.lk3-overflow-local {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}

.lk3-overflow-local > * {
  min-width: max-content;
}

/* ---------- WIDE DESKTOP ---------- */

@media (min-width: 1200px) {
  .lk3-only-desktop {
    display: initial !important;
  }

  .lk3-responsive-stack--desktop-row {
    flex-direction: row;
  }
}

/* ---------- COMPACT DESKTOP ---------- */

@media (max-width: 1450px) {
  .lk3-responsive-actions {
    gap: 8px 12px;
  }
}

@media (max-width: 1199px) {
  .lk3-responsive-stack {
    gap: 12px;
  }

  .lk3-responsive-actions {
    gap: 10px;
  }
}

/* ---------- TABLET ---------- */

@media (max-width: 959px) {
  .lk3-only-tablet {
    display: initial !important;
  }

  .lk3-responsive-stack--tablet-column {
    flex-direction: column;
    align-items: stretch;
  }

  .lk3-responsive-actions--tablet-stack {
    flex-direction: column;
    align-items: stretch;
  }

  .lk3-responsive-actions--tablet-stack > * {
    width: 100%;
  }

  .lk3-tablet-full {
    width: 100% !important;
    max-width: none !important;
  }

  .lk3-overflow-local {
    scrollbar-gutter: stable;
  }
}

/* ---------- MOBILE ---------- */

@media (max-width: 620px) {
  .lk3-only-mobile {
    display: initial !important;
  }

  .lk3-responsive-stack {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .lk3-responsive-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .lk3-responsive-actions > * {
    width: 100%;
  }

  .lk3-mobile-full {
    width: 100% !important;
    max-width: none !important;
  }

  .lk3-mobile-center {
    margin-inline: auto;
    text-align: center;
  }

  .lk3-mobile-start {
    text-align: left;
  }

  .lk3-mobile-order-first {
    order: -1;
  }

  .lk3-mobile-order-last {
    order: 99;
  }

  .lk3-overflow-local {
    width: calc(100vw - (var(--lk3-gutter-mobile) * 2));
    max-width: 100%;
  }
}

/* ---------- INPUT MODALITY ---------- */

@media (hover: hover) and (pointer: fine) {
  .lk3-hover-lift {
    transition: transform 140ms ease;
  }

  .lk3-hover-lift:hover {
    transform: translateY(-2px);
  }
}

@media (pointer: coarse) {
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  select,
  summary,
  [role="button"] {
    min-height: var(--lk3-control-min);
  }
}

/* ---------- VIEWPORT SAFETY ---------- */

@media (max-height: 600px) and (orientation: landscape) {
  .lk3-viewport-safe {
    min-height: auto !important;
  }
}

/* ---------- REDUCED MOTION ---------- */

@media (prefers-reduced-motion: reduce) {
  .lk3-hover-lift,
  .lk3-hover-lift:hover {
    transform: none !important;
    transition: none !important;
  }

  .lk3-overflow-local {
    scroll-behavior: auto;
  }
}

/* ---------- PRINT ---------- */

@media print {
  .lk3-only-mobile,
  .lk3-only-tablet,
  .lk3-only-desktop {
    display: none !important;
  }

  .lk3-overflow-local {
    overflow: visible;
  }

  .lk3-overflow-local > * {
    min-width: 0;
  }

  .lk3-responsive-actions {
    display: none;
  }
}


/* F15 · Visually hidden but assistive-technology available. */
.lk3-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.lk3-visually-hidden.lk3-focusable:focus,
.lk3-visually-hidden.lk3-focusable:focus-visible {
  position: static !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  white-space: normal !important;
}
