/* =========================================================================
   politologia.org — Ranking wydarzeń tygodnia (strona publiczna)
   Kolory: granat #18478E, limonka #AAD042, dużo bieli, lekkie obramowania.
   ========================================================================= */

.rkp {
  --rkp-navy: #18478E;
  --rkp-navy-dark: #0F2F61;
  --rkp-lime: #AAD042;
  --rkp-border: #E4E9F1;
  --rkp-muted: #667085;
  --rkp-soft: #F5F8FC;
  padding-bottom: 64px;
}

/* ── Nagłówek ─────────────────────────────────────────────────────────── */

.rkp-head {
  padding: 36px 0 28px;
  text-align: center;
}
.rkp-kicker {
  display: inline-block;
  margin: 0 0 10px;
  padding: 5px 14px;
  border-radius: 99px;
  background: var(--rkp-lime);
  color: #1F2A0B;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.rkp-title {
  margin: 0 0 10px;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.1;
  color: var(--rkp-navy);
  letter-spacing: -.01em;
}
.rkp-lead {
  max-width: 640px;
  margin: 0 auto 26px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--rkp-muted);
}

/* ── Nawigacja tygodni ────────────────────────────────────────────────── */

.rkp-weeknav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  max-width: 900px;
  margin: 0 auto;
}
.rkp-weeknav-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  justify-self: start;
  padding: 8px 14px;
  border: 1px solid var(--rkp-border);
  border-radius: 12px;
  background: #fff;
  color: var(--rkp-navy);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.rkp-weeknav-link small {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--rkp-muted);
}
.rkp-weeknav-link.is-next { justify-self: end; text-align: right; }
a.rkp-weeknav-link:hover {
  border-color: var(--rkp-navy);
  box-shadow: 0 6px 18px rgba(24, 71, 142, .10);
  transform: translateY(-1px);
}
.rkp-weeknav-link.is-disabled { opacity: .35; }
.rkp-weeknav-current {
  padding: 8px 16px;
  border-radius: 99px;
  background: var(--rkp-navy);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}

/* ── Kolumny komentatorów ─────────────────────────────────────────────── */

.rkp-grid {
  display: grid;
  grid-template-columns: repeat(var(--rkp-cols, 5), minmax(0, 1fr));
  gap: 18px;
  margin-top: 36px;
}
.rkp-col {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--rkp-border);
  border-radius: 18px;
  overflow: hidden;
  transition: box-shadow .2s, border-color .2s;
}
.rkp-col:hover {
  border-color: #CFD9E8;
  box-shadow: 0 14px 34px rgba(16, 24, 40, .07);
}

.rkp-author {
  padding: 26px 18px 20px;
  text-align: center;
  background: linear-gradient(180deg, var(--rkp-soft) 0%, #fff 100%);
  border-bottom: 1px solid var(--rkp-border);
}

/* Portret w okręgu — stylizacja "ołówkowa" (szarość + kontrast),
   po najechaniu kolor wraca. */
.rkp-portrait {
  display: block;
  width: 112px;
  height: 112px;
  margin: 0 auto 14px;
  padding: 4px;
  border-radius: 50%;
  background: conic-gradient(from 210deg, var(--rkp-lime), var(--rkp-navy), var(--rkp-lime));
  text-decoration: none;
}
.rkp-portrait img,
.rkp-initials {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 3px solid #fff;
  box-sizing: border-box;
  object-fit: cover;
  background: #fff;
}
.rkp-portrait img {
  filter: grayscale(1) contrast(1.35) brightness(1.08);
  transition: filter .35s ease;
}
.rkp-col:hover .rkp-portrait img { filter: grayscale(0) contrast(1) brightness(1); }
.rkp-initials {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--rkp-navy);
  font-size: 30px;
  font-weight: 800;
}

.rkp-name {
  margin: 0;
  font-size: 17px;
  line-height: 1.25;
  color: var(--rkp-navy-dark);
}
.rkp-name a { color: inherit; text-decoration: none; }
.rkp-name a:hover { color: var(--rkp-navy); text-decoration: underline; text-underline-offset: 3px; }
.rkp-signature {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--rkp-muted);
}

/* ── Lista 1–5 ────────────────────────────────────────────────────────── */

.rkp-list {
  list-style: none;
  margin: 0;
  padding: 6px 16px 14px;
  flex: 1;
}
.rkp-list li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  padding: 14px 0;
  border-bottom: 1px solid var(--rkp-border);
}
.rkp-list li:last-child { border-bottom: 0; }

.rkp-pos {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--rkp-navy);
  color: var(--rkp-navy);
  font-size: 15px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.rkp-list li:first-child .rkp-pos {
  background: var(--rkp-lime);
  border-color: var(--rkp-lime);
  color: #1F2A0B;
}

.rkp-item { min-width: 0; }
.rkp-cat {
  display: block;
  margin-bottom: 3px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--rkp-muted);
}
.rkp-item-title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.38;
  color: #101828;
  overflow-wrap: anywhere;
}
.rkp-list li:first-child .rkp-item-title { font-size: 16px; font-weight: 700; }

.rkp-why { margin-top: 6px; }
.rkp-why summary {
  display: inline-block;
  cursor: pointer;
  list-style: none;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--rkp-navy);
}
.rkp-why summary::-webkit-details-marker { display: none; }
.rkp-why summary::after { content: ' ↓'; }
.rkp-why[open] summary::after { content: ' ↑'; }
.rkp-why p {
  margin: 6px 0 0;
  padding-left: 10px;
  border-left: 2px solid var(--rkp-lime);
  font-size: 13.5px;
  line-height: 1.5;
  color: #344054;
}

/* ── Archiwum ─────────────────────────────────────────────────────────── */

.rkp-archive {
  margin-top: 56px;
  padding-top: 28px;
  border-top: 1px solid var(--rkp-border);
}
.rkp-archive h2 {
  margin: 0 0 14px;
  font-size: 18px;
  color: var(--rkp-navy);
}
.rkp-archive ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.rkp-archive a,
.rkp-archive .is-current {
  display: inline-block;
  padding: 7px 14px;
  border: 1px solid var(--rkp-border);
  border-radius: 99px;
  font-size: 13.5px;
  color: var(--rkp-navy);
  text-decoration: none;
  transition: border-color .15s, background .15s;
}
.rkp-archive a:hover { border-color: var(--rkp-navy); background: var(--rkp-soft); }
.rkp-archive .is-current { background: var(--rkp-navy); border-color: var(--rkp-navy); color: #fff; font-weight: 700; }

.rkp-swipe-hint { display: none; }

/* ── Mniejsze ekrany ──────────────────────────────────────────────────── */

@media (max-width: 1180px) {
  .rkp-grid { gap: 12px; }
  .rkp-author { padding: 22px 12px 16px; }
  .rkp-portrait { width: 96px; height: 96px; }
  .rkp-list { padding: 4px 12px 10px; }
}

/* Telefon i tablet: kolumny przewijane poziomo, jedna karta na ekran */
@media (max-width: 900px) {
  .rkp-head { padding-top: 20px; }
  .rkp-weeknav { grid-template-columns: 1fr 1fr; }
  .rkp-weeknav-current { grid-column: 1 / -1; grid-row: 1; justify-self: center; }
  .rkp-weeknav-link { font-size: 13px; }

  .rkp-swipe-hint {
    display: block;
    margin: 28px 0 0;
    font-size: 12.5px;
    color: var(--rkp-muted);
    text-align: right;
  }
  .rkp-grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(260px, 82%);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    margin: 12px -16px 0;
    padding: 0 16px 12px;
    scroll-padding: 0 16px;
  }
  .rkp-col { scroll-snap-align: start; }
  .rkp-portrait img { filter: grayscale(1) contrast(1.35) brightness(1.08); }
}

@media (prefers-reduced-motion: reduce) {
  .rkp-col, .rkp-portrait img, .rkp-weeknav-link { transition: none; }
}