/* Match card heights within each row, with grouped actions aligned below the content. */
.cards-grid { align-items:stretch; }
.gc-card {
  --gc-surface:#fffefa; --gc-vote-surface:#f6f8fc;
  --gc-cookie:#966019; --gc-cookie-bg:#fff1d7; --gc-red:#ba4350; --gc-red-bg:#fff0f0;
  position:relative; min-width:0; container-type:inline-size; display:flex; flex-direction:column;
  padding:20px; border:1px solid var(--line); border-radius:21px; background:var(--gc-surface);
  box-shadow:0 2px 5px #163c7504,0 8px 24px #163c7508; transition:border-color .18s,box-shadow .18s;
}
.gc-card:hover { border-color:#9bb6df; }
.aona-dark .gc-card {
  --gc-surface:#14253e; --gc-vote-surface:#102037;
  --gc-cookie:#f3c36d; --gc-cookie-bg:#49391f; --gc-red:#ff9ba6; --gc-red-bg:#492c3b;
  box-shadow:0 2px 5px #0001,0 8px 24px #0001;
}
.gc-card-body { display:grid; grid-template-columns:100px minmax(0,1fr); column-gap:18px; align-items:start; align-content:start; flex:1; }
.gc-card-avatar { grid-row:1 / span 2; display:block; width:100px; height:100px; border:1px solid #163c7510; border-radius:17px; object-fit:cover; }
.gc-card-copy { min-width:0; padding-right:38px; }
.gc-card-niche { display:inline-block; max-width:100%; margin-bottom:7px; padding:4px 10px; border-radius:999px; background:#e5eeff; color:#2952a2; font-size:10px; line-height:1.4; font-weight:700; overflow-wrap:anywhere; }
.gc-card-niche--chillrandom,.gc-card-niche--memes { background:var(--gc-cookie-bg); color:var(--gc-cookie); }
.gc-card-niche--study,.gc-card-niche--anime { background:#e3f0e8; color:#36674d; }
.aona-dark .gc-card-niche { background:#263f65; color:#b0c9ff; }
.aona-dark .gc-card-niche--chillrandom,.aona-dark .gc-card-niche--memes { background:var(--gc-cookie-bg); color:var(--gc-cookie); }
.aona-dark .gc-card-niche--study,.aona-dark .gc-card-niche--anime { background:#29453d; color:#b3dfc4; }
.gc-card-copy h3 { margin:0 0 8px; font-size:26px; font-weight:700; line-height:1.15; letter-spacing:-.7px; overflow-wrap:anywhere; }
.gc-card-description { grid-column:2; padding-right:13px; margin:0; font-size:12px; line-height:1.65; color:var(--muted); overflow-wrap:anywhere; }
.gc-card-footer { display:grid; grid-template-columns:44px minmax(0,1fr) auto; align-items:center; column-gap:12px; margin-top:16px; padding-top:13px; border-top:1px solid var(--line); }
.gc-card button,.gc-card summary { transition:background .16s,border-color .16s,transform .16s; }
.gc-card button:active { transform:translateY(1px); }
.gc-card button:focus-visible,.gc-card summary:focus-visible { outline:3px solid var(--action-focus); outline-offset:4px; }
.gc-card svg { display:block; flex-shrink:0; }
.gc-card-save { display:grid; place-items:center; width:44px; height:44px; padding:0; border:1px solid var(--action-border); border-radius:12px; background:transparent; color:var(--action-icon); }
.gc-card-save:hover { color:var(--action-soft-text); background:var(--action-soft); }
.gc-card-save[aria-pressed=true] { color:var(--action-selected-text); background:var(--action-selected); border-color:var(--action-border); }
.gc-card-votes { position:relative; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:stretch; justify-self:center; padding:0; overflow:hidden; border:1px solid var(--line); border-radius:12px; background:var(--gc-vote-surface); }
.gc-card-vote { display:flex; align-items:center; justify-content:center; gap:6px; min-width:44px; min-height:44px; padding:8px 7px; border:1px solid transparent; border-radius:0; background:transparent; font-size:11px; line-height:1; font-weight:700; font-variant-numeric:tabular-nums; }
.gc-card-vote span { min-width:3ch; text-align:center; color:var(--ink); }
.gc-card-up { color:var(--gc-cookie); }
.gc-card-down { color:var(--gc-red); }
.gc-card-up:hover,.gc-card-up[aria-pressed=true] { background:var(--gc-cookie-bg); border-color:#d7a95366; }
.gc-card-up[aria-pressed=true] svg { fill:var(--gc-cookie-bg); stroke-width:2.4; }
.gc-card-down:hover,.gc-card-down[aria-pressed=true] { background:var(--gc-red-bg); border-color:#d78d9866; }
.gc-card-vote-divider { position:absolute; left:50%; top:50%; width:1px; height:18px; background:var(--line); transform:translate(-50%,-50%); pointer-events:none; }
.gc-card-join { display:flex; align-items:center; justify-content:center; gap:21px; min-height:44px; padding:11px 17px; border:1px solid transparent; border-radius:12px; background:var(--action-primary); color:var(--action-primary-text); font-size:12px; font-weight:700; white-space:nowrap; }
.gc-card-join:hover { background:var(--action-primary-hover); }
.gc-card-more { position:absolute; top:6px; right:6px; z-index:3; width:44px; height:44px; min-width:44px; min-height:44px; }
.gc-card-more summary { display:grid; place-items:center; list-style:none; width:44px; height:44px; min-width:44px; min-height:44px; border-radius:12px; color:var(--action-icon); cursor:pointer; }
.gc-card-more summary::-webkit-details-marker { display:none; }
.gc-card-more summary:hover,.gc-card-more[open] summary { background:var(--action-soft); color:var(--action-soft-text); }
.gc-card-more summary:active { transform:scale(0.94); }
.gc-card-menu { position:absolute; top:48px; right:0; width:190px; max-width:calc(100vw - 64px); padding:7px; border:1px solid var(--line); border-radius:13px; background:var(--gc-surface); box-shadow:0 12px 28px #08255224; }
.gc-card-creator { display:block; padding:7px 9px; color:var(--muted); font-size:10px; overflow-wrap:anywhere; }
.gc-card-menu button { display:flex; align-items:center; gap:10px; width:100%; min-height:44px; padding:11px 9px; border:0; border-radius:7px; background:none; color:var(--ink); font-size:11px; text-align:left; }
.gc-card-menu button:hover { color:var(--action-soft-text); background:var(--action-soft); }
/* Adapt to the actual directory column width, including tablet and list views. */
@container (max-width:460px) {
  .gc-card-copy { padding-right:36px; }
  .gc-card-body { grid-template-columns:84px minmax(0,1fr); column-gap:16px; }
  .gc-card-avatar { width:84px; height:84px; border-radius:15px; }
  .gc-card-copy h3 { font-size:24px; }
  .gc-card-footer { column-gap:8px; margin-top:15px; padding-top:12px; }
  .gc-card-join { gap:14px; padding:10px 13px; font-size:11px; }
  .gc-card-vote { gap:5px; padding:8px; font-size:10px; }
}
@media(max-width:460px) {
  .gc-card { padding:17px 16px; border-radius:20px; }
  .gc-card-more { top:6px; right:6px; }
  .gc-card-body { grid-template-columns:76px minmax(0,1fr); column-gap:14px; row-gap:0; }
  .gc-card-avatar { grid-row:1; width:76px; height:76px; border-radius:14px; }
  .gc-card-copy { padding-right:36px; }
  .gc-card-copy h3 { margin-bottom:0; font-size:23px; }
  .gc-card-niche { padding:4px 9px; margin-bottom:9px; font-size:9px; }
  .gc-card-description { grid-column:1 / -1; padding-right:0; margin-top:12px; line-height:1.6; }
  .gc-card-footer { column-gap:7px; }
  .gc-card-vote { gap:4px; padding:8px 4px; }
  .gc-card-join { gap:12px; padding:11px 12px; }
}
@media(max-width:350px) {
  .gc-card-footer { column-gap:4px; }
  .gc-card-vote { padding:8px 2px; }
  .gc-card-vote span { min-width:2ch; }
  .gc-card-join { gap:7px; padding:11px 8px; font-size:10px; }
  .gc-card-copy h3 { font-size:22px; }
}

.gc-card .gc-card-avatar--custom { border-radius:50%; }