/* ============================================================
   /sluzby — služby nousoos (it · grafika · marketing · kreatíva)
   Page-specific styles. Tokens + shared components come from styles.css;
   this file only adds .sv-* and a few overrides. Never name classes ad-*.
   ============================================================ */

.sv-page .nav__links a[aria-current="page"]::after { transform:scaleX(1); }

/* ─── shared bits ─── */
.sv-link {
  font-size:11px; letter-spacing:0.18em; text-transform:uppercase; font-weight:500;
  display:inline-flex; align-items:center; gap:10px;
  border-bottom:1px solid var(--ink); padding-bottom:6px;
  transition:opacity 200ms;
}
.sv-link:hover { opacity:.6; }

/* ─── HERO ─── */
.sv-hero { padding: clamp(40px, 6vw, 96px) 0 0; border-bottom:1px solid var(--rule); }
.sv-hero__kicker {
  display:flex; justify-content:space-between; align-items:baseline; gap:16px; flex-wrap:wrap;
  padding-bottom:20px; border-bottom:1px solid var(--rule);
  margin-bottom: clamp(32px, 5vw, 64px);
}
.sv-hero__top {
  display:grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 80px); align-items:end;
}
.sv-hero__h {
  font-size: clamp(88px, 16vw, 240px);
  font-weight:600; letter-spacing:-0.055em; line-height:0.82;
  margin:0;
}
/* "services." is ~25 % wider than "služby." — keep it inside its grid column */
html[lang="en"] .sv-hero__h { font-size: clamp(72px, 12.5vw, 184px); }
.sv-hero__big {
  font-size: clamp(26px, 3vw, 44px); line-height:1.1; letter-spacing:-0.035em; font-weight:500;
  margin:0 0 20px; text-wrap:balance;
}
.sv-hero__big em { font-style:italic; font-weight:400; color:var(--ink-soft); }
.sv-hero__sub { font-size:15px; line-height:1.6; color:var(--ink-soft); max-width:46ch; margin:0 0 28px; }
.sv-hero__actions { display:flex; flex-wrap:wrap; gap:16px 32px; align-items:center; }

.sv-hero__fig {
  margin: clamp(40px, 6vw, 88px) 0 0;
  aspect-ratio: 2 / 1;
  overflow:hidden;
  background:#c9b6a3;
}
.sv-hero__fig img { width:100%; height:100%; object-fit:cover; object-position:50% 50%; }

.sv-hero__strip {
  display:grid; grid-template-columns:repeat(4, 1fr);
}
.sv-hero__step {
  padding:24px 24px 28px; border-left:1px solid var(--rule);
  display:flex; flex-direction:column; gap:6px;
  transition:background 200ms;
}
.sv-hero__step:first-child { border-left:0; padding-left:0; }
.sv-hero__step:hover { background:rgba(0,0,0,0.03); }
.sv-hero__step-num { font-size:10px; letter-spacing:0.22em; color:var(--ink-soft); font-weight:500; font-feature-settings:"tnum"; }
.sv-hero__step-title { font-size: clamp(22px, 2.2vw, 30px); font-weight:600; letter-spacing:-0.03em; line-height:1.05; }
.sv-hero__step-sub { font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-soft); font-weight:500; }

/* section headings: the longest word ("marketing.", en "questions.") is ~4.5em wide, so the
   homepage max of 168px would run into the lead column on ≥1680px screens; cap at 136px */
@media (min-width:881px){
  .sv-page .sec__h { font-size: clamp(64px, 9.5vw, 136px); }
}

/* ─── SERVICE SECTIONS ─── */
.sv-srv .sec__head { align-items:end; }
.sv-srv__no {
  display:block; margin-bottom:18px;
  font-size:11px; letter-spacing:0.18em; font-weight:500; line-height:1;
  color:var(--ink-soft); font-feature-settings:"tnum";
}
.sv-srv__grid {
  display:grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(40px, 6vw, 104px); align-items:start;
}
.sv-srv--flip .sv-srv__aside { order:2; }
.sv-srv__aside {
  position:sticky; top:88px;
  display:flex; flex-direction:column; gap:28px;
}
.sv-srv__fig { margin:0; }
.sv-srv__media { position:relative; overflow:hidden; background:var(--bg-deep); }
.sv-srv__fig img { width:100%; height:auto; }
.sv-srv__cap {
  margin-top:12px;
  font-size:11px; letter-spacing:0.18em; text-transform:uppercase; font-weight:500; color:var(--ink-soft);
}

/* technical dimension overlay on the IT photo */
.sv-dim { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.sv-dim path { fill:none; stroke:#1a1a18; stroke-width:1; vector-effect:non-scaling-stroke; }
.sv-dim__l {
  position:absolute; transform:translate(-50%, -50%);
  font-size:10px; letter-spacing:0.2em; text-transform:uppercase; font-weight:500;
  color:#1a1a18; white-space:nowrap; line-height:1;
}
.sv-dim__l--h { left:50.3%; top:90.4%; }
.sv-dim__l--v { left:95.6%; top:48.8%; transform:translate(-50%, -50%) rotate(-90deg); }

/* lead person */
.sv-lead {
  display:grid; grid-template-columns: 72px minmax(0, 1fr); gap:18px; align-items:center;
  border-top:1px solid var(--rule); padding-top:20px;
}
.sv-lead__photo { width:72px; height:96px; object-fit:cover; background:var(--bg-deep); filter:grayscale(1) contrast(1.05); }
.sv-lead__body { display:flex; flex-direction:column; gap:4px; min-width:0; }
.sv-lead__kicker { font-size:10px; letter-spacing:0.22em; text-transform:uppercase; color:var(--ink-soft); font-weight:500; }
.sv-lead__name { font-size:18px; font-weight:600; letter-spacing:-0.02em; line-height:1.2; }
.sv-lead__role { font-size:13px; color:var(--ink-soft); }
.sv-lead__links { display:flex; flex-wrap:wrap; gap:6px 10px; margin-top:6px; font-size:12px; letter-spacing:0.12em; text-transform:uppercase; font-weight:500; }
.sv-lead__links a { border-bottom:1px solid var(--rule-strong); padding-bottom:2px; transition:border-color 200ms; }
.sv-lead__links a:hover { border-color:var(--ink); }
.sv-lead__links .sep { color:var(--rule-strong); }

/* groups */
.sv-srv__main { display:flex; flex-direction:column; }
.sv-grp { border-top:1px solid var(--ink); padding:20px 0 32px; }
.sv-grp__h {
  font-size: clamp(20px, 2vw, 28px); font-weight:600; letter-spacing:-0.03em; line-height:1.1;
  margin:0 0 18px;
}
.sv-grp__n { color:var(--ink-soft); font-weight:500; font-size:0.6em; letter-spacing:0.08em; vertical-align:0.35em; margin-right:6px; font-feature-settings:"tnum"; }
.sv-grp__items {
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:1fr 1fr; gap:10px 32px;
}
.sv-grp__items li { position:relative; padding-left:22px; font-size:15px; line-height:1.4; letter-spacing:-0.005em; }
.sv-grp__items li::before { content:"×"; position:absolute; left:0; top:0; color:var(--ink-soft); font-weight:500; }
.sv-grp__items li small { display:block; font-size:12px; color:var(--ink-soft); letter-spacing:0.01em; margin-top:2px; }

/* price box */
.sv-price {
  background:var(--inverse); color:var(--inverse-fg);
  padding: clamp(22px, 2.6vw, 32px);
  margin-top:8px;
}
.sv-price__label { display:block; font-size:10px; letter-spacing:0.22em; text-transform:uppercase; color:#8b847a; font-weight:500; margin-bottom:10px; }
.sv-price__row {
  display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  padding:12px 0; border-bottom:1px solid rgba(241,238,234,.16);
  font-size:15px;
}
.sv-price__row span small { font-size:12px; color:#8b847a; margin-left:4px; }
.sv-price__row b { font-weight:500; font-size:18px; white-space:nowrap; font-feature-settings:"tnum"; }
.sv-price__row b small { font-size:12px; color:#8b847a; font-weight:400; }
.sv-price__note { margin:14px 0 0; font-size:12px; line-height:1.55; color:#8b847a; max-width:52ch; }

.sv-srv__actions { display:flex; flex-wrap:wrap; align-items:center; gap:18px 32px; margin-top:28px; }

/* ─── SPOLU (dark) ─── */
.sv-spolu { background:var(--inverse); color:var(--inverse-fg); border-bottom:0; }
.sv-spolu .sec__head { background:var(--inverse); }
.sv-spolu .sec__lead > small { color:#8b847a; }
.sv-combo { display:grid; grid-template-columns:repeat(3, 1fr); gap: clamp(24px, 3vw, 48px); }
.sv-combo__card { border-top:1px solid rgba(241,238,234,.35); padding-top:20px; display:flex; flex-direction:column; gap:14px; }
.sv-combo__n { font-size:11px; letter-spacing:0.22em; text-transform:uppercase; color:#8b847a; font-weight:500; }
.sv-combo__h { font-size: clamp(26px, 2.8vw, 40px); font-weight:600; letter-spacing:-0.04em; line-height:1.02; margin:0; text-wrap:balance; }
.sv-combo__tags { display:flex; flex-wrap:wrap; gap:6px; margin:0; font-size:12px; letter-spacing:0.12em; text-transform:uppercase; font-weight:500; }
.sv-combo__tags a { border:1px solid rgba(241,238,234,.35); padding:5px 10px; transition:background 160ms, color 160ms; }
.sv-combo__tags a:hover { background:var(--inverse-fg); color:var(--ink); }
.sv-combo__tags span { align-self:center; color:#8b847a; }
.sv-combo__p { margin:0; font-size:15px; line-height:1.55; color:#cbc6bb; max-width:38ch; }

/* ─── FAQ ─── */
.sv-faq__list { border-top:1px solid var(--ink); }
.sv-faq__item { border-bottom:1px solid var(--rule); }
.sv-faq__item summary {
  list-style:none; cursor:pointer;
  display:flex; justify-content:space-between; align-items:center; gap:24px;
  padding:24px 0;
  font-size: clamp(20px, 2.2vw, 30px); font-weight:500; letter-spacing:-0.03em; line-height:1.15;
}
.sv-faq__item summary::-webkit-details-marker { display:none; }
.sv-faq__item summary::after {
  content:"+"; flex:0 0 auto;
  font-size:24px; font-weight:400; line-height:1;
  transition:transform 240ms cubic-bezier(.22,1,.36,1);
}
.sv-faq__item[open] summary::after { transform:rotate(45deg); }
.sv-faq__item summary:hover { opacity:.7; }
.sv-faq__item p { margin:0 0 28px; max-width:64ch; font-size:16px; line-height:1.6; color:var(--ink-soft); }

/* ─── footer form: topic chips on dark ─── */
.sv-chips-label { font-size:11px; letter-spacing:0.18em; text-transform:uppercase; font-weight:500; color:#cbc6bb; }
.foot__form .chip { border-color:rgba(241,238,234,.35); color:#cbc6bb; }
.foot__form .chip:hover { background:rgba(241,238,234,.08); }
.foot__form .chip:has(input:checked) { background:var(--inverse-fg); color:var(--ink); border-color:var(--inverse-fg); }
.foot__form .chip:has(input:checked):hover { background:#fff; }

/* ─── responsive ─── */
@media (max-width:1100px){
  .sv-grp__items { grid-template-columns:1fr; }
}
@media (max-width:880px){
  .sv-hero__top { grid-template-columns:1fr; gap:28px; }
  .sv-hero__fig { aspect-ratio: 4 / 3; }
  .sv-hero__strip { grid-template-columns:1fr 1fr; }
  .sv-hero__step { padding:20px 16px 22px; border-top:1px solid var(--rule); }
  .sv-hero__step:nth-child(odd) { border-left:0; padding-left:0; }
  .sv-hero__step:nth-child(-n+2) { border-top:0; }
  .sv-srv__grid { grid-template-columns:1fr; }
  .sv-srv--flip .sv-srv__aside { order:0; }
  .sv-srv__aside { position:static; }
  .sv-combo { grid-template-columns:1fr; }
  .sv-dim__l { font-size:8px; letter-spacing:0.16em; }
}
@media (prefers-reduced-motion: reduce){
  .sv-faq__item summary::after { transition:none; }
}