[data-type="cavalree/section"i][data-variant="interactive-map"i] {
	--c-box--padding--block: 4rem;
	--c-box--padding--inline: clamp(0rem, -6rem + 20vw, 2rem);
	--c-box--gap: 1rem;

	& [data-type="cavalree/text"i][data-variant="display"] {
    --c-text--size: clamp(2.75rem, 1.75rem + 3.3333vw, 3.75rem);
	}

  .cavalree-map-wrap {
    position: relative;
    max-inline-size: 100%;
  }

  .cavalree-svg-overlay {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
  }

  .cavalree-svg-anchor {
    position: absolute;
  }

  & [data-type="cavalree/map"i] {
    fill: currentcolor;

    & [data-target] {
      cursor: pointer;
      pointer-events: bounding-box;

			transition-duration: 125ms;
			transition-timing-function: ease;
			transition-property: all;

      &:is(:hover, :focus) {
        fill: var(--c--color--bluebird);
        outline-color: currentcolor;
        outline-style: solid;
        outline-width: 0px;
      }

      &[data-target="barn"i] {
        anchor-name: --barn;

        .cavalree-map-wrap:has(&:hover, &:focus) ~ #barn {
					opacity: 1;
          visibility: visible;
        }
      }

      &[data-target="groomsQuarters"i] {
        anchor-name: --groomsQuarters;

        .cavalree-map-wrap:has(&:hover, &:focus) ~ #groomsQuarters {
					opacity: 1;
          visibility: visible;
        }
      }

      &[data-target="farmhouse"i] {
        anchor-name: --farmhouse;

        .cavalree-map-wrap:has(&:hover, &:focus) ~ #farmhouse {
					opacity: 1;
          visibility: visible;
        }
      }

      &[data-target="wildflowers"i] {
        anchor-name: --wildflowers;

        .cavalree-map-wrap:has(&:hover, &:focus) ~ #wildflowers {
					opacity: 1;
          visibility: visible;
        }
      }

      &[data-target="ceremonySite"i] {
        anchor-name: --ceremonySite;

        .cavalree-map-wrap:has(&:hover, &:focus) ~ #ceremonySite {
					opacity: 1;
          visibility: visible;
        }
      }

      &[data-target="vines"i] {
        anchor-name: --vines;

        .cavalree-map-wrap:has(&:hover, &:focus) ~ #vines {
					opacity: 1;
          visibility: visible;
        }
      }

    }
  }

  & [data-type="cavalree/group"i][id] {
    --c-box--border--size: 0px;
    --c-box--color--canvas: var(--c--color--sunflower);
    --c-box--color--text: var(--c--color--midnight);
    --c-box--gap: 0px;

    inline-size: clamp(20rem, 100cqi, 25rem);
		min-block-size: 0px;
		opacity: 0;
    position: absolute;
    position-try-fallbacks: flip-inline;
		transition-duration: 125ms;
		transition-timing-function: ease;
		transition-property: all;
    visibility: hidden;

		& [data-type="cavalree/media"i] {
			display: none;
		}

    body.editor-styles-wrapper & {
      display: revert-layer;
      position: revert-layer;
    }

    &#barn {
      position-anchor: --barn;
      position-area: center end;
    }

    &#groomsQuarters {
      position-anchor: --groomsQuarters;
      position-area: center end;
    }

    &#farmhouse {
      position-anchor: --farmhouse;
      position-area: center start;
    }

    &#wildflowers {
      position-anchor: --wildflowers;
      position-area: center end;
    }

    &#ceremonySite {
      position-anchor: --ceremonySite;
      position-area: center start;
    }

    &#vines {
      position-anchor: --vines;
      position-area: center start;
    }

    .page &::after {
      border-color: var(--c--color--white);
      border-width: 1.5px;
      border-style: solid;
      content: "";
      inset: 0.5rem;
      position: absolute;
    }

    body.editor-styles-wrapper &::after {
      content: none;
    }

    & [data-type="cavalree/group"i] {
      --c-box--padding--block: 2rem;
      --c-box--gap: 0.75rem;
    }

    & [data-type="cavalree/media"i] {
      --c-frame--aspect-ratio: calc(4 / 3);
    }

    & [data-type="cavalree/text"i][data-variant="display"i] {
      --c-text--size: 2rem;
    }

    & [data-type="cavalree/text"i][data-variant="mark"i] {
      --c-text--size: 0.75rem;
    }
  }
}