/* ==========================================================================
   Blok 4 · Naše práce — maket 138:748 (1440 × 1430)
   Hlavička 60/110, hlavní realizace 60/212 (1320 × 508, fotka 660),
   tři karty 60/770 (426,67 × 443, mezera 20), tlačítko dole.
   ========================================================================== */

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

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

@media (min-width: 901px) {
	.bx-works .bx-sechead__lead { width: 340px; }
}
/* Hlavička těchto bloků má v maketu 52 px: štítek 19 + mezera 8 + podnadpis 25. */
.bx-sechead__title--big {
	font-family: var(--bx-font-head);
	font-weight: 500;
	font-size: 15px;
	line-height: 25px;
	letter-spacing: 1.2px;
	text-transform: uppercase;
}
.bx-works .bx-sechead__text,
.bx-reviews .bx-sechead__text { gap: 8px; }
.bx-works .bx-sechead__label,
.bx-reviews .bx-sechead__label { line-height: 19px; }

/* --- Hlavní realizace ------------------------------------------------------ */
.bx-workmain {
	display: flex;
	align-items: stretch;
	min-height: 508px;
	background: var(--bx-white);
}

.bx-workmain__photo {
	position: relative;
	flex: 0 0 660px;
	width: 660px;
	/* Výška z maketu — fotka se do rámu ořízne, ať je na výšku nebo na šířku. */
	height: 508px;
	overflow: hidden;
}

.bx-workmain__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bx-workmain__year {
	position: absolute;
	left: 0;
	top: 0;
	background: var(--bx-yellow);
	color: var(--bx-ink);
	padding: 7px 14px;
}

.bx-workmain__body {
	flex: 1 0 0;
	min-width: 0;
	padding: 44px 48px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.bx-workmain__tags { display: flex; flex-wrap: wrap; gap: 8px; }

.bx-tag {
	background: var(--bx-ink);
	color: var(--bx-cream);
	padding: 7px 12px;
}

.bx-workmain__title { margin-top: 22px; }
.bx-workmain__text { margin-top: 16px; color: var(--bx-text-2); max-width: 564px; }

.bx-workmain__line {
	display: block;
	width: 100%;
	max-width: 564px;
	height: 1px;
	margin-top: 30px;
	background: var(--bx-border);
}

.bx-workmain__btn { margin-top: 30px; padding: 19px 30px; }

/* --- Parametry ------------------------------------------------------------- */
.bx-params {
	display: flex;
	gap: 170px;
	margin-top: 22px;
}

.bx-params--split { gap: 0; justify-content: space-between; width: 100%; }

/* Rám „Parametr“ v maketu: popis 16 + mezera 5 + hodnota 22 = 43. */
.bx-params__item { display: flex; flex-direction: column; gap: 5px; }
.bx-params__label { color: var(--bx-text-3); line-height: 16px; }
.bx-params__value { color: var(--bx-ink); margin: 0; line-height: 22px; }

/* --- Karty ----------------------------------------------------------------- */
.bx-works__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.bx-workcard {
	background: var(--bx-white);
	display: flex;
	flex-direction: column;
}

.bx-workcard__photo {
	position: relative;
	display: block;
	height: 250px;
	overflow: hidden;
}

.bx-workcard__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s ease;
}
.bx-workcard:hover .bx-workcard__photo img { transform: scale(1.04); }

.bx-workcard__kind {
	position: absolute;
	left: 0; top: 0;
	background: var(--bx-yellow);
	color: var(--bx-ink);
	padding: 6px 12px;
}

.bx-workcard__year {
	position: absolute;
	right: 0; top: 0;
	background: var(--bx-ink);
	color: var(--bx-cream);
	padding: 6px 12px;
}

.bx-workcard__body {
	padding: 28px;
	display: flex;
	flex-direction: column;
	flex: 1 0 auto;
}

.bx-workcard__head { display: flex; align-items: flex-start; gap: 16px; }
.bx-workcard__titles { flex: 1 0 0; min-width: 0; }
/* Rám „Nadpis“ karty: název 27 + mezera 6 + místo 22 = 55. */
.bx-workcard__title { text-transform: uppercase; line-height: 27px; }

.bx-workcard__place {
	display: flex;
	align-items: center;
	gap: 7px;
	margin-top: 6px;
	color: var(--bx-text-2);
}
.bx-workcard__place .bx-icon { width: 14px; height: 14px; color: var(--bx-yellow-dark); }

.bx-workcard__arrow {
	width: 44px; height: 44px;
	flex: 0 0 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--bx-yellow);
	color: var(--bx-ink);
	transition: background-color .18s ease;
}
.bx-workcard__arrow svg { width: 18px; height: 18px; }
.bx-workcard__arrow:hover { background: var(--bx-ink); color: var(--bx-yellow); }

.bx-workcard__line {
	display: block;
	height: 1px;
	background: var(--bx-border);
	margin-top: 20px;
}

.bx-workcard .bx-params { margin-top: 18px; }

/* --- Tlačítko dole ---------------------------------------------------------- */
.bx-works__more { display: flex; justify-content: center; }
.bx-works__more .bx-btn { padding: 20px 34px; }

/* --- Adaptiv --------------------------------------------------------------- */
@media (max-width: 1200px) {
	.bx-workmain__photo { flex-basis: 50%; width: 50%; height: 508px; }
	.bx-workmain__body { padding: 32px; }
	.bx-params { gap: 40px; flex-wrap: wrap; }
}

@media (max-width: 980px) {
	.bx-works__inner { padding-block: var(--bx-section-y); gap: 34px; }
	.bx-workmain { flex-direction: column; min-height: 0; }
	.bx-workmain__photo { flex: 1 1 auto; width: 100%; height: 320px; }
	.bx-works__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 680px) {
	.bx-works__grid { grid-template-columns: 1fr; }
	.bx-workmain__photo { height: 240px; }
	.bx-workmain__body { padding: 24px 20px; }
	.bx-workcard__body { padding: 20px; }
}

/* --- Pruh „Před a po“ ------------------------------------------------------
   Doplněk mimo maket (přání klienta). Drží se stejné mřížky jako karty:
   tři sloupce s mezerou 20 px, žlutý čtvereček u nadpisu jako u štítků sekcí. */
.bx-ba { display: flex; flex-direction: column; gap: 24px; }

.bx-ba__title {
	display: flex;
	align-items: center;
	gap: 9px;
	color: var(--bx-yellow-dark);
}
.bx-ba__title--marker::before {
	content: '';
	width: 9px; height: 9px;
	flex: 0 0 9px;
	background: var(--bx-yellow);
}

.bx-ba__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.bx-ba__pair { margin: 0; background: var(--bx-white); }

.bx-ba__shots {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2px;
}

.bx-ba__shot { position: relative; height: 200px; overflow: hidden; }
.bx-ba__shot img { width: 100%; height: 100%; object-fit: cover; display: block; }

.bx-ba__badge {
	position: absolute;
	left: 10px;
	top: 10px;
	padding: 5px 10px;
	background: var(--bx-ink);
	color: var(--bx-white);
	font-size: 11px;
	letter-spacing: 1.2px;
}
.bx-ba__shot:last-child .bx-ba__badge {
	background: var(--bx-yellow);
	color: var(--bx-ink);
}

.bx-ba__caption { padding: 16px 20px 18px; color: var(--bx-text-2); }
.bx-ba__caption a { color: var(--bx-ink); text-decoration: none; }
.bx-ba__caption a:hover { color: var(--bx-yellow-dark); }

@media (max-width: 980px) {
	.bx-ba__grid { grid-template-columns: repeat(2, 1fr); }
	.bx-ba__shot { height: 170px; }
}

@media (max-width: 680px) {
	.bx-ba__grid { grid-template-columns: 1fr; }
	.bx-ba__shot { height: 150px; }
}