/* Shared page edges and a consistent section rhythm. */
body main > .section > .page-wrap {
  max-width: var(--page);
  margin-inline: auto !important;
}

main .section > .page-wrap > .reading-width,
main .section > .page-wrap > .section-heading,
main .section > .page-wrap > .section-followup,
main .section > .page-wrap > .faq,
main .section > .page-wrap > .section-heading .section-intro,
main .pa-related-guides > .page-wrap > p {
  max-width: none;
  margin-inline: 0;
}

main .faq-section .section-heading { text-align: left; }
main .faq details p { max-width: none; }
main .section:not(.author-section) { padding-block: clamp(24px, 2.5vw, 36px); }
main .page-hero + .section { padding-top: 24px; }
main .section-heading { margin-bottom: 18px; }
main .section--listings .section-heading { margin-bottom: 18px; }

main .article-copy > :last-child,
main .aside-note > :last-child,
main .section > .page-wrap > :last-child { margin-bottom: 0; }

main :is(.licence-cards, .editorial-columns, .review-steps) + .table-region,
main :is(.table-region, .comparison-table) + p { margin-top: 20px; }

main :is(.licence-cards, .editorial-columns, .review-steps, .pros-cons) {
  gap: 20px 24px;
}

main :is(.licence-cards, .editorial-columns, .review-steps) > * {
  min-width: 0;
  overflow-wrap: break-word;
}

.licence-cards .licence-mark,
.licence-cards h3,
.licence-cards p { margin: 0; }
.licence-cards article { display: grid; gap: 12px; align-content: start; }
.licence-cards p { line-height: 1.6; text-wrap: pretty; }

/* Let card text determine its height; keep complete names, offers and details. */
.casino-card {
  min-height: 0;
  grid-template-rows: 96px auto auto auto auto auto auto minmax(48px, auto);
  gap: 8px;
  align-content: stretch;
}

.casino-card h3,
.casino-description,
.casino-perks,
.casino-stats li {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: break-word;
}

.casino-stats { padding-inline: 0; }

.casino-description {
  display: block;
  -webkit-line-clamp: unset;
  line-height: 1.45;
}

.casino-card .button {
  height: auto;
  min-height: 48px;
  padding: 10px 8px;
  line-height: 1.3;
}

.blog-card,
.sister-card,
.network-card { min-height: 0; }

.blog-card-body { grid-template-rows: auto auto 1fr auto; }
.sister-card-body,
.network-card-body { grid-template-rows: auto auto 1fr auto; }

.blog-card h3,
.blog-card p,
.sister-card-body .status,
.sister-card-body p,
.network-card-body p {
  display: block;
  overflow: visible;
  -webkit-line-clamp: unset;
  overflow-wrap: break-word;
}

.sister-card-body .button,
.network-card-body .button { min-height: 44px; height: auto; line-height: 1.3; }

/* Corresponding rows share a height within each group of neighbouring cards. */
@supports (grid-template-rows: subgrid) {
  .licence-cards > article:has(> .licence-mark + h3 + p:last-child) {
    grid-row: span 3;
    grid-template-rows: subgrid;
    row-gap: 12px;
  }

  .editorial-columns > div:has(> h3 + p:last-child),
  .review-steps > article:has(> h3 + p:last-child) {
    display: grid;
    grid-row: span 2;
    grid-template-rows: subgrid;
    row-gap: 8px;
  }

  .editorial-columns > div:has(> h3 + p:last-child) > *,
  .review-steps > article:has(> h3 + p:last-child) > * { margin: 0; }

  .casino-card {
    grid-row: span 8;
    grid-template-rows: subgrid;
    row-gap: 8px;
  }

  .blog-card,
  .sister-card,
  .network-card {
    grid-row: span 5;
    grid-template-rows: subgrid;
    row-gap: 8px;
  }

  .blog-card-body,
  .sister-card-body,
  .network-card-body { display: contents; }

  .blog-card-body > *,
  .sister-card-body > *,
  .network-card-body > * { margin: 0 16px; }

  .blog-card .card-category,
  .blog-card h3,
  .blog-card p,
  .sister-card-body h3,
  .sister-card-body .status,
  .sister-card-body p,
  .network-card-body h3,
  .network-card-body .status,
  .network-card-body p { margin-inline: 16px; }

  .blog-card-body > :first-child,
  .sister-card-body > :first-child,
  .network-card-body > :first-child { margin-top: 16px; }

  .blog-card-body > :last-child,
  .sister-card-body > :last-child,
  .network-card-body > :last-child { margin-bottom: 16px; }

  .sister-card-body .button,
  .network-card-body .button { width: auto; }

  .sister-card-image,
  .network-card-image { min-height: 104px; }
}

@media (max-width: 700px) {
  main h1 { line-height: 1.12; }
  main h2 { line-height: 1.2; }
  main .section-heading,
  main .section--listings .section-heading { margin-bottom: 16px; }
  main :is(.licence-cards, .editorial-columns, .review-steps, .pros-cons) { gap: 20px; }
}

@media (max-width: 600px) {
  .casino-card { grid-template-rows: 82px auto auto auto auto auto auto minmax(48px, auto); }
  @supports (grid-template-rows: subgrid) {
    .casino-card { grid-template-rows: subgrid; }
  }
}

@media (min-width: 601px) and (max-width: 900px) {
  .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Keep neighbouring sections connected without crowding their content. */
main .page-hero { padding-block: clamp(24px, 2.5vw, 36px); }
main .breadcrumbs { margin-bottom: 16px; }
main .hero-grid { gap: 24px; }
main .section--split,
main .article-layout,
main .brand-overview-copy { gap: 28px; }
main .article-copy h2 { margin-top: 28px; }
main .article-copy h2:first-child { margin-top: 0; }
main .section-followup { margin-top: 16px; }
main .group-list,
main .brand-overview + .brand-overview { margin-top: 28px; }
main .brand-overview { padding-top: 24px; }
main .source-note { margin-top: 20px; }
main .licence-cards article,
main .editorial-columns > div,
main .review-steps article,
main .pros-cons section { padding-top: 16px; }
main .group-list article,
main .group-detail .page-wrap,
main .timeline article { padding-block: 18px; }
main .aside-note { padding-block: 18px; }
main .faq summary { min-height: 52px; padding-block: 12px; }
main .faq details p { margin-bottom: 16px; }
main .author-section { padding-block: 24px; }
.site-footer { margin-top: 0; }
.footer-main { padding-block: 32px; gap: 28px; }

@media (max-width: 900px) {
  main .hero-grid,
  main .section--split,
  main .article-layout,
  main .brand-overview-copy { gap: 20px; }
  .footer-main { gap: 24px 20px; }
}

@media (max-width: 700px) {
  main .page-hero { padding-block: 12px; }
  main .hero-grid { gap: 12px; }
  main .page-hero + .section { padding-top: 20px; }
  main .article-copy h2 { margin-top: 24px; }
  main .article-copy h2:first-child { margin-top: 0; }
  main .author-section { padding-block: 20px; }
  .footer-main { padding-block: 24px; }
}

/* The homepage introduction stands alone without a featured card. */
main .page-hero--home .hero-grid { grid-template-columns: minmax(0, 1fr); }
main .page-hero--home h1 { max-width: none; }
main .page-hero--home .hero-lead { max-width: 72ch; }

/* Directory cards show only the brand and its guide link. */
.sister-card { grid-template-rows: 104px auto; }
.sister-card-body { grid-template-rows: auto auto; }
@supports (grid-template-rows: subgrid) {
  .sister-card { grid-row: span 3; grid-template-rows: subgrid; }
}

/* Make publication information easy to find without a second footer column. */
.footer-bottom { flex-wrap: wrap; }
.footer-policies { display: flex; flex-wrap: wrap; gap: 0 20px; }
.footer-policies a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  color: var(--ink);
  font-size: 0.875rem;
  font-weight: 600;
  text-underline-offset: 3px;
}

@media (max-width: 900px) {
  .author-card { grid-template-columns: 64px minmax(0, 1fr); gap: 6px 14px; }
  .author-card-image { grid-column: 1; grid-row: 1 / 4; width: 64px; height: 64px; }
  .author-card-copy { display: contents; }
  .author-card .card-category,
  .author-card h3,
  .author-card .author-role { grid-column: 2; margin: 0; }
  .author-card .author-role { font-size: 0.875rem; }
  .author-card-copy > p:not(.card-category):not(.author-role) { grid-column: 1 / -1; margin-top: 8px; }
  .author-card-actions { grid-column: 1 / -1; margin-top: 0; padding-top: 4px; min-height: 44px; }
  .author-card-actions a { min-height: 44px; }
}

/* Keep the sister-site directory two cards wide on phones. */
@media (max-width: 600px) {
  .sister-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .sister-card { grid-template-rows: 82px auto; }
  .sister-card-image { min-height: 82px; padding: 10px; }
  .sister-card-image img { height: 52px; max-height: 52px; }
  .sister-card .sister-card-image img[src$="mystake-logo.webp"] { max-height: none; }
  .sister-card-body { padding: 10px; }
  .sister-card-body h3 { font-size: 1rem; line-height: 1.3; }
  .sister-card-body .button { padding: 8px; font-size: 0.875rem; min-height: 44px; }
  @supports (grid-template-rows: subgrid) {
    .sister-card { grid-template-rows: subgrid; }
    .sister-card .sister-card-body > * { margin-inline: 10px; }
    .sister-card .sister-card-body > :first-child { margin-top: 10px; }
    .sister-card .sister-card-body > :last-child { margin-bottom: 10px; }
  }
}