.funkciok-page { }

.funkciok-hero {
  position: relative;
  text-align: center;
}

.funkciok-hero-bg {
  width: 100%;
  height: 70vh;
  object-fit: cover;
}

.funkciok-hero-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--space-3);
  max-width: 640px;
  margin-inline: auto;
  padding: var(--space-4);
  text-align: center;
}

.funkciok-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: var(--space-4);
}

.funkciok-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: var(--space-4);
}

.funkciok-text-split {
  display: grid;
  grid-template-columns: 60% 40%;
}

.funkciok-text-col {
  max-width: 640px;
}

.funkciok-masonry {
  column-count: 3;
  column-gap: var(--space-3);
}

.funkciok-masonry img {
  margin-bottom: var(--space-3);
  border: var(--border-strong);
  border-radius: var(--radius-sm);
}

.funkciok-centered-text {
  max-width: 700px;
  margin-inline: auto;
  text-align: left;
}

.funkciok-cta-inner {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

@media (max-width: 1024px) {
  .funkciok-grid-3 { grid-template-columns: 1fr 1fr; }
  .funkciok-text-split { grid-template-columns: 1fr; }
  .funkciok-masonry { column-count: 2; }
}

@media (max-width: 768px) {
  .funkciok-grid-3,
  .funkciok-grid-2 { grid-template-columns: 1fr; }
  .funkciok-masonry { column-count: 1; }
  .funkciok-hero-bg { height: 60vh; }
}