.skeleton-card-locator {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 1.5rem;
  background: #001C35;
  border-radius: 1rem;
  max-width: calc(var(--Layout-Page-Width, 90rem) - 2 * var(--Layout-Section-Margin-Horizontal-Padding, 4rem));
  width: 100%;
  box-sizing: border-box;

  @keyframes shimmer {
    0% {
      background-position: -600px 0;
    }
    100% {
      background-position: 600px 0;
    }
  }

  & .skeleton-block {
    background: linear-gradient(
      90deg,
      rgb(255 255 255 /6%),
      rgb(255 255 255 /12%),
      rgb(255 255 255 /6%)
    );
    background-size: 600px 100%;
    animation: shimmer 1.6s infinite linear;
    border-radius: 0.5rem;
  }

  & .skeleton-left {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    flex: 1;

    & .skeleton-title {
      height: 1.75rem;
      width: 70%;
    }

    & .skeleton-subtitle {
      height: 1rem;
      width: 85%;
    }

    & .skeleton-description {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
      margin-top: 0.5rem;

      & .skeleton-line {
        height: 1rem;
        width: 100%;
      }

      & .skeleton-line--short {
        width: 60%;
      }
    }

    & .skeleton-actions {
      display: flex;
      gap: 1rem;
      margin-top: 0.5rem;

      & .skeleton-btn {
        height: 2.75rem;
        width: 12rem;
        border-radius: 2rem;
      }
    }
  }

  & .skeleton-right {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    width: 33.625rem;
    flex-shrink: 0;

    & .skeleton-map {
      width: 100%;
      height: 18rem;
      border-radius: 0.75rem;
    }

    & .skeleton-link {
      height: 1rem;
      width: 10rem;
    }
  }
}

/* Header contact-tool: compact blue card (no map column) */
.skeleton-card-locator--header {
  flex-direction: column;
  align-items: stretch;
  gap: 1rem;
  padding: 1.5rem 1rem;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.skeleton-card-locator--header .skeleton-left {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
  min-width: 0;
}

.skeleton-card-locator--header .skeleton-title {
  height: 2.75rem;
  width: 100%;
  border-radius: 0.5rem;
}

.skeleton-card-locator--header .skeleton-subtitle {
  height: 1rem;
  width: 88%;
}

.skeleton-card-locator--header .skeleton-actions {
  display: flex;
  flex-direction: column;
  margin-top: 0.25rem;
}

.skeleton-card-locator--header .skeleton-btn-primary {
  height: 3rem;
  width: 100%;
  border-radius: 9999px;
  background: linear-gradient(
    90deg,
    rgb(255 255 255 / 18%),
    rgb(255 255 255 / 32%),
    rgb(255 255 255 / 18%)
  );
  background-size: 600px 100%;
  animation: shimmer 1.6s infinite linear;
}

.skeleton-card-locator--header .skeleton-link {
  height: 1rem;
  width: 11rem;
  align-self: center;
  margin-top: 0.25rem;
}

@media (width < 1200px) {
  .skeleton-card-locator:not(.skeleton-card-locator--header) {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
    padding: 1rem;
    max-width: 100%;
    width: 100%;
    overflow: hidden;
  }

  .skeleton-card-locator:not(.skeleton-card-locator--header) .skeleton-left {
    min-width: 0;
    width: 100%;
  }

  .skeleton-card-locator:not(.skeleton-card-locator--header) .skeleton-right {
    width: 100%;
    min-width: 0;
    flex-shrink: 1;
  }

  .skeleton-card-locator:not(.skeleton-card-locator--header) .skeleton-right .skeleton-map {
    height: 10rem;
  }

  .skeleton-card-locator:not(.skeleton-card-locator--header) .skeleton-left .skeleton-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .skeleton-card-locator:not(.skeleton-card-locator--header) .skeleton-left .skeleton-actions .skeleton-btn {
    width: 100%;
    max-width: 100%;
  }
}