/*
Theme Name: Wsypa Swiss
Theme URI: https://wsypa.pl
Author: Wsypa.pl
Description: Swiss grid motyw dla Wsypa.pl — modernistyczna typografia DM Sans, precyzyjna 12-kolumnowa siatka, rust-orange akcent. Czysty, redakcyjny, AdSense-friendly.
Version: 1.0.0
License: GPL v2 or later
Text Domain: wsypa-swiss
*/

:root{
  --bg:#FAFAF7;
  --card:#FFFFFF;
  --ink:#0E0E0C;
  --ink-2:#3A3A36;
  --muted:#82827A;
  --line:#D4D4CE;
  --accent:#D2691E;
  --display:"DM Sans", Helvetica, sans-serif;
  --body:"DM Sans", Helvetica, sans-serif;
  --mono:"DM Mono", monospace;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
button{font-family:inherit;cursor:pointer}
::selection{background:var(--accent);color:#fff}
.wrap{max-width:1320px;margin:0 auto;padding:0 32px}

/* ============== UTILITY STRIP ============== */
.strip{padding:14px 0;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:11px;color:var(--muted);text-align:center;letter-spacing:.08em}
.strip span{margin:0 14px}
.strip strong{color:var(--ink);font-weight:500}

/* ============== MASTHEAD ============== */
.masthead{padding:48px 0;text-align:center}
.logo-link{display:inline-block}
.logo{font-family:var(--display);font-weight:900;font-size:clamp(80px,13vw,176px);line-height:.85;letter-spacing:-.045em;color:var(--ink);margin:0;font-feature-settings:"ss01" on}
.logo .dot{display:inline-block;width:18px;height:18px;background:var(--accent);border-radius:50%;margin-left:8px;vertical-align:baseline;transform:translateY(-12px)}
.tagline{font-family:var(--mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-top:18px}

/* ============== NAV ============== */
nav.primary{border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);background:var(--card)}
nav.primary > .wrap{padding:0;display:flex}
nav.primary ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(10,1fr);width:100%}
nav.primary li{border-right:1px solid var(--line)}
nav.primary li:last-child{border-right:0}
nav.primary a{display:block;padding:18px 10px;text-align:center;font-family:var(--display);font-weight:500;font-size:13px;letter-spacing:.04em;color:var(--ink);transition:background .12s, color .12s}
nav.primary a:hover{background:var(--ink);color:var(--bg)}
nav.primary li.current-menu-item a, nav.primary a.current{background:var(--accent);color:#fff}

/* ============== HERO ============== */
.hero{padding:48px 0;border-bottom:1px solid var(--line)}
.hero-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:start}
.hero .label{grid-column:1/13;display:flex;justify-content:space-between;align-items:baseline;font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:.1em;text-transform:uppercase;margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.hero .label .l{color:var(--accent);font-weight:500}
.hero h1{grid-column:1/9;font-family:var(--display);font-weight:900;font-size:clamp(40px,5.4vw,76px);line-height:.96;letter-spacing:-.025em;margin:0;color:var(--ink)}
.hero h1 a{color:inherit}
.hero h1 a:hover{color:var(--accent)}
.hero .side{grid-column:9/13;display:flex;flex-direction:column;gap:14px;padding-top:6px}
.hero .side p{font-size:16px;color:var(--ink-2);margin:0;line-height:1.45}
.hero .side .meta{font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;border-top:1px solid var(--line);padding-top:10px;display:flex;justify-content:space-between}
.hero-photo{grid-column:1/13;aspect-ratio:21/9;background:linear-gradient(135deg,#9C8A75 0%,#3F352B 100%);position:relative;overflow:hidden;margin-top:8px}
.hero-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.4),transparent 40%);pointer-events:none}
.hero-photo .ticks{position:absolute;left:0;top:0;width:100%;height:100%;background-image:repeating-linear-gradient(90deg, transparent 0 calc((100%/12) - 1px), rgba(255,255,255,.06) calc((100%/12) - 1px) calc((100%/12)));pointer-events:none}
.hero-photo .cap{position:absolute;left:24px;bottom:18px;color:#fff;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;z-index:2}
.hero-photo .num{position:absolute;right:24px;top:24px;font-family:var(--display);font-weight:900;font-size:42px;color:#fff;mix-blend-mode:overlay;letter-spacing:-.02em;z-index:2}

/* ============== SECTIONS ============== */
.section{padding:48px 0;border-bottom:1px solid var(--line)}
.section-h{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:baseline;margin-bottom:32px;padding-bottom:14px;border-bottom:1px solid var(--ink)}
.section-h h2{grid-column:1/9;font-family:var(--display);font-weight:900;font-size:42px;letter-spacing:-.02em;margin:0}
.section-h .meta{grid-column:9/13;font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:.1em;text-transform:uppercase;text-align:right}
.section-h .meta a{transition:color .12s}
.section-h .meta a:hover{color:var(--accent)}

.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:32px 24px}
.story{display:flex;flex-direction:column;color:inherit}
.story .ph{aspect-ratio:4/3;background:linear-gradient(135deg,#5a5a52,#1f1f1c);margin-bottom:14px;position:relative;overflow:hidden;transition:transform .2s}
.story:hover .ph{transform:scale(1.01)}
.story.a1 .ph{background:linear-gradient(135deg,#6a4e3a,#2c1f17)}
.story.a2 .ph{background:linear-gradient(135deg,#3a5a6e,#152734)}
.story.a3 .ph{background:linear-gradient(135deg,#5e6a4a,#1c2210)}
.story.a4 .ph{background:linear-gradient(135deg,#6a4a6a,#22122a)}
.story.a5 .ph{background:linear-gradient(135deg,#4a4a4a,#0e0e0e)}
.story.a6 .ph{background:linear-gradient(135deg,#8a6650,#2e1d12)}
.story.a7 .ph{background:linear-gradient(135deg,#4e6a3a,#1c2410)}
.story.a8 .ph{background:linear-gradient(135deg,#3a3a4e,#0e0e1a)}
.story .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.story .ph::after{content:attr(data-n);position:absolute;left:14px;top:10px;font-family:var(--mono);font-size:10px;color:rgba(255,255,255,.5);letter-spacing:.1em;z-index:2}
.story .num{font-family:var(--mono);font-size:10px;color:var(--accent);letter-spacing:.12em;text-transform:uppercase;margin-bottom:6px;font-weight:500}
.story h3{font-family:var(--display);font-weight:700;font-size:18px;line-height:1.18;letter-spacing:-.015em;margin:0 0 8px;transition:color .12s}
.story:hover h3{color:var(--accent)}
.story p{font-size:14px;color:var(--ink-2);margin:0 0 12px;line-height:1.45}
.story .meta{margin-top:auto;font-family:var(--mono);font-size:10px;color:var(--muted);letter-spacing:.1em;text-transform:uppercase;border-top:1px solid var(--line);padding-top:10px;display:flex;justify-content:space-between}

.col-12{grid-column:span 12}
.col-8{grid-column:span 8}
.col-6{grid-column:span 6}
.col-4{grid-column:span 4}
.col-3{grid-column:span 3}
.col-6 h3{font-size:26px}
.col-6 p{font-size:15px}
.col-8 h3{font-size:32px;font-weight:900}

/* ============== ADSENSE SLOTS ============== */
.ad{background:repeating-linear-gradient(45deg, #FFFFFF 0 10px, #F0F0EC 10px 20px);border:1px dashed var(--line);display:flex;align-items:center;justify-content:center;color:var(--muted);font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.18em;font-weight:500;text-align:center;padding:14px;position:relative;min-height:60px}
.ad::before{content:"REKLAMA";position:absolute;top:6px;left:8px;font-size:9px;color:var(--muted);letter-spacing:.18em}
.ad.billboard{height:120px;margin:18px 0;grid-column:1/13}
.ad.inline{height:90px;margin:18px 0;grid-column:1/13}
.ad.rect{aspect-ratio:300/250;width:100%}

/* ============== SINGLE / PAGE ============== */
.single-article{padding:48px 0 64px;border-top:1px solid var(--line)}
.single-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:48px;align-items:start}
.single-article .meta-top{grid-column:1/13;display:flex;gap:14px;flex-wrap:wrap;align-items:center;font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:.1em;text-transform:uppercase;margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.single-article .meta-top .cat{color:var(--accent);font-weight:500}
.single-article h1.title{grid-column:1/13;font-family:var(--display);font-weight:900;font-size:clamp(40px,5.4vw,72px);line-height:.98;letter-spacing:-.025em;margin:0 0 14px}
.single-article .lede{grid-column:1/9;font-family:var(--body);font-size:21px;line-height:1.4;color:var(--ink-2);margin:0 0 22px;font-weight:500}
.single-article .byline{grid-column:9/13;font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;border-left:1px solid var(--line);padding-left:18px;line-height:1.7}
.single-article .byline strong{color:var(--ink);font-weight:500;font-family:var(--display)}
.single-article .featured{grid-column:1/13;margin:18px 0 28px;aspect-ratio:21/9;overflow:hidden;background:#ddd}
.single-article .featured img{width:100%;height:100%;object-fit:cover}
.single-article .content{grid-column:1/9;font-family:var(--body);font-size:18px;line-height:1.65}
.single-article .content > * + *{margin-top:18px}
.single-article .content p{margin:0}
.single-article .content h2{font-family:var(--display);font-size:32px;font-weight:900;margin-top:32px;letter-spacing:-.02em;line-height:1.05}
.single-article .content h3{font-family:var(--display);font-weight:700;font-size:22px;margin-top:24px}
.single-article .content a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.single-article .content blockquote{margin:24px 0;padding:18px 22px;border-left:4px solid var(--accent);background:var(--card);font-family:var(--display);font-size:22px;line-height:1.3;letter-spacing:-.005em;font-weight:500}
.single-article .content ul, .single-article .content ol{padding-left:22px}
.single-article .content img{margin:18px 0}
.single-article .ad-sidebar{grid-column:9/13;position:sticky;top:24px}

/* ============== ARCHIVE ============== */
.archive-head{padding:48px 0 32px;border-top:1px solid var(--line);border-bottom:1px solid var(--ink)}
.archive-head h1{font-family:var(--display);font-weight:900;font-size:clamp(48px,7vw,96px);line-height:.9;letter-spacing:-.03em;margin:0}
.archive-head h1 em{font-style:normal;color:var(--accent)}
.archive-head .desc{font-family:var(--mono);font-size:12px;color:var(--muted);letter-spacing:.1em;text-transform:uppercase;margin-top:12px;font-weight:500}

/* ============== 404 ============== */
.notfound{padding:96px 0;text-align:center}
.notfound h1{font-family:var(--display);font-weight:900;font-size:200px;line-height:.85;letter-spacing:-.04em;color:var(--accent);margin:0}
.notfound h2{font-family:var(--display);font-weight:700;font-size:28px;margin:6px 0 16px;letter-spacing:-.01em}
.notfound p{color:var(--muted);max-width:46ch;margin:0 auto 28px;font-size:17px}
.notfound a.cta{display:inline-block;background:var(--ink);color:var(--bg);padding:14px 22px;font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.12em;text-transform:uppercase;transition:background .12s}
.notfound a.cta:hover{background:var(--accent)}

/* ============== PAGINATION ============== */
.pagination{margin:32px 0;display:flex;gap:8px;justify-content:center;flex-wrap:wrap;font-family:var(--mono);font-size:13px}
.pagination a, .pagination span{display:inline-block;padding:10px 14px;border:1px solid var(--line);font-weight:500;background:var(--card)}
.pagination .current{background:var(--ink);color:var(--bg);border-color:var(--ink)}

/* ============== FOOTER ============== */
footer.site-footer{padding:56px 0 24px;background:var(--ink);color:var(--bg)}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:48px;margin-bottom:36px;align-items:start}
.foot-logo{font-family:var(--display);font-weight:900;font-size:48px;letter-spacing:-.04em;line-height:.9;color:#fff;margin-bottom:10px}
.foot-logo .dot{display:inline-block;width:12px;height:12px;background:var(--accent);border-radius:50%;margin-left:6px;transform:translateY(-8px)}
.foot-tag{font-family:var(--mono);font-size:11px;color:#888;letter-spacing:.1em;text-transform:uppercase;max-width:32ch}
footer.site-footer h5{font-family:var(--mono);font-weight:500;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin:0 0 14px}
footer.site-footer ul{list-style:none;margin:0;padding:0}
footer.site-footer ul li{padding:5px 0;font-family:var(--display);font-size:14px;color:#bbb}
footer.site-footer ul a:hover{color:#fff}
.foot-bottom{border-top:1px solid #2a2a26;padding-top:18px;font-family:var(--mono);font-size:10px;color:#777;letter-spacing:.12em;text-transform:uppercase;display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px}
.foot-bottom a:hover{color:#fff}

/* ============== RESPONSIVE ============== */
@media(max-width:1024px){
  nav.primary ul{grid-template-columns:repeat(5,1fr)}
  nav.primary li:nth-child(5n){border-right:0}
  .col-4, .col-3{grid-column:span 6}
  .col-8{grid-column:1/13}
  .hero h1{grid-column:1/13}
  .hero .side{grid-column:1/13}
  .section-h h2{grid-column:1/13;font-size:32px}
  .section-h .meta{grid-column:1/13;text-align:left}
  .single-article .lede{grid-column:1/13}
  .single-article .byline{grid-column:1/13;border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:14px}
  .single-article .content{grid-column:1/13}
  .single-article .ad-sidebar{grid-column:1/13;position:static}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .wrap{padding:0 18px}
  .col-4, .col-3, .col-6, .col-8{grid-column:span 12}
  .foot-grid{grid-template-columns:1fr;gap:32px}
  .foot-logo{font-size:36px}
  .masthead{padding:32px 0}
  nav.primary ul{grid-template-columns:repeat(2,1fr)}
  nav.primary li:nth-child(2n){border-right:0}
  .notfound h1{font-size:120px}
  .single-article h1.title{font-size:36px}
}