/* ==========================================================================
   Media panel — brand graphic that replaces a missing photograph
   Used by the homepage hero, O nás intro, and the centrum hero / služby aside.
   ========================================================================== */

.media-panel {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	width: 100%;
	padding: 2rem;
	border-radius: var(--radius-lg);
	background: var(--primary-soft);
}


.media-panel__mark {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: clamp(6rem, 12vw, 8.5rem);
	height: clamp(6rem, 12vw, 8.5rem);
	border-radius: 50%;
	background: #fff;
	color: var(--primary);
}

.media-panel__mark svg {
	width: 46%;
	height: 46%;
	stroke-width: 1.5;
}

.media-panel__label {
	position: relative;
	z-index: 1;
	font-weight: 700;
	font-size: 0.95rem;
	letter-spacing: 0.02em;
	color: var(--heading);
	text-align: center;
}

/* --- Host-section sizing ------------------------------------------------- */

/* Homepage hero — matches the aspect ratio the photo used to hold. */
.hero__panel { aspect-ratio: 4 / 3.4; }

/* Centrum hero — fills the height of the text column. */
.hero--centrum .hero__panel {
	height: 100%;
	min-height: 440px;
	aspect-ratio: auto;
}

/* O nás intro. */
.o-nas-page__panel {
	height: 100%;
	min-height: 380px;
	max-height: 520px;
}

/* Centrum "Nabízené služby" aside — sits inside the white framed card. */
.centrum-sluzby__panel {
	aspect-ratio: 1 / 1;
	min-height: 340px;
	border-radius: var(--radius);
	box-shadow: none;
}

@media (max-width: 900px) {
	.hero__panel { aspect-ratio: 16 / 10; }
	.hero--centrum .hero__panel { min-height: 300px; }
	.o-nas-page__panel { min-height: 260px; }
	.centrum-sluzby__panel { min-height: 260px; }
}