/* ==========================================================
   elblag-grzechotki.pl — dedykowany system projektowy
   Motyw: infrastruktura drogowa / DK22 Elbląg – Grzechotki
   ========================================================== */

:root{
  --asphalt:#232a31;
  --asphalt-deep:#161b20;
  --signal:#e29a1c;
  --signal-soft:#f4c542;
  --concrete:#6d7783;
  --concrete-2:#8b939d;
  --paper:#f6f3ec;
  --paper-2:#efe9dd;
  --line:#d9d2c4;
  --ink:#23282c;
  --ink-soft:#454d54;
  --white:#ffffff;
  --radius:14px;
  --maxw:1180px;
  --shadow:0 18px 40px -24px rgba(22,27,32,.55);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  font-size:18px;
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;display:block}
a{color:var(--asphalt);text-decoration:none}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}

/* ---------- Nawigacja ---------- */
.topbar{
  background:var(--asphalt-deep);
  color:#e8e3d7;
  font-size:14px;
  letter-spacing:.02em;
}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;height:40px;flex-wrap:wrap;gap:8px}
.topbar span{opacity:.78}
.topbar strong{color:var(--signal-soft);font-weight:600}

.nav{
  position:sticky;top:0;z-index:40;
  background:rgba(35,42,49,.97);
  backdrop-filter:blur(6px);
  border-bottom:3px solid var(--signal);
}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;min-height:74px;gap:18px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:12px;color:var(--white)}
.brand .mark{
  width:40px;height:40px;border-radius:9px;flex:0 0 auto;
  background:
    repeating-linear-gradient(90deg,var(--signal) 0 9px,transparent 9px 18px) center/100% 5px no-repeat,
    var(--asphalt);
  border:1px solid rgba(255,255,255,.14);
  position:relative;
}
.brand .mark::after{content:"";position:absolute;inset:0;border-radius:9px;box-shadow:inset 0 0 0 2px rgba(226,154,28,.35)}
.brand b{font-family:"Fraunces",Georgia,serif;font-weight:600;font-size:19px;letter-spacing:.01em}
.brand small{display:block;color:var(--concrete-2);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase}

.menu{display:flex;gap:6px;flex-wrap:wrap}
.menu a{
  color:#d8d3c6;font-size:14.5px;padding:9px 13px;border-radius:8px;font-weight:500;
  transition:background .15s,color .15s;
}
.menu a:hover{background:rgba(255,255,255,.08);color:var(--white)}
.menu a.active{background:var(--signal);color:var(--asphalt-deep);font-weight:600}

/* ---------- Hero ---------- */
.hero{
  background:
    linear-gradient(180deg,rgba(22,27,32,.82),rgba(22,27,32,.9)),
    repeating-linear-gradient(115deg,#2b333b 0 46px,#262d34 46px 92px);
  color:#f3efe4;
  position:relative;
  overflow:hidden;
}
.hero::before{
  content:"";position:absolute;left:0;right:0;bottom:0;height:14px;
  background:repeating-linear-gradient(90deg,var(--signal) 0 40px,transparent 40px 80px);
  opacity:.9;
}
.hero .wrap{padding:74px 24px 82px}
.eyebrow{
  display:inline-block;font-size:12.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--signal-soft);border:1px solid rgba(244,197,66,.4);
  padding:6px 14px;border-radius:40px;margin-bottom:22px;
}
.hero h1{
  font-family:"Fraunces",Georgia,serif;font-weight:600;
  font-size:clamp(2.1rem,4.6vw,3.5rem);line-height:1.08;margin:0 0 20px;max-width:16ch;
}
.hero p{font-size:1.16rem;max-width:60ch;color:#ddd7c9;margin:0 0 14px}
.hero .meta{margin-top:26px;display:flex;gap:26px;flex-wrap:wrap;font-size:14px;color:var(--concrete-2)}
.hero .meta b{color:var(--signal-soft);font-weight:600}

/* ---------- Sekcje treści ---------- */
main{padding:64px 0}
.lead{max-width:820px}
.section{padding:16px 0}
.section + .section{margin-top:20px}

h1,h2,h3{color:var(--asphalt);font-family:"Fraunces",Georgia,serif}
article h1{
  font-weight:600;font-size:clamp(1.9rem,3.4vw,2.6rem);line-height:1.14;
  margin:0 0 20px;max-width:24ch;
}
article h2{
  font-weight:600;font-size:clamp(1.35rem,2.3vw,1.72rem);line-height:1.2;
  margin:44px 0 14px;padding-top:8px;
  position:relative;
}
article h2::before{
  content:"";position:absolute;top:-6px;left:0;width:56px;height:4px;
  background:var(--signal);border-radius:2px;
}
article p{margin:0 0 18px;color:var(--ink-soft);max-width:74ch}
article{max-width:840px}

.block{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:34px 36px;box-shadow:var(--shadow);
}
.block + .block{margin-top:26px}

.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.card-note{
  background:var(--paper-2);border:1px solid var(--line);border-radius:12px;padding:26px 28px;
}
.card-note h3{margin:0 0 10px;font-size:1.2rem}
.card-note p{margin:0;color:var(--ink-soft);font-size:16px}

/* ---------- Sekcja partnerów (tylko homepage) ---------- */
.partners{background:var(--asphalt-deep);color:#ece7da;margin-top:72px}
.partners .wrap{padding:66px 24px 74px}
.partners .head{max-width:720px;margin-bottom:38px}
.partners h2{color:var(--white);font-size:clamp(1.6rem,2.6vw,2.1rem);margin:0 0 12px}
.partners h2::before{display:none}
.partners .head p{color:var(--concrete-2);margin:0}

.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.pcard{
  background:#232a31;border:1px solid #333c45;border-radius:13px;overflow:hidden;
  display:flex;flex-direction:column;transition:transform .16s,border-color .16s;
}
.pcard:hover{transform:translateY(-3px);border-color:var(--signal)}
.pthumb{height:96px;position:relative}
.pcard:nth-child(6n+1) .pthumb{background:linear-gradient(135deg,#e29a1c,#8a5a10)}
.pcard:nth-child(6n+2) .pthumb{background:linear-gradient(135deg,#3d7a8c,#1c3b46)}
.pcard:nth-child(6n+3) .pthumb{background:linear-gradient(135deg,#7d6f4a,#3a3320)}
.pcard:nth-child(6n+4) .pthumb{background:linear-gradient(135deg,#8a4a4a,#402020)}
.pcard:nth-child(6n+5) .pthumb{background:linear-gradient(135deg,#4a6a4d,#243626)}
.pcard:nth-child(6n+6) .pthumb{background:linear-gradient(135deg,#5a5a72,#2b2b3a)}
.pthumb::after{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.16) 0 22px,transparent 22px 44px) center/100% 4px no-repeat;
  opacity:.7;
}
.pbody{padding:18px 20px 22px;display:flex;flex-direction:column;gap:8px;flex:1}
.pbody h3{color:var(--white);font-size:1.08rem;margin:0;font-family:"Fraunces",serif}
.pbody p{color:var(--concrete-2);font-size:14px;margin:0;flex:1}
.pbody a.url{
  color:var(--signal-soft);font-size:13px;word-break:break-all;
  border-top:1px solid #333c45;padding-top:12px;margin-top:4px;font-weight:500;
}
.pbody a.url:hover{color:var(--signal)}

/* ---------- Blok długiego tekstu przy stopce ---------- */
.longread{background:var(--paper-2);border-top:1px solid var(--line)}
.longread .wrap{padding:64px 24px 70px;max-width:900px}
.longread h2{font-size:clamp(1.5rem,2.4vw,2rem);margin:0 0 20px}
.longread p{color:var(--ink-soft);margin:0 0 18px}

/* ---------- Wewnętrzne linkowanie ---------- */
.crosslinks{margin-top:52px;border-top:1px solid var(--line);padding-top:34px}
.crosslinks h2{font-size:1.35rem;margin:0 0 18px}
.clgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.cllink{
  display:block;background:var(--white);border:1px solid var(--line);border-radius:11px;
  padding:18px 20px;transition:border-color .15s,transform .15s;
}
.cllink:hover{border-color:var(--signal);transform:translateY(-2px)}
.cllink b{display:block;color:var(--asphalt);font-family:"Fraunces",serif;font-size:1.05rem;margin-bottom:4px}
.cllink span{color:var(--concrete);font-size:14px}

/* ---------- Stopka ---------- */
footer{background:var(--asphalt);color:#c9c3b5;margin-top:0}
footer .wrap{padding:52px 24px 30px;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:34px}
footer h4{color:var(--white);font-family:"Fraunces",serif;font-size:1.15rem;margin:0 0 14px}
footer a{color:#c9c3b5;font-size:14.5px;display:block;padding:4px 0}
footer a:hover{color:var(--signal-soft)}
footer p{font-size:14px;color:var(--concrete-2);margin:0 0 10px}
.foot-bottom{border-top:1px solid #333c45;margin-top:12px}
.foot-bottom .wrap{padding:18px 24px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:13px;color:var(--concrete)}

/* ---------- Responsywność ---------- */
@media (max-width:900px){
  .pgrid{grid-template-columns:repeat(2,1fr)}
  .grid-2{grid-template-columns:1fr}
  .clgrid{grid-template-columns:1fr}
  footer .wrap{grid-template-columns:1fr 1fr}
}
@media (max-width:620px){
  body{font-size:17px}
  .nav .wrap{min-height:64px}
  .menu{width:100%;justify-content:flex-start}
  .pgrid{grid-template-columns:1fr}
  .block{padding:26px 22px}
  footer .wrap{grid-template-columns:1fr}
  .hero .wrap{padding:56px 24px 64px}
}