/* Rregullo: /loja, the catalog of short games. Builds on site.css (tokens, header, footer, labels). */

.catalog-page { min-height: 100svh; display: flex; flex-direction: column; }
.catalog-page .foot { margin-top: auto; }
.catalog-page .top { width: 100%; }

.catalog {
  width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto;
  padding: clamp(32px, 7vh, 80px) var(--gutter) clamp(56px, 10vh, 112px);
}
.catalog-head { max-width: 640px; }
.catalog-title { margin-top: 16px; font-size: clamp(30px, 3.9vw, 54px); line-height: 1.04; letter-spacing: -.035em; }
.catalog-text { margin-top: 18px; max-width: 44ch; color: var(--mute); font-size: clamp(17px, 1.35vw, 19px); }

/* Cards: as many columns as fit, so game 3, 4, 5 just fall into place */
.games {
  list-style: none; margin: clamp(36px, 6vh, 64px) 0 0; padding: 0;
  display: grid; gap: clamp(16px, 2vw, 28px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
}
.game {
  position: relative; display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: 20px;
  transition: border-color .25s var(--ease-out), background-color .25s var(--ease-out);
}
.game:hover { border-color: rgba(171, 226, 63, .45); background: rgba(241, 242, 239, .02); }
.game:focus-within { border-color: rgba(171, 226, 63, .6); }

.game-art {
  display: grid; place-items: center; aspect-ratio: 2 / 1;
  border-bottom: 1px solid var(--line); border-radius: 19px 19px 0 0;
  background: radial-gradient(ellipse 55% 70% at 50% 50%, var(--ink-2), var(--ink) 75%);
  overflow: hidden;
}
.game-art svg { height: 72%; width: auto; }
.art-tap { height: 86% !important; }
.game-art .art-logo { width: 62%; height: auto; }

.game-body { display: flex; flex-direction: column; align-items: flex-start; flex: 1; padding: 24px clamp(20px, 2vw, 28px) 24px; }
.game-name { margin: 0; font-size: clamp(22px, 2vw, 28px); line-height: 1.12; letter-spacing: -.03em; }
.game-text { margin-top: 8px; color: var(--soft); max-width: 40ch; }
.game-meta { margin-top: 10px; color: var(--mute); font-size: 14px; }

.game-cta {
  display: inline-flex; align-items: center; gap: 10px; margin-top: auto;
  min-height: 48px; padding: 0 18px 0 22px; border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--paper);
  font-size: 16px; font-weight: 500; text-decoration: none; white-space: nowrap;
  transition: background-color .2s var(--ease-out), color .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.game-meta + .game-cta { margin-top: 22px; }
.game-cta svg { width: 18px; height: 18px; transition: transform .25s var(--ease-out); }
/* the whole card is the button's target */
.game-cta::after { content: ""; position: absolute; inset: -1px; border-radius: 20px; }
.game-cta:focus-visible { outline: none; }
.game-cta:focus-visible::after { outline: 2px solid var(--lime); outline-offset: 3px; }
.game:hover .game-cta, .game-cta:focus-visible { background: var(--lime); color: var(--ink); box-shadow: none; }
.game:hover .game-cta svg { transform: translateX(3px); }

.catalog-more { margin-top: 28px; color: var(--mute); font-size: 14px; }

/* The level comes true: on hover the bubble settles between the lines (ident easing, identity 2.4) */
.art-bubble { transform: translateX(-13px); }
@media (prefers-reduced-motion: no-preference) {
  .art-bubble { transition: transform 1.1s cubic-bezier(.25, .6, .4, 1); }
}
.game:hover .art-bubble, .game:focus-within .art-bubble { transform: none; }
@media (hover: none) { .art-bubble { transform: none; } }

/* Drita: the bulb comes on when you point at the card */
.game-art .art-bulb { height: 86%; }
.art-strand { stroke: #7A6548; transition: stroke .5s var(--ease-out); }
.art-bulb-lit, .art-bulb-glow { opacity: 0; transition: opacity .6s var(--ease-out); }
.game:hover .art-bulb-lit, .game:focus-within .art-bulb-lit { opacity: .92; }
.game:hover .art-bulb-glow, .game:focus-within .art-bulb-glow { opacity: 1; }
.game:hover .art-strand, .game:focus-within .art-strand { stroke: #FFF4D6; }

@media (max-width: 480px) {
  .game-body { padding: 20px 20px 22px; }
  .game-cta { align-self: stretch; justify-content: center; }
}
.catalog-ad { margin-top: 24px; max-width: 520px; }