.view-display-id-map_inline {
  padding: 40px 0;
  container-name: header;
  container-type: inline-size;

  & .view-header {
    display: none;
    gap: 10px;
    align-items: center;
    padding: 24px 40px;
    background: var(--color-driftwood);
    border: 3px solid var(--color-forest);
    margin-bottom: 24px;
    color: var(--color-black);
    border-radius: 40px 0;
    font-size: 16px;

    &>div {
      font-family: 'Laila', sans-serif;
      font-size: 40px;
      white-space: nowrap;
      padding-right: 24px;
      border-right: 1px solid var(--color-cedar);

      & h2 {
        font-size: 48px;
        color: var(--color-ember);
      }
    }
    @container header (min-width: 600px) {
      display: flex;
    }  
  }

}



[data-component-id="kackaamin:interactive_map_inline"] {

  container-name: main;
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;

  & .interactive-map-inline__canvas {
    display: none;
  }

  & .interactive-map-inline__canvas,
  & .interactive-map-inline__content {
    width: 100%;
    aspect-ratio: 868/657;
  }

  & .interactive-map-inline__canvas {
    border-radius: 13.23px;
    border: 3px solid var(--color-forest);
    position: relative;

    & img {
      width: 100%;
      height: 100%;
      aspect-ratio: 868/657;
      border-radius: 13.23px;
    }
  }

  & .interactive-map-inline__content {
    position: absolute;
    top: 0;
    left: 0;

    & .map-pin {
      position: absolute;
      top: var(--pin-top, 50%);
      left: var(--pin-left, 50%);
      cursor: pointer;
      width: 4.26cqw;
      height: 5.3cqw;

      & .map-pin__shape {
        width: 100%;
        height: 100%;
        background: var(--color-forest);

        --pin-mask: url("/themes/custom/kackaamin/images/assets/map-pin-mask.svg");
        -webkit-mask-image: var(--pin-mask);
        mask-image: var(--pin-mask);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: center;
        mask-position: center;
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;

        display: flex;
        justify-content: center;
        padding-top: 3px;

        & img,
        & span {
          width: 3.45cqw;
          height: 3.45cqw;
          object-fit: cover;
        }
      }

      &[data-active="true"] {
        width: 48px;
        height: 60px;

        & .map-pin__shape {
          background: var(--color-cedar);

          & img,
          & span {
            width: 40px;
            height: 40px;
          }
        }
      }

      & .pin-popup {
        box-shadow: 0px 8px 12px 6px rgba(0, 0, 0, 0.15);
        filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.3));
        position: absolute;
        background: var(--color-forest);
        border-radius: 8px;
        padding: 1.38cqw;
        width: 27.65cqw;
        display: flex;
        flex-direction: column;
        gap: 4px;
        z-index: 10;

        & .pin-popup__banner img {
          margin-bottom: 8px;
          aspect-ratio: 216/130;
          border-radius: 20px 0;
        }

        & .pin-popup__title {
          color: var(--text-primary);
        }

        & .pin-popup__body {
          color: var(--text-secondary);
          margin-bottom: 4px;
        }

        & .pin-popup__links {
          display: flex;
          flex-direction: column;
          gap: 20px;
        }

        & .btn {
          width: 100%;
          padding: 10px 20px;
        }
      }
    }

    /* Universal tip base */
    & .pin .pin-popup::after {
      content: '';
      position: absolute;
      background: var(--color-forest);
    }

    /* Pins 1, 3, 5: open upward — tip on bottom */
    & .pin-1,
    & .pin-3,
    & .pin-5 {
      & .pin-popup {
        bottom: calc(100% + 14px);
        left: 50%;
        transform: translateX(-50%);

        &::after {
          bottom: -6px;
          left: 50%;
          transform: translateX(-50%);
          width: 12px;
          height: 6px;
          clip-path: polygon(0 0, 100% 0, 50% 100%);
        }
      }
    }

    /* Pins 2, 4: open rightward — tip on left */
    & .pin-2,
    & .pin-4 {
      & .pin-popup {
        left: calc(100% + 14px);
        top: 50%;
        transform: translateY(-50%);

        &::after {
          left: -6px;
          top: 50%;
          transform: translateY(-50%);
          width: 6px;
          height: 12px;
          clip-path: polygon(100% 0, 100% 100%, 0 50%);
        }
      }
    }

    /* Pin 6: open downward — tip on top */
    & .pin-6 {
      & .pin-popup {
        top: calc(100% + 14px);
        left: 50%;
        transform: translateX(-50%);

        &::after {
          top: -6px;
          left: 50%;
          transform: translateX(-50%);
          width: 12px;
          height: 6px;
          clip-path: polygon(50% 0, 100% 100%, 0 100%);
        }
      }
    }

    /* Pins 7–9: open leftward — tip on right */
    & .pin-7,
    & .pin-8,
    & .pin-9 {
      & .pin-popup {
        right: calc(100% + 14px);
        top: 50%;
        transform: translateY(-50%);

        &::after {
          right: -6px;
          top: 50%;
          transform: translateY(-50%);
          width: 6px;
          height: 12px;
          clip-path: polygon(0 0, 0 100%, 100% 50%);
        }
      }
    }

    & .pin-1 {
      --pin-top: 66.93%;
      --pin-left: 11.56%;
    }

    & .pin-2 {
      --pin-top: 48.51%;
      --pin-left: 27.76%;
    }

    & .pin-3 {
      --pin-top: 79.24%;
      --pin-left: 33.95%;
    }

    & .pin-4 {
      --pin-top: 56.47%;
      --pin-left: 51.15%;
    }

    & .pin-5 {
      --pin-top: 70.32%;
      --pin-left: 58.18%;
    }

    & .pin-6 {
      --pin-top: 19.72%;
      --pin-left: 61.69%;
    }

    & .pin-7 {
      --pin-top: 50.16%;
      --pin-left: 76.46%;
    }

    & .pin-8 {
      --pin-top: 62.64%;
      --pin-left: 90.40%;
    }

    & .pin-9 {
      --pin-top: 41.49%;
      --pin-left: 92.47%;
    }
  }

  & .map-fullscreen-btn {
    position: absolute;
    top: 90.87%;
    left: 93.09%;

    & button {
      width: 4.61cqw;
      height: 4.61cqw;
      padding: 1.15cqw;
      background: var(--color-driftwood);
      color: var(--color-black);
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 100%;
      cursor: pointer;
    }
  }


  @container main (min-width: 600px) {
    & .interactive-map-inline__canvas {
      display: block;
    }

    & .map__mobile-cover {
      display: none;
    }
  }

}