/**
 * Finansowanie — no Figma for this page (2026-09-06, built from the live
 * reference at osiedleniepodleglosci.pl/finansowanie/ per user request,
 * copy adapted from there). Structure/CSS deliberately reuses the site's
 * existing patterns rather than inventing new ones:
 *   - hero: identical video-hero technique to o-nas.css/aktualnosci.css
 *     (same background video, same navbar-overlay-on-hero + sticky-after-
 *     hero rules, same .hero-scroll-icon cue from components.css).
 *   - .finansowanie-block: plain heading+paragraph sections, typography
 *     lifted from .onas-intro's heading/body treatment.
 *   - .finansowanie-cta: solid-color closing band before the (shared)
 *     contact form, same idea as .home-banner but without its photo.
 */

/* Same navbar-overlay-on-hero technique as .page-home/.page-o-nas. */
@media (min-width: 992px) {
  .page-finansowanie .site-navbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
  }

  .page-finansowanie .site-navbar.site-navbar--stuck {
    position: fixed;
  }
}

/* Mobile-only companion (2026-09-08, user request, mobile-only work) —
   same fix already applied to .page-o-nas/.page-wizualizacje's own
   navbar: this page's overlay used to be desktop-only like every other
   page's rule, so on mobile the navbar sat in normal flow ABOVE the hero
   (pushing it down) instead of floating over it. See the comment on
   .page-wizualizacje .site-navbar in wizualizacje.css for why this
   deliberately breaks the "overlay is desktop-only" pattern. No
   sticky-after-hero companion for mobile yet, same known gap as the other
   two pages (main.js's stuck-class observer only fires when
   desktopQuery.matches). */
@media (max-width: 991.98px) {
  .page-finansowanie .site-navbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
  }
}

/* ---------- Hero ---------- */
.finansowanie-hero {
  position: relative;
  overflow: hidden;
  height: 100vh;
}

/* position:absolute background layer (2026-09-08 fix) — was a normal-flow
   block that only happened to fill .finansowanie-hero because its own
   width:100%/height:100% matched the section's explicit 100vh exactly;
   same fix already applied to .onas-hero__video/.wiz-hero__photo. */
.finansowanie-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.finansowanie-hero__tint {
  position: absolute;
  inset: 0;
  background: var(--color-primary-muted);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.finansowanie-hero__content {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: min(900px, 88%);
  margin: 0;
  font-family: var(--font-family-base);
  font-weight: var(--fw-bold);
  color: var(--color-white);
  text-align: center;
}

.finansowanie-hero__eyebrow {
  margin: 0;
  font-size: 20px;
}

.finansowanie-hero__heading {
  margin: 0;
  font-family: var(--font-family-hero-heading);
  font-weight: var(--fw-regular);
  font-size: 64px;
  line-height: normal;
}

.finansowanie-hero__body {
  margin: 0;
  font-family: var(--font-family-base);
  font-weight: var(--fw-medium);
  font-size: 20px;
}

.finansowanie-hero--mobile .finansowanie-hero__content {
  gap: 12px;
}

.finansowanie-hero--mobile .finansowanie-hero__eyebrow {
  font-size: 14px;
}

.finansowanie-hero--mobile .finansowanie-hero__heading {
  font-size: 36px;
}

.finansowanie-hero--mobile .finansowanie-hero__body {
  font-size: 13px;
}

/* ---------- Narrative sections ---------- */
/* Typography lifted from .onas-intro__heading/__body (o-nas.css) for
   consistency with the site's other plain text-block pattern. */
.finansowanie-block {
  padding: 48px 0;
}

@media (min-width: 992px) {
  .finansowanie-block {
    padding: 96px 0;
  }
}

.finansowanie-block--tint {
  background: var(--color-bg);
}

/* Photo background + green tint (2026-09-08, user request) — identical
   overlay technique/color to .home-banner__photo/__overlay in home.css,
   reused rather than reinvented. */
.finansowanie-block--photo {
  position: relative;
  overflow: hidden;
}

.finansowanie-block--photo .finansowanie-block__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.finansowanie-block--photo .finansowanie-block__overlay {
  position: absolute;
  inset: 0;
  background: rgba(64, 81, 59, 0.5);
  z-index: 0;
}

.finansowanie-block--photo .finansowanie-block__inner {
  position: relative;
  z-index: 1;
}

.finansowanie-block--photo .finansowanie-block__heading,
.finansowanie-block--photo .finansowanie-block__body {
  color: var(--color-white);
}

.finansowanie-block__inner {
  max-width: 760px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.finansowanie-block__heading {
  margin: 0;
  font-family: var(--font-family-base);
  font-weight: var(--fw-bold);
  color: var(--color-black);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
}

.finansowanie-block__body {
  margin: 0;
  font-family: var(--font-family-base);
  font-weight: var(--fw-regular);
  color: var(--color-black);
  font-size: var(--fs-body-md);
  line-height: var(--lh-body-md);
}

/* ---------- Step-by-step process ---------- */
/* Numbered circles connected by a line, replacing the two old plain text
   blocks (2026-09-08, user request). .finansowanie-block/__inner above
   still supplies this section's own heading+intro paragraph (narrow,
   760px, centered) — this list is a second, wider (.section-column,
   1320px) direct child of the same <section>, so it needs its own
   top spacing rather than relying on .finansowanie-block__inner's gap. */
.finansowanie-steps__list {
  position: relative;
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.finansowanie-steps__item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 20px;
  text-align: left;
}

/* Connects consecutive circles with a single vertical rail behind all of
   them (mobile default) rather than per-item segments, since item heights
   vary with each step's text and a rail spanning the whole list's own
   height needs no per-item math. Inset top/bottom by the circle's own
   radius (24px) so it starts/ends at the first/last circle's center, not
   the list's outer edge.
   left:56px, not 24px (2026-09-08 fix, real bug caught via measured
   getBoundingClientRect: the line sat 32px away from the circles'
   actual center, visibly "obok" them instead of through them). Root
   cause: .finansowanie-steps__list also carries the .section-column
   class, whose own 32px padding-left (base.css) shifts every circle
   32px in from the list's edge — but this ::before's `left` (an
   absolutely-positioned offset) resolves against the list's PADDING
   EDGE, not its content edge, so it never inherited that same 32px
   inset. 24px alone only would have been correct for a list with zero
   horizontal padding of its own. 56px = 32px (section-column's own
   padding-left) + 24px (circle radius, unchanged). */
.finansowanie-steps__list::before {
  content: '';
  position: absolute;
  left: 56px;
  top: 24px;
  bottom: 24px;
  width: 2px;
  background: var(--color-border);
  z-index: 0;
}

/* Groups title+desc as one flex item next to the circle (mobile row
   layout) instead of leaving them as separate flex children of
   .finansowanie-steps__item — without this wrapper the title and desc
   ended up as two side-by-side columns rather than a stacked pair (real
   bug, caught via a screenshot: 2026-09-08). min-width:0 lets the text
   actually wrap inside its flex item instead of overflowing it. */
.finansowanie-steps__text {
  flex: 1;
  min-width: 0;
}

.finansowanie-steps__number {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-white);
  font-family: var(--font-family-base);
  font-weight: var(--fw-bold);
  font-size: 18px;
}

.finansowanie-steps__title {
  margin: 0 0 4px;
  font-family: var(--font-family-base);
  font-weight: var(--fw-bold);
  color: var(--color-black);
  font-size: 16px;
}

.finansowanie-steps__desc {
  margin: 0;
  font-family: var(--font-family-base);
  font-weight: var(--fw-regular);
  color: var(--color-secondary);
  font-size: 14px;
  line-height: 1.5;
}

/* Scroll-triggered reveal (2026-09-08, user request: steps should animate
   in one after another) — main.js's [data-steps] IntersectionObserver
   block adds .is-visible to .finansowanie-steps__list once, and each
   item's own transition-delay staggers the sequence. Guarded behind
   prefers-reduced-motion like .hero-scroll-icon in components.css. */
@media (prefers-reduced-motion: no-preference) {
  .finansowanie-steps__item {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.5s ease, transform 0.5s ease;
  }

  .finansowanie-steps__list.is-visible .finansowanie-steps__item {
    opacity: 1;
    transform: none;
  }

  .finansowanie-steps__item:nth-child(1) { transition-delay: 0s; }
  .finansowanie-steps__item:nth-child(2) { transition-delay: 0.15s; }
  .finansowanie-steps__item:nth-child(3) { transition-delay: 0.3s; }
  .finansowanie-steps__item:nth-child(4) { transition-delay: 0.45s; }
}

/* Trimmed to fit one mobile card-scroll screen (2026-10-05, user report:
   the step titles were getting clipped on shorter phones) — the 4-item
   list's own 40px top margin + 40px gaps between items added up fast.
   finansowanie.css is only ever used on this one page, so no extra
   scoping precaution needed beyond the existing breakpoint. */
@media (max-width: 991.98px) {
  .finansowanie-steps__list {
    margin-top: 8px;
    gap: 10px;
  }

  .finansowanie-steps__number {
    width: 36px;
    height: 36px;
    font-size: 15px;
  }

  .finansowanie-steps__desc {
    font-size: 13px;
  }

  /* Rail re-centered for the smaller 36px circle above (radius 18, not
     24) — same 32px .section-column padding-left + radius formula as the
     base rule. */
  .finansowanie-steps__list::before {
    left: 50px;
  }
}

@media (min-width: 992px) {
  .finansowanie-steps__list {
    margin-top: 64px;
    flex-direction: row;
    gap: 0;
  }

  /* Desktop swaps the single vertical rail for a horizontal segment
     between each pair of consecutive circles: since every item is an
     equal-width flex:1 column with its circle centered in it, going from
     this item's own center (left:50%) out by exactly one item's width
     (width:100%) lands precisely on the next item's center — true
     regardless of how many steps there are, no fixed-percentage math to
     keep in sync. The circle's own z-index:1 (above) covers the segment
     endpoints, so it doesn't matter that this runs full item-to-item
     rather than stopping at each circle's edge. */
  .finansowanie-steps__list::before {
    display: none;
  }

  .finansowanie-steps__item {
    flex: 1;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
    padding: 0 16px;
  }

  .finansowanie-steps__item:not(:last-child)::after {
    content: '';
    position: absolute;
    z-index: 0;
    top: 24px;
    left: 50%;
    width: 100%;
    height: 2px;
    background: var(--color-border);
  }

  .finansowanie-steps__title {
    font-size: 18px;
  }

  .finansowanie-steps__desc {
    font-size: 15px;
  }
}

/* ---------- Partner finansowy ---------- */
/* Single named-partner spotlight (2026-09-08, user-supplied logo + copy).
   Card treatment matches .apartment-card's convention (white bg + 1px
   border, no shadow) rather than inventing a new visual language. */
.finansowanie-partner {
  background: var(--color-bg);
  padding: 48px 0;
}

/* Default-hidden, mobile-opt-in (2026-09-08) — see the
   @media (max-width:991.98px) block further down for the actual photo
   styling; kept hidden here so desktop (which never gets this background)
   stays untouched regardless of rule order. */
.finansowanie-partner__bg,
.finansowanie-partner__overlay {
  display: none;
}

@media (min-width: 992px) {
  .finansowanie-partner {
    padding: 80px 0;
  }
}

.finansowanie-partner__card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 32px;
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
}

.finansowanie-partner__logo {
  display: block;
  width: 160px;
  height: auto;
}

.finansowanie-partner__content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* .btn-underline is itself inline-flex (hugs its label's text width by
   design — see components.css), but as a flex item of the column above it
   would otherwise get stretched to the full column width by the parent's
   default align-items:stretch, which in turn stretches its __underline
   child's 40% to 40% of that full width instead of 40% of the label.
   align-self opts it back out of the stretch. */
.finansowanie-partner__content .btn-underline {
  align-self: flex-start;
}

.finansowanie-partner__eyebrow {
  margin: 0;
  font-family: var(--font-family-base);
  font-weight: var(--fw-bold);
  color: var(--color-primary);
  font-size: 16px;
}

.finansowanie-partner__heading {
  margin: 0;
  font-family: var(--font-family-base);
  font-weight: var(--fw-bold);
  color: var(--color-black);
  font-size: 24px;
}

.finansowanie-partner__body,
.finansowanie-partner__note {
  margin: 0;
  font-family: var(--font-family-base);
  font-weight: var(--fw-regular);
  color: var(--color-black);
  font-size: 15px;
  line-height: 1.5;
}

.finansowanie-partner__note {
  font-weight: var(--fw-medium);
  color: var(--color-primary);
}

@media (min-width: 992px) {
  .finansowanie-partner__card {
    flex-direction: row;
    align-items: center;
    gap: 48px;
    padding: 48px 64px;
    text-align: left;
  }

  .finansowanie-partner__logo {
    width: 220px;
    flex-shrink: 0;
  }

  .finansowanie-partner__eyebrow {
    font-size: 18px;
  }

  .finansowanie-partner__heading {
    font-size: 30px;
  }

  .finansowanie-partner__body,
  .finansowanie-partner__note {
    font-size: 16px;
  }
}

/* ---------- Closing CTA band ---------- */
.finansowanie-cta {
  background: var(--color-primary);
  padding: 48px 0;
}

@media (min-width: 992px) {
  .finansowanie-cta {
    padding: 80px 0;
  }
}

.finansowanie-cta__inner {
  max-width: 760px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.finansowanie-cta__heading {
  margin: 0;
  font-family: var(--font-family-base);
  font-weight: var(--fw-bold);
  color: var(--color-white);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
}

.finansowanie-cta__body {
  margin: 0;
  font-family: var(--font-family-base);
  font-weight: var(--fw-regular);
  color: var(--color-white);
  font-size: var(--fs-body-md);
  line-height: var(--lh-body-md);
}

/* ---------- Mobile-only card-scroll fixes (2026-09-08, selectors updated
   2026-10-04 for the pagePiling.js migration) ---------- */
/* Cards 1/2/3/4 (Partner, Kroki, Sfinansuj-photo, CTA) each only took up
   their own natural content height — same "background powinien pokrywać
   całość karty" issue already solved for .home-banner/.wiz-hero/
   .home-floorplan--mobile. flex:1 makes each section grow to the FULL
   card height instead of just sitting within it, so gray/photo/primary
   backgrounds genuinely reach every edge; flex-direction:column +
   justify-content:center re-centers each section's own (now shorter than
   the card) content within whatever that taller height turns out to be —
   same combined technique .home-floorplan--mobile already uses. */
@media (max-width: 991.98px) {
  .card-scroll__section--fin-partner .finansowanie-partner,
  .card-scroll__section--fin-steps .finansowanie-block,
  .card-scroll__section--fin-photo .finansowanie-block--photo,
  .card-scroll__section--fin-cta .finansowanie-cta {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  /* Partner section background photo (2026-09-08, user request) — real
     position:absolute layer, same default-hidden/mobile-opt-in pattern as
     .onas-gallery-section__bg in o-nas.css (see .finansowanie-partner__bg
     below, defined outside this media query). Needs position:relative +
     overflow:hidden here since the base rule doesn't carry them (desktop
     never needed a positioning context, its own background stays the
     plain --color-bg fill). */
  .finansowanie-partner {
    position: relative;
    overflow: hidden;
  }

  .finansowanie-partner__bg {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
  }

  /* Light overlay, not the dark green tint .finansowanie-block--photo
     uses (2026-09-08 fix) — real legibility bug caught via screenshot:
     the photo's darker lower half (building facade) made the existing
     dark heading/body/note text unreadable, but this section's content
     (a partner's actual logo + dark text) shouldn't just get recolored
     white the way the CTA/Sfinansuj cards' text does — a white bank logo
     would misrepresent the real logo. Lightening the photo instead keeps
     every existing color (logo included) legible as-is. */
  .finansowanie-partner__overlay {
    display: block;
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.8);
    z-index: 0;
  }

  .finansowanie-partner__inner {
    position: relative;
    z-index: 1;
  }

  /* Partner card enlarged + more breathing room between its texts
     (2026-09-08, user request). White background/border dropped
     (2026-09-08 follow-up, user request) — same "just the content, no
     extra white card chrome" call already made for .onas-intro__card;
     a bare border with no fill would have looked like a stray floating
     outline once the background was gone, so it came off too, not just
     the background alone. border-radius left in the base rule is now
     inert without a border/background to round — harmless, not worth a
     separate override just to delete it. Padding kept (still gives
     breathing room from the section's own edges). */
  .finansowanie-partner__card {
    background: none;
    border: none;
    padding: 40px 28px;
    gap: 28px;
  }

  /* 200px -> 260px (2026-09-08, user request: "znacznie powiększony") —
     close to this card's own available content width (326px section
     column minus 2*28px card padding = 270px) without overflowing it. */
  .finansowanie-partner__logo {
    width: 260px;
  }

  .finansowanie-partner__content {
    gap: 16px;
  }

  .finansowanie-partner__heading {
    font-size: 26px;
  }

  /* CTA band: bigger text + more spacing (2026-09-08, user request) —
     bumped to the --fs-h1/--fs-body-lg token scale instead of the
     smaller --fs-h2/--fs-body-md this section shares with the plainer
     narrative blocks, now that flex:1 above gives it real headroom to
     use rather than being squeezed to natural content height. */
  .finansowanie-cta__inner {
    gap: 24px;
  }

  .finansowanie-cta__heading {
    font-size: var(--fs-h1);
    line-height: var(--lh-h1);
  }

  .finansowanie-cta__body {
    font-size: var(--fs-body-lg);
    line-height: var(--lh-body-lg);
  }
}