/* ===== MAYCARES — Public Community Top (compact Top 5 / full Top 25) ===== */

.ctop{
  margin-top:26px;padding:20px 18px;
  border:1px solid var(--hairline-strong);border-radius:var(--radius);background:#FFFDFE;
}
.ctop-loading{font-size:14px;color:var(--blue-gray)}
.ctop-empty{background:var(--white)}
.ctop-head h2{font-size:20px;font-weight:var(--fw-title);line-height:1.25;color:var(--text)}
.ctop-sub{margin-top:6px;font-size:14px;line-height:var(--lh-body);color:var(--blue-gray)}
.ctop-participants{
  margin-top:10px;display:inline-block;font-size:12px;font-weight:var(--fw-micro);
  color:var(--navy);border:1px solid var(--hairline-strong);border-radius:999px;padding:4px 10px;
}

/* --- Top 5 rail: swipeable on mobile, single row from tablet up --- */
.ctop-rail{
  margin-top:16px;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(120px,38%);
  gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;padding-bottom:6px;
}
.ctop-rail::-webkit-scrollbar{height:0}
.ctop-rail-item{scroll-snap-align:start;min-width:0}

.ctop-card{
  display:flex;flex-direction:column;gap:8px;min-width:0;text-decoration:none;position:relative;
  border:1px solid var(--hairline-strong);border-radius:var(--radius);padding:10px;background:#fff;
  transition:border-color .2s ease,transform .2s ease;
}
.ctop-card:hover{border-color:var(--navy)}
.ctop-card-lead{border-color:var(--gold,#C9A15C);background:#FFFCF6}
.ctop-rank{
  position:absolute;top:8px;left:8px;z-index:2;font-size:12px;font-weight:var(--fw-micro);
  background:rgba(255,255,255,.94);border:1px solid var(--hairline-strong);border-radius:999px;
  padding:2px 8px;color:var(--navy);
}
.ctop-card-lead .ctop-rank{border-color:var(--gold,#C9A15C)}

.ctop-portrait{
  display:block;position:relative;width:100%;aspect-ratio:1/1;overflow:hidden;
  border-radius:calc(var(--radius) - 4px);background:#F4F1F2;flex:0 0 auto;
}
.ctop-portrait img{width:100%;height:100%;object-fit:cover;display:block}
.ctop-fallback{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:28px;
}

.ctop-meta{display:flex;flex-direction:column;gap:2px;min-width:0}
.ctop-country{font-size:12px;color:var(--blue-gray);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ctop-name{
  font-size:14px;font-weight:var(--fw-title);color:var(--text);line-height:1.25;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.ctop-pct{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:var(--fw-title);color:var(--navy)}

.ctop-move{font-size:11px;font-weight:var(--fw-micro);letter-spacing:.02em}
.ctop-move-up{color:#2E7D5B}
.ctop-move-down{color:#B4536B}
.ctop-move-flat,.ctop-move-new{color:var(--blue-gray)}

/* --- Full Top 25 list --- */
.ctop-subhead{margin-top:24px;font-size:16px;font-weight:var(--fw-title);color:var(--text)}
.ctop-list{margin-top:12px;display:grid;gap:8px}
.ctop-row{
  display:grid;grid-template-columns:34px 48px 1fr auto;align-items:center;gap:10px;
  text-decoration:none;border:1px solid var(--hairline-strong);border-radius:var(--radius);
  padding:8px 10px;background:#fff;min-width:0;
}
.ctop-row:hover{border-color:var(--navy)}
.ctop-row-rank{font-size:13px;font-weight:var(--fw-title);color:var(--navy)}
.ctop-row .ctop-portrait{width:48px;height:48px;aspect-ratio:1/1;border-radius:999px}
.ctop-row-meta{display:flex;flex-direction:column;min-width:0}
.ctop-row-pct{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.ctop-row-pct strong{font-size:14px;font-weight:var(--fw-title);color:var(--navy)}
.ctop-row-pct small{font-size:11px;color:var(--blue-gray)}

.ctop-lowdata{margin-top:14px;font-size:13px;line-height:var(--lh-body);color:var(--blue-gray)}
.ctop-cta{margin-top:18px}
.ctop-note{margin-top:12px;font-size:11px;line-height:1.5;color:var(--blue-gray)}

@media (min-width:600px){
  .ctop-rail{grid-auto-flow:row;grid-template-columns:repeat(5,1fr);overflow-x:visible}
}

/* A five-up row is too dense inside the tablet editorial measure. Keep three
   substantial cards visible and preserve native horizontal exploration. */
@media (min-width:768px) and (max-width:1199px){
  .ctop{padding:24px 22px}
  .ctop-head h2{font-size:22px}
  .ctop-sub{font-size:15px}
  .ctop-rail{
    grid-auto-flow:column;grid-template-columns:none;
    grid-auto-columns:calc((100% - 24px) / 3);
    gap:12px;overflow-x:auto;
  }
  .ctop-card{padding:12px}
  .ctop-name,.ctop-pct{font-size:15px}
}