@charset "UTF-8";
/* ==========================================================================
   L’Eterna Promessa – stránka Služby (/sluzby), design v2
   Doplněk k /css/site.css (úvod s fotkou, pás fotek .lp-fotopas a tmavá
   sekce .lp-tmava jsou tam, sekce 23 a 30).
     1. Tři hlavní služby: velká a malá fotka + text
     2. Veletržní akce
     3. Kroky spolupráce (tmavá sekce)
     4. Doplňkové služby
   ========================================================================== */

/* ---------- 1. Tři hlavní služby ----------
   article.sl-pilir > .sl-pilir__fotky (velká fotka, menší fotka přes roh,
   velké číslo) + .sl-pilir__text. Každá druhá služba je obráceně. */
.sl-pilir {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 5.5rem);
  align-items: center;
}

.sl-pilir + .sl-pilir {
  margin-top: clamp(4.5rem, 9vw, 8rem);
}

.sl-pilir__fotky {
  position: relative;
  padding: 0 clamp(1.5rem, 6vw, 4rem) clamp(2.5rem, 7vw, 4.5rem) 0;
}

.sl-pilir__hlavni {
  --odhal-r: var(--r-l);
  border-radius: var(--r-l);
}

.sl-pilir__hlavni img {
  aspect-ratio: 4 / 3;
}

.sl-pilir__mala {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 46%;
  border: 6px solid var(--krem);
  border-radius: var(--r);
  box-shadow: var(--stin-karty-vetsi);
}

.sl-pilir__mala img {
  aspect-ratio: 4 / 3;
}

.sl-pilir__cislo {
  position: absolute;
  top: -0.35em;
  left: -0.12em;
  z-index: 1;
  font: italic 300 clamp(4rem, 3rem + 4vw, 7rem)/1 var(--f-titul);
  color: #FFFFFF;
  text-shadow: 0 4px 30px rgba(10, 12, 16, 0.4);
  pointer-events: none;
}

.sl-pilir__text .lp-stitek {
  justify-content: flex-start;
}

.sl-pilir__text h3 {
  font-size: clamp(2.2rem, 1.5rem + 2.2vw, 3.4rem);
  line-height: 1.08;
  font-weight: 300;
}

.sl-pilir__text > p:not(.lp-stitek):not(.sl-akce) {
  max-width: 36rem;
  margin: 1.1rem 0 0;
  color: var(--text);
}

.sl-pilir__text .lp-seznam {
  margin-top: 1.25rem;
}

.sl-pilir__text .lp-akce {
  margin-top: 1.9rem;
}

@media (min-width: 56rem) {
  .sl-pilir {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  }

  .sl-pilir--obracene {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  }

  .sl-pilir--obracene .sl-pilir__fotky {
    order: 2;
    padding: 0 0 clamp(2.5rem, 7vw, 4.5rem) clamp(1.5rem, 6vw, 4rem);
  }

  .sl-pilir--obracene .sl-pilir__mala {
    right: auto;
    left: 0;
  }

  .sl-pilir--obracene .sl-pilir__cislo {
    left: auto;
    right: 0.1em;
  }
}

/* ---------- 2. Veletržní akce u služby „Svatba ve 3D“ ----------
   Znění potvrdila majitelka 20. 10. 2026 – jinde se slovo „zdarma“ nepoužívá. */
.sl-akce {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1rem;
  max-width: 36rem;
  margin: 1.5rem 0 0;
  padding: 0.75rem 1.25rem 0.75rem 0.75rem;
  font: 400 1.2rem/1.35 var(--f-titul);
  color: var(--inkoust);
  background: var(--bila);
  border: 1px solid var(--linka);
  border-radius: var(--r);
  box-shadow: var(--stin-karty);
}

.sl-akce__titul {
  padding: 0.55em 1em;
  font: 500 0.7rem/1 var(--f-text);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #FFFFFF;
  background: var(--led-text);
  border-radius: 999px;
}

/* ---------- 3. Kroky spolupráce (tmavá sekce s fotkou) ---------- */
.sl-fotopas {
  margin-top: calc(-1 * var(--sekce) / 2);
}

.sl-kroky-sekce .lp-hlavicka-sekce--vlevo h2 {
  color: #FFFFFF;
}

.sl-kroky {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--mezera-mrizky);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: krok;
}

.sl-krok {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 3vw, 2.1rem);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--r);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transition: background-color 0.5s var(--ease-out), border-color 0.5s var(--ease-out);
}

.sl-krok:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(142, 197, 232, 0.45);
}

.sl-krok__cislo {
  display: block;
  margin-bottom: 1.4rem;
  font: italic 300 2.8rem/1 var(--f-titul);
  color: var(--led-svetla);
}

.sl-krok h3 {
  margin: 0 0 0.6rem;
  font-size: 1.6rem;
  color: #FFFFFF;
}

.sl-krok p {
  margin: 0;
  color: var(--na-tmave);
}

.sl-krok__odkaz {
  margin-top: auto !important;
  padding-top: 1.25rem;
}

.sl-krok__odkaz .lp-odkaz {
  color: var(--led-svetla);
}

.sl-krok__odkaz .lp-odkaz:hover {
  color: #FFFFFF;
}

@media (min-width: 40rem) {
  .sl-kroky {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .sl-kroky {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  /* tenká linka spojuje čísla kroků */
  .sl-kroky::before {
    content: "";
    position: absolute;
    top: calc(clamp(1.5rem, 3vw, 2.1rem) + 1.4rem);
    left: 3%;
    right: 3%;
    height: 1px;
    background: linear-gradient(90deg, rgba(142, 197, 232, 0), rgba(142, 197, 232, 0.45), rgba(142, 197, 232, 0));
  }

  .sl-krok:nth-child(even) {
    translate: 0 2.5rem;
  }

  .sl-kroky {
    padding-bottom: 2.5rem;
  }
}

/* ---------- 4. Doplňkové služby ----------
   <dl class="sl-doplnky"> s řádky <div><dt>název</dt><dd>popis</dd></div>.
   Seznam srovná skript na konci stránky podle /js/balicky-data.js. Číslo
   v rohu karty doplní CSS samo (počítadlo). */
.sl-doplnky {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  gap: var(--mezera-mrizky);
  margin: 0;
  counter-reset: doplnek;
}

.sl-doplnky > div {
  position: relative;
  padding: 1.6rem 1.6rem 1.7rem;
  background: var(--bila);
  border-radius: var(--r);
  box-shadow: var(--stin-karty);
  counter-increment: doplnek;
  transition: transform 0.6s var(--ease-out), box-shadow 0.6s var(--ease-out);
}

.sl-doplnky > div::before {
  content: "0" counter(doplnek);
  display: block;
  margin-bottom: 0.9rem;
  font: italic 300 1.6rem/1 var(--f-titul);
  color: var(--led-text);
}

.sl-doplnky > div:hover {
  box-shadow: var(--stin-karty-vetsi);
  transform: translateY(-4px);
}

.sl-doplnky dt {
  margin: 0 0 0.4rem;
  font: 400 1.5rem/1.2 var(--f-titul);
  color: var(--inkoust);
}

.sl-doplnky dd {
  margin: 0;
  font-size: 0.98rem;
  color: var(--text);
}

/* ---------- Vysoký kontrast (Windows) ---------- */
@media (forced-colors: active) {
  .sl-krok,
  .sl-doplnky > div {
    border: 1px solid CanvasText;
  }
}