/* ==========================================================================
   GOBLIN 2026 — arkusz główny
   Paleta i proporcje wzorowane na demie BlueCollar, kod napisany od zera.
   ========================================================================== */

:root{
  --accent:#f9b109;
  --accent-50:rgba(249,177,9,.5);
  --blue:#193c9d;
  --cyan:rgba(12,182,239,.5);
  --dark:#1e2427;
  --topbar:#202020;
  --text:#444;
  --muted:#8a949b;
  --border:#e1e7ec;
  --border-2:#ccd5db;
  --light:#f5f5f5;
  --head:'Exo 2',Arial,sans-serif;
  --body:'Source Sans Pro',Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html,body{font-size:16px}
body{
  margin:0;font-family:var(--body);line-height:1.6;color:var(--text);
  background:#fff;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--text);text-decoration:none;transition:color 150ms,box-shadow 150ms}
a:hover{color:var(--dark)}
h1,h2,h3,h4,h5,h6,.is-head{font-family:var(--head);color:var(--dark);margin:0 0 .6em;line-height:1.25;font-weight:700}
h1{font-size:3em}h2{font-size:2.25em}h3{font-size:1.5em}h4{font-size:1.125em}
p{margin:0 0 1.2em}
ul,ol{margin:0 0 1.2em;padding-left:1.3em}

.g-container{max-width:1199px;margin:0 auto;padding:0 15px}
.g-section{padding:70px 0}
.g-section--light{background:var(--light)}
.g-section--tight{padding:50px 0}

/* --- przycisk ------------------------------------------------------------ */
.g-btn{
  display:inline-block;padding:10px 15px;font-family:var(--body);font-size:1em;
  font-weight:700;line-height:1.4;color:var(--dark);background:transparent;
  border:2px solid var(--accent);cursor:pointer;transition:box-shadow 250ms,color 250ms;
}
.g-btn:hover{box-shadow:0 0 0 2px var(--accent);color:var(--dark)}
.g-btn:active{box-shadow:none}
.g-btn--large{padding:15px 20px;font-size:1.125em}
.g-btn--light{color:#fff;text-transform:uppercase;letter-spacing:.03em}
.g-btn--light:hover{color:#fff}

/* --- pas w kolorze marki -------------------------------------------------- */
.g-band{position:relative;background-color:var(--blue);color:#fff;overflow:hidden}
.g-band::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(to bottom,transparent,var(--cyan));
}
.g-band__bg{position:absolute;inset:0;opacity:.14;z-index:0}
.g-band__bg img{width:100%;height:100%;object-fit:cover}
.g-band>.g-container,.g-band__inner{position:relative;z-index:2}
.g-band h1,.g-band h2,.g-band h3,.g-band a{color:#fff}

/* --- nagłówek sekcji ------------------------------------------------------ */
.g-title{font-size:2em;font-weight:400;margin:0 0 35px;position:relative;padding-bottom:16px}
.g-title b,.g-title strong{font-weight:700}
.g-title::after{content:"";position:absolute;left:0;bottom:0;width:40px;height:3px;background:var(--accent)}
.g-title--center{text-align:center}
.g-title--center::after{left:50%;transform:translateX(-50%)}

/* ==========================================================================
   NAGŁÓWEK
   ========================================================================== */
.g-topbar{background:var(--topbar);color:#fff;font-size:.8125em}
.g-topbar .g-container{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:36px;flex-wrap:wrap}
.g-topbar__list{display:flex;align-items:center;gap:18px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.g-topbar a{color:#fff}
.g-topbar a:hover{color:var(--accent)}
.g-topbar__ico{display:inline-block;width:13px;height:13px;color:var(--accent);margin-right:6px;vertical-align:-2px}
.g-topbar__ico svg{width:13px;height:13px;display:block}
.g-topbar__list li{display:flex;align-items:center}
.g-social{display:flex;gap:12px;align-items:center}
.g-social a{display:inline-flex;align-items:center}
.g-social svg{width:14px;height:14px;display:block;fill:currentColor}

.g-navbar{background:#fff;box-shadow:0 2px 5px rgba(0,0,0,.1);position:relative;z-index:30}
.g-navbar .g-container{display:flex;align-items:center;justify-content:space-between;gap:20px}
.g-brand{display:flex;align-items:center;gap:12px;padding:12px 0}
.g-brand img{max-height:50px;width:auto}
.g-brand__name{font-family:var(--head);font-weight:700;font-size:1.125em;color:var(--dark);line-height:1.2}
.g-brand__tag{font-size:.8125em;font-style:italic;color:var(--muted);line-height:1.2}

.g-nav ul{display:flex;list-style:none;margin:0;padding:0;gap:4px}
.g-nav li{position:relative}
.g-nav a{
  display:block;padding:14px 12px;font-family:var(--head);font-size:.875em;font-weight:700;
  text-transform:uppercase;letter-spacing:.02em;color:var(--dark);
}
.g-nav a:hover,.g-nav .current-menu-item>a,.g-nav .current_page_item>a,.g-nav .current-menu-parent>a{color:var(--accent)}
.g-nav .sub-menu{display:none;position:absolute;left:0;top:100%;min-width:230px;background:#fff;
  box-shadow:0 2px 8px rgba(0,0,0,.15);padding:6px 0;flex-direction:column;gap:0}
.g-nav li:hover>.sub-menu{display:flex}
.g-nav .sub-menu a{text-transform:none;font-size:.9375em;padding:8px 18px}

.g-nav-toggle{display:none;background:none;border:0;color:var(--accent);padding:10px;cursor:pointer}
.g-nav-toggle svg{width:26px;height:26px;fill:currentColor}

/* ==========================================================================
   HERO + KAFLE USŁUG
   ========================================================================== */
.g-hero{padding-top:55px}
/* siatka kafli jest szersza niż kolumna tekstu - tak jak w pierwowzorze */
.g-hero .g-band__inner{padding-bottom:30px}
.g-hero .g-band__inner .g-container{max-width:1270px}
.g-hero__title{font-size:3em;font-weight:400;text-align:center;margin:0 0 14px;line-height:1.2}
.g-hero__title b{display:block;font-weight:700}
.g-hero__rule{width:40px;height:3px;background:var(--accent);margin:0 auto 18px}
.g-hero__lead{text-align:center;max-width:720px;margin:0 auto 45px;font-size:1.0625em;color:rgba(255,255,255,.85)}

.g-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.g-tile{position:relative;display:block;min-height:250px;overflow:hidden;color:#fff}
.g-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.g-tile::after{
  content:"";position:absolute;inset:0;background-color:rgba(0,0,0,.25);
  background-image:linear-gradient(to bottom,transparent,rgba(0,0,0,.85));transition:background-color 200ms;
}
.g-tile:hover::after{background-color:rgba(0,0,0,.45)}
.g-tile__in{position:relative;z-index:2;height:100%;min-height:250px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:10px;padding:18px 10px;text-align:center}
.g-tile__ico{width:40px;height:40px;color:var(--accent)}
.g-tile__ico svg{width:100%;height:100%;display:block}
.g-tile__name{font-family:var(--head);font-weight:400;font-size:1.0625em;color:#fff}

/* ==========================================================================
   O FIRMIE + ATUTY
   ========================================================================== */
.g-intro{display:grid;grid-template-columns:330px 1fr;gap:55px;align-items:center}
.g-intro__media img{width:100%}
.g-intro__title{font-size:1.875em;font-weight:400;margin:0 0 16px;line-height:1.3}
.g-intro__title b{font-weight:700;display:block}
.g-intro__rule{width:40px;height:3px;background:var(--accent);margin:0 0 22px}

.g-features{border-top:1px solid var(--border);margin-top:60px;padding-top:50px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.g-feature{display:grid;grid-template-columns:38px 1fr;gap:16px}
.g-feature__ico{color:var(--accent);width:34px;height:34px;margin-top:2px}
.g-feature__ico svg{width:100%;height:100%;display:block}
.g-feature h3{font-size:1.25em;font-weight:400;margin:0 0 6px}
.g-feature p{margin:0;font-size:.9375em}

/* ==========================================================================
   OPINIE
   ========================================================================== */
.g-quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.g-quote{border:1px solid rgba(255,255,255,.3);padding:26px 24px}
.g-quote__text{font-style:italic;margin:0 0 20px;color:#fff}
.g-quote__who{display:flex;align-items:center;gap:12px}
.g-quote__avatar{width:34px;height:34px;border-radius:50%;border:2px solid var(--accent);
  display:flex;align-items:center;justify-content:center;font-family:var(--head);font-weight:700;
  font-size:.8125em;color:var(--accent);flex:0 0 auto}
.g-quote__name{font-weight:700;font-size:.9375em;color:#fff;line-height:1.3}
.g-quote__role{font-size:.8125em;color:var(--border-2);line-height:1.3}

/* ==========================================================================
   KARTY (realizacje / wpisy / usługi)
   ========================================================================== */
.g-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.g-cards--4{grid-template-columns:repeat(4,1fr)}
.g-card{border:1px solid var(--border);background:#fff;display:flex;flex-direction:column}
.g-card__media{position:relative;display:block;background:var(--light)}
.g-card__thumb{display:block;aspect-ratio:4/3;overflow:hidden}
.g-card__media img{width:100%;height:100%;object-fit:cover;transition:transform 400ms}
.g-card:hover .g-card__media img{transform:scale(1.04)}
.g-card__badge{position:absolute;right:16px;bottom:-20px;width:40px;height:40px;border-radius:50%;
  background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;z-index:2}
.g-card__badge svg{width:20px;height:20px}
.g-card__body{padding:22px 22px 20px;display:flex;flex-direction:column;flex:1}
.g-card__title{font-size:1.125em;margin:0 0 6px}
.g-card__title a{color:var(--dark);box-shadow:0 2px 0 0 transparent}
.g-card__title a:hover{box-shadow:0 2px 0 0 var(--accent)}
.g-card__meta{font-size:.8125em;color:var(--muted);margin:0 0 12px}
.g-card__meta a{color:var(--muted)}
.g-card__meta a:hover{color:var(--accent)}
.g-card p{font-size:.9375em;margin:0 0 16px}
.g-card__more{margin-top:auto;font-size:.875em;align-self:flex-start;
  color:var(--dark);box-shadow:0 2px 0 0 var(--accent);padding-bottom:1px}
.g-card__more:hover{box-shadow:0 2px 0 0 var(--dark)}
.g-band .g-card{background:transparent;border-color:rgba(255,255,255,.3)}
.g-band .g-card__title a,.g-band .g-card__more{color:#fff}
.g-band .g-card__meta,.g-band .g-card__meta a{color:var(--border)}

/* ==========================================================================
   PAS CTA
   ========================================================================== */
.g-cta .g-container{display:flex;align-items:center;justify-content:space-between;gap:40px;padding-top:45px;padding-bottom:45px}
.g-cta__title{font-size:1.875em;font-weight:400;margin:0 0 8px}
.g-cta__title b{font-weight:700}
.g-cta p{margin:0;color:rgba(255,255,255,.9);max-width:640px}

/* ==========================================================================
   NAGŁÓWEK PODSTRONY + PANEL TREŚCI
   ========================================================================== */
.g-pagehead{padding:55px 0 60px;text-align:center}
.g-pagehead__title{font-size:2.5em;font-weight:400;margin:0 0 14px}
.g-pagehead__rule{width:40px;height:3px;background:var(--accent);margin:0 auto}
.g-panel{max-width:1370px;margin:-34px auto 0;background:#fff;position:relative;z-index:5;padding:45px 0 60px}
.g-crumbs{font-size:.8125em;color:var(--muted);margin:0 0 25px}
.g-crumbs a{color:var(--muted)}
.g-crumbs a:hover{color:var(--accent)}
.g-crumbs span{padding:0 6px}

.g-entry{max-width:900px}
.g-entry--wide{max-width:none}
.g-entry h2{font-size:1.75em}
.g-entry h3{font-size:1.375em}
.g-entry img{margin-bottom:1.2em}
.g-entry a{color:var(--dark);box-shadow:0 1px 0 0 var(--accent)}
.g-entry a:hover{box-shadow:0 1px 0 0 var(--dark)}
.g-entry ul li,.g-entry ol li{margin-bottom:.4em}

.g-pagination{display:flex;gap:6px;flex-wrap:wrap;margin-top:40px}
.g-pagination .page-numbers{display:block;padding:8px 14px;border:1px solid var(--border);font-size:.9375em}
.g-pagination .current{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:700}

/* ==========================================================================
   STOPKA
   ========================================================================== */
.g-footer{background:var(--dark);color:var(--border-2);font-size:.9375em}
.g-footer__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:45px;padding:60px 0 50px}
.g-footer h3{font-family:var(--head);font-size:1.125em;font-weight:400;color:#fff;
  margin:0 0 22px;padding-bottom:10px;position:relative}
.g-footer h3 b{font-weight:700}
.g-footer h3::after{content:"";position:absolute;left:0;bottom:0;width:30px;height:2px;background:var(--accent)}
.g-footer a{color:var(--border-2)}
.g-footer a:hover{color:var(--accent)}
.g-footer strong{color:#fff}
.g-footer ul{list-style:none;margin:0;padding:0}
.g-footer ul li{margin-bottom:8px}
.g-footer__bar{border-top:1px solid rgba(255,255,255,.1);padding:18px 0;display:flex;
  justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:.875em}
.g-footer__bar ul{display:flex;gap:18px}
.g-footer__bar a{box-shadow:0 1px 0 0 rgba(255,255,255,.25)}

/* ==========================================================================
   RWD
   ========================================================================== */
@media (max-width:1100px){
  .g-intro{grid-template-columns:260px 1fr;gap:35px}
  .g-features{gap:28px}
}
@media (max-width:900px){
  .g-nav-toggle{display:block}
  .g-nav{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;
    box-shadow:0 8px 14px rgba(0,0,0,.14);padding:8px 0}
  .g-nav.is-open{display:block}
  .g-nav ul{flex-direction:column;gap:0}
  .g-nav a{padding:12px 20px;border-bottom:1px solid var(--border)}
  .g-nav .sub-menu{display:block;position:static;box-shadow:none;padding:0}
  .g-nav .sub-menu a{padding-left:38px}
  .g-tiles{grid-template-columns:repeat(2,1fr)}
  .g-intro{grid-template-columns:1fr;gap:28px}
  .g-intro__media{max-width:330px}
  .g-features,.g-quotes,.g-cards,.g-cards--4,.g-footer__cols{grid-template-columns:1fr}
  .g-cta .g-container{flex-direction:column;align-items:flex-start}
  .g-section{padding:50px 0}
  .g-panel{margin-top:-20px;padding:30px 0 45px}
  h1{font-size:2.25em}h2{font-size:1.75em}
  .g-hero__title{font-size:2em}
  .g-pagehead__title{font-size:1.875em}
}
@media (max-width:560px){
  .g-topbar .g-container{justify-content:center;text-align:center}
  .g-tiles{gap:3px}
  .g-tile,.g-tile__in{min-height:150px}
}

/* ==========================================================================
   TREŚĆ PO MIGRACJI ZE STAREJ STRONY
   Stare szablony VCMS zostawiły w bazie własny markup (#galeria, .kolumn_dlaczego,
   figure.effect-oscar). Poniższe reguły ubierają go w wygląd tego motywu,
   żeby nie trzeba było przepisywać treści wszystkich podstron.
   ========================================================================== */

/* --- galeria zdjęć na podstronach realizacji ----------------------------- */
.g-entry #galeria ul,
#galeria ul{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
#galeria li{margin:0;line-height:0}
#galeria .fotkag{display:block}
#galeria a{display:block;position:relative;overflow:hidden;box-shadow:none;background:var(--light);line-height:0}
#galeria a::after{content:"";position:absolute;inset:0;background:rgba(25,60,157,0);transition:background 200ms}
#galeria a:hover::after{background:rgba(25,60,157,.25)}
#galeria img,#galeria img.fotainner{width:100%;height:215px;object-fit:cover;display:block;
  transition:transform 400ms;max-width:none}
#galeria a:hover img{transform:scale(1.05)}
#galeria span{display:none}

/* --- kafelki "zobacz galerię" na stronie Realizacje ---------------------- */
/* stare szablony mieszają kolejność (.text_dla przed .grid albo po nim),
   więc kolejność wymuszamy, zamiast polegać na kolejności w HTML-u */
.kolumn_dlaczego{display:grid;grid-template-rows:auto 1fr;border:1px solid var(--border);background:#fff}
.kolumn_dlaczego .grid{order:1}
.kolumn_dlaczego .text_dla,.kolumn_dlaczego .text_dla2{order:2;padding:20px 22px;display:flex;align-items:center}
.kolumn_dlaczego .inner2{margin:0}
.kolumn_dlaczego .tyt_dl{font-family:var(--head);font-size:1.125em;font-weight:700;margin:0}
.kolumn_dlaczego .tyt_dl a{color:var(--dark);box-shadow:0 2px 0 0 transparent}
.kolumn_dlaczego .tyt_dl a:hover{box-shadow:0 2px 0 0 var(--accent)}
.kolumn_dlaczego .grid{float:none!important;margin:0;padding:0;list-style:none}
.kolumn_dlaczego figure{position:relative;margin:0;overflow:hidden;background:var(--light);line-height:0}
.kolumn_dlaczego figure img{width:100%;height:230px;object-fit:cover;display:block;transition:transform 400ms}
.kolumn_dlaczego figure:hover img{transform:scale(1.05)}
.kolumn_dlaczego figcaption{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:flex-end;gap:4px;text-align:center;padding:18px;color:#fff;
  background-image:linear-gradient(to bottom,transparent,rgba(0,0,0,.8));transition:background-color 200ms}
.kolumn_dlaczego figure:hover figcaption{background-color:rgba(0,0,0,.3)}
.kolumn_dlaczego figcaption h2{font-size:1.25em;font-weight:400;color:#fff;margin:0}
.kolumn_dlaczego figcaption h2 span{font-weight:700}
.kolumn_dlaczego figcaption p{font-size:.8125em;color:rgba(255,255,255,.85);margin:0}
.kolumn_dlaczego figcaption a{position:absolute;inset:0;box-shadow:none;font-size:0;color:transparent}

/* siatka kafli realizacji - kontener dokładany przez JS motywu */
.g-legacy-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-bottom:10px}

/* stare pływające zdjęcia w treści (oferta, o nas) */
.g-entry img[align=right],.g-entry .foto_right{float:right;margin:0 0 20px 25px;max-width:260px}
.g-entry img[align=left]{float:left;margin:0 25px 20px 0;max-width:260px}

@media (max-width:900px){
  #galeria ul{grid-template-columns:repeat(2,1fr)}
  #galeria img,#galeria img.fotainner{height:150px}
  .g-legacy-grid{grid-template-columns:1fr}
}

/* ==========================================================================
   LIGHTBOX
   ========================================================================== */
.g-lb{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;
  background:rgba(12,16,18,.93);padding:40px 20px}
.g-lb.is-open{display:flex}
.g-lb img{max-width:100%;max-height:88vh;width:auto;box-shadow:0 10px 40px rgba(0,0,0,.5)}
.g-lb__btn{position:absolute;background:none;border:0;color:#fff;cursor:pointer;padding:10px;
  font-family:var(--head);font-size:2em;line-height:1;opacity:.75;transition:opacity 150ms}
.g-lb__btn:hover{opacity:1;color:var(--accent)}
.g-lb__close{top:12px;right:16px;font-size:2.4em}
.g-lb__prev{left:10px;top:50%;transform:translateY(-50%)}
.g-lb__next{right:10px;top:50%;transform:translateY(-50%)}
.g-lb__count{position:absolute;bottom:14px;left:0;right:0;text-align:center;color:#fff;
  font-size:.875em;opacity:.7}

@media (max-width:900px){
}

/* Treść po migracji ma każdą pozycję listy jako osobny akapit z myślnikiem,
   przez co strony robiły się bardzo rozstrzelone - ściągamy odstęp. */
.g-entry p{margin-bottom:.9em}
.g-entry p:empty{display:none}


/* ==========================================================================
   STRONA KONTAKT - same dane teleadresowe
   ========================================================================== */
.g-dane{text-align:center;padding:30px 0 50px;font-size:1.125em;line-height:1.8}
.g-dane p{margin:0 0 1.4em}
.g-dane p:last-child{margin-bottom:0}
.g-dane__firma{font-family:var(--head);font-size:1.5em;font-weight:700;color:var(--dark);line-height:1.4}
.g-dane a{color:var(--dark);box-shadow:0 1px 0 0 var(--accent)}
.g-dane a:hover{box-shadow:0 1px 0 0 var(--dark)}
.g-hero__kicker{text-align:center;margin:0 0 10px;font-size:.9375em;letter-spacing:.08em;
  text-transform:uppercase;color:rgba(255,255,255,.75)}