/* kucno.css — home-visit service pages (templates/kucno.j2), 2026-10-09.
   Loaded after specialty.css: the first screen (banner, hero, price line,
   pricing card, FAQ details) is the specialty page's; the blocks below are
   these pages' own. Same tokens as the rest of the site. */

/* ------------------------------------------------------------ first screen */
.kc-crumb { margin: 0 0 10px; font-size: 13px; font-weight: 600; letter-spacing: .04em; }
.kc-crumb a { color: var(--mm-gold); text-decoration: none; border-bottom: 1px solid currentColor; }
.kc-crumb a:hover { color: var(--mm-green); }
.kc-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 22px; }
.kc-hero .sp-hero__intro p:last-child { margin-bottom: 0; }
.kc-wa::before {
  content: ""; width: 16px; height: 16px; flex: 0 0 16px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ------------------------------------------------------------ shared */
.kc-tint { background: var(--mm-cream-deep); }
.kc-head { max-width: 760px; margin: 0 0 clamp(26px, 3.4vw, 44px); }
.kc-head h2 { margin-bottom: .35em; }
.kc-head__intro p { margin: 0 0 .8em; color: var(--mm-charcoal); }
.kc-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 0; }

/* ------------------------------------------------------------ split */
.kc-split { padding: var(--mm-section-y) 0; background: var(--mm-white); }
.kc-split.kc-tint { background: var(--mm-cream-deep); }
.kc-split__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.kc-split--flip .kc-split__text { order: 2; }
.kc-split--flip .kc-split__media { order: 1; }
.kc-split__media { margin: 0; }
.kc-split__photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--mm-radius-card); box-shadow: var(--mm-shadow-card); }
.kc-split__text p { margin: 0 0 1em; }
.kc-split__text ul { margin: 0 0 1em; padding-left: 1.1em; }
.kc-split__text li { margin: 0 0 .45em; }

/* ------------------------------------------------------------ prose */
.kc-prose { padding: var(--mm-section-y) 0; background: var(--mm-white); }
.kc-prose__grid { max-width: 820px; }
.kc-prose__grid--aside { max-width: none; display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr); gap: clamp(30px, 5vw, 72px); align-items: start; }
.kc-prose__body p { margin: 0 0 1.05em; }
.kc-prose__body ul, .kc-prose__body ol { margin: 0 0 1.05em; padding-left: 1.2em; }
.kc-prose__body li { margin: 0 0 .5em; }
.kc-prose__body h3 { margin-top: 1.4em; }
.kc-prose__aside {
  position: sticky; top: 110px;
  background: var(--mm-beige); border-radius: var(--mm-radius-card);
  padding: clamp(22px, 2.6vw, 34px); font-size: 15px;
}
.kc-prose__aside h3 { font-size: 22px; margin-bottom: .45em; }
.kc-prose__aside p { margin: 0 0 .8em; }
.kc-prose__aside p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------ steps (green band) */
.kc-steps { padding: var(--mm-section-y) 0; background: var(--mm-green); color: var(--mm-cream); }
.kc-steps h2, .kc-steps h3 { color: var(--mm-cream); }
.kc-steps .kc-head__intro p { color: rgba(246, 249, 247, .85); }
.kc-steps a { color: var(--mm-gold-light); }
.kc-steps__list { list-style: none; margin: 0; padding: 0; counter-reset: kc; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: clamp(18px, 2.4vw, 30px); }
.kc-step { counter-increment: kc; position: relative; padding: 22px 0 0; border-top: 1px solid rgba(197, 157, 95, .55); }
.kc-step::before {
  content: counter(kc); position: absolute; top: -15px; left: 0;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--mm-gold); color: var(--mm-green);
  font: 600 14px/30px var(--mm-font-body); text-align: center;
}
.kc-step h3 { font-size: clamp(20px, 2vw, 23px); margin: 8px 0 .45em; }
.kc-step div { font-size: 15px; color: rgba(246, 249, 247, .88); }
.kc-step p { margin: 0 0 .6em; }

/* ------------------------------------------------------------ cards */
.kc-cards { padding: var(--mm-section-y) 0; background: var(--mm-white); }
.kc-cards__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); }
.kc-cards__grid--2, .kc-cards__grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kc-card {
  background: var(--mm-cream); border: 1px solid var(--mm-line); border-radius: var(--mm-radius-tile);
  padding: clamp(22px, 2.4vw, 30px);
}
.kc-tint .kc-card { background: var(--mm-white); }
.kc-card h3 { font-size: clamp(20px, 2vw, 24px); margin-bottom: .4em; }
.kc-card p { margin: 0 0 .6em; font-size: 15px; }
.kc-card p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------ signs */
.kc-signs { padding: var(--mm-section-y) 0; background: var(--mm-beige); }
.kc-signs__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.kc-signs__head p { margin: 0 0 .9em; }
.kc-signs__list { list-style: none; margin: 0; padding: 0; }
.kc-signs__list li { padding: 16px 0 16px 22px; border-bottom: 1px solid rgba(44, 40, 38, .14); position: relative; }
.kc-signs__list li::before { content: ""; position: absolute; left: 0; top: 25px; width: 9px; height: 9px; border-radius: 50%; background: var(--mm-gold); }
.kc-signs__list strong { display: block; color: var(--mm-green); font-weight: 600; }
.kc-signs__list span { display: block; font-size: 15px; margin-top: 4px; }

/* ------------------------------------------------------------ checklist */
.kc-check { padding: var(--mm-section-y) 0; background: var(--mm-white); }
.kc-check__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 3vw, 40px); }
.kc-check__cols--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kc-check__col { border-top: 2px solid var(--mm-green); padding-top: 18px; }
.kc-check__col h3 { font-size: clamp(20px, 2vw, 24px); }
.kc-check__col ul { list-style: none; margin: 0; padding: 0; }
.kc-check__col li { position: relative; padding: 0 0 0 28px; margin: 0 0 .75em; font-size: 15px; }
.kc-check__col li::before {
  content: ""; position: absolute; left: 2px; top: 6px; width: 12px; height: 7px;
  border-left: 2px solid var(--mm-gold); border-bottom: 2px solid var(--mm-gold); transform: rotate(-45deg);
}

/* ------------------------------------------------------------ compare */
.kc-compare { padding: var(--mm-section-y) 0; background: var(--mm-cream); }
.kc-compare__wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--mm-radius-tile); border: 1px solid var(--mm-line); background: var(--mm-white); }
.kc-compare__table { width: 100%; border-collapse: collapse; font-size: 15px; }
.kc-compare__table th, .kc-compare__table td { padding: 14px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--mm-line); }
.kc-compare__table thead th { background: var(--mm-green); color: var(--mm-cream); font-weight: 600; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
.kc-compare__table tbody th { color: var(--mm-green); font-weight: 600; width: 30%; }
.kc-compare__table tbody tr:last-child th, .kc-compare__table tbody tr:last-child td { border-bottom: 0; }
.kc-compare__table p { margin: 0; }

/* ------------------------------------------------------------ alert */
.kc-alert-wrap { padding: clamp(36px, 5vw, 64px) 0; background: var(--mm-white); }
.kc-alert {
  border: 1px solid rgba(184, 89, 90, .35); border-left: 5px solid var(--mm-error);
  background: #fbf3f1; border-radius: var(--mm-radius-tile);
  padding: clamp(20px, 2.6vw, 32px) clamp(20px, 3vw, 38px); max-width: 920px;
}
.kc-alert h2 { font-size: clamp(22px, 2.6vw, 30px); color: #8f3f40; }
.kc-alert p { margin: 0 0 .7em; }
.kc-alert ul { margin: 0 0 .7em; padding-left: 1.1em; }
.kc-alert li { margin: 0 0 .35em; }
.kc-alert > :last-child { margin-bottom: 0; }

/* ------------------------------------------------------------ prices */
.kc-pricing__intro p { margin: 0 0 1em; }
.kc-pricing .kc-actions { margin-top: 18px; }
/* the specialty table keeps min-width 420px and scrolls sideways on a phone,
   which hid the price column here: let the service name wrap instead */
.kc-pricing .sp-pricing__table table, .page-kucno-lecenje .sp-pricing__table table { min-width: 0; }

/* ------------------------------------------------------------ faq */
.kc-faq { padding: var(--mm-section-y) 0; background: var(--mm-white); }
.kc-faq__grid { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); gap: clamp(26px, 5vw, 72px); align-items: start; }
.kc-faq__head { position: sticky; top: 110px; }
.kc-faq__head p { margin: 0 0 .9em; }

/* ------------------------------------------------------------ siblings */
.kc-sib { padding: var(--mm-section-y) 0; background: var(--mm-cream-deep); }
.kc-sib__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); }
.kc-sib__card {
  display: flex; flex-direction: column; background: var(--mm-white); border-radius: var(--mm-radius-tile);
  overflow: hidden; text-decoration: none; color: var(--mm-charcoal);
  box-shadow: var(--mm-shadow-tile); transition: transform .25s ease, box-shadow .25s ease;
}
.kc-sib__card:hover { transform: translateY(-3px); box-shadow: var(--mm-shadow-card); color: var(--mm-charcoal); }
.kc-sib__img img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.kc-sib__title { font-family: var(--mm-font-serif); font-size: 22px; color: var(--mm-green); line-height: 1.2; padding: 18px 20px 6px; }
.kc-sib__text { font-size: 14px; padding: 0 20px 20px; color: var(--mm-mute); }
.kc-sib__card--hub { background: var(--mm-green); justify-content: center; min-height: 180px; }
.kc-sib__card--hub .kc-sib__title { color: var(--mm-cream); }
.kc-sib__card--hub .kc-sib__text { color: rgba(246, 249, 247, .8); }

/* ------------------------------------------------------------ cta band */
/* a green card on a white band, so it never runs into the green footer */
.kc-cta { padding: clamp(44px, 6vw, 80px) 0; background: var(--mm-white); }
.kc-cta__grid {
  display: grid; grid-template-columns: minmax(0, 1.2fr) auto; gap: clamp(22px, 4vw, 60px); align-items: center;
  background: var(--mm-green); color: var(--mm-cream); border-radius: var(--mm-radius-card);
  padding: clamp(28px, 4.5vw, 60px) clamp(22px, 4.5vw, 64px);
}
.kc-cta h2 { color: var(--mm-cream); }
.kc-cta p { margin: 0 0 .7em; color: rgba(246, 249, 247, .88); }
.kc-cta .kc-actions { margin: 0; flex-direction: column; align-items: stretch; }
.kc-cta .mm-btn--solid { background: var(--mm-gold); border-color: var(--mm-gold); color: var(--mm-green); }
.kc-cta .mm-btn--ghost { color: var(--mm-cream); border-color: rgba(246, 249, 247, .55); }
.kc-cta .mm-btn--ghost:hover { background: var(--mm-cream); color: var(--mm-green); }

/* ------------------------------------------------------------ responsive */
@media (max-width: 980px) {
  .kc-cards__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kc-sib__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kc-check__cols--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .kc-split__grid, .kc-signs__grid, .kc-faq__grid, .kc-cta__grid, .kc-prose__grid--aside { grid-template-columns: 1fr; }
  .kc-split--flip .kc-split__text, .kc-split__text { order: 1; }
  .kc-split--flip .kc-split__media, .kc-split__media { order: 2; }
  .kc-faq__head, .kc-prose__aside { position: static; }
  .kc-hero .sp-hero__text { text-align: left; }
  .kc-hero .sp-facts { justify-content: flex-start; }
}
@media (max-width: 640px) {
  .kc-cards__grid, .kc-cards__grid--2, .kc-cards__grid--4, .kc-sib__grid, .kc-check__cols, .kc-check__cols--3 { grid-template-columns: 1fr; }
  .kc-hero__actions, .kc-actions { flex-direction: column; }
  .kc-hero__actions .mm-btn, .kc-actions .mm-btn { width: 100%; justify-content: center; letter-spacing: .1em; padding-left: 16px; padding-right: 16px; }
  .kc-pricing .mm-prices td, .kc-pricing .mm-prices th { padding: 11px 10px; font-size: 14px; }
  .kc-steps__list { grid-template-columns: 1fr; gap: 30px; }
  .kc-compare__table { font-size: 14px; }
  .kc-compare__table th, .kc-compare__table td { padding: 12px 12px; }
  .kc-compare__table tbody th { width: auto; }
}

/* ------------------------------------------------------------ hub (/kucno-lecenje/) */
/* key-service cards that open the service's own page: the whole card is the link */
.sp-svc--link { position: relative; transition: transform .25s ease, box-shadow .25s ease; }
.sp-svc--link:hover { transform: translateY(-3px); box-shadow: var(--mm-shadow-card); }
.sp-svc--link h3 a { color: inherit; text-decoration: none; }
.sp-svc--link h3 a::after { content: ""; position: absolute; inset: 0; }
.sp-svc--link:hover h3 a { color: var(--mm-gold); }
#specijalisti { scroll-margin-top: 140px; }