/*
  Adapted from /preview/assets/css/components/coverage.css. The region
  list's pin icons were inline <svg> next to each place name; each
  <li> is now a real list-item block, so — same reasoning as
  checklist.css — the pin is drawn with a ::before CSS mask instead of
  embedded in the rich text. The map itself has no editable content
  (see patterns/coverage.php) so it stays one Custom HTML block,
  unchanged from the static build. `.coverage__list.wp-block-list` is
  the same defensive doubled-specificity reset checklist.css uses
  against core/list's own class-based defaults.
*/

.coverage__grid {
  display: grid;
  gap: var(--wp--preset--spacing--70);
  align-items: center;
}

.coverage__content {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--30);
  max-width: 46ch;
}

.coverage__title {
  font-size: var(--wp--preset--font-size--xl);
  text-wrap: balance;
}

.coverage__text {
  color: var(--wp--preset--color--graphite);
  font-size: var(--wp--preset--font-size--base);
  line-height: 1.6;
}

/* Map + list */
.coverage__visual {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--50);
}

.coverage__map-wrap {
  position: relative;
  width: 100%;
  max-width: 360px;
  margin-inline: auto;
}

.coverage__map-wrap svg {
  width: 100%;
  height: auto;
}

.coverage__list.wp-block-list {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--30);
  flex-shrink: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

.coverage__list-item {
  position: relative;
  margin: 0;
  padding-left: 26px;
  min-height: 18px;
  display: block;
  font-weight: 700;
  color: var(--wp--preset--color--near-black);
}

.coverage__list-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  background-color: var(--c-red-solid);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.3-7-11.6A7 7 0 0 1 19 9.4C19 14.7 12 21 12 21z'%3E%3C/path%3E%3Ccircle cx='12' cy='9.4' r='2.4'%3E%3C/circle%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.3-7-11.6A7 7 0 0 1 19 9.4C19 14.7 12 21 12 21z'%3E%3C/path%3E%3Ccircle cx='12' cy='9.4' r='2.4'%3E%3C/circle%3E%3C/svg%3E") no-repeat center / contain;
}

@media (min-width: 640px) {
  .coverage__visual {
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }

  .coverage__map-wrap {
    margin-inline: 0;
  }

  .coverage__list.wp-block-list {
    flex-direction: column;
  }
}

@media (min-width: 1024px) {
  .coverage__grid {
    grid-template-columns: 0.8fr 1.2fr;
  }

  .coverage__visual {
    justify-content: flex-start;
  }
}