/* The mobile reference keeps the portrait below the full-width CTA and
   brings the two brand objects into that portrait area. Desktop is untouched. */
@media (max-width: 1024px) {
  .spolupraca-page #hero.sp-hero {
    background: #0b0d10;
    padding-bottom: 0;
  }

  .spolupraca-page #hero .sp-hero-grid {
    gap: clamp(28px, 6vw, 40px);
  }

  .spolupraca-page #hero .sp-hero-portrait {
    width: min(100%, 660px);
    height: auto;
    aspect-ratio: 5 / 6;
    margin-inline: auto;
  }

  .spolupraca-page #hero .sp-hero-portrait::before {
    inset: 0;
    background: radial-gradient(ellipse at 55% 48%, rgba(0, 255, 0, .065), transparent 65%);
  }

  .spolupraca-page #hero .sp-hero-person {
    object-fit: contain;
    -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
  }

  /* Only these hero decorations are restored; other phone sections keep
     their existing rules. Static transforms avoid a mobile motion layer. */
  .spolupraca-page #hero > .sl-decor {
    display: block;
    opacity: 1 !important;
    transform: none !important;
    will-change: auto;
  }

  .spolupraca-page #hero > .sl-decor .sl-decor-float {
    transform: none !important;
    will-change: auto;
  }

  .spolupraca-page #hero .sp-decor--hero {
    top: auto;
    bottom: min(88vw, 580px);
    left: -42px;
    width: clamp(108px, 20vw, 154px);
  }

  .spolupraca-page #hero .sp-decor--hero-right {
    top: auto;
    bottom: min(69vw, 450px);
    right: -34px;
    width: clamp(84px, 15vw, 120px);
  }
}

@media (max-width: 767px) {
  .spolupraca-page #hero .sl-actions {
    width: 100%;
  }

  .spolupraca-page #hero .sl-cta {
    width: 100%;
    min-height: 50px;
    gap: 10px;
    padding-inline: 16px;
    font-size: clamp(11px, 3vw, 15px);
    line-height: 1.3;
  }

  /* Slightly wider than the text column, while still keeping the phone,
     face and hands fully visible. The section clips only the edge blobs. */
  .spolupraca-page #hero .sp-hero-portrait {
    width: calc(100% + 12px);
    margin-inline: -6px;
  }

  .spolupraca-page #hero .sp-decor--hero {
    left: -42px;
    width: clamp(108px, 22vw, 138px);
  }

  .spolupraca-page #hero .sp-decor--hero-right {
    right: -32px;
    width: clamp(82px, 17vw, 105px);
  }
}