/**
 * Bordered section – generic wrapper (layout + background).
 * Content inside .bordered-section-inner is section-specific.
 */
:root {
  --bordered-section-border: 1px dotted rgba(212, 215, 220, 1);
  --bordered-section-top-row: 2.5rem;
  --bordered-section-bottom-row: 2.5rem;
}

.bordered-section,
.bordered-section * {
  box-sizing: border-box;
}

.bordered-section {
  background-color: var(--bordered-section-bg, #f7f7f7);
  display: grid;
  grid-template-columns: 2.5rem 1fr 2.5rem;
  grid-template-rows: var(--bordered-section-top-row) 1fr var(
      --bordered-section-bottom-row
    );
  width: 100%;
}

/* Connect two bordered sections one below the other: no gap, no double border */
.bordered-section--connect-above {
  grid-template-rows: 0 1fr var(--bordered-section-bottom-row);
}

.bordered-section--connect-above .bordered-section-cell--top-left,
.bordered-section--connect-above .bordered-section-cell--top-center,
.bordered-section--connect-above .bordered-section-cell--top-right {
  border-bottom: none;
  overflow: hidden;
}

/* One visible border between connected sections: draw it on the upper section’s bottom edge */
.bordered-section--connect-below {
  grid-template-rows: var(--bordered-section-top-row) 1fr 0;
  border-bottom: var(--bordered-section-border);
}

.bordered-section--connect-below .bordered-section-cell--bottom-left,
.bordered-section--connect-below .bordered-section-cell--bottom-center,
.bordered-section--connect-below .bordered-section-cell--bottom-right {
  overflow: hidden;
  min-height: 0;
}

.bordered-section-cell {
  background-color: var(--bordered-section-bg, #f7f7f7);
  z-index: 1;
}

.bordered-section-cell--top-left {
  grid-column: 1/2;
  grid-row: 1/2;
  border-bottom: var(--bordered-section-border);
}

.bordered-section-cell--top-center {
  grid-column: 2/3;
  grid-row: 1/2;
  border-bottom: var(--bordered-section-border);
}

.bordered-section-cell--top-right {
  grid-column: 3/4;
  grid-row: 1/2;
  border-bottom: var(--bordered-section-border);
}

.bordered-section-cell--middle-left {
  grid-column: 1/2;
  grid-row: 2/3;
  border-right: var(--bordered-section-border);
}

.bordered-section-cell--middle-right {
  grid-column: 3/4;
  grid-row: 2/3;
  border-left: var(--bordered-section-border);
}

.bordered-section-cell--bottom-left {
  grid-column: 1/2;
  grid-row: 3/4;
  border-top: var(--bordered-section-border);
}

.bordered-section-cell--bottom-center {
  grid-column: 2/3;
  grid-row: 3/4;
  border-top: var(--bordered-section-border);
}

.bordered-section-cell--bottom-right {
  grid-column: 3/4;
  grid-row: 3/4;
  border-top: var(--bordered-section-border);
}

.bordered-section-inner {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
  width: 100%;
  text-align: left;
  padding: 2.5rem 0;
  position: relative;
  z-index: 1;
}

@media (min-width: 1600px) {
  .bordered-section-inner {
    padding: 6rem 0;
  }
}

/* Inner background from inner_bg_color arg; default #fff */
.bordered-section .bordered-section-inner {
  background-color: var(--bordered-section-inner-bg, #fff);
}

/* Optional: remove all padding so inner takes full space (e.g. inner_class => ' p-0') */
.bordered-section-inner.p-0 {
  padding: 0;
}

@media (max-width: 1350px) {
  .bordered-section {
    grid-template-columns: 1rem 1fr 1rem;
  }
}

@media (max-width: 1024px) {
  .bordered-section {
    grid-template-rows: 1.25rem 1fr 1.25rem;
  }

  .bordered-section--connect-above {
    grid-template-rows: 0 1fr 1.25rem;
  }

  .bordered-section--connect-below {
    grid-template-rows: 2rem 1fr 0;
  }
}

@media (max-width: 768px) {
  .bordered-section {
    display: block;
  }

  .bordered-section-cell {
    display: none;
  }

  .bordered-section-inner {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }

  .bordered-section-inner.p-0 {
    padding: 0;
  }
}