/* Structural baseline for hs/text-columns. Visual styling in theme. */

.wp-block-hs-text-columns .wp-block-core-list .block-editor-block-list__layout,
.wp-block-hs-text-columns .wp-block-list .block-editor-block-list__layout {
  min-height: auto !important;
  padding: 0 !important;
}

.wp-block-hs-text-columns .wp-block-core-list li,
.wp-block-hs-text-columns .wp-block-list li {
  margin-bottom: 0.5rem;
  padding: 0;
}

.wp-block-hs-text-columns .hs-text-columns__content .block-editor-block-list__layout {
  min-height: auto !important;
  padding: 0 !important;
}

.block-editor-writing-flow .hs-text-columns .hs-buttons,
.editor-styles-wrapper .hs-text-columns .hs-buttons {
  display: flex;
}

.hs-text-columns {
  align-items: flex-start;
  display: flex;
  gap: 3rem;
  justify-content: stretch;
  margin: 2em auto;
  max-width: 1200px;
}

.hs-text-columns__content,
.hs-text-columns__heading {
  align-items: flex-start;
  margin-top: 0;
  padding-top: 0;
}

.hs-text-columns__heading {
  align-items: flex-start;
  display: flex;
  flex: 0 0 40%;
  max-width: 40%;
}

.hs-text-columns__heading h2 {
  display: block;
  margin: 0 !important;
  padding: 0 !important;
}

.hs-text-columns__content {
  align-items: flex-start;
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  justify-content: flex-start;
  max-width: 60%;
}

.hs-text-columns__content .wp-block-list,
.hs-text-columns__content .wp-block-paragraph {
  margin-bottom: 1rem;
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.hs-text-columns__content .wp-block-list li {
  margin-bottom: 0.5rem;
}

.hs-text-columns__content .hs-buttons,
.hs-text-columns__content .wp-block-hs-buttons {
  margin-bottom: 1rem;
  margin-top: 1rem;
}

.hs-text-columns .wp-block-heading,
.hs-text-columns h2,
.hs-text-columns__content .wp-block-list,
.hs-text-columns__content .wp-block-paragraph,
.hs-text-columns__content > :first-child,
.hs-text-columns__heading .wp-block-heading,
.hs-text-columns__heading h2 {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

@media (max-width: 900px) {
  .hs-text-columns {
    flex-direction: column;
    gap: 1.3rem;
    max-width: 98vw;
    padding: 0 1vw;
  }

  .hs-text-columns__content,
  .hs-text-columns__heading {
    align-items: flex-start;
    flex: 1 1 100%;
    max-width: 100%;
  }

  .hs-text-columns__buttons {
    justify-content: flex-start;
  }
}