/* Comparison-page list of casino cards. One horizontal card per casino.
   Mobile: stacked. Desktop: rank+logo on left, offer in middle, CTAs on right,
   significant terms span full width below. */

.ccs-cmp-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0 0 48px;
}

.ccs-cmp-card {
  background: #fff;
  border-radius: var(--ccs-radius-xl);
  box-shadow: var(--ccs-shadow-card);
  padding: 20px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.ccs-cmp-card:hover {
  box-shadow: var(--ccs-shadow-card-hover);
  transform: translateY(-2px);
}
@media (min-width: 720px) {
  /* Tablet: 2-column layout — identity above offer on the left (sharing one
     wider column), actions on the right. Stops the Visit Site button taking
     the full card width and uses the empty horizontal space efficiently. */
  .ccs-cmp-card {
    grid-template-columns: 1fr 180px;
    grid-template-areas:
      "identity actions"
      "offer    actions"
      "terms    terms";
    align-items: start;
    padding: 20px 24px;
    column-gap: 24px;
    row-gap: 12px;
  }
  .ccs-cmp-card__identity { grid-area: identity; }
  .ccs-cmp-card__offer    { grid-area: offer; }
  .ccs-cmp-card__actions  { grid-area: actions; align-self: center; }
  .ccs-cmp-card__terms    { grid-area: terms; }
}
@media (min-width: 1024px) {
  /* Desktop: full 3-column layout — identity / offer / actions in one row,
     terms span the full width below. */
  .ccs-cmp-card {
    grid-template-columns: 360px 1fr 200px;
    grid-template-areas:
      "identity offer actions"
      "terms    terms terms";
    align-items: center;
    padding: 24px 32px;
    column-gap: 32px;
    row-gap: 24px;
  }
}

/* Identity column (rank + logo + name + rating) */
.ccs-cmp-card__identity {
  display: flex;
  align-items: center;
  gap: 16px;
}
.ccs-cmp-card__rank {
  font-family: var(--ccs-font-display);
  font-size: 28px;
  font-weight: 800;
  color: var(--ccs-primary);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ccs-primary-fixed);
  border-radius: var(--ccs-radius-full);
  flex-shrink: 0;
}
.ccs-cmp-card__logo {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  background: #fff;
  border: 1px solid var(--ccs-outline-variant);
  border-radius: var(--ccs-radius-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 6px;
}
.ccs-cmp-card__logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.ccs-cmp-card__title {
  min-width: 0;
  flex: 1;
}
.ccs-cmp-card__name {
  font-family: var(--ccs-font-display);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ccs-primary);
  margin: 0 0 4px 0;
}
.ccs-cmp-card__name a {
  color: inherit;
  text-decoration: none;
}
.ccs-cmp-card__name a:hover { text-decoration: underline; }
.ccs-cmp-card__rating {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
  color: var(--ccs-secondary);
  font-size: 13px;
}
.ccs-cmp-card__rating .material-symbols-outlined { font-size: 16px; }
.ccs-cmp-card__rating-text {
  margin-left: 6px;
  font-family: var(--ccs-font-label);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ccs-outline);
}

/* Offer column */
.ccs-cmp-card__offer { min-width: 0; }
.ccs-cmp-card__offer-label {
  font-family: var(--ccs-font-label);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ccs-outline);
  margin: 0 0 4px 0;
}
.ccs-cmp-card__offer-headline {
  font-family: var(--ccs-font-display);
  font-size: 22px;
  font-weight: 800;
  line-height: 1.15;
  color: var(--ccs-primary-container);
  margin: 0 0 6px 0;
}
.ccs-cmp-card__summary {
  font-family: var(--ccs-font-display);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ccs-on-surface-variant);
  margin: 0;
}

/* Compliance row — 18+ badge + BeGambleAware link. Sits at the bottom of the
   offer column so it stays visually attached to the bonus content. Both items
   are forced to the same height + vertical alignment so they line up cleanly
   across every card. */
.ccs-cmp-card__compliance {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  height: 22px;
}
.ccs-cmp-card__age {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: #111;
  color: #fff;
  border-radius: 50%;
  font-family: var(--ccs-font-display);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: -0.3px;
  line-height: 1;
  flex-shrink: 0;
}
/* GambleAware logo (footer asset, ~300x45 wordmark). Constrained to the same
   28px height as the 18+ badge so they share a baseline; width scales to keep
   the logo's natural 6.6:1 aspect ratio. */
.ccs-cmp-card__gba {
  display: inline-flex;
  align-items: center;
  height: 22px;
  text-decoration: none;
}
.ccs-cmp-card__gba img {
  display: block;
  height: 16px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  opacity: 0.85;
  transition: opacity 0.15s ease;
}
.ccs-cmp-card__gba:hover img { opacity: 1; }

/* Actions column */
.ccs-cmp-card__actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  min-width: 0;       /* allow shrinking inside grid track */
  max-width: 100%;
}
.ccs-cmp-card__visit {
  background: var(--ccs-cta-orange);
  color: #fff;
  font-family: var(--ccs-font-display);
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  padding: 14px 24px;
  border-radius: var(--ccs-radius-xl);
  box-shadow: 0 4px 8px rgba(247,163,53,0.3);
  transition: filter 0.15s ease, transform 0.15s ease;
  white-space: nowrap;
  /* Fill the actions column instead of forcing a min-width that overflows
     when the grid column is narrower than the button. */
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.ccs-cmp-card__visit:hover { filter: brightness(1.05); }
.ccs-cmp-card__visit:active { transform: scale(0.98); }
.ccs-cmp-card__read {
  font-family: var(--ccs-font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--ccs-primary);
  text-decoration: none;
  text-align: center;
  padding: 4px;
}
.ccs-cmp-card__read:hover { text-decoration: underline; }

/* Significant terms (spans the full card width below the three columns) */
.ccs-cmp-card__terms {
  font-family: var(--ccs-font-label);
  font-size: 11px;
  line-height: 1.5;
  color: var(--ccs-on-surface-variant);
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid var(--ccs-outline-variant);
}
@media (min-width: 1024px) {
  .ccs-cmp-card__terms { grid-column: 1 / -1; }
}
.ccs-cmp-card__terms a { color: var(--ccs-primary); text-decoration: underline; }

/* Editorial wrappers — pre_content / post_content blocks shown above/below the
   casino list. Scoped under body.ccs-rev-fullwidth so we beat GP's main.css
   default h2/h3 rules (which load after this file). */
body.ccs-rev-fullwidth .ccs-cmp-editorial,
body.ccs-rev-fullwidth .ccs-listing-body {
  background: #fff;
  padding: 32px;
  border-radius: var(--ccs-radius-xl);
  box-shadow: var(--ccs-shadow-card);
  margin: 0 0 32px;
  font-family: var(--ccs-font-display);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ccs-on-surface-variant);
}
body.ccs-rev-fullwidth .ccs-cmp-editorial > * + *,
body.ccs-rev-fullwidth .ccs-listing-body > * + * { margin-top: 16px; }
body.ccs-rev-fullwidth .ccs-cmp-editorial h2,
body.ccs-rev-fullwidth .ccs-cmp-editorial h3,
body.ccs-rev-fullwidth .ccs-listing-body h2,
body.ccs-rev-fullwidth .ccs-listing-body h3 {
  font-family: var(--ccs-font-display);
  font-weight: 700;
  line-height: 1.3;
  color: var(--ccs-primary);
  margin: 28px 0 12px 0;
  text-transform: none;
}
body.ccs-rev-fullwidth .ccs-cmp-editorial h2,
body.ccs-rev-fullwidth .ccs-listing-body h2 { font-size: 26px; }
body.ccs-rev-fullwidth .ccs-cmp-editorial h3,
body.ccs-rev-fullwidth .ccs-listing-body h3 { font-size: 20px; }
body.ccs-rev-fullwidth .ccs-cmp-editorial p,
body.ccs-rev-fullwidth .ccs-listing-body p { margin: 0; }
body.ccs-rev-fullwidth .ccs-cmp-editorial a,
body.ccs-rev-fullwidth .ccs-listing-body a { color: var(--ccs-primary); text-decoration: underline; }
body.ccs-rev-fullwidth .ccs-cmp-editorial ul,
body.ccs-rev-fullwidth .ccs-cmp-editorial ol,
body.ccs-rev-fullwidth .ccs-listing-body ul,
body.ccs-rev-fullwidth .ccs-listing-body ol { padding-left: 24px; margin: 12px 0; }

/* FAQ markup from the wp-faq-schema plugin (.wp-faq-schema-wrap) and the raw
   "FAQs:" H2 + H3/p pattern used on some listing pages. Style them inline so
   they match the comparison-page accordion look without needing the JS toggle. */
body.ccs-rev-fullwidth .ccs-listing-body .wp-faq-schema-wrap,
body.ccs-rev-fullwidth .ccs-listing-body .wp-faq-schema-items {
  background: transparent;
  padding: 0;
}
body.ccs-rev-fullwidth .ccs-listing-body .wp-faq-schema-items > h3 {
  font-family: var(--ccs-font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--ccs-primary);
  margin: 24px 0 8px;
  padding-top: 24px;
  border-top: 1px solid var(--ccs-outline-variant);
}
body.ccs-rev-fullwidth .ccs-listing-body .wp-faq-schema-items > h3:first-of-type {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
}
body.ccs-rev-fullwidth .ccs-listing-body .wp-faq-schema-items > div p {
  font-family: var(--ccs-font-display);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ccs-on-surface-variant);
  margin: 0 0 12px;
}