/* ============================================================
   Padel54 — News index + single post styles
   (loaded after style.css)
   ============================================================ */

/* ---------- news index header ---------- */
.news-hero{padding-top:clamp(128px,18vh,180px);padding-bottom:clamp(40px,5vw,64px)}
.news-hero .lab{color:var(--signal);margin-bottom:18px}
.news-hero h1{font-weight:900;text-transform:uppercase;font-size:clamp(44px,8vw,116px);line-height:.9;letter-spacing:-.035em}
.news-hero p{margin-top:22px;max-width:52ch;color:#cdccc7;font-size:clamp(13px,1.2vw,16px)}
.news-hero p strong{font-weight:700;color:#f4f3f0}

/* ---------- featured article (reuses .feature for parallax) ---------- */
.feat-art{height:clamp(460px,76vh,720px)}
.feat-art .cap{display:block;max-width:760px}
.feat-art .cap .cat{display:flex;gap:12px;align-items:center;font-weight:600;text-transform:uppercase;letter-spacing:.14em;font-size:11px;color:var(--signal);margin-bottom:16px}
.feat-art .cap .cat .dt{color:var(--paper-dim)}
.feat-art .cap h2{font-size:clamp(30px,4.6vw,62px);font-weight:900;text-transform:uppercase;line-height:.94;letter-spacing:-.025em}
.feat-art .cap p{margin-top:16px;max-width:54ch;color:#e7e6e2;font-size:15.5px}
.feat-art .cap .read{margin-top:22px;display:inline-flex;gap:9px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;font-size:12px}
.feat-art .cap .read .arr{transition:transform .4s var(--ease)}
.feat-art:hover .cap .read .arr{transform:translateX(5px)}

/* ---------- news grid ---------- */
.news-grid{padding-top:clamp(70px,9vw,120px);padding-bottom:clamp(70px,9vw,120px)}
.news-grid .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(28px,3.2vw,52px)}
.ncard{display:block}
.ncard .ph{aspect-ratio:16/11;overflow:hidden;border-radius:2px;position:relative}
.ncard .ph img{transition:transform .8s var(--ease)}
.ncard:hover .ph img{transform:scale(1.045)}
.ncard .cat{margin-top:17px;display:flex;gap:12px;align-items:center;font-weight:600;text-transform:uppercase;letter-spacing:.1em;font-size:11px;color:var(--signal)}
.ncard .cat .dt{color:#8a897f}
.ncard h3{margin-top:11px;font-weight:800;text-transform:uppercase;letter-spacing:-.012em;font-size:clamp(18px,1.55vw,22px);line-height:1.06}
.ncard p{margin-top:11px;color:#6c6b65;font-size:14px;max-width:44ch;line-height:1.55}
/* on dark sections (e.g. related under a dark post) */
.dark-grid .ncard p{color:var(--paper-dim)}
.dark-grid .ncard .cat .dt{color:var(--paper-dim)}

/* ---------- single post ---------- */
.post-head{padding-top:clamp(122px,16vh,172px);padding-bottom:clamp(28px,4vw,48px);max-width:920px;margin:0 auto;text-align:center}
.post-head .cat{display:inline-flex;gap:12px;align-items:center;font-weight:600;text-transform:uppercase;letter-spacing:.16em;font-size:11px;color:var(--signal)}
.post-head .cat .dt{color:var(--paper-dim)}
.post-head h1{margin:20px 0 0;font-weight:900;text-transform:uppercase;font-size:clamp(32px,5.2vw,68px);line-height:1.0;letter-spacing:-.03em}
.post-head .meta{margin-top:22px;font-weight:600;text-transform:uppercase;letter-spacing:.12em;font-size:11px;color:var(--paper-dim)}
.post-hero{height:clamp(340px,56vh,600px);overflow:hidden;margin-bottom:0}
.post-wrap{padding-top:clamp(54px,7vw,90px);padding-bottom:clamp(70px,9vw,120px)}

.post-body{max-width:760px;margin:0 auto}
.post-body .lead{font-size:clamp(19px,1.8vw,23px);line-height:1.5;color:var(--ink);font-weight:600;margin-bottom:30px}
.post-body p{font-size:16.5px;line-height:1.78;color:#3f3e3a;margin-bottom:22px}
.post-body h2{font-weight:900;text-transform:uppercase;font-size:clamp(23px,2.5vw,32px);letter-spacing:-.02em;margin:42px 0 16px;color:var(--ink)}
.post-body .pull{font-weight:800;text-transform:uppercase;font-size:clamp(21px,2.6vw,32px);line-height:1.1;letter-spacing:-.02em;color:var(--ink);border-top:2px solid var(--ink);border-bottom:1px solid rgba(12,13,15,.16);padding:26px 0;margin:36px 0}
.post-body figure{margin:38px 0}
.post-body figure img{width:100%;height:auto;border-radius:2px;display:block}
.post-body figcaption{margin-top:12px;font-size:12.5px;color:#6c6b65;font-weight:600;text-transform:uppercase;letter-spacing:.08em}
.post-body .end{margin-top:40px;padding-top:26px;border-top:1px solid rgba(12,13,15,.16);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center}
.post-body .end .share{display:flex;gap:14px;align-items:center;color:#6c6b65;font-weight:600;text-transform:uppercase;letter-spacing:.1em;font-size:11px}
.post-body .end a.back{display:inline-flex;gap:9px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;font-size:12px;color:var(--ink);border-bottom:1px solid var(--ink);padding-bottom:4px}

/* related (dark band under post) */
.related{padding-top:clamp(70px,9vw,120px);padding-bottom:clamp(70px,9vw,120px);background:var(--ink-2)}
.related .top{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:22px;margin-bottom:clamp(36px,4vw,56px)}
.related .top h2{font-weight:900;text-transform:uppercase;font-size:clamp(26px,3.4vw,46px);letter-spacing:-.025em;line-height:.95}

/* ---------- pagination ---------- */
.pager{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:clamp(54px,6vw,84px);font-weight:600;text-transform:uppercase;letter-spacing:.08em;font-size:12px}
.pager .pg{min-width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(12,13,15,.18);border-radius:50%;color:var(--ink);transition:background .3s,color .3s,border-color .3s}
.pager .pg:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.pager .pg.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.pager .prev,.pager .next{display:inline-flex;align-items:center;gap:8px;color:var(--ink);padding:0 14px}
.pager .prev.disabled{color:#b3b1a9;cursor:not-allowed}
.pager .next:hover,.pager .prev:not(.disabled):hover{opacity:.6}
@media(max-width:520px){.pager .prev,.pager .next{padding:0 6px;font-size:0}.pager .prev::after{content:"←";font-size:14px}.pager .next::after{content:"→";font-size:14px}}