/* ============================================================================
   Casino Review — Game Providers — [section cpt="casino-review" type="game-provider"]
   In-content light section (not full-bleed). Mobile-first; breakpoints 768 / 1280.
   Responsive grid of provider tiles: 4 (mobile) / 5 (tablet) / 7 (desktop) columns.
   All values map to design tokens. No hard-coded values.
   ============================================================================ */

.gp {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-5);                            /* 20 heading ↔ grid (mobile; ≥768 → 28) */
  font-family: var(--font-family-paragraph);
  box-sizing: border-box;
}
.gp *, .gp *::before, .gp *::after { box-sizing: border-box; }

/* ── Heading + divider ────────────────────────────────────────────────────── */
.gp__head { display: flex; flex-direction: column; gap: var(--spacing-3); }  /* 12 */
.gp__title {
  margin: 0;
  font-family: var(--font-family-header);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-h5);
  line-height: var(--line-height-h5);
  color: var(--color-primary-dark);
}
.gp__rule {
  display: block;
  width: 100%;
  height: var(--border-width-thin);
  background: var(--color-base-mid-gray);
}

/* ── Provider grid ────────────────────────────────────────────────────────── */
.gp__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));  /* mobile: 4 cols */
  column-gap: var(--spacing-2);                       /* 8 */
  row-gap: var(--spacing-4);                          /* 16 */
}

.gp-card {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);                             /* 4 logo ↔ name (desktop → 8) */
  align-items: center;
}
.gp-card__logo {
  width: 100%;
  height: var(--spacing-16);                         /* 64 box height (mobile/tablet) */
  padding: var(--spacing-2);                         /* 8 logo inset */
  border-radius: var(--radius-xl);                   /* 12px — exact */
  background: var(--color-base-ghost-white);         /* #fafafa — exact */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.gp-card__logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}
.gp-card__name {
  font-family: var(--font-family-paragraph);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-p3-caption);
  line-height: var(--line-height-p3-caption);
  color: var(--color-default-text);                  /* #57595d — exact (Figma default; hover → primary) */
  text-align: center;
}

/* Clickable tile → the provider's PUBLISHED game-provider post; unpublished /
   unmatched providers render as a plain <div> tile (see the renderer). */
.gp-card--link { text-decoration: none; color: inherit; cursor: pointer; }
.gp-card--link:hover .gp-card__name { color: var(--color-primary); }

/* ── Tablet ≥768 (full-width, 5 cols, 64px boxes) ─────────────────────────── */
@media (min-width: 768px) {
  .gp { gap: var(--spacing-7); }                     /* 28 heading ↔ grid */
  .gp__grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    column-gap: var(--spacing-6);                    /* 24 */
    row-gap: var(--spacing-6);                       /* 24 */
  }
}

/* ── Desktop ≥1280 (full-width, 7 cols, boxes narrow to 52px) ─────────────── */
@media (min-width: 1280px) {
  .gp__grid {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    column-gap: var(--spacing-5);                    /* 20 */
    row-gap: var(--spacing-6);                       /* 24 */
  }
  .gp-card { gap: var(--spacing-2); }                /* 8 logo ↔ name */
  .gp-card__logo { height: var(--spacing-13); }      /* 52 box height */
}