/*
 * Strona glowna: hero, banderola, promocja, indeks uslug, skrot galerii.
 * Laduje sie tylko tutaj.
 */

/* ================================================================ hero */

.hero {
	position: relative;
	padding-block: var(--o6) var(--o8);
	/* Bez gradientu: plan dopuszcza go wylacznie dla poswiaty UV.
	   Hero odcina sie od reszty jasniejszym papierem i linia u dolu. */
	background: var(--papier-jasny);
	border-bottom: 1px solid color-mix(in srgb, var(--zielen-rewersu) 22%, transparent);
}

.hero__wnetrze {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--o6);
	align-items: start;
}

/* Hero rozdziela sie na dwie kolumny tam, gdzie tablica kursow i okno
   slidera moga stanac obok siebie bez sciskania cyfr. */
@media (min-width: 1100px) {
	.hero__wnetrze {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
		gap: var(--o7);
	}
}

.hero__tytul { margin-bottom: var(--o4); }

.hero__tablica { margin-top: var(--o5); }
.hero__kalkulator { margin-top: var(--o5); }

/* ========================================================= tablica kursow */

.tablica {
	width: 100%;
	border-collapse: collapse;
	background: var(--papier-jasny);
	border: 1px solid color-mix(in srgb, var(--zielen-rewersu) 30%, transparent);
	border-radius: var(--rog-papier);
	/* Tablica lezy na papierze, wiec ma cien; pozostale bloki nie maja. */
	box-shadow: 0 1px 0 color-mix(in srgb, var(--tusz) 8%, transparent),
		0 12px 28px -18px color-mix(in srgb, var(--tusz) 55%, transparent);
	margin-bottom: var(--o3);
}

.tablica__nagl {
	caption-side: top;
	text-align: left;
	padding: var(--o3) var(--o4) var(--o2);
	font-weight: 800;
	font-stretch: 118%;
	letter-spacing: 0.08em;
	font-size: var(--krok-drobny);
	text-transform: none;
	color: var(--zielen-rewersu);
}

.tablica th,
.tablica td {
	padding: var(--o3) var(--o4);
	border-top: 1px solid color-mix(in srgb, var(--zielen-rewersu) 18%, transparent);
	text-align: left;
}

.tablica thead th {
	font-size: var(--krok-drobny);
	font-weight: 600;
	font-stretch: 94%;
	color: var(--zielen-rewersu);
	border-top: 0;
}

.tablica tbody th {
	display: flex;
	align-items: center;
	gap: var(--o3);
	font-weight: 700;
	font-stretch: 104%;
}

.tablica__liczba {
	text-align: right;
	font-size: clamp(1.2rem, 1rem + 0.9vw, 1.55rem);
	font-weight: 650;
	font-stretch: 92%;
}

.tablica__stopka {
	display: flex;
	flex-wrap: wrap;
	gap: var(--o3) var(--o4);
	justify-content: space-between;
	align-items: baseline;
	margin: 0;
}

.tablica__wiecej { font-weight: 600; }

/* ========================================================== zywe liczby */

/* Zmieniona cyfra przewija sie pionowo i blyska pieczecia. */
[data-kurs].zmienia-sie {
	animation: liczba-przewija 400ms var(--krzywa-panel);
	color: var(--zielen-pieczeci);
}

@keyframes liczba-przewija {
	0% { transform: translateY(-0.5em); opacity: 0; }
	55% { opacity: 1; }
	100% { transform: translateY(0); opacity: 1; }
}

/* =========================================================== kalkulator */

.kalkulator {
	border: 1px solid color-mix(in srgb, var(--zielen-rewersu) 30%, transparent);
	border-radius: var(--rog-papier);
	padding: var(--o4);
	background: var(--papier-jasny);
}

.kalkulator__pola {
	display: grid;
	/* 170 px: tyle potrzebuje najdluzsza nazwa waluty ("won poludniowokoreanski"
	   jest skracana, ale "PLN zloty polski" musi sie miescic w calosci). */
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: var(--o3);
	align-items: end;
}

.pole select { text-overflow: ellipsis; }



.kalkulator__wynik {
	display: block;
	margin-top: var(--o4);
	padding-top: var(--o4);
	border-top: 1px solid color-mix(in srgb, var(--zielen-rewersu) 24%, transparent);
}

.kalkulator__kwota {
	display: block;
	font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem);
	font-weight: 760;
	font-stretch: 112%;
	line-height: 1.1;
}

.kalkulator__kurs {
	display: block;
	font-size: var(--krok-drobny);
	color: var(--zielen-rewersu);
	margin-top: var(--o2);
}

.kalkulator__nota {
	margin: var(--o3) 0 0;
	font-size: var(--krok-drobny);
	color: var(--zielen-rewersu);
}