/* ============================================================
   Jäsenseurat — sivukohtaiset tyylit
   Kaksi seurapaneelia (river / pine), esittelyt & toimihenkilöt.
   Mobile-first: yksi sarake, ≥820px kaksi.
   ============================================================ */

.seurat-page{padding-top:clamp(28px,5vw,64px);}

/* ---------- Kahden seuran ruudukko ---------- */
.clubs-grid{display:grid;grid-template-columns:1fr;gap:clamp(18px,3vw,28px);align-items:start;}
@media(min-width:820px){.clubs-grid{grid-template-columns:1fr 1fr;}}

/* ---------- Kummankin seuran yhteiset edut ---------- */
/* Neutraali, koko ruudukon levyinen banneri kahden seuran paneelin yläpuolella.
   Ei yhden seuran aksenttia: yläreunan liuku river→pine viestii yhteisyyttä,
   listamerkit neutraalilla mustesävyllä. */
.shared-benefits{position:relative;background:var(--paper-2);border:1px solid var(--line);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);
  padding:clamp(20px,3vw,30px);margin-bottom:clamp(18px,3vw,28px);overflow:hidden;
  --c-accent:var(--ink-soft);}
.shared-benefits::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;
  background:linear-gradient(90deg,var(--river),var(--pine));}
.shared-benefits h3{font-family:var(--serif);font-size:clamp(20px,2.6vw,26px);line-height:1.15;
  margin:0 0 14px;color:var(--ink);}
.sb-benefits{gap:9px 26px;}
@media(min-width:560px){.sb-benefits{grid-template-columns:1fr 1fr;}}

/* ---------- Seurapaneeli ---------- */
.club-panel{position:relative;background:var(--paper);border:1px solid var(--line);
  border-top:4px solid var(--c-accent);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);
  padding:clamp(22px,3vw,34px);overflow:hidden;}
.club-panel.river{--c-accent:var(--river);--c-deep:var(--river-deep);--c-tint:var(--river-tint);}
.club-panel.pine{--c-accent:var(--pine);--c-deep:var(--pine-deep);--c-tint:var(--pine-tint);}

.club-panel .cp-kicker{font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--c-deep);font-weight:600;}
.club-panel h3{font-family:var(--serif);font-size:clamp(22px,3vw,28px);line-height:1.15;
  margin:8px 0 0;color:var(--ink);}

/* ---------- Faktamerkit ---------- */
.cp-badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;}
.cp-badge{font-family:var(--sans);font-size:12.5px;font-weight:600;letter-spacing:.01em;
  background:var(--c-tint);color:var(--c-deep);padding:5px 12px;border-radius:20px;white-space:nowrap;}

.cp-intro{color:var(--ink-soft);font-size:15px;line-height:1.65;margin-top:18px;}

/* ---------- Väliotsikot ---------- */
.cp-sub{font-family:var(--sans);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;color:var(--ink-faint);margin:26px 0 10px;}

.cp-fee{font-size:15px;color:var(--ink);line-height:1.55;}
.cp-fee strong{color:var(--c-deep);}

/* ---------- Etulista ---------- */
.benefits{list-style:none;display:grid;gap:9px;}
.benefits li{position:relative;padding-left:26px;font-size:14.5px;color:var(--ink-soft);line-height:1.5;}
.benefits li::before{content:"";position:absolute;left:2px;top:.5em;width:9px;height:9px;
  border-radius:2px;background:var(--c-accent);transform:rotate(45deg);}

.cp-join{font-size:14.5px;color:var(--ink-soft);line-height:1.6;}

/* ---------- Nostolaatikko (esim. Kalajunnut) ---------- */
.cp-callout{margin:22px 0 4px;padding:16px 18px;background:var(--c-tint);
  border-left:3px solid var(--c-accent);border-radius:var(--radius);}
.cp-callout .cp-callout-h{font-family:var(--sans);font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;font-weight:700;color:var(--c-deep);margin:0 0 6px;}
.cp-callout p{font-size:14.5px;color:var(--ink-soft);line-height:1.6;margin:0;}

/* ---------- Toimihenkilöt ---------- */
.people{display:grid;gap:10px;}
.cp-person{border:1px solid var(--line);border-radius:var(--radius);background:var(--paper-2);
  padding:13px 15px;}
.cp-person .nm{font-family:var(--serif);font-size:16px;font-weight:600;color:var(--ink);}
.cp-person .role{font-size:12.5px;color:var(--c-deep);font-weight:600;margin-top:1px;}
.cp-person .rows{margin-top:8px;display:grid;gap:3px;}
.cp-person .rows a,.cp-person .rows span{font-size:13.5px;color:var(--ink-soft);text-decoration:none;
  display:inline-block;}
.cp-person .rows a:hover{color:var(--c-deep);}
.cp-person .rows .lbl{color:var(--ink-faint);font-weight:600;}
.cp-person .mail{font-size:13.5px;color:var(--ink-soft);word-break:break-word;}

/* ---------- Toimintanapit ---------- */
.cp-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px;}
.club-panel.river .btn.ghost:hover{border-color:var(--river);color:var(--river-deep);}
.club-panel.pine .btn.ghost:hover{border-color:var(--pine);color:var(--pine-deep);}