/* ==========================================================================
   COMPONENT: Shared content patterns
   Section headers and list styles used by more than one page type.
   ========================================================================== */

/* Section header: heading block on the left, short text or link on the right */
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px 48px;
  margin-bottom: 44px;

  h2 {
    margin: 0;
    font-size: clamp(2rem, 3.8vw, 3rem);
    max-width: 18ch;
  }

  > p {
    max-width: 42ch;
    margin: 0;
    color: var(--text-muted);
  }
}

/* Pill links (cities, services) */
.chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;

  a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    font-size: 0.92rem;
    font-weight: 600;
    text-decoration: none;
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 99px;
    transition: background-color 0.2s ease, border-color 0.2s ease;

    &::before {
      content: "\F3E8";
      font-family: "bootstrap-icons";
      font-size: 0.8rem;
      color: var(--primary-strong);
    }

    &:hover {
      background: var(--primary-soft);
      border-color: var(--primary-color);
    }
  }
}

.chip-list--light a {
  color: var(--text-on-dark);
  background: color-mix(in srgb, var(--secondary-color) 55%, transparent);
  border-color: var(--border-on-dark);
  backdrop-filter: blur(6px);

  &::before {
    color: var(--primary-color);
  }

  &:hover {
    color: var(--secondary-color);
    background: var(--primary-color);
    border-color: var(--primary-color);

    &::before {
      color: var(--secondary-color);
    }
  }
}

/* Check list: short items with a check icon */
.check-list {
  margin: 20px 0 0;
  padding: 0;
  list-style: none;

  li {
    position: relative;
    padding: 10px 0 10px 34px;
    border-bottom: 1px solid var(--border-color);

    &::before {
      content: "\F26B";
      position: absolute;
      left: 0;
      top: 10px;
      font-family: "bootstrap-icons";
      font-size: 1.2rem;
      line-height: 1.4;
      color: var(--primary-strong);
    }
  }
}

/* Check cards: list items shown as a 2 x 2 card grid */
.check-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;

  li {
    position: relative;
    padding: 24px 22px 22px 60px;
    background: white;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);

    &::before {
      content: "\F26A";
      position: absolute;
      left: 20px;
      top: 22px;
      font-family: "bootstrap-icons";
      font-size: 1.4rem;
      line-height: 1;
      color: var(--primary-strong);
    }
  }
}

/* Simple bullet list with a diamond marker */
.bullet-list {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;

  li {
    position: relative;
    padding: 6px 0 6px 24px;

    &::before {
      content: "";
      position: absolute;
      left: 2px;
      top: 0.95em;
      width: 9px;
      height: 9px;
      background: var(--primary-color);
      clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
    }
  }
}

.bullet-list--light li {
  color: var(--text-on-dark-muted);
}

/* Numbered steps (CSS counter) */
.step-list {
  counter-reset: step;
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;

  li {
    counter-increment: step;
    position: relative;
    padding: 20px 22px 20px 78px;
    background: white;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);

    &::before {
      content: counter(step, decimal-leading-zero);
      position: absolute;
      left: 22px;
      top: 50%;
      transform: translateY(-50%);
      font-family: var(--font-heading);
      font-size: 1.5rem;
      font-weight: 800;
      color: var(--primary-strong);
    }
  }
}

/* Three numbered cards */
.numbered-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.numbered-card {
  padding: 30px 28px;
  background: white;
  border-radius: var(--radius-lg);
  border-top: 4px solid var(--primary-color);
  box-shadow: 0 10px 30px -22px color-mix(in srgb, var(--secondary-color) 60%, transparent);

  .numbered-card-num {
    display: block;
    margin-bottom: 14px;
    font-family: var(--font-heading);
    font-size: 2.2rem;
    font-weight: 800;
    line-height: 1;
    color: color-mix(in srgb, var(--primary-color) 60%, white);
  }

  h3 {
    font-size: 1.2rem;
  }

  p {
    margin: 0;
    color: var(--text-muted);
  }
}

@media (max-width: 900px) {
  .section-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .numbered-cards {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .check-cards {
    grid-template-columns: 1fr;
  }
}

/* Index page header (Tips and Portfolio pages) */
.index-head {
  padding-block: clamp(56px, 7vw, 96px) clamp(36px, 5vw, 56px);

  .index-head-inner > * {
    max-width: 760px;
  }

  h1 {
    font-size: clamp(2.4rem, 5vw, 3.8rem);
  }

  p:last-child {
    margin: 0;
    font-size: 1.15rem;
    color: var(--text-muted);
  }
}

/* Closing copy block on the Services hub, Service Areas hub and Contact pages */
.page-copy {
  padding-block: 0 var(--section-space);

  .page-copy-inner > * {
    max-width: 760px;
  }

  h2 {
    font-size: clamp(1.8rem, 3.2vw, 2.4rem);
  }

  p {
    font-size: 1.08rem;
    color: var(--text-muted);
  }

  p:last-child {
    margin-bottom: 0;
  }

  a {
    color: var(--primary-strong);
    font-weight: 600;
  }
}