/* Comparison Table Style for Group Block */

/* Wrapper that enables horizontal scroll on smaller screens */
.editor-styles-wrapper .wp-block-group.is-style-compare-table > .wp-block-group__inner-container {
  --ct-col-first-min: 21.6rem;         /* first column min width */
  --ct-col-min:       10rem;         /* other columns min width */
  --ct-gap:           0.25rem;

  overflow-x: auto;
  padding: 0rem;
  background: var(--wp--preset--color--background-white, #fff);
  width: fit-content;
}

/* Each row is a Group block */
.editor-styles-wrapper .wp-block-group.is-style-compare-table > .wp-block-group__inner-container > .wp-block-group > .wp-block-group__inner-container {
  display: grid;
  grid-template-columns: minmax(var(--ct-col-first-min), 1fr)
                         repeat(5, minmax(var(--ct-col-min), 1fr));
    align-items: stretch;
    gap: var(--ct-gap);
    padding: .75rem 1rem;
    justify-items: stretch;
    justify-content: center;
    align-content: stretch;
}

/* Cells: use Paragraph/Heading blocks inside each row group */
.editor-styles-wrapper .wp-block-group.is-style-compare-table > .wp-block-group__inner-container > .wp-block-group > * {
  margin: 0; /* remove block default margins so it looks tabular */
}

/* Sticky first "cell" (the first child block in the row) */
.editor-styles-wrapper .wp-block-group.is-style-compare-table > .wp-block-group__inner-container > .wp-block-group > .wp-block-group__inner-container > *:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  background: inherit;   /* keeps row background under sticky cell */
}

/* Heading row */
.editor-styles-wrapper .wp-block-group.is-style-compare-table > .wp-block-group__inner-container > .wp-block-group.is-style-row-heading {
  position: sticky;
  top: 0;
  z-index: 3;
  background-color: #DDD7D0;
  font-size: .95rem;
  text-transform: uppercase;
  letter-spacing: .02em;
  font-weight: 700;
  text-align: center;
}

/* Section row (group labels) */
.editor-styles-wrapper .wp-block-group.is-style-compare-table > .wp-block-group__inner-container > .wp-block-group.is-style-row-section{
  background: var(--wp--preset--color--background-cream, #EEEAE5);
}

/* Section row white borders between cells */

.editor-styles-wrapper .wp-block-group.is-style-compare-table > .wp-block-group__inner-container > .wp-block-group.is-style-row-section p:not(:first-child) {
  position:relative;
  height:100%;
  width:100%;
}

.editor-styles-wrapper .wp-block-group.is-style-row-heading > .wp-block-group__inner-container > *:not(:first-child) {
  position:relative;
  align-self:center;
}

/* Alt row */
.editor-styles-wrapper .wp-block-group.is-style-compare-table > .wp-block-group__inner-container >  .wp-block-group.is-style-row-alt {
  background: #fff;
}

/* Center row text */

.editor-styles-wrapper .wp-block-group.is-style-compare-table > .wp-block-group__inner-container > .wp-block-group p:not(:first-child) {
    text-align: center;
}

/* Final Total row */
.editor-styles-wrapper .wp-block-group.is-style-compare-table > .wp-block-group__inner-container > .wp-block-group.is-style-row-section:last-child {
    background-color: #fff;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
}

/* Make text breathable on smaller screens */
@media (max-width: 782px) {
  .editor-styles-wrapper .wp-block-group.is-style-compare-table > .wp-block-group__inner-container > .wp-block-group > .wp-block-group__inner-container {
    grid-template-columns: minmax(var(--ct-col-first-min), 12rem)
                           repeat(5, minmax(9rem, 1fr));
    font-size: .95rem;
  }
}