/* ==========================================================================
   Strona „Aplikacja" — opis, kod QR i pobranie instalatora (page-aplikacja.php)
   ========================================================================== */

.bo-appdl__grid {
	display: grid;
	gap: var(--bo-space-10);
	align-items: start;
}

@media (min-width: 900px) {
	.bo-appdl__grid { grid-template-columns: minmax(0, 1fr) 360px; gap: var(--bo-space-16); }
}

.bo-appdl__eyebrow {
	font-size: var(--bo-text-sm);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--bo-green-contrast);
	margin-bottom: var(--bo-space-2);
}

.bo-appdl__title {
	font-family: var(--bo-font-heading);
	font-size: clamp(30px, 4vw, 44px);
	font-weight: 700;
	line-height: 1.15;
	color: var(--bo-ink);
	margin-bottom: var(--bo-space-5);
}

.bo-appdl__text li + li { margin-top: var(--bo-space-2); }

/* --- karta pobierania ---------------------------------------------------- */

.bo-appdl__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--bo-space-4);
	padding: var(--bo-space-8) var(--bo-space-6);
	border: 1px solid var(--bo-border);
	border-radius: var(--bo-radius-lg);
	background: var(--bo-card);
	box-shadow: var(--bo-shadow);
	text-align: center;
}

.bo-appdl__icon { border-radius: 18px; }

.bo-appdl__card-title {
	font-family: var(--bo-font-heading);
	font-size: var(--bo-text-xl);
	font-weight: 700;
	color: var(--bo-ink);
}

.bo-appdl__qr { margin: 0; display: flex; flex-direction: column; align-items: center; gap: var(--bo-space-2); }

/*
 * Kod QR zawsze ciemny na białym, także w motywie ciemnym: odwrócone kolory
 * czyta tylko część aparatów. Biała ramka to wymagana „cicha strefa".
 */
.bo-appdl__qr-code {
	width: 200px;
	height: 200px;
	padding: 12px;
	border-radius: var(--bo-radius);
	background: #fff;
}

.bo-appdl__qr-code svg { display: block; width: 100%; height: 100%; }

.bo-appdl__qr figcaption { font-size: var(--bo-text-sm); color: var(--bo-text-soft); }

.bo-appdl__button { width: 100%; min-height: 48px; }

.bo-appdl__meta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--bo-space-2) var(--bo-space-5);
	font-size: var(--bo-text-sm);
	color: var(--bo-text-soft);
}

.bo-appdl__meta div { display: flex; gap: 6px; }
.bo-appdl__meta dt::after { content: ":"; }
.bo-appdl__meta dd { margin: 0; font-weight: 600; color: var(--bo-text); }

.bo-appdl__ios,
.bo-appdl__soon { font-size: var(--bo-text-sm); color: var(--bo-text-soft); }

.bo-appdl__soon { font-size: var(--bo-text-base); }

/* --- instrukcja ----------------------------------------------------------- */

.bo-appdl__install {
	margin-top: var(--bo-space-10);
	padding-top: var(--bo-space-10);
	border-top: 1px solid var(--bo-border);
}

.bo-appdl__install h2 {
	font-family: var(--bo-font-heading);
	font-size: 26px;
	font-weight: 700;
	color: var(--bo-ink);
	margin-bottom: var(--bo-space-4);
}

.bo-appdl__steps { padding-left: 1.4em; color: var(--bo-text); line-height: 1.6; }
/* Reset w base.css zdejmuje znaczniki z `li` — kroki mają mieć numery. */
.bo-appdl__steps li { list-style: decimal; }
.bo-appdl__steps li + li { margin-top: var(--bo-space-2); }
.bo-appdl__steps li::marker { font-weight: 700; color: var(--bo-green-contrast); }

.bo-appdl__note { margin-top: var(--bo-space-5); color: var(--bo-text-soft); }

.bo-appdl__checksum { margin-top: var(--bo-space-4); font-size: var(--bo-text-sm); color: var(--bo-text-soft); }
.bo-appdl__checksum summary { cursor: pointer; min-height: 24px; }
.bo-appdl__checksum code { display: block; margin-top: var(--bo-space-2); overflow-wrap: anywhere; font-size: 13px; }

/*
 * W telefonie kod QR nie ma kogo zeskanować — pierwsze jest pobranie.
 * Karta idzie nad opis, żeby przycisk był od razu pod kciukiem.
 */
@media (max-width: 899px) {
	.bo-appdl__card { order: -1; }
}

@media (max-width: 640px) {
	.bo-appdl__qr { display: none; }
	.bo-appdl__card { padding: var(--bo-space-6) var(--bo-space-4); }
}