/*
 * MSZ Zarządzanie Nieruchomościami — style komponentów, których nie da
 * się w pełni wyrazić samym theme.json (odznaki, karty z cieniem, pasek
 * zaufania, siatka usług, karty cennika, szablony CPT Usługi).
 * Kolory i fonty odwołują się do zmiennych z theme.json, więc zmiana
 * palety w jednym miejscu (theme.json) odbija się też tutaj.
 */

/* ---------- Przyciski poboczne ---------- */

/*
 * Własne warianty zamiast wbudowanego stylu "Obrys". Styl z rdzenia
 * WordPressa wychodził biały na białym na ciemnym banerze CTA, a jego
 * reguły mają wyższą wagę niż theme.json, więc nie dało się ich
 * nadpisać po dobroci. Te klasy są niezależne od rdzenia.
 */

.wp-block-button.msz-btn-outline > .wp-block-button__link {
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--contrast);
	border: 1px solid var(--wp--preset--color--contrast);
}

.wp-block-button.msz-btn-outline > .wp-block-button__link:hover,
.wp-block-button.msz-btn-outline > .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--white);
}

/* Wariant na ciemne tło, np. baner CTA. */
.wp-block-button.msz-btn-ghost > .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--white);
	border: 1px solid rgba(255, 255, 255, 0.55);
}

.wp-block-button.msz-btn-ghost > .wp-block-button__link:hover,
.wp-block-button.msz-btn-ghost > .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--white);
}

/* ---------- Nagłówki na ciemnym tle ---------- */

/*
 * theme.json ustawia wszystkim nagłówkom ciemny kolor, przez co H2 w
 * banerze CTA był czarny na czarnym i po prostu go nie było widać.
 */
.has-contrast-background-color h1,
.has-contrast-background-color h2,
.has-contrast-background-color h3,
.has-contrast-background-color h4,
.msz-usluga-strefa-banner h1,
.msz-usluga-strefa-banner h2,
.msz-usluga-strefa-banner h3 {
	color: var(--wp--preset--color--white);
}

/* ---------- Odznaka / pigułka (np. "POZNAŃ I OKOLICE") ---------- */

.msz-badge {
	display: inline-block;
	background: var(--wp--preset--color--badge);
	color: var(--wp--preset--color--accent-dark);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 6px 16px;
	border-radius: 999px;
	margin-bottom: 16px;
}

/* ---------- Karty ogólne (kafelki usług, typów nieruchomości) ---------- */

.msz-card {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 16px;
	padding: 24px;
	box-shadow: var(--wp--preset--shadow--card);
}

.msz-card-icon {
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: var(--wp--preset--color--badge);
	color: var(--wp--preset--color--accent);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 16px;
}

.msz-card-icon .dashicons {
	width: 22px;
	height: 22px;
	font-size: 22px;
}

.msz-card h3 a {
	color: var(--wp--preset--color--contrast);
}

/*
 * Zdjęcie w kafelku, wchodzi na całą szerokość karty i przykleja się do
 * jej górnej krawędzi. Kadr 16:9 z przycięciem, więc kafelki zostają
 * równe niezależnie od tego, jakie zdjęcie wrzucisz. Dodajesz zdjęcie
 * w innym kafelku: blok Obrazek, Zaawansowane → Dodatkowe klasy CSS,
 * wpisz msz-card-photo.
 */
.msz-card-photo {
	margin: -24px -24px 20px;
}

/*
 * WordPress zeruje górny margines pierwszego bloku w kolumnie regułą
 * .is-layout-flow > :first-child, która wagą bije zwykłą klasę. Bez
 * mocniejszego selektora nad zdjęciem zostawał biały pasek wysokości
 * paddingu karty.
 */
.msz-card > .msz-card-photo:first-child,
.wp-block-column.msz-card > .msz-card-photo {
	margin-top: -24px;
}

/*
 * Karta jako kolumna flex, żeby opis trzymał się dolnej krawędzi. Bez
 * tego kafelek z dwuliniowym tytułem ma opis niżej niż sąsiad z
 * jednoliniowym i dolna część siatki jest poszarpana.
 */
.wp-block-column.msz-card {
	display: flex;
	flex-direction: column;
}

.wp-block-column.msz-card > p:last-child {
	margin-top: auto;
	margin-bottom: 0;
}

.msz-card-photo img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 16px 16px 0 0;
}

/*
 * Klikalna karta. Link siedzi w nagłówku, ale rozciągamy jego obszar
 * kliknięcia na całą kartę, żeby nie trzeba było celować w sam tytuł.
 */
.msz-card-link {
	position: relative;
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.msz-card-link:hover {
	box-shadow: var(--wp--preset--shadow--card-elevated);
	transform: translateY(-2px);
}

.msz-card-link h3 a {
	text-decoration: none;
}

.msz-card-link h3 a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 16px;
}

/* Zdjęcie na górze podstrony oferty (single-usluga.php). */
.msz-usluga-cover img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 380px;
	object-fit: cover;
}

/* ---------- Pasek zaufania (template part) ---------- */

.msz-trust-bar .wp-block-group {
	column-gap: 32px;
	row-gap: 8px;
}

.msz-trust-item {
	margin: 0;
	opacity: 0.9;
}

/* ---------- Hero strony głównej ---------- */

.msz-hero-image-wrap {
	position: relative;
}

/*
 * Ramka zdjęcia w hero. Proporcja 4/5 z przycięciem (object-fit: cover)
 * pilnuje, żeby pionowe zdjęcie z telefonu nie rozpychało sekcji na pół
 * ekranu, i żeby każde kolejne zdjęcie, jakie tam wrzucisz, trzymało
 * ten sam kadr. Jak ustawisz Proporcje w panelu bloku w edytorze,
 * WordPress zapisze styl bezpośrednio na obrazku i nadpisze tę regułę,
 * więc klikanie w edytorze dalej działa.
 */
.msz-hero-photo img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: center top;
	border-radius: 16px;
}

.msz-hero-caption {
	position: absolute;
	left: 24px;
	bottom: -24px;
	box-shadow: var(--wp--preset--shadow--card-elevated);
}

/* ---------- "Dlaczego my" — kafle z checkmarkiem ---------- */

.msz-check-item {
	box-shadow: var(--wp--preset--shadow--card);
}

/* ---------- Karty cennika ---------- */

.msz-pricing-card {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 16px;
	padding: 32px 24px;
	box-shadow: var(--wp--preset--shadow--card);
}

.msz-pricing-card.is-featured {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--white);
	box-shadow: var(--wp--preset--shadow--card-elevated);
}

.msz-pricing-card.is-featured h3,
.msz-pricing-card.is-featured .msz-pricing-amount {
	color: var(--wp--preset--color--white);
}

.msz-pricing-amount {
	font-family: var(--wp--preset--font-family--lora);
	font-size: 2rem;
	font-weight: 700;
	margin: 8px 0 20px;
}

.msz-pricing-amount span {
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 0.9rem;
	font-weight: 400;
	opacity: 0.7;
}

/* ---------- Podstrona usługi (single-usluga.php) ---------- */

.msz-usluga-hero {
	background: var(--wp--preset--color--base);
	padding: 64px 40px 48px;
	text-align: left;
}

.msz-usluga-hero-inner,
.msz-usluga-grid-wrap,
.msz-usluga-body,
.msz-usluga-strefa-banner-inner {
	max-width: 1160px;
	margin: 0 auto;
}

.msz-usluga-hero h1 {
	font-family: var(--wp--preset--font-family--lora);
	font-size: 2.5rem;
	margin: 0 0 16px;
}

.msz-lead {
	color: var(--wp--preset--color--secondary);
	font-size: 1.15rem;
	max-width: 640px;
	margin-bottom: 24px;
}

.msz-usluga-grid-wrap {
	padding: 48px 40px;
	text-align: center;
}

.msz-usluga-grid-title {
	font-family: var(--wp--preset--font-family--lora);
	font-size: 2rem;
	margin-bottom: 8px;
}

.msz-usluga-grid-subtitle {
	color: var(--wp--preset--color--secondary);
	margin-bottom: 32px;
}

.msz-usluga-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
	text-align: left;
}

.msz-usluga-card {
	display: block;
	text-decoration: none;
	color: inherit;
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.msz-usluga-card:hover {
	box-shadow: var(--wp--preset--shadow--card-elevated);
	transform: translateY(-2px);
}

.msz-usluga-card h3 {
	font-family: var(--wp--preset--font-family--lora);
	margin: 0 0 8px;
}

.msz-usluga-card p {
	color: var(--wp--preset--color--secondary);
	font-size: 0.95rem;
	margin: 0 0 16px;
}

.msz-usluga-cta {
	color: var(--wp--preset--color--accent);
	font-weight: 600;
	font-size: 0.9rem;
}

.msz-usluga-body {
	padding: 0 40px 64px;
}

.msz-usluga-sekcje {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
}

.msz-usluga-sekcja h2 {
	font-family: var(--wp--preset--font-family--lora);
	font-size: 1.2rem;
	margin: 0 0 12px;
}

.msz-usluga-sekcja ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.msz-usluga-sekcja li {
	font-size: 0.95rem;
	margin-bottom: 8px;
}

.msz-usluga-strefa-banner {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--white);
	padding: 32px 40px;
}

.msz-usluga-strefa-banner-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}

.msz-usluga-strefa-banner-inner > div {
	display: flex;
	gap: 16px;
	align-items: flex-start;
}

.msz-usluga-strefa-banner-inner h3 {
	margin: 0 0 4px;
}

.msz-usluga-strefa-banner-inner p {
	margin: 0;
	opacity: 0.85;
	max-width: 520px;
}

.msz-usluga-strefa-banner-inner .wp-block-button__link {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--white);
	border-radius: 8px;
	padding: 12px 20px;
	text-decoration: none;
	white-space: nowrap;
}

/* ---------- Responsywność ---------- */

@media (max-width: 782px) {
	.msz-usluga-grid,
	.msz-usluga-sekcje {
		grid-template-columns: 1fr;
	}

	.msz-usluga-hero,
	.msz-usluga-grid-wrap,
	.msz-usluga-body,
	.msz-usluga-strefa-banner {
		padding-left: 20px;
		padding-right: 20px;
	}

	.msz-hero-caption {
		position: static;
		margin-top: 12px;
	}
}