/*
Theme Name: 4m Concept
Theme URI: https://4m-concept.pl
Author: 4m Concept
Description: Motyw blokowy (Full Site Editing) dla pracowni architektonicznej 4m Concept. Semantyczny HTML, minimalny JavaScript, wszystkie sekcje edytowalne z panelu WordPressa.
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: 4m-concept
Tags: full-site-editing, blog, portfolio, block-patterns, translation-ready
*/

/* ==========================================================================
   1. Zmienne — jedna paleta dla całego serwisu
   ========================================================================== */
:root {
  --c-ink: #1a1a1a;
  --c-ink-soft: #2e2e2e;
  --c-body: #3d3d3d;
  --c-muted: #7a7a7a;
  --c-muted-2: #6b6b6b;
  --c-cream: #f7f4ef;
  --c-line: #e6e1da;
  --c-line-2: #e0dad1;
  --c-line-3: #efeae3;
  --c-field: #d8d1c7;
  --c-accent: #a85c3c;
  --c-accent-dark: #8a4629;
  --c-sand: #e0c4b4;
  --c-ph: #e9e4dc;
  --c-footer: #111111;

  --wrap: 1280px;
  --gutter: clamp(20px, 4vw, 40px);
  --pad-section: clamp(56px, 8vw, 96px);
  --pad-section-sm: clamp(40px, 6vw, 72px);

  --ls-caps: 0.18em;
  --ls-eyebrow: 0.28em;
}

/* ==========================================================================
   2. Reset i typografia bazowa
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: #fff;
  color: var(--c-ink);
  font-family: "Jost", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 300;
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.14;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: clamp(30px, 4.6vw, 50px); line-height: 1.08; letter-spacing: -0.015em; }
h2 { font-size: clamp(26px, 3.4vw, 38px); }
h3 { font-size: clamp(20px, 2.2vw, 24px); }
h4 { font-size: 17px; }

p { margin: 0 0 1.1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--c-accent); text-decoration: none; transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease; }
a:hover, a:focus-visible { color: var(--c-accent-dark); }
:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; }

img, svg, iframe { max-width: 100%; }
img { height: auto; display: block; }

figure { margin: 0; }
figcaption, .wp-element-caption {
  margin-top: 14px;
  font-size: 13px;
  color: var(--c-muted);
  font-weight: 300;
  text-align: left;
}

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link:focus {
  position: fixed; top: 12px; left: 12px; z-index: 999;
  width: auto; height: auto; clip: auto;
  background: var(--c-ink); color: #fff; padding: 12px 20px;
  font-size: 12px; letter-spacing: var(--ls-caps); text-transform: uppercase;
}

/* ==========================================================================
   3. Układ — kontenery i sekcje
   ========================================================================== */
.wp-site-blocks > * { margin-block-start: 0; }

.fm-wrap,
.wp-block-group.fm-wrap > .wp-block-group__inner-container {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.fm-section { padding-block: var(--pad-section); }
.fm-section--sm { padding-block: var(--pad-section-sm); }
.fm-section--flush-bottom { padding-bottom: 0; }

.fm-bg-cream { background: var(--c-cream); }
.fm-bg-ink { background: var(--c-ink); color: #fff; }
.fm-bg-white { background: #fff; }
.fm-border-top { border-top: 1px solid var(--c-line); }
.fm-border-bottom { border-bottom: 1px solid var(--c-line); }

.fm-bg-ink h1, .fm-bg-ink h2, .fm-bg-ink h3, .fm-bg-ink h4 { color: #fff; }
.fm-bg-ink p { color: rgba(255, 255, 255, 0.75); }

/* Kolumny i siatki */
.fm-cols-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px clamp(40px, 5vw, 80px);
}
.fm-cols-2--wide { gap: 40px clamp(40px, 6vw, 80px); align-items: start; }
.fm-cols-4 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 28px 40px;
}
.fm-row { display: flex; flex-wrap: wrap; gap: clamp(24px, 4vw, 56px); }

/* .fm-cols-2, .fm-cols-4, .fm-stats, .fm-layout-aside i .fm-row używają grup
   blokowych z domyślnym układem WP ("is-layout-flow"), które WordPress mimo
   to rozstawia własnym odstępem góra (--wp--style--block-gap) na każdym
   dziecku poza pierwszym — przy display:grid/flex nadanym przez powyższe
   klasy ten odstęp psuje wyrównanie elementów w wierszu, więc go zerujemy i
   odstępy zostawiamy wyłącznie „gap" z siatki/flexa. */
.fm-cols-2 > *,
.fm-cols-4 > *,
.fm-stats > *,
.fm-layout-aside > *,
.fm-row > * {
  margin-block-start: 0 !important;
}

/* ==========================================================================
   4. Elementy powtarzalne
   ========================================================================== */
.fm-eyebrow {
  font-size: 12px;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-accent);
  font-weight: 600;
  margin-bottom: 16px;
}
.fm-bg-ink .fm-eyebrow { color: var(--c-sand); }

.fm-caps {
  font-size: 12px;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--c-muted);
}

.fm-lead { font-size: 19px; line-height: 1.65; color: var(--c-body); max-width: 62ch; }
.fm-text { font-size: 17.5px; line-height: 1.8; color: var(--c-ink-soft); }
.fm-measure { max-width: 70ch; }

/* Nagłówek strony (landing typu „Konsultacja”), pod którym stoi .fm-lead —
   bez ograniczenia h1 zawijałby się przy zupełnie innej szerokości niż węższy
   od niego tekst pod spodem (ten sam zabieg, co .fm-post-head dla wpisu). */
.fm-page-head h1 { max-width: 22ch; }

.fm-rule {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 32px; flex-wrap: wrap;
  padding-bottom: 26px; margin-bottom: clamp(36px, 4.5vw, 52px);
  border-bottom: 1px solid var(--c-ink);
}
.fm-rule > * { margin: 0; }

/* Liczniki */
.fm-stats { display: flex; flex-wrap: wrap; gap: clamp(28px, 4vw, 56px); }
.fm-stats__value { font-size: 32px; font-weight: 600; letter-spacing: -0.02em; line-height: 1; }
.fm-stats__label { font-size: 12px; letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--c-muted); margin-top: 6px; }

/* Przyciski */
.fm-btn,
.wp-block-button.is-style-fm-primary .wp-block-button__link {
  display: inline-block;
  background: var(--c-accent);
  color: #fff;
  padding: 17px 32px;
  font-size: 12.5px;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  font-weight: 600;
  border: 0; border-radius: 0;
  cursor: pointer;
  font-family: inherit;
}
.fm-btn:hover, .fm-btn:focus-visible,
.wp-block-button.is-style-fm-primary .wp-block-button__link:hover {
  background: var(--c-accent-dark); color: #fff;
}

.fm-btn--outline,
.wp-block-button.is-style-fm-outline .wp-block-button__link {
  background: transparent;
  color: var(--c-ink);
  border: 1px solid var(--c-ink);
  padding: 16px 30px;
  border-radius: 0;
  font-size: 12.5px;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  font-weight: 600;
}
.fm-btn--outline:hover,
.wp-block-button.is-style-fm-outline .wp-block-button__link:hover {
  background: var(--c-ink); color: #fff;
}
.fm-bg-ink .fm-btn--outline,
.fm-bg-ink .wp-block-button.is-style-fm-outline .wp-block-button__link,
.fm-hero .wp-block-button.is-style-fm-outline .wp-block-button__link {
  color: #fff; border-color: rgba(255, 255, 255, 0.55);
}
.fm-bg-ink .fm-btn--outline:hover,
.fm-bg-ink .wp-block-button.is-style-fm-outline .wp-block-button__link:hover,
.fm-hero .wp-block-button.is-style-fm-outline .wp-block-button__link:hover {
  background: #fff; color: var(--c-ink); border-color: #fff;
}

/* Link tekstowy z podkreśleniem */
.fm-link,
.wp-block-button.is-style-fm-link .wp-block-button__link {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12.5px; letter-spacing: var(--ls-caps); text-transform: uppercase; font-weight: 600;
  color: var(--c-ink);
  background: none; padding: 0 0 8px; border: 0;
  border-bottom: 1px solid var(--c-sand); border-radius: 0;
}
.fm-link:hover, .wp-block-button.is-style-fm-link .wp-block-button__link:hover {
  color: var(--c-accent); border-color: var(--c-accent);
}
.fm-link--strong { border-bottom-color: var(--c-ink); }

/* Cytat */
blockquote, .wp-block-quote {
  margin: clamp(40px, 5vw, 60px) 0;
  padding: 0 0 0 clamp(24px, 3vw, 36px);
  border-left: 2px solid var(--c-accent);
}
blockquote p, .wp-block-quote p {
  font-size: clamp(21px, 2.4vw, 26px);
  line-height: 1.45;
  font-weight: 400;
  color: var(--c-ink);
}
blockquote cite { font-size: 14px; color: var(--c-muted); font-style: normal; }

/* Lista z akcentem */
.fm-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.fm-list li {
  font-size: 15.5px; line-height: 1.6; color: var(--c-body);
  padding-left: 16px; border-left: 2px solid var(--c-sand);
}

/* Kroki „Jak pracuję” / „Co omawiamy” */
.fm-steps__item { border-top: 1px solid var(--c-ink); padding-top: 20px; }
.fm-steps__num { font-size: 11.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--c-accent); font-weight: 600; }
.fm-steps__item h3, .fm-steps__item h4 { margin: 12px 0 0; font-size: 19px; }
.fm-steps__item p { margin: 12px 0 0; font-size: 16px; line-height: 1.7; color: var(--c-body); }

/* Panel informacyjny na kremowym tle */
.fm-panel {
  background: var(--c-cream);
  border-top: 1px solid var(--c-ink);
  padding: clamp(24px, 3.5vw, 40px);
}
.fm-panel--ink { background: var(--c-ink); color: #fff; border-top: 0; }
/* Wewnątrz .fm-aside/.fm-aside__block kolor tekstu narzucają reguły z sekcji
   8 (dopasowane do jasnego tła) — na ciemnym panelu robią się nieczytelne,
   więc tutaj wymuszamy te same kolory, co na innych ciemnych tłach (.fm-bg-ink). */
.fm-panel--ink .fm-eyebrow { color: var(--c-sand) !important; }
.fm-panel--ink p { color: rgba(255, 255, 255, 0.75) !important; }

/* ==========================================================================
   5. Nagłówek i nawigacja
   ========================================================================== */
.fm-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--c-ink); color: #fff;
}
.fm-header a { color: #fff; }
.fm-header__inner {
  max-width: var(--wrap); margin-inline: auto;
  padding: 10px var(--gutter); min-height: 72px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
}
.fm-logo { display: flex; align-items: center; gap: 12px; }
.fm-logo__mark { flex: none; display: flex; }
.fm-logo__mark svg { width: 26px; height: 26px; display: block; }
.fm-logo__text { font-size: 19px; letter-spacing: 0.22em; text-transform: uppercase; }
.fm-logo__text strong { font-weight: 700; }
.fm-logo__text span { font-weight: 300; }

/* Menu (blok nawigacji) */
.fm-nav { font-size: 12.5px; letter-spacing: var(--ls-caps); text-transform: uppercase; font-weight: 500; }
.fm-nav .wp-block-navigation__container { gap: clamp(16px, 2.4vw, 34px); align-items: center; }
.fm-nav .wp-block-navigation-item__content { color: #fff; padding: 0; }
.fm-nav .current-menu-item > .wp-block-navigation-item__content,
.fm-nav .current-menu-ancestor > .wp-block-navigation-item__content,
.fm-nav .current_page_item > .wp-block-navigation-item__content {
  border-bottom: 1px solid var(--c-accent); padding-bottom: 3px;
}
/* Rozwijane podmenu — bez JS, na hover i focus */
.fm-nav .wp-block-navigation__submenu-container {
  min-width: 250px; left: -14px; top: 100%;
  background: var(--c-ink);
  border: 1px solid rgba(255, 255, 255, 0.16);
  padding: 0;
}
.fm-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  padding: 15px 22px; font-size: 12px; letter-spacing: 0.16em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.fm-nav .wp-block-navigation__submenu-container li:last-child .wp-block-navigation-item__content { border-bottom: 0; }
.fm-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover { background: var(--c-accent); }

/* Wyróżniony element menu: klasa CSS „fm-nav-cta” w edytorze menu */
.fm-nav .fm-nav-cta > .wp-block-navigation-item__content {
  background: var(--c-accent); padding: 12px 20px; letter-spacing: 0.14em; border-bottom: 0;
}
.fm-nav .fm-nav-cta > .wp-block-navigation-item__content:hover { background: var(--c-accent-dark); }

/* ==========================================================================
   6. Okruszki
   ========================================================================== */
.fm-breadcrumbs {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--c-muted); font-weight: 500;
}
.fm-breadcrumbs a { color: var(--c-muted); }
.fm-breadcrumbs a:hover { color: var(--c-ink); }
.fm-breadcrumbs [aria-current="page"] { color: var(--c-ink); }
.fm-breadcrumbs__sep { color: var(--c-muted); }

/* ==========================================================================
   7. Karty wpisów i realizacji (query loop)
   ========================================================================== */
.fm-grid.wp-block-post-template,
.fm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: clamp(40px, 5vw, 56px) 32px;
  margin: 0; padding: 0; list-style: none;
}
.fm-grid > * { margin-block: 0 !important; }
.fm-grid--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(36px, 4vw, 48px) 32px; }

.fm-card { display: flex; flex-direction: column; min-width: 0; }
.fm-card .wp-block-post-featured-image { margin: 0; }
.fm-card .wp-block-post-featured-image img,
.fm-thumb img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--c-ph);
}

/* Blok „Obraz” bez wybranego zdjęcia — patrz fmc_image_placeholder() w inc/blocks.php. */
.fm-thumb--empty {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 220px;
  aspect-ratio: 4 / 3;
  background: var(--c-ph); color: var(--c-muted);
}
.fm-thumb--empty .fm-thumb__icon svg { width: 40px; height: 40px; display: block; }
.fm-card__meta {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 20px;
  font-size: 12px; letter-spacing: var(--ls-caps); text-transform: uppercase;
  color: var(--c-muted); font-weight: 500;
}
.fm-card__meta .fm-dash { width: 20px; height: 1px; background: var(--c-field); }
.fm-card .wp-block-post-title { margin: 12px 0 0; font-size: 21px; line-height: 1.32; font-weight: 500; }
.fm-card .wp-block-post-title a { color: var(--c-ink); }
.fm-card .wp-block-post-title a:hover { color: var(--c-accent); }
.fm-card .wp-block-post-excerpt { margin: 12px 0 0; }
.fm-card .wp-block-post-excerpt__excerpt { font-size: 15.5px; line-height: 1.7; color: var(--c-body); }
.fm-card .wp-block-post-excerpt__more-link,
.fm-card .fm-link { margin-top: 20px; align-self: flex-start; font-size: 12px; }

/* Wyróżnione wpisy — numerowany wariant na ciemnym tle */
.fm-bg-ink .fm-card .wp-block-post-title a { color: #fff; }
.fm-bg-ink .fm-card .wp-block-post-title a:hover { color: var(--c-sand); }
.fm-bg-ink .fm-card__meta { color: var(--c-sand); }
.fm-bg-ink .fm-card .wp-block-post-excerpt__excerpt { color: rgba(255, 255, 255, 0.65); }
.fm-bg-ink .fm-card .wp-block-post-featured-image img { background: #2a2a2a; }

/* Paginacja */
.wp-block-query-pagination {
  margin-top: clamp(56px, 7vw, 88px); padding-top: 32px;
  border-top: 1px solid var(--c-line);
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.wp-block-query-pagination-numbers { display: flex; gap: 8px; align-items: center; }
.wp-block-query-pagination-numbers .page-numbers,
.wp-block-query-pagination-previous,
.wp-block-query-pagination-next {
  min-width: 44px; min-height: 44px; padding: 0 14px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--c-line); color: var(--c-ink);
  font-size: 14px; font-weight: 600; letter-spacing: 0.04em;
}
.wp-block-query-pagination-numbers .page-numbers:hover,
.wp-block-query-pagination-previous:hover,
.wp-block-query-pagination-next:hover { border-color: var(--c-accent); color: var(--c-accent); }
.wp-block-query-pagination-numbers .page-numbers.current {
  background: var(--c-ink); border-color: var(--c-ink); color: #fff;
}

/* ==========================================================================
   8. Wpis blogowy
   ========================================================================== */
.fm-post-head .wp-block-post-title { max-width: 22ch; }
.fm-post-meta {
  display: flex; align-items: center; gap: clamp(20px, 3vw, 40px); flex-wrap: wrap;
  margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--c-line-2);
}
.fm-author { display: flex; align-items: center; gap: 14px; }
.fm-author .avatar, .fm-author img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; background: var(--c-ph); }
.fm-author__name { font-size: 15px; font-weight: 600; }
.fm-author__role { font-size: 12.5px; color: var(--c-muted); font-weight: 300; }

.fm-content { max-width: 70ch; }
.fm-content > * + * { margin-top: 20px; }
.fm-content h2 { margin-top: clamp(44px, 5vw, 64px); font-size: clamp(24px, 2.8vw, 30px); line-height: 1.2; scroll-margin-top: 104px; }
.fm-content h3 { margin-top: 36px; font-size: 19px; line-height: 1.35; }
.fm-content p, .fm-content li { font-size: 17.5px; line-height: 1.8; color: var(--c-ink-soft); }
.fm-content ul, .fm-content ol { padding-left: 22px; }
.fm-content figure { margin-block: clamp(32px, 4vw, 44px); }

/* Spis treści / kolumna boczna */
.fm-layout-aside {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
  gap: clamp(40px, 6vw, 80px);
  align-items: start;
}
.fm-aside { position: sticky; top: 104px; display: flex; flex-direction: column; gap: 32px; min-width: 0; }
.fm-aside__block { border-top: 1px solid var(--c-line); padding-top: 24px; }
.fm-aside h2, .fm-aside h3, .fm-aside__block h2, .fm-aside__block h3 { font-size: 11.5px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 600; }
.fm-aside__block > *:not(h2):not(h3) { margin-top: 18px; }
.fm-aside p:not(.fm-eyebrow), .fm-aside li, .fm-aside__block p:not(.fm-stats__value):not(.fm-stats__label):not(.fm-eyebrow), .fm-aside__block li { font-size: 15.5px; line-height: 1.7; color: var(--c-body); }

/* Spis treści (skrót [4m_spis_tresci], patrz inc/shortcodes.php) */
.fm-toc__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; }
.fm-toc__list a { display: flex; gap: 12px; color: var(--c-ink); }
.fm-toc__list a:hover .fm-toc__label { color: var(--c-accent); }
.fm-toc__num { flex: none; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; color: var(--c-accent); }
.fm-toc__label { font-size: 15px; line-height: 1.5; }

/* Udostępnianie i ikony społecznościowe */
.fm-share {
  margin-top: clamp(48px, 6vw, 72px); padding-top: 32px; border-top: 1px solid var(--c-line);
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.fm-icons { display: flex; gap: 12px; flex-wrap: wrap; }
.fm-icons a {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--c-line); color: var(--c-ink);
}
.fm-icons a:hover { border-color: var(--c-accent); color: var(--c-accent); }
.fm-bg-ink .fm-icons a, .fm-footer .fm-icons a { width: 40px; height: 40px; border-color: rgba(255, 255, 255, 0.2); color: #fff; }
.fm-bg-ink .fm-icons a:hover, .fm-footer .fm-icons a:hover { border-color: var(--c-accent); }

/* Warianty „Logo tylko” bloku „Odnośniki społecznościowe” wpisują kolor marki
   (Facebook, Instagram…) na tyle mocną regułą, że zwykłe .fm-icons a jej nie
   przebije — tutaj wymuszamy jednolity, czarno-biały styl przycisku z
   widoczną etykietą (atrybut bloku „showLabels”), zamiast kolorowych ikon. */
.fm-icons--labeled a {
  width: auto; height: auto;
  gap: 10px; padding: 12px 20px;
  background: #fff;
  font-size: 12.5px; letter-spacing: var(--ls-caps); text-transform: uppercase; font-weight: 600;
}
.fm-icons--labeled a, .fm-icons--labeled a svg { color: var(--c-ink) !important; fill: currentColor !important; }
.fm-icons--labeled a:hover, .fm-icons--labeled a:hover svg { color: var(--c-accent) !important; }
.fm-icons--labeled svg { width: 18px; height: 18px; flex: none; }
.fm-icons--labeled .wp-block-social-link-label { margin: 0 !important; font-size: inherit !important; }

/* Nota o autorce pod wpisem (core/avatar + znacznik <!--FMC_AUTORKA-->, patrz inc/shortcodes.php) */
.fm-author-card { align-items: flex-start; gap: clamp(24px, 3vw, 48px); }
.fm-author-card__avatar { flex: none; width: 190px; }
.fm-author-card__avatar img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border: 10px solid var(--c-line); display: block; }

/* Siatka CSS zamiast dwóch niezależnych kolumn flex — dzięki wspólnym
   wierszom (grid-row) górna krawędź biogramu w prawej kolumnie zawsze
   wyrówna się do biogramu w lewej, niezależnie od tego, ile miejsca zajmie
   „Autorka” + imię nad nim (patrz komentarz przy fmc_render_autorka()). */
.fm-author-card__text {
  flex: 1 1 480px; min-width: 0;
  display: grid; grid-template-columns: repeat(2, 1fr);
  column-gap: clamp(32px, 4vw, 74px);
}
.fm-author-card__text > .fm-eyebrow { grid-column: 1; grid-row: 1; }
.fm-author-card__name { grid-column: 1; grid-row: 2; margin-top: 0; margin-bottom: 14px; }
.fm-author-card__bio { grid-column: 1; grid-row: 3; }
.fm-author-card__bio--extra { grid-column: 2; grid-row: 3; }
.fm-author-card__bio p:not(.fm-author-card__more) { margin: 0 0 16px; font-size: 15.5px; line-height: 1.7; color: var(--c-body); }
.fm-author-card__bio p:not(.fm-author-card__more):last-child { margin-bottom: 0; }
.fm-author-card__bio p.fm-author-card__more { margin-top: 4px; }

/* ==========================================================================
   9. Realizacja — opis, galeria i dane tabelaryczne
   ========================================================================== */
/* Opis realizacji pod H1 (patrz fmc_render_realizacja_intro() w inc/shortcodes.php)
   — dowolna liczba akapitów wpisanych przez admina rozkłada się sama w dwie
   kolumny; przy jednym akapicie druga po prostu zostaje pusta. */
.fm-realizacja-intro { margin-top: 18px; column-count: 2; column-gap: clamp(32px, 4vw, 74px); }
.fm-realizacja-intro p { margin: 0 0 1em; font-size: 16px; line-height: 1.7; color: var(--c-body); break-inside: avoid; }
.fm-realizacja-intro p:last-child { margin-bottom: 0; }

.fm-hero-image img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--c-ph); }

/* Galeria: jedno duże zdjęcie w treści + siatka mniejszych.
   Ostatni, niepełny wiersz nie rozciąga kadrów ponad rozmiar pozostałych. */
.fm-gallery.wp-block-gallery, .fm-gallery {
  display: flex; flex-wrap: wrap; gap: 20px; margin-top: 20px;
}
.fm-gallery .wp-block-image, .fm-gallery figure {
  flex: 1 1 240px; max-width: calc(33.333% - 14px); min-width: 0; margin: 0;
}
.fm-gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--c-ph); }
@media (max-width: 800px) {
  .fm-gallery .wp-block-image, .fm-gallery figure { max-width: calc(50% - 10px); }
}
@media (max-width: 520px) {
  .fm-gallery .wp-block-image, .fm-gallery figure { max-width: 100%; }
}

/* Dane inwestycji — sąsiaduje z .fm-aside (patrz sekcja 8), więc pozycjonowanie
   i przyklejenie panelu bocznego są współdzielone z wpisem blogowym, zamiast
   duplikowane tutaj. */
.fm-facts h2 { padding-bottom: 22px; border-bottom: 1px solid var(--c-ink); font-size: clamp(22px, 2.6vw, 28px); }
.fm-facts dl { margin: 0; display: flex; flex-direction: column; }
.fm-facts__row {
  display: flex; flex-wrap: wrap; gap: 8px 32px;
  padding: 17px 0; border-bottom: 1px solid var(--c-line-3);
}
.fm-facts dt {
  flex: 0 0 200px;
  font-size: 12px; letter-spacing: var(--ls-caps); text-transform: uppercase;
  color: var(--c-muted); font-weight: 600; padding-top: 2px;
}
.fm-facts dd { margin: 0; flex: 1 1 240px; min-width: 0; font-size: 16.5px; line-height: 1.6; font-weight: 400; color: var(--c-ink); }

/* ==========================================================================
   10. Kontakt — karty danych, mapa, formularz
   ========================================================================== */
.fm-contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.fm-contact-card {
  background: #fff; border: 1px solid var(--c-line-2);
  padding: clamp(24px, 3vw, 32px);
  display: flex; flex-direction: column; gap: 12px;
}
.fm-contact-card__label { font-size: 11.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--c-accent); font-weight: 600; }
.fm-contact-card__value { font-size: 22px; font-weight: 400; letter-spacing: -0.01em; color: var(--c-ink); word-break: break-word; }
a.fm-contact-card__value:hover { color: var(--c-accent); }
.fm-contact-card__note { font-size: 14px; color: var(--c-muted-2); font-weight: 300; }

.fm-map-row { display: flex; flex-wrap: wrap; gap: clamp(24px, 3vw, 32px); align-items: stretch; }
.fm-map { flex: 2 1 420px; min-width: 0; min-height: 420px; border: 1px solid var(--c-line); background: var(--c-ph); }
.fm-map iframe, .fm-map > * { width: 100%; height: 100%; min-height: 420px; border: 0; display: block; }
.fm-map-side { flex: 1 1 300px; min-width: 0; }

/* Formularz */
.fm-form-layout { display: flex; flex-wrap: wrap; gap: clamp(40px, 6vw, 80px); align-items: flex-start; }
.fm-form-layout__intro { flex: 1 1 260px; min-width: 0; }
.fm-form-box { flex: 2 1 480px; min-width: 0; background: #fff; border: 1px solid var(--c-line); padding: clamp(28px, 4vw, 48px); }

.fm-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; }
.fm-form__field { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.fm-form__field--full { grid-column: 1 / -1; }
.fm-form__label { font-size: 11.5px; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 600; }
.fm-form input[type="text"],
.fm-form input[type="email"],
.fm-form input[type="tel"],
.fm-form select,
.fm-form textarea {
  width: 100%;
  border: 1px solid var(--c-field); border-radius: 0;
  background: #fff; color: var(--c-ink);
  padding: 15px 16px; font-size: 16px; font-weight: 300;
  font-family: inherit;
}
.fm-form textarea { line-height: 1.6; resize: vertical; }
.fm-form input::placeholder, .fm-form textarea::placeholder { color: #a5a09a; }
.fm-form input:focus, .fm-form select:focus, .fm-form textarea:focus { outline: none; border-color: var(--c-accent); }
.fm-form__consent { display: flex; gap: 14px; align-items: flex-start; grid-column: 1 / -1; }
.fm-form__consent input { width: 20px; height: 20px; flex: none; margin-top: 2px; accent-color: var(--c-accent); }
.fm-form__consent span { font-size: 14px; line-height: 1.6; color: var(--c-muted-2); }
.fm-form__actions { grid-column: 1 / -1; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: 4px; }
.fm-form__hint { font-size: 14px; color: var(--c-muted-2); font-weight: 300; }
.fm-form__honeypot { position: absolute; left: -9999px; }

.fm-notice { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; padding: clamp(20px, 3vw, 32px) 0; }
.fm-notice h2, .fm-notice h3 { font-size: 24px; }
.fm-notice p { font-size: 16.5px; line-height: 1.7; color: var(--c-body); max-width: 46ch; }
.fm-notice--error p { color: #8a2b2b; }

/* ==========================================================================
   10.5 Strona główna — filary, opinie, FAQ
   ========================================================================== */
.fm-hero { background: var(--c-ink); margin-bottom: 0; padding: 0 !important; }
.fm-hero + * { margin-top: 0; }
/* Sekcje strony same zarządzają odstępami przez własny padding — WordPress dodaje
   dodatkowe 24px odstępu góra między kolejnymi elementami głównego <main>, co daje
   niepożądane białe pasy między sekcjami (i częściami szablonu, np. CTA kontaktu). */
main.wp-block-group > * { margin-top: 0 !important; }
.fm-hero .wp-block-cover__inner-container {
  flex: 1 1 100% !important;
  width: 100% !important;
  max-width: none !important;
  padding-inline: 0 !important;
  padding-block: clamp(48px, 8vw, 96px);
}
.fm-hero .wp-block-cover__inner-container .fm-wrap { margin-inline: auto; }

/*
 * Poniższe reguły wymuszają wygląd hero niezależnie od atrybutów zapisanych
 * w treści (contentPosition, dimRatio, layout wewnętrznej grupy). Edytor WP
 * potrafi przy zwykłym zapisie strony przywrócić starsze wartości tych
 * atrybutów (np. gdy w przeglądarce była otwarta nieaktualna karta edytora) —
 * dzięki temu wygląd sekcji nie zależy już od tego i nie "rozjeżdża się"
 * przy każdej edycji tekstu.
 */
.fm-hero .fm-wrap.is-layout-constrained > * {
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.fm-hero.wp-block-cover {
  align-items: flex-end !important;
  justify-content: flex-start !important;
}
.fm-hero .wp-block-cover__background {
  opacity: 1 !important;
}
@media (min-width: 700px) {
  .fm-hero .fm-wrap.is-layout-constrained > h1,
  .fm-hero .fm-wrap.is-layout-constrained > .fm-lead,
  .fm-hero h1,
  .fm-hero .fm-lead {
    max-width: 66% !important;
  }
}

.fm-pillars {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(24px, 3vw, 32px);
  padding-block: clamp(40px, 6vw, 64px) !important;
}
.fm-pillars__item { align-items: flex-start; gap: 14px; }
.fm-pillars__item p { font-size: 14.5px; font-weight: 300; line-height: 1.55; color: rgba(255, 255, 255, 0.75); margin: 0; }
.fm-pillars__item strong { color: #fff; font-weight: 600; }
.fm-pillars__icon { flex: none; display: flex; color: var(--c-sand); margin-top: 2px; }
.fm-pillars__icon svg { width: 24px; height: 24px; display: block; }

.fm-rating-badge { display: flex; align-items: center; gap: 12px; }
.fm-rating-badge__value { font-size: 26px; font-weight: 600; }
.fm-stars { color: var(--c-accent); font-size: 15px; letter-spacing: 2px; }
.fm-rating-badge__note { font-size: 13px; color: var(--c-muted-2); }

.fm-reviews { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; }
.fm-review { background: #fff; border: 1px solid var(--c-line-2); padding: clamp(22px, 3vw, 28px); display: flex; flex-direction: column; gap: 14px; }
.fm-review__head { display: flex; align-items: center; gap: 12px; }
.fm-review__avatar {
  width: 40px; height: 40px; flex: none; border-radius: 50%;
  background: var(--c-cream); color: var(--c-accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 600; letter-spacing: 0.02em;
}
.fm-review__name { font-size: 15px; font-weight: 500; }
.fm-review__date { font-size: 13px; color: var(--c-muted-2); }
.fm-review p { font-size: 15px; line-height: 1.65; color: var(--c-body); margin: 0; }

.fm-faq { display: flex; flex-direction: column; gap: 0; }
.fm-faq details { border-top: 1px solid var(--c-line-2); padding: 18px 0; }
.fm-faq summary { cursor: pointer; font-size: 17px; font-weight: 500; list-style: none; }
.fm-faq summary::-webkit-details-marker { display: none; }
.fm-faq summary::after { content: "+"; float: right; color: var(--c-accent); font-weight: 400; }
.fm-faq details[open] summary::after { content: "–"; }
.fm-faq details p { margin: 14px 0 0; font-size: 15.5px; line-height: 1.7; color: var(--c-body); }

/* FAQ — wariant z listą pytań i panelem odpowiedzi (bez JS: przyciski radio + CSS) */
.fm-faq-select { position: relative; }
.fm-faq-radio { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.fm-faq-cols { display: flex; flex-wrap: wrap; align-items: flex-start; gap: clamp(24px, 4vw, 40px); }
.fm-faq-list { flex: 1.15 1 320px; min-width: 0; display: flex; flex-direction: column; }
.fm-faq-item {
  display: flex; align-items: baseline; gap: 18px;
  padding: 20px 16px; border-top: 1px solid var(--c-line);
  cursor: pointer; transition: background 0.15s ease;
}
.fm-faq-item:hover { background: var(--c-line-3); }
.fm-faq-item__num { flex: none; font-size: 12px; letter-spacing: var(--ls-caps); color: var(--c-muted); font-weight: 600; }
.fm-faq-item__q { font-size: 17px; }
.fm-faq-panel { flex: 1 1 280px; min-width: 0; background: var(--c-cream); padding: clamp(28px, 4vw, 40px); }
.fm-faq-answer { display: none; margin-top: 0 !important; }
.fm-faq-answer h3 { margin: 0 0 16px; font-size: 21px; font-weight: 500; }
.fm-faq-answer p { margin: 0; font-size: 15.5px; line-height: 1.7; color: var(--c-body); }

.fm-faq-radio:nth-of-type(1):checked ~ .fm-faq-cols .fm-faq-list .fm-faq-item:nth-of-type(1),
.fm-faq-radio:nth-of-type(2):checked ~ .fm-faq-cols .fm-faq-list .fm-faq-item:nth-of-type(2),
.fm-faq-radio:nth-of-type(3):checked ~ .fm-faq-cols .fm-faq-list .fm-faq-item:nth-of-type(3),
.fm-faq-radio:nth-of-type(4):checked ~ .fm-faq-cols .fm-faq-list .fm-faq-item:nth-of-type(4),
.fm-faq-radio:nth-of-type(5):checked ~ .fm-faq-cols .fm-faq-list .fm-faq-item:nth-of-type(5),
.fm-faq-radio:nth-of-type(6):checked ~ .fm-faq-cols .fm-faq-list .fm-faq-item:nth-of-type(6),
.fm-faq-radio:nth-of-type(7):checked ~ .fm-faq-cols .fm-faq-list .fm-faq-item:nth-of-type(7),
.fm-faq-radio:nth-of-type(8):checked ~ .fm-faq-cols .fm-faq-list .fm-faq-item:nth-of-type(8) {
  background: var(--c-cream) !important;
}
.fm-faq-radio:nth-of-type(1):checked ~ .fm-faq-cols .fm-faq-panel .fm-faq-answer:nth-of-type(1),
.fm-faq-radio:nth-of-type(2):checked ~ .fm-faq-cols .fm-faq-panel .fm-faq-answer:nth-of-type(2),
.fm-faq-radio:nth-of-type(3):checked ~ .fm-faq-cols .fm-faq-panel .fm-faq-answer:nth-of-type(3),
.fm-faq-radio:nth-of-type(4):checked ~ .fm-faq-cols .fm-faq-panel .fm-faq-answer:nth-of-type(4),
.fm-faq-radio:nth-of-type(5):checked ~ .fm-faq-cols .fm-faq-panel .fm-faq-answer:nth-of-type(5),
.fm-faq-radio:nth-of-type(6):checked ~ .fm-faq-cols .fm-faq-panel .fm-faq-answer:nth-of-type(6),
.fm-faq-radio:nth-of-type(7):checked ~ .fm-faq-cols .fm-faq-panel .fm-faq-answer:nth-of-type(7),
.fm-faq-radio:nth-of-type(8):checked ~ .fm-faq-cols .fm-faq-panel .fm-faq-answer:nth-of-type(8) {
  display: block !important;
}
@media (max-width: 700px) {
  .fm-faq-list, .fm-faq-panel { flex-basis: 100%; }
}

/* ==========================================================================
   11. Stopka
   ========================================================================== */
.fm-footer { background: var(--c-footer); color: rgba(255, 255, 255, 0.72); }
.fm-footer a { color: rgba(255, 255, 255, 0.72); }
.fm-footer a:hover { color: #fff; }
.fm-footer__inner {
  max-width: var(--wrap); margin-inline: auto;
  padding: 72px var(--gutter) 40px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 48px 56px;
}
.fm-footer__inner > * { margin-top: 0 !important; }
.fm-footer h2, .fm-footer h3, .fm-footer h4 {
  color: #fff; font-size: 11.5px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 600; margin-bottom: 18px;
}
.fm-footer p, .fm-footer li { font-size: 14.5px; line-height: 1.65; font-weight: 300; }
.fm-footer ul:not(.fm-icons) { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.fm-footer .fm-icons {
  margin: 0; padding: 0; list-style: none;
  display: flex; flex-direction: row; flex-wrap: wrap; gap: 16px;
}
.fm-footer .fm-icons a { width: auto; height: auto; border: 0; color: rgba(255, 255, 255, 0.75); }
.fm-footer .fm-icons a:hover { border: 0; color: #fff; }
.fm-footer .fm-icons svg { width: 22px; height: 22px; display: block; }
.fm-footer__bar { border-top: 1px solid rgba(255, 255, 255, 0.12); }
.fm-footer__bar-inner {
  max-width: var(--wrap); margin-inline: auto;
  padding: 22px var(--gutter);
  display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  font-size: 13px; font-weight: 300;
}

/* ==========================================================================
   12. Drobne poprawki bloków WordPressa
   ========================================================================== */
.wp-block-columns { gap: clamp(24px, 4vw, 48px); }
.wp-block-separator { border: 0; border-top: 1px solid var(--c-line); margin-block: clamp(32px, 4vw, 48px); }
.wp-block-table table { border-collapse: collapse; width: 100%; }
.wp-block-table td, .wp-block-table th { border: 0; border-bottom: 1px solid var(--c-line-3); padding: 15px 0; font-size: 16.5px; }
.wp-block-table th { font-size: 12px; letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--c-muted); text-align: left; }
.wp-block-post-comments-form input[type="submit"] { }

/* Edytor: te same proporcje kadrów w podglądzie */
.editor-styles-wrapper .fm-card .wp-block-post-featured-image img { aspect-ratio: 4 / 3; object-fit: cover; }

@media print {
  .fm-header, .fm-aside, .fm-share, .fm-footer { display: none !important; }
  body { font-size: 12pt; }
}