/*
 * GB HTML Blocks for Advanced Custom Fields - section component
 *
 * Every colour and size can be overridden from the theme by setting these
 * custom properties (for example on :root). Defaults are used otherwise.
 *
 *   --gb-section-width              max content width           (1200px)
 *   --gb-section-padding            side gap on small screens   (20px)
 *   --gb-section-spacing            space between sections      (80px)
 *   --gb-section-color              headings colour             (inherit)
 *   --gb-section-color-muted        body text colour            (inherit)
 *   --gb-section-accent             links and button colour     (#222222)
 *   --gb-section-accent-contrast    button text on hover        (#ffffff)
 *   --gb-section-line               line before the title       (accent)
 *   --gb-section-transition         hover transition            (0.2s ease)
 */

/* --------------------------------------------------------------
 * Section
 * -------------------------------------------------------------- */

.gb-section {
  width: min(calc(100% - (2 * var(--gb-section-padding, 20px))),
      var(--gb-section-width, 1200px));
  margin-inline: auto;
  padding-block: 0 var(--gb-section-spacing, 80px);
}

.gb-section:last-of-type {
  padding-block: 0;
}

/* --------------------------------------------------------------
 * Section title
 * -------------------------------------------------------------- */

.gb-section__title {
  display: flex;
  align-items: center;
  gap: 18px;
  max-width: 900px;
  margin-bottom: 32px;
  color: var(--gb-section-color, inherit);
}

.gb-section__title::before {
  flex: 0 0 36px;
  width: 36px;
  height: 2px;
  background-color: var(--gb-section-line, var(--gb-section-accent, #222222));
  content: '';
}

/* --------------------------------------------------------------
 * Shared text content
 * -------------------------------------------------------------- */

.gb-section__content,
.gb-section__column-content {
  color: var(--gb-section-color-muted, inherit);
}

.gb-section__content p:last-child,
.gb-section__column-content p:last-child {
  margin-bottom: 0;
}

.gb-section__content ul,
.gb-section__content ol,
.gb-section__column-content ul,
.gb-section__column-content ol {
  margin: 0 0 1em 1.5em;
}

.gb-section__content ul,
.gb-section__column-content ul {
  list-style: disc;
}

.gb-section__content ol,
.gb-section__column-content ol {
  list-style: decimal;
}

.gb-section__content li + li,
.gb-section__column-content li + li {
  margin-top: 0.35em;
}

.gb-section__content a,
.gb-section__column-content a {
  color: var(--gb-section-accent, #222222);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.gb-section__content a:hover,
.gb-section__column-content a:hover {
  color: var(--gb-section-color, inherit);
}

/* WordPress image alignment */

.gb-section__content img.alignleft,
.gb-section__column-content img.alignleft {
  float: left;
  max-width: 50%;
  height: auto;
  margin: 0 32px 20px 0;
}

.gb-section__content img.alignright,
.gb-section__column-content img.alignright {
  float: right;
  max-width: 50%;
  height: auto;
  margin: 0 0 20px 32px;
}

.gb-section__content img.aligncenter,
.gb-section__column-content img.aligncenter {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 28px auto;
}

.gb-section__content img.alignnone,
.gb-section__column-content img.alignnone {
  max-width: 100%;
  height: auto;
}

/* --------------------------------------------------------------
 * Section introduction
 * -------------------------------------------------------------- */

.gb-section__content {
  width: 100%;
  margin-bottom: 48px;
}

/* --------------------------------------------------------------
 * Columns
 * -------------------------------------------------------------- */

.gb-section__columns {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: clamp(32px, 5vw, 80px);
}

/* Desktop: "Reverse columns" (reverse_columns). */
@media (min-width: 768px) {
  .gb-section__columns--desktop-reversed {
    flex-direction: row-reverse;
  }
}

/* --------------------------------------------------------------
 * Column
 * -------------------------------------------------------------- */

.gb-section__column {
  flex: 1 1 0;
  min-width: 0;
}

.gb-section__column:only-child {
  flex-basis: 100%;
}

.gb-section__column--left {
  text-align: left;
}

.gb-section__column--center {
  text-align: center;
}

.gb-section__column--right {
  text-align: right;
}

.gb-section__image {
  width: 100%;
  height: auto;
  margin-bottom: 28px;
}

.gb-section__column--center > .gb-section__image {
  margin-inline: auto;
}

.gb-section__column--right > .gb-section__image {
  margin-left: auto;
}

.gb-section__column-title {
  margin-bottom: 18px;
  color: var(--gb-section-color, inherit);
}

/* --------------------------------------------------------------
 * Buttons
 * -------------------------------------------------------------- */

.gb-section__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 28px;
  padding: 11px 22px;
  border: 1px solid var(--gb-section-accent, #222222);
  color: var(--gb-section-accent, #222222);
  background-color: transparent;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  transition:
    color var(--gb-section-transition, 0.2s ease),
    background-color var(--gb-section-transition, 0.2s ease),
    border-color var(--gb-section-transition, 0.2s ease);
}

.gb-section__button:hover {
  border-color: var(--gb-section-accent, #222222);
  color: var(--gb-section-accent-contrast, #ffffff);
  background-color: var(--gb-section-accent, #222222);
}

/* --------------------------------------------------------------
 * Mobile
 * -------------------------------------------------------------- */

@media (max-width: 767px) {
  .gb-section {
    padding-block: var(--gb-section-spacing, 80px);
  }

  .gb-section__content {
    margin-bottom: 36px;
  }

  .gb-section__columns {
    flex-direction: column;
    gap: 48px;
  }

  .gb-section__columns--reversed {
    flex-direction: column-reverse;
  }

  .gb-section__column {
    flex-basis: 100%;
    width: 100%;
  }

  .gb-section__image {
    margin-bottom: 22px;
  }

  .gb-section__content img.alignleft,
  .gb-section__content img.alignright,
  .gb-section__column-content img.alignleft,
  .gb-section__column-content img.alignright {
    float: none;
    display: block;
    max-width: 100%;
    margin: 28px 0;
  }

  .gb-section__content img.aligncenter,
  .gb-section__column-content img.aligncenter {
    margin: 28px auto;
  }
}

/* --------------------------------------------------------------
 * Very small screens
 * -------------------------------------------------------------- */

@media (max-width: 480px) {
  .gb-section__title {
    gap: 14px;
    margin-bottom: 24px;
  }

  .gb-section__title::before {
    flex-basis: 28px;
    width: 28px;
  }

  .gb-section__content {
    margin-bottom: 30px;
  }

  .gb-section__columns {
    gap: 40px;
  }

  .gb-section__button {
    width: 100%;
  }
}