/* ==========================================================================
   Card scroll — shared mobile card layout (2026-10-05, user request)
   --------------------------------------------------------------------------
   "Karty różnią się od siebie rozłożeniem i układem — chcę to ujednolicić,
   nagłówek zawsze w tym samym miejscu, takie same paddingi i marginy" —
   reference layout: Home's "Etapy powstania Osiedla Niepodległości" card
   (.card-scroll__section--progress): eyebrow + big heading pinned to the
   top under the navbar, 32px side gutter, content flowing down from there.

   Every regular text card opts in via the .card-scroll__section--standard
   modifier (index.php / finansowanie.php / wizualizacje.php) and gets its
   top offset, gutter, eyebrow/heading typography and heading-to-content gap
   ONLY from the variables below — change them here, never per card.

   Deliberately NOT standard (own layout on purpose, per user): hero cards,
   Home's "Wybierz piętro" (floorplan) and promo banner, Finansowanie's
   partner / photo / CTA cards, and the footer. Those are full-bleed
   background cards — see the padding-top:0 note below.

   Imported LAST in main.css so these card-scoped rules win over each
   component's own mobile defaults in home.css/finansowanie.css/
   wizualizacje.css without !important. Everything is scoped through a
   .card-scroll__section ancestor: the shared components touched here
   (contact-form, home-news, ...) are also used standalone on other pages,
   which must stay unaffected.
   ========================================================================== */

/* ---- Stage: cards are AT LEAST one screen, may be taller (2026-10-10) ----
   Driven by assets/js/card-stack.js (wired up in card-scroll.js), which
   replaced pagePiling.js — pagePiling forced every card to exactly 100%.
   The controller adds `card-stack-on` to <html> on mobile; without it
   (no JS, desktop) the cards are a normally scrolling page.

   Safari / WebKit (iOS 26, user screenshot Screeny/mobile.jpeg): a
   position:fixed stage gets clipped to the area ABOVE Safari's floating
   bottom bar (even at 100lvh) — the page's white background showed under
   the bar and the card looked cut off. So the stage is a normal in-flow
   block, 100lvh tall, from the top of the page: in-flow content IS drawn
   under the floating bar. Native page scroll is blocked in JS instead of
   with overflow:hidden on html/body (card-stack.js), and the page
   background — what Safari shows in the status-bar area — takes the
   current card's colour (card-scroll.js, data-tint on photo cards).
   viewport-fit=cover is set in head-meta.php for these pages.
   --toolbar-space is how much of the stage bottom the bar can cover;
   card content is padded clear of it, backgrounds aren't. */
:root {
  --stage-h: 100vh;
  --toolbar-space: env(safe-area-inset-bottom, 0px);
}

@supports (height: 100lvh) {
  :root {
    --stage-h: 100lvh;
    --toolbar-space: calc(100lvh - 100svh + env(safe-area-inset-bottom, 0px));
  }
}

@media (max-width: 991.98px) {
  .card-scroll__section {
    min-height: 100vh;
    min-height: 100svh;
  }

  html.card-stack-on,
  html.card-stack-on body {
    overscroll-behavior: none;   /* no bounce / pull-to-refresh */
    transition: background-color 0.65s cubic-bezier(0.65, 0, 0.35, 1);
  }

  html.card-stack-on #card-stack {
    position: relative;
    z-index: 1;                  /* below the navbar (10) and menu overlay */
    height: var(--stage-h);
    overflow: hidden;
    touch-action: none;          /* card-stack.js owns vertical movement */
  }

  html.card-stack-on .card-scroll__section {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 100%;
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }

  /* Overlays with their own scrolling (mobile menu, Wizualizacje gallery)
     must not hand the gesture over to the page when they hit their end. */
  html.card-stack-on :is(.site-navbar__mobile-menu, .wiz-gallery-modal__panel) {
    overscroll-behavior: contain;
  }

  /* Carousels keep native horizontal swipes; a vertical swipe started on
     them still changes the card (axis decided per gesture in JS). */
  html.card-stack-on [data-carousel-track] {
    touch-action: pan-x;
  }

  /* Content clear of Safari's toolbar; full-bleed backgrounds still fill
     the whole stage. */
  html.card-stack-on .card-scroll__section--standard {
    padding-bottom: calc(var(--toolbar-space) + 32px);
  }

  html.card-stack-on .card-scroll__section--footer .site-footer {
    padding-bottom: calc(var(--toolbar-space) + 16px);
  }

  /* Inside a tall card (scrolled past its top) the content slides under
     the transparent mobile navbar — give it a light frosted backdrop until
     the card is back at its top or the next card starts. */
  html.card-stack-on .site-navbar {
    transition: background-color 0.3s;
  }

  html.card-stack-inside .site-navbar {
    background-color: rgba(255, 255, 255, 0.9);
    -webkit-backdrop-filter: blur(12px);   /* Safari still needs the prefix */
    backdrop-filter: blur(12px);
  }

  /* ---- Navigation dots (right edge) + tall-card progress bar (top),
     both created by card-scroll.js ---- */
  .card-stack-dots {
    position: fixed;
    top: 50%;
    right: 10px;
    z-index: 9;
    display: grid;
    gap: 10px;
    transform: translateY(-50%);
  }

  .card-stack-dots__dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(127, 127, 127, 0.45);
    transition: height 0.3s, background-color 0.3s;
  }

  .card-stack-dots__dot[aria-current="true"] {
    height: 22px;
    background: var(--color-primary);
  }

  .card-stack-progress {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 11;
    width: 100%;
    height: 3px;
    background: var(--color-primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.65s cubic-bezier(0.65, 0, 0.35, 1);
    pointer-events: none;
  }
}

@media (max-width: 991.98px) {
  .card-scroll__section {
    /* 96px = the reference card's eyebrow position on a 390x844 phone
       (80px navbar + breathing room); scales down to 80px on short
       screens (360x640) so the content still fits one card there. */
    --card-top: clamp(80px, 11.4svh, 96px);
    --card-gutter: 32px;
    --card-eyebrow-gap: 8px;
    /* Heading -> content gap: 40px on the reference card at 844px. */
    --card-title-gap: clamp(20px, 4.7svh, 40px);
    --card-heading-size: clamp(28px, 4.3svh, 36px);

    /* Was a shared 24px top padding on every card — that left a 24px strip
       of the card's own white background above every full-bleed card
       (Wybierz piętro, baner, Finansowanie photo/CTA/partner, heroes), so
       their photo/colour never actually covered the full 100vh. Full-bleed
       cards now start at the very top; standard cards get their real
       offset from --card-top below instead. */
    padding-top: 0;
  }

  .card-scroll__section--standard {
    padding-top: var(--card-top);
    justify-content: flex-start;
  }

  /* ---- Section wrappers: no own top/side padding inside a standard card,
     the card itself owns the offset now. ---- */
  .card-scroll__section--standard .home-progress,
  .card-scroll__section--standard .home-apartments,
  .card-scroll__section--standard .home-news,
  .card-scroll__section--standard .finansowanie-block,
  .card-scroll__section--standard .wiz-category {
    padding-top: 0;
    padding-bottom: 0;
  }

  /* Finansowanie steps: the light tint moves from the section onto the
     card itself, so it also covers the --card-top area above the heading;
     its own flex centering (finansowanie.css card-scroll fixes) is replaced
     by the shared top alignment. */
  .card-scroll__section--fin-steps {
    background: var(--color-bg);
  }

  .card-scroll__section--fin-steps .finansowanie-block {
    flex: 0 0 auto;
    justify-content: flex-start;
  }

  /* ---- Side gutter ---- */
  .card-scroll__section--standard .contact-form--mobile {
    padding: 0 var(--card-gutter);
    gap: var(--card-title-gap);
  }

  /* ---- Eyebrow ---- */
  .card-scroll__section--standard :is(
    .home-progress__eyebrow,
    .home-apartments__eyebrow,
    .home-news__eyebrow,
    .contact-form__eyebrow,
    .finansowanie-block__eyebrow,
    .wiz-category__eyebrow
  ) {
    display: block;
    margin: 0 0 var(--card-eyebrow-gap);
    font-family: var(--font-family-base);
    font-weight: var(--fw-bold);
    font-size: 14px;
    line-height: 1.4;
    color: var(--color-primary);
    text-align: left;
  }

  /* ---- Heading ---- */
  .card-scroll__section--standard :is(
    .home-progress__heading,
    .home-apartments__heading,
    .home-news__heading,
    .contact-form__heading,
    .finansowanie-block__heading,
    .wiz-category__heading
  ) {
    margin: 0 0 var(--card-title-gap);
    max-width: none;
    font-family: var(--font-family-base);
    font-weight: var(--fw-bold);
    font-size: var(--card-heading-size);
    line-height: var(--lh-h1);
    color: var(--color-black);
    text-align: left;
  }

  /* Contact form: home.css still carries an older card-scoped 30px /
     margin-top:4px override at higher specificity — matched here so the
     shared heading values above win. The heading's gap to the fields
     comes from the container's own gap. */
  .card-scroll__section--standard .contact-form--mobile .contact-form__heading {
    margin: 0;
    font-size: var(--card-heading-size);
  }

  /* ---- Finansowanie steps: intro left-aligned like every other card,
     the subtitle sits under the heading and takes over the content gap. */
  .card-scroll__section--fin-steps .finansowanie-block__inner {
    gap: 0;
    text-align: left;
  }

  .card-scroll__section--fin-steps .finansowanie-block__heading {
    margin-bottom: 12px;
  }

  .card-scroll__section--fin-steps .finansowanie-steps__list {
    margin-top: var(--card-title-gap);
  }

  /* ---- Aktualności on short phones (<= 700px tall, e.g. 360x640 /
     375x667): the 4-line heading pushed the "Przejdź do aktualności" link
     off-screen by up to 50px. Shorter photo band + 2-line excerpt buys
     the room back; taller phones keep the 100px / 3-line card. */
  @media (max-height: 700px) {
    .card-scroll__section--news .home-news .news-card--mobile .news-card__media {
      height: 60px;
    }

    .card-scroll__section--news .home-news .news-card--mobile .news-card__excerpt {
      -webkit-line-clamp: 2;
    }
  }

  /* ---- Wizualizacje categories: no more right-aligned zig-zag on mobile
     (the controls on the opposite side are hidden below 992px anyway) —
     every category card reads like the rest. Marquee direction still
     alternates (main.js reads .wiz-category--reverse). */
  .card-scroll__section--standard .wiz-category__row {
    flex-direction: column;
    align-items: stretch;
    margin-bottom: 0;
  }

  .card-scroll__section--standard .wiz-category__gallery {
    justify-content: flex-start;
  }
}

/* Eyebrows added for the card layout only — never shown outside a mobile
   card (desktop, or .home-news reused on other pages). */
.home-news__eyebrow,
.finansowanie-block__eyebrow {
  display: none;
}

/* ---- Desktop section indicator (2026-10-10, user request) ----
   Only the dots, no card mechanics: normal page scroll on desktop,
   assets/js/section-dots.js highlights the section on screen. The pill is
   a .glass-surface (glass-surface.css/js, same effect as the navbar);
   .section-dots.glass-surface beats that file's position:relative. */
.section-dots {
  display: none;
}

@media (min-width: 992px) {
  .section-dots.glass-surface {
    position: fixed;
    top: 50%;
    right: 24px;
    z-index: 9;
    display: block;
    padding: 14px 10px;
    /* Exactly half the pill's width (8px dot + 2x10px padding), not 999px:
       glass-surface.js feeds the computed radius straight into its SVG
       displacement map, and an oversized rx on this narrow, tall shape
       warped the map into a rainbow streak along the left edge. */
    border-radius: 14px;
    transform: translateY(-50%);
  }

  .section-dots.glass-surface[hidden] {
    display: none;
  }

  .section-dots__list {
    display: grid;
    justify-items: center;
    gap: 10px;
  }

  .section-dots__dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(127, 127, 127, 0.45);
    cursor: pointer;
    transition: height 0.3s, background-color 0.3s;
  }

  .section-dots__dot:hover {
    background: rgba(127, 127, 127, 0.75);
  }

  .section-dots__dot[aria-current="true"] {
    height: 22px;
    background: var(--color-primary);
  }

  .section-dots__dot:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;
  }
}