/* Phase 2A visual proof — minimal design system, matching the approved reference. */

:root {
  --fd-cream: #f3f0ea;
  --fd-black: #171713;
  --fd-black-panel: #191916;
  --fd-gold: #b78345;
  --fd-gold-light: #d1a066;
  --fd-muted: #55524c;
  --fd-muted-on-dark: #aaa79f;
  --fd-border-on-dark: #777777;
  --fd-border-on-light: #d9d4c8;
  --fd-font-serif: Georgia, 'Times New Roman', serif;
  --fd-font-sans: 'Helvetica Neue', Arial, sans-serif;
}

body {
  font-family: var(--fd-font-sans);
  color: var(--fd-black);
  background: #ffffff;
}

.eyebrow {
  font-family: var(--fd-font-sans);
  font-size: 0.75rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--fd-muted);
  margin: 0 0 1rem;
}
.eyebrow--on-dark { color: var(--fd-gold-light); }

.button {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--fd-font-sans);
  font-size: 0.95rem;
  text-decoration: none;
  padding: 1rem 1.35rem;
  border: 1px solid transparent;
  transition: opacity 0.15s ease;
}
.button:hover { opacity: 0.85; }
.button--gold { background: var(--fd-gold); color: #fff; }
.button--outline { background: transparent; color: #fff; border-color: var(--fd-border-on-dark); }

.link--secondary {
  font-family: var(--fd-font-sans);
  color: var(--fd-black);
  text-decoration: underline;
  align-self: center;
}

/* ---- Site header ---- */
.site-header {
  background: var(--fd-cream);
  border-bottom: 1px solid var(--fd-border-on-light);
}
.site-header__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.1rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 2rem;
}
.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: var(--fd-black);
  flex-shrink: 0;
}
.brand__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  border: 1px solid var(--fd-black);
  font-family: var(--fd-font-serif);
  font-size: 0.9rem;
}
.brand__word {
  font-family: var(--fd-font-sans);
  font-weight: 600;
  letter-spacing: 0.12em;
  font-size: 0.95rem;
}
.brand__logo {
  display: block;
  height: 92px;
  width: auto;
  max-width: 100%;
}
@media (max-width: 480px) {
  .brand__logo { height: 63px; }
}
.site-nav { flex: 1; display: flex; justify-content: center; }
.site-nav ul {
  display: flex;
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-nav a {
  font-family: var(--fd-font-sans);
  font-size: 0.9rem;
  color: var(--fd-black);
  text-decoration: none;
}
.site-nav a:hover { color: var(--fd-gold); }
.nav-cta {
  font-family: var(--fd-font-sans);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--fd-black);
  text-decoration: none;
  border-bottom: 1px solid var(--fd-black);
  white-space: nowrap;
  flex-shrink: 0;
}
.nav-toggle-input { display: none; }
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
}
.nav-toggle span {
  width: 22px;
  height: 2px;
  background: var(--fd-black);
}

/* Two copies of the quotation CTA share the .nav-cta look; only one is
   ever visible at a time. Default (desktop): show the header-row one,
   hide the in-menu one — this is exactly the single-CTA behaviour that
   existed before, unchanged above the mobile breakpoint. */
.nav-cta--in-menu { display: none; }

@media (max-width: 860px) {
  .site-header__inner {
    /* The header row previously stayed nowrap while a flex-basis:100%
       rule tried to push .site-nav onto its own line — nowrap always
       wins, so nothing actually wrapped and the row (brand + toggle +
       the nowrap "Zapytaj o wycenę" link) overflowed the viewport,
       letting the whole page slide horizontally. Wrapping is now allowed
       as a safety net, but the real fix is removing the long nowrap CTA
       from this row entirely (below). */
    flex-wrap: wrap;
    /* The collapsed row now also carries the always-visible language
       switcher (brand + lang-switch + hamburger), so the desktop 2rem
       gap and padding are trimmed here to keep all three comfortably
       inside a 360px viewport with no overflow. */
    gap: 0.6rem;
    padding: 0.85rem 1rem;
  }
  .site-nav {
    order: 4;
    flex-basis: 100%;
    display: none;
  }
  .nav-toggle-input:checked ~ .site-nav { display: block; }
  .site-nav ul { flex-direction: column; gap: 0.25rem; padding: 1rem 0; }
  .nav-toggle { display: flex; }

  /* The quotation CTA moves inside the hamburger menu on mobile instead
     of sitting as a separate, nowrap header-row link. */
  .nav-cta--header { display: none; }
  .nav-cta--in-menu {
    display: block;
    margin-top: 0.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--fd-border-on-light);
  }
}

/* ---- Hero ---- */
.hero {
  position: relative;
  min-height: 640px;
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center;
  color: #fff;
}
.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(15,15,13,0.88) 0%, rgba(15,15,13,0.55) 45%, rgba(15,15,13,0.25) 100%);
}
.hero__inner {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 4rem 1.5rem;
  width: 100%;
}
.hero__heading {
  font-family: var(--fd-font-serif);
  font-weight: 400;
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  line-height: 1.15;
  margin: 0 0 1.25rem;
  max-width: 20ch;
}
.hero__lead {
  font-family: var(--fd-font-sans);
  font-size: 1.05rem;
  color: #e7e5df;
  max-width: 42ch;
  margin: 0 0 2rem;
}
.hero__actions { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.hero .link--secondary { color: #fff; }

/* ---- Hero cross-fade (Homepage Punch Pass) ----
   Three genuine project photos, pure CSS opacity cross-fade. Dark fallback
   background prevents a white flash before the first slide paints (no CLS:
   .hero already reserves min-height, and slides are absolutely positioned
   inside it). Motion is opt-in via the reduced-motion media query below —
   the un-animated default state IS the reduced-motion state, so nothing
   extra is needed to satisfy prefers-reduced-motion. */
.hero--crossfade { background: var(--fd-black); }
.hero__slides { position: absolute; inset: 0; overflow: hidden; }
.hero__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
}
.hero__slide:first-child { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  /* dwell ~7s + fade ~1.5s per slide x3 = 25.5s cycle. */
  .hero__slide:nth-child(1) { animation: hero-fade-1 25.5s ease-in-out infinite; }
  .hero__slide:nth-child(2) { animation: hero-fade-2 25.5s ease-in-out infinite; }
  .hero__slide:nth-child(3) { animation: hero-fade-3 25.5s ease-in-out infinite; }
  @keyframes hero-fade-1 {
    0%, 27.451% { opacity: 1; }
    33.333%, 94.118% { opacity: 0; }
    100% { opacity: 1; }
  }
  @keyframes hero-fade-2 {
    0%, 27.451% { opacity: 0; }
    33.333%, 60.784% { opacity: 1; }
    66.667%, 100% { opacity: 0; }
  }
  @keyframes hero-fade-3 {
    0%, 60.784% { opacity: 0; }
    66.667%, 94.118% { opacity: 1; }
    100% { opacity: 0; }
  }
}

/* ---- Credibility strip ---- */
.credibility { background: var(--fd-black-panel); padding: 1.75rem 1.5rem; }
.credibility__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  text-align: center;
}
@media (max-width: 860px) {
  .credibility__inner { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .credibility__inner { grid-template-columns: 1fr; }
}
.credibility__item {
  color: #fff;
  font-family: var(--fd-font-sans);
  padding: 0 0.5rem;
  border-left: 1px solid var(--fd-border-on-dark);
}
.credibility__item:first-child { border-left: none; }
@media (max-width: 860px) {
  .credibility__item:nth-child(odd) { border-left: none; }
}
.credibility__label { display: block; font-size: 0.92rem; font-weight: 650; }
.credibility__hint { display: block; font-size: 0.78rem; color: var(--fd-muted-on-dark); margin-top: 0.2rem; }

/* ---- Showcase ("Jedna estetyka") ---- */
.showcase {
  display: grid;
  grid-template-columns: 1fr;
  background: var(--fd-black-panel);
}
@media (min-width: 860px) {
  .showcase { grid-template-columns: 1fr 1fr; }
}
.showcase__image { position: relative; }
.showcase__image img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
  /* IMG_1213's top third is sloped ceiling; bias the crop down so the
     cabinetry (the actual focal point) is what shows, not the ceiling. */
  object-position: center 75%;
}
.image-label {
  position: absolute;
  left: 1.5rem;
  bottom: 1.5rem;
  background: var(--fd-cream);
  color: var(--fd-black);
  font-size: 0.8rem;
  padding: 0.4rem 0.8rem;
}
.showcase__copy {
  color: #fff;
  padding: 4.5rem 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 42ch;
  margin: 0 auto;
}
.showcase__heading {
  font-family: var(--fd-font-serif);
  font-weight: 400;
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  margin: 0 0 1.25rem;
}
.showcase__lead { color: var(--fd-muted-on-dark); margin: 0 0 1.5rem; }
.checklist {
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.checklist li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: #fff;
}
.checklist li::before {
  content: '✓';
  color: var(--fd-gold-light);
  font-weight: 700;
}

/* ---- Layout resets: kill default gaps, keep contextual links from adding height ---- */
body { margin: 0; }
.layout-container, main, .layout-content { margin: 0; padding: 0; }
.layout-content > article:first-child,
.node--homepage-proof,
.node--homepage-proof > .node__content,
.node--homepage-proof .paragraph:first-child {
  margin: 0;
}
.region-highlighted:empty,
.region-help:empty,
.breadcrumb:empty { display: none; }
.contextual {
  position: absolute !important;
  width: 0;
  height: 0;
  overflow: visible;
}
.contextual-region { position: relative; }

/* ---- Section spacing ---- */
.hero { margin: 0; }
.featured,
.oferta { padding: 5rem 1.5rem; }
.showcase { margin: 0; }

/* ---- Featured projects (Wybrane realizacje) ---- */
.featured__inner { max-width: 1200px; margin: 0 auto; }
.featured__heading {
  font-family: var(--fd-font-serif);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  margin: 0 0 2.5rem;
  text-align: center;
}
/* Direct-child combinator only — a descendant selector here would also
   match the small nested .field wrapper around each card's own
   categories (field--name-field-kategorie-wielo), forcing THAT into a
   4-column grid too and blowing its layout out of the card. */
.featured-grid > .field {
  display: grid;
  /* Modest desktop-only size bump (240-320px -> 260-360px, ~12%) so the
     photography feels a little more prominent — same auto-fit grid,
     same aspect-ratio, same number of columns at a given width, just a
     slightly larger footprint per card. Mobile overrides this entirely
     inside its own media query below, so it is unaffected. */
  grid-template-columns: repeat(auto-fit, minmax(260px, 360px));
  justify-content: center;
  gap: 2rem;
  align-items: stretch;
}
@media (max-width: 700px) {
  /* Controlled horizontal swipe on mobile — CSS scroll-snap only, no
     carousel library, no autoplay. Cards keep the exact same markup,
     order and lightbox behaviour; only the grid becomes a snapping flex
     row. One card fills the viewport with zero peek from its neighbour:
     card width (92vw) + gap (8vw) = 100vw, so each swipe advances by
     exactly one full viewport and, at rest, the empty gap — not the
     next card's content — occupies the space on either side of the
     centred card. (A gap:0 here would let the very next card's box
     start immediately at the trailing edge of the container's own
     inset padding, which is what caused the visible sliver before.) */
  .featured { padding: 2.75rem 1.25rem; }
  .featured-grid > .field {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 8vw;
    padding: 0 4vw 0.5rem;
    margin: 0 -1.25rem;
    justify-content: flex-start;
    /* Flex rows stretch items to the tallest sibling's height by
       default; if one card's title happens to wrap an extra line, every
       other (shorter-content) card would then show blank space below
       its category to match that height. Sizing each card to its own
       content removes that avoidable gap. */
    align-items: flex-start;
  }
  .featured-grid > .field > .field__item {
    flex: 0 0 92vw;
    scroll-snap-align: center;
    box-sizing: border-box;
  }
  /* Photography is the focus: a taller crop than the desktop 4:3 grid
     gives the image substantially more of the card, still a single
     undistorted object-fit: cover crop — no stretching. */
  .project-card {
    box-sizing: border-box;
  }
  .project-card__image { aspect-ratio: 5 / 4; }
  .project-card__body {
    padding: 0.85rem 0.15rem 0.15rem;
    text-align: center;
  }

  /* Compact prev/next + "x / N" cue, replacing the old half-visible
     next-card as the way mobile users discover there's more to swipe. */
  .featured-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.9rem;
    margin-top: 0.5rem;
  }
  .featured-nav__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid var(--fd-border-on-light);
    border-radius: 50%;
    background: #fff;
    color: var(--fd-black);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
  }
  .featured-nav__btn:disabled { opacity: 0.35; cursor: default; }
  .featured-nav__btn:focus-visible {
    outline: 2px solid var(--fd-gold);
    outline-offset: 2px;
  }
  .featured-nav__count {
    font-family: var(--fd-font-sans);
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
    color: var(--fd-muted);
    min-width: 3.5rem;
    text-align: center;
  }
}
@media (min-width: 701px) {
  /* Nav cue is a mobile-only affordance for the single-card swipe view;
     desktop's unchanged multi-column grid never needs it. */
  .featured-nav { display: none; }
}
.featured-grid > .field > .field__item {
  min-width: 0;
  width: 100%;
  overflow: hidden;
}
.project-card {
  display: flex;
  flex-direction: column;
  position: static;
  min-width: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--fd-border-on-light);
}
.project-card__title { text-wrap: balance; }
.project-card__body {
  position: static;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  padding: 1.25rem;
}
.project-card__categories { position: static; margin-top: auto; }
.project-card__image {
  position: static;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #eee;
}
.project-card__image picture,
.project-card__image .field,
.project-card__image .field__item {
  display: block;
  width: 100%;
  height: 100%;
}
.project-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--fd-cover-position, center);
  display: block;
}
.project-card__title {
  position: static;
  font-family: var(--fd-font-serif);
  font-weight: 400;
  font-size: 1.1rem;
  margin: 0 0 0.5rem;
}
.project-card__categories {
  font-family: var(--fd-font-sans);
  font-size: 0.8rem;
  color: var(--fd-muted);
}
.project-card__categories .field__item { display: inline; }
.project-card__categories .field__item::after { content: ' \00b7 '; }
.project-card__categories .field__item:last-child::after { content: ''; }

/* ---- /realizacje portfolio listing ----
   The view (realizacje_proof) already renders each row through the same
   "card" view mode as the homepage, but ships with the default
   "unformatted list" style and no grid of its own — so rows stacked full
   viewport width with nothing to cap the card (and its image) at a
   sane size. This scopes the same grid pattern used by .featured-grid
   to the view's own wrapper class instead. */
.view-realizacje-proof {
  max-width: 1200px;
  margin: 0 auto;
  padding: 3rem 1.5rem 5rem;
}
.view-realizacje-proof .view-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 320px));
  justify-content: center;
  gap: 2rem;
}
.view-realizacje-proof .views-row {
  min-width: 0;
  width: 100%;
}
@media (max-width: 640px) {
  .view-realizacje-proof .view-content { grid-template-columns: minmax(240px, 320px); }
}

/* ---- Oferta category cards ---- */
.oferta { background: var(--fd-cream); }
.oferta__inner { max-width: 1200px; margin: 0 auto; text-align: center; }
.oferta__heading {
  font-family: var(--fd-font-serif);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  margin: 0 0 2.5rem;
}
.oferta-grid ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  text-align: left;
}
@media (max-width: 1023px) {
  .oferta-grid ul { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .oferta-grid ul { grid-template-columns: 1fr; }
}
.oferta-grid li {
  background: #fff;
  border: 1px solid var(--fd-border-on-light);
  padding: 0;
  font-family: var(--fd-font-sans);
  font-weight: 600;
  position: relative;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.oferta-grid li:hover,
.oferta-grid li:focus-within {
  border-color: var(--fd-gold);
  box-shadow: 0 2px 10px rgba(23, 23, 19, 0.06);
}
.oferta-grid li::before {
  content: '';
  display: block;
  width: 2rem;
  height: 2px;
  background: var(--fd-gold);
  margin: 1.5rem 0 1rem 1.5rem;
}
.oferta-grid li a {
  display: block;
  padding: 0 1.5rem 1.5rem;
  color: inherit;
  text-decoration: none;
}
.oferta-grid li strong {
  display: block;
  font-size: 1.02rem;
  margin-bottom: 0.4rem;
}
.oferta-grid li p {
  font-weight: 400;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--fd-muted);
  margin: 0;
}

/* ---- Jakość / Dlaczego Flaga Design ---- */
.why-flaga { background: var(--fd-black-panel); padding: 5rem 1.5rem; color: #fff; }
.why-flaga__inner { max-width: 1200px; margin: 0 auto; }
.why-flaga__heading {
  font-family: var(--fd-font-serif);
  font-weight: 400;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  max-width: 32ch;
  margin: 0 0 1rem;
}
.why-flaga__lead { color: var(--fd-muted-on-dark); max-width: 60ch; margin: 0 0 2.5rem; line-height: 1.6; }
.why-flaga__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  margin: 0 0 2.5rem;
}
@media (max-width: 860px) {
  .why-flaga__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .why-flaga__grid { grid-template-columns: 1fr; }
}
.why-flaga__point h3 {
  font-family: var(--fd-font-sans);
  font-size: 0.98rem;
  font-weight: 650;
  margin: 0 0 0.4rem;
}
.why-flaga__point p {
  font-size: 0.88rem;
  color: var(--fd-muted-on-dark);
  line-height: 1.5;
  margin: 0;
}

/* ---- Jak pracujemy — homepage preview ----
   Same gold-number-plus-heading language as .wycena-process, reused here
   rather than inventing a new step component. */
.process-preview { background: var(--fd-cream); padding: 5rem 1.5rem; }
.process-preview__inner { max-width: 1000px; margin: 0 auto; text-align: center; }
.process-preview__steps {
  margin: 2.5rem 0 2.5rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  text-align: left;
}
@media (max-width: 700px) {
  .process-preview__steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .process-preview__steps { grid-template-columns: 1fr; }
}
.process-preview__number {
  display: block;
  font-family: var(--fd-font-serif);
  font-size: 1.5rem;
  color: var(--fd-gold);
  margin-bottom: 0.4rem;
}
.process-preview__step h3 {
  font-family: var(--fd-font-sans);
  font-weight: 650;
  font-size: 0.98rem;
  margin: 0;
}

/* ---- Final conversion section ---- */
.home-cta { padding: 5rem 1.5rem 6rem; text-align: center; }
.home-cta__inner { max-width: 620px; margin: 0 auto; }
.home-cta__heading {
  font-family: var(--fd-font-serif);
  font-weight: 400;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  margin: 0 0 1rem;
}
.home-cta__lead { color: var(--fd-muted); margin: 0 0 2rem; line-height: 1.6; }
.home-cta__actions { display: flex; align-items: center; justify-content: center; gap: 1.5rem; flex-wrap: wrap; }
.home-cta .button--outline { color: var(--fd-black); border-color: var(--fd-black); }
.home-cta__note { margin: 1.75rem 0 0; font-size: 0.85rem; color: var(--fd-muted); }

/* ---- Project page + gallery + lightbox ---- */
.project-page { max-width: 1200px; margin: 0 auto; padding: 3rem 1.5rem 5rem; }
.project-page__header { margin-bottom: 1.5rem; }
.project-page__title {
  font-family: var(--fd-font-serif);
  font-weight: 400;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  margin: 0 0 0.75rem;
}
.project-page__categories { display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center; }
.project-page__categories .field__item {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fd-muted);
}
/* Discreet, optional — only rendered when a genuine town is stored. */
.project-page__location {
  font-size: 0.8rem;
  color: var(--fd-muted);
}
.project-page__location::before { content: "· "; }
.project-page__body { max-width: 65ch; margin: 0 0 2.5rem; color: var(--fd-muted); }
.project-page__body p { line-height: 1.75; margin: 0 0 1.25rem; }
.project-page__body p:last-child { margin-bottom: 0; }
.project-page__cta { max-width: 65ch; margin: 0; }

/* Legal / basic text pages (e.g. Polityka prywatności) — these have no
   gallery or side content to justify the full 1200px .project-page
   width, so the container itself is narrowed to a comfortable reading
   measure (720-820px) and stays centred via the same margin:0 auto the
   base .project-page already uses — same public-site centred-container
   pattern, just a narrower one, text still left-aligned inside it.
   Same specificity as the base .project-page rule above (one class
   each), so as the later declaration this wins without needing !important.
   The inner __header/__body max-width:65ch rules are reset to 100% so
   they fill this container edge-to-edge instead of re-narrowing inside
   it. Mobile is unaffected: .project-page's existing responsive padding
   already gives full-width text there, and 780px only ever applies as a
   ceiling on wider screens. */
.project-page--legal {
  max-width: 780px;
}
.project-page--legal .project-page__header,
.project-page--legal .project-page__body {
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
}
.project-page--legal .project-page__body h2 {
  font-family: var(--fd-font-serif);
  font-weight: 400;
  font-size: 1.3rem;
  margin: 2rem 0 0.75rem;
  color: var(--fd-black);
}
.project-page--legal .project-page__body h2:first-child { margin-top: 0; }
.project-page--legal .privacy-controller { line-height: 1.75; }

/* ---- Kontakt: contact-details list (node/3 only) ----
   The panel itself already uses .process-page__panel; this just turns the
   plain <ul><li><strong>Label:</strong> <a>...</a></li></ul> body content
   into an aligned label/value list, without touching the field content. */
.contact-details-panel ul {
  list-style: none;
  margin: 1.5rem 0;
  padding: 0;
  display: grid;
  gap: 0.85rem;
}
.contact-details-panel li {
  display: grid;
  grid-template-columns: 9.5rem 1fr;
  gap: 0.75rem;
  align-items: baseline;
  line-height: 1.5;
}
@media (max-width: 480px) {
  .contact-details-panel li { grid-template-columns: 1fr; gap: 0.15rem; }
}
.contact-details-panel li strong {
  font-family: var(--fd-font-sans);
  font-size: 0.8rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--fd-muted);
}
.contact-details-panel a {
  color: var(--fd-black);
  text-decoration: underline;
  text-decoration-color: var(--fd-gold);
  text-underline-offset: 3px;
}
.contact-details-panel a:hover { color: var(--fd-gold); }
.contact-details-panel a:focus-visible {
  outline: 2px solid var(--fd-gold);
  outline-offset: 2px;
}

/* ---- Kontakt page: message form (node/3 only) ---- */
.contact-message {
  max-width: 65ch;
  margin: 2.5rem 0;
  background: #faf8f4;
  border: 1px solid var(--fd-border-on-light);
  border-radius: 10px;
  padding: 2rem 2.25rem;
}
@media (max-width: 640px) {
  .contact-message { padding: 1.5rem; }
}
.contact-message__intro { color: var(--fd-muted); line-height: 1.6; margin: 0 0 1.5rem; }

.contact-message__heading {
  font-family: var(--fd-font-serif);
  font-weight: 400;
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  margin: 0 0 0.5rem;
}
.contact-message__heading::after {
  content: '';
  display: block;
  width: 2rem;
  height: 2px;
  background: var(--fd-gold);
  margin: 1rem 0 1.75rem;
}
.contact-message .webform-submission-form .form-item {
  margin: 0 0 1.5rem;
}
.contact-message .webform-submission-form label {
  display: block;
  font-family: var(--fd-font-sans);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--fd-black);
  margin: 0 0 0.5rem;
}
.contact-message .webform-submission-form input[type='text'],
.contact-message .webform-submission-form input[type='email'],
.contact-message .webform-submission-form input[type='tel'],
.contact-message .webform-submission-form textarea {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--fd-font-sans);
  font-size: 1rem;
  min-height: 3rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--fd-border-on-light);
  border-radius: 6px;
  background: #fff;
  color: var(--fd-black);
}
.contact-message .webform-submission-form textarea {
  min-height: 8rem;
  resize: vertical;
}
.contact-message .webform-submission-form input:focus,
.contact-message .webform-submission-form textarea:focus {
  outline: 2px solid var(--fd-gold);
  outline-offset: 1px;
  border-color: var(--fd-gold);
}
.contact-message .webform-submission-form .form-item--error-message,
.contact-message .webform-submission-form .error {
  color: #b3401f;
  font-size: 0.85rem;
  margin-top: 0.35rem;
}
.contact-message .webform-submission-form input.error,
.contact-message .webform-submission-form textarea.error {
  border-color: #b3401f;
}
.contact-message .webform-submission-form .webform-button--submit {
  display: inline-block;
  width: auto;
  background: var(--fd-gold);
  color: var(--fd-black);
  font-family: var(--fd-font-sans);
  font-weight: 600;
  padding: 0.9rem 2rem;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}
.contact-message .webform-submission-form .webform-button--submit:hover,
.contact-message .webform-submission-form .webform-button--submit:focus {
  outline: 2px solid var(--fd-gold);
  outline-offset: 2px;
  filter: brightness(0.95);
}
@media (max-width: 480px) {
  .contact-message .webform-submission-form .webform-button--submit {
    width: 100%;
  }
}

/* ---- "Jak pracujemy" / "Kontakt" content panel (node/2, node/3) ----
   Wraps the intro/steps/closing paragraph in one soft panel below the
   title, which stays outside it. Existing tokens only. */
.process-page__panel {
  background: var(--fd-cream);
  border: 1px solid var(--fd-border-on-light);
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(23, 23, 19, 0.06);
  padding: 2.5rem 3rem;
}
@media (max-width: 640px) {
  .process-page__panel { padding: 1.5rem; }
}

/* ---- "Jak pracujemy" four-step process (node/2 only) ----
   Same gold-numbered-step pattern already established on /wycena's
   "Co dzieje się dalej?" list — reused here rather than inventing a new
   step component. Single column at every width; no cards. */
.process-page .project-page__body ol {
  list-style: none;
  counter-reset: process-step;
  margin: 0 0 2rem;
  padding: 0;
  display: grid;
  gap: 1.25rem;
  max-width: 65ch;
}
.process-page .project-page__body ol li {
  counter-increment: process-step;
  position: relative;
  padding-left: 2.75rem;
  line-height: 1.6;
  color: var(--fd-muted);
}
.process-page .project-page__body ol li::before {
  content: counter(process-step);
  position: absolute;
  left: 0;
  top: 0;
  width: 1.9rem;
  height: 1.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--fd-gold);
  color: var(--fd-gold);
  font-family: var(--fd-font-sans);
  font-size: 0.85rem;
  font-weight: 650;
}
.process-page .project-page__body ol strong {
  display: block;
  color: var(--fd-black);
  font-family: var(--fd-font-sans);
  margin-bottom: 0.2rem;
}

.project-gallery .field {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
@media (max-width: 1023px) {
  .project-gallery .field { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .project-gallery .field { grid-template-columns: 1fr; }
}
.project-gallery .field__item {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  cursor: zoom-in;
  width: 100%;
  float: none;
  justify-self: stretch;
}
.project-gallery .field__item img,
.project-gallery .field__item picture,
.project-gallery .field__item picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.lightbox {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  z-index: 99999;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.65);
  margin: 0;
  padding: 0;
  max-width: none;
  transform: none;
}
.lightbox[hidden] { display: none; }
.lightbox__image {
  display: block;
  width: auto;
  height: auto;
  max-width: min(75vw, 1050px);
  max-height: 78vh;
  min-width: 0;
  min-height: 0;
  object-fit: contain;
  margin: 0;
  box-shadow: none;
  border: none;
  outline: none;
  cursor: pointer;
}
@media (max-width: 600px) {
  .lightbox__image {
    max-width: calc(100vw - 32px);
    max-height: 78dvh;
  }
}
/* Navigation is click-halves / swipe / keyboard only, and closing is
   outside-click / Escape only — no visible controls at all per the
   approved minimal appearance (image only). */
.lightbox__prev,
.lightbox__next,
.lightbox__count,
.lightbox__close {
  display: none;
}

/* ---- Quote-request journey page (/wycena) ---- */
.wycena-lead,
.wycena-form {
  max-width: 700px;
  margin: 0 auto;
  padding: 0 1.5rem;
}
.wycena-lead {
  padding-top: 3.5rem;
}
.wycena-lead__title {
  font-family: var(--fd-font-serif);
  font-weight: 400;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  margin: 0 0 0.5rem;
}
.wycena-lead__title::before {
  content: '';
  display: block;
  width: 2rem;
  height: 2px;
  background: var(--fd-gold);
  margin-bottom: 1rem;
}
.wycena-lead__intro {
  font-family: var(--fd-font-sans);
  color: var(--fd-muted);
  font-size: 1.05rem;
  line-height: 1.6;
  max-width: 60ch;
  margin: 0 0 2rem;
}

/* "Co dzieje się dalej?" */
.wycena-next { background: var(--fd-cream); padding: 4rem 1.5rem; margin-top: 3rem; }
.wycena-next__inner { max-width: 700px; margin: 0 auto; }
.wycena-next__heading {
  font-family: var(--fd-font-serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 2rem);
  margin: 0 0 1.75rem;
}
.wycena-next__list {
  list-style: none;
  counter-reset: wycena-step;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.25rem;
}
.wycena-next__list li {
  counter-increment: wycena-step;
  position: relative;
  padding-left: 2.75rem;
  color: var(--fd-muted);
  line-height: 1.6;
}
.wycena-next__list li::before {
  content: counter(wycena-step);
  position: absolute;
  left: 0;
  top: 0;
  width: 1.9rem;
  height: 1.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--fd-gold);
  color: var(--fd-gold);
  font-family: var(--fd-font-sans);
  font-size: 0.85rem;
  font-weight: 650;
}
.wycena-next__list strong { color: var(--fd-black); }

/* Projektujemy – Produkujemy – Montujemy */
.wycena-process { padding: 4.5rem 1.5rem; }
.wycena-process__inner { max-width: 1000px; margin: 0 auto; text-align: center; }
.wycena-process__steps {
  margin-top: 2.5rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
  text-align: left;
}
@media (max-width: 700px) {
  .wycena-process__steps { grid-template-columns: 1fr; gap: 2rem; }
}
.wycena-process__number {
  display: block;
  font-family: var(--fd-font-serif);
  font-size: 1.5rem;
  color: var(--fd-gold);
  margin-bottom: 0.5rem;
}
.wycena-process__step h3 {
  font-family: var(--fd-font-serif);
  font-weight: 400;
  font-size: 1.25rem;
  margin: 0 0 0.5rem;
}
.wycena-process__step p {
  color: var(--fd-muted);
  line-height: 1.6;
  margin: 0;
}

/* Portfolio picks */
.wycena-portfolio { background: var(--fd-cream); padding: 4.5rem 1.5rem; }
.wycena-portfolio__inner { max-width: 1200px; margin: 0 auto; text-align: center; }
.wycena-portfolio__grid {
  margin: 2.5rem 0 2rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 320px));
  justify-content: center;
  gap: 2rem;
}
.wycena-portfolio__item { min-width: 0; width: 100%; }

/* Final phone CTA */
.wycena-cta { padding: 4.5rem 1.5rem 6rem; text-align: center; }
.wycena-cta__inner { max-width: 560px; margin: 0 auto; }
.wycena-cta h2 {
  font-family: var(--fd-font-serif);
  font-weight: 400;
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  margin: 0 0 0.75rem;
}
.wycena-cta p { color: var(--fd-muted); margin: 0 0 1.75rem; }
.wycena-cta .button--outline {
  color: var(--fd-black);
  border-color: var(--fd-black);
}

body.path-webform .webform-submission-form {
  padding-bottom: 5rem;
}
body.path-webform .webform-submission-form .form-item,
body.path-webform .webform-submission-form .js-webform-type-fieldset {
  margin: 0 0 1.75rem;
}
body.path-webform .webform-submission-form label {
  display: block;
  font-family: var(--fd-font-sans);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--fd-black);
  margin: 0 0 0.5rem;
}
body.path-webform .webform-submission-form label.js-form-required.form-required::after {
  content: ' *';
  color: var(--fd-gold);
}
body.path-webform .webform-submission-form input[type='text'],
body.path-webform .webform-submission-form input[type='tel'],
body.path-webform .webform-submission-form input[type='email'],
body.path-webform .webform-submission-form select,
body.path-webform .webform-submission-form textarea {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  font-family: var(--fd-font-sans);
  font-size: 1rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--fd-border-on-light);
  background: #fff;
  color: var(--fd-black);
  border-radius: 0;
}
body.path-webform .webform-submission-form input:focus,
body.path-webform .webform-submission-form select:focus,
body.path-webform .webform-submission-form textarea:focus {
  outline: none;
  border-color: var(--fd-gold);
}
body.path-webform .webform-submission-form .description,
body.path-webform .webform-submission-form .webform-element-description {
  font-size: 0.85rem;
  color: var(--fd-muted);
  margin-top: 0.4rem;
  line-height: 1.5;
}
body.path-webform .webform-submission-form fieldset {
  border: 1px solid var(--fd-border-on-light);
  padding: 1.25rem 1.25rem 0.25rem;
  margin: 0 0 1.75rem;
}
body.path-webform .webform-submission-form fieldset .fieldset-legend {
  font-family: var(--fd-font-sans);
  font-size: 0.75rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fd-muted);
  padding: 0 0.4rem;
}
body.path-webform .webform-submission-form fieldset .fieldset-wrapper .form-item:last-child {
  margin-bottom: 1.25rem;
}
body.path-webform .js-form-managed-file {
  border: 1px dashed var(--fd-border-on-light);
  padding: 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
body.path-webform .js-form-managed-file .form-file {
  font-family: var(--fd-font-sans);
  font-size: 0.9rem;
}
body.path-webform .js-hide.button.js-form-submit.form-submit {
  font-family: var(--fd-font-sans);
  font-size: 0.85rem;
  padding: 0.55rem 0.9rem;
  border: 1px solid var(--fd-black);
  background: transparent;
  cursor: pointer;
}
body.path-webform .form-actions {
  margin-top: 1rem;
}
body.path-webform .webform-button--submit {
  width: 100%;
  justify-content: center;
  font-size: 1rem;
  padding: 1.1rem 1.5rem;
  cursor: pointer;
  border: none;
}
@media (max-width: 600px) {
  body.path-webform .region-sidebar-first,
  body.path-webform .region-content {
    padding: 0 1.25rem;
  }
  body.path-webform .region-sidebar-first {
    padding-top: 2.25rem;
  }
  body.path-webform .webform-submission-form fieldset {
    padding: 1rem 1rem 0.25rem;
  }
}

/* ===================================================================
   Public mobile UX compaction pass — <= 700px only.
   Desktop rules above are untouched; every declaration below only takes
   effect inside this media query, reducing vertical spacing on the
   sections that were unnecessarily tall on small screens. No copy,
   content, images, form fields/validation or routes are changed.
   =================================================================== */
@media (max-width: 700px) {
  /* 2. Hero: keep the image/copy/CTA layout, just tighten the vertical
     padding around it. */
  .hero__inner { padding: 2.5rem 1.25rem; }
  .hero__heading { margin-bottom: 1rem; }
  .hero__lead { margin-bottom: 1.5rem; }

  /* 3. Selected projects: the swipe/snap behaviour with a small peek of
     the next card is already the intended mobile design (see the
     existing max-width:640px rule above) — just make each card a bit
     less tall so more of the section is visible at once. */
  .project-card__body { padding: 1rem; }

  /* 4. Offer cards: tighter heading margin, substantially less card
     padding and inter-card gap, the decorative gold dash removed (its
     top margin was also acting as the card's top spacing, so that
     spacing is replaced by real padding on the link below). Text and
     card count/content are unchanged; font-sizes are untouched so
     nothing gets too small to read. */
  .oferta { padding: 2.75rem 1.25rem; }
  .oferta__heading { margin-bottom: 1.5rem; }
  .oferta-grid ul { gap: 0.6rem; }
  .oferta-grid li::before { display: none; }
  .oferta-grid li a { padding: 0.85rem 1rem; }
  .oferta-grid li strong { margin-bottom: 0.2rem; }

  /* 5. "Jak pracujemy" homepage preview (01 Pomiar / 02 Projekt /
     03 Produkcja / 04 Montaż): same four steps, much less dead space
     around and between them. */
  .process-preview { padding: 2.75rem 1.25rem; }
  .process-preview__steps { margin: 1.5rem 0; gap: 1.25rem; }

  /* Same step pattern reused on /wycena. */
  .wycena-process { padding: 2.5rem 1.25rem; }
  .wycena-process__steps { margin-top: 1.5rem; gap: 1.5rem; }

  /* /o-nas (and the same shared .project-page pattern on /jak-pracujemy,
     /kontakt): much less top/bottom padding, tighter header margin and
     paragraph spacing, slightly less side padding. Wording/content is
     untouched — this is layout only. */
  .project-page { padding: 1.5rem 1.25rem 2.5rem; }
  .project-page__header { margin-bottom: 1rem; }
  .project-page__title { text-wrap: balance; }
  .project-page__body { margin-bottom: 1.5rem; }
  .project-page__body p {
    line-height: 1.55;
    margin: 0 0 0.9rem;
  }

  /* 6. Quote form: tighter section padding/margins; fields themselves
     (width, padding, font-size) are left alone so touch targets don't
     shrink. */
  .wycena-lead__intro { margin-bottom: 1.25rem; }
  .wycena-next { padding: 2.25rem 1.25rem; margin-top: 1.5rem; }
  .wycena-next__heading { margin-bottom: 1rem; }
  .wycena-next__list { gap: 0.9rem; }
  body.path-webform .webform-submission-form .form-item,
  body.path-webform .webform-submission-form .js-webform-type-fieldset {
    margin: 0 0 1.1rem;
  }
  body.path-webform .webform-submission-form .description,
  body.path-webform .webform-submission-form .webform-element-description {
    margin-top: 0.25rem;
  }
  body.path-webform .webform-submission-form fieldset {
    margin: 0 0 1.1rem;
  }

  /* /kontakt contact-details panel: same one card, same wording (intro,
     phone/e-mail/Messenger list, area-of-activity paragraph — all from
     the untouched body field), just visually tightened into compact,
     scannable rows instead of a long block of text. Structural selectors
     (:first-of-type / :last-of-type on the field's direct <p> children)
     target the intro and area paragraphs without needing any markup or
     wording change. */
  .contact-details-panel { padding: 1.25rem; }
  .contact-details-panel .field--name-body > p {
    line-height: 1.55;
    margin: 0 0 1rem;
  }
  .contact-details-panel ul {
    margin: 0 0 1rem;
    gap: 0;
  }
  .contact-details-panel li {
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--fd-border-on-light);
  }
  .contact-details-panel li:last-child { border-bottom: 0; }
  .contact-details-panel li strong { font-size: 0.72rem; }
  .contact-details-panel li a { font-weight: 650; }
  /* E-mail address only (matched by its mailto: link, not by row order,
     so this stays correct regardless of content changes) — the address
     was rendering at the same size/weight as everything else and, being
     the longest single token in the card, dominated the layout. Phone
     number and Messenger text are untouched. */
  .contact-details-panel li a[href^="mailto:"] {
    font-size: 0.9rem;
    overflow-wrap: anywhere;
    word-break: normal;
  }
  .contact-details-panel .field--name-body > p:last-of-type {
    margin: 0.15rem 0 0;
    padding-top: 0.9rem;
    border-top: 1px solid var(--fd-border-on-light);
    color: var(--fd-muted);
    font-size: 0.85rem;
  }
}

/* ---- Public language switcher (PL / EN / DE) ---- */
/* Now a direct child of .site-header__inner (a sibling of .brand,
   .nav-toggle and .site-nav) rather than nested inside the collapsible
   .site-nav, so it stays visible at all times — including on mobile
   before the hamburger menu is opened. The active language is filtered
   out in the template, so at most two codes ever show
   (e.g. "EN · DE" on the Polish site), keeping it compact with no
   .is-active styling needed any more. */
.lang-switch {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
}
.lang-switch a {
  font-family: var(--fd-font-sans);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--fd-muted);
  text-decoration: none;
  white-space: nowrap;
}
.lang-switch a:hover { color: var(--fd-gold); }
.lang-switch__sep { color: var(--fd-muted); font-size: 0.8rem; }

/* Flag presentation, now used at ALL widths (previously desktop showed
   the "EN · DE" text code and only mobile <=700px swapped to flags).
   Both spans always exist in the markup (each link also carries its own
   aria-label with the full language name, e.g. "English"), so the code
   span stays visually hidden (clipped, not display:none) rather than
   removed — it remains available to assistive tech as backup content,
   and the flag itself is aria-hidden since the link's aria-label is the
   real accessible name. */
.lang-switch__flag {
  display: inline-block;
  width: 20px;
  height: 14px;
  vertical-align: middle;
  border-radius: 1px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
  object-fit: cover;
}
.lang-switch__code {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (max-width: 860px) {
  /* Sits between the logo and the hamburger toggle in the collapsed
     header row: .brand keeps order 0 (source order), this is pulled in
     front of the toggle (order 1) and the toggle bumped to order 2, so
     the row reads logo — PL/EN/DE — hamburger, with .site-nav (order 4)
     still dropping to its own full-width row only once opened. Compact
     and nowrap so it never wraps or forces horizontal overflow at
     narrow widths (360–430px tested). */
  .nav-toggle { order: 2; }
  .lang-switch { order: 1; margin-left: 0; margin-right: 0.5rem; }
}
@media (max-width: 700px) {
  /* Fine alignment pass only, on top of the 860px rule above: the
     .lang-switch text sits visually slightly low against the
     hamburger's three bars, and the two were a touch too close
     together at narrow widths. A small negative top margin lifts the
     text baseline closer to the icon's vertical center, and the
     right-margin bump adds breathing room before .nav-toggle — logo
     position, hamburger behaviour and the compact nowrap row are all
     unchanged. */
  .lang-switch { margin-top: -2px; margin-right: 0.75rem; }
}

/* ---- Site footer / discreet staff login ---- */
.site-footer { padding: 1.5rem; text-align: center; }
.site-footer__legal { margin-top: 0.5rem; }
.site-footer__legal a {
  font-size: 0.82rem;
  color: var(--fd-muted);
  text-decoration: underline;
}
.site-footer__legal a:hover { color: inherit; }
.site-footer__staff { margin-top: 0.5rem; }
.site-footer__staff a {
  font-size: 0.78rem;
  color: var(--fd-muted);
  text-decoration: none;
}
.site-footer__staff a:hover { text-decoration: underline; }

/* ---- Realizacja gallery model v2 ---- */

.project-page--realizacja .project-page__hero {
  margin: 0 0 2.5rem;
}

.project-gallery-section {
  margin-top: 2.5rem;
}

.project-gallery-section--additional {
  padding-top: 0.5rem;
}

.project-gallery__title {
  margin: 0 0 1rem;
  font-family: var(--fd-font-serif);
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  font-weight: 400;
  color: var(--fd-black);
}

.project-gallery__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.project-gallery__grid--hero {
  grid-template-columns: 1fr;
}

.project-gallery__item {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  cursor: zoom-in;
}

.project-gallery__grid--hero .project-gallery__item {
  aspect-ratio: 16 / 9;
}

.project-gallery__item img,
.project-gallery__item picture,
.project-gallery__item picture img {
  display: block;
  width: 100%;
  height: 100%;
}

.project-gallery__item img,
.project-gallery__item picture img {
  object-fit: cover;
}

@media (max-width: 1023px) {
  .project-gallery__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .project-gallery__grid--hero {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .project-gallery__grid {
    grid-template-columns: 1fr;
  }

  .project-page--realizacja .project-page__hero {
    margin-bottom: 1.5rem;
  }

  .project-gallery-section {
    margin-top: 1.75rem;
  }
}