/* Location: title and lead, then the aerial photo across the full width
   with a pin on the site and a card with the travel times. The pin's
   place is a percentage of the photo, set on .location__pin; check it
   against the site when the photo changes. */

.location {
  padding-top: var(--theme-section-space);
}

.location__head {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: var(--theme-space-lg);
  align-items: end;
  padding: 0 var(--theme-bleed) var(--theme-space-lg);
}

.location__head .heading {
  margin: 0;
}

.location__lead {
  font-size: var(--theme-text-lg);
  line-height: 1.45;
}

.location__media {
  position: relative;
  margin: 0;
}

.location__media img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 100svh;
  object-fit: cover;
}

/* The pin: a dot with a pulse and a label, on the existing halls that
   make way for Lierwerf. */
.location__pin {
  position: absolute;
  top: 50%;
  left: 47%;
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 8px 14px 8px 10px;
  border-radius: var(--theme-radius-pill);
  background: var(--theme-color-primary);
  font-size: var(--theme-text-sm);
  font-weight: var(--theme-font-weight-semibold);
  color: var(--theme-color-inverse-text);
  translate: -12px -50%;
}

.location__pin-dot {
  position: relative;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--theme-color-highlight);
}

.location__pin-dot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--theme-color-highlight);
}

.location__card {
  position: absolute;
  bottom: var(--theme-space-md);
  left: var(--theme-bleed);
  display: grid;
  gap: 2px;
  min-width: 15rem;
  padding: 16px 20px;
  border-radius: var(--theme-radius-sm);
  background: color-mix(in srgb, var(--theme-color-surface) 82%, transparent);
  backdrop-filter: blur(12px);
  font-size: var(--theme-text-sm);
}

.location__card div {
  display: flex;
  gap: 24px;
  justify-content: space-between;
  padding-block: 6px;
}

.location__card div + div {
  border-top: 1px solid var(--theme-color-border);
}

.location__card dt {
  color: var(--theme-color-text);
}

.location__card dd {
  font-weight: var(--theme-font-weight-semibold);
  color: var(--theme-color-heading);
}

@media (width <= 800px) {
  .location__head {
    grid-template-columns: 1fr;
  }

  /* Uncropped, so the pin's percentages still land on the site. */
  .location__media img {
    min-height: 0;
  }

  .location__card {
    position: static;
    margin: var(--theme-space-sm) var(--theme-gutter) 0;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .location__pin-dot::after {
    animation: theme-pin-pulse 2.2s ease-out infinite;
  }

  @keyframes theme-pin-pulse {
    from {
      opacity: 0.7;
      scale: 1;
    }

    to {
      opacity: 0;
      scale: 3.2;
    }
  }
}