/**
 * Mieszkanie — single-apartment design TEMPLATE (Figma "Mieszkanie" node
 * 189:6875 desktop / node 276:8095 mobile, file psb03DxWhlw0g7kvzWHAKt).
 * Per the user's request this is not a page-per-apartment build: mieszkanie.php
 * always renders this full layout, filled from Strapi by ?id= once that
 * content type exists (falls back to the Figma reference's own "Mieszkanie
 * M31" sample data today — see the fallback block in mieszkanie.php).
 *
 * Reused as-is instead of rebuilding: the navbar-overlay-on-hero technique
 * (.page-home in home.css), .btn-underline, contact-form.php for Kontakt,
 * .home-news + news-card.php for Aktualności (same "reuse the home.css
 * classes directly" pattern o-nas.php already uses), and the calendar/
 * activity/luggage/car icons from the home page's feature row.
 *
 * Known simplifications from the Figma reference (deliberate, not
 * oversights — same spirit as the deviations logged for other pages):
 * - The hero has no explicit tint/overlay values from the design context
 *   (this page was built from get_metadata + screenshots, not a full
 *   get_design_context pull, given how large the frame is) — a bottom-up
 *   scrim gradient was added for text legibility instead of guessing an
 *   exact overlay color.
 * - The room breakdown ("Układ pomieszczeń") uses ONE room dataset for
 *   both breakpoints (the more detailed desktop set, with descriptions) —
 *   Figma's mobile frame actually lists a different room set with
 *   different areas (a real Figma inconsistency, not a typo), and nests a
 *   floor-plan thumbnail inside the card grid that this build shows
 *   separately above instead. Given this whole page is explicitly a
 *   template for future DB-driven content, keeping one shared PHP data
 *   source ($pomieszczenia in mieszkanie.php) matters more than matching
 *   Figma's mobile-only variant.
 * - The mobile photo gallery is a single horizontal scroll-snap row of all
 *   6 photos instead of Figma's two separate 3-photo carousels — same
 *   "simplify the mobile carousel" call already made for the apartments/
 *   Aktualności card rows elsewhere.
 * - The "wirtualny spacer" banner's icon buttons (bed / floor-plan /
 *   fullscreen) are baked into the exported photo itself in the Figma file
 *   (it's a flattened screenshot of a 3rd-party tour tool, not separate
 *   layered icon nodes) — rendered as a plain decorative image, no
 *   interactive overlay to rebuild.
 */

/* Same navbar-overlay-on-hero technique as .page-home in home.css. */
@media (min-width: 992px) {
  .page-mieszkanie .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-mieszkanie .site-navbar.site-navbar--stuck {
    position: fixed;
  }
}

/* Mobile companion to the desktop-only overlay rule above (recurring bug
   fixed identically on every other hero page, see the note in
   project-scope.md/memory — was missing here) — without this the navbar
   sits in normal flow above the hero on mobile, pushing it down, instead
   of floating transparently over it. */
@media (max-width: 991.98px) {
  .page-mieszkanie .site-navbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
  }
}

/* ---------- Hero ---------- */
.mieszkanie-hero {
  position: relative;
  overflow: hidden;
}

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

.mieszkanie-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(22, 22, 22, 0.65) 0%, rgba(22, 22, 22, 0.15) 45%, rgba(22, 22, 22, 0) 70%);
}

.mieszkanie-hero__content {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: min(900px, 88%);
  margin: 0;
  text-align: center;
  color: var(--color-white);
}

.mieszkanie-hero__eyebrow,
.mieszkanie-hero__subtitle {
  margin: 0;
  font-family: var(--font-family-base);
  font-weight: var(--fw-medium);
}

.mieszkanie-hero__title {
  margin: 0;
  font-family: var(--font-family-hero-heading);
  font-weight: var(--fw-regular);
  line-height: normal;
}

.mieszkanie-hero__actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

.mieszkanie-hero__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50px;
  font-family: var(--font-family-base);
  font-weight: var(--fw-medium);
  text-decoration: none;
  white-space: nowrap;
}

.mieszkanie-hero__cta--primary {
  background: var(--color-primary);
  color: var(--color-white);
}

.mieszkanie-hero__cta--secondary {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid var(--color-white);
  color: var(--color-white);
}

.mieszkanie-hero--desktop {
  height: 100vh;
}

.mieszkanie-hero--desktop .mieszkanie-hero__content {
  top: 50%;
  transform: translate(-50%, -50%);
}

.mieszkanie-hero--desktop .mieszkanie-hero__eyebrow,
.mieszkanie-hero--desktop .mieszkanie-hero__subtitle {
  font-size: 20px;
}

.mieszkanie-hero--desktop .mieszkanie-hero__title {
  font-size: 56px;
}

.mieszkanie-hero--desktop .mieszkanie-hero__cta {
  padding: 16px 32px;
  font-size: 20px;
}

.mieszkanie-hero--mobile {
  aspect-ratio: 402 / 874;
}

.mieszkanie-hero--mobile .mieszkanie-hero__content {
  /* bottom:24% -> centered (2026-09-11, user request): was drifting to the
     bottom edge instead of sitting in the middle like the desktop variant
     (.mieszkanie-hero--desktop .mieszkanie-hero__content above). top:42%
     (2026-09-11 follow-up, user request) — nudged up a bit from dead-center. */
  top: 42%;
  transform: translate(-50%, -50%);
  gap: 8px;
}

.mieszkanie-hero--mobile .mieszkanie-hero__eyebrow,
.mieszkanie-hero--mobile .mieszkanie-hero__subtitle {
  font-size: 13px;
}

.mieszkanie-hero--mobile .mieszkanie-hero__title {
  font-size: 32px;
}

.mieszkanie-hero--mobile .mieszkanie-hero__actions {
  margin-top: 8px;
}

.mieszkanie-hero--mobile .mieszkanie-hero__cta {
  padding: 12px 20px;
  font-size: 14px;
}

/* Wraps both hero sections + the stats card so the card can be
   position:absolute'd against whichever hero is currently visible
   (desktop/mobile toggle via d-none/d-lg-none) — the wrap's own flow
   height always equals the visible hero's height since the other hero
   variant is display:none and the stats card no longer sits in flow. */
.mieszkanie-hero-wrap {
  position: relative;
}

/* ---------- Stats card (sits fully inside the hero, anchored to its bottom edge) ---------- */
/* Deliberately wider than the standard .section-column (1420px vs
   1320px) — a floating, edge-emphasized card (5 stats in a row on
   desktop) rather than body copy that needs to align with other
   sections' text, same reasoning as the floor-selector/intro cards. Not
   using .section-column here on purpose. */
.mieszkanie-stats {
  /* position:relative + negative margin -> absolute, anchored to the
     hero's bottom edge (2026-09-11, user request) — now that the mobile
     content block is vertically centered (see .mieszkanie-hero--mobile
     .mieszkanie-hero__content above) instead of pinned near the bottom,
     there's room for the card to sit fully inside the hero on mobile too,
     same as the desktop override below already does. */
  position: absolute;
  left: 16px;
  width: calc(100% - 32px);
  bottom: 24px;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--color-border);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.mieszkanie-stats__item {
  background: var(--color-white);
  padding: 20px 16px;
  text-align: center;
  /* Vertically center the value+label pair within the cell (2026-09-11,
     user follow-up) — items just top-aligned in normal flow before, so
     the smaller --status font (see .mieszkanie-stats__value--status)
     produced a visibly shorter text block sitting higher than its
     neighbors instead of lining up with them. Grid's default
     align-items:stretch already gives every item the full row height to
     center within. */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.mieszkanie-stats__item--price {
  grid-column: 1 / -1;
}

.mieszkanie-stats__value {
  margin: 0 0 4px;
  font-family: var(--font-family-base);
  font-weight: var(--fw-bold);
  color: var(--color-black);
  font-size: 24px;
  /* Long single-word status values ("Zarezerwowane") were overflowing
     their grid cell and getting clipped by .mieszkanie-stats' own
     overflow:hidden (2026-09-11, user report — fine for "Wolne"/
     "Sprzedane", broke on the longest status). Letting it wrap to a
     second line keeps it fully visible on both breakpoints instead. */
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Status ("Wolne"/"Zarezerwowane"/"Sprzedane") shares its grid column
   with the shorter stats (Piętro etc.) at the same font-size as those —
   fine for short values, but "Zarezerwowane" was wrapping mid-word at
   24px (2026-09-11, user follow-up: shrink the text instead of wrapping
   it). Smaller size keeps every status value on one line. */
.mieszkanie-stats__value--status {
  font-size: 16px;
}

.mieszkanie-stats__label {
  margin: 0;
  font-family: var(--font-family-base);
  font-weight: var(--fw-regular);
  color: var(--color-secondary);
  font-size: 14px;
}

@media (min-width: 992px) {
  .mieszkanie-stats {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    width: calc(100% - 32px);
    max-width: 1420px;
    /* Normal gap from the hero's bottom edge at 1920x1080 (48px, since
       1080 * 0.04444 = 48) — grows proportionally past that viewport
       height so the card sits further from the screen's bottom edge on
       2K/4K displays instead of hugging it. */
    bottom: max(48px, 4.444vh);
    grid-template-columns: repeat(5, minmax(0, 1fr));
    border-radius: 32px;
  }

  .mieszkanie-stats__item {
    padding: 32px 16px;
  }

  .mieszkanie-stats__item--price {
    grid-column: auto;
  }

  .mieszkanie-stats__value {
    font-size: 38px;
  }

  .mieszkanie-stats__value--status {
    font-size: 22px;
  }

  .mieszkanie-stats__label {
    font-size: 16px;
  }
}

/* ---------- Układ pomieszczeń ---------- */
/* Horizontal max-width/centering/side-padding come from the shared
   .section-column class (see base.css) — only vertical padding stays here. */
.mieszkanie-layout {
  padding-top: 48px;
  padding-bottom: 48px;
}

.mieszkanie-layout__card {
  background: var(--color-bg);
  border-radius: 32px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.mieszkanie-layout__media {
  position: relative;
}

.mieszkanie-layout__media img {
  display: block;
  width: 100%;
  border-radius: 24px;
}

.mieszkanie-layout__caption {
  margin: 12px 0 0;
  font-family: var(--font-family-base);
  font-weight: var(--fw-medium);
  color: var(--color-secondary);
  font-size: 14px;
  text-align: center;
}

.mieszkanie-layout__eyebrow {
  margin: 0 0 8px;
  font-family: var(--font-family-base);
  font-weight: var(--fw-bold);
  color: var(--color-primary);
  font-size: 14px;
  letter-spacing: 0.04em;
}

.mieszkanie-layout__heading {
  margin: 0 0 16px;
  font-family: var(--font-family-base);
  font-weight: var(--fw-bold);
  color: var(--color-black);
  font-size: 28px;
}

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

.mieszkanie-layout__rooms {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}

.mieszkanie-room-card {
  background: var(--color-white);
  border-radius: 20px;
  padding: 16px;
}

.mieszkanie-room-card__name {
  margin: 0 0 8px;
  font-family: var(--font-family-base);
  font-weight: var(--fw-bold);
  color: var(--color-black);
  font-size: 15px;
}

.mieszkanie-room-card__badge {
  display: inline-flex;
  background: var(--color-primary-muted);
  color: var(--color-white);
  border-radius: 20px;
  padding: 4px 12px;
  font-family: var(--font-family-base);
  font-weight: var(--fw-bold);
  font-size: 13px;
}

.mieszkanie-room-card__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) {
  .mieszkanie-layout__card {
    flex-direction: row;
    align-items: center;
    padding: 48px;
    gap: 48px;
  }

  .mieszkanie-layout__media,
  .mieszkanie-layout__content {
    flex: 1 1 0;
    min-width: 0;
  }

  .mieszkanie-layout__heading {
    font-size: 32px;
  }

  .mieszkanie-layout__rooms {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ---------- Galeria mieszkania ---------- */
/* Horizontal max-width/centering/side-padding come from the shared
   .section-column class (see base.css) — only vertical padding stays
   here. Unlike the apartments/news/gallery carousels elsewhere, this one
   never bleeds to the true viewport edge (mobile scroll just stays within
   the padded column), so no 100vw/100% math is needed here at all. */
.mieszkanie-gallery {
  padding-bottom: 48px;
}

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

.mieszkanie-gallery__heading {
  margin: 0 0 4px;
  font-family: var(--font-family-base);
  font-weight: var(--fw-bold);
  color: var(--color-black);
  font-size: 28px;
}

.mieszkanie-gallery__subtitle {
  margin: 0;
  font-family: var(--font-family-base);
  font-weight: var(--fw-regular);
  color: var(--color-secondary);
  font-size: 14px;
}

.mieszkanie-gallery__grid {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.mieszkanie-gallery__grid::-webkit-scrollbar {
  display: none;
}

.mieszkanie-gallery__photo {
  display: block;
  flex-shrink: 0;
  scroll-snap-align: start;
  width: 280px;
  aspect-ratio: 620 / 349;
  object-fit: cover;
  border-radius: 20px;
}

@media (min-width: 992px) {
  .mieszkanie-gallery__heading {
    font-size: 32px;
  }

  .mieszkanie-gallery__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    overflow: visible;
  }

  .mieszkanie-gallery__photo {
    width: 100%;
    border-radius: 24px;
  }
}

/* ---------- Wirtualny spacer banner ---------- */
.mieszkanie-tour {
  line-height: 0;
}

.mieszkanie-tour__photo {
  display: block;
  width: 100%;
  object-fit: cover;
}

/* ---------- Cechy i udogodnienia ---------- */
/* Horizontal side-padding used to be fixed 32px here on the OUTER section,
   with .mieszkanie-features__grid also capped+centered at max-width:1320
   inside that already-padded area — the same double-padding architecture
   flaw fixed on .contact-form--desktop (components.css), just with a
   fixed 32px instead of a clamp(). Padding now stays vertical-only here;
   .section-column (applied to the grid in mieszkanie.php) owns the
   horizontal column. */
.mieszkanie-features {
  background: var(--color-primary);
  padding-top: 48px;
  padding-bottom: 48px;
  text-align: center;
}

.mieszkanie-features__eyebrow {
  margin: 0 0 8px;
  font-family: var(--font-family-base);
  font-weight: var(--fw-bold);
  color: var(--color-white);
  font-size: 14px;
  letter-spacing: 0.04em;
}

.mieszkanie-features__heading {
  margin: 0 0 32px;
  font-family: var(--font-family-base);
  font-weight: var(--fw-bold);
  color: var(--color-white);
  font-size: 28px;
}

.mieszkanie-features__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.mieszkanie-features__card {
  background: var(--color-white);
  border-radius: 24px;
  padding: 24px 16px;
}

.mieszkanie-features__icon {
  display: block;
  width: auto;
  height: 36px;
  margin: 0 auto 16px;
}

.mieszkanie-features__title {
  margin: 0;
  font-family: var(--font-family-base);
  font-weight: var(--fw-bold);
  color: var(--color-black);
  font-size: 15px;
}

.mieszkanie-features__desc {
  display: none;
}

@media (min-width: 992px) {
  .mieszkanie-features__heading {
    font-size: 36px;
  }

  .mieszkanie-features__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
  }

  .mieszkanie-features__card {
    padding: 32px 24px;
  }

  .mieszkanie-features__title {
    font-size: 20px;
  }

  .mieszkanie-features__desc {
    display: block;
    margin: 8px 0 0;
    font-family: var(--font-family-base);
    font-weight: var(--fw-regular);
    color: var(--color-secondary);
    font-size: 14px;
  }
}

/* "Nie znaleziono" state when ?id= has no matching published apartment —
   same layout treatment as .aktualnosc-article__missing (aktualnosc.css). */
.mieszkanie-missing {
  padding-top: 64px;
  padding-bottom: 64px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

/* Multi-paragraph apartment description from the panel (2026-10-10):
   tighter gap between paragraphs than after the last one. */
.mieszkanie-layout__body + .mieszkanie-layout__body {
  margin-top: -12px;
}

.mieszkanie-layout__body {
  line-height: 1.6;
}