/* ═══════════════════════════════════════════════════════════════════════════
   Strony lokalne (dzielnice Warszawy, miasta z wysyłką) — Artykuły CMS z treścią
   w <div class="xl">. System wizualny 1:1 ze stron usługowych przeniesionych ze
   starej xerografia.pl (.xd), w osobnej przestrzeni .xl, żeby nie kolidować z
   własnym CSS tamtych artykułów. Ładowany przez article_detail.html, gdy treść
   zawiera kontener .xl (Article.uses_local_landing_css).
═══════════════════════════════════════════════════════════════════════════ */

/* ZMIENNE I BAZA */
.xl{
  --blue:#0096DB;--navy:#143758;--pink:#E7247F;--pink-h:#c51d68;
  --gray:#F9F9F9;--border:#EBEBEB;--muted:#7A8A9A;
  /* Skala typograficzna */
  --t-xs:11px;      /* legenda, badge, kicker */
  --t-sm:12.5px;    /* opisy w kartach, tagi */
  --t-base:14px;    /* tekst podstawowy, lead, opisy sekcji */
  --t-md:15px;      /* hero sub */
  --t-card-h:14px;  /* nagłówki kart H3 */
  --t-sec-h:clamp(20px,2.2vw,26px); /* nagłówki sekcji H2 */
  font-family:"Segoe UI",system-ui,Arial,sans-serif;
  font-size:var(--t-base);line-height:1.65;color:var(--navy);background:#fff
}
.xl *{box-sizing:border-box;margin:0;padding:0}
.xl a{color:var(--blue);text-decoration:none}
.xl .w{max-width:960px;margin:0 auto;padding:0 24px}

/* BREADCRUMB */
.xl .bread{padding:10px 24px;font-size:var(--t-xs);color:var(--muted);display:flex;align-items:center;gap:5px;flex-wrap:wrap;border-bottom:1px solid var(--border);background:#fff}
.xl .bread a{color:var(--muted)}
.xl .bread a:hover{color:var(--blue)}
.xl .sep-c{color:#ccc}

/* ── HERO ── */
.xl .hero{background:#fff;padding:64px 24px 56px;border-bottom:1px solid var(--border);text-align:center}
.xl .hero h1{font-size:clamp(28px,4vw,52px);font-weight:900;color:var(--navy);line-height:1.08;margin-bottom:12px;letter-spacing:-.02em}
.xl .hero h1 .h1-line2{display:block;font-size:clamp(18px,2.2vw,28px);font-weight:700;color:var(--blue);margin-top:8px;letter-spacing:-.01em}
.xl .hero-sub{font-size:var(--t-md);color:var(--muted);max-width:760px;margin:0 auto 32px;line-height:1.8}
.xl .hero-btns{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-bottom:32px}

/* Buttony — jeden system dla całej strony */
.xl .btn-pink{display:inline-flex;align-items:center;gap:6px;padding:12px 26px;background:var(--pink);color:#fff;border-radius:999px;font-weight:700;font-size:var(--t-base);border:0;cursor:pointer;transition:background .15s,transform .15s;text-decoration:none;line-height:1.2}
.xl .btn-pink:hover{background:var(--pink-h);transform:translateY(-1px)}
.xl .btn-blue{display:inline-flex;align-items:center;gap:6px;padding:12px 26px;background:var(--blue);color:#fff;border-radius:999px;font-weight:700;font-size:var(--t-base);border:0;cursor:pointer;transition:background .15s,transform .15s;text-decoration:none;line-height:1.2}
.xl .btn-blue:hover{background:#007ab8;transform:translateY(-1px)}
.xl .btn-line{display:inline-flex;align-items:center;padding:11px 24px;background:#fff;color:var(--navy);border-radius:999px;font-weight:700;font-size:var(--t-base);border:1.5px solid var(--border);cursor:pointer;transition:border-color .15s,transform .15s;text-decoration:none;line-height:1.2}
.xl .btn-line:hover{border-color:#bbb;transform:translateY(-1px)}

/* Hero info — 4 kafelki */
.xl .hero-info{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;max-width:780px;margin:0 auto 36px}
@media(min-width:640px){.xl .hero-info{grid-template-columns:repeat(4,1fr)}}
.xl .hero-tag{display:flex;align-items:center;gap:10px;border:1px solid var(--border);border-radius:14px;padding:12px 14px;color:var(--navy);background:var(--gray);text-align:left}
.xl .hero-tag svg{width:20px;height:20px;stroke:var(--muted);fill:none;stroke-width:1.6;flex-shrink:0}
.xl .hero-tag .ht-text{display:flex;flex-direction:column;line-height:1.35}
.xl .hero-tag .ht-text strong{font-weight:700;color:var(--navy);font-size:var(--t-sm)}
.xl .hero-tag .ht-text span{font-size:var(--t-xs);color:var(--muted);margin-top:1px}
.xl .hero-tag-blue{border-color:rgba(0,150,219,.25);background:#EBF6FD}
.xl .hero-tag-blue svg{stroke:var(--blue)}
.xl .hero-tag-blue .ht-text strong{color:var(--blue)}
.xl .hero-tag-blue .ht-text span{color:var(--blue);opacity:.75}

/* Hero stats */
.xl .hero-stats{display:grid;grid-template-columns:repeat(2,1fr);max-width:640px;margin:0 auto;border-top:1px solid var(--border);padding-top:32px}
@media(min-width:480px){.xl .hero-stats{grid-template-columns:repeat(4,1fr)}}
.xl .hstat{text-align:center;padding:0 12px 4px}
.xl .hstat+.hstat{border-left:1px solid var(--border)}
@media(max-width:479px){.xl .hstat:nth-child(3){border-left:none;border-top:1px solid var(--border);padding-top:16px;margin-top:4px}}
@media(max-width:479px){.xl .hstat:nth-child(4){border-top:1px solid var(--border);padding-top:16px;margin-top:4px}}
.xl .sn{font-size:clamp(20px,2.5vw,30px);font-weight:900;color:var(--blue);display:block;line-height:1.1}
.xl .sl{font-size:var(--t-xs);color:var(--muted);margin-top:4px;display:block;line-height:1.4}

/* ── SEKCJE — wspólny rytm ── */
.xl .sec{padding:56px 24px}
.xl .sec--g{background:var(--gray);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}

/* Kicker — etykieta nad nagłówkiem */
.xl .skick{font-size:var(--t-xs);font-weight:800;letter-spacing:.10em;text-transform:uppercase;color:var(--muted);margin-bottom:10px;text-align:center;display:flex;align-items:center;justify-content:center;gap:10px}
.xl .skick::before,.xl .skick::after{content:"";flex:0 0 24px;height:1px;background:var(--border)}

/* Nagłówki sekcji H2 */
.xl .sh{font-size:var(--t-sec-h);font-weight:900;color:var(--navy);margin-bottom:12px;line-height:1.18;text-align:center}
.xl .sh em{font-style:normal;color:var(--blue)}

/* Lead sekcji */
.xl .slead{font-size:var(--t-base);color:var(--muted);max-width:620px;margin:0 auto 32px;line-height:1.75;text-align:center}

/* CTA row */
.xl .cta-row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:28px}

/* ── KROKI ── */
.xl .steps-g{display:grid;gap:0;grid-template-columns:repeat(2,1fr);max-width:900px;margin:0 auto;position:relative}
@media(min-width:680px){.xl .steps-g{grid-template-columns:repeat(4,1fr)}}
.xl .step{background:#fff;border:1px solid var(--border);border-radius:18px;padding:32px 20px 28px;text-align:center;margin:6px;position:relative}
.xl .step-n{font-size:28px;font-weight:900;color:var(--blue);display:block;line-height:1;margin-bottom:16px}
.xl .step-ico{width:52px;height:52px;margin:0 auto 20px;display:flex;align-items:center;justify-content:center;background:#EBF6FD;border-radius:50%}
.xl .step-ico svg{width:26px;height:26px;stroke:var(--blue);fill:none;stroke-width:1.6}
.xl .step-connector{display:none}
@media(min-width:680px){
  .xl .step-connector{display:block;position:absolute;top:72px;right:-18px;width:36px;z-index:2}
  .xl .step-connector svg{width:36px;height:12px}
  .xl .step:last-child .step-connector{display:none}
}
.xl .step h3{font-size:var(--t-card-h);font-weight:800;color:var(--navy);margin-bottom:8px}
.xl .step p{font-size:var(--t-sm);color:var(--muted);line-height:1.65}

/* ── DZIELNICE ── */
.xl .dz-section{max-width:960px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.xl .dz-card{background:#fff;border:1px solid var(--border);border-radius:16px;padding:22px 26px}
.xl .dz-card-head{display:flex;align-items:center;gap:16px;margin-bottom:16px}
.xl .dz-card-ico{width:50px;height:50px;background:#EBF6FD;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.xl .dz-card-ico svg{width:26px;height:26px;stroke:var(--blue);fill:none;stroke-width:1.5}
.xl .dz-card-title{font-size:var(--t-xs);font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--navy);line-height:1.4}
.xl .dz-card-title em{font-style:normal;color:var(--pink)}
.xl .dz-card-title-blue em{color:var(--blue)}
.xl .dz-g{display:flex;flex-wrap:wrap;gap:8px}
.xl .dz{background:#fff;border:1px solid var(--border);border-radius:999px;padding:6px 14px;display:inline-flex;align-items:center;gap:7px;transition:border-color .18s}
.xl .dz:hover{border-color:var(--blue)}
.xl .dz-dot{width:7px;height:7px;border-radius:50%;background:var(--blue);flex-shrink:0}
.xl .dz-dot-p{background:var(--pink)}
.xl .dz-name{font-size:var(--t-sm);font-weight:600;color:var(--navy)}
.xl .dz-sub{font-size:10px;color:var(--pink);font-weight:700;display:block;margin-top:1px;line-height:1}

/* ── DLACZEGO XEROGRAFIA ── */
.xl .benef-g{display:grid;gap:10px;grid-template-columns:repeat(2,1fr);max-width:840px;margin:0 auto}
@media(min-width:680px){.xl .benef-g{grid-template-columns:repeat(4,1fr)}}
.xl .ben{background:#fff;border:1px solid var(--border);border-radius:14px;padding:22px 16px;text-align:center}
.xl .ben-ico{width:44px;height:44px;border-radius:11px;background:#EBF6FD;display:flex;align-items:center;justify-content:center;margin:0 auto 14px}
.xl .ben-ico svg{width:22px;height:22px;stroke:var(--blue);fill:none;stroke-width:1.8}
.xl .ben h3{font-size:var(--t-card-h);font-weight:800;color:var(--navy);margin-bottom:6px}
.xl .ben p{font-size:var(--t-sm);color:var(--muted);line-height:1.65}

/* ── PRODUKTY ── */
.xl .prod-g{display:grid;gap:8px;grid-template-columns:repeat(2,1fr);max-width:880px;margin:0 auto}
@media(min-width:540px){.xl .prod-g{grid-template-columns:repeat(3,1fr)}}
@media(min-width:780px){.xl .prod-g{grid-template-columns:repeat(4,1fr)}}
.xl .prod{background:#fff;border:1px solid var(--border);border-radius:12px;padding:14px 14px;transition:border-color .18s}
.xl .prod:hover{border-color:var(--blue)}
.xl .prod h3{font-size:var(--t-card-h);font-weight:800;color:var(--navy);margin-bottom:4px;display:flex;align-items:center;gap:7px}
.xl .prod h3 svg{width:15px;height:15px;stroke:var(--blue);fill:none;stroke-width:2;flex-shrink:0}
.xl .prod p{font-size:var(--t-sm);color:var(--muted);line-height:1.55}

/* ── PORTFOLIO ── */
.xl .port-grid{display:grid;gap:10px;grid-template-columns:1fr 1fr;max-width:880px;margin:0 auto}
@media(min-width:600px){.xl .port-grid{grid-template-columns:repeat(3,1fr)}}
.xl .port-card{background:#fff;border:1px solid var(--border);border-radius:12px;overflow:hidden;transition:border-color .18s,transform .18s}
.xl .port-card:hover{border-color:var(--blue);transform:translateY(-2px)}
.xl .port-thumb{width:100%;aspect-ratio:4/3;background:var(--gray);overflow:hidden;border-bottom:1px solid var(--border)}
.xl .port-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s ease}
.xl .port-card:hover .port-thumb img{transform:scale(1.04)}
.xl .port-info{padding:12px 14px}
.xl .port-cat{font-size:var(--t-xs);font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--blue);margin-bottom:4px}
.xl .port-name{font-size:var(--t-card-h);font-weight:800;color:var(--navy)}

/* ── PUNKTY ODBIORU ── */
.xl .loc-g{display:grid;gap:16px;grid-template-columns:1fr;max-width:780px;margin:0 auto}
@media(min-width:560px){.xl .loc-g{grid-template-columns:1fr 1fr}}
.xl .loc{background:#fff;border:1px solid var(--border);border-radius:16px;padding:24px;text-align:left}
.xl .loc-head{display:flex;align-items:center;gap:16px;margin-bottom:16px}
.xl .loc-icon{width:52px;height:52px;border-radius:50%;background:var(--pink);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.xl .loc-icon svg{width:24px;height:24px;stroke:#fff;fill:none;stroke-width:1.8}
.xl .loc-meta{display:flex;flex-direction:column;gap:3px}
.xl .loc-badge{font-size:var(--t-xs);font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--pink)}
.xl .loc h3{font-size:16px;font-weight:900;color:var(--navy);line-height:1.2;margin:0}
.xl .loc-addr{display:flex;align-items:center;gap:6px;margin-bottom:14px;padding-bottom:14px;border-bottom:1px solid var(--border)}
.xl .loc-addr svg{width:14px;height:14px;stroke:var(--blue);fill:none;stroke-width:2;flex-shrink:0}
.xl .loc-addr span{font-size:var(--t-sm);color:var(--muted)}
.xl .loc-addr strong{color:var(--navy);font-weight:700}
.xl .loc p{font-size:var(--t-sm);color:var(--muted);line-height:1.7;margin:0}

/* ── FAQ — max-width spójny z resztą sekcji ── */
.xl .faq-w{max-width:780px;margin:0 auto}
.xl details{border:1px solid var(--border);border-radius:12px;background:#fff;margin-bottom:8px;overflow:hidden}
.xl summary{padding:16px 18px;font-weight:700;font-size:var(--t-base);cursor:pointer;display:flex;justify-content:space-between;align-items:center;list-style:none;color:var(--navy);gap:10px}
.xl summary::-webkit-details-marker{display:none}
.xl summary::after{content:"+";font-size:20px;font-weight:300;color:var(--blue);flex-shrink:0}
.xl details[open] summary::after{content:"×"}
.xl .faq-b{padding:0 18px 16px;font-size:var(--t-base);color:var(--muted);line-height:1.75;border-top:1px solid var(--border)}

/* ── MOBILE ── */
@media(max-width:540px){
  .xl .hero{padding:40px 16px 36px}
  .xl .sec{padding:40px 16px}
  .xl .hero h1{font-size:26px}
  .xl .hero-tag{white-space:normal}
  .xl .dz-card{padding:18px 16px}
}
/* ── Dodatki stron lokalnych ── */
.xl .links-g{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:8px}
.xl .links-g a{display:inline-flex;align-items:center;padding:7px 14px;border:1px solid var(--border);border-radius:999px;font-size:var(--t-sm);font-weight:600;color:var(--navy);background:#fff;transition:border-color .15s,color .15s}
.xl .links-g a:hover{border-color:var(--blue);color:var(--blue)}
.xl .loc-hours{display:block;margin-top:4px;font-size:var(--t-sm);color:var(--muted)}
.xl .loc-near{border-color:rgba(231,36,127,.35);box-shadow:0 0 0 3px rgba(231,36,127,.06)}
.xl .prose-w{max-width:760px;margin:0 auto;text-align:left}
.xl .prose-w p{margin-bottom:12px;color:var(--navy)}