/* Shared section scaffolding. */

.section {
	padding: 60px var(--gutter-mobile);
}

.section--light { background: var(--color-neutral-7); }
.section--white { background: var(--color-white); }

.section__container {
	max-width: var(--container);
	margin: 0 auto;
}

/* Eyebrow label pill — "O NÁS" etc. */

.label {
	display: inline-flex;
	align-items: center;
	gap: var(--space-4);
	height: 46px;
	padding: 13px 23px;
	border: 1px solid var(--color-neutral-4);
	border-radius: 199px;
	color: var(--color-neutral-2);
	font-size: var(--body-small-size);
	font-weight: 500;
	line-height: 1.4;
	text-transform: uppercase;
}

.label img { width: 12px; height: 14px; }

/*
 * On a dark panel the whole pill goes white -- text, border and glyph. The icon
 * is a flat SVG, so it is forced to white rather than recoloured per file.
 */
.label--on-dark {
	border-color: var(--color-neutral-7);
	color: var(--color-neutral-7);
}

.label--on-dark img { filter: brightness(0) invert(1); }

/* Section headline */

.section__title {
	margin: 0;
	color: var(--color-primary);
	font-family: var(--font-heading);
	font-size: 32px;
	font-weight: var(--h2-weight);
	line-height: var(--h2-lh);
}

.section__title--light { color: var(--color-neutral-7); }
.section__title--center { text-align: center; }

/* Small round icon button (service cards, sliders) */

.icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	flex: 0 0 38px;
	padding: 13px;
	border-radius: 19px;
	background: var(--color-neutral-7);
	transition: background-color .2s ease;
}

.icon-btn img { width: 12px; height: 12px; }

.icon-btn:hover { background: var(--color-neutral-4); }

.icon-btn--lg {
	width: 48px;
	height: 48px;
	flex-basis: 48px;
	border-radius: var(--radius-pill);
	border: 1px solid var(--color-neutral-4);
	background: transparent;
}

/* Text button — label + small arrow */

.text-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--color-primary);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: var(--btn-ls);
}

.text-btn--light { color: var(--color-neutral-7); }
.text-btn img { width: 8px; height: 10.667px; }

/* Google rating chip, reused in About / Footer */

.rating-chip {
	display: flex;
	align-items: center;
	gap: 11px;
}

.rating-chip__icon {
	display: flex;
	align-items: flex-start;
	width: 42px;
	height: 42px;
	flex: 0 0 42px;
	padding: 12px;
	border-radius: var(--radius-md);
	background: var(--color-white);
}

.rating-chip__icon img { width: 18.48px; height: 18.48px; }

.rating-chip__body {
	display: flex;
	flex-direction: column;
	gap: 3px;
	width: 130.536px;
}

.rating-chip__stars {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.rating-chip__stars img { width: 101.382px; height: 15.346px; }

.rating-chip__score {
	color: var(--color-neutral-7);
	font-size: 16px;
	line-height: 1.5;
	letter-spacing: -0.16px;
}

.rating-chip__count {
	color: var(--color-neutral-2);
	font-size: 12px;
	line-height: 1.5;
}

@media (min-width: 768px) {
	.section__title { font-size: 38px; }
}

@media (min-width: 1024px) {
	.section { padding: 100px var(--gutter); }
	.section__title { font-size: var(--h2-size); }
}

/*
 * Služby runs grey end to end. The shared partials it reuses (services, cases,
 * reviews) default to white because the homepage alternates light and white
 * bands, so the page overrides them rather than forking three templates.
 * `body` is painted too, so the header band and any seam land on grey as well.
 */
/* background-COLOR only: the shorthand would wipe the inner-page band image. */
.page-template-page-sluzby,
.page-template-page-sluzba,
.page-template-page-sluzby .section--white,
.page-template-page-sluzba .section--white {
	background-color: var(--color-neutral-7);
}