/*
Theme Name:   MRC Moto Studio
Theme URI:    https://mrcmotostudio.pl
Author:       MRC Moto Studio
Author URI:   https://mrcmotostudio.pl
Description:  Autorski motyw WordPress dla MRC Moto Studio — sprzedaż i montaż premium akcesoriów motocyklowych (Denali, Touratech, Wunderlich, WRS, Puig). Zbudowany od zera, bez frameworków CSS, gotowy pod WooCommerce.
Version:      1.0.0
Requires at least: 6.4
Requires PHP: 8.0
Tested up to: 6.6
License:      GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  mrc-moto-studio
Tags:         one-column, custom-menu, custom-logo, translation-ready, threaded-comments, woocommerce
*/

/* =====================================================================
   SPIS TREŚCI

   01. FONTS (self-hosted @font-face)
   02. TOKENS (custom properties — design system)
   03. RESET
   04. BASE (typografia, elementy podstawowe)
   05. LAYOUT (container, section, grid utilities)
   06. COMPONENTS (button, badge, card, alert, breadcrumbs, pagination, form)
   07. HEADER / NAV
   08. HERO + BRANDS STRIP
   09. SEKCJE STRONY GŁÓWNEJ (intro, usługi, realizacje, opinie, faq, kontakt)
   10. FOOTER
   11. BLOG / ARCHIWA / SINGLE / 404 / SEARCH
   12. WOOCOMMERCE
   13. WPFORMS (opcjonalny formularz zamiast wbudowanego)
   14. RESPONSYWNOŚĆ
   ===================================================================== */

/* =====================================================================
   01. FONTS
   ===================================================================== */
@font-face{font-family:'MRC Display';font-style:normal;font-weight:800;font-display:swap;
  src:url('fonts/bricolage-grotesque-800-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2122;}
@font-face{font-family:'MRC Display';font-style:normal;font-weight:800;font-display:swap;
  src:url('fonts/bricolage-grotesque-800-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-024F,U+1E00-1EFF;}
@font-face{font-family:'MRC Sans';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('fonts/hanken-grotesk-variable-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2122;}
@font-face{font-family:'MRC Sans';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('fonts/hanken-grotesk-variable-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-024F,U+1E00-1EFF;}
@font-face{font-family:'MRC Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/fragment-mono-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2122;}
@font-face{font-family:'MRC Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/fragment-mono-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-024F,U+1E00-1EFF;}

/* =====================================================================
   02. TOKENS — design system
   ===================================================================== */
:root{
  --c-tarmac:#17181c;
  --c-graphite:#202226;
  --c-graphite-2:#292b30;
  --c-steel:#a5a7ab;
  --c-steel-dim:#6f7175;
  --c-alloy:#f2f0ec;
  --c-signal:#3d8cff;
  --c-signal-hover:#5aa0ff;
  --c-line:rgba(242,240,236,.12);
  --c-line-strong:rgba(242,240,236,.24);

  --c-success:#3ecf8e;
  --c-warning:#e8b339;
  --c-danger:#ef5b5b;

  --f-display:'MRC Display',ui-sans-serif,system-ui,sans-serif;
  --f-body:'MRC Sans',ui-sans-serif,system-ui,sans-serif;
  --f-mono:'MRC Mono',ui-monospace,'SFMono-Regular',monospace;

  --fs-h1:clamp(2.75rem,2rem + 4.2vw,6.25rem);
  --fs-h2:clamp(2rem,1.5rem + 2.6vw,3.75rem);
  --fs-h3:clamp(1.375rem,1.2rem + 1vw,1.875rem);
  --fs-lead:clamp(1.0625rem,1rem + .4vw,1.25rem);
  --fs-body:1rem;
  --fs-small:.875rem;
  --fs-kicker:.8125rem;

  --space-section:clamp(5.5rem,4.25rem + 7vw,10.5rem);
  --space-lg:clamp(3rem,2.25rem + 3.5vw,5.5rem);
  --container:1360px;
  --pad-inline:clamp(1.25rem,4vw,3rem);
  --radius:2px;
  --ease:cubic-bezier(.16,1,.3,1);

  /* Stałe referencje (niezależne od .theme-light) używane wyłącznie do
     gradientowych "szwów" na styku sekcji - patrz .seam-from-*. */
  --c-seam-dark:#17181c;
  --c-seam-light:#f5f4f1;
}

/* ---------------------------------------------------------------------
   Wariant jasny sekcji — strona na życzenie klienta nie może być
   jednolicie ciemna. Naprzemienne sekcje (Studio, Usługi, FAQ są jasne;
   Hero, Oferta, Realizacje, Kontakt zostają ciemne) dają realny kontrast
   zamiast płaskiej szarości wszędzie.

   Działa przez nadpisanie tych samych zmiennych, których już używa każdy
   komponent (.service-row, .brand-row, .faq-*, przyciski...) — więc nic
   w komponentach nie trzeba dublować ani przepisywać osobno dla trybu
   jasnego. `color` jest ustawiony bezpośrednio na sekcji, żeby nagłówki
   i akapity bez własnego koloru też poprawnie dziedziczyły jasny wariant.

   Niebieski akcent (--c-signal) jest tu wyraźnie ciemniejszy niż na czarnym
   tle (#1552c9 zamiast #3d8cff) — ten sam jasny odcień na białym tle miałby
   kontrast ok. 3,3:1, za mało pod WCAG AA dla tekstu; #1552c9 daje ~6,8:1.
   --------------------------------------------------------------------- */
.theme-light{
  --c-tarmac:#f5f4f1;
  --c-graphite:#ffffff;
  --c-graphite-2:#eceae5;
  --c-alloy:#14151a;
  --c-steel:#5b5d63;
  --c-steel-dim:#83858a;
  --c-line:rgba(20,21,26,.12);
  --c-line-strong:rgba(20,21,26,.22);
  --c-signal:#1552c9;
  --c-signal-hover:#2f6fe6;
  background:var(--c-tarmac);
  color:var(--c-alloy);
}
.theme-light .service-row:hover{background:rgba(20,21,26,.035)}

/* =====================================================================
   03. RESET
   ===================================================================== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}
img,svg{max-width:100%;display:block}
img{height:auto}
button,input,textarea,select{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
table{border-collapse:collapse;width:100%}
:focus-visible{outline:2px solid var(--c-signal);outline-offset:3px}

/* =====================================================================
   04. BASE
   ===================================================================== */
body{
  background:var(--c-tarmac);
  color:var(--c-alloy);
  font-family:var(--f-body);
  font-size:var(--fs-body);
  line-height:1.6;
  overflow-x:hidden;
}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:800;line-height:.98;letter-spacing:-.01em;text-wrap:balance}
h1{font-size:var(--fs-h1)}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3)}
h4{font-size:1.125rem}
p{max-width:60ch}
.lead{font-size:var(--fs-lead);color:var(--c-steel);max-width:52ch}
.mono{font-family:var(--f-mono);letter-spacing:.02em}

.kicker{
  font-family:var(--f-mono);font-size:var(--fs-kicker);text-transform:uppercase;
  letter-spacing:.14em;color:var(--c-signal);display:flex;align-items:center;gap:.6em;
}
.kicker::before{content:'';width:1.4em;height:1px;background:var(--c-signal)}

.hairline{border:0;border-top:1px solid var(--c-line)}
.screen-reader-text{position:absolute;left:-9999px}
.screen-reader-text:focus{left:1rem;top:1rem;z-index:200;background:var(--c-graphite);padding:.75rem 1.25rem;border:1px solid var(--c-line-strong)}

[data-reveal]{opacity:0;transform:translateY(14px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
[data-reveal].is-visible{opacity:1;transform:translateY(0)}

/* =====================================================================
   05. LAYOUT
   ===================================================================== */
.container{max-width:var(--container);margin-inline:auto;padding-inline:var(--pad-inline)}
.section{padding-block:var(--space-section);position:relative}
.section>.container{position:relative;z-index:1}
.section-head{display:flex;flex-direction:column;gap:1.25rem;margin-bottom:var(--space-lg)}
.site-main{display:block}

/* Płynne przejście na styku naprzemiennych sekcji jasnych/ciemnych, zamiast
   twardego cięcia koloru - miękki gradient "wtapia" górną krawędź sekcji
   w kolor tej poprzedniej. Kierunek (from-dark/from-light) zależy od tego,
   jaka sekcja jest bezpośrednio nad daną - patrz kolejność w front-page.php. */
.seam-from-dark::before,.seam-from-light::before{
  content:'';position:absolute;top:0;left:0;right:0;z-index:0;pointer-events:none;
  height:min(11rem,22vw);
}
.seam-from-dark::before{background:linear-gradient(to bottom,var(--c-seam-dark),transparent)}
.seam-from-light::before{background:linear-gradient(to bottom,var(--c-seam-light),transparent)}

/* =====================================================================
   06. COMPONENTS
   ===================================================================== */

/* --- Button --- */
.btn{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--f-mono);font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase;
  padding:1rem 1.75rem;border-radius:var(--radius);border:1px solid transparent;
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease);
  cursor:pointer;white-space:nowrap;background:none;
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--c-signal);color:var(--c-tarmac)}
.btn-primary:hover{background:var(--c-signal-hover);color:var(--c-tarmac)}
.btn-outline{border-color:var(--c-line-strong);color:var(--c-alloy)}
.btn-outline:hover{border-color:var(--c-alloy)}
.btn-ghost{color:var(--c-steel)}
.btn-ghost:hover{color:var(--c-alloy)}
.btn svg{width:1em;height:1em}
.btn:disabled,.btn.disabled{opacity:.4;cursor:not-allowed;transform:none}

/* --- Badge --- */
.badge{
  display:inline-flex;align-items:center;gap:.4em;font-family:var(--f-mono);font-size:.6875rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--c-steel);
  background:rgba(13,13,14,.55);border:1px solid var(--c-line);padding:.3rem .6rem;
}
.badge-accent{color:var(--c-signal);border-color:rgba(61,140,255,.4)}

/* --- Card (base, extended by gallery/product cards) --- */
.card{background:var(--c-graphite);border:1px solid var(--c-line);padding:1.75rem;transition:border-color .3s var(--ease)}
.card:hover{border-color:var(--c-line-strong)}

/* --- Alert (WooCommerce notices reuse this) --- */
.alert{border:1px solid var(--c-line-strong);border-left:3px solid var(--c-steel);padding:1rem 1.25rem;font-size:var(--fs-small);background:var(--c-graphite);margin-bottom:1.5rem}
.alert-success{border-left-color:var(--c-success)}
.alert-warning{border-left-color:var(--c-warning)}
.alert-danger{border-left-color:var(--c-danger)}

/* --- Breadcrumbs --- */
.breadcrumbs{padding-block:1.5rem}
.breadcrumbs-list{display:flex;flex-wrap:wrap;gap:.5rem;font-family:var(--f-mono);font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;color:var(--c-steel-dim)}
.breadcrumbs-list li:not(:last-child)::after{content:'/';margin-left:.5rem;color:var(--c-steel-dim)}
.breadcrumbs-list a:hover{color:var(--c-alloy)}
.breadcrumbs-list [aria-current="page"]{color:var(--c-steel)}

/* --- Pagination --- */
.pagination{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:var(--space-lg)}
.pagination a,.pagination span{
  display:flex;align-items:center;justify-content:center;min-width:2.75rem;height:2.75rem;
  font-family:var(--f-mono);font-size:.8125rem;border:1px solid var(--c-line);color:var(--c-steel);
  transition:border-color .3s var(--ease),color .3s var(--ease);
}
.pagination a:hover{border-color:var(--c-signal);color:var(--c-alloy)}
.pagination .current{border-color:var(--c-signal);color:var(--c-alloy)}

/* --- Form elements --- */
.form-field{display:grid;gap:.5rem;margin-bottom:1.5rem}
.form-field label{font-family:var(--f-mono);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--c-steel)}
.form-field input,.form-field textarea,.form-field select{
  background:none;border:0;border-bottom:1px solid var(--c-line-strong);color:var(--c-alloy);
  padding-block:.65rem;transition:border-color .3s var(--ease);width:100%;
}
.form-field input:focus,.form-field textarea:focus,.form-field select:focus{border-color:var(--c-signal);outline:none}
.form-field textarea{resize:vertical;min-height:6rem}
.mrc-hp{position:absolute;left:-9999px;top:-9999px}

/* --- Highlight panel (np. blok CTA w page builderze — patrz page.php) --- */
.highlight-panel{background:var(--c-graphite);border-top:1px solid var(--c-line);border-bottom:1px solid var(--c-line);padding-block:var(--space-section)}

/* --- Modal (lightbox / future product quick-view) --- */
.modal-overlay{position:fixed;inset:0;background:rgba(13,13,14,.86);display:flex;align-items:center;justify-content:center;padding:1.5rem;z-index:200;opacity:0;pointer-events:none;transition:opacity .3s var(--ease)}
.modal-overlay.is-open{opacity:1;pointer-events:auto}
.modal-panel{background:var(--c-graphite);border:1px solid var(--c-line-strong);max-width:44rem;width:100%;max-height:85vh;overflow:auto;padding:2rem;transform:translateY(12px);transition:transform .3s var(--ease)}
.modal-overlay.is-open .modal-panel{transform:translateY(0)}
.modal-close{position:absolute;top:1.5rem;right:1.5rem;width:2.5rem;height:2.5rem;border:1px solid var(--c-line-strong);border-radius:50%;background:none;color:var(--c-alloy);cursor:pointer}

/* =====================================================================
   07. HEADER / NAV
   ===================================================================== */
.site-header{
  position:fixed;inset-inline:0;top:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:.4rem var(--pad-inline);
  background:rgba(13,13,14,.72);backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;
  transition:border-color .4s var(--ease),background .4s var(--ease);
}
.site-header.is-scrolled{border-color:var(--c-line)}
.brand{display:flex;align-items:center;gap:.55rem;font-family:var(--f-display)}
.brand img{height:clamp(4rem,3.2rem + 2vw,5.5rem);width:auto;display:block}
.brand-mark{font-size:1.35rem;font-weight:800;letter-spacing:-.01em}
.brand-sub{font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.16em;color:var(--c-steel);text-transform:uppercase}
.nav-primary{display:flex;align-items:center;gap:2.25rem}
.nav-links{display:flex;gap:2.1rem}
.nav-links a{font-family:var(--f-body);font-size:.875rem;color:var(--c-steel);position:relative;padding-block:.2rem}
.nav-links a::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--c-signal);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.nav-links a:hover,.nav-links .current-menu-item a{color:var(--c-alloy)}
.nav-links a:hover::after,.nav-links .current-menu-item a::after{transform:scaleX(1)}
.nav-phone{font-family:var(--f-mono);font-size:.8125rem;color:var(--c-steel);display:flex;align-items:center;gap:.5rem}
.nav-toggle{display:none;background:none;border:0;color:var(--c-alloy);width:2.25rem;height:2.25rem;position:relative;cursor:pointer}
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{content:'';position:absolute;left:.4rem;right:.4rem;height:1px;background:currentColor;transition:transform .3s var(--ease),opacity .3s var(--ease)}
.nav-toggle span{top:50%}
.nav-toggle span::before{bottom:.5rem}
.nav-toggle span::after{top:.5rem}
.nav-toggle[aria-expanded="true"] span{background:transparent}
.nav-toggle[aria-expanded="true"] span::before{transform:translateY(.5rem) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span::after{transform:translateY(-.5rem) rotate(-45deg)}
.nav-mobile-panel{
  position:fixed;inset:5.5rem 0 0;background:var(--c-tarmac);z-index:99;padding:2rem var(--pad-inline);
  transform:translateY(-8px);opacity:0;pointer-events:none;transition:opacity .3s var(--ease),transform .3s var(--ease);
}
.nav-mobile-panel.is-open{opacity:1;pointer-events:auto;transform:translateY(0)}
.nav-mobile-panel ul{display:grid;gap:1.5rem}
.nav-mobile-panel a{font-family:var(--f-body);font-size:1.25rem;font-weight:600}
.nav-mobile-panel .current-menu-item a{color:var(--c-signal)}

/* =====================================================================
   08. HERO + BRANDS STRIP
   ===================================================================== */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding-top:7rem;overflow:hidden;background:var(--c-tarmac)}
.hero-field{position:absolute;inset:0;z-index:0}
.hero-field svg{width:100%;height:100%;position:relative;z-index:1}

/* Ambient — animowany, mocno rozmyty gradient w tle Hero, żeby sekcja
   nie była płaską czarną płaszczyzną. Bardzo przytłumiony (niska opacity,
   jeden akcent koloru), żeby nie wpaść w efekt oklepanego "AI gradientu". */
.hero-glow{position:absolute;inset:0;overflow:hidden}
.hero-glow-blob{position:absolute;border-radius:50%;filter:blur(110px);will-change:transform}
.hero-glow-blob--a{width:52vw;height:52vw;max-width:760px;max-height:760px;right:-14vw;top:-16vw;background:radial-gradient(circle,rgba(61,140,255,.3),rgba(61,140,255,0) 70%);animation:heroGlowA 26s ease-in-out infinite}
.hero-glow-blob--b{width:40vw;height:40vw;max-width:560px;max-height:560px;left:-10vw;bottom:-8vw;background:radial-gradient(circle,rgba(242,240,236,.11),rgba(242,240,236,0) 70%);animation:heroGlowB 32s ease-in-out infinite}
@keyframes heroGlowA{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-4%,6%) scale(1.12)}}
@keyframes heroGlowB{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(5%,-5%) scale(1.08)}}

@media(prefers-reduced-motion:reduce){
  .hero-glow-blob{animation:none}
}

.hero-content{position:relative;z-index:2;padding-inline:var(--pad-inline);padding-bottom:3.5rem;display:grid;gap:2rem}
/* Mobilnie: jedna kolumna, kolejność DOM = nagłówek, zdjęcie, lead.
   Zdjęcie ma stały format (4:5) i ograniczoną szerokość, żeby nie
   zdominować ekranu telefonu. */
.hero-grid{display:grid;grid-template-columns:1fr;gap:1.75rem}
.hero-grid .page-header-photo{aspect-ratio:4/5;max-width:19rem;width:100%;margin-inline:auto}
.hero-heading-block{text-align:center}
.hero-kicker{margin-bottom:1.5rem;justify-content:center}
.hero h1{max-width:16ch;margin-inline:auto}
.hero h1 .accent{color:var(--c-signal)}
.hero-lead-block{text-align:center;margin-inline:auto}
.hero-foot{display:flex;flex-wrap:wrap;gap:2.5rem;align-items:flex-end;justify-content:center}
.hero-actions{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center}
.hero .lead{margin-top:.5rem}

.ticker{position:relative;z-index:2;border-top:1px solid var(--c-line);overflow:hidden;padding-block:1rem;background:linear-gradient(180deg,transparent,rgba(0,0,0,.35))}
.ticker-track{display:flex;gap:2.5rem;white-space:nowrap;width:max-content;animation:ticker 34s linear infinite}
.ticker-track span{font-family:var(--f-mono);font-size:.8125rem;letter-spacing:.1em;text-transform:uppercase;color:var(--c-steel);display:flex;align-items:center;gap:2.5rem}
.ticker-track span::after{content:'-';color:var(--c-signal)}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-25%)}}

.brands-section{border-bottom:1px solid var(--c-line)}
.brand-list{border-top:1px solid var(--c-line)}
.brand-row{
  display:grid;grid-template-columns:1fr;gap:.75rem;align-items:start;
  padding-block:2.25rem;border-bottom:1px solid var(--c-line);
}
/* Nazwa/logo marki to sam link do producenta (bez osobnej linijki
   "Strona producenta") — dyskretny hover zamiast krzykliwego podkreślenia. */
.brand-name{font-family:var(--f-display);font-weight:800;font-size:1.25rem;letter-spacing:-.01em;transition:color .3s var(--ease)}
a.brand-name:hover{color:var(--c-signal)}
/* Logo w kolorze, wszystkie w jednym stałym formacie (ta sama szerokość/
   wysokość niezależnie od proporcji oryginalnego pliku - object-fit:contain
   skaluje bez rozciągania). mix-blend-mode:screen matematycznie "wygasza"
   czarne tło logotypu na dowolnym ciemnym tle (czerń + screen = tło pod spodem)
   - bez widocznej ramki, niezależnie od proporcji obrazka. Ta sama technika,
   co przy dużym logo-emblemacie w Hero. */
.brand-logo{
  width:9rem;height:2.5rem;object-fit:contain;object-position:left center;
  opacity:.9;transition:opacity .3s var(--ease);
  mix-blend-mode:screen;
}
a:hover > .brand-logo{opacity:1}
.brand-origin{display:block;font-size:.75rem;color:var(--c-signal);text-transform:uppercase;letter-spacing:.06em;margin-bottom:.5rem}
.brand-desc{color:var(--c-steel);max-width:62ch}

/* =====================================================================
   09. SEKCJE STRONY GŁÓWNEJ
   ===================================================================== */

/* --- Intro --- */
.intro-grid{max-width:52rem}
.intro-grid h2{margin-block:1rem 1.5rem}
.intro-copy p+p{margin-top:1.1rem}

/* --- Usługi (job-sheet list) --- */
.service-row{
  display:grid;grid-template-columns:auto 1fr;gap:1.25rem 2rem;align-items:start;
  padding-block:2.25rem;border-top:1px solid var(--c-line);position:relative;
  transition:background .35s var(--ease);
}
.services-list .service-row:last-child{border-bottom:1px solid var(--c-line)}
.service-row:hover{background:rgba(242,240,236,.03)}
.service-code{font-family:var(--f-mono);font-size:.8125rem;color:var(--c-signal);padding-top:.35rem}
.service-body{display:grid;grid-template-columns:1fr;gap:.75rem}
.service-body h3{margin-bottom:.5rem}
.service-desc{color:var(--c-steel);max-width:56ch}
/* Wiersz z linkiem do cennika ma DWA klikalne cele (cały wiersz → pojedyncza
   usługa, plus osobny link → cennik) - zagnieżdżone <a> w <a> są nieprawidłowe
   w HTML, więc tytuł jest linkiem "rozciągniętym" na cały wiersz (::after),
   a service-price-link stoi nad nim (z-index), więc zostaje niezależnie klikalny. */
.service-row-link::after{content:'';position:absolute;inset:0;z-index:1}
.service-price-link{position:relative;z-index:2;display:inline-block;color:var(--c-signal);font-size:.875rem;font-weight:600;text-decoration:underline;text-underline-offset:.2em}
.service-price-link:hover{color:var(--c-signal-hover)}
.service-arrow{
  justify-self:end;align-self:center;width:2.5rem;height:2.5rem;border:1px solid var(--c-line-strong);
  border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;
  transition:border-color .3s var(--ease),transform .3s var(--ease);
}
.service-row:hover .service-arrow{border-color:var(--c-signal);transform:rotate(45deg)}
.service-arrow svg{width:1rem;height:1rem}

/* --- Realizacje / galeria ---
   Czysta fotografia, bez żadnego tekstu na niej ani pod nią — pełne dane
   (model, zakres prac) są na stronie pojedynczej realizacji po kliknięciu. */
.gallery-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.75rem}
.gallery-frame{display:block;position:relative;overflow:hidden;border:1px solid var(--c-line);aspect-ratio:4/5;background:var(--c-graphite-2)}
.gallery-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.gallery-frame:hover img{transform:scale(1.045)}


/* --- FAQ --- */
.faq-item{border-top:1px solid var(--c-line)}
.faq-list{border-bottom:1px solid var(--c-line)}
.faq-q{width:100%;text-align:left;background:none;border:0;color:var(--c-alloy);cursor:pointer;display:grid;grid-template-columns:1fr auto;gap:1.25rem;align-items:center;padding-block:1.875rem}
.faq-q h3{font-size:1.125rem;font-weight:600;font-family:var(--f-body);line-height:1.35}
.faq-icon{width:1.5rem;height:1.5rem;position:relative;flex-shrink:0}
.faq-icon::before,.faq-icon::after{content:'';position:absolute;background:var(--c-alloy);top:50%;left:50%;transform:translate(-50%,-50%)}
.faq-icon::before{width:100%;height:1px}
.faq-icon::after{width:1px;height:100%;transition:transform .3s var(--ease)}
.faq-item.is-open .faq-icon::after{transform:translate(-50%,-50%) rotate(90deg) scaleX(0)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .4s var(--ease)}
.faq-a-inner{padding-bottom:1.75rem;color:var(--c-steel);max-width:60ch}

/* --- Kontakt --- */
.contact-grid{display:grid;grid-template-columns:1fr;gap:3rem}
.contact-info{background:var(--c-graphite);border:1px solid var(--c-line);padding:2rem;display:grid;gap:1.75rem;position:relative}
.contact-map{aspect-ratio:16/10;position:relative;overflow:hidden;border:1px solid var(--c-line);margin-bottom:.5rem}
.contact-map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:grayscale(.4) invert(.92) contrast(.9)}
.contact-list dt{font-family:var(--f-mono);font-size:.75rem;color:var(--c-steel-dim);text-transform:uppercase;letter-spacing:.06em;margin-bottom:.3rem}
.contact-list dd{margin-bottom:1.35rem}
.contact-list dd:last-child{margin-bottom:0}
.social-row{display:flex;gap:.9rem}
.social-row a{width:2.5rem;height:2.5rem;border:1px solid var(--c-line-strong);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:border-color .3s var(--ease),color .3s var(--ease)}
.social-row a:hover{border-color:var(--c-signal);color:var(--c-signal)}
.social-row svg{width:1.1rem;height:1.1rem}

/* =====================================================================
   10. FOOTER
   ===================================================================== */
.site-footer{border-top:1px solid var(--c-line);padding-block:var(--space-lg) 2.5rem}
.footer-grid{display:grid;grid-template-columns:1.3fr repeat(3,1fr);gap:2.5rem;padding-bottom:var(--space-lg)}
.footer-brand img{height:clamp(4.5rem,3.5rem + 3vw,6.5rem);width:auto;display:block;margin-bottom:.25rem}
.footer-brand p{color:var(--c-steel);font-size:var(--fs-small);margin-top:1rem;max-width:32ch}
.footer-col h4{font-family:var(--f-mono);font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:var(--c-steel-dim);margin-bottom:1.1rem}
.footer-col ul{display:grid;gap:.7rem}
.footer-col a{color:var(--c-steel);font-size:.9375rem}
.footer-col a:hover{color:var(--c-alloy)}
.footer-bottom{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;padding-top:1.75rem;border-top:1px solid var(--c-line);color:var(--c-steel-dim);font-size:.8125rem;font-family:var(--f-mono)}
.footer-bottom a:hover{color:var(--c-alloy)}

/* =====================================================================
   11. BLOG / ARCHIWA / SINGLE / 404 / SEARCH
   ===================================================================== */
.page-header{padding-block:calc(var(--space-lg) + 4.5rem) var(--space-lg)}
.page-header h1{max-width:24ch}
.page-header-grid{display:grid;grid-template-columns:1fr;gap:2.5rem;align-items:center}
/* Zdjęcie z miękko rozmytą, zanikającą krawędzią (maska radialna) zamiast
   twardej, prostokątnej ramki - subtelniejszy, mniej "toporny" efekt. */
.page-header-photo{
  aspect-ratio:16/11;overflow:hidden;
  -webkit-mask-image:radial-gradient(ellipse at center,#000 58%,transparent 100%);
  mask-image:radial-gradient(ellipse at center,#000 58%,transparent 100%);
}
.page-header-photo img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.08)}
.entry-grid{display:grid;grid-template-columns:1fr;gap:2.5rem}
.entry-card{border-top:1px solid var(--c-line);padding-block:2rem}
.entry-card:last-child{border-bottom:1px solid var(--c-line)}
.entry-card h2{font-size:var(--fs-h3);margin-bottom:.5rem}
.entry-card .post-date{color:var(--c-steel-dim);display:block;margin-bottom:.75rem}
.entry-content{max-width:70ch}
.entry-content > * + *{margin-top:1.25rem}
.entry-content h2,.entry-content h3{margin-top:2rem;margin-bottom:.75rem}
.entry-content img{border:1px solid var(--c-line)}
.entry-content a{color:var(--c-signal);text-decoration:underline;text-underline-offset:.2em}

/* --- Cennik usług (template-cennik.php) --- */
.price-table-wrap{overflow-x:auto;border:1px solid var(--c-line)}
.price-table{width:100%;border-collapse:collapse;min-width:28rem}
.price-table th,.price-table td{padding:.9rem 1.25rem;text-align:left;border-bottom:1px solid var(--c-line)}
.price-table th{font-family:var(--f-mono);font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;color:var(--c-steel-dim);font-weight:600}
.price-table td:last-child,.price-table th:last-child{text-align:right;white-space:nowrap}
.price-table tbody tr:last-child td{border-bottom:0}
.price-table tbody tr:hover{background:rgba(242,240,236,.03)}
.price-table-note{color:var(--c-steel-dim);font-size:.875rem;margin-top:1.5rem;max-width:60ch}
.not-found{padding-block:calc(var(--space-lg) + 4.5rem) var(--space-section);text-align:left}
.widget{margin-bottom:2.5rem}
.widget-title{font-family:var(--f-mono);font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:var(--c-steel-dim);margin-bottom:1rem}

.comments-title{margin-bottom:2rem;color:var(--c-steel)}
.comment-list{display:grid;gap:1.75rem;margin-bottom:2.5rem}
.comment-list .comment-body{border-top:1px solid var(--c-line);padding-top:1.5rem}
.comment-list .comment-author{font-weight:600;margin-right:.5rem}
.comment-list .comment-metadata{color:var(--c-steel-dim);font-size:.8125rem;font-family:var(--f-mono)}
.comment-reply-link{font-family:var(--f-mono);font-size:.75rem;color:var(--c-signal)}
.comment-form input:not([type="submit"]),.comment-form textarea{
  background:none;border:0;border-bottom:1px solid var(--c-line-strong);color:var(--c-alloy);padding-block:.65rem;width:100%;
}

/* =====================================================================
   12. WOOCOMMERCE
   Sklep współdzieli komponenty (.btn, .card, .badge, .form-field, .alert)
   z resztą motywu — poniżej tylko mostki na natywne klasy WooCommerce.
   ===================================================================== */
.woocommerce ul.products{display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem;list-style:none}
.woocommerce ul.products li.product{background:var(--c-graphite);border:1px solid var(--c-line);padding:1.25rem;transition:border-color .3s var(--ease)}
.woocommerce ul.products li.product:hover{border-color:var(--c-line-strong)}
.woocommerce ul.products li.product img{aspect-ratio:4/5;object-fit:cover;margin-bottom:1rem}
.woocommerce ul.products li.product .woocommerce-loop-product__title{font-family:var(--f-display);font-weight:800;font-size:1.0625rem}
.woocommerce ul.products li.product .price{font-family:var(--f-mono);color:var(--c-signal);display:block;margin-top:.4rem}
.woocommerce span.onsale{font-family:var(--f-mono);font-size:.6875rem;text-transform:uppercase;background:var(--c-signal);color:var(--c-tarmac);padding:.3rem .6rem;position:absolute;left:1.1rem;top:1.1rem}
.woocommerce div.product{position:relative}
.woocommerce div.product .price{font-family:var(--f-mono);font-size:1.5rem;color:var(--c-signal)}
.woocommerce div.product p.price ins{text-decoration:none}
.woocommerce div.product p.price del{color:var(--c-steel-dim);margin-right:.5rem}
.woocommerce .star-rating{color:var(--c-signal)}
.woocommerce a.button,.woocommerce button.button,.woocommerce #respond input#submit,.woocommerce input.button{
  font-family:var(--f-mono);font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase;
  padding:1rem 1.75rem;background:var(--c-signal);color:var(--c-tarmac);border:1px solid transparent;border-radius:var(--radius);cursor:pointer;
}
.woocommerce a.button:hover,.woocommerce button.button:hover{background:var(--c-signal-hover)}
.woocommerce table.shop_table{border:1px solid var(--c-line);font-size:var(--fs-small)}
.woocommerce table.shop_table th,.woocommerce table.shop_table td{padding:1rem;border-bottom:1px solid var(--c-line)}
.woocommerce .quantity input{background:none;border:1px solid var(--c-line-strong);color:var(--c-alloy);width:3.5rem;padding:.5rem;text-align:center}
.woocommerce-message,.woocommerce-error,.woocommerce-info{border-left:3px solid var(--c-signal);background:var(--c-graphite);border-radius:0;padding:1rem 1.25rem;font-size:var(--fs-small);list-style:none;margin-bottom:1.5rem}
.woocommerce-error{border-left-color:var(--c-danger)}
.woocommerce form .form-row input.input-text,.woocommerce form .form-row select,.woocommerce form .form-row textarea{
  background:none;border:0;border-bottom:1px solid var(--c-line-strong);color:var(--c-alloy);padding-block:.65rem;width:100%;
}
.woocommerce-breadcrumb{display:none} /* zastąpione przez mrc_breadcrumbs() */

/* =====================================================================
   13. WPFORMS (opcjonalnie, gdy skonfigurowane w Customizerze)
   Mostek na natywne klasy wtyczki, żeby formularz wyglądał jak część
   motywu, a nie doklejony, jasny widget w środku ciemnej strony.
   ===================================================================== */
.wpforms-wrapper .wpforms-container{margin:0}
.wpforms-wrapper .wpforms-form{max-width:none}
.wpforms-wrapper .wpforms-field{padding:0 0 1.5rem}
.wpforms-wrapper .wpforms-field-label{
  font-family:var(--f-mono);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--c-steel);font-weight:400;margin-bottom:.5rem;
}
.wpforms-wrapper .wpforms-field-required{color:var(--c-signal)}
.wpforms-wrapper input[type="text"],
.wpforms-wrapper input[type="email"],
.wpforms-wrapper input[type="tel"],
.wpforms-wrapper input[type="url"],
.wpforms-wrapper select,
.wpforms-wrapper textarea{
  background:none;border:0;border-bottom:1px solid var(--c-line-strong);border-radius:0;
  color:var(--c-alloy);padding:.65rem 0;width:100%;font-family:var(--f-body);font-size:1rem;
  box-shadow:none;transition:border-color .3s var(--ease);
}
.wpforms-wrapper input:focus,
.wpforms-wrapper select:focus,
.wpforms-wrapper textarea:focus{border-color:var(--c-signal);outline:none;box-shadow:none}
.wpforms-wrapper textarea{min-height:6rem;resize:vertical}
.wpforms-wrapper .wpforms-submit-container{margin-top:.5rem}
.wpforms-wrapper button[type="submit"]{
  font-family:var(--f-mono);font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase;
  padding:1rem 1.75rem;background:var(--c-signal);color:var(--c-tarmac);border:0;border-radius:var(--radius);
  cursor:pointer;transition:background .3s var(--ease);
}
.wpforms-wrapper button[type="submit"]:hover{background:var(--c-signal-hover)}
.wpforms-wrapper .wpforms-error-container,
.wpforms-wrapper .wpforms-field-label-error,
.wpforms-wrapper label.wpforms-error{color:var(--c-danger);font-size:.8125rem;margin-top:.4rem}
.wpforms-wrapper .wpforms-confirmation-container{
  border-left:3px solid var(--c-success);background:var(--c-graphite);padding:1rem 1.25rem;font-size:var(--fs-small);
}

/* =====================================================================
   14. RESPONSYWNOŚĆ
   ===================================================================== */
@media(min-width:640px){
  .gallery-grid{grid-template-columns:repeat(3,1fr)}
  .gallery-grid--featured{grid-template-columns:repeat(2,1fr);max-width:56rem}
  .woocommerce ul.products{grid-template-columns:repeat(3,1fr)}
}
@media(min-width:860px){
  .contact-grid{grid-template-columns:1.1fr .9fr}
  .page-header-grid{grid-template-columns:1.1fr 1fr;gap:3rem}
  .page-header h1{max-width:none}
  .hero-grid{
    grid-template-columns:1.3fr 1fr;column-gap:3rem;row-gap:1.25rem;
    grid-template-areas:"heading photo" "lead photo";align-items:center;
  }
  .hero-heading-block{grid-area:heading;text-align:left}
  .hero-kicker{justify-content:flex-start}
  .hero h1{margin-inline:0}
  .hero-lead-block{grid-area:lead;text-align:left;margin-inline:0}
  .hero-foot{justify-content:space-between}
  .hero-actions{justify-content:flex-start}
  .hero-grid .page-header-photo{grid-area:photo;max-width:23rem;margin-inline:0;justify-self:start;align-self:center}
}
@media(min-width:640px){
  .brand-row{grid-template-columns:9rem 1fr;gap:1rem 2rem}
}
@media(min-width:960px){
  .nav-links{display:flex}
  .nav-mobile-panel,.nav-toggle{display:none}
  .service-row{grid-template-columns:6rem 1fr auto}
  .footer-grid{grid-template-columns:1.3fr repeat(3,1fr)}
  .entry-grid{grid-template-columns:repeat(2,1fr)}
  .woocommerce ul.products{grid-template-columns:repeat(4,1fr)}
}
@media(max-width:959px){
  .nav-links,.nav-phone{display:none}
  .nav-toggle{display:block}
  .service-row{grid-template-columns:1fr auto}
  .service-code{grid-column:1/2;padding-top:0}
  .service-arrow{grid-row:1/2}
  .service-body{grid-column:1/-1}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:479px){
  .gallery-grid{grid-template-columns:1fr}
  .woocommerce ul.products{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .hero-foot{flex-direction:column;align-items:flex-start;gap:1.5rem}
}
@media(max-width:900px){
  .hero-emblem{width:clamp(20rem,70vw,34rem);right:clamp(-6rem,-10vw,-1rem)}
}
@media(max-width:600px){
  .hero-emblem{width:80vw;right:-8vw}
}