/* ==========================================================================
   Generic card (hairline border, white surface)
   ========================================================================== */

.card {
	background: #fff;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: clamp(1.5rem, 2.5vw, 2rem);
}

a.card--hover:hover,
button.card--hover:hover {
	border-color: var(--primary);
}

/* Small icon disc used across cards (round 7: circles, not rounded squares) */
.icon-tile {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	background: var(--primary-soft);
	color: var(--primary);
}
.icon-tile svg { width: 1.35rem; height: 1.35rem; }

/* Pill / tag */
.tag {
	display: inline-flex;
	align-items: center;
	padding: 0.4rem 0.85rem;
	border-radius: var(--radius-pill);
	background: var(--primary-soft);
	color: var(--primary-dark);
	font-size: 0.85rem;
	font-weight: 600;
}

.tag--muted {
	background: var(--bg-alt);
	color: var(--body);
	border: 1px solid var(--border);
}

/* Small uppercase location/kicker label */
.kicker {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--muted);
}

/* Responsive grids */
.grid { display: grid; gap: 1.5rem; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 900px) {
	.grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
	.grid--2,
	.grid--3 { grid-template-columns: 1fr; }
}

/* --- Brand icons in round tiles (round 7) ---------------------------------
   The client's icons (poda_tile_icon) bring their own circle, so the tile
   loses its fill and the icon takes the whole tile. They are hairline at
   small sizes: a thin stroke on the filled outlines gives them weight. */
:is(.icon-tile, .site-footer__ico, .doc-card__ico, .step-card__icon, .pozice-why__ico,
	.pozice-card__icon, .kariera__pos-icon, .centrum-sluzby__promise-ico,
	.cta-band__phone-ico, .cenik__download-ico):has(> svg[data-brand]) {
	background: none;
	color: var(--primary);
	width: 3rem;
	height: 3rem;
}
:is(.icon-tile, .site-footer__ico, .doc-card__ico, .step-card__icon, .pozice-why__ico,
	.pozice-card__icon, .kariera__pos-icon, .centrum-sluzby__promise-ico,
	.cta-band__phone-ico, .cenik__download-ico, .media-panel__mark) > svg[data-brand] {
	width: 100%;
	height: 100%;
}
svg[data-brand] path { stroke: currentColor; stroke-width: 1.5; }

/* Larger feature tiles. */
.step-card__icon:has(> svg[data-brand]),
.o-nas-value__ico:has(> svg[data-brand]),
.pozice-card__icon:has(> svg[data-brand]),
.cenik__download-ico:has(> svg[data-brand]) { width: 3.5rem; height: 3.5rem; }
.centrum-hero__top .icon-tile:has(> svg[data-brand]) { width: 3.5rem; height: 3.5rem; }

/* On dark / blue grounds the line icon turns white. */
.cta-band__phone-ico:has(> svg[data-brand]) { color: #fff; }
.pozice-card:hover .pozice-card__icon:has(> svg[data-brand]) { background: none; color: var(--primary-dark); }

/* Graphic panel: the white disc stays, the brand icon sits inside it. */
.media-panel__mark > svg[data-brand] { width: 72%; height: 72%; stroke-width: 0; }
.site-footer__ico:has(> svg[data-brand]) { width: 2.6rem; height: 2.6rem; }