/* ==========================================================================
   Önkormányzatok és hivatalok – page-specific styles
   Multi-source approval flow (4 sources → Jóváhagyó → Publikálás)
   ========================================================================== */

.flow__steps--multi { gap: 0; }
.flow__steps--multi .flow-step { padding: 28px; }
.flow__steps--multi .flow-step__icon { width: 56px; height: 56px; }
.flow__steps--multi > .flow__arrow:not(.flow__join) { width: 61px; height: 28px; }
.flow-step__no--muted { color: var(--muted); }

.flow-src { width: 288px; flex: none; display: flex; flex-direction: column; gap: 12px; }
.flow-src__label { font: 600 14px/1.3 var(--font-text); letter-spacing: .02em; }
.flow-src__list { position: relative; display: flex; flex-direction: column; gap: 12px; }
.flow-src__item {
  position: relative;
  display: flex; align-items: center; gap: 16px;
  height: 70px; padding: 0 20px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 16px;
  font: 600 20px/1.3 var(--font-head);
  color: var(--navy);
  transition: border-color .25s var(--ease-out), box-shadow .25s var(--ease-out), background-color .25s var(--ease-out);
}
.flow-src__item:hover { background: var(--white); box-shadow: var(--shadow-hover); }
.flow-src__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--white); flex: none; }
.flow-src__icon .i { width: 20px; height: 20px; }

/* desktop connector: stubs from every source + vertical spine + arrow into step 2 */
@media (min-width: 1200px) {
  .flow-src__item::after { content: ""; position: absolute; left: 100%; top: 50%; width: 58px; border-top: 1.5px solid var(--slate); margin-left: 1px; }
  .flow-src__list::after { content: ""; position: absolute; left: calc(100% + 58px); top: 35px; bottom: 35px; border-left: 1.5px solid var(--slate); }
  .flow__join { width: 129px; height: 12px; position: relative; }
  .flow__join .i { display: none; }
  .flow__join::before { content: ""; position: absolute; left: 58px; right: 2px; top: 50%; border-top: 1.5px solid var(--slate); }
  .flow__join::after { content: ""; position: absolute; right: 2px; top: 50%; width: 8px; height: 8px; border-top: 1.5px solid var(--slate); border-right: 1.5px solid var(--slate); transform: translate(0, -50%) rotate(45deg); transform-origin: center; margin-top: 0; }
}

/* ---------- Tablet ---------- */
@media (max-width: 1199px) {
  .flow-src { width: auto; }
  .flow__steps--multi { gap: 20px; }
  .flow__steps--multi > .flow__arrow:not(.flow__join) { width: 28px; }
}


/* Figma: the second card row is slightly taller (extra bottom space) */
@media (min-width: 1200px) {
  .features .feature:nth-child(n+4) { min-height: 392px; }
}
@media (max-width: 1199px) {
  .sp-hero .h1 { max-width: 590px; }
}