/*
 * MJ Stay: tip na ubytování v článku.
 *
 * Jedna karta přes celou šířku obsahu, prefix .mj-stay-pick. Kandidáti nad
 * rámec zobrazených jsou v HTML skrytí třídou .mj-stay-pick--extra, viditelnou
 * variantu vybere assets/mj-stay-pick.js. Skrývá je stylopis, ne skript, takže
 * stránka po načtení nepodskočí.
 *
 * Obě kategorie mají stejnou stavbu, liší se jen akcentem: luxury tmavý
 * a zlatavý, budget zelený.
 */

.mj-stay-picks {
	margin: 30px 0;
	width: 100%;
}

.mj-stay-pick {
	font-family: "Open Sans", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
	color: #161616;
	background: #fff;
	border: 1px solid #e8e4dd;
	border-left: 5px solid #617753;
	border-radius: 12px;
	padding: 18px 22px 20px;
	text-align: left;
	overflow: hidden;
}
.mj-stay-pick + .mj-stay-pick { margin-top: 16px; }
.mj-stay-pick *,
.mj-stay-pick *::before,
.mj-stay-pick *::after { box-sizing: border-box; }

/* Skrytí kandidáti. Viditelnou kartu vybere skript odebráním téhle třídy. */
.mj-stay-pick--extra { display: none; }

/* Štítek kategorie */
.mj-stay-pick__label {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	line-height: 1.5;
	padding: 4px 12px;
	border-radius: 20px;
	background: #617753;
	color: #fff;
	margin-bottom: 12px;
}

/* Dvě kolony: text vlevo, cena s tlačítkem vpravo. */
.mj-stay-pick__row {
	display: flex;
	align-items: flex-start;
	gap: 26px;
}
.mj-stay-pick__main { flex: 1 1 auto; min-width: 0; }
.mj-stay-pick__aside {
	flex: 0 0 230px;
	max-width: 230px;
	border-left: 1px solid #efece7;
	padding-left: 22px;
}

.mj-stay-pick__name {
	font-family: "Crimson Pro", Georgia, serif;
	font-size: 28px;
	font-weight: 700;
	line-height: 1.15;
	color: #161616;
	margin: 0 0 4px;
}
.mj-stay-pick__city {
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #8c6664;
	line-height: 1.4;
	margin-bottom: 9px;
}
.mj-stay-pick__desc {
	font-size: 15.5px;
	line-height: 1.55;
	color: #3c3c3c;
	margin: 0;
}

.mj-stay-pick__price {
	font-family: "Crimson Pro", Georgia, serif;
	font-size: 27px;
	font-weight: 700;
	line-height: 1.15;
	color: #4d5f42;
	margin-bottom: 5px;
}
.mj-stay-pick__note {
	font-size: 11.5px;
	line-height: 1.45;
	color: #8f8b85;
	margin: 0 0 12px;
}

.mj-stay-pick__btn {
	display: block;
	width: 100%;
	background: #617753;
	color: #fff !important;
	text-decoration: none !important;
	font-size: 14.5px;
	font-weight: 600;
	padding: 11px 14px;
	border-radius: 6px;
	text-align: center;
	line-height: 1.3;
	transition: background .15s;
}
.mj-stay-pick__btn:hover,
.mj-stay-pick__btn:focus { background: #4d5f42; color: #fff !important; }

/* Luxusní varianta: krémový podklad a zlatavý akcent. */
.mj-stay-pick--luxury {
	background: #faf7f2;
	border-color: #e6dcc8;
	border-left-color: #9c7c3c;
}
.mj-stay-pick--luxury .mj-stay-pick__label { background: #2f2b25; color: #e3c583; }
.mj-stay-pick--luxury .mj-stay-pick__city { color: #8c6664; }
.mj-stay-pick--luxury .mj-stay-pick__aside { border-left-color: #e6dcc8; }
.mj-stay-pick--luxury .mj-stay-pick__price { color: #7a5f27; }
.mj-stay-pick--luxury .mj-stay-pick__btn { background: #2f2b25; }
.mj-stay-pick--luxury .mj-stay-pick__btn:hover,
.mj-stay-pick--luxury .mj-stay-pick__btn:focus { background: #46402f; }

/* Levná varianta: světlý podklad a zelený akcent. */
.mj-stay-pick--budget {
	background: #f7f8f5;
	border-color: #e2e6dc;
	border-left-color: #617753;
}
.mj-stay-pick--budget .mj-stay-pick__aside { border-left-color: #e2e6dc; }

@media (max-width: 580px) {
	.mj-stay-pick { padding: 16px 16px 18px; }
	.mj-stay-pick__row { flex-direction: column; gap: 14px; }
	.mj-stay-pick__name { font-size: 24px; }
	.mj-stay-pick__desc { font-size: 15px; }
	.mj-stay-pick__aside {
		flex: 1 1 auto;
		max-width: none;
		width: 100%;
		border-left: none;
		border-top: 1px solid #efece7;
		padding-left: 0;
		padding-top: 14px;
	}
	.mj-stay-pick--luxury .mj-stay-pick__aside { border-top-color: #e6dcc8; }
	.mj-stay-pick--budget .mj-stay-pick__aside { border-top-color: #e2e6dc; }
	/* Cena zůstává hlavní prvek, na úzké obrazovce se nesmí zdrobnit. */
	.mj-stay-pick__price { font-size: 26px; }
}