/* ==========================================================================
   Blok 3 · Kde stavíme — maket 95:618 (1440 × 988)
   Hlavička 60/110, řada 60/251 (1320 × 627), seznam 850, mezera 50,
   panel 420. Položka 850 × 108, šipka 52 × 52.
   ========================================================================== */

.bx-areas { background: var(--bx-cream); }

.bx-areas__inner {
	max-width: var(--bx-page);
	margin-inline: auto;
	padding: 110px var(--bx-gutter);
	display: flex;
	flex-direction: column;
	gap: 46px;
	align-items: flex-start;
}

@media (min-width: 901px) {
	.bx-areas .bx-sechead__lead { width: 320px; }
}
.bx-areas .bx-sechead { gap: 40px; }

.bx-areas__row {
	display: flex;
	align-items: flex-start;
	gap: 50px;
	width: 100%;
}

/* --- Seznam oblastí -------------------------------------------------------- */
.bx-areas__list {
	flex: 1 0 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.bx-area {
	display: flex;
	align-items: center;
	gap: 20px;
	width: 100%;
	height: 108px;
	padding: 0 24px;
	border: 0;
	border-top: 1px solid var(--bx-border);
	background: transparent;
	color: var(--bx-ink);
	text-align: left;
	cursor: pointer;
	transition: background-color .18s ease, padding .18s ease;
}

.bx-area:first-child { border-top: 0; }
.bx-area:last-child { border-bottom: 1px solid var(--bx-border); }

/* Nevybrané položky nemají vnitřní odsazení — text lícuje s okrajem. */
.bx-area:not(.is-active) { padding-inline: 0; }

.bx-area.is-active {
	background: var(--bx-yellow);
	border-color: transparent;
}
.bx-area.is-active + .bx-area { border-top-color: transparent; }

.bx-area__name { flex: 1 0 0; min-width: 0; }

.bx-area__arrow {
	width: 52px; height: 52px;
	flex: 0 0 52px;
	align-items: center;
	justify-content: center;
	background: var(--bx-cream-2);
	color: var(--bx-ink);
	transition: background-color .18s ease, color .18s ease;
}
.bx-area__arrow svg { width: 20px; height: 20px; }

.bx-area.is-active .bx-area__arrow {
	background: var(--bx-ink);
	color: var(--bx-yellow);
}

/* --- Panel s fotkou -------------------------------------------------------- */
.bx-areas__panel {
	flex: 0 0 420px;
	width: 420px;
}

.bx-areapanel { background: var(--bx-ink); }

.bx-areapanel__photo {
	height: 300px;
	overflow: hidden;
}
.bx-areapanel__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bx-areapanel__body {
	padding: 28px;
	display: flex;
	flex-direction: column;
	gap: 18px;
	align-items: flex-start;
}

.bx-areapanel__title { color: var(--bx-cream); text-transform: uppercase; }

.bx-areapanel__btn { width: 100%; padding: 16px 20px; }

/* --- Odrážky s kosočtvercem ------------------------------------------------ */
.bx-bullets {
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: 100%;
}

.bx-bullets__item {
	position: relative;
	padding-left: 22px;
	color: var(--bx-line);
}

.bx-bullets__item::before {
	content: '';
	position: absolute;
	left: 3px;
	top: 8px;
	width: 6px;
	height: 6px;
	background: var(--bx-yellow);
	transform: rotate(-45deg);
}

/* --- Adaptiv --------------------------------------------------------------- */
@media (max-width: 1200px) {
	.bx-areas__row { gap: 32px; }
	.bx-areas__panel { flex-basis: 380px; width: 380px; }
	.bx-area { height: 92px; }
}

@media (max-width: 900px) {
	.bx-areas__inner { padding-block: var(--bx-section-y); gap: 32px; }
	.bx-areas__row { flex-direction: column; gap: 28px; }
	.bx-areas__panel { flex: 1 1 auto; width: 100%; }
	.bx-area { height: 76px; padding-inline: 16px; }
	.bx-area:not(.is-active) { padding-inline: 0; }
	.bx-area__arrow { width: 44px; height: 44px; flex-basis: 44px; }
	.bx-areapanel__photo { height: 220px; }
}