/**
 * O nas (Figma "Onas" node 168:5243 desktop / "Onas-mobile" node 264:7616,
 * file psb03DxWhlw0g7kvzWHAKt). Page-specific sections only used on
 * o-nas.php — same split as home.css.
 *
 * Reused as-is instead of rebuilding: the navbar-overlay-on-hero technique
 * from home.css (.page-home .site-navbar), .btn-underline for every
 * underlined label/link, .carousel-controls/.carousel-btn + the carousel
 * right-bleed technique from the apartments/Aktualności carousels, and for
 * the Kontakt + Aktualności sections the exact home.css classes
 * (contact-form.php partial, .home-news + news-card.php) — those two
 * sections are pixel-identical to the home page's in Figma, so no new CSS
 * was written for them; o-nas.php includes contact-form.php and reuses the
 * .home-news markup directly.
 *
 * Known simplification: the desktop gallery/hero used one flattened photo
 * per Figma layer group (same reasoning as the home hero) instead of the
 * raw stacked source layers.
 *
 * Gotcha (same as the earlier home "sekcja3" building photo): the raw
 * image-fill URL for the "O nas" text section's background photo
 * (imgImage200221 / imgImage200222) returned a stale night render on a
 * black canvas — completely different from what Figma's live canvas shows
 * for that node. Re-fetched via get_screenshot on node 168:5896 instead,
 * which matched the live canvas (daytime render on white). Saved as
 * onas-building-desktop.png / onas-building-mobile.png (identical file,
 * kept as two names per existing convention). Re-run this check if these
 * images are ever re-exported from Figma.
 */

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

  /* Sticky-after-hero (2026-08-25) — see the .page-home equivalent in
     home.css for the full rationale; components.css holds the shared
     .site-navbar--stuck animation. */
  .page-o-nas .site-navbar.site-navbar--stuck {
    position: fixed;
  }
}

/* Mobile-only companion (2026-09-08, user request, mobile-only work) —
   this page's navbar overlay used to be desktop-only, same as every other
   page's own rule, so on mobile the navbar sat in normal flow ABOVE the
   hero (pushing it down) instead of floating over it. Same exception
   already made for .page-wizualizacje .site-navbar in wizualizacje.css —
   see that rule's own comment for why this deliberately breaks the
   "overlay is desktop-only" pattern instead of matching it. No
   sticky-after-hero companion wired up for mobile here either yet (the
   main.js observer that toggles .site-navbar--stuck only fires when
   desktopQuery.matches) — the navbar will scroll away with the page past
   the hero for now. */
@media (max-width: 991.98px) {
  .page-o-nas .site-navbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
  }
}

/* ---------- Hero ---------- */
/* Video background (2026-09-01, user request — was a static photo before):
   height is now a flat 100vh on both breakpoints (replaces the old
   56.25vw/max-height desktop + aspect-ratio mobile sizing), and heading
   position/look is unified with the Aktualności hero's centered technique
   below instead of each page guessing its own top% — see the identical
   .aktualnosci-hero__content rule in aktualnosci.css, kept deliberately
   parallel so the two pages match. */
.onas-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 .onas-hero because its own width:100%/
   height:100% matched the section's explicit 100vh exactly; same fix
   already applied to .wiz-hero's photo in wizualizacje.css. */
.onas-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --color-primary-muted is --color-primary at exactly 70% opacity (see
   tokens.css) — the "primary color div at 70% opacity over the video"
   the user asked for. Same token + blur amount as the Aktualności hero. */
.onas-hero__tint {
  position: absolute;
  inset: 0;
  background: var(--color-primary-muted);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.onas-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;
}

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

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

.onas-hero__heading em {
  font-family: var(--font-family-hero-heading);
  font-weight: var(--fw-medium);
  font-style: italic;
}

/* Body paragraph + socials row under the heading (2026-09-06, user
   request: reuse the same paragraph+icons block the Aktualności hero has).
   Desktop font-size here (20px, matching Aktualności' own desktop value);
   mobile already had its own .onas-hero__body rule below (13px, unchanged)
   from before this block existed. */
.onas-hero__body {
  margin: 0;
  font-family: var(--font-family-base);
  font-weight: var(--fw-medium);
  font-size: 20px;
}

.onas-hero--mobile .onas-hero__video {
  object-position: center 30%;
}

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

.onas-hero--mobile .onas-hero__eyebrow {
  font-size: 14px;
  text-transform: none;
}

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

.onas-hero--mobile .onas-hero__body {
  margin: 0;
  font-family: var(--font-family-base);
  font-weight: var(--fw-medium);
  font-size: 13px;
}

/* ---------- Social media label row + photo gallery carousel ---------- */
/* Horizontal max-width/centering/side-padding come from the shared
   .section-column class (see base.css) — only vertical padding stays here. */
.onas-social-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 24px;
  padding-bottom: 16px;
}

.onas-social-row__label {
  display: flex;
  align-items: center;
  gap: 16px;
}

.onas-social-row__icons {
  display: flex;
  align-items: center;
  gap: 12px;
}

.onas-social-row__icons img {
  display: block;
  width: auto;
  height: 36px;
}

/* Mobile-only section background (2026-09-08, user request): default
   hidden, only switched on inside the max-width:991.98px block below —
   same default-hidden/mobile-opt-in pattern as .home-progress__heading in
   home.css, so desktop stays untouched regardless of rule order. A real
   position:absolute layer behind the row/carousel, not a separate inline
   image sitting in the content flow. */
.onas-gallery-section__bg {
  display: none;
}

@media (max-width: 991.98px) {
  .onas-gallery-section {
    position: relative;
  }

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

  .onas-social-row,
  .onas-gallery {
    position: relative;
    z-index: 1;
  }
}

/* Not capped/padded itself (unlike .onas-social-row above) — the track
   needs its containing block to be genuinely full-width so it can compute
   its own left inset with 100% instead of the scrollbar-sensitive 100vw,
   same reasoning as .home-apartments/.home-news in home.css. */
.onas-gallery {
  padding-bottom: 48px;
}

.onas-gallery__track {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-left: max(32px, calc((100% - 1320px) / 2 + 32px));
  padding-right: 32px;
  /* Must match padding-left — otherwise scroll-snap:mandatory doesn't
     treat scroll position 0 as valid and Chrome auto-scrolls on first
     load. See the note on .home-apartments__grid in home.css. */
  scroll-padding-left: max(32px, calc((100% - 1320px) / 2 + 32px));
}

.onas-gallery__track::-webkit-scrollbar {
  display: none;
}

/* Video cards (2026-09-01, user request — replaces the static photos that
   used to sit here). Hover starts a silent preview loop and pauses it again
   on mouseleave; a click "commits" — unmutes, shows native controls, and
   keeps playing even after the cursor leaves (.is-active). See the
   [data-video-card] handler in main.js for the actual play/pause/mute
   wiring; no play button — hover alone is the play trigger now. */
.onas-gallery__item {
  position: relative;
  flex-shrink: 0;
  overflow: hidden;
  scroll-snap-align: start;
  width: 275px;
  aspect-ratio: 275 / 492;
  border-radius: 32px;
  cursor: pointer;
}

.onas-gallery__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.onas-gallery__item:hover:not(.is-active) .onas-gallery__video {
  transform: scale(1.08);
}

@media (min-width: 992px) {
  .onas-social-row {
    padding-top: 32px;
    padding-bottom: 24px;
  }

  .onas-gallery {
    padding-bottom: 64px;
  }

  .onas-gallery__item {
    width: 366px;
    aspect-ratio: 366 / 655;
    border-radius: 50px;
  }
}

@media (max-width: 991.98px) {
  .onas-social-row .carousel-controls {
    display: none;
  }
}

/* ---------- O nas text + photo ---------- */
/* Used to slide up underneath the video-gallery section above via a
   negative margin-top (2026-09-01) — reverted to a clear positive gap
   instead (2026-09-08, user request): the overlap was leaving the info
   card + features row here cramped against the gallery, and the user
   wanted the two sections visually separated with more breathing room
   for this section's own content instead. */
.onas-intro {
  margin-top: 32px;
}

@media (min-width: 992px) {
  .onas-intro {
    margin-top: 64px;
  }
}

.onas-intro__visual {
  position: relative;
}

.onas-intro__photo {
  display: block;
  width: 100%;
  aspect-ratio: 1920 / 981;
  object-fit: cover;
}

.onas-intro__card {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.onas-intro__eyebrow {
  margin: 0 0 8px;
  font-family: var(--font-family-base);
  font-weight: var(--fw-bold);
  color: var(--color-primary);
  font-size: 20px;
}

.onas-intro__heading {
  margin: 0;
  font-family: var(--font-family-base);
  font-weight: var(--fw-bold);
  color: var(--color-black);
  font-size: 36px;
}

.onas-intro__body {
  margin: 0;
  font-family: var(--font-family-base);
  font-weight: var(--fw-regular);
  color: var(--color-black);
  font-size: 16px;
}

.onas-intro__body p {
  margin: 0 0 16px;
}

.onas-intro__body p:last-child {
  margin-bottom: 0;
}

@media (min-width: 992px) {
  /* CSS Grid instead of independent position:absolute boxes (2026-09-06
     follow-up — user asked for the card centered AND the features row
     pinned to the bottom edge). Tried two absolutely-positioned elements
     first (card centered on the full photo height via top:50%, features
     pinned via bottom:32px) — broke visibly: the card's centering had no
     idea the features row existed, so at every width up to ~1900px the
     (fairly tall, 2-paragraph) card's centered box actually overlapped
     the bottom-pinned row, text over text. Fix: .onas-intro__visual gets
     the photo's own aspect-ratio directly and becomes a 2-row grid
     (1fr / auto) instead — .onas-intro__photo spans both rows as a plain
     background layer (no position:absolute needed; grid stacking order
     follows DOM order for overlapping items), .onas-intro__features sits
     in the auto row (sized to its own content, always flush at the very
     bottom since it's the last row), and .onas-intro__card sits in the
     1fr row and centers with align-self — i.e. centered in whatever
     space is actually LEFT ABOVE the features row, not the full height.
     This can't fully save a viewport too short for both at once, but it's
     the right structural fix rather than two boxes guessing at each
     other's size. */
  .onas-intro__visual {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto;
    /* Guarantees breathing room between the card text and the features
       row even at the narrow end (992-1280px), where the card's
       align-self:center used to leave literally 0px between the two —
       measured via getBoundingClientRect (2026-09-08 fix). Taken out of
       .onas-intro__features' own bottom margin below, not added on top
       of it, so the row's total footprint (and the fixed-aspect-ratio
       photo it sits over) is unchanged. */
    row-gap: 16px;
    aspect-ratio: 1920 / 981;
  }

  .onas-intro__photo {
    grid-column: 1;
    grid-row: 1 / -1;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
  }

  .onas-intro__card {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    justify-self: end;
    /* 100%, not 100vw — see the identical note on .home-floorplan__card
       in home.css. */
    margin-right: max(32px, calc((100% - 1320px) / 2 + 32px));
    width: min(560px, 42%);
    padding: 32px;
  }

  /* Fluid type instead of a fixed px size (2026-09-08 fix): the card's
     box (width AND, via the visual's aspect-ratio, the vertical room
     above the features row) shrinks continuously between 992px and
     ~1920px, but the heading/body font sizes used to stay pinned at
     their 1920px-tuned values across that whole range — fine at 2K,
     visibly cramped (more text-wrapped lines than the box comfortably
     fits) at ordinary laptop widths like 1280-1440. clamp() scales the
     type down together with the box instead of only the box shrinking. */
  .onas-intro__eyebrow {
    font-size: clamp(16px, 1vw + 6px, 20px);
  }

  .onas-intro__heading {
    font-size: clamp(26px, 2.2vw, 42px);
  }

  .onas-intro__body {
    font-size: clamp(14px, 0.55vw + 8px, 16px);
  }
}

@media (max-width: 991.98px) {
  /* Hidden on mobile only (2026-09-08, user request) — redundant now that
     .onas-gallery-section above already uses this exact same photo
     (home-building-desktop.png) as its own background. Desktop is left
     completely untouched: its entire grid layout (.onas-intro__visual's
     `@media (min-width:992px)` rule above) still depends on this photo
     spanning both rows as the floating card's backdrop, so the <img>
     itself stays in the markup — only display:none here, not removed. */
  .onas-intro__photo {
    display: none;
  }

  .onas-intro__card {
    padding: 32px 16px;
  }
}

/* ---------- Cechy osiedla ---------- */
/* No Figma — copy adapted from osiedleniepodleglosci.pl/o-nas/ (2026-09-06,
   user request). Went through two earlier layouts same day (own section on
   a colored band; then stacked as rows inside .onas-intro__card itself)
   before the user supplied a real layout sketch (Screeny/uklad.png): 3
   separate cards in a row, wider than .onas-intro__card, sitting directly
   below it — both still floating over the SAME photo, no separate
   section/background. .section-column (in the markup) gives this row its
   width/centering, independently of .onas-intro__card's own 42% column
   above it — that's what makes it wider, matching the sketch. */
.onas-intro__features {
  position: relative;
  z-index: 1;
  margin-top: 16px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.onas-intro__feature {
  background: var(--color-white);
  border-radius: 24px;
  padding: 24px;
  text-align: center;
}

.onas-intro__feature-icon {
  display: block;
  width: 32px;
  height: 32px;
  margin: 0 auto 12px;
  color: var(--color-primary);
}

.onas-intro__feature-title {
  margin: 0;
  font-family: var(--font-family-base);
  font-weight: var(--fw-bold);
  color: var(--color-black);
  font-size: 16px;
}

.onas-intro__feature-desc {
  margin: 8px 0 0;
  font-family: var(--font-family-base);
  font-weight: var(--fw-regular);
  color: var(--color-secondary);
  font-size: 13px;
}

@media (min-width: 992px) {
  /* Sits in .onas-intro__visual's own 2nd grid row (see .onas-intro__card
     above) — always flush at the bottom because it's the last row and
     sized to its own content (grid-template-rows: 1fr auto), no
     position:absolute/bottom needed. */
  .onas-intro__features {
    grid-column: 1;
    grid-row: 2;
    margin-top: 0;
    margin-bottom: 16px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
  }

  .onas-intro__feature-title {
    font-size: 18px;
  }

  .onas-intro__feature-desc {
    font-size: 14px;
  }
}

/* Mobile-only redesign (2026-09-08, user request): the centered vertical
   card layout made sense floating over the photo, but now that
   .onas-intro__photo is hidden on mobile (see the entry above), these
   cards sat on the plain page background as bare white-on-white shapes
   with no visible edge. Switched to a left-aligned icon+text row inside a
   bordered card (matches .apartment-card/.finansowanie-partner__card's
   own white+border convention rather than inventing a new one), icon in
   a circular tinted badge instead of a bare centered glyph. */
@media (max-width: 991.98px) {
  .onas-intro__features {
    gap: 12px;
  }

  .onas-intro__feature {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 20px;
    padding: 20px;
    text-align: left;
  }

  .onas-intro__feature-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    margin: 0;
    padding: 10px;
    box-sizing: content-box;
    background: var(--color-bg);
    border-radius: 50%;
  }

  /* Groups title+desc as one flex item next to the icon instead of
     leaving them as separate flex children of .onas-intro__feature —
     without this wrapper they rendered as two side-by-side columns
     instead of a stacked pair (same real bug already caught once for
     .finansowanie-steps__item, same fix: a text wrapper div).
     min-width:0 lets the text actually wrap inside its flex item instead
     of overflowing it. */
  .onas-intro__feature-text {
    flex: 1;
    min-width: 0;
  }
}

/* Scroll-triggered reveal, one card after another (2026-09-08, user
   request) — [data-steps] in main.js adds .is-visible to
   .onas-intro__features once it scrolls into view; each card's own
   transition-delay staggers the sequence, same mechanism already
   established for .finansowanie-steps__item in finansowanie.css. Scoped
   to mobile only (unlike that page's version, which applies everywhere)
   since desktop's .onas-intro__feature sits in a completely different
   floating-card-over-photo grid — kept untouched. translateY(24px), a
   POSITIVE offset, is what makes cards animate in from below rather than
   above. */
@media (prefers-reduced-motion: no-preference) and (max-width: 991.98px) {
  .onas-intro__feature {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.5s ease, transform 0.5s ease;
  }

  .onas-intro__features.is-visible .onas-intro__feature {
    opacity: 1;
    transform: none;
  }

  .onas-intro__feature:nth-child(1) { transition-delay: 0s; }
  .onas-intro__feature:nth-child(2) { transition-delay: 0.15s; }
  .onas-intro__feature:nth-child(3) { transition-delay: 0.3s; }
}