/* Game-category listing (/jatekok/wargame/, /jatekok/tcg/).
   Its own file rather than more weight in pages.css: only two pages load it,
   and pages.css is already on every request. */

.gcat-grid{
  display:grid;
  /* 268px keeps three across a 1440 sheet and two on a tablet; the cards fill
     whatever count they land on, so a row is never one card wide with a hole. */
  grid-template-columns:repeat(auto-fill,minmax(268px,1fr));
  gap:clamp(14px,1.7vw,22px);
}

.gcat{
  position:relative;display:flex;flex-direction:column;
  background:var(--card);border:1px solid var(--edge);border-radius:14px;overflow:hidden;
  transition:border-color .16s,transform .16s;
}
.gcat:hover{border-color:var(--gold-dk);transform:translateY(-2px)}
/* the whole card is the link, but the heading still carries the accessible name */
.gcat-hit{position:absolute;inset:0;z-index:2}
.gcat:focus-within{border-color:var(--gold)}
.gcat-hit:focus-visible{outline:2px solid var(--gold-lt);outline-offset:-3px;border-radius:14px}

.gcat img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;background:var(--panel)}
.gcat-m{padding:16px 18px 18px;display:flex;flex-direction:column;gap:8px}
.gcat-k{
  margin:0;font-family:var(--ui);font-size:12.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold);
}
.gcat h2{font-family:var(--display);font-weight:600;font-size:20px;margin:0;letter-spacing:.01em}
.gcat-m p{margin:0;color:var(--tx-dim);font-size:16px;line-height:1.55}
.gcat .cue{
  margin-top:2px;font-family:var(--ui);font-size:13px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--gold);
}

@media (prefers-reduced-motion:reduce){.gcat{transition:none}.gcat:hover{transform:none}}


/* ------------------------------------------------------------------
   Feature rows — used when a category holds three systems or fewer.
   The grid above is for scanning six; this is for reading three.
   ------------------------------------------------------------------ */
.gcat-rows{display:flex;flex-direction:column;gap:clamp(16px,2vw,26px)}

.gcat-rows .gcat{
  display:grid;
  /* the image takes a little under half so the text keeps a readable measure
     rather than stretching across the whole 1440 sheet */
  grid-template-columns:minmax(0,42%) minmax(0,1fr);
  align-items:stretch;
}
/* alternate, so three rows read as a rhythm instead of three of the same thing */
.gcat-rows .gcat:nth-child(even){grid-template-columns:minmax(0,1fr) minmax(0,42%)}
.gcat-rows .gcat:nth-child(even) img{order:2}

.gcat-rows .gcat img{
  height:100%;
  /* 4/3 is the floor; the image stretches to whatever the text needs, so the
     two halves always end level and no row has a short edge */
  aspect-ratio:auto;min-height:236px;
}
.gcat-rows .gcat-m{
  padding:clamp(20px,2.4vw,32px);
  justify-content:center;gap:10px;
}
.gcat-rows .gcat h2{font-size:clamp(21px,2.2vw,26px)}
.gcat-rows .gcat-m p{font-size:17px;max-width:62ch}

@media(max-width:760px){
  /* one column, image on top — and the alternation has to be undone or every
     second row would put its picture below its text */
  .gcat-rows .gcat,
  .gcat-rows .gcat:nth-child(even){grid-template-columns:1fr}
  .gcat-rows .gcat:nth-child(even) img{order:0}
  .gcat-rows .gcat img{aspect-ratio:16/10;min-height:0}
  .gcat-rows .gcat-m{padding:16px 18px 18px}
}

/* ---- polish (KTK_GCAT_POLISH): hero zoom, deeper hover lift, drifting cue ---- */
.gcat{box-shadow:0 2px 8px rgba(0,0,0,.18)}
.gcat:hover{box-shadow:0 16px 34px rgba(0,0,0,.42)}
.gcat img{transition:transform .35s ease}
.gcat:hover img{transform:scale(1.045)}
.gcat .cue{display:inline-flex;align-items:center;gap:.45em;transition:gap .18s ease}
.gcat:hover .cue{gap:.8em}
@media (prefers-reduced-motion:reduce){.gcat img,.gcat .cue{transition:none}.gcat:hover img{transform:none}}