/*
 * Lekcija 3.0 · GLOBAL LAYOUT PRIMITIVES
 * F14 · Responsive Architecture production contract.
 *
 * Locked responsive zones:
 * ≥1200px   desktop
 * 960–1199  compact desktop
 * 621–959   tablet
 * ≤620px    mobile
 *
 * 1450px is the wide-shell gutter interpolation threshold.
 */

.lk3-shell {
  width: min(
    var(--lk3-shell-max),
    calc(100% - (var(--lk3-gutter-desktop) * 2))
  );
  min-width: 0;
  margin-inline: auto;
}

/* Wide shell interpolation: 80px -> 48px macro gutter. */
@media (max-width: 1450px) {
  .lk3-shell {
    width: min(
      var(--lk3-shell-max),
      calc(100% - (var(--lk3-gutter-compact) * 2))
    );
  }
}

/* Tablet contract: 40px macro gutter. */
@media (max-width: 959px) {
  .lk3-shell {
    width: min(
      var(--lk3-shell-max),
      calc(100% - (var(--lk3-gutter-tablet) * 2))
    );
  }
}

/* Mobile contract: 20px macro gutter. */
@media (max-width: 620px) {
  .lk3-shell {
    width: min(
      var(--lk3-shell-max),
      calc(100% - (var(--lk3-gutter-mobile) * 2))
    );
  }
}