/* ==========================================================================
   MapleBird — pages/home.css
   Blocks that only appear on the hub.
   ========================================================================== */

/* Bonus panel — offer on the left, the terms table beside it, never behind
   a link. Ontario visitors get the explainer variant instead (see §7). */

.bonus {
  display: grid;
  gap: var(--space-6);
  align-items: start;
}

@media (min-width: 900px) {
  .bonus {
    grid-template-columns: 0.9fr 1.1fr;
    gap: var(--space-8);
  }
}

.bonus__panel {
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-accent-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.bonus__panel h3 {
  margin-block-end: var(--space-2);
}

.bonus__panel p {
  font-size: var(--text-sm);
  line-height: var(--line-height-loose);
}

.bonus__panel > * + * {
  margin-block-start: var(--space-4);
}

.bonus__flag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
}

/* Six-card game library grid. */

.library {
  display: grid;
  gap: var(--space-4);
}

@media (min-width: 640px) {
  .library {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .library {
    grid-template-columns: repeat(3, 1fr);
  }
}

.library__card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: border-color var(--transition-fast), transform var(--transition-fast),
    box-shadow var(--transition-fast);
}

.library__card:hover,
.library__card:focus-within {
  border-color: var(--color-accent-line);
  transform: translateY(-3px);
  box-shadow: var(--shadow-card), var(--shadow-glow);
}

.library__art {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--color-border);
  border-block-end: 1px solid var(--color-border);
}

.library__art img {
  width: 100%;
  height: auto;
  aspect-ratio: 211 / 260;
  object-fit: cover;
}

.library__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  flex: 1;
}

.library__body p {
  font-size: var(--text-sm);
  line-height: var(--line-height-loose);
  flex: 1;
}

.library__body h3 {
  margin: 0;
}

/* Studio / provider entity row. */

.studios {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.studios li {
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-surface-2);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-primary);
}

/* Comparison block — feature-only, no scores or superiority claims. */

.compare th[scope='row'] {
  min-width: 12rem;
}

.compare td {
  color: var(--color-text-primary);
}

/* French teaser block. */

.frblock {
  display: grid;
  gap: var(--space-5);
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-inline-start: 3px solid var(--color-accent);
  border-radius: var(--radius-lg);
}

@media (min-width: 900px) {
  .frblock {
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: var(--space-8);
  }
}

.frblock p {
  font-size: var(--text-sm);
  line-height: var(--line-height-loose);
  max-width: 44rem;
}

/* Split media/text row used for the live-dealer and sportsbook sections. */

.split {
  display: grid;
  gap: var(--space-8);
  align-items: center;
}

@media (min-width: 900px) {
  .split {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-12);
  }

  .split--reverse .split__media {
    order: -1;
  }
}

.split__media img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-card);
}

.split__body > * + * {
  margin-block-start: var(--space-4);
}

.split__body h3 {
  margin-block-end: var(--space-2);
  margin-block-start: var(--space-6);
}