/* Logo plates. Provider and lottery marks arrive with wildly different padding and
   brightness, so the tile normalises both: one optical size, and a plate each mark can be
   read against. Tone is measured at build time from the logo's own pixels. */
.fcs-provider-item:not([data-tone]) { padding: 0; overflow: hidden; }
.fcs-provider-card,
.fcs-provider-item,
.fcs-lottery-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--fcs-surface);
  border: 1px solid var(--fcs-line);
  border-radius: var(--fcs-r-s);
  padding: 14px 12px;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.fcs-provider-card:hover,
.fcs-provider-item:hover,
.fcs-lottery-card:hover {
  border-color: var(--fcs-blue-2);
  transform: translateY(-2px);
  box-shadow: var(--fcs-shadow);
}
/* Only tiles that hold a trimmed logo get the fixed optical height. The TGB88 grid reuses the
   same tile class for full photographic studio shots, and those must keep their own aspect. */
.fcs-provider-card[data-tone] img,
.fcs-provider-item[data-tone] img,
.fcs-lottery-card[data-tone] img {
  width: auto;
  max-width: 100%;
  height: 30px;
  object-fit: contain;
}
.fcs-lottery-card[data-tone] img { height: 46px; }
@media (min-width: 768px) {
  .fcs-provider-card[data-tone] img,
  .fcs-provider-item[data-tone] img { height: 36px; }
  .fcs-lottery-card[data-tone] img { height: 54px; }
}
/* Tiles without a tone hold artwork, not a logo: let it fill the tile. */
.fcs-provider-item:not([data-tone]) img,
.fcs-provider-card:not([data-tone]) img {
  width: 100%;
  height: auto;
  border-radius: 6px;
}
/* A pale mark on a white tile is invisible, so it gets the navy plate instead.
   Same geometry, same border radius, same logo height: only the ground changes. */
.fcs-provider-card[data-tone="light"],
.fcs-provider-item[data-tone="light"],
.fcs-lottery-card[data-tone="light"] {
  background: var(--fcs-navy);
  border-color: var(--fcs-navy-2);
}
.fcs-provider-card[data-tone="light"]:hover,
.fcs-provider-item[data-tone="light"]:hover,
.fcs-lottery-card[data-tone="light"]:hover {
  border-color: var(--fcs-blue);
}
.fcs-lottery-card[data-tone="light"] .fcs-lottery-name { color: #FFFFFF; }

/* A provider grid holding photographic studio shots, not logos. Fewer, larger cells so the
   pictures are actually legible, and the tile is a frame rather than a padded plate. */
.fcs-provider-grid[data-grid="photo"] {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
@media (min-width: 560px) { .fcs-provider-grid[data-grid="photo"] { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) { .fcs-provider-grid[data-grid="photo"] { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } }
.fcs-provider-grid[data-grid="photo"] .fcs-provider-item {
  padding: 0;
  overflow: hidden;
  border-radius: var(--fcs-r-m);
  background: var(--fcs-navy);
  height: auto;
  min-height: 0;
  display: block;
}
.fcs-provider-grid[data-grid="photo"] .fcs-provider-item img,
.fcs-provider-grid[data-grid="photo"] .fcs-provider-item .fcs-provider-img {
  width: 100%;
  height: auto;
  max-height: none;
  aspect-ratio: 332 / 431;
  object-fit: cover;
  border-radius: 0;
  display: block;
}
@media (prefers-reduced-motion: reduce) {
  .fcs-provider-card,
  .fcs-provider-item,
  .fcs-lottery-card { transition: none; }
  .fcs-provider-card:hover,
  .fcs-provider-item:hover,
  .fcs-lottery-card:hover { transform: none; }
}