/* ==========================================================================
   Cathedral Black — BIBLIOTEKA BLOKÓW (§4 brief wizualny)
   Reużywalne bloki kompozycyjne. Tokeny dziedziczone z main.css (:root).
   Zasady: clip-path zamiast zaokrągleń, złoto na OLED, brak miękkich cieni SaaS,
   JetBrains Mono = liczby, Bebas = etykiety, Orbitron = display, Inter = body.
   ========================================================================== */

/* --- wspólny "cut corner" --- */
.cb-cut { clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px)); }

/* === BLOK 2: Pasek zaufania ============================================== */
.trust-bar { display:flex; flex-wrap:wrap; gap:0; border:1px solid var(--color-border);
  background:var(--color-surface); max-width:1100px; margin:0 auto; }
.trust-bar__item { flex:1 1 0; min-width:160px; padding:22px 26px; border-right:1px solid var(--color-border); text-align:center; }
.trust-bar__item:last-child { border-right:0; }
.trust-bar__v { font-family:var(--font-data); font-weight:700; font-size:1.6rem; color:var(--color-gold); }
.trust-bar__k { font-family:var(--font-eyebrow); letter-spacing:.14em; text-transform:uppercase; font-size:.78rem; color:var(--color-text-muted); margin-top:4px; }
@media (max-width:767px){ .trust-bar__item{ flex-basis:50%; border-bottom:1px solid var(--color-border);} }

/* === BLOK 3: Kroki procesu (asymetryczny timeline + ikony) =============== */
.proc { max-width:900px; margin:0 auto; display:grid; gap:0; }
.proc__step { display:grid; grid-template-columns:64px 1fr; gap:22px; padding:26px 0; border-bottom:1px solid var(--color-border); position:relative; }
.proc__step:last-child{ border-bottom:0; }
.proc__step:nth-child(even){ padding-left:48px; } /* asymetria — nie równy grid */
.proc__icowrap { width:64px; height:64px; border:1px solid var(--color-border); display:flex; align-items:center; justify-content:center; }
.proc__ico { width:30px; height:30px; color:var(--color-gold); }
.proc__num { position:absolute; left:-2px; top:-10px; font-family:var(--font-eyebrow); font-size:.85rem; letter-spacing:.1em; color:var(--color-gold-dark); }
.proc__h { font-family:var(--font-display); font-size:1.15rem; margin-bottom:6px; }
.proc__d { color:var(--color-text-muted); font-size:.95rem; line-height:1.6; }
@media (max-width:767px){ .proc__step:nth-child(even){ padding-left:0; } }

/* === BLOK 4: Before / After (placeholder — BEZ fałszywych zdjęć) ========= */
.ba-ph { display:grid; grid-template-columns:1fr 1fr; gap:16px; max-width:900px; margin:0 auto; }
.ba-ph__cell { aspect-ratio:4/3; border:1px dashed var(--color-border); background:
  repeating-linear-gradient(45deg, #161616 0 12px, #131313 12px 24px); display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:10px; text-align:center; padding:18px; }
.ba-ph__tag { font-family:var(--font-eyebrow); letter-spacing:.16em; text-transform:uppercase; font-size:.8rem; color:var(--color-text-muted); }
.ba-ph__cell--after .ba-ph__tag { color:var(--color-gold); }
.ba-ph__cta { font-family:var(--font-eyebrow); letter-spacing:.1em; text-transform:uppercase; font-size:.85rem; color:var(--color-gold); border:1px solid var(--color-gold); padding:8px 16px; }
@media (max-width:767px){ .ba-ph{ grid-template-columns:1fr; } }

/* === BLOK 5: Tabela porównawcza (stylizowana, na mobile → karty) ========= */
.cmp { width:100%; border-collapse:collapse; font-family:var(--font-body); max-width:1000px; margin:0 auto; }
.cmp th { font-family:var(--font-eyebrow); letter-spacing:.12em; text-transform:uppercase; font-size:.8rem; color:var(--color-gold);
  text-align:left; padding:14px 18px; border-bottom:2px solid var(--color-gold-dark); }
.cmp td { padding:14px 18px; border-bottom:1px solid var(--color-border); color:var(--color-text-muted); }
.cmp tr:hover td { background:rgba(254,210,96,0.04); color:var(--color-text); }
.cmp .num { font-family:var(--font-data); color:var(--color-gold); }
@media (max-width:767px){
  .cmp, .cmp tbody, .cmp tr { display:block; width:100%; }
  .cmp thead { display:none; }
  .cmp tr { border:1px solid var(--color-border); margin-bottom:12px; padding:6px 0; }
  .cmp td { display:flex; justify-content:space-between; border:0; }
  .cmp td::before { content:attr(data-label); font-family:var(--font-eyebrow); letter-spacing:.1em; text-transform:uppercase; color:var(--color-text-muted); }
}

/* === BLOK 6: Karty cennikowe ============================================ */
.pricing { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px; max-width:1100px; margin:0 auto; }
.pricing__card { border:1px solid var(--color-border); background:var(--color-surface); padding:28px 24px;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px)); transition:border-color var(--transition), transform var(--transition); }
.pricing__card:hover { border-color:var(--color-gold); }
.pricing__card--featured { border-color:var(--color-gold); transform:scale(1.02); }
.pricing__name { font-family:var(--font-eyebrow); letter-spacing:.14em; text-transform:uppercase; color:var(--color-text-muted); font-size:.85rem; }
.pricing__price { font-family:var(--font-data); font-weight:700; font-size:2.2rem; color:var(--color-gold); margin:10px 0 4px; }
.pricing__unit { color:var(--color-text-muted); font-size:.85rem; }
.pricing__list { margin:18px 0; display:flex; flex-direction:column; gap:8px; }
.pricing__list li { color:var(--color-text-muted); font-size:.9rem; padding-left:18px; position:relative; }
.pricing__list li::before { content:"›"; position:absolute; left:0; color:var(--color-gold); }

/* === BLOK 8: Galeria + lightbox ========================================= */
.gallery { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:12px; max-width:1100px; margin:0 auto; }
.gallery__item { aspect-ratio:1/1; border:1px solid var(--color-border); background:
  repeating-linear-gradient(45deg, #161616 0 12px, #131313 12px 24px); display:flex; align-items:center; justify-content:center;
  color:var(--color-text-muted); font-family:var(--font-eyebrow); letter-spacing:.12em; font-size:.78rem; cursor:pointer; transition:border-color var(--transition); }
.gallery__item:hover { border-color:var(--color-gold); }
.lightbox { position:fixed; inset:0; background:rgba(0,0,0,.9); display:none; align-items:center; justify-content:center; z-index:1000; }
.lightbox.open { display:flex; }
.lightbox img { max-width:90vw; max-height:90vh; border:1px solid var(--color-gold); }

/* === BLOK 9: Blok lokalny (wysyłka kurierska) =========================== */
.local { display:grid; grid-template-columns:1.3fr .7fr; gap:32px; align-items:center; max-width:1100px; margin:0 auto;
  border:1px solid var(--color-border); background:var(--color-surface); padding:32px; }
.local__h { font-family:var(--font-display); font-size:1.4rem; margin-bottom:12px; }
.local__d { color:var(--color-text-muted); line-height:1.7; }
.local__steps { margin-top:16px; display:flex; flex-direction:column; gap:8px; }
.local__steps li { color:var(--color-text-muted); padding-left:20px; position:relative; }
.local__steps li::before { content:"→"; position:absolute; left:0; color:var(--color-gold); }
.local__map { aspect-ratio:1/1; border:1px solid var(--color-border); display:flex; align-items:center; justify-content:center; }
.local__map svg { width:70%; color:var(--color-gold); }
@media (max-width:767px){ .local{ grid-template-columns:1fr; } }

/* === BLOK 10: CTA końcowe =============================================== */
.cta-final { background:var(--color-surface); border-top:2px solid var(--color-gold); padding:48px 24px; text-align:center; }
.cta-final__h { font-family:var(--font-display); font-size:1.8rem; margin-bottom:10px; }
.cta-final__d { color:var(--color-text-muted); max-width:520px; margin:0 auto 22px; }
.cta-final__form { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; max-width:480px; margin:0 auto; }
.cta-final__input { flex:1 1 220px; padding:14px 16px; background:var(--color-bg); border:1px solid var(--color-border); color:var(--color-text); font-family:var(--font-body); }
.cta-final__input:focus { border-color:var(--color-gold); outline:none; }

/* === HERO warianty (single.php, ID % 3) === */
.vhero{position:relative;display:grid;gap:40px;align-items:center;max-width:1200px;margin:0 auto;padding:72px 24px;}
.vhero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(55% 75% at var(--ax,82%) 50%,rgba(254,210,96,.10),transparent 60%),
  linear-gradient(rgba(254,210,96,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(254,210,96,.03) 1px,transparent 1px);
  background-size:auto,44px 44px,44px 44px;}
.vhero>*{position:relative;z-index:1}
.vhero--l{grid-template-columns:1.1fr .9fr}
.vhero--r{grid-template-columns:.9fr 1.1fr}
.vhero--r .vhero__media{order:-1}
.vhero--band{grid-template-columns:1fr;gap:22px;--ax:50%}
.vhero__title{font-family:var(--font-display);font-weight:800;font-size:clamp(2.2rem,4.5vw,3.6rem);line-height:1.04;margin:16px 0}
.vhero__title .g{color:var(--color-gold)}
.vhero__lead{color:var(--color-text-muted);font-size:1.1rem;line-height:1.6;max-width:34ch}
.vhero__cta{display:flex;gap:12px;margin-top:26px;flex-wrap:wrap}
.vhero__media{aspect-ratio:1/1;border:1px solid var(--color-border);background:var(--color-surface);display:flex;align-items:center;justify-content:center;
  clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,22px 100%,0 calc(100% - 22px))}
.vhero__media svg{width:68%;height:68%;color:var(--color-gold)}
.vhero--band .vhero__media{aspect-ratio:auto;height:150px;width:100%;border:0;border-bottom:1px solid var(--color-border);opacity:.5}
.vhero--band .vhero__media svg{height:120px;width:120px}
@media (max-width:767px){.vhero--l,.vhero--r{grid-template-columns:1fr}.vhero--r .vhero__media{order:0}}

/* proc jako karty (wariant) */
.proc--cards{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;max-width:900px}
.proc--cards .proc__step{grid-template-columns:48px 1fr;border:1px solid var(--color-border);padding:18px;gap:16px}
.proc--cards .proc__step:nth-child(even){padding-left:18px}
.proc--cards .proc__icowrap{width:48px;height:48px}
@media (max-width:767px){.proc--cards{grid-template-columns:1fr}}

/* reduced motion */
@media (prefers-reduced-motion:reduce){ .pricing__card{ transition:none; } }

/* === Galeria wizualizacji: realne obrazy (nadpisuje placeholdery) ======== */
.gallery__item--img { position:relative; padding:0; overflow:hidden; background:#131313; font:inherit; }
.gallery__item--img img { width:100%; height:100%; object-fit:cover; display:block; }
.gallery__item--img .gallery__cap { position:absolute; left:0; right:0; bottom:0; padding:26px 10px 9px;
  font-family:var(--font-eyebrow); letter-spacing:.12em; text-transform:uppercase; font-size:.72rem; color:#fff;
  background:linear-gradient(transparent, rgba(0,0,0,.78)); text-align:left; pointer-events:none; }
.gallery__item--img:focus-visible { outline:2px solid var(--color-gold); outline-offset:2px; }
.ba-ph--img .ba-ph__cell { position:relative; padding:0; overflow:hidden; border:1px solid var(--color-border); background:none; margin:0; }
.ba-ph--img .ba-ph__cell img { width:100%; height:100%; object-fit:cover; display:block; }
.ba-ph--img .ba-ph__tag { position:absolute; top:12px; left:12px; background:rgba(0,0,0,.68); padding:6px 12px; color:#fff; }
.ba-ph--img .ba-ph__cell--after .ba-ph__tag { color:var(--color-gold); }
.ba-ph--img .ba-ph__cta { position:absolute; bottom:12px; right:12px; background:rgba(0,0,0,.68); }
.viz-note { max-width:1100px; margin:14px auto 0; color:var(--color-text-muted); font-size:.85rem; line-height:1.6; }