/**
 * Wizualizacje (Figma "Wizualizacje" node 176:7433 desktop /
 * "Wizualizacje-mobile" node 270:6627, file psb03DxWhlw0g7kvzWHAKt).
 * Page-specific sections only used on wizualizacje.php — same split as
 * home.css / o-nas.css.
 *
 * Known simplification (deliberate, not an oversight): Figma's desktop
 * layout is a hand-placed staggered/parallax masonry — 8 groups of 3
 * photos each at fixed pixel offsets (some intentionally bleeding off the
 * left/right edges) with heading text woven into the gaps between them.
 * That layout has no responsive intent (fixed px offsets sized for one
 * 1920px canvas) and would be unmaintainable to reproduce literally.
 * Rebuilt instead as 4 category sections (eyebrow + heading + horizontal
 * carousel), reusing the exact carousel technique already established for
 * apartments/Aktualności/O nas (.carousel-controls/.carousel-btn +
 * scroll-snap + right-edge bleed). Content model (4 categories: Wizualizacje
 * / Wnętrza / Łazienki / Zewnętrze, each its own eyebrow+heading+photos)
 * comes from Figma's own MOBILE frame, which already expresses the same
 * intent far more cleanly than desktop's 5 overlapping heading blocks +
 * unlabeled floating category chips (176:8185 etc., also skipped — their
 * purpose was ambiguous and mobile has no equivalent). Desktop's own two
 * large intro headings (176:7451 / 176:7454) are kept as-is for the
 * photo-less intro at the top of the page, since Figma's desktop frame has
 * no hero photo at all (unlike every other page) — mobile does have one
 * (274:6705), also kept as-is.
 *
 * Known Figma inconsistency, encoded as-is: gallery photos have square
 * corners in the desktop frame but 16px-rounded corners in the mobile
 * frame — not reconciled, matches each frame literally.
 */

/* ---------- Mobile hero (no desktop equivalent) ---------- */
/* 100vh + navbar overlay (2026-09-08, user request — mobile-only work).
   Was aspect-ratio:402/520 with the photo as a normal-flow <img> that just
   happened to fill that box; now the section itself is a real 100vh/100dvh
   viewport-height box (100vh first as the fallback for browsers without
   dvh support, 100dvh second to win where it's supported) and the photo is
   a true position:absolute background layer instead. This section is now
   also a pagePiling card (.card-scroll__section--hero in home.css gives it
   flex:1 to fill the card), so the explicit height here is belt-and-
   suspenders rather than load-bearing — harmless either way. */
.wiz-hero {
  overflow: hidden;
  height: 100vh;
  height: 100dvh;
}

.wiz-hero__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wiz-hero__tint {
  position: absolute;
  inset: 0;
  background: rgba(64, 81, 59, 0.55);
}

.wiz-hero__content {
  position: absolute;
  left: 50%;
  top: 34%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 88%;
  margin: 0;
  font-family: var(--font-family-base);
  font-weight: var(--fw-bold);
  color: var(--color-white);
  text-align: center;
}

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

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

/* Navbar floats transparently over the hero photo instead of sitting in
   normal flow above it (2026-09-08, user request) — mobile-only here,
   the OPPOSITE scoping from every other page's navbar-overlay rule (those
   are desktop-only, see the note on .page-home .site-navbar in home.css)
   since this page's hero itself only exists on mobile (no desktop photo
   hero, see the file header comment above). No sticky-after-hero
   companion wired up yet (unlike the other overlay pages) — the navbar
   will scroll away with the page past this hero for now; add one the same
   way as .page-finansowanie's if that's wanted later. */
@media (max-width: 991.98px) {
  .page-wizualizacje .site-navbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
  }
}

/* ---------- Desktop intro (no photo) ---------- */
/* Horizontal max-width/centering/side-padding come from the shared
   .section-column class (see base.css) — only vertical padding + the
   flex layout stay here. */
.wiz-intro {
  padding-top: 64px;
  padding-bottom: 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.wiz-intro__heading {
  margin: 0;
  max-width: 700px;
  font-family: var(--font-family-base);
  font-weight: var(--fw-bold);
  color: var(--color-primary);
  font-size: 42px;
  line-height: normal;
}

.wiz-intro__heading--right {
  align-self: flex-end;
  text-align: right;
}

/* ---------- Category galleries ---------- */
/* Not capped/padded itself — .wiz-category__row gets .section-column
   directly (applied in wizualizacje.php) for the heading, and
   .wiz-category__track needs a genuinely full-width containing block for
   its own 100%-based left inset (see the note there). */
.wiz-category {
  padding-top: 32px;
  padding-bottom: 48px;
}

.wiz-category__row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}

/* Trimmed to fit one mobile card-scroll screen (2026-10-05, user report:
   the gallery button was getting clipped on shorter phones) — the photo's
   fixed 480/300 aspect-ratio rendered a ~300px-tall band regardless of
   screen height, by far the biggest single contributor. wizualizacje.css
   is only ever used on this one page, so no extra scoping precaution
   needed beyond the existing breakpoint. */
@media (max-width: 991.98px) {
  .wiz-category {
    padding-top: 16px;
    padding-bottom: 16px;
  }

  .wiz-category__row {
    margin-bottom: 8px;
  }

  /* Responsive photo band (2026-10-05, user request: "wszystkie elementy
     w kartach mają być responsywne"). Was a fixed 280x130px, which left
     the bottom half of the card empty on taller phones. Width now follows
     the screen width and height follows the screen height, independently,
     with object-fit:cover cropping. The marquee JS re-measures on resize, so
     viewport-relative sizes are safe there.
     !important: the unconditional `.wiz-category__photo { width:480px;
     aspect-ratio:480/300 }` rule sits later in this same file (same
     specificity, later source order would otherwise win over this
     media-query block — same reason .wiz-category__gallery below needs
     it too). */
  .wiz-category__photo {
    width: clamp(240px, 78vw, 360px) !important;
    height: clamp(140px, 36svh, 340px);
    aspect-ratio: auto !important;
  }

  /* !important: the unconditional `.wiz-category__gallery { margin-top:
     24px }` rule sits later in this same file (same specificity, later
     source order would otherwise win over this media-query block). */
  .wiz-category__gallery {
    margin-top: clamp(8px, 2svh, 20px) !important;
  }

  /* ---- Card layout overrides, this page only (2026-10-05, user request:
     "dodaj jeszcze margines od górnej części ekranu"). These redefine the
     shared card-scroll.css variables. The .page-wizualizacje prefix wins over
     card-scroll.css on specificity, even though that file is imported later.
     Home/Finansowanie still use the shared defaults. ---- */
  .page-wizualizacje .card-scroll__section {
    /* Bigger gap below the navbar (its bottom edge is at ~64px): 112px on a
       640px-tall screen up to 136px on tall phones (was 80-96px). */
    --card-top: clamp(112px, 15svh, 136px);
    /* Heading scales with BOTH width and height: the line count depends
       on width, and the available room depends on height. */
    --card-heading-size: clamp(24px, min(8vw, 4svh), 34px);
    --card-title-gap: clamp(16px, 3.5svh, 36px);
  }

  /* Hero: fixed 36px/20px type -> scales with the screen too. */
  .page-wizualizacje .wiz-hero__heading {
    font-size: clamp(28px, min(9vw, 5svh), 40px);
  }

  .page-wizualizacje .wiz-hero__eyebrow {
    font-size: clamp(16px, 4.6vw, 20px);
  }

  /* Aktualności card: the bigger --card-top above has to be paid for here,
     so the news card's own sizes scale with screen height. Scoped through
     this page + the news card. The same .home-news/.news-card markup also
     renders on Home and several other pages, which stay as they are. */
  .page-wizualizacje .card-scroll__section--news .home-news .news-card--mobile {
    min-height: 0;
  }

  .page-wizualizacje .card-scroll__section--news .home-news .news-card--mobile .news-card__media {
    height: clamp(56px, 12svh, 140px);
  }

  .page-wizualizacje .card-scroll__section--news .home-news .news-card--mobile .news-card__body {
    padding: clamp(12px, 2svh, 20px);
    gap: clamp(4px, 1svh, 12px);
  }

  .page-wizualizacje .card-scroll__section--news .home-news .news-card--mobile .news-card__title {
    font-size: clamp(16px, 2.6svh, 20px);
  }

  .page-wizualizacje .card-scroll__section--news .home-news .news-card--mobile .news-card__date-day {
    font-size: clamp(16px, 2.6svh, 20px);
  }

  .page-wizualizacje .card-scroll__section--news .home-news__footer {
    margin-top: clamp(8px, 2svh, 20px);
  }
}

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

.wiz-category__heading {
  margin: 0;
  max-width: 620px;
  font-family: var(--font-family-base);
  font-weight: var(--fw-bold);
  color: var(--color-black);
  font-size: 24px;
}

.wiz-category--reverse .wiz-category__row {
  flex-direction: row-reverse;
}

.wiz-category--reverse .wiz-category__eyebrow,
.wiz-category--reverse .wiz-category__heading {
  text-align: right;
}

/* Auto-scrolling marquee (2026-09-01, user request — was a manual
   scroll-snap carousel, then a pure-CSS-@keyframes marquee before this).
   .wiz-category__viewport just clips the row — no left inset here on
   purpose, so the photo set sits flush with the true screen edge at
   load/offset-0, matching the heading row's .section-column alignment only
   incidentally, not by shared padding. The inner .wiz-category__track is
   driven entirely by JS (see initWizMarquee in main.js): it holds the
   photo set TWICE (rendered twice in wizualizacje.php, second copy
   aria-hidden) wrapped in .wiz-category__item cells, positioned via
   `transform: translateX()` recomputed every animation frame. JS owns this
   instead of a CSS @keyframes loop specifically so the restored prev/next
   buttons can nudge the same position value the autoplay loop reads/writes
   — the two would fight each other if autoplay were a separate CSS
   animation. Direction (left vs. right) is read off the existing
   .wiz-category--reverse modifier (already alternates every other category
   for the heading row) rather than a separate data attribute. */
.wiz-category__viewport {
  overflow: hidden;
}

.wiz-category__track {
  display: flex;
  width: max-content;
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .wiz-category__track {
    transform: none !important;
  }
}

/* Each photo lives in its own clipped cell — margin-right is the visual
   gap between cells. Hover-zoom scales the PHOTO, not the cell, and the
   cell's own overflow:hidden crops the excess growth instead of letting it
   bleed into the neighboring cell's margin (that bleed-into-the-gap look
   was the bug in the first version of this hover effect). */
.wiz-category__item {
  flex-shrink: 0;
  margin-right: 24px;
  overflow: hidden;
  border-radius: 16px;
}

.wiz-category__photo {
  display: block;
  width: 480px;
  aspect-ratio: 480 / 300;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.wiz-category__item:hover .wiz-category__photo {
  transform: scale(1.08);
}

@media (min-width: 992px) {
  .wiz-category__heading {
    font-size: 42px;
  }

  .wiz-category__item {
    border-radius: 0;
  }

  .wiz-category__photo {
    width: 630px;
    aspect-ratio: 630 / 420;
  }
}

/* ---------- Gallery button + modal ---------- */
.wiz-category__gallery {
  margin-top: 24px;
}

.wiz-category--reverse .wiz-category__gallery {
  display: flex;
  justify-content: flex-end;
}

.wiz-gallery-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.wiz-gallery-modal[hidden] {
  display: none;
}

.wiz-gallery-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(22, 22, 22, 0.72);
}

.wiz-gallery-modal__panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 960px;
  max-height: 88vh;
  overflow-y: auto;
  background: var(--color-white);
  border-radius: 16px;
  padding: 56px 24px 32px;
}

.wiz-gallery-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: var(--color-bg);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.wiz-gallery-modal__eyebrow {
  margin: 0 0 20px;
  font-family: var(--font-family-base);
  font-weight: var(--fw-bold);
  color: var(--color-primary);
  font-size: 20px;
}

.wiz-gallery-modal__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.wiz-gallery-modal__grid img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 12px;
}

@media (min-width: 768px) {
  .wiz-gallery-modal__grid {
    grid-template-columns: 1fr 1fr;
  }
}