/* Supplied desktop reference: a cutout hero and compact visual service cards.
   Tablet and phone layouts keep their own views. */
.sluzby-page .sl-service-hero-cutout,
.sluzby-page .sl-path-art,
.sluzby-page .sl-service-order { display: none; }

@media (min-width: 1025px) {
  .sluzby-page .sl-section--hero .sl-inner { max-width: min(1530px, 86vw); }
  .sluzby-page .sl-section--hero .sl-decor--hero-b {
    left: calc((100vw - min(1530px, 86vw)) / 2 - clamp(120px, 13vw, 248px) - 16px);
  }
  .sluzby-page .sl-section--hero .sl-hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr);
    position: relative;
  }
  .sluzby-page .sl-hero-copy { position: relative; z-index: 2; }
  .sluzby-page .sl-service-hero-photo {
    position: relative;
    overflow: visible;
    max-height: none;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }
  .sluzby-page .sl-service-hero-photo::before,
  .sluzby-page .sl-service-hero-photo::after,
  .sluzby-page .sl-service-hero-photo .sl-service-hero-stage,
  .sluzby-page .sl-service-hero-photo .sl-service-hero-person,
  .sluzby-page .sl-service-hero-photo .sl-media-badge { display: none; }
  .sluzby-page .sl-service-hero-photo .sl-service-hero-cutout {
    display: block;
    position: absolute;
    right: -5%;
    bottom: -4%;
    width: auto;
    height: min(114%, 38vw);
    max-width: none;
    object-fit: contain;
    object-position: center bottom;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 87%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 87%, transparent 100%);
  }
  .sluzby-page .sl-service-browse { display: none; }
  .sluzby-page .sl-service-order { display: inline-flex; text-decoration: none; }

  .sluzby-page .sl-path {
    border-radius: clamp(22px, 1.8vw, 32px);
    box-shadow: 0 18px 38px #0b0d1014;
  }
  .sluzby-page .sl-path > :not(.sl-path-art) { position: relative; z-index: 1; }
  .sluzby-page .sl-path-art {
    display: block;
    position: absolute;
    z-index: 0;
    pointer-events: none;
  }
  .sluzby-page .sl-path--light { background: #fff; color: #0b0d10; }
  .sluzby-page .sl-path--accent { background: #0b0d10; color: #fff; }
  .sluzby-page .sl-path--dark { background: #00ff00; color: #0b0d10; }
  .sluzby-page .sl-path--accent .sl-path-sub { color: #fff; }
  .sluzby-page .sl-path--accent .sl-path-title-accent { color: #00ff00; }
  .sluzby-page .sl-path--dark .sl-path-title-accent {
    color: #fff;
    -webkit-text-stroke: 1px #0b0d10;
    paint-order: stroke fill;
  }
  .sluzby-page .sl-path--dark .sl-path-sub {
    max-width: 72%;
    color: #0b0d10;
  }
  .sluzby-page .sl-path--accent .sl-path-chips span {
    background: #ffffff0d;
    border-color: #ffffff38;
    color: #fff;
  }
  .sluzby-page .sl-path--dark .sl-path-chips span {
    background: #0b0d10;
    border-color: #0b0d10;
    color: #fff;
  }
  .sluzby-page .sl-path--dark .sl-path-price em {
    background: #0b0d10;
    color: #fff;
  }
  .sluzby-page .sl-path--accent .sl-path-foot { border-color: #ffffff35; }
  .sluzby-page .sl-path--dark .sl-path-foot { border-color: #0b0d1060; }
  .sluzby-page .sl-path--accent .sl-path-icon { background: #00ff00; color: #0b0d10; }
  .sluzby-page .sl-path--dark .sl-path-icon { background: #0b0d10; color: #00ff00; }

  .sluzby-page .sl-path-art--show {
    inset: 0;
    -webkit-mask-image: linear-gradient(to right, transparent 5%, #000 90%);
    mask-image: linear-gradient(to right, transparent 5%, #000 90%);
  }
  .sluzby-page .sl-path-art--show img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
  .sluzby-page .sl-path-art--show::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, #fff 0%, #ffffffd9 40%, #fff0 78%), linear-gradient(to bottom, #fff0 62%, #fff 100%);
    content: "";
  }
  .sluzby-page .sl-path-art--program {
    right: 0;
    bottom: 0;
    width: 59%;
    height: 69%;
    background: radial-gradient(ellipse at 85% 62%, #00ff003d, #00ff0000 71%);
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 73%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 73%, transparent 100%);
  }
  .sluzby-page .sl-path-art--program img {
    position: absolute;
    width: 36%;
    height: 62%;
    border: 2px solid #94ff82;
    border-radius: 7px;
    object-fit: cover;
    box-shadow: 0 0 9px #00ff0059;
  }
  .sluzby-page .sl-path-art--program img:nth-child(1) { left: 4%; bottom: 0; transform: rotate(-10deg); }
  .sluzby-page .sl-path-art--program img:nth-child(2) { left: 41%; bottom: -3%; transform: rotate(4deg); }
  .sluzby-page .sl-path-art--program img:nth-child(3) { left: 69%; bottom: 21%; transform: rotate(11deg); }

  .sluzby-page .sl-path-art--promo {
    right: -2%;
    top: -3%;
    width: 42%;
    height: 101%;
    /* Reserve space around the rotated cards inside the fade mask. The
       previews retain their original size and position, without a hard cut
       through the Instagram card's left edge or logo. */
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 65.2%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 65.2%, transparent 100%);
  }
  .sluzby-page .sl-path-social-mini {
    position: absolute;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    width: 48.76%;
    height: 61.14%;
    padding: 5px;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 5px 10px #0b0d1026;
  }
  .sluzby-page .sl-path-social-mini > img {
    display: block;
    min-height: 0;
    width: 100%;
    flex: 1;
    border-radius: 4px;
    object-fit: cover;
  }
  .sluzby-page .sl-path-social-mini-head {
    display: flex;
    flex: none;
    align-items: center;
    height: 15px;
    margin-bottom: 4px;
  }
  .sluzby-page .sl-path-social-mini-head svg,
  .sluzby-page .sl-path-social-mini-head img { width: 13px; height: 13px; }
  .sluzby-page .sl-path-social-mini--instagram { left: 23.81%; top: 5.94%; transform: rotate(-8deg); }
  .sluzby-page .sl-path-social-mini--facebook { left: 61.14%; top: 20.05%; transform: rotate(14deg); }
  .sluzby-page .sl-path-social-mini--tiktok { left: 31.43%; top: 53.91%; transform: rotate(-10deg); }
}

@media (min-width: 1025px) and (max-height: 620px) {
  .sluzby-page .sl-service-hero-photo .sl-service-hero-cutout { height: 112%; }
  .sluzby-page .sl-path--dark .sl-path-price em { margin-left: 3px; }
}