.pt-0 {
  padding-top: 0 !important;
}
/* Details Grid (Contact Info + Hours) */
.details-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5);
  align-items: center;
}
.location-page {
  text-align: center;
}
.contact-info address {
  font-style: normal;
  margin-bottom: var(--s-3);
  line-height: 1.6;
}
.contact-info p {
  margin-bottom: var(--s-2);
}
.hours-info .hours-list-wrapper {
  padding: 0;
  margin: 0;
}
.map-placeholder {
  width: 100%;
  height: 0; /* This is key for the padding-top trick for aspect ratio */
  padding-top: 50%; /* This creates the aspect ratio (e.g., 2:1 for 50%) */
  background-color: var(--color-background-light);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius);
  margin-block: var(--s-4) var(--s-5);
  position: relative; /* Essential for absolute positioning of children */
  overflow: hidden; /* To clip content that goes beyond the border-radius */
}

/* Style for the iframe inside the map-placeholder */
.map-placeholder iframe {
  position: absolute; /* Position absolutely within its relative parent */
  top: 0;
  left: 0;
  width: 100%; /* Make it fill the parent's width */
  height: 100%; /* Make it fill the parent's height */
  border: 0; /* Remove default iframe border */
}

.map-placeholder-content { /* This div is no longer needed if iframe is directly inside */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  opacity: 0.5;
}
@media (max-width: 992px) {
  .map-placeholder {
    padding-top: 75%; /* Adjust aspect ratio for smaller screens */
  }
}