/* 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; }
/* Rating-link wrapper: anchor goes to the casino's review page + the
   #player-reviews-complaints section, so the form is open and ready. */
.ccs-cmp-card__rating-link {
  display: inline-block;
  text-decoration: none;
  color: inherit;
  transition: transform 0.12s ease;
}
.ccs-cmp-card__rating-link:hover,
.ccs-cmp-card__rating-link:focus-visible {
  transform: translateY(-1px);
  text-decoration: none;
  outline: none;
}
.ccs-cmp-card__rating-link:hover .ccs-cmp-card__rating-text,
.ccs-cmp-card__rating-link:focus-visible .ccs-cmp-card__rating-text {
  color: var(--ccs-primary);
}

.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);
}
.ccs-cmp-card__how-we-rate {
  display: inline-block;
  margin-top: 2px;
  font-size: 11px;
  color: var(--ccs-outline);
  text-decoration: underline;
  text-decoration-color: rgba(0,0,0,0.18);
  text-underline-offset: 2px;
}
.ccs-cmp-card__how-we-rate:hover,
.ccs-cmp-card__how-we-rate:focus-visible {
  color: var(--ccs-primary);
  text-decoration-color: currentColor;
}

/* 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 {
  /* !important to beat the tokens.css `.entry-content` transparency override
     when the same element carries both classes (e.g. on single-guide pages).
     `display: flow-root` contains floated children (article images that
     wrap inline text) so the white card extends to wrap them. */
  background: #fff !important;
  padding: 32px !important;
  border-radius: var(--ccs-radius-xl);
  box-shadow: var(--ccs-shadow-card);
  margin: 0 0 32px;
  display: flow-root;
  font-family: var(--ccs-font-display);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ccs-on-surface-variant);
}

/* Section heads on /no-deposit-casino-sites/ (and any other page that uses
   the multi-section pattern). Bigger than .ccs-listing-body h2 to make the
   section break visually obvious. */
body.ccs-rev-fullwidth .ccs-section-h {
  font-family: var(--ccs-font-display);
  font-size: 26px;
  font-weight: 700;
  color: var(--ccs-primary);
  margin: 32px 0 12px;
  line-height: 1.3;
}
body.ccs-rev-fullwidth .ccs-section-h:first-child { margin-top: 0; }
body.ccs-rev-fullwidth .ccs-section-sub {
  font-family: var(--ccs-font-display);
  font-size: 16px;
  color: var(--ccs-on-surface-variant);
  margin: 0 0 20px;
  max-width: 70ch;
}

/* "There are no current offers" empty-state callout — replaces an empty
   casino list with an honest message. */
body.ccs-rev-fullwidth .ccs-empty-note {
  background: #fff;
  border-radius: var(--ccs-radius-xl);
  box-shadow: var(--ccs-shadow-card);
  padding: 28px 32px;
  margin: 0 0 32px;
  font-family: var(--ccs-font-display);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ccs-on-surface-variant);
  border-left: 4px solid var(--ccs-cta-orange, #f7a335);
}
body.ccs-rev-fullwidth .ccs-empty-note p:last-child { margin-bottom: 0; }
@media (max-width: 1023px) {
  body.ccs-rev-fullwidth .ccs-empty-note { padding: 20px 16px; }
}
/* Tablet/mobile: tighten the listing-body padding so the cards inside don't
   end up squeezed into a narrow strip with a thick white frame on each side.
   The .ccs-rev__container already adds 16px on each side, so 32px+16px=48px
   per side at desktop is fine; at <=1023px we drop to 16+16=32px; at <=600px
   to 12+16=28px. */
@media (max-width: 1023px) {
  body.ccs-rev-fullwidth .ccs-cmp-editorial,
  body.ccs-rev-fullwidth .ccs-listing-body {
    padding: 20px 16px !important;
  }
}
@media (max-width: 600px) {
  body.ccs-rev-fullwidth .ccs-cmp-editorial,
  body.ccs-rev-fullwidth .ccs-listing-body {
    padding: 16px 12px !important;
    border-radius: var(--ccs-radius-lg, 16px);
  }
}
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 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;
}