/* =====================================================================
   BALTIER — Warstwa "premium polish"  (SESJA 1: fundament wizualny)
   ---------------------------------------------------------------------
   Nadpisania w child-theme. W pełni odwracalne: usuń ten plik i jego
   enqueue z functions.php. Cel sesji 1: dyscyplina siatki, rytm
   typografii i spójne detale (karty, formularz, przyciski, stopka).
   Kolejne sesje: praca sekcja po sekcji (odstępy/układ w blokach Kadence).
   kreatywnyb.pl — 2026-08-07
   ===================================================================== */

:root{
  --b-bg:#d9d4cf;
  --b-ink:#26241f;
  --b-muted:#5d5955;
  --b-green:#2c3a30;
  --b-green-deep:#1b231c;      /* stopka / najgłębszy ton marki */
  --b-gold:#b0925e;            /* stonowany mosiądz — jedyny akcent */
  --b-line:#c7bfb5;
  --b-measure:640px;           /* czytelna miara tekstu (~72 znaki) */
  --b-ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------------------------------------------------------------
   1) TYPOGRAFIA — czytelność i rytm
   --------------------------------------------------------------- */
/* Tnij zbyt długie wiersze (hero 944px, „O nas" 1080px → premium ~640) */
.entry-content p{
  max-width:var(--b-measure);
}
/* Akapity wyśrodkowane mają zostać na środku kontenera */
.entry-content p.has-text-align-center,
.entry-content .has-text-align-center > p,
.entry-content [style*="text-align:center"] p,
.entry-content [style*="text-align: center"] p{
  margin-left:auto;
  margin-right:auto;
}
/* Nagłówki: subtelny tracking + balans łamania (bez „sierot") */
.entry-content h1,.entry-content h2,.entry-content h3,
.wp-block-kadence-advancedheading{
  text-wrap:balance;
  letter-spacing:-.005em;
}

/* ---------------------------------------------------------------
   2) OBRAZY — subtelne zaokrąglenie (detal premium)
   --------------------------------------------------------------- */
.entry-content .wp-block-image img{
  border-radius:8px;
}
/* Zabłąkane, przyklejone do lewej zdjęcie pod hero — wyśrodkuj i dopracuj */
.kb-row-layout-id2_f43a44-56 .wp-block-image{ text-align:center; }
.kb-row-layout-id2_f43a44-56 .wp-block-image img{
  margin-left:auto; margin-right:auto;
  border-radius:14px;
  box-shadow:0 26px 60px -26px rgba(27,35,28,.5);
}

/* ---------------------------------------------------------------
   3) KARTY — ikony (Produkcja/Jakość/Estetyka) + Oferta
   --------------------------------------------------------------- */
.kb-row-layout-id2_2583ac-63 .wp-block-kadence-column > .kt-inside-inner-col,
.kb-row-layout-id2_1af11c-88 .wp-block-kadence-column > .kt-inside-inner-col{
  border-radius:14px;
  box-shadow:0 1px 2px rgba(27,35,28,.06);
  transition:transform .45s var(--b-ease), box-shadow .45s var(--b-ease);
}
.kb-row-layout-id2_2583ac-63 .wp-block-kadence-column:hover > .kt-inside-inner-col,
.kb-row-layout-id2_1af11c-88 .wp-block-kadence-column:hover > .kt-inside-inner-col{
  transform:translateY(-6px);
  box-shadow:0 24px 46px -20px rgba(27,35,28,.3);
}

/* ---------------------------------------------------------------
   4) FORMULARZ KONTAKTOWY — czytelny kontrast + focus
   --------------------------------------------------------------- */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea{
  border:1px solid #b4ab9f;
  background:#fbfaf8;
  border-radius:10px;
  padding:15px 18px;
  transition:border-color .25s var(--b-ease), box-shadow .25s var(--b-ease);
}
.wpcf7 input[type="text"]:focus,
.wpcf7 input[type="email"]:focus,
.wpcf7 textarea:focus{
  border-color:var(--b-green);
  box-shadow:0 0 0 3px rgba(44,58,48,.14);
}
.wpcf7 input::placeholder,.wpcf7 textarea::placeholder{ color:#8f887f; }

/* ---------------------------------------------------------------
   5) PRZYCISKI (pill) — mikrointerakcje, spójny „lift"
   --------------------------------------------------------------- */
.kb-button,
.wp-block-button__link,
.wpcf7 input[type="submit"]{
  transition:transform .3s var(--b-ease), box-shadow .3s var(--b-ease),
             background-color .3s var(--b-ease), opacity .3s var(--b-ease) !important;
  letter-spacing:.015em;
}
.kb-button:hover,
.wp-block-button__link:hover,
.wpcf7 input[type="submit"]:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 26px -8px rgba(27,35,28,.38);
}

/* ---------------------------------------------------------------
   6) AKCENT ZŁOTA — bardzo oszczędnie (zaznaczenie, linki tekstowe)
   --------------------------------------------------------------- */
::selection{ background:var(--b-gold); color:#fff; }
.entry-content a:not([class*="button"]):not(.kb-button):hover{
  color:var(--b-gold);
}

/* ---------------------------------------------------------------
   7) STOPKA — ujednolicenie ciemnego tonu (czerń → głęboka zieleń marki)
   --------------------------------------------------------------- */
.site-footer-row-container-inner{
  background-color:var(--b-green-deep) !important;
}

/* ---------------------------------------------------------------
   8) DROBIAZGI — płynny scroll + widoczny focus (dostępność/klasa)
   --------------------------------------------------------------- */
html{ scroll-behavior:smooth; }
:focus-visible{ outline:2px solid var(--b-gold); outline-offset:2px; }


/* =====================================================================
   SESJA 2 — REDESIGN SEKCJI 1: HERO (pełnoekranowy, immersyjny)
   Zastępuje pofragmentowane wiersze 0 (tekst) i 1 (pasek zdjęć)
   dedykowanym komponentem .bx-hero (wstrzyknięty blok HTML na stronie).
   ===================================================================== */
:root{
  --hero-cream:#f5efe6;
  --hero-ink:#161c15;
}

/* Ukryj stary hero, pasek 3 zdjęć i osierocony przycisk CTA (zastąpione .bx-hero) */
.kb-row-layout-id2_6897b1-a5,
.kb-row-layout-id2_f43a44-56{ display:none !important; }
/* stary hero-CTA to samodzielny blok Kadence poza wierszem */
.wp-block-kadence-advancedbtn:has(.kb-btn2_478f85-1a){ display:none !important; }
.kb-btn2_478f85-1a{ display:none !important; }

.bx-hero{
  position:relative;
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  min-height:min(94vh,940px);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  overflow:hidden;
  isolation:isolate;
}
.bx-hero__bg{
  position:absolute; inset:0; z-index:0;
  background-size:cover; background-position:center 42%;
  transform:scale(1.04);
}
.bx-hero__scrim{
  position:absolute; inset:0; z-index:1;
  /* ciemniejszy, bardziej równomierny — mniej „gradientowy" */
  background:
    linear-gradient(180deg, rgba(13,17,12,.84) 0%, rgba(13,17,12,.70) 48%,
                    rgba(13,17,12,.62) 74%, rgba(217,212,207,0) 90%, rgba(217,212,207,1) 100%),
    rgba(13,17,12,.40);
}
.bx-hero__inner{
  position:relative; z-index:2;
  max-width:920px;
  padding:150px 24px 130px;
}
/* scoped (.bx-hero) — bije nadpisania motywu .entry-content p/h1 */
.bx-hero .bx-eyebrow{
  display:flex; align-items:center; justify-content:center; gap:12px;
  max-width:none; margin:0 auto 18px;
  color:var(--b-gold);
  font-family:"Archivo",sans-serif;
  font-size:12.5px; font-weight:500;
  letter-spacing:.30em; text-transform:uppercase;
}
/* małe kreski „-" po bokach (zamiast długich linii) */
.bx-hero .bx-eyebrow::before,.bx-hero .bx-eyebrow::after{
  content:""; height:1px; width:20px;
  background:var(--b-gold); opacity:.85;
}
.bx-hero .bx-hero__title{
  font-family:"Gilda Display",serif;
  color:var(--hero-cream);
  font-weight:400; line-height:1.07; letter-spacing:-.012em;
  font-size:clamp(42px,6.2vw,84px);
  margin:0 auto 26px; text-wrap:balance;
}
.bx-hero__title em{ font-style:italic; color:#e9d0a2; }
.bx-hero .bx-hero__lead{
  color:rgba(245,239,230,.84);
  font-family:"Archivo",sans-serif;
  font-size:clamp(16px,1.35vw,19px); line-height:1.72;
  max-width:600px; margin:0 auto 42px;
}
.bx-hero__cta{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
.bx-btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:17px 36px; border-radius:999px;
  font-family:"Archivo",sans-serif; font-size:15px; font-weight:500;
  letter-spacing:.02em; text-decoration:none; cursor:pointer;
  transition:transform .3s var(--b-ease), box-shadow .3s var(--b-ease),
             background-color .3s, color .3s, border-color .3s;
}
.bx-btn--primary{ background:var(--hero-cream); color:var(--hero-ink); }
.bx-btn--primary:hover{ transform:translateY(-2px); background:#fff;
  box-shadow:0 18px 38px -12px rgba(0,0,0,.55); color:var(--hero-ink); }
.bx-btn--ghost{ color:var(--hero-cream); border:1px solid rgba(245,239,230,.55); }
.bx-btn--ghost:hover{ transform:translateY(-2px); color:#e9d0a2; border-color:#e9d0a2; }
.bx-hero__scroll{
  position:absolute; left:50%; bottom:40px; transform:translateX(-50%);
  z-index:2; width:1px; height:56px; overflow:hidden;
}
.bx-hero__scroll::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(245,239,230,.85), transparent);
  animation:bx-scroll 2.4s var(--b-ease) infinite;
}
@keyframes bx-scroll{
  0%{transform:scaleY(0);transform-origin:top}
  45%{transform:scaleY(1);transform-origin:top}
  55%{transform:scaleY(1);transform-origin:bottom}
  100%{transform:scaleY(0);transform-origin:bottom}
}
@media (max-width:600px){
  .bx-hero .bx-hero__inner{ padding:120px 20px 96px; }
  .bx-hero .bx-eyebrow{ letter-spacing:.22em; font-size:11px; gap:9px; }
  .bx-hero .bx-eyebrow::before,.bx-hero .bx-eyebrow::after{ width:14px; }
}


/* =====================================================================
   SESJA 2 — REDESIGN HEADERA (subtelniejszy, więcej powietrza)
   ===================================================================== */
/* Logo mniejsze */
.site-branding a.brand img.custom-logo{
  height:34px !important;
  width:auto !important;
}
/* Więcej powietrza góra/dół */
.site-main-header-inner-wrap{
  padding-top:24px !important;
  padding-bottom:24px !important;
}
/* Pozycje menu: mniejsze, lżejsze, subtelne */
#primary-menu > .menu-item > a,
.header-navigation .menu > .menu-item > a{
  font-size:15px !important;
  font-weight:400;
  letter-spacing:.02em;
  color:#3a3733;
  transition:color .25s var(--b-ease);
}
/* 2x większe przerwy między pozycjami menu */
#primary-menu > .menu-item{ margin-left:15px !important; margin-right:15px !important; }
#primary-menu .menu-item > a:hover,
.header-navigation .menu-item > a:hover{ color:var(--b-gold); }

/* Button — spójny z marką (głęboka zieleń + krem), lepsze proporcje */
.site-header-wrap .header-button.button,
a.header-button.button{
  background:var(--b-green) !important;
  color:#f5efe6 !important;
  font-family:"Archivo",sans-serif;
  font-size:14px !important;
  font-weight:500;
  letter-spacing:.02em;
  padding:12px 26px !important;
  border-radius:999px !important;
  transition:transform .3s var(--b-ease), box-shadow .3s var(--b-ease), background-color .3s !important;
}
.site-header-wrap .header-button.button:hover,
a.header-button.button:hover{
  transform:translateY(-2px);
  background:#22301f !important;
  box-shadow:0 12px 26px -10px rgba(27,35,28,.45);
}


/* =====================================================================
   SESJA 2 — REDESIGN SEKCJI 2: "O NAS" (edytorski dwukolumn)
   Tekst po lewej + premium zdjęcie po prawej. Zastępuje wiersz
   .kb-row-layout-id2_5a3adc-1d (sam tekst, pusta prawa połowa).
   ===================================================================== */
.kb-row-layout-id2_5a3adc-1d{ display:none !important; }

.bx-about{ padding:clamp(72px,9vw,132px) 24px; }
.bx-about .bx-about__inner{
  max-width:1200px; margin:0 auto;
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(40px,6vw,90px); align-items:center;
}
.bx-about .bx-about__text{ max-width:560px; }
.bx-about .bx-about__eyebrow{
  display:flex; align-items:center; gap:12px; max-width:none;
  margin:0 0 20px;
  color:var(--b-gold); font-family:"Archivo",sans-serif;
  font-size:12.5px; font-weight:500; letter-spacing:.28em; text-transform:uppercase;
}
.bx-about .bx-about__eyebrow::before{
  content:""; width:28px; height:1px; background:var(--b-gold); opacity:.85;
}
.bx-about .bx-about__title{
  font-family:"Gilda Display",serif; color:#26241f; font-weight:400;
  font-size:clamp(34px,4vw,54px); line-height:1.1; letter-spacing:-.01em;
  margin:0 0 28px; text-wrap:balance;
}
.bx-about .bx-about__p{
  color:var(--b-muted); font-family:"Archivo",sans-serif;
  font-size:17px; line-height:1.78; margin:0 0 20px; max-width:none;
}
.bx-about .bx-about__p:last-child{ margin-bottom:0; }

.bx-about .bx-about__media{ position:relative; }
.bx-about .bx-about__media img{
  display:block; width:100%; aspect-ratio:4/5; max-height:640px;
  object-fit:cover; object-position:center;
  border-radius:18px; box-shadow:0 34px 70px -34px rgba(27,35,28,.55);
}
/* subtelny „pieczątkowy" akcent na zdjęciu */
.bx-about .bx-about__badge{
  position:absolute; left:-26px; bottom:34px;
  background:var(--b-green); color:#f5efe6;
  font-family:"Gilda Display",serif; font-size:20px; line-height:1.15;
  text-align:center; padding:20px 24px; border-radius:14px;
  box-shadow:0 20px 40px -18px rgba(27,35,28,.6);
}
.bx-about .bx-about__badge em{ font-style:italic; color:#e9d0a2; font-size:15px; letter-spacing:.02em; }

@media (max-width:860px){
  .bx-about .bx-about__inner{ grid-template-columns:1fr; gap:38px; }
  .bx-about .bx-about__media{ order:-1; }
  .bx-about .bx-about__media img{ aspect-ratio:16/11; max-height:none; }
  .bx-about .bx-about__badge{ left:16px; bottom:16px; padding:14px 18px; font-size:17px; }
}