/*
 * What's included as cards (plan-included-cards-bnr): on white, the heading and a line beside a link to every
 * service, then what the plan includes as warm cream cards, each with a circled tick, and a closing line with a
 * link to get in touch (Foundation).
 */

.wp-block-group.plan-pattern.plan-pattern--included-cards-bnr {
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: var(--white);
  color: var(--text);
}

.plan-pattern--included-cards-bnr .wp-block-group__inner-container {
  display: contents;
}

.plan-pattern--included-cards-bnr .plan-pattern__included-cards-bnr-inner {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin: 0;
  padding: 64px clamp(24px, 4.4vw, 56px);
}

/* The heading and line, with the link to every service on the right */

.plan-pattern--included-cards-bnr .plan-pattern__included-cards-bnr-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px 40px;
}

.plan-pattern--included-cards-bnr .plan-pattern__included-cards-bnr-intro {
  display: flex;
  flex: 1 1 520px;
  flex-direction: column;
  gap: 10px;
}

.plan-pattern--included-cards-bnr .plan-pattern__included-cards-bnr-heading {
  margin: 0;
  color: #0d3d39;
  font-family: "DM Serif Display", Georgia, serif;
  font-size: clamp(32px, 4vw, 40px);
  font-weight: 400;
  line-height: 1.1;
  text-transform: none;
}

.plan-pattern--included-cards-bnr .plan-pattern__included-cards-bnr-text {
  margin: 0;
  color: var(--text-muted);
  font-size: 17px;
}

.plan-pattern--included-cards-bnr .plan-pattern__included-cards-bnr-all {
  margin: 0;
}

.plan-pattern--included-cards-bnr a {
  color: var(--teal-darker);
  font-weight: 600;
}

.plan-pattern--included-cards-bnr a:hover,
.plan-pattern--included-cards-bnr a:focus-visible {
  color: #0d3d39;
}

/* The cards: up to three across, each with a circled tick, so six cards always make even rows */

.plan-pattern--included-cards-bnr .plan-pattern__included-cards-bnr-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(max(min(320px, 100%), calc((100% - 32px) / 3)), 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.plan-pattern--included-cards-bnr .plan-pattern__included-cards-bnr-list li {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 24px;
  border-radius: 14px;
  background: #f4f3ee;
  color: #0d3d39;
  font-size: 17px;
  font-weight: 500;
}

.plan-pattern--included-cards-bnr .plan-pattern__included-cards-bnr-list li::before {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  background: var(--teal-darker);
  content: "";
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M7.5 12.5l3 3 6-6.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M7.5 12.5l3 3 6-6.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.plan-pattern--included-cards-bnr .plan-pattern__included-cards-bnr-more {
  margin: 0;
  color: var(--text-muted);
  font-size: 15px;
}

/* Phones */

@media (max-width: 700px) {
  .plan-pattern--included-cards-bnr .plan-pattern__included-cards-bnr-inner {
    padding: 44px 16px;
  }
}