/*
 * Tablets and phones, desktop-first: style.css stays untouched,
 * every rule here lives in a max-width query so desktop (>= 1200px) is unchanged.
 */

/* --- Tablets / small laptops --- */
@media (max-width: 1199px) {
	body,
	div.container {
		width: auto;
		min-width: 0;
		padding-left: 0;
		padding-right: 0;
	}
	div.strona,
	div.top,
	div.main-box,
	div.main-box div.oferta-box,
	div.main-box div.text-box-1,
	div.main-box div.text-box-1 div.txt,
	div.main-box div.oferta-box-2,
	div.sub-menu,
	div.credits {
		width: auto;
		max-width: 100%;
		box-sizing: border-box;
	}
	div.strona {
		padding: 0 12px 30px;
	}
	div.main-box {
		padding-left: 10px;
		padding-right: 10px;
	}
	div.main-box div.text-box-1 div.txt {
		min-height: 0;
		overflow-wrap: break-word;
		word-wrap: break-word;
	}

	/* header: static logo, slogan and menu row instead of absolute positions */
	div.top {
		height: auto;
		padding: 15px 0 20px;
		text-align: center;
	}
	div.top a.logo,
	div.top a.logo:hover {
		position: static;
		margin: 0 auto;
	}
	div.top a.logo h1 {
		margin: 0;
	}
	div.top a.logo img {
		max-width: 100%;
		height: auto;
	}
	div.top div.haslo {
		position: static;
		margin: 0 auto 10px;
	}
	div.top div.menu {
		position: static;
		width: auto;
		height: auto;
	}
	div.top div.menu ul {
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
	}
	div.top div.menu ul li {
		float: none;
	}
	div.top div.menu ul li.clr {
		display: none;
	}

	/* offer tiles: wrap and center */
	div.main-box div.oferta-box {
		height: auto;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}
	div.main-box div.oferta-box a.oferta {
		float: none;
	}

	/* gallery tiles */
	div.galeria-box {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		min-height: 0;
	}
	div.galeria-box a {
		float: none;
	}
	div.galeria-box .clr,
	div.main-box div.oferta-box .clr {
		width: 100%;
	}

	/* CMS content and embeds must not overflow */
	div.main-box img,
	div.main-box iframe {
		max-width: 100%;
	}
	div.main-box div.text-box-1 div.txt img {
		height: auto;
	}
	div.main-box div.text-box-1 div.txt table {
		display: block;
		overflow-x: auto;
	}

	div.pozostala-oferta,
	div.paginacja {
		height: auto;
	}
	div.pozostala-oferta a {
		display: inline-block;
		margin-bottom: 8px;
	}
}

/* --- Tablets portrait: offer columns, contact and offer details stack --- */
@media (max-width: 979px) {
	div.main-box div.oferta-box-2 div.oferta-buttons-1,
	div.main-box div.oferta-box-2 div.lista-ofert,
	div.formularz,
	div.kontakt-dane {
		float: none;
		width: auto;
		max-width: 100%;
		padding-right: 0;
	}
	div.main-box div.oferta-box-2 div.oferta-buttons-1 {
		min-height: 0;
		margin-bottom: 20px;
	}
	div.main-box div.oferta-box-2 div.oferta-buttons-1 div.box div.kategoria {
		margin-left: auto;
		margin-right: auto;
	}
	div.formularz .input-group {
		display: flex;
	}
	div.formularz .input-group-addon {
		width: 120px;
		flex: none;
	}
	div.formularz .form-control {
		width: 100%;
		min-width: 0;
		max-width: none;
	}

	/* Bootstrap 2 prepended inputs in the contact and reservation forms */
	div.formularz form div.input-prepend,
	form.formularz div.input-prepend {
		display: flex;
		width: 100%;
	}
	div.formularz form div.input-prepend .add-on,
	form.formularz div.input-prepend .add-on {
		flex: none;
		width: 110px;
		height: auto;
		white-space: normal;
	}
	div.formularz form div.input-prepend input,
	form.formularz div.input-prepend input,
	div.formularz form div.input-prepend textarea,
	form.formularz div.input-prepend textarea {
		flex: 1;
		width: auto;
		min-width: 0;
		max-width: none;
		height: auto;
	}
	div.formularz form .controls,
	form.formularz .controls {
		margin-left: 0;
	}

	div.sub-menu div.lewa,
	div.sub-menu div.prawa {
		float: none;
		width: auto;
		text-align: center;
	}
	div.sub-menu div.prawa a {
		display: inline-block;
		margin-bottom: 8px;
	}
}

/* --- Phones --- */
@media (max-width: 767px) {
	/* smaller photo so the solid green background starts sooner on short pages */
	body {
		background-size: 1000px auto;
	}
	div.strona {
		padding: 0 8px 20px;
	}
	div.main-box {
		padding-left: 6px;
		padding-right: 6px;
	}
	div.top {
		padding: 16px 0 12px;
	}
	div.top a.logo,
	div.top a.logo:hover {
		width: 140px;
		height: auto;
	}
	div.top a.logo img {
		width: 100%;
	}
	div.top div.haslo {
		display: none;
	}

	/* logo already links home, so "Start" goes away to give the others room */
	div.top div.menu {
		margin-top: 14px;
	}
	div.top div.menu ul {
		flex-wrap: nowrap;
		gap: 6px;
	}
	div.top div.menu ul li {
		flex: 1;
		margin: 0;
	}
	div.top div.menu ul li:first-child {
		display: none;
	}
	div.top div.menu ul li a,
	div.top div.menu ul li:nth-last-child(2) a,
	div.top div.menu ul li:nth-last-child(2) a:hover,
	div.top div.menu ul li:nth-last-child(2) a.active {
		width: auto;
		height: 44px;
		padding: 0 10px;
		line-height: 44px;
		font-size: 14px;
		white-space: nowrap;
		border-radius: 22px;
		background-image: none;
	}
	/* blue glass pill: readable over the busy photo */
	div.top div.menu ul li a,
	div.top div.menu ul li:nth-last-child(2) a {
		background-color: rgba(100, 174, 238, 0.8);
		-webkit-backdrop-filter: blur(6px);
		backdrop-filter: blur(6px);
		box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
		text-shadow: 0 1px 2px rgba(2, 46, 68, 0.7), 0 0 6px rgba(2, 46, 68, 0.35);
		transition: none;
	}
	div.top div.menu ul li a:hover,
	div.top div.menu ul li a.active,
	div.top div.menu ul li:nth-last-child(2) a:hover,
	div.top div.menu ul li:nth-last-child(2) a.active {
		background-color: rgba(255, 255, 255, 0.95);
		text-shadow: none;
	}

	div.main-box div.text-box-1 h1 {
		font-size: 26px;
		line-height: 32px;
	}
	div.main-box div.text-box-1 div.txt {
		font-size: 15px;
		text-align: left;
	}
	/* justified text leaves big gaps on narrow screens; CMS sets it inline */
	div.main-box div.text-box-1 div.txt [style*="justify"] {
		text-align: left !important;
	}
}

@media (max-width: 359px) {
	div.top div.menu ul li a,
	div.top div.menu ul li:nth-last-child(2) a {
		font-size: 12px;
		padding: 0 6px;
	}
}