/* I-Materac: strona O nas (page-o-nas.php, inc/o-nas.php). Projekt Konrada 21-10-2026. Przedrostek klas: im-o-. */
.im-onas { padding-bottom: 64px; font-size: 16px; line-height: 1.6; color: var(--im-tekst); }
.im-onas p, .im-onas figure, .im-onas blockquote { margin: 0; }
.im-onas ul { list-style: none; margin: 0; padding: 0; }
.im-o-w { position: relative; max-width: 1440px; margin: 0 auto; padding: 0 24px; }

/* Gora: tekst po lewej, zdjecie pary od prawej krawedzi, lewy brzeg zdjecia przechodzi w biel pod tekstem */
.im-o-gora { position: relative; overflow: hidden; padding: 14px 0 118px; background: #fff; }
.im-o-gora__zdjecie { position: absolute; top: 0; right: 0; width: 72%; height: 100%; object-fit: cover; object-position: 55% 30%; }
.im-o-gora::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, #fff 0%, #fff 28%, rgba(255, 255, 255, .82) 35%, rgba(255, 255, 255, .35) 43%, rgba(255, 255, 255, 0) 52%); }
.im-o-gora .im-o-w { z-index: 2; }
.im-o-okruszki { margin-bottom: 22px; font-size: 13.5px; color: var(--im-szary); }
.im-o-okruszki a { color: var(--im-szary); }
.im-o-okruszki a:hover { color: var(--im-zloto-ciemne); }
.im-o-okruszki span { margin: 0 8px; opacity: .6; }
.im-o-gora__tekst { max-width: 520px; }
.im-o-nad { margin-bottom: 6px !important; font-size: 20px; line-height: 1.3; color: #3a3631; }
.im-o-tytul { margin: 0 0 18px; font-size: clamp(38px, 3.6vw, 54px); line-height: 1.08; font-weight: 800; letter-spacing: -.02em; color: var(--im-czern); }
.im-o-wstep { margin-bottom: 26px !important; font-size: 16.5px; line-height: 1.6; color: #2f2b27; }
.im-o-wstep strong { font-weight: 700; color: var(--im-czern); }
.im-strona .im-o-przycisk { display: inline-flex; align-items: center; gap: 10px; padding: 13px 24px; border-radius: 10px; background: var(--im-czern); color: #fff; font-size: 15.5px; font-weight: 600; transition: background-color .15s; }
.im-strona .im-o-przycisk:hover { background: #333; color: #fff; }

/* Fakty: cztery karty nachodzace na dol zdjecia */
.im-o-fakty { position: relative; z-index: 3; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: -96px !important; }
.im-o-fakty li { display: flex; align-items: center; gap: 18px; padding: 18px 22px; border: 1px solid #f0ece6; border-radius: 14px; background: #fff; box-shadow: 0 10px 28px rgba(40, 30, 10, .07); }
.im-o-ikona { display: flex; flex: none; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: #fbf1e1; color: var(--im-zloto-ciemne); }
.im-o-fakty li > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.im-o-fakty strong { font-size: 21px; line-height: 1.25; font-weight: 800; color: var(--im-czern); }
.im-o-fakty b { font-size: 16px; line-height: 1.3; font-weight: 600; color: #2a2622; }
.im-o-fakty small { margin-top: 3px; font-size: 13.5px; line-height: 1.4; color: var(--im-szary); }

/* Nasza historia: zdjecie, tekst, cytat w jednej karcie */
.im-o-historia { display: grid; grid-template-columns: minmax(0, 410fr) minmax(0, 660fr) minmax(0, 330fr); gap: 32px; align-items: center; margin-top: 18px; padding-right: 24px; overflow: hidden; border: 1px solid var(--im-linia); border-radius: 16px; background: #fff; scroll-margin-top: 110px; }
.im-o-historia__zdjecie { display: block; width: 100%; height: 100%; min-height: 220px; object-fit: cover; object-position: 50% 40%; }
.im-o-historia__tekst { padding: 26px 0; }
.im-o-historia__tekst p + p { margin-top: 12px; }
.im-o-historia__tekst p { font-size: 15.5px; line-height: 1.6; color: #2f2b27; }
.im-o-historia__tekst p strong { font-weight: 700; color: var(--im-czern); }
.im-onas .im-o-znak { margin-bottom: 4px; font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #4a443d; }
.im-o-h2 { margin: 0 0 12px; font-size: clamp(23px, 1.8vw, 27px); line-height: 1.25; font-weight: 800; letter-spacing: -.01em; color: var(--im-czern); }
.im-o-cytat { margin: 24px 0 !important; padding: 28px 30px 26px; border-radius: 14px; background: #f7f1e8; }
.im-o-cytat__znak { display: block; margin-bottom: 12px; color: #dcc8aa; }
.im-o-cytat blockquote p { font-size: 15px; line-height: 1.6; color: #2f2b27; }
.im-o-cytat figcaption { margin-top: 14px; font-size: 14.5px; color: #3a3631; }

/* Dlaczego klienci wybieraja I-Materac: cztery powody i plakietka TrustMate */
.im-o-dlaczego { margin-top: 30px; }
.im-o-dlaczego__siatka { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
.im-o-powod { display: flex; align-items: center; gap: 16px; padding: 18px; border: 1px solid var(--im-linia); border-radius: 14px; background: #fff; }
.im-o-powod > span:last-child { font-size: 13.5px; line-height: 1.5; color: var(--im-szary); }
.im-o-powod strong { display: block; margin-bottom: 4px; font-size: 15.5px; line-height: 1.3; font-weight: 700; color: var(--im-czern); }
.im-o-polecaja { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 16px 12px; border: 1px solid #f0ece6; border-radius: 14px; background: #fff; box-shadow: 0 10px 28px rgba(40, 30, 10, .07); text-align: center; }
.im-onas .im-o-polecaja__tytul { font-size: 17px; line-height: 1.3; font-weight: 700; color: var(--im-czern); }
.im-o-polecaja > div { max-width: 100%; }
/* plakietka TrustMate (widzet "stopka", 349 px w poziomie) ulozona pionowo jak w projekcie: ocena, logo, liczba opinii. Klasy TrustMate:
   gdy je zmienia, plakietka wroci do poziomu i wyjdzie poza ramke (pulapka z CLAUDE.md, TrustMate) */
@media (min-width: 1200px) { /* tylko tu ramka jest waska (piata kolumna); nizej plakietka ma cala szerokosc i zostaje pozioma, na telefonie w mniejszej wersji TrustMate */
	.im-o-polecaja .tm-dodo2__sticker { display: flex !important; flex-direction: column; align-items: center; gap: 2px; width: auto !important; padding: 2px 0 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
	.im-o-polecaja .tm-dodo2__grade { justify-content: center; }
	.im-o-polecaja .tm-dodo2__logo, .im-o-polecaja .tm-dodo2__text { text-align: center; }
}

@media (max-width: 1199px) {
	.im-o-fakty { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.im-o-historia { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); padding-right: 0; }
	.im-o-historia__tekst { padding: 26px 28px 26px 0; }
	.im-o-cytat { grid-column: 1 / -1; margin: 0 24px 24px !important; }
	.im-o-dlaczego__siatka { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.im-o-polecaja { grid-column: 1 / -1; }
}
@media (min-width: 992px) and (max-width: 1199px) { /* wezsze okno: tekst wezszy, zdjecie i przejscie w biel dalej w prawo */
	.im-o-gora__tekst { max-width: 430px; }
	.im-o-gora__zdjecie { width: 62%; object-position: 100% 30%; } /* cale haslo z prawej */
	.im-o-gora::before { background: linear-gradient(90deg, #fff 0%, #fff 38%, rgba(255, 255, 255, .8) 45%, rgba(255, 255, 255, 0) 60%); }
}
@media (max-width: 991px) {
	.im-o-gora { padding: 0 0 26px; }
	.im-o-gora__zdjecie { position: static; display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; max-height: 420px; object-position: 60% 30%; }
	.im-o-gora::before { display: none; }
	.im-o-okruszki { margin: 16px 0 14px; }
	.im-o-gora__tekst { max-width: 640px; }
	.im-o-fakty { margin-top: 0 !important; }
}
@media (max-width: 767px) {
	.im-onas { padding-bottom: 48px; font-size: 15.5px; }
	.im-o-w { padding: 0 16px; }
	.im-o-gora__zdjecie { aspect-ratio: 4 / 3; object-position: 100% 0; } /* cale haslo "Lepszy sen na lepsze jutro" z prawej */
	.im-o-nad { font-size: 17px; }
	.im-o-wstep { font-size: 15.5px; }
	.im-o-fakty { grid-template-columns: 1fr; gap: 12px; }
	.im-o-fakty li { padding: 14px 16px; gap: 14px; }
	.im-o-ikona { width: 54px; height: 54px; }
	.im-o-ikona svg { width: 26px; height: 26px; }
	.im-o-fakty strong { font-size: 19px; }
	.im-o-historia { grid-template-columns: 1fr; gap: 0; }
	.im-o-historia__zdjecie { height: auto; min-height: 0; aspect-ratio: 16 / 9; }
	.im-o-historia__tekst { padding: 22px 18px 18px; }
	.im-o-cytat { margin: 0 16px 16px !important; padding: 22px 20px; }
	.im-o-dlaczego__siatka { grid-template-columns: 1fr; gap: 12px; }
	.im-o-powod { padding: 14px 16px; }
}