/* ============================================================
   DEKORACJE FLORYSTYKA GipSÓWKA - warstwa brandowa
   Vibe: minimal-luxe, ciepły romantyzm. Burgund + złoto + krem
   z logo (sowa). Seed: editorial-mono / centered-bold /
   elegancki-premium (Fraunces + Source Serif 4) / editorial-grid
   / fx: text-mask-reveal, split-reveal. Ruch niski, gęstość luźna.
   ============================================================ */
:root {
  --font-heading: 'Fraunces', Georgia, serif;
  --font-body: 'Source Serif 4', Georgia, serif;
  --font-ui: 'Inter', system-ui, sans-serif;
  --color-bg: #FDFBF8;
  --color-surface: #F5EFE8;
  --color-border: #E6DACE;
  --krem: #F5EFE8;
  --krem-ciemny: #EADFD2;
  --burgund: #7C4A4A;
  --burgund-ciemny: #5E3737;
  --zloto: #B08347;
  --zloto-jasne: #D9BE8E;
  --szalwia: #8A9A85;
  --text-strong: #33272A;
  --text-body: #4A3B3E;
  --text-muted: #7D6B6D;
  --lh-heading: 1.1;
  --tracking-heading: -0.01em;
  --radius-lg: 2px;
  --radius-md: 2px;
  --radius-pill: 999px;
  --shadow-md: 0 22px 50px rgba(51, 39, 42, .10);
  --section-gap: clamp(64px, 9vw, 116px);
}
h1, h2, h3 { font-weight: 500; }
h1 { font-size: clamp(40px, 6.4vw, 78px); }
h2 { font-size: clamp(30px, 4vw, 46px); }
h3 { font-size: clamp(19px, 2vw, 23px); }
body { letter-spacing: .002em; }

/* eyebrow: wersalik UI-sansem, kontrapunkt dla serifu */
.eyebrow {
  font-family: var(--font-ui); font-size: 11.5px; font-weight: 500;
  letter-spacing: .26em; text-transform: uppercase; color: var(--zloto);
  display: block; margin-bottom: 18px;
}
.sec-head h2 + .lead, .sec-head .lead { color: var(--text-muted); margin-top: 16px; }
.tint { font-style: italic; color: var(--burgund); }

/* przyciski: prostokątne, cienkie, drogie */
.btn { border-radius: 0; font-family: var(--font-ui); font-weight: 500;
  font-size: 13.5px; letter-spacing: .12em; text-transform: uppercase; min-height: 52px; }
.btn-primary { background: var(--burgund); color: #fff; }
.btn-primary:hover { background: var(--burgund-ciemny); }
.btn-ghost { background: transparent; border: 1px solid var(--zloto); color: var(--text-strong); }
.btn-ghost:hover { background: var(--zloto); color: #fff; border-color: var(--zloto); }

/* header */
.site-header { background: color-mix(in srgb, var(--color-bg) 94%, transparent); border-bottom: 1px solid var(--color-border); }
.site-header .brand { display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-heading); font-size: 17px; letter-spacing: .04em; color: var(--text-strong); }
.site-header .brand img { height: 52px; width: auto; }
nav[aria-label="Główna"] a { font-family: var(--font-ui); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; }
nav[aria-label="Główna"] a:hover { color: var(--burgund); }
nav[aria-label="Główna"] a.btn-primary { color: #fff; }

/* ---------- HERO: centered-bold na zdjęciu ---------- */
.hero {
  position: relative; isolation: isolate; text-align: center;
  min-height: clamp(460px, 76vh, 720px);
  display: flex; align-items: center; justify-content: center;
  padding-block: clamp(72px, 10vw, 130px);
  /* kolor fallback CIEMNY: hero ma biały tekst, więc gdy zdjęcie się nie wczyta
     (albo bramka liczy kontrast z computed-style), tekst zostaje czytelny */
  background: #3E2E2A url('images/hero-stol.webp') center/cover no-repeat;
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  /* radial pod blokiem tekstu + delikatny pion: tekst czytelny, a krawędzie
     zdjęcia zostają jasne (inaczej cała fotografia gaśnie) */
  background:
    radial-gradient(ellipse 62% 52% at 50% 46%, rgba(40,28,26,.62) 0%, rgba(40,28,26,.30) 55%, rgba(40,28,26,0) 100%),
    linear-gradient(180deg, rgba(45,32,30,.46) 0%, rgba(45,32,30,.24) 45%, rgba(45,32,30,.52) 100%);
}
.hero .container { position: relative; z-index: 1; max-width: 900px; }
.hero .eyebrow { color: #F2DFC0; text-shadow: 0 1px 10px rgba(40,28,26,.6); }
.hero h1 { color: #fff; text-shadow: 0 2px 24px rgba(40,28,26,.35); }
.hero-sub { color: rgba(255,255,255,.92); font-size: clamp(17px, 1.9vw, 20px);
  max-width: 54ch; margin: 20px auto 0; }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-top: 34px; }
.hero .btn-ghost { border-color: rgba(255,255,255,.75); color: #fff; }
.hero .btn-ghost:hover { background: #fff; color: var(--text-strong); border-color: #fff; }
/* podstrony: hero tekstowy na kremie */
.hero--slim { min-height: auto; background: var(--krem); padding-block: clamp(56px, 7vw, 92px); }
.hero--slim::after { display: none; }
.hero--slim h1 { color: var(--text-strong); text-shadow: none; }
.hero--slim .hero-sub { color: var(--text-muted); }
.hero--slim .eyebrow { color: var(--zloto); }

/* pasek zaufania */
.trust { border-block: 1px solid var(--color-border); background: var(--color-bg); }
.trust-in { display: grid; gap: 26px; padding-block: 34px; text-align: center; }
@media (min-width: 760px) { .trust-in { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.trust b { display: block; font-family: var(--font-heading); font-size: 27px; color: var(--burgund); }
.trust span { font-family: var(--font-ui); font-size: 12.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-muted); }

/* ---------- oferta: karty ze zdjęciem ---------- */
.uslugi { display: grid; gap: 26px; }
@media (min-width: 760px) { .uslugi { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1060px) { .uslugi { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.usluga { position: relative; overflow: hidden; background: var(--color-bg);
  border: 1px solid var(--color-border); display: flex; flex-direction: column; }
.usluga img { width: 100%; height: 230px; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.usluga:hover img { transform: scale(1.05); }
.usluga-body { padding: 26px 24px 28px; display: flex; flex-direction: column; flex: 1; }
.usluga h3 { margin-bottom: 8px; }
.usluga p { font-size: 15.5px; color: var(--text-muted); }
.usluga .wiecej { font-family: var(--font-ui); font-size: 12px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--burgund); margin-top: 16px; display: inline-block; }
.usluga .wiecej::after { content: " →"; }

/* ---------- realizacje: siatka redakcyjna ---------- */
.galeria { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .galeria { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.galeria figure { margin: 0; overflow: hidden; background: var(--krem); }
.galeria img { width: 100%; height: 100%; aspect-ratio: 1; object-fit: cover;
  transition: transform .9s cubic-bezier(.2,.7,.2,1); }
.galeria figure:hover img { transform: scale(1.06); }
.galeria .duze { grid-column: span 2; grid-row: span 2; }
.galeria .duze img { aspect-ratio: 1; }

/* ---------- wypożyczalnia: pas na kremie ---------- */
.wypo { background: var(--krem); }
.wypo-grid { display: grid; gap: clamp(30px, 5vw, 56px); align-items: center; }
@media (min-width: 900px) { .wypo-grid { grid-template-columns: 1.05fr .95fr; } }
.wypo-media img { width: 100%; height: clamp(280px, 40vw, 440px); object-fit: cover; }
.wypo-lista { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 12px; }
.wypo-lista li { display: flex; gap: 12px; align-items: flex-start; font-size: 15.5px; }
.wypo-lista svg { width: 17px; height: 17px; color: var(--zloto); flex: none; margin-top: 5px; }

/* ---------- proces: kroki ---------- */
.kroki { list-style: none; padding: 0; display: grid; gap: 1px; background: var(--color-border);
  border: 1px solid var(--color-border); }
@media (min-width: 860px) { .kroki { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.kroki li { background: var(--color-bg); padding: 30px 26px; }
.kroki .nr { font-family: var(--font-ui); font-size: 11.5px; letter-spacing: .2em;
  color: var(--zloto); display: block; margin-bottom: 14px; }
.kroki h3 { font-size: 20px; margin-bottom: 8px; }
.kroki p { font-size: 14.5px; color: var(--text-muted); }

/* ---------- wycena ---------- */
.wycena { background: var(--burgund); color: #fff; }
.wycena h2, .wycena h3 { color: #fff; }
.wycena .eyebrow { color: var(--zloto-jasne); }
.wycena p { color: rgba(255,255,255,.88); }
.wycena-grid { display: grid; gap: clamp(28px, 4vw, 52px); align-items: start; }
@media (min-width: 900px) { .wycena-grid { grid-template-columns: 1fr 1fr; } }
.wycena-box { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.20); padding: 30px 28px; }
.wycena-box ol { margin: 0; padding-left: 20px; display: grid; gap: 12px; font-size: 15.5px; }
.wycena .btn-primary { background: #fff; color: var(--burgund); }
.wycena .btn-primary:hover { background: var(--krem); }
.wycena .btn-ghost { border-color: rgba(255,255,255,.6); color: #fff; }
.wycena .btn-ghost:hover { background: rgba(255,255,255,.14); border-color: #fff; }

/* ---------- opinie ---------- */
.opinie-grid { display: grid; gap: 24px; }
@media (min-width: 860px) { .opinie-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.opinia { background: var(--color-bg); border: 1px solid var(--color-border);
  padding: 32px 28px; display: flex; flex-direction: column; }
.opinia .gw { color: var(--zloto); letter-spacing: 3px; font-size: 14px; margin-bottom: 16px; }
.opinia p { flex: 1; font-size: 16px; line-height: 1.7; }
.opinia footer { margin-top: 20px; font-family: var(--font-ui); font-size: 13px;
  letter-spacing: .06em; color: var(--text-muted); }
.opinia footer b { display: block; color: var(--text-strong); font-size: 14.5px;
  letter-spacing: 0; font-family: var(--font-heading); font-weight: 500; }

/* ---------- o nas ---------- */
.onas-grid { display: grid; gap: clamp(30px, 5vw, 60px); align-items: center; }
@media (min-width: 900px) { .onas-grid { grid-template-columns: .85fr 1.15fr; } }
.onas-media img { width: 100%; object-fit: cover; }
.podpis { font-family: var(--font-heading); font-style: italic; font-size: 21px; color: var(--burgund); margin-top: 18px; }

/* stopka */
.site-footer { background: #33272A; color: rgba(253, 251, 248, .72); }
.site-footer a:hover { color: var(--zloto-jasne); }
.site-footer .footer-nav a { font-family: var(--font-ui); font-size: 13px; letter-spacing: .06em; }

/* ruchy sygnaturowe przesuwają dzieci w poziomie przed odsłonięciem,
   więc kontener MUSI je przycinać - inaczej strona ma poziomy scroll na 390 px */
.fx-split, .fx-mask { overflow-x: clip; }

/* komponenty rozszerzają systemową .card - kasujemy jej domyślny padding/radius,
   bo karta usługi ma zdjęcie na styk krawędzi, a opinia własny rytm */
.usluga.card { padding: 0; border-radius: 0; box-shadow: none; }
.opinia.card { border-radius: 0; box-shadow: none; }
.wycena-box.card { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.20);
  border-radius: 0; box-shadow: none; }

/* placeholder jako element designu */
.media-frame { background: var(--krem); border: 1px solid var(--color-border);
  display: flex; align-items: center; justify-content: center; min-height: 220px;
  color: var(--text-muted); font-size: 14.5px; text-align: center; padding: 24px; }