/*
 * ABP - poprawki responsywne (telefon, tablet, wąski desktop).
 * Klasy abp-img-* i abp-grid-* nadaje abp-responsive.js na podstawie realnej szerokości elementu.
 */

/* ---------- 1. Miniatury wpisów: bez przycinania grafik z napisami ---------- */

/* Duże kafelki (zdjęcie nad tytułem): 16:9 jak same grafiki, zamiast pionowego kadru. */
.td-image-container.abp-img-l .td-image-wrap {
	padding-bottom: 56.25% !important;
	height: auto !important;
}

/* Małe miniatury obok tekstu: proporcja 3:2; w szerokich listach nie mniejsze niż ~96 px. */
.td-image-container.abp-img-s .td-image-wrap {
	padding-bottom: 66% !important;
	height: auto !important;
}
.td-image-container.abp-img-grow {
	min-width: 96px;
}

/* Zdjęcie główne artykułu (tło): cała grafika 16:9, wyśrodkowana, zamiast wycinka z lewej strony. */
.tdb_single_bg_featured_image .tdb-featured-image-bg {
	background-position: center center !important;
}
@media (max-width: 1018px) {
	.tdb_single_bg_featured_image .tdb-featured-image-bg {
		width: 100% !important;
		height: 0 !important;
		min-height: 0 !important;
		padding-bottom: 56.25% !important;
	}
}

/* Data publikacji w artykule nie ściska się do wąskiej kolumny. */
.tdb_single_date {
	white-space: nowrap;
	max-width: 100%;
}

/* ---------- 2. Siatki wpisów dopasowane do szerokości bloku ---------- */

/* Wąski blok (telefon, boczna kolumna): jedna kolumna. */
.abp-grid-s .td_block_inner > .td_module_wrap,
.abp-grid-s .tdb-block-inner > .td_module_wrap {
	width: 100% !important;
	float: none !important;
}
/* Średni blok: najwyżej 2 kolumny zamiast 3-4 ściśniętych. */
.abp-grid-m .td_block_inner,
.abp-grid-l3 .td_block_inner,
.abp-grid-m .tdb-block-inner,
.abp-grid-l3 .tdb-block-inner {
	display: flex !important;
	flex-wrap: wrap;
}
.abp-grid-m .td_block_inner > .td_module_wrap,
.abp-grid-m .tdb-block-inner > .td_module_wrap {
	width: 50% !important;
	float: none !important;
}
/* Szeroki blok z pojedynczymi kafelkami (np. boczna lista rozciągnięta na tablecie): 3 kolumny. */
.abp-grid-l3 .td_block_inner > .td_module_wrap,
.abp-grid-l3 .tdb-block-inner > .td_module_wrap {
	width: 33.333% !important;
	float: none !important;
}

/* Pionowe zdjęcia w blokach obrazkowych nie zajmują całego ekranu, gdy kolumny są pod sobą. */
@media (max-width: 1018px) {
	.tdc-content-wrap .tdm_block_inline_image_simplified img,
	.tdc-content-wrap .tdm_block_inline_image img {
		max-height: 520px;
		width: 100%;
		object-fit: cover;
	}
}

/* ---------- 3. Tablet: kolumny treści jedna pod drugą ---------- */

@media (min-width: 768px) and (max-width: 1018px) {
	.tdc-content-wrap .td-pb-row,
	.tdc-content-wrap .vc_row_inner,
	.td-footer-template-wrap .td-pb-row {
		flex-wrap: wrap !important;
	}
	.td-footer-template-wrap .td-pb-row > .vc_column {
		width: 100% !important;
		flex: 0 0 100% !important;
	}
	.tdc-content-wrap .td-pb-row > .vc_column,
	.tdc-content-wrap .vc_row_inner > .vc_column_inner {
		width: 100% !important;
		flex: 0 0 100% !important;
		float: none !important;
	}
}

/* Pionowa niebieska linia między kolumnami nie ma sensu, gdy kolumny są pod sobą. */
@media (max-width: 1018px) {
	.tdc-content-wrap .vc_column.tdc-column {
		border-left-width: 0 !important;
		border-right-width: 0 !important;
	}
}

/* ---------- 4. Tabele w treści: przewijanie w bok zamiast ucinania ---------- */

@media (max-width: 767px) {
	.tdc-content-wrap table,
	.td-post-content table,
	.tdb_single_content table {
		display: block;
		max-width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	/* tabela na stronie noclegów: zawijanie zamiast wymuszonych 650 px */
	.transport-table-wrapper .transport-table {
		display: table;
		min-width: 0 !important;
		font-size: 14px;
	}
	.transport-table th,
	.transport-table td {
		padding: 8px !important;
	}
}

/* Tytuł zwykłych stron (np. „Wiadomości”) był prawie czarny na czarnym tle. */
.td-page-header h1.entry-title,
.td-page-header h1.entry-title span {
	color: #f4f7fb;
}

/* ---------- 5. Nagłówki sekcji: oddech między blokami ---------- */

@media (max-width: 1018px) {
	.wpb_wrapper > .td_block_wrap + .tdm_block_column_title {
		margin-top: 32px !important;
	}
	.tdc-content-wrap .vc_column + .vc_column .wpb_wrapper > .tdm_block_column_title:first-child {
		margin-top: 24px !important;
	}
}

/* ---------- 6. Czat (Better Messages) i captcha na wąskich ekranach ---------- */

.cf-turnstile.abp-zoom-1 { zoom: 0.82; }
.cf-turnstile.abp-zoom-2 { zoom: 0.7; }
.bm-login-form .abp-bm-register,
.bm-login-form .abp-bm-register span {
	color: #cfd6e0 !important;
	display: inline;
}
.bm-login-form .abp-bm-register {
	display: block;
}
.bm-login-form {
	margin-left: auto;
	margin-right: auto;
}
@media (max-width: 480px) {
	.bm-login-form {
		padding-left: 14px !important;
		padding-right: 14px !important;
	}
	.bm-login-form input.input {
		width: 100%;
		box-sizing: border-box;
	}
}

/* ---------- 7. Blok „Obserwuj” (Instagram): zdjęcie profilowe nie zgniata się w pasek ---------- */

.td-instagram-profile-image,
.td-instagram-profile-image-elem {
	flex: 0 0 auto;
	min-width: 48px;
	min-height: 48px;
}

/* ---------- 8. Długie adresy i linki nie rozpychają kolumn ---------- */

.tdc-content-wrap .wpb_text_column,
.td-post-content {
	overflow-wrap: break-word;
}

/* ---------- 10. Stopka ---------- */

/* „Współpraca: wyślij nam wiadomość” i „Pamiątki z Bergamo” to linki - wyglądają jak przyciski, nie jak puste nagłówki. */
.td-footer-template-wrap .tdm-title a[href^="mailto:"],
.td-footer-template-wrap .tdm-title a[href*="maptoria"] {
	display: inline-block;
	padding: 9px 16px;
	border: 1px solid #dd9933;
	border-radius: 8px;
	font-size: 15px;
	line-height: 1.3;
	color: #dd9933 !important;
	-webkit-text-fill-color: #dd9933;
	background: transparent;
	transition: background-color 0.2s, color 0.2s;
}
.td-footer-template-wrap .tdm-title a[href^="mailto:"]:hover,
.td-footer-template-wrap .tdm-title a[href*="maptoria"]:hover {
	background: #dd9933;
	color: #000 !important;
	-webkit-text-fill-color: #000;
}
.td-footer-template-wrap .tdm-title a[href^="mailto:"]::after,
.td-footer-template-wrap .tdm-title a[href*="maptoria"]::after {
	content: " \2192";
}

/* Linia „Wsparcie techniczne…” nie klei się do praw autorskich. */
.td-footer-template-wrap .tdm_block_inline_text .tdm-descr {
	line-height: 1.9;
}

/* Nagłówki kolumn stopki: jeden rozmiar (motyw dawał 32 px na wąskim desktopie i 22 px na szerokim). */
@media (max-width: 1140px) {
	.td-footer-template-wrap .tdm-title.tdm-title-xxsm {
		font-size: 22px !important;
		line-height: 1.25 !important;
	}
}
/* Ikony społecznościowe w stopce widoczne także na telefonie. */
@media (max-width: 767px) {
	.td-footer-template-wrap .tdm_block_socials {
		display: block !important;
		text-align: center;
		margin-bottom: 12px;
	}
}

/* ---------- 11. Pusty pas między treścią a stopką ---------- */

.td-main-content-wrap .tdc-row:last-child > .vc_row {
	padding-bottom: 24px !important;
}
.td-main-content-wrap .tdc-row:last-child .wpb_wrapper > .td_block_wrap:last-child {
	margin-bottom: 0 !important;
}
/* Wiersz z paskiem „Na topie” na górze stopki: bez zbędnych odstępów. */
.td-footer-template-wrap .vc_row:has(.td_block_trending_now) {
	padding-top: 24px !important;
	padding-bottom: 0 !important;
}
.td-footer-template-wrap .vc_row:has(.td_block_trending_now) > .vc_column {
	margin-top: 0 !important;
}
.td-footer-template-wrap .td_block_trending_now {
	margin-bottom: 8px !important;
}

/* ---------- 12. Baner czatu dla gości ---------- */

.abp-chat-cta {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	padding: 22px;
	margin: 8px 0 24px;
	border: 1px solid rgba(120, 160, 210, 0.28);
	border-radius: 16px;
	background: radial-gradient(circle at top left, rgba(13, 143, 242, 0.20), transparent 45%), linear-gradient(135deg, #10243a 0%, #080d16 75%);
	color: #f4f7fb;
	box-sizing: border-box;
}
.abp-chat-cta__icon {
	flex: 0 0 52px;
	height: 52px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #0d8ff2;
	background: rgba(13, 143, 242, 0.14);
}
.abp-chat-cta__kicker {
	display: block;
	margin-bottom: 4px;
	color: #0d8ff2;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}
.abp-chat-cta .abp-chat-cta__title {
	margin: 0 0 6px;
	color: #f4f7fb;
	font-size: 20px;
	line-height: 1.25;
}
.abp-chat-cta__text {
	margin: 0 0 14px !important;
	color: #a9b2bf;
	font-size: 14px;
	line-height: 1.5;
}
.abp-chat-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.abp-chat-cta .abp-chat-cta__btn {
	display: inline-block;
	padding: 10px 18px;
	border-radius: 10px;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none !important;
	transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.abp-chat-cta .abp-chat-cta__btn--primary {
	background: #0d8ff2;
	color: #fff !important;
	border: 1px solid #0d8ff2;
}
.abp-chat-cta .abp-chat-cta__btn--primary:hover {
	background: #0b78cc;
}
.abp-chat-cta .abp-chat-cta__btn--ghost {
	background: transparent;
	color: #dd9933 !important;
	border: 1px solid #dd9933;
}
.abp-chat-cta .abp-chat-cta__btn--ghost:hover {
	background: #dd9933;
	color: #000 !important;
}
.abp-chat-cta__note {
	display: block;
	margin-top: 10px;
	color: #7f8a99;
	font-size: 12px;
}
@media (max-width: 480px) {
	.abp-chat-cta {
		flex-direction: column;
		padding: 18px;
	}
	.abp-chat-cta__btn {
		flex: 1 1 auto;
		text-align: center;
	}
}

/* ---------- 13. Strona /newsletter/ ---------- */

.abp-newsletter-page {
	max-width: 560px;
	margin: 0 auto 32px;
}
.abp-newsletter-page__intro {
	font-size: 17px;
	line-height: 1.6;
	margin-bottom: 20px !important;
}
/* Formularze MailPoet używają czcionki motywu (własne czcionki Google MailPoet są wyłączone). */
.mailpoet_form,
.mailpoet_form h1, .mailpoet_form h2, .mailpoet_form h3, .mailpoet_form p,
.mailpoet_form label, .mailpoet_form input, .mailpoet_form button,
.mailpoet_form .mailpoet_submit, .mailpoet_form .mailpoet_paragraph {
	font-family: inherit !important;
}
/* formularz jest w treści - bez drugiej kopii w stopce */
.page-id-3813 .td-footer-template-wrap .mailpoet_form {
	display: none !important;
}

/* ---------- 14. Poradniki ---------- */

/* Odstęp pod przyciskiem, zanim zacznie się kolejny nagłówek lub tekst. */
.wpb_wrapper > .tdm_block_button + .td_block_wrap:not(.tdm_block_button) {
	margin-top: 28px !important;
}
/* Widżet wypożyczalni aut (Localrent) jest projektowany na jasne tło - na ciemnej stronie tekst był nieczytelny. */
[id^="mrc_widget_wrapper"] {
	background: #fff;
	color: #1f2937;
	border-radius: 14px;
	padding: 14px;
	margin: 8px 0 16px;
	/* lista ofert potrafiła mieć ~9000 px wysokości na telefonie - przewijanie wewnątrz ramki */
	max-height: 720px;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
}

/* ---------- 9. Osadzone ramki nigdy szersze niż kolumna ---------- */

.tdc-content-wrap iframe {
	max-width: 100%;
}