/**
 * Reusable component classes derived from Figma (navbar, cards, buttons,
 * apartment listing tiles, etc.). Build these on top of the variables in
 * tokens.css rather than hardcoding colors/fonts/spacing here.
 */

/* Scroll-cue icon, centered at a hero's bottom edge (2026-09-06, user
   request) — vanilla CSS/HTML port of a React "MouseIcon" component (was
   built on motion/react, hover-triggered draw-in + wheel bounce). Adapted
   for this passive/decorative placement instead of a 1:1 port: the pill
   outline still draws in once (stroke-dasharray/pathLength, matching the
   original's pathLength 0->1 flourish) when the hero loads, but the inner
   "wheel" now loops a drop-and-fade forever — the standard "scroll down"
   cue, which fits bottom-of-hero placement better than a hover-only replay.
   Shared across every hero that wants it (currently o-nas.php +
   aktualnosci.php, both breakpoints) — keep it here, not per-page CSS. */
.hero-scroll-icon {
  position: absolute;
  left: 50%;
  bottom: 32px;
  transform: translateX(-50%);
  z-index: 2;
  color: var(--color-white);
  pointer-events: none;
}

.hero-scroll-icon__svg {
  display: block;
  width: 36px;
  height: 36px;
}

.hero-scroll-icon__body {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: hero-scroll-icon-draw 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards;
}

.hero-scroll-icon__wheel {
  transform-origin: center;
  opacity: 0;
  animation: hero-scroll-icon-wheel 1.6s ease-in-out 0.9s infinite;
}

@keyframes hero-scroll-icon-draw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes hero-scroll-icon-wheel {
  0% {
    transform: translateY(0);
    opacity: 1;
  }

  100% {
    transform: translateY(8px);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-scroll-icon__body {
    stroke-dashoffset: 0;
    animation: none;
  }

  .hero-scroll-icon__wheel {
    animation: none;
    opacity: 1;
  }
}

/* Hero social-icons row (Facebook/Instagram), extracted from
   aktualnosci-hero__socials (2026-09-06) when the user asked to reuse the
   same paragraph+icons block on the o-nas hero — now shared since it's
   identical on both pages instead of duplicated per-page CSS. */
.hero-socials {
  display: flex;
  align-items: center;
  gap: 16px;
}

.hero-socials img {
  display: block;
  width: auto;
  height: 36px;
}

/* Button/Underline (Figma node 323:7) — text link with an underline below
   the label. Font size crosses tiers between breakpoints (mobile = "Body
   Small" 13px, desktop = "Body Regular Medium" 20px) rather than following
   one of the paired --fs-body-* tokens, so it's hardcoded here rather than
   reusing those. Simplified from the Figma reference: the original has
   redundant nested padding wrappers (button-row + Text Container) that
   don't translate to a real click target — collapsed into one padded
   element.
   Padding raised from 16px to 24px (2026-08-25, user feedback: the
   component read as too narrow/cramped around the text) — kept as one
   shared value across both axes and both breakpoints for a simple, even
   click target, EXCEPT the bottom edge (8px, not 24px): the user asked
   for the underline sitting closer to the text right after, so the label
   keeps its full 24px top/left/right but a shorter bottom pulls the
   underline up nearer the baseline instead of adding a separate negative
   margin on the underline itself.
   Hover-expand restored (2026-08-25, user request: default ~40% width,
   expands to the label's full width on hover/focus) — a previous attempt
   at this exact effect (2026-08-10) was abandoned because the underline
   element has no text content of its own, so `width: max-content` always
   resolved to 0 in every real browser. Using a percentage instead avoids
   that: the underline is a flex item of .btn-underline, which is itself
   sized to fit its widest child (the label) since it's inline-flex, so
   `width: 40%` resolves against that real, non-zero size.
   Underline has zero horizontal margin (2026-08-25 follow-up, user
   feedback: it shouldn't inset with the label's own left/right padding at
   all) — it's a flex item of .btn-underline directly, a sibling of the
   label, not a child of it, so its width already resolves against the
   whole button's box regardless of the label's own padding; only the
   margin was making it appear inset, and hover now expands to a full
   100%, not calc(100% - padding). */
.btn-underline {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  text-decoration: none;
}

.btn-underline__label {
  padding: 24px 24px 8px;
  font-family: var(--font-family-base);
  font-weight: var(--fw-medium);
  color: var(--color-primary);
  font-size: 13px; /* mobile: Figma "Body Small" style */
  line-height: normal;
  white-space: nowrap;
}

.btn-underline__underline {
  height: 2px;
  background-color: var(--color-primary);
  width: 40%;
  margin: 0;
  transition: width 0.25s ease;
}

.btn-underline:hover .btn-underline__underline,
.btn-underline:focus-visible .btn-underline__underline {
  width: 100%;
}

@media (min-width: 992px) {
  .btn-underline__label {
    padding: 24px 24px 8px;
    font-size: 20px; /* desktop: Figma "Body Regular Medium" style */
  }
}

/* Karta mieszkania (Figma node 340:6732) — desktop and mobile are distinct
   layouts, not a fluid reflow of the same markup (per project-scope.md).
   Both variants are rendered in the DOM and toggled with Bootstrap's
   d-none/d-lg-* utilities (see src/partials/apartment-card.php) instead of
   duplicating logic in JS. Absolute pixel positions from the Figma export
   are reinterpreted as flex/grid layout here — they don't hold up as fixed
   coordinates outside a 447px-wide mockup frame. */
.apartment-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  overflow: hidden;
}

.apartment-card__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-primary);
  border-radius: 12px;
  padding: 6px 12px;
  font-family: var(--font-family-base);
  font-weight: var(--fw-bold);
  font-size: 14px;
  color: var(--color-primary);
  white-space: nowrap;
}

.apartment-card__media {
  position: relative;
}

.apartment-card__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Desktop hover swap: photo -> floor plan (Figma "Hover" state, node 340:6733) */
.apartment-card--desktop .apartment-card__photo--rzut {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.apartment-card--desktop .apartment-card__photo {
  transition: opacity 0.25s ease;
}

.apartment-card--desktop:hover .apartment-card__photo--rzut {
  opacity: 1;
}

.apartment-card--desktop:hover .apartment-card__photo:not(.apartment-card__photo--rzut) {
  opacity: 0;
}

/* Desktop variant */
.apartment-card--desktop {
  border-radius: 50px;
  max-width: 447px;
}

.apartment-card--desktop .apartment-card__media {
  aspect-ratio: 445 / 278;
}

.apartment-card--desktop .apartment-card__body {
  padding: 24px 37px 32px;
}

.apartment-card--desktop .apartment-card__block-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.apartment-card--desktop .apartment-card__block,
.apartment-card--desktop .apartment-card__title {
  margin: 0;
  font-family: var(--font-family-base);
  font-weight: var(--fw-bold);
  font-size: 20px;
  color: var(--color-black);
}

.apartment-card--desktop .apartment-card__title {
  margin-top: 4px;
}

.apartment-card--desktop .apartment-card__stats {
  display: flex;
  gap: 40px;
  margin-top: 20px;
  font-family: var(--font-family-base);
  font-weight: var(--fw-bold);
  font-size: 20px;
  color: var(--color-primary-muted);
}

.apartment-card--desktop .apartment-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 24px;
}

.apartment-card--desktop .apartment-card__price-total {
  margin: 0;
  font-family: var(--font-family-base);
  font-weight: var(--fw-bold);
  font-size: 24px;
  color: var(--color-black);
}

.apartment-card--desktop .apartment-card__price-m2 {
  margin: 0;
  font-family: var(--font-family-base);
  font-weight: var(--fw-bold);
  font-size: 20px;
  color: var(--color-primary);
}

/* Mobile variant */
.apartment-card--mobile {
  border-radius: 32px;
  width: 100%;
  max-width: 297px;
}

.apartment-card--mobile .apartment-card__media {
  aspect-ratio: 4 / 3;
}

.apartment-card--mobile .apartment-card__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
}

.apartment-card--mobile .apartment-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.apartment-card--mobile .apartment-card__title {
  margin: 0;
  font-family: var(--font-family-base);
  font-weight: var(--fw-bold);
  font-size: 20px;
  color: var(--color-black);
}

.apartment-card--mobile .apartment-card__block {
  margin: 4px 0 0;
  font-family: var(--font-family-base);
  font-weight: var(--fw-bold);
  font-size: 14px;
  color: var(--color-primary);
}

.apartment-card--mobile .apartment-card__stats-grid {
  display: flex;
  gap: 24px;
}

.apartment-card--mobile .apartment-card__stat-label {
  display: block;
  font-family: var(--font-family-base);
  font-weight: var(--fw-medium);
  font-size: 13px;
  color: var(--color-secondary);
}

.apartment-card--mobile .apartment-card__stat-value {
  display: block;
  margin-top: 2px;
  font-family: var(--font-family-base);
  font-weight: var(--fw-bold);
  font-size: 14px;
  color: var(--color-black);
}

.apartment-card--mobile .apartment-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 8px;
  border-top: 1px solid var(--color-bg);
}

.apartment-card--mobile .apartment-card__price {
  margin: 0;
  font-family: var(--font-family-base);
  font-weight: var(--fw-bold);
  font-size: 20px;
  color: var(--color-primary);
}

/* News Card (Figma node 362:51) — same desktop/mobile-are-different-layouts
   pattern as Karta mieszkania above. */
.news-card {
  background: var(--color-bg);
  overflow: hidden;
}

.news-card__media {
  position: relative;
}

.news-card__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Desktop */
.news-card--desktop {
  border-radius: 50px;
  max-width: 447px;
}

.news-card--desktop .news-card__media {
  aspect-ratio: 447 / 295;
}

.news-card--desktop .news-card__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 26px 37px 34px;
}

.news-card--desktop .news-card__title {
  margin: 0;
  font-family: var(--font-family-base);
  font-weight: var(--fw-bold);
  font-size: 24px;
  color: var(--color-black);
}

.news-card--desktop .news-card__excerpt {
  margin: 0;
  font-family: var(--font-family-base);
  font-weight: var(--fw-regular);
  font-size: 16px;
  color: var(--color-primary);
}

.news-card--desktop .news-card__footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-top: auto;
}

.news-card--desktop .news-card__date-day {
  margin: 0;
  font-family: var(--font-family-base);
  font-weight: var(--fw-bold);
  font-size: 24px;
  color: var(--color-black);
}

.news-card--desktop .news-card__date-year {
  margin: 0;
  font-family: var(--font-family-base);
  font-weight: var(--fw-bold);
  font-size: 20px;
  color: var(--color-primary);
}

/* Mobile */
.news-card--mobile {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 280px;
  min-height: 520px; /* Figma uses a fixed 520px height; min-height instead so longer excerpts don't clip the card */
  border-radius: 24px;
}

.news-card--mobile .news-card__media {
  height: 180px;
  flex-shrink: 0;
}

.news-card--mobile .news-card__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
}

.news-card--mobile .news-card__title {
  margin: 0;
  font-family: var(--font-family-base);
  font-weight: var(--fw-bold);
  font-size: 20px;
  color: var(--color-black);
}

.news-card--mobile .news-card__excerpt {
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: var(--font-family-base);
  font-weight: var(--fw-bold);
  font-size: 14px;
  color: var(--color-primary);
}

.news-card--mobile .news-card__footer {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: auto;
}

.news-card--mobile .news-card__date-day {
  margin: 0;
  font-family: var(--font-family-base);
  font-weight: var(--fw-bold);
  font-size: 20px;
  color: var(--color-black);
}

.news-card--mobile .news-card__date-year {
  margin: 0;
  font-family: var(--font-family-base);
  font-weight: var(--fw-bold);
  font-size: 14px;
  color: var(--color-primary);
}

/* Navbar (Figma node 376:172). Desktop: centered logo above a translucent
   pill bar with the link list + Kontakt CTA. Mobile: compact row (logo,
   Kontakt CTA, hamburger) that expands a link panel via Bootstrap's
   collapse JS. Figma only shows the mobile closed state — the expanded
   panel's look (background/padding below) is our own design, not lifted
   from a frame. */
.site-navbar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
}

.site-navbar__logo {
  display: block;
  height: 48px;
  width: auto;
}

.site-navbar__bar {
  width: 100%;
  max-width: 1176px;
}

.site-navbar__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  background: rgba(245, 245, 247, 0.4);
  border-radius: 24px;
  padding: 8px 12px;
}

.site-navbar__links-collapse {
  order: 2;
  flex-basis: 100%;
}

.site-navbar__links {
  display: flex;
  flex-direction: column;
  gap: 4px;
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}

.site-navbar__link {
  display: block;
  padding: 8px 4px;
  font-family: var(--font-family-base);
  font-weight: var(--fw-bold);
  font-size: 16px;
  color: var(--color-black);
  text-decoration: none;
  text-transform: uppercase;
  transition: color 0.15s ease;
}

.site-navbar__link.active,
.site-navbar__link:hover {
  color: var(--color-primary);
}

.site-navbar__actions {
  order: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.site-navbar__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border-radius: 20px;
  background: var(--color-primary);
  font-family: var(--font-family-base);
  font-weight: var(--fw-medium);
  font-size: 13px;
  color: var(--color-white);
  text-decoration: none;
  white-space: nowrap;
}

.site-navbar__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border: none;
  border-radius: 8px;
  background: rgba(245, 245, 247, 0.4);
}

/* "Sticky after hero" scroll behavior (2026-08-25, user request): main.js
   toggles .site-navbar--stuck via IntersectionObserver once a page's hero
   has fully scrolled above the viewport. Keeps today's exact look (same
   translucent pill background, no color changes — a "liquid glass" visual
   redesign is a separate, later request) and only changes position, animated
   in with a slide-down so it doesn't just pop into place. The actual
   `position: fixed` override lives per-page (each page's own
   ".page-X .site-navbar" media-query block) at higher selector specificity
   than this class alone could reach, since every page already sets
   `position: absolute` there at the same specificity components.css's load
   order would otherwise lose to — see e.g. .page-home in home.css. */
@keyframes site-navbar-slide-in {
  from {
    transform: translateY(-100%);
  }

  to {
    transform: translateY(0);
  }
}

@media (min-width: 992px) {
  /* Only `animation` here (no `position` — nothing else on .site-navbar
     sets `animation`, so this is safe from the specificity fight the
     position:fixed override needs to win per-page instead). */
  .site-navbar--stuck {
    animation: site-navbar-slide-in 0.3s ease forwards;
  }

  /* Stuck navbar keeps the logo, at half size (2026-10-18, user request —
     briefly hidden the same day, then asked back smaller): 96px → 48px. */
  .site-navbar--stuck .site-navbar__logo {
    height: 48px;
  }
}

/* Clicks through the navbar's empty parts (2026-10-18, user request): the
   desktop header is a full-width box (padding, space beside the pill)
   floating over the page, and its transparent areas used to swallow
   clicks meant for content underneath. The header and the bar pass
   pointer events through; only the visible controls take them. */
@media (min-width: 992px) {
  .site-navbar,
  .site-navbar__bar,
  .site-navbar__actions {
    pointer-events: none;
  }

  .site-navbar__brand,
  .site-navbar__row,
  .site-navbar__cta {
    pointer-events: auto;
  }
}

@media (min-width: 992px) {
  .site-navbar {
    padding: 24px 20px;
  }

  .site-navbar__logo {
    height: 96px;
  }

  .site-navbar__row {
    flex-wrap: nowrap;
    justify-content: space-between;
    border-radius: 50px;
    padding: 15px 20px;
  }

  .site-navbar__links-collapse {
    order: 1;
    flex-basis: auto;
    /* Always visible at this breakpoint — Bootstrap's collapse JS never
       fires since the toggle button is hidden here, but the collapsed
       state's default display:none must still be overridden. */
    display: block !important;
  }

  .site-navbar__links {
    flex-direction: row;
    align-items: center;
    gap: 40px;
    margin: 0;
  }

  .site-navbar__link {
    padding: 0;
    font-size: 20px;
    text-transform: none;
  }

  .site-navbar__actions {
    order: 2;
    margin-left: 0;
  }

  .site-navbar__cta {
    padding: 14px 24px;
    border-radius: 50px;
    font-size: 20px;
  }
}

/* Footer (Figma node 395:111) */
.site-footer {
  background: var(--color-primary);
  color: var(--color-white);
}

/* Horizontal max-width/centering/side-padding come from the shared
   .section-column class — applied to .site-footer__main and
   .site-footer__bottom individually (not .site-footer__inner itself),
   because the two .site-footer__divider <hr>s sit between/around them and
   are meant to be wider than the content column (see .site-footer__divider
   below) — this used to be .site-footer__inner's own hand-rolled
   1920px/80px, which drifted noticeably wider/looser than every other
   section's 1320px/32px column (see memory/project-scope.md, "spacing
   inconsistency audit"). Mobile keeps its own max-width/padding below,
   unrelated to this column system (matches the Figma mobile frame width,
   not touched here). */
.site-footer__inner {
  margin: 0 auto;
}

.site-footer__inner:not(.site-footer__inner--mobile) {
  padding-top: 40px;
  padding-bottom: 40px;
}

.site-footer__inner--mobile {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 48px 24px;
  max-width: 402px;
}

.site-footer__logo {
  display: block;
  height: 64px;
  width: auto;
  margin: 0 auto;
}

/* Desktop's logo is the full tree+wordmark lockup (see the note in
   footer.php), a much taller/squarer asset than the text-only wordmark —
   64px would render it as a tiny badge. 210px keeps the wordmark portion
   inside it visually close to the old 64px-tall text-only logo, scaled up
   proportionally with the tree emblem now sitting above it. It's also no
   longer centered on its own — it's the first item in the `.site-footer__main`
   row, sitting left of the columns (confirmed against
   Screeny/footer-dektop.png), so the mobile-only auto-centering is undone
   here too. */
.site-footer__inner:not(.site-footer__inner--mobile) .site-footer__logo {
  height: 210px;
  margin: 0;
  flex-shrink: 0;
}

/* Deliberately NOT on .section-column like the content around it — the
   divider lines are wider than the content column, inset a fixed 50px from
   the screen edge instead (per user request, 2026-08-24), not tied to the
   1320px column or its 32px gutter. */
.site-footer__divider {
  margin: 24px 50px;
  border: none;
  border-top: 1px solid #C1C7CD;
  opacity: 1;
}

/* Logo + the 3 columns (Nawigacja/Kontakt/Social Media) as direct flex
   children of one row, between the two dividers — matches
   Screeny/footer-dektop.png for composition (logo left, columns to the
   right), but spread with justify-content:space-between (not a fixed gap)
   per user feedback: a fixed gap clustered everything on the left with a
   large empty void on the right at wider viewports, unlike the bottom
   copyright row which already spans edge to edge. gap is kept as a floor
   so columns never crowd each other on narrower desktop widths. */
.site-footer__main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

.site-footer__column {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.site-footer__heading {
  margin: 0;
  font-family: var(--font-family-base);
  font-weight: var(--fw-bold);
  font-size: 20px;
  color: var(--color-white);
}

.site-footer__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer__list a {
  font-family: var(--font-family-base);
  font-weight: var(--fw-medium);
  font-size: 20px;
  color: var(--color-white);
  text-decoration: none;
}

.site-footer__social {
  display: flex;
  align-items: center;
  gap: 16px;
}

.site-footer__social img {
  display: block;
  width: auto;
  height: 36px;
}

.site-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
}

.site-footer__bottom p {
  margin: 0;
  font-family: var(--font-family-base);
  font-weight: var(--fw-regular);
  font-size: 16px;
  color: var(--color-white);
}

.site-footer__bottom a {
  font-family: var(--font-family-base);
  font-weight: var(--fw-medium);
  font-size: 20px;
  color: var(--color-white);
  text-decoration: none;
}

.site-footer__bottom--mobile {
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding-top: 24px;
  border-top: 1px solid var(--color-white);
}

.site-footer__bottom--mobile p,
.site-footer__bottom--mobile a {
  font-size: 13px;
  font-weight: var(--fw-medium);
  opacity: 0.6;
}

/* Mobile-only heading that replaced the logo + tagline (2026-10-10, user
   request), enlarged 2026-10-10 ("gigantyczny"). White on the footer's green. */
.site-footer__title {
  margin: 0;
  font-family: var(--font-family-base);
  font-weight: var(--fw-bold);
  font-size: clamp(48px, 15vw, 72px);
  line-height: 1;
  color: var(--color-white);
  text-align: left;
}

/* "Dom" in the hero headings' serif (Lora), per user request. */
.site-footer__title-accent {
  font-family: var(--font-family-hero-heading);
  font-weight: var(--fw-regular);
}

/* Mobile-only sections reuse .site-footer__column / __heading / __list /
   __social from the desktop rules above.
   Layout per Screeny/uklad_footer_mobile.png (2026-10-10, user request,
   text layout only): each section is a row — small uppercase label on the
   left, links on the right — separated by thin divider lines (Social Media
   is a row of the same kind since 2026-10-10). Rows carry their own vertical padding, so the parent's
   flex gap is 0. */
.site-footer__inner--mobile {
  gap: 0;
}

.site-footer__inner--mobile .site-footer__title {
  margin-bottom: 24px;
}

.site-footer__inner--mobile .site-footer__column {
  display: grid;
  /* 112px floor: "SOCIAL MEDIA" (~111px) stays on one line; same template
     in every row, so the right-hand column lines up across rows. */
  grid-template-columns: minmax(112px, 1fr) minmax(0, 2fr);
  align-items: start;
  column-gap: 16px;
  padding: 20px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.site-footer__inner--mobile .site-footer__heading {
  font-size: 13px;
  font-weight: var(--fw-medium);
  line-height: 20px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0.6;
}

.site-footer__inner--mobile .site-footer__list a {
  font-size: 14px;
  line-height: 20px;
  font-weight: var(--fw-bold);
  opacity: 0.8;
}

/* Social Media: same label-left / content-right row as Nawigacja and
   Kontakt (2026-10-10, user request); label centred against the icons. */
.site-footer__inner--mobile .site-footer__column--social {
  align-items: center;
  margin-bottom: 8px;
}

/* Kontakt / contact form (Figma node 336:39, Status=Default|Error x
   Size=Mobile|Desktop). Not wired to a real submission yet — see
   src/partials/contact-form.php and memory/project-scope.md ("no forms
   for now" decision). Both breakpoints use different field-label colors in
   Figma itself (mobile placeholders are --color-secondary, desktop
   placeholders are --color-black) — encoded as-is, not reconciled. The
   desktop checkbox is a generic "_Button core" primitive in Figma (not an
   actual designed checkbox state) with no checked variant ever shown;
   its checked look here is a reasonable extrapolation, not lifted from a
   frame. */
.contact-form__field {
  background: var(--color-white);
  border-radius: 30px;
}

.contact-form__field input,
.contact-form__field textarea,
.contact-form__field select {
  display: block;
  width: 100%;
  border: none;
  background: none;
  font-family: var(--font-family-base);
  outline: none;
}

/* Removed the browser's default blue focus ring (2026-08-25, user
   feedback) — replaced per-breakpoint with a same-color-scheme cue
   instead of dropping focus visibility outright, since a single generic
   ring didn't suit both looks: the mobile field is a bordered box (a ring
   around it reads naturally), the desktop field is a bare underline (a
   ring would look like a stray box appearing out of nowhere; a bolder
   line reads better there). See the mobile/desktop blocks below for each. */

.contact-form__field textarea {
  resize: vertical;
}

/* Numer mieszkania combobox (2026-08-25, user request) — see the note at
   the top of contact-form.php for the full picking-vs-typing rationale.
   assets/js/main.js's [data-combobox-input] block shows/hides/filters
   this list; the CSS here only owns the dropdown's look and its ~4-row
   visible height. position:relative on the field wrapper (not the input
   itself) so the list's position:absolute is anchored to the whole
   field box, matching where its border/underline actually sits. */
.contact-form__field--combobox {
  position: relative;
}

.contact-form__combobox-list {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 20;
  margin: 0;
  padding: 4px 0;
  list-style: none;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  box-shadow: 0px 8px 24px rgba(17, 17, 26, 0.12);
  /* ~4 rows: each <li> is 14px font + 8px top/bottom padding ≈ 38px tall;
     capped with max-height (not a fixed height) so a filtered result with
     fewer than 4 matches doesn't leave dangling empty space. */
  max-height: 152px;
  overflow-y: auto;
}

.contact-form__combobox-list[hidden] {
  display: none;
}

.contact-form__combobox-list li {
  padding: 8px 20px;
  font-family: var(--font-family-base);
  font-size: 14px;
  color: var(--color-black);
  cursor: pointer;
}

.contact-form__combobox-list li:hover {
  background: var(--color-bg);
}

.contact-form__combobox-list li[hidden] {
  display: none;
}

.contact-form__consent {
  display: flex;
  /* center, not flex-start (2026-08-25, user feedback: the consent text
     read as sitting too high/uncentered next to the checkbox) */
  align-items: center;
  gap: 12px;
  cursor: pointer;
}

.contact-form__consent-link {
  color: var(--color-primary);
  text-decoration: underline;
}

.contact-form__checkbox-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.contact-form__checkbox {
  flex-shrink: 0;
  background-repeat: no-repeat;
  background-position: center;
}

.contact-form__error {
  background: #F2DEDE;
  border-radius: 8px;
  color: #B22626;
  font-family: var(--font-family-base);
  font-weight: var(--fw-medium);
}

/* Contact form wired up (2026-10-10, src/lib/ContactForm.php):
   success message mirrors the error box in the site's green; short RODO
   info line under the consent; honeypot kept off-screen (not display:none,
   which some bots skip); invalid fields get a red underline. */
.contact-form__success {
  margin: 0;
  padding: 10px 12px;
  background: #E3E8E1;
  border-radius: 8px;
  color: var(--color-primary);
  font-family: var(--font-family-base);
  font-weight: var(--fw-medium);
  font-size: 13px;
}

.contact-form__info {
  margin: 0;
  font-family: var(--font-family-base);
  font-size: 11px;
  line-height: 1.45;
  color: var(--color-secondary);
}

.contact-form__hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* The underline belongs to the field wrapper (border-bottom), so the error
   state recolours that line instead of drawing a second one. */
.contact-form__field.is-invalid {
  border-bottom-color: #B22626 !important;
}

.contact-form__consent.is-invalid .contact-form__checkbox {
  outline: 2px solid #B22626;
  outline-offset: 2px;
}

.contact-form__submit[disabled] {
  opacity: 0.6;
  cursor: progress;
}

@media (min-width: 992px) {
  .contact-form__success { font-size: 15px; }
  .contact-form__info { font-size: 12px; }
}

/* Mobile */
/* Padding/gaps trimmed further (2026-08-27) — the previous 6px-over trim
   was measured against an 844px test viewport; a real phone's smaller
   effective viewport (Safari's toolbar chrome eats a real chunk of it,
   especially on load) was cutting this card off with the submit button
   never reachable. Now sized with real margin below a conservative ~650px
   viewport floor, not just the one device this was first measured on. */
.contact-form--mobile {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px 16px 28px;
}

.contact-form--mobile .contact-form__eyebrow {
  margin: 0;
  font-family: var(--font-family-base);
  font-weight: var(--fw-bold);
  font-size: 14px;
  color: var(--color-primary);
}

.contact-form--mobile .contact-form__heading {
  margin: 8px 0 0;
  font-family: var(--font-family-base);
  font-weight: var(--fw-bold);
  font-size: 36px;
  color: var(--color-black);
}

.contact-form--mobile .contact-form__fields {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Underline style (2026-08-27, user request: reskin the mobile form to the
   same visual language as .contact-form--desktop below — underline fields,
   pill checkbox — while keeping mobile's own single-column field layout,
   no side-by-side rows or map photo, since 390px doesn't comfortably fit
   those. Overrides the shared .contact-form__field rule's filled-pill
   background/border-radius, same technique desktop already uses.) */
.contact-form--mobile .contact-form__field {
  height: 42px;
  padding: 0 4px;
  display: flex;
  align-items: center;
  background: none;
  border-radius: 0;
  border-bottom: 2px solid var(--color-primary);
}

.contact-form--mobile .contact-form__field:focus-within {
  border-bottom-width: 3px;
}

.contact-form--mobile .contact-form__field input,
.contact-form--mobile .contact-form__field textarea,
.contact-form--mobile .contact-form__field select {
  font-weight: var(--fw-regular);
  font-size: 16px;
  color: var(--color-primary);
}

.contact-form--mobile .contact-form__field input::placeholder,
.contact-form--mobile .contact-form__field textarea::placeholder {
  color: var(--color-primary);
}

.contact-form--mobile .contact-form__field--textarea {
  height: 90px;
  border-radius: 0;
  padding: 14px 4px;
  align-items: flex-start;
  background: none;
  border-bottom: 2px solid var(--color-primary);
}

.contact-form--mobile .contact-form__field--textarea textarea {
  height: 100%;
  resize: none;
  font-weight: var(--fw-regular);
  font-size: 16px;
  color: var(--color-primary);
}

.contact-form--mobile .contact-form__actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.contact-form--mobile .contact-form__consent-text {
  flex: 1;
  font-family: var(--font-family-base);
  font-weight: var(--fw-regular);
  font-size: 16px;
  color: var(--color-black);
}

.contact-form--mobile .contact-form__checkbox {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background-color: var(--color-white);
  border: 1px solid #D0D5DD;
  box-shadow: 0 1px 2px 0 rgba(198, 228, 246, 0.05);
}

.contact-form--mobile .contact-form__checkbox-input:checked + .contact-form__checkbox {
  background-color: var(--color-primary);
  background-image: url("/assets/img/icon-check.svg");
  background-size: 14px 14px;
  border-color: var(--color-primary);
}

.contact-form--mobile .contact-form__submit {
  height: 56px;
  border: 2px solid var(--color-primary);
  border-radius: 30px;
  background: var(--color-primary);
  font-family: var(--font-family-base);
  font-weight: var(--fw-bold);
  font-size: 14px;
  color: var(--color-white);
}

.contact-form--mobile .contact-form__error {
  padding: 10px 12px;
  font-size: 13px;
}

/* Desktop */
/* Horizontal max-width/centering/side-padding come from the shared
   .section-column class (applied to .contact-form__inner in
   contact-form.php) — this used to also pad .contact-form--desktop
   itself (a clamp(24px,6vw,160px) side padding), double-applying padding
   AND double-centering the inner max-width box within an already-padded
   area, which drifted this section's content edge up to 32px off the
   standard column at wide viewports. Only vertical padding stays here. */
.contact-form--desktop {
  background: #FFFFFF;
  padding-top: 70px;
  padding-bottom: 70px;
}

.contact-form--desktop .contact-form__inner {
  display: flex;
  gap: 40px;
  align-items: center;
}

.contact-form--desktop .contact-form__media {
  flex: 0 1 560px;
  max-width: 690px;
  aspect-ratio: 690 / 625;
  border-radius: 12px;
  overflow: hidden;
}

.contact-form--desktop .contact-form__map {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.contact-form--desktop .contact-form__fields {
  flex: 1 1 420px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

.contact-form--desktop .contact-form__intro {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.contact-form--desktop .contact-form__heading {
  margin: 0;
  font-family: var(--font-family-base);
  font-weight: var(--fw-bold);
  font-size: 42px;
  color: var(--color-black);
}

.contact-form--desktop .contact-form__subtitle {
  margin: 0;
  font-family: var(--font-family-base);
  font-weight: var(--fw-regular);
  font-size: 16px;
  color: var(--color-black);
}

.contact-form--desktop .contact-form__row {
  display: flex;
  gap: 20px;
}

.contact-form--desktop .contact-form__row .contact-form__field {
  flex: 1;
}

.contact-form--desktop .contact-form__row--bottom {
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  row-gap: 12px;
}

/* Underline style (2026-08-25, user request: replace the filled white
   "pasek"/pill look with a minimal underline, since the section background
   changed from gray to white above — a white-on-white filled pill would've
   had no visible edge at all). Overrides the shared .contact-form__field
   rule's background/border-radius (mobile keeps that pill look untouched,
   only desktop changes). */
.contact-form--desktop .contact-form__field {
  height: 48px;
  padding: 0 4px;
  display: flex;
  align-items: center;
  background: none;
  border-radius: 0;
  border-bottom: 2px solid var(--color-primary);
}

.contact-form--desktop .contact-form__field:focus-within {
  border-bottom-width: 3px;
}

.contact-form--desktop .contact-form__field input,
.contact-form--desktop .contact-form__field select {
  font-weight: var(--fw-regular);
  font-size: 16px;
  color: var(--color-primary);
}

.contact-form--desktop .contact-form__field input::placeholder,
.contact-form--desktop .contact-form__field textarea::placeholder {
  color: var(--color-primary);
}

.contact-form--desktop .contact-form__field--textarea {
  height: 131px;
  border-radius: 0;
  padding: 18px 4px;
  align-items: flex-start;
  background: none;
  border-bottom: 2px solid var(--color-primary);
}

.contact-form--desktop .contact-form__field--textarea textarea {
  height: 100%;
  resize: none;
  font-weight: var(--fw-regular);
  font-size: 16px;
  color: var(--color-primary);
}

.contact-form--desktop .contact-form__consent {
  /* was flex-shrink:0 for the short label; the full consent sentence
     (2026-10-10) must wrap inside the column instead of overflowing it. */
  flex: 1 1 320px;
  min-width: 0;
}

.contact-form--desktop .contact-form__consent-text {
  font-family: var(--font-family-base);
  font-weight: var(--fw-regular);
  font-size: 16px;
  color: var(--color-black);
}

.contact-form--desktop .contact-form__checkbox {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background-color: var(--color-white);
  border: 1px solid #D0D5DD;
  box-shadow: 0 1px 2px 0 rgba(198, 228, 246, 0.05);
}

.contact-form--desktop .contact-form__checkbox-input:checked + .contact-form__checkbox {
  background-color: var(--color-primary);
  background-image: url("/assets/img/icon-check.svg");
  background-size: 14px 14px;
  border-color: var(--color-primary);
}

.contact-form--desktop .contact-form__error {
  padding: 10px 12px;
  font-size: 16px;
}

/* Web3Forms honeypot checkbox (2026-10-10) — hidden from people; Web3Forms
   drops submissions where it's checked. Class instead of inline style (CSP). */
.contact-form__botcheck {
  display: none !important;
}