/* ============================================================
   OPAKUJ.COM — WARSTWA PODSTRON USŁUGOWYCH
   Wczytywana PO assets/theme.css. Nie nadpisuje niczego ze
   strony głównej — wszystkie klasy mają przedrostek `u-`,
   dzięki czemu arkusz główny pozostaje nietknięty.
   Kolory, krój i odstępy pochodzą ze zmiennych w theme.css.
   ============================================================ */

/* ===== OKRUSZKI =====
   Wygląd identyczny jak na pozostałych podstronach serwisu (uslugi.html,
   o-nas.html, realizacje.html, kontakt.html) — jeden pasek w całym serwisie. */
.u-crumbs{background:var(--paper);border-bottom:1px solid var(--line);font-size:13.5px}
.u-crumbs ol{list-style:none;margin:0;padding:11px 0;display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;color:var(--muted)}
.u-crumbs li{display:inline-flex;align-items:center;gap:10px;min-width:0}
.u-crumbs li+li::before{content:"";width:5px;height:5px;border-right:1.6px solid #9aa4b2;border-top:1.6px solid #9aa4b2;transform:rotate(45deg);flex:none}
.u-crumbs a{color:var(--blue);text-decoration:none;min-height:24px;display:inline-flex;align-items:center}
.u-crumbs a:hover{text-decoration:underline}
.u-crumbs [aria-current="page"]{color:var(--ink);font-weight:600}

/* ===== WSPÓLNE ELEMENTY SEKCJI ===== */
.u-sec{padding:clamp(44px,6.4vw,92px) 0}
.u-sec--paper{background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.u-sec--dark{background:var(--navy);color:#fff;position:relative;overflow:hidden}
.u-sec--dark h2,.u-sec--dark h3{color:#fff}
.u-sec--dark .tag{color:#FF9A6B}
.u-sec--dark p{color:#C6D0E4}
.u-sec--dark .u-hex{position:absolute;inset:0;width:100%;height:100%;color:#fff;opacity:.08;pointer-events:none}
.u-sec--dark .wrap{position:relative}
.u-head{max-width:62ch}
.u-head .lead{margin-top:14px}
.u-prose{max-width:68ch}
.u-prose p{color:var(--muted);font-size:clamp(15.5px,1.2vw,17.2px)}
.u-prose p:last-child{margin-bottom:0}
.u-sec--dark .u-prose p{color:#C6D0E4}

/* ===== HERO — wspólna podstawa ===== */
.u-hero{padding:clamp(34px,4.6vw,64px) 0 clamp(34px,4.6vw,62px)}
.u-hero .h1{max-width:19ch}
.u-hero .lead{max-width:58ch;margin-top:18px}
/* etykiety w nagłówku podstrony idą od lewej — na stronie głównej są wyśrodkowane */
.u-hero .pills{justify-content:flex-start;margin-top:22px}
.u-hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.u-fig{margin:0;position:relative;min-width:0}
.u-fig img{width:100%;object-fit:cover;border-radius:3px;background:var(--paper)}
.u-fig figcaption{font-size:13px;color:var(--muted);margin-top:10px;padding-left:14px;border-left:3px solid var(--red)}

/* wariant A: tekst | zdjęcie */
.u-hero--split .u-hero-in{display:grid;gap:clamp(26px,3.4vw,52px);align-items:center}
@media(min-width:940px){.u-hero--split .u-hero-in{grid-template-columns:1.02fr .98fr}}
.u-hero--split .u-fig img{aspect-ratio:4/3}
/* skos w prawym górnym rogu — echo przekładek z pasa kadrów */
.u-hero--split .u-fig::after{
  content:"";position:absolute;top:0;right:0;width:clamp(48px,7vw,92px);height:clamp(48px,7vw,92px);
  background:var(--red);clip-path:polygon(100% 0,100% 100%,0 0);pointer-events:none;
}

/* wariant B: ciemna bryła + zdjęcie wchodzące na nią od dołu */
.u-hero--dark{background:var(--navy);color:#fff;position:relative;overflow:hidden;padding-bottom:clamp(78px,10vw,150px)}
.u-hero--dark .h1,.u-hero--dark h2{color:#fff}
.u-hero--dark .tag{color:#FF9A6B}
.u-hero--dark .lead{color:#C6D0E4}
.u-hero--dark .wrap{position:relative}
.u-hero--dark .u-hex{position:absolute;inset:0;width:100%;height:100%;color:#fff;opacity:.08;pointer-events:none}
.u-underband{margin-top:clamp(-64px,-7vw,-40px);position:relative;z-index:2}
.u-underband .u-fig img{aspect-ratio:21/9;min-height:200px}

/* wariant C: duży nagłówek + wprowadzenie w prawej kolumnie, pod spodem dwa kadry ze skosem */
.u-hero--wide .u-hero-in{display:grid;gap:clamp(18px,2.6vw,44px);align-items:end}
@media(min-width:900px){.u-hero--wide .u-hero-in{grid-template-columns:1.25fr 1fr}}
.u-hero--wide .h1{max-width:16ch}
.u-hero--wide .lead{margin-top:0}
/* Oba kadry mają jedną, wspólną wysokość (--duo-h) — bez tego skosy nie
   spotykają się w jednej linii, a podpisy stoją na różnych poziomach. */
.u-duo{display:grid;gap:14px;margin-top:clamp(22px,3vw,38px);--duo-h:clamp(230px,26vw,390px)}
@media(min-width:760px){.u-duo{grid-template-columns:1.35fr 1fr;gap:0}}
.u-duo figure{margin:0;position:relative;min-width:0}
.u-duo img{width:100%;height:var(--duo-h);object-fit:cover}
@media(min-width:760px){
  .u-duo figure:first-child img{clip-path:polygon(0 0,100% 0,calc(100% - 46px) 100%,0 100%)}
  .u-duo figure:last-child{margin-left:-46px}
  .u-duo figure:last-child img{clip-path:polygon(46px 0,100% 0,100% 100%,0 100%)}
  /* Czerwona przekładka w szczelinie między kadrami — ten sam gest,
     co skośne paski w pasie kadrów na stronie głównej. */
  .u-duo figure:last-child::before{
    /* z-index jest konieczny: sąsiedni <img> ma własny clip-path, więc tworzy
       kontekst układania i bez tego zamalowałby przekładkę. */
    content:"";position:absolute;left:0;top:0;z-index:1;width:60px;height:var(--duo-h);
    background:var(--red);clip-path:polygon(46px 0,58px 0,12px 100%,0 100%);
  }
}
.u-duo figcaption{font-size:13px;color:var(--muted);margin-top:9px}
@media(min-width:760px){.u-duo figure:last-child figcaption{padding-left:46px}}

/* wariant D: zdjęcie | tekst (odbicie wariantu A) */
.u-hero--mirror .u-hero-in{display:grid;gap:clamp(26px,3.4vw,52px);align-items:center}
@media(min-width:940px){
  .u-hero--mirror .u-hero-in{grid-template-columns:.98fr 1.02fr}
  .u-hero--mirror .u-fig{order:-1}
}
.u-hero--mirror .u-fig img{aspect-ratio:5/4}
.u-hero--mirror .u-fig figcaption{border-left:3px solid var(--blue)}

/* wariant E: zdjęcie w tle pod granatową powłoką */
.u-hero--photo{position:relative;color:#fff;padding:clamp(56px,8vw,120px) 0;overflow:hidden;background:var(--navy-deep)}
.u-hero--photo>img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:.3;filter:grayscale(.35);
}
.u-hero--photo::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,rgba(22,41,77,.94) 0%,rgba(22,41,77,.82) 48%,rgba(22,41,77,.5) 100%);
}
.u-hero--photo .wrap{position:relative;z-index:2}
.u-hero--photo .h1{color:#fff}
.u-hero--photo .tag{color:#FF9A6B}
.u-hero--photo .lead{color:#D6DEEC}
.u-hero--photo .pills{justify-content:flex-start;color:#C6D0E4}
/* Kolor podpisu zmierzony na najjaśniejszym pikselu tła pod powłoką:
   #9FB0CB dawało 4,44:1, #B0BED4 daje 5,2:1 — powyżej progu 4,5:1. */
.u-photo-credit{margin:26px 0 0;font-size:12.5px;color:#B0BED4}

/* wariant F: nagłówek + program po lewej, wąskie zdjęcie po prawej */
.u-hero--agenda .u-hero-in{display:grid;gap:clamp(26px,3.4vw,50px);align-items:start}
@media(min-width:960px){.u-hero--agenda .u-hero-in{grid-template-columns:1.4fr .85fr}}
.u-hero--agenda .u-fig img{aspect-ratio:3/4;max-height:520px}

/* ===== TRZY KARTY ===== */
.u-tri{display:grid;gap:clamp(16px,2vw,26px);margin-top:clamp(24px,3vw,40px)}
@media(min-width:780px){.u-tri{grid-template-columns:repeat(3,1fr)}}
.u-card{
  background:var(--white);border:1px solid var(--line);border-top:3px solid var(--blue);
  border-radius:3px;padding:clamp(20px,2.4vw,30px);min-width:0;
}
.u-card:nth-child(2){border-top-color:var(--red)}
.u-card:nth-child(3){border-top-color:var(--navy)}
.u-card h3{margin-bottom:10px}
.u-card p{margin:0;color:var(--muted);font-size:15px}
.u-card p+p{margin-top:.9em}

/* ===== SZYNA NUMEROWANA (pionowa lista z numerami) ===== */
.u-rail{list-style:none;margin:clamp(24px,3vw,40px) 0 0;padding:0;display:grid;gap:0;border-top:2px solid var(--navy-deep)}
.u-rail li{
  display:grid;gap:4px 22px;padding:20px 0;border-bottom:1px solid var(--line);min-width:0;
}
@media(min-width:720px){.u-rail li{grid-template-columns:64px 1fr;align-items:start;padding:22px 0}}
.u-rail .u-no{
  font-size:clamp(22px,2.4vw,30px);font-weight:800;letter-spacing:-.03em;line-height:1;
  color:var(--red-deep);
}
.u-rail b{display:block;font-size:clamp(16px,1.5vw,19px);font-weight:700;color:var(--navy-deep);margin-bottom:5px}
.u-rail span{display:block;color:var(--muted);font-size:15px;line-height:1.6}
.u-sec--dark .u-rail{border-top-color:rgba(255,255,255,.35)}
.u-sec--dark .u-rail li{border-bottom-color:rgba(255,255,255,.2)}
.u-sec--dark .u-rail .u-no{color:#FF9A6B}
.u-sec--dark .u-rail b{color:#fff}
.u-sec--dark .u-rail span{color:#C6D0E4}

/* ===== DWA PANELE OBOK SIEBIE (kontrast jasny/ciemny) ===== */
.u-panels{display:grid;gap:0;margin-top:clamp(24px,3vw,40px);border:1px solid var(--line);border-radius:3px;overflow:hidden}
@media(min-width:860px){.u-panels{grid-template-columns:1fr 1fr}}
.u-panel{padding:clamp(24px,3vw,40px);min-width:0}
.u-panel--light{background:var(--white)}
.u-panel--dark{background:var(--navy-deep);color:#fff}
.u-panel--dark h3{color:#fff}
.u-panel h3{margin-bottom:14px}
.u-panel ul{margin:0;padding:0;list-style:none;display:grid;gap:12px}
.u-panel li{position:relative;padding-left:26px;font-size:15.2px;line-height:1.6;color:var(--muted)}
.u-panel--dark li{color:#C6D0E4}
.u-panel li::before{
  content:"";position:absolute;left:0;top:.55em;width:9px;height:9px;border-radius:50%;
  background:var(--red);
}
.u-panel--dark li::before{background:#FF9A6B}

/* ===== WIERSZE NAPRZEMIENNE: zdjęcie + tekst ===== */
.u-rows{display:grid;gap:clamp(34px,5vw,72px);margin-top:clamp(26px,3.2vw,44px)}
.u-row{display:grid;gap:clamp(22px,3vw,46px);align-items:center;min-width:0}
@media(min-width:900px){
  .u-row{grid-template-columns:1fr 1fr}
  .u-row--flip .u-fig{order:2}
}
.u-row .u-fig img{aspect-ratio:4/3}
.u-row-txt{min-width:0}
.u-row-txt h3{font-size:clamp(19px,2vw,25px);margin-bottom:12px}
.u-row-txt p{color:var(--muted);font-size:15.6px}
.u-row-txt p:last-child{margin-bottom:0}

/* ===== LISTA ODHACZANA ===== */
.u-check{margin:clamp(20px,2.6vw,32px) 0 0;padding:0;list-style:none;display:grid;gap:12px}
@media(min-width:760px){.u-check{grid-template-columns:repeat(2,1fr);gap:12px clamp(24px,3vw,44px)}}
.u-check li{position:relative;padding-left:32px;font-size:15.4px;line-height:1.6;color:var(--muted);min-width:0}
.u-check li::before{
  content:"";position:absolute;left:4px;top:.28em;width:9px;height:16px;
  border-right:2.6px solid var(--blue);border-bottom:2.6px solid var(--blue);
  transform:rotate(42deg);
}
.u-sec--dark .u-check li{color:#C6D0E4}
.u-sec--dark .u-check li::before{border-color:#FF9A6B}

/* ===== PASEK KRAJÓW ===== */
.u-kraje{display:flex;flex-wrap:wrap;gap:10px;margin:clamp(20px,2.6vw,32px) 0 0;padding:0;list-style:none}
.u-kraje li{
  border:1px solid var(--line);background:var(--white);border-radius:3px;
  padding:11px 18px;font-weight:700;font-size:15px;color:var(--navy-deep);
}

/* ===== WEZWANIE DO DZIAŁANIA ===== */
.u-cta{padding:clamp(36px,4.6vw,64px) 0}
.u-cta-in{display:grid;gap:20px;align-items:center;min-width:0}
@media(min-width:880px){.u-cta-in{grid-template-columns:1fr auto;gap:clamp(28px,4vw,56px)}}
.u-cta h2{font-size:clamp(21px,2.4vw,31px)}
.u-cta p{margin:12px 0 0;font-size:15.6px;color:var(--muted);max-width:62ch}
.u-cta-btns{display:flex;flex-wrap:wrap;gap:12px}
.u-cta--navy{background:var(--navy);color:#fff}
.u-cta--navy h2{color:#fff}
.u-cta--navy p{color:#C6D0E4}
.u-cta--blue{background:var(--blue);color:#fff}
.u-cta--blue h2{color:#fff}
.u-cta--blue p{color:#EDF3FE}
.u-cta--blue .btn{background:#fff;color:var(--blue-deep)}
.u-cta--blue .btn:hover{background:#EDF3FE;color:var(--blue-deep)}
.u-cta--blue .btn--out{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.6)}
.u-cta--blue .btn--out:hover{background:rgba(255,255,255,.12);color:#fff;box-shadow:inset 0 0 0 1.5px #fff}
.u-cta--paper{background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.u-cta--line{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* ===== POZOSTAŁE USŁUGI ===== */
.u-more{padding:clamp(40px,5.4vw,80px) 0}
.u-more-grid{display:grid;gap:0;margin-top:clamp(20px,2.6vw,34px);border-top:2px solid var(--navy-deep)}
@media(min-width:640px){.u-more-grid{grid-template-columns:repeat(2,1fr);column-gap:clamp(22px,3vw,48px)}}
@media(min-width:1020px){.u-more-grid{grid-template-columns:repeat(3,1fr)}}
.u-more-grid a{
  display:block;padding:20px 0;border-bottom:1px solid var(--line);
  text-decoration:none;min-width:0;
}
.u-more-grid b{
  display:flex;align-items:center;gap:9px;
  font-size:16.5px;font-weight:700;color:var(--navy-deep);margin-bottom:5px;
}
.u-more-grid b svg{flex:none;color:var(--blue);transition:transform .2s}
.u-more-grid span{display:block;font-size:14.3px;color:var(--muted);line-height:1.55}
.u-more-grid a:hover b{color:var(--blue)}
.u-more-grid a:hover b svg{transform:translateX(4px)}

/* ===== TABELA PARAMETRÓW (podstrona materiałowa) =====
   Wzorowana na .b-tab z blog.css. Owijka .u-tabwrap daje przewijanie
   w poziomie na telefonie — sama tabela nie zwęża się poniżej 560 px,
   żeby kolumny z wymiarami nie łamały się w słupki. */
.u-tabwrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 26px}
.u-tab{border-collapse:collapse;width:100%;min-width:560px;font-size:14.6px}
.u-tab th,.u-tab td{padding:11px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line);line-height:1.5}
.u-tab thead th{background:var(--navy);color:#fff;font-weight:700;font-size:13.6px;border-bottom:none}
.u-tab tbody td:first-child{font-weight:700;color:var(--navy-deep);white-space:nowrap}
.u-tab td{color:#3d4655}
.u-tab tbody tr:last-child td{border-bottom:none}
.u-prose .u-tab+h3{margin-top:30px}