@charset "UTF-8";

/* ============================================================
   Blok: MT Baner — mt/hero
   ============================================================ */

.mt-hero {
	position: relative;
	background-image: var(--mt-hero-image, none);
	background-position: center center;
	background-size: cover;
	background-color: var(--mt-green-pale, #dcece4);
}

.mt-hero__inner {
	position: relative;
	padding-block: 3rem;
}

/* Trzy wysokości = trzy odstępy. Na wąskim ekranie i tak wszystkie schodzą
   do rozsądnego minimum — baner ma być tłem dla tekstu, nie ekranem powitalnym
   do przewijania. */
.mt-hero--small .mt-hero__inner  { padding-block: 2rem; }
.mt-hero--medium .mt-hero__inner { padding-block: 3rem; }
.mt-hero--large .mt-hero__inner  { padding-block: 4rem; }

.mt-hero__title {
	margin: 0 0 .3em;
	/* 1.9 rem na telefonie, 3.6 rem na dużym ekranie — bez skoków między
	   punktami przełamania. Górna granica jest dobrana tak, żeby nagłówek
	   mieścił się w lewej połowie banera: prawą zajmuje grafika z tablicami
	   i tekst nie ma na nią wchodzić. */
	font-size: clamp(1.9rem, 4.2vw, 3.6rem);
	font-weight: 600;
	line-height: 1.05;
	color: var(--mt-green, #14945c);
	/* Nagłówek leży na zdjęciu. Delikatny cień to nie ozdoba — bez niego
	   zieleń wtapia się w rozmyte niebo i tekst przestaje być czytelny. */
	text-shadow: 0 1px 2px rgba(255, 255, 255, .55);
}

.mt-hero__sub {
	margin: 0;
	max-width: 30ch;
	font-size: clamp(1.05rem, 2.4vw, 2.2rem);
	font-weight: 600;
	line-height: 1.25;
	color: #fff;
	text-shadow: 0 1px 3px rgba(0, 0, 0, .45);
}

@media (min-width: 1024px) {
	.mt-hero--small .mt-hero__inner  { padding-block: 5rem; }
	.mt-hero--medium .mt-hero__inner { padding-block: 9rem; }
	.mt-hero--large .mt-hero__inner  { padding-block: 14rem; }

	/* Tekst zostaje w lewej części kadru. Na wąskim ekranie tego nie robimy:
	   tam obraz i tak jest przycięty i miejsca jest tyle, ile jest. */
	.mt-hero__title,
	.mt-hero__sub { max-width: 58%; }
}