/* =============================================================
   NAŠE SLUŽBY — sluzby1.css
   ============================================================= */

.hlava--stranka{margin-bottom:0}
.hlava--stranka .hlava__titul{
  font-size:clamp(2.2rem,4.9vw,calc(3.75rem + var(--vic,0px) * .011));
  line-height:1.18;
}
.hlava--stranka .hlava__popis{max-width:48ch}

.sluzby-blok{position:relative;overflow:visible}
#tetovani{padding-top:clamp(36px,7vw,120px)}

.sluzby-blok--piercing{
  overflow:hidden;
  background:var(--band);
  padding-block:clamp(44px,5.4vw,72px);
  margin-bottom:clamp(48px,7vw,110px);
}

.listy-sluzby{
  position:absolute;right:-46px;top:8%;
  width:clamp(110px,12vw,170px);height:auto;
  fill:none;stroke:var(--pink-light);stroke-width:1.2;
  stroke-linecap:round;stroke-linejoin:round;
  opacity:.16;transform:rotate(-14deg);pointer-events:none;
}
.sluzby-blok .wrap{position:relative;z-index:1}

/* ---------- podnadpis ---------- */
.podnadpis{text-align:center;margin-bottom:clamp(26px,3.4vw,40px)}
.podnadpis h2{
  font-family:var(--display-nadpis);font-weight:400;
  font-size:clamp(1.75rem,3.5vw,calc(2.65rem + var(--vic,0px) * .008));
  line-height:1.2;color:var(--ink);
}
.podnadpis p{margin-top:8px;font-size:13.5px;color:var(--muted)}
.podnadpis::after{
  content:"";display:block;
  width:clamp(120px,15.5vw,185px);height:9px;
  margin:15px auto 0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 176'%3E%3Cpath fill='%23FE9FD0' d='M100 168C42 124 6 92 6 56 6 27 28 8 54 8c19 0 35 11 46 26C111 19 127 8 146 8c26 0 48 19 48 48 0 36-36 68-94 112Z'/%3E%3C/svg%3E")
      center/10px 9px no-repeat,
    linear-gradient(90deg,transparent,var(--pink-soft) 24%,transparent 45%,transparent 55%,var(--pink-soft) 76%,transparent)
      center/100% 1px no-repeat;
}

/* ---------- mřížka služeb ---------- */
.sluzby-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:clamp(18px,2.4vw,30px);
}

/* ---------- karta služby ---------- */
.sluzba-karta{
  background:#fff;
  border:1px solid var(--pink-soft);
  border-radius:var(--r-card);
  padding:clamp(24px,2.8vw,36px);
  box-shadow:0 8px 24px rgba(254,159,208,.10);
  transition:transform .4s var(--ease),box-shadow .4s ease;
}
.sluzba-karta:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 38px rgba(254,159,208,.20);
}

/* světlá varianta pro piercingovou sekci (na růžovém pruhu) */
.sluzba-karta--svetla{background:#fff}

.sluzba-karta__ikona{
  width:52px;height:52px;
  margin-bottom:18px;
  display:flex;align-items:center;justify-content:center;
  background:var(--pink-pale);
  border-radius:14px;
  color:var(--pink);
}
.sluzba-karta__ikona svg{
  width:28px;height:28px;
  stroke:var(--pink);
}

.sluzba-karta h3{
  font-size:10.5px;letter-spacing:.17em;text-transform:uppercase;
  font-weight:700;color:var(--ink);
  margin:0 0 10px;
}

.sluzba-karta p{
  font-size:13.5px;line-height:1.65;color:var(--ink-2);
  margin:0 0 18px;
}

/* ---------- velké srdce ---------- */
.velke-srdce{
  display:none;
  position:absolute;z-index:0;
  left:clamp(-20px,2.5vw,70px);top:clamp(-30px,-1vw,0px);
  width:clamp(150px,17vw,260px);height:auto;
  fill:none;stroke:#FFB0D2;stroke-width:1.5;stroke-linejoin:round;
  filter:
    drop-shadow(0 0 3px var(--pink-neon))
    drop-shadow(0 0 14px rgba(254,159,208,.6))
    drop-shadow(0 0 38px rgba(254,159,208,.32));
  opacity:.55;pointer-events:none;transform:rotate(-10deg);
}
.kyticka{display:none}
@media (min-width:1100px){.velke-srdce{display:block}}
@media (min-width:1400px){
  .kyticka{
    display:block;position:absolute;top:50%;
    width:clamp(90px,7vw,130px);height:auto;
    fill:none;stroke:var(--pink-light);stroke-width:1.2;
    stroke-linecap:round;stroke-linejoin:round;
    opacity:.3;pointer-events:none;
  }
  .kyticka--l{left:2.2vw;transform:translateY(-50%) rotate(12deg)}
  .kyticka--p{right:2.2vw;transform:translateY(-50%) scaleX(-1) rotate(12deg)}
}

/* ---------- responzivita ---------- */
@media (max-width:900px){
  .sluzby-grid{grid-template-columns:1fr}
  .listy-sluzby{opacity:.1;right:-64px}
}
@media (max-width:560px){
  .listy-sluzby{display:none}
}