/* ── Stránky služieb (videoprodukcia, branding, tvorba-webu …) ─────────────
   Nadväzuje na project_page.css: intro (.project_intro_container, .project_meta),
   textové bloky (.pd_text) a médiá (.pd_media). Tu sú len prvky navyše:
   omrvinky, H2 v textových blokoch, karty služieb, proces, zoznamy, čísla,
   ukážky z portfólia, FAQ, súvisiace služby a CTA pás.
   Farby výhradne cez premenné témy (moodswitch.js), --pm-line / --pm-muted
   a --pd-gutter definuje project_page.css na <main>. */

.sv{
  --sv-ease: cubic-bezier(0.19, 1, 0.22, 1);
  --sv-soft: color-mix(in srgb, var(--White) 76%, transparent);
}

/* ── Omrvinky (nad názvom služby) ───────────────────────────────────────── */
.sv_crumbs ol{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  list-style: none;
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pm-muted);
}
.sv_crumbs li{
  display: flex;
  align-items: center;
  gap: 10px;
}
.sv_crumbs li + li::before{
  content: "/";
  opacity: 0.5;
}
.sv_crumbs a{
  color: var(--pm-muted);
  transition: color 300ms ease;
}
.sv_crumbs a:hover{ color: var(--White); }
.sv_crumbs [aria-current="page"]{ color: var(--White); }

/* ── H1 služby: vzhľad .project_name, o niečo menší (dlhé slová) ───────── */
.sv_title{
  margin-bottom: 0;
  font-size: clamp(56px, 9vw, 168px);
  overflow-wrap: break-word;
}

/* ── Intro: popis + tlačidlá ───────────────────────────────────────────── */
.sv_intro{
  display: flex;
  flex-direction: column;
  gap: 28px;
  min-width: 0;
}
.sv_actions{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.sv_btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 26px 15px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--Pill-bg);
  color: var(--Black);
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: transform 600ms var(--sv-ease), box-shadow 400ms ease, border-color 300ms ease;
}
.sv_btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 40px -14px color-mix(in srgb, var(--Pill-bg) 80%, transparent);
}
.sv_btn__arrow{ transition: transform 600ms var(--sv-ease); }
.sv_btn:hover .sv_btn__arrow{ transform: translateX(4px); }
.sv_btn--ghost{
  background: transparent;
  color: var(--White);
  border-color: color-mix(in srgb, var(--White) 30%, transparent);
}
.sv_btn--ghost:hover{
  border-color: var(--Pill-bg);
  box-shadow: none;
}
.sv_btn:focus-visible,
.sv_case:focus-visible,
.sv_related__link:focus-visible{
  outline: 2px solid var(--Pill-bg);
  outline-offset: 4px;
}

/* ── Textové sekcie s H2 (rovnaká mriežka ako .pd_text s h4) ───────────── */
.pd_text.sv_sec{ padding-block: clamp(56px, 9vh, 110px); }
.pd_text + .pd_text.sv_sec{ padding-top: 0; }
.pd_text > .sv_h2{
  grid-column: 1;
  grid-row: 2;
  max-width: 14ch;
  margin: 0;
  font-size: clamp(26px, 2.5vw, 44px);
  font-weight: 500;
  line-height: 1.05;
  text-transform: uppercase;
}
/* poradové číslo sekcie: zdieľa počítadlo pd-section s h4 v project_page.css */
.pd_text > .sv_h2::before{
  counter-increment: pd-section;
  content: counter(pd-section, decimal-leading-zero);
  display: block;
  margin-bottom: 14px;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--pm-muted);
}
.sv_col{
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
}
.sv_col > * + *{ margin-top: clamp(24px, 2.4vw, 36px); }
.sv_col .pd_lead{ max-width: 34em; }
.sv_text{
  max-width: 40em;
  font-size: clamp(16px, 1.15vw, 19px);
  line-height: 1.6;
  color: var(--sv-soft);
}
/* blok na celú šírku pod nadpisom (karty, proces, čísla, ukážky) */
.sv_block{
  grid-column: 1 / -1;
  grid-row: 3;
  min-width: 0;
  margin-top: clamp(40px, 5vw, 80px);
}

/* ── Karty služieb ─────────────────────────────────────────────────────── */
.sv_cards{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  list-style: none;
}
.sv_cards--4{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sv_card{
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: clamp(240px, 22vw, 320px);
  padding: clamp(24px, 2.4vw, 36px);
  border: 1px solid transparent;
  border-radius: 12px;
  background-color: var(--Purple-box);
  overflow: hidden;
  isolation: isolate;
  transition: background-color 300ms ease, border-color 300ms ease, transform 600ms var(--sv-ease);
}
.sv_card::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(circle at 90% 0%, color-mix(in srgb, var(--Pill-bg) 22%, transparent), transparent 60%);
  opacity: 0;
  transition: opacity 400ms ease;
  pointer-events: none;
}
.sv_card:hover{
  background-color: var(--Purple-box-hover);
  border-color: color-mix(in srgb, var(--Pill-bg) 50%, transparent);
  transform: translateY(-4px);
}
.sv_card:hover::before{ opacity: 1; }
.sv_card__num{
  margin-bottom: auto;
  padding-bottom: 40px;
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0.08em;
  color: var(--pm-muted);
}
.sv_card__title{
  margin: 0 0 12px;
  font-family: 'Lemon', 'FoundersGrotesk', sans-serif;
  font-weight: 900;
  font-size: clamp(22px, 1.9vw, 32px);
  line-height: 0.98;
  font-feature-settings: "ss01" 1;
  text-transform: uppercase;
  color: var(--White);
  overflow-wrap: anywhere;
}
.sv_card__text{
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.5;
  color: var(--sv-soft);
}

/* ── Proces (konzultácia → … → vyhodnotenie) ───────────────────────────── */
.sv_steps{
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  list-style: none;
  border-top: 1px solid var(--pm-line);
}
.sv_step{
  padding: clamp(24px, 2.4vw, 36px) clamp(16px, 1.6vw, 28px) 8px 0;
}
.sv_step + .sv_step{
  padding-left: clamp(16px, 1.6vw, 28px);
  border-left: 1px solid var(--pm-line);
}
/* veľká obrysová číslica, pri hoveri sa vyplní akcentom (ako .step__num na homepage) */
.sv_step__num{
  display: block;
  margin-bottom: clamp(20px, 2.4vw, 40px);
  font-family: 'Lemon', 'FoundersGrotesk', sans-serif;
  font-weight: 900;
  font-size: clamp(48px, 4.4vw, 84px);
  line-height: 0.85;
  font-feature-settings: "ss01" 1;
  color: transparent;
  -webkit-text-stroke: 1.5px color-mix(in srgb, var(--White) 45%, transparent);
  transition: color 400ms ease, -webkit-text-stroke-color 400ms ease;
}
.sv_step:hover .sv_step__num{
  color: var(--Pill-bg);
  -webkit-text-stroke-color: var(--Pill-bg);
}
.sv_step__title{
  margin: 0 0 10px;
  font-size: clamp(19px, 1.45vw, 25px);
  font-weight: 500;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--White);
}
.sv_step__text{
  font-size: clamp(15px, 1vw, 16px);
  line-height: 1.5;
  color: var(--sv-soft);
}

/* ── Zoznamy (výstupy, čo ovplyvňuje cenu) ─────────────────────────────── */
.sv_list{
  list-style: none;
  border-top: 1px solid var(--pm-line);
}
.sv_list li{
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--pm-line);
  font-size: clamp(16px, 1.2vw, 20px);
  line-height: 1.45;
  color: var(--sv-soft);
}
.sv_list li::before{
  content: "";
  width: 9px;
  height: 9px;
  margin-top: 0.5em;
  border-radius: 50%;
  background: var(--Pill-bg);
}
.sv_list strong{
  font-weight: 500;
  color: var(--White);
}

/* ── Čísla (len povolené štatistiky z homepage) ────────────────────────── */
.sv_stats{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  list-style: none;
}
.sv_stats--2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sv_stat{
  padding: clamp(24px, 2.4vw, 36px);
  border-radius: 12px;
  background-color: var(--Purple-box);
}
.sv_stat__num{
  font-family: 'Lemon', 'FoundersGrotesk', sans-serif;
  font-weight: 900;
  font-size: clamp(44px, 4.6vw, 84px);
  line-height: 0.9;
  font-feature-settings: "ss01" 1;
  white-space: nowrap;
  color: var(--White);
}
.sv_stat__unit{
  margin-left: 0.12em;
  font-size: 0.45em;
  color: var(--Pill-bg);
}
.sv_stat__desc{
  margin-top: 14px;
  font-size: clamp(14px, 1vw, 16px);
  line-height: 1.4;
  color: var(--sv-soft);
}

/* ── Ukážky z portfólia ────────────────────────────────────────────────── */
.sv_cases{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 3vw, 48px) clamp(14px, 2vw, 28px);
  list-style: none;
}
.sv_cases--3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sv_case{
  display: flex;
  flex-direction: column;
  gap: 16px;
  color: var(--White);
}
.sv_case__media{
  display: block;
  aspect-ratio: 16 / 10;
  border-radius: 12px;
  overflow: hidden;
  background: var(--Client-purple);
}
.sv_case__media img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1200ms var(--sv-ease);
}
.sv_case:hover .sv_case__media img{ transform: scale(1.05); }
.sv_case__head{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
}
.sv_case__name{
  margin: 0;
  font-family: 'Lemon', 'FoundersGrotesk', sans-serif;
  font-weight: 900;
  font-size: clamp(26px, 2.4vw, 44px);
  line-height: 0.95;
  font-feature-settings: "ss01" 1;
  text-transform: uppercase;
  color: var(--White);
}
.sv_case__arrow{
  flex: none;
  font-size: clamp(20px, 1.8vw, 28px);
  line-height: 1;
  color: var(--Pill-bg);
  transition: transform 600ms var(--sv-ease);
}
.sv_case:hover .sv_case__arrow{ transform: translateX(6px); }
.sv_case__desc{
  max-width: 46ch;
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.5;
  color: var(--sv-soft);
}

/* ── FAQ (<details>) ───────────────────────────────────────────────────── */
.sv_faq{
  border-top: 1px solid var(--pm-line);
  interpolate-size: allow-keywords;
}
.sv_faq__item{ border-bottom: 1px solid var(--pm-line); }
.sv_faq__q{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: clamp(20px, 2vw, 28px) 0;
  list-style: none;
}
.sv_faq__q::-webkit-details-marker{ display: none; }
.sv_faq__q:focus-visible{
  outline: 2px solid var(--Pill-bg);
  outline-offset: 4px;
  border-radius: 4px;
}
.sv_faq__q h3{
  margin: 0;
  font-size: clamp(18px, 1.5vw, 26px);
  font-weight: 500;
  line-height: 1.25;
  color: var(--White);
}
/* krúžok s „+", po otvorení sa otočí na „×" */
.sv_faq__icon{
  position: relative;
  flex: none;
  width: 40px;
  height: 40px;
  border: 1px solid color-mix(in srgb, var(--White) 30%, transparent);
  border-radius: 50%;
  transition: transform 600ms var(--sv-ease), border-color 300ms ease;
}
.sv_faq__icon::before,
.sv_faq__icon::after{
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 13px;
  height: 1.5px;
  background: var(--White);
  transform: translate(-50%, -50%);
}
.sv_faq__icon::after{ transform: translate(-50%, -50%) rotate(90deg); }
.sv_faq__q:hover .sv_faq__icon{ border-color: var(--Pill-bg); }
.sv_faq__item[open] .sv_faq__icon{
  transform: rotate(45deg);
  border-color: var(--Pill-bg);
}
.sv_faq__a{
  max-width: 46em;
  padding-bottom: clamp(22px, 2.4vw, 32px);
}
.sv_faq__a p{
  font-size: clamp(16px, 1.15vw, 19px);
  line-height: 1.6;
  color: var(--sv-soft);
}
/* plynulé rozbalenie tam, kde to prehliadač vie (inak sa otvorí okamžite) */
.sv_faq__item::details-content{
  block-size: 0;
  overflow: hidden;
  transition: block-size 700ms var(--sv-ease), content-visibility 700ms allow-discrete;
}
.sv_faq__item[open]::details-content{ block-size: auto; }

/* ── Súvisiace služby ──────────────────────────────────────────────────── */
.sv_related{
  list-style: none;
  border-top: 1px solid var(--pm-line);
}
.sv_related__link{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px 24px;
  padding: clamp(18px, 2vw, 28px) 0;
  border-bottom: 1px solid var(--pm-line);
  color: var(--White);
}
.sv_related__name{
  font-family: 'Lemon', 'FoundersGrotesk', sans-serif;
  font-weight: 900;
  font-size: clamp(28px, 3.4vw, 60px);
  line-height: 0.95;
  font-feature-settings: "ss01" 1;
  text-transform: uppercase;
  transition: transform 700ms var(--sv-ease);
}
.sv_related__desc{
  grid-column: 1;
  font-size: clamp(14px, 1vw, 16px);
  line-height: 1.4;
  color: var(--pm-muted);
}
.sv_related__arrow{
  grid-column: 2;
  grid-row: 1 / span 2;
  font-size: clamp(22px, 2.2vw, 36px);
  line-height: 1;
  color: var(--Pill-bg);
  transition: transform 700ms var(--sv-ease);
}
.sv_related__link:hover .sv_related__name{ transform: translateX(10px); }
.sv_related__link:hover .sv_related__arrow{ transform: translateX(8px); }

/* ── CTA pás pred pätičkou ─────────────────────────────────────────────── */
.sv_cta{
  width: 100%;
  padding: clamp(40px, 8vh, 100px) var(--pd-gutter) 0;
}
.sv_cta__box{
  padding: clamp(32px, 5vw, 88px);
  border-radius: 12px;
  background-color: var(--Purple-box);
  background-image: radial-gradient(circle at 88% 12%, color-mix(in srgb, var(--Pill-bg) 22%, transparent), transparent 55%);
}
.sv_cta__title{
  max-width: 13ch;
  margin: 18px 0 22px;
  font-family: 'Lemon', 'FoundersGrotesk', sans-serif;
  font-weight: 900;
  font-size: clamp(42px, 6.6vw, 120px);
  line-height: 0.92;
  font-feature-settings: "ss01" 1;
  text-transform: uppercase;
  color: var(--White);
}
.sv_cta__title .pencil .pencil__svg{ color: var(--Pill-bg); }
.sv_cta__text{
  max-width: 40ch;
  margin-bottom: 32px;
  font-size: clamp(17px, 1.4vw, 24px);
  line-height: 1.45;
  color: var(--sv-soft);
}

/* ── Responzívne ───────────────────────────────────────────────────────── */
@media (max-width: 1100px){
  .sv_cards,
  .sv_cards--4,
  .sv_cases--3,
  .sv_stats{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* proces pod sebou, číslica vľavo, text vpravo */
  .sv_steps{ grid-template-columns: minmax(0, 1fr); }
  .sv_step,
  .sv_step + .sv_step{
    display: grid;
    grid-template-columns: clamp(72px, 12vw, 120px) minmax(0, 1fr);
    column-gap: 20px;
    padding: 24px 0;
    border-left: 0;
    border-bottom: 1px solid var(--pm-line);
  }
  .sv_step__num{
    grid-row: 1 / span 2;
    margin: 0;
  }
}

@media (max-width: 768px){
  .pd_text > .sv_h2,
  .sv_col,
  .sv_block{
    grid-column: 1;
    grid-row: auto;
  }
  .pd_text > .sv_h2{ max-width: none; }
  .sv_block{ margin-top: 20px; }
  .sv_col .pd_lead{ max-width: 100%; }
  .sv_title{ font-size: clamp(34px, 11.5vw, 96px); }
  .sv_cards,
  .sv_cards--4,
  .sv_cases,
  .sv_cases--3{ grid-template-columns: minmax(0, 1fr); }
  .sv_card{ min-height: 0; }
  .sv_card__num{ padding-bottom: 28px; }
  .sv_stats,
  .sv_stats--2{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .sv_stat{ padding: 20px; }
  .sv_stat__num{ font-size: clamp(34px, 10vw, 56px); }
  .sv_btn{ padding: 15px 22px 14px; font-size: 14px; }
  .sv_cta__box{ padding: 28px 22px 32px; }
}

@media (prefers-reduced-motion: reduce){
  .sv_btn,
  .sv_btn__arrow,
  .sv_card,
  .sv_case__media img,
  .sv_case__arrow,
  .sv_faq__icon,
  .sv_related__name,
  .sv_related__arrow{ transition: none; }
  .sv_faq__item::details-content{ transition: none; }
}