/**
 * Mobile-only overrides.
 * Loaded after modern-style.css — desktop styles are never touched here.
 * Breakpoint: max-width 767px
 */

@media (max-width: 767px) {
  /* Grid children must be allowed to shrink to the phone viewport. The
     category strip otherwise makes the entire products page ~2000px wide. */
  .vx-products__layout,
  .vx-products__aside,
  .vx-products__main,
  .vx-products__catalog,
  .vx-products__category,
  .vx-product-hero__grid,
  .vx-product__layout,
  .vx-product__card,
  .vx-product__related {
    min-width: 0;
  }

  .vx-products__layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .vx-products__aside {
    max-width: 100%;
    overflow: hidden;
  }

  .vx-products__menu {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
  }

  .vx-products__pagination {
    max-width: 100%;
  }

  /* ------------------------------------------------------------------
     Hero imagery — crop / framing for portrait screens
     Desktop object-position stays as defined in modern-style.css
     ------------------------------------------------------------------ */
  .vx-hero {
    min-height: 100svh;
  }

  .vx-hero__frame {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
  }

  .vx-hero__image {
    object-fit: cover;
    object-position: center 38%;
    transform: scale(1.06);
  }

  .vx-hero__image.is-active {
    transform: scale(1.03);
  }

  /* Per-slide framing (tweak these without touching desktop) */
  .vx-hero__frame:nth-of-type(1) .vx-hero__image {
    object-position: 55% 36%;
  }

  .vx-hero__frame:nth-of-type(2) .vx-hero__image {
    object-position: 48% 40%;
  }

  .vx-hero__frame:nth-of-type(3) .vx-hero__image {
    object-position: 52% 34%;
  }

  .vx-hero__frame:nth-of-type(4) .vx-hero__image {
    object-position: 46% 42%;
  }

  .vx-hero__frame:nth-of-type(5) .vx-hero__image {
    object-position: 50% 38%;
  }

  .vx-hero__veil {
    background:
      linear-gradient(
        180deg,
        rgba(18, 18, 18, 0.62) 0%,
        rgba(18, 18, 18, 0.32) 28%,
        rgba(18, 18, 18, 0.5) 55%,
        rgba(18, 18, 18, 0.88) 78%,
        rgba(18, 18, 18, 0.98) 90%,
        var(--color-bg) 100%
      );
  }

  .vx-hero__shell {
    width: min(100% - 2rem, 36rem);
    padding:
      calc(var(--header-height) + clamp(2.25rem, 8vh, 3.5rem))
      0
      clamp(4.5rem, 12vh, 6rem);
  }

  .vx-hero__title {
    max-width: 12ch;
    font-size: clamp(1.85rem, 9vw, 2.55rem);
  }

  .vx-hero__lead {
    max-width: 28rem;
    font-size: 0.95rem;
  }

  .vx-hero-search {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0.45rem;
    border-radius: 16px;
    padding: 0.55rem;
  }

  .vx-hero-search__input {
    height: 3.1rem;
    padding: 0 1.1rem;
    font-size: 0.95rem;
    text-align: left;
  }

  .vx-hero-search__submit {
    width: 100%;
    min-height: 3rem;
    border-radius: 12px;
  }

  /* Catalog cards — keep one full card + peek of next */
  .vx-catalog__card {
    width: min(88vw, 22rem);
  }

  /* Ops desk */
  .vx-desk__shell {
    padding: 0.9rem;
    border-radius: 14px;
  }

  .vx-desk__clocks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .vx-desk__clock:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    max-width: 12rem;
    justify-self: center;
    width: 100%;
  }

  .vx-desk__title {
    font-size: 1.1rem;
  }

  .vx-desk__steps li {
    font-size: 0.75rem;
  }
}