/* SMMcalc article layout: footer-safe banners and readable comparison tables. */

/* The observer changes a presentation attribute, leaving original hidden,
   dismissal/session state and close handlers in charge of banner lifecycle. */
[data-blog-affiliate-bottom-banner][data-smmcalc-footer-suppressed],
[data-blog-survey-bottom-banner][data-smmcalc-footer-suppressed] {
  display: none !important;
}

body.blog-bottom-banner-open:not(.blog-popup-open) {
  padding-bottom: var(--blog-bottom-banner-space, 0px);
}

body .blog-article-page .blog-prose .article-table-shell {
  min-width: 0;
}
body .blog-article-page .blog-prose .article-table-scroll {
  max-width: 100%;
}

/* Prefer breaks between words, including linked book titles and sort labels. */
body .blog-article-page .blog-prose .article-table-shell :is(th, td),
body .blog-article-page .blog-prose .article-table-shell :is(th, td) * {
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: none;
}

body .blog-article-page .blog-prose .article-table-shell th {
  padding: 0;
}

body .blog-article-page .blog-prose .article-table-sort {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  min-width: 0;
  min-height: 48px;
  padding: 12px 10px;
  line-height: 1.4;
  white-space: normal;
}

/* Preserve the existing cards through 760px; fit tables when cards end. */
@media (min-width: 761px) {
  body .blog-article-page .blog-prose .article-table-shell:is([data-columns="2"], [data-columns="3"], [data-columns="4"]) table {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    table-layout: fixed;
  }

  body .blog-article-page .blog-prose .article-table-shell td {
    padding: 12px 10px;
  }

  body .blog-article-page .blog-prose .article-table-shell[data-columns="3"] :is(th, td):nth-child(1) { width: 24%; }
  body .blog-article-page .blog-prose .article-table-shell[data-columns="3"] :is(th, td):nth-child(2),
  body .blog-article-page .blog-prose .article-table-shell[data-columns="3"] :is(th, td):nth-child(3) { width: 38%; }

  body .blog-article-page .blog-prose .article-table-shell[data-columns="4"] :is(th, td):nth-child(1) { width: 22%; }
  body .blog-article-page .blog-prose .article-table-shell[data-columns="4"] :is(th, td):nth-child(2) { width: 20%; }
  body .blog-article-page .blog-prose .article-table-shell[data-columns="4"] :is(th, td):nth-child(3) { width: 35%; }
  body .blog-article-page .blog-prose .article-table-shell[data-columns="4"] :is(th, td):nth-child(4) { width: 23%; }
}