/**
 * Aktualności — listing page (Figma "Aktualności" node 211:6390 desktop /
 * "Aktualności-mobile" node 276:8882, file psb03DxWhlw0g7kvzWHAKt).
 * Page-specific sections only used on aktualnosci.php — same split as
 * home.css / o-nas.css.
 *
 * Reused as-is instead of rebuilding: the navbar-overlay-on-hero technique
 * (.page-home in home.css), .btn-underline for "Więcej", news-card.php for
 * every card (both desktop and mobile variants), and contact-form.php for
 * Kontakt. --color-primary-muted already matches the hero tint's exact
 * Figma opacity (0.7), no new color token needed.
 *
 * The card grid (.aktualnosci-year__cards) is ONE shared markup block for
 * both breakpoints — matches the .home-news__grid pattern (CSS-only switch
 * between a horizontal scroll-snap carousel and a wrapping grid) rather than
 * duplicating the loop per breakpoint. What genuinely differs by breakpoint
 * is CSS-only: mobile wraps the whole list in a floating white card (per
 * Figma's "Mobile News Section" frame); desktop doesn't.
 */

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

/* Mobile-only companion (2026-09-08, user request, mobile-only work) —
   same fix already applied to .page-o-nas/.page-wizualizacje/
   .page-finansowanie's own navbar: this page's overlay used to be
   desktop-only like every other page's rule, so on mobile the navbar sat
   in normal flow ABOVE the hero (pushing it down) instead of floating
   over it. See the comment on .page-wizualizacje .site-navbar in
   wizualizacje.css for why this deliberately breaks the "overlay is
   desktop-only" pattern. No sticky-after-hero companion for mobile yet,
   same known gap as the other three pages (main.js's stuck-class observer
   only fires when desktopQuery.matches). */
@media (max-width: 991.98px) {
  .page-aktualnosci .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 below). Content
   position/look is the reference the O nas hero (o-nas.css) was unified
   to match — kept deliberately parallel, see the note there. */
.aktualnosci-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 .aktualnosci-hero because its own
   width:100%/height:100% matched the section's explicit 100vh exactly;
   same fix already applied to .onas-hero__video/.wiz-hero__photo/
   .finansowanie-hero__video. */
.aktualnosci-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.aktualnosci-hero__tint {
  position: absolute;
  inset: 0;
  background: var(--color-primary-muted);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.aktualnosci-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;
  text-align: center;
  color: var(--color-white);
}

.aktualnosci-hero__eyebrow {
  margin: 0;
  font-family: var(--font-family-base);
  font-weight: var(--fw-bold);
}

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

.aktualnosci-hero__body {
  margin: 0;
  font-family: var(--font-family-base);
  font-weight: var(--fw-medium);
}

.aktualnosci-hero--desktop .aktualnosci-hero__eyebrow,
.aktualnosci-hero--desktop .aktualnosci-hero__body {
  font-size: 20px;
}

.aktualnosci-hero--desktop .aktualnosci-hero__heading {
  font-size: 64px;
}

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

.aktualnosci-hero--mobile .aktualnosci-hero__eyebrow {
  font-size: 14px;
}

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

.aktualnosci-hero--mobile .aktualnosci-hero__body {
  font-size: 13px;
}

/* ---------- Listing ---------- */
/* Horizontal max-width/centering/side-padding come from the shared
   .section-column class (see base.css) — only vertical padding stays
   here. The mobile override below still fully replaces max-width/margin/
   padding for the "floating card" look, same as before. */
.aktualnosci-list {
  padding-top: 48px;
  padding-bottom: 48px;
}

.aktualnosci-list__heading {
  margin: 0 0 24px;
  font-family: var(--font-family-base);
  font-weight: var(--fw-bold);
  color: var(--color-black);
  font-size: 24px;
}

.aktualnosci-year {
  margin-top: 32px;
}

.aktualnosci-year:first-child {
  margin-top: 0;
}

.aktualnosci-year__label {
  margin: 0 0 16px;
  font-family: var(--font-family-base);
  font-weight: var(--fw-bold);
  color: var(--color-black);
  font-size: 20px;
}

.aktualnosci-year__cards {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-bottom: 4px;
}

.aktualnosci-year__cards::-webkit-scrollbar {
  display: none;
}

.aktualnosci-year__cards > * {
  flex-shrink: 0;
  scroll-snap-align: start;
}

/* Full-bleed carousel (2026-09-08 fix, mobile only) — this row used to
   stay confined inside .aktualnosci-list's own .section-column padding
   (max-width:1320px + 32px inset), unlike every other card carousel on
   the site (.home-apartments__grid, .wiz-category__track, etc.), which
   break out to the TRUE screen edge so a later card can peek in instead
   of getting clipped early by the column's own right padding boundary —
   exactly what the user reported ("karty... nie są na pełną szerokość,
   element drugiego wpisu jest ucinany wcześniej niż koniec ekranu").
   margin:0 -32px cancels .section-column's 32px inset (.aktualnosci-list
   is a full-width block on mobile, so this reaches the real viewport
   edge — a flat 32px is enough here, unlike the max(32px, calc(...))
   formula other pages need, since that only matters above the 1320px
   column width and this fix is mobile-only); padding-left/right restores
   the SAME 32px as the row's own inset so cards still start/end flush
   with the rest of the page's content. scroll-padding-left must match
   padding-left, or Chrome doesn't treat scroll position 0 as a valid
   snap point and auto-scrolls away from it on first load — same gotcha
   documented on .home-apartments__grid in home.css. */
@media (max-width: 991.98px) {
  .aktualnosci-year__cards {
    margin: 0 -32px;
    padding-left: 32px;
    padding-right: 32px;
    scroll-padding-left: 32px;
  }
}

/* The mobile "floating white card" wrapper (background/border/shadow/
   radius + a custom max-width:none;margin:0 16px override replacing
   .section-column's own centering) was removed entirely (2026-09-08,
   user request: "uwolnijmy karty ze wpisami z tego diva w którym siedzą")
   — .aktualnosci-list now just uses .section-column's standard
   max-width:1320px/32px-padding centering like every other section on
   the site, same as it already does on desktop, instead of a bespoke
   16px-inset boxed-card look unique to this page. See the entry above
   for the just-removed top:-16px overlap that used to sit on this same
   rule — both were part of the same "card floating over the hero" idea. */

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

  .aktualnosci-year__label {
    font-size: 42px;
  }

  .aktualnosci-year__cards {
    display: grid;
    /* auto-fit + minmax instead of a fixed-width flex-wrap: a flex row of
       447px-capped cards left a big empty gap once only 2 fit per row
       inside the 1320px content column (any container ≥ ~1250px only ever
       fit 2, even on a 1920px monitor, since the column itself doesn't
       grow past 1320px). Note: auto-fit's column-count math uses the
       minmax() MAX bound when it's a fixed length — a 447px max also
       produced only 2 columns here. Using 1fr as the max instead means
       the count is based on the 320px min (3 columns fit comfortably in
       1256px), and each track then grows to fill the row via 1fr; cards
       render slightly under their 447px design cap as a result, which
       reads as "3 evenly-sized cards" rather than "2 cards + dead space". */
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    overflow-x: visible;
    gap: 40px 48px;
  }
}