/* Služby pages shared styles */

.services-hero { margin-bottom: 30px; min-height:420px; background:#fff url('../images/hero-bg.png') no-repeat center; background-size: fill; color:var(--kc-green); border-radius:44px 0 44px 44px; display:flex; align-items:center; }
.services-hero .container { padding:40px clamp(40px,5vw,160px); }
.services-hero h1 { font-size:48px; margin:0 0 8px; }
.services-hero p { font-family:'Roboto', serif; font-weight:300; font-size:18px; margin:0; }

.service-content { background:#fff; border-radius:24px; padding:32px; margin:24px auto; max-width:1400px; box-shadow:0 10px 30px rgba(0,0,0,.06); }
.service-content h2 { color:var(--kc-green); margin-top:0; }
.service-content p { font-family:'Roboto', serif; line-height:1.65; color:#333; }
.service-grid { display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:start; }
.service-grid .illustration { background:#f8f6f2; border-radius:16px; padding:16px; text-align:center; }
.service-grid .illustration img { max-width:100%; height:auto; }

.feature-list { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:1fr 1fr; gap:10px 22px; }
.feature-list li { position:relative; padding-left:28px; }
.feature-list li::before { content:"›"; position:absolute; left:6px; color:var(--kc-gold); font-weight:900; }

.cta-box { background:var(--kc-green); color:#fff; border-radius:14px; padding:24px; display:flex; justify-content:space-between; align-items:center; gap:16px; }
.cta-box a { background:var(--kc-gold); color:#fff; text-decoration:none; padding:12px 24px; border-radius:10px; font-weight:800; }
.cta-box a:hover { background:#dc9c1d; }

.calculator-cta { margin:32px 0 24px; background:linear-gradient(135deg, #f8f6f2 0%, #fff 100%); border-radius:16px; border:1px solid #e8e5df; box-shadow:0 4px 12px rgba(0,0,0,0.05); }
.cta-box-small { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:20px 32px; max-width:800px; margin:0 auto; white-space:nowrap; }
.cta-box-small span { color:#555; font-size:16px; font-weight:500; flex-shrink:0; }
.cta-box-small a { background:linear-gradient(135deg, var(--kc-gold) 0%, #dc9c1d 100%); color:#fff; text-decoration:none; font-weight:700; font-size:14px; padding:12px 24px; border-radius:10px; transition:all 0.3s ease; box-shadow:0 2px 6px rgba(220,156,29,0.2); flex-shrink:0; }
.cta-box-small a:hover { transform:translateY(-2px); box-shadow:0 6px 16px rgba(220,156,29,0.35); }

.service-pager{max-width:1920px;margin:12px auto 24px;padding:0 clamp(40px,5vw,160px);display:flex;justify-content:space-between;align-items:center}
.service-pager a{display:inline-flex;align-items:center;gap:10px;color:var(--kc-gold);text-decoration:none;font-weight:800}
.service-pager a .arrow{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:999px;border:2px solid var(--kc-gold);font-size:20px;line-height:0;color:var(--kc-gold)}
.service-pager a:hover .arrow{background:var(--kc-gold);color:#fff}

@media (max-width:900px){
  .services-hero h1 { font-size:34px; }
  .service-grid { grid-template-columns:1fr; }
  .feature-list { grid-template-columns:1fr; }
  .service-pager{padding:0 clamp(40px,5vw,160px)}
  .cta-box-small { flex-direction:column; gap:16px; text-align:center; white-space:normal; }
  .cta-box-small span { font-size:15px; }
}
