/* Podstrony: baner z tytułem + szkic sekcji (do zastąpienia docelowym projektem). */
.p-baner { --k: var(--pom); --t: #FFF1E3; position: relative; isolation: isolate; overflow: hidden; max-width: 1880px; margin: clamp(.6rem, 1.4vw, 1.5rem) auto 0; border-radius: var(--r-xl); background: var(--t); padding: clamp(2.2rem, 5vw, 5rem) clamp(1.2rem, 5vw, 5rem); width: calc(100% - 2 * clamp(.6rem, 1.4vw, 1.5rem)); }
.p-baner::after { content: ''; position: absolute; z-index: -1; width: clamp(220px, 32vw, 520px); aspect-ratio: 1; right: -6%; top: -30%; border-radius: 42% 58% 63% 37% / 45% 40% 60% 55%; background: var(--k); opacity: .22; }
.p-baner--nieb { --k: var(--nieb); --t: #E6F3FE; } .p-baner--roz { --k: var(--roz); --t: #FFEEF4; } .p-baner--tur { --k: var(--tur); --t: #E3F8FB; }
.p-okruszki { font-size: .9rem; color: var(--tusz-2); font-weight: 700; margin-bottom: 1.4rem; }
.p-okruszki a { text-decoration: underline; text-underline-offset: 3px; }
.p-okruszki span { margin: 0 .3rem; opacity: .5; }
.p-baner .nadtytul { font-family: var(--font-naglowek); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--pom-2); }
.p-baner h1 { font-size: clamp(2.4rem, 5.5vw, 5.4rem); font-weight: 800; line-height: .95; margin: .8rem 0 1.2rem; max-width: 18ch; }
.p-baner h1 span { display: block; color: var(--k); filter: brightness(.9); }
.p-lead { font-size: clamp(1.05rem, 1rem + .4vw, 1.3rem); color: var(--tusz-2); max-width: 40rem; margin-bottom: 1.6rem; }
.p-szkic { max-width: 1500px; margin: 0 auto; padding: clamp(2.5rem, 5vw, 4.5rem) clamp(1rem, 4vw, 4rem); }
.p-szkic__info { display: inline-block; background: #FFF3C4; color: #6B5300; font-weight: 700; font-size: .9rem; padding: .5rem 1rem; border-radius: 999px; margin-bottom: 1.4rem; }
.p-szkic__lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; }
.szkic { position: relative; border: 2.5px dashed #D9DEEA; border-radius: 22px; padding: 1.5rem 1.4rem 1.4rem; min-height: 170px; background: #FAFBFD; }
.szkic__nr { position: absolute; right: 1.2rem; top: 1rem; font-family: var(--font-naglowek); font-weight: 800; font-size: 1.8rem; color: #D9DEEA; }
.szkic h2 { font-size: 1.35rem; font-weight: 800; margin-bottom: .5rem; padding-right: 2.6rem; }
.szkic p { color: var(--tusz-2); font-weight: 600; font-size: .95rem; }
.kon__rzad--auto { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important; }
.podstrona .kontakt { padding-top: 0; }
@media (max-width: 760px) { .p-baner { width: calc(100% - 1rem); margin-top: .5rem; border-radius: 28px; } }

/* Baner ze zdjęciem: tekst po lewej, zdjęcie w zaokrąglonej, lekko obróconej ramce po prawej. */
.p-baner--foto { display: grid; grid-template-columns: 1fr minmax(320px, .95fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.p-baner__foto { position: relative; aspect-ratio: 4 / 3; border-radius: 36px; overflow: hidden; transform: rotate(2deg); box-shadow: 16px 16px 0 var(--k); }
.p-baner__foto img { width: 100%; height: 100%; object-fit: cover; }
.p-baner__metka { position: absolute; left: .8rem; bottom: .8rem; background: rgba(30,35,64,.7); color: #fff; font-size: .75rem; font-weight: 700; padding: .25rem .6rem; border-radius: 999px; }
@media (max-width: 900px) { .p-baner--foto { grid-template-columns: 1fr; } .p-baner__foto { transform: none; box-shadow: 10px 10px 0 var(--k); } }
/* Baner niższy, zdjęcie mniejsze. */
.p-baner--foto { padding-top: clamp(1.6rem, 3vw, 2.8rem); padding-bottom: clamp(1.6rem, 3vw, 2.8rem); grid-template-columns: 1fr minmax(280px, 520px); }
.p-baner--foto h1 { font-size: clamp(2.2rem, 4.2vw, 4.2rem); margin: .5rem 0 .9rem; }
.p-baner--foto .p-okruszki { margin-bottom: 1rem; }
.p-baner--foto .p-lead { margin-bottom: 1.2rem; }
.p-baner__foto { aspect-ratio: 16 / 10; max-height: 340px; width: 100%; justify-self: end; }

/* bieżąca podstrona w menu i szufladzie */
.menu a[aria-current="page"] { color: var(--pom-2, #F07300); }
.szuflada a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; }

/* telefon i tablet: zdjęcie banera pod tekstem (reguła wyżej ustawiała znowu dwie kolumny) */
@media (max-width: 900px) {
  .p-baner--foto { grid-template-columns: minmax(0, 1fr); }
  .p-baner__foto { justify-self: stretch; max-height: none; }
}