/*
  components.css
  --------------
  Reusable UI pieces: buttons, cards, testimonials, platform tags and the
  cookie-consent banner. These are used across multiple pages.
*/

/* --- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-block;
  padding: 0.85em 1.6em;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.btn-primary {
  background-color: var(--color-accent);
  color: #0a0b0d;
}

.btn-primary:hover {
  background-color: var(--color-accent-hover);
  transform: translateY(-1px);
}

.btn-secondary {
  background-color: transparent;
  color: var(--color-text);
  border: 1px solid var(--color-border);
}

.btn-secondary:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* --- Section labels (kicker/eyebrow) --------------------------------------
   Small uppercase accent-colored label used above section headings and in
   the hero, e.g. "Our Approach" -> kicker reads "About Us". */
.kicker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  color: var(--color-accent);
  text-transform: uppercase;
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.14em;
  margin-bottom: var(--space-xs);
}

/* --- Approach cards (pillars) ---------------------------------------------- */
.approach-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-md);
}

.approach-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
}

.approach-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background-color: var(--color-accent-soft);
  color: var(--color-accent);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-sm);
  margin-bottom: var(--space-sm);
}

.approach-card h3 {
  color: var(--color-text);
  margin-bottom: var(--space-xs);
}

/* --- Testimonials --------------------------------------------------------- */
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-md);
}

.testimonial-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius-sm);
  padding: var(--space-md);
}

.testimonial-card blockquote {
  font-size: var(--fs-md);
  font-style: italic;
  color: var(--color-text);
  margin-bottom: var(--space-sm);
}

.testimonial-card cite {
  display: block;
  font-style: normal;
  font-weight: 600;
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
}

/* --- Game cards ------------------------------------------------------------
   The markup for these cards is generated by assets/js/games-data.js so the
   same underlying markup is shared between the homepage "featured games"
   preview and the full grid on Pages/our-games.html - the two contexts just
   look different (see the ".featured-games-grid" overrides further down and
   the "detail card" overrides in pages/our-games.css). */
.game-card {
  position: relative;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.game-card img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background-color: var(--color-surface-raised);
}

.game-card-body {
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  flex-grow: 1;
}

.game-card-body h3 {
  color: var(--color-text);
}

.game-card-tagline {
  color: var(--color-accent);
  font-weight: 600;
  font-size: var(--fs-sm);
}

.game-card-description {
  flex-grow: 1;
}

.platform-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: var(--space-xs);
}

.platform-tag {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
}

.game-card-body .btn {
  align-self: flex-start;
  margin-top: var(--space-xs);
}

/* Decorative arrow chip shown in the top corner of the homepage's compact
   teaser tiles (see .featured-games-grid below). aria-hidden in the markup
   since the whole tile is already one link - it's purely visual. */
.arrow-chip {
  display: none;
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  z-index: 2;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: rgba(244, 245, 247, 0.08);
  color: var(--color-text);
  font-size: var(--fs-sm);
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* --- Featured games teaser tiles (index.html only) --------------------------
   Compact, image-led tiles: the cover image fills the tile, a gradient
   overlay sits behind the text, and the whole tile is one clickable link
   (the visible "Learn more" text is swapped for the arrow chip + a
   stretched-link overlay so the entire tile responds to clicks/taps). */
.featured-games-grid .game-card {
  aspect-ratio: 4 / 5;
}

.featured-games-grid .game-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  transition: transform 0.5s ease;
}

.featured-games-grid .game-card:hover img {
  transform: scale(1.06);
}

.featured-games-grid .game-card-body {
  position: relative;
  z-index: 1;
  margin-top: auto;
  background: linear-gradient(0deg, rgba(10, 11, 13, 0.92) 20%, transparent 100%);
  padding-top: var(--space-xl);
}

.featured-games-grid .game-card-description {
  display: none;
}

.featured-games-grid .arrow-chip {
  display: flex;
}

.featured-games-grid .game-card:hover .arrow-chip {
  background-color: var(--color-accent);
  color: #0a0b0d;
}

/* The real "Learn more" link is kept in the DOM (for screen readers and
   keyboard focus) but stretched to cover the whole tile, and its text is
   visually hidden since the arrow chip communicates the same thing. */
.featured-games-grid .game-card-body .btn {
  position: static;
  padding: 0;
  margin: 0;
  background: none;
  border: none;
}

.featured-games-grid .game-card-body .btn::before {
  content: "";
  position: absolute;
  inset: 0;
}

.featured-games-grid .game-card-body .btn span {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- Cookie consent banner --------------------------------------------------
   Shown/hidden by assets/js/cookie-consent.js. Starts hidden via the
   `hidden` attribute so it never flashes on screen before the script runs. */
.cookie-banner {
  position: fixed;
  left: var(--space-sm);
  right: var(--space-sm);
  bottom: var(--space-sm);
  z-index: 1000;
  max-width: 640px;
  margin-inline: auto;
  background-color: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
}

.cookie-banner[hidden] {
  display: none;
}

.cookie-banner p {
  flex: 1 1 260px;
  margin: 0;
  font-size: var(--fs-sm);
}

.cookie-banner-actions {
  display: flex;
  gap: var(--space-xs);
}