/* ---------------------------------------------------------------------------
 * location (live ContentLocation)
 *
 * Live's second column holds a travel accordion whose copy is hard-coded in the
 * Nuxt component (it is not in the CMS, so it did not come across in the import).
 * We render the resort's contact facts there instead, reusing the live
 * .ContentLocation__accordion wrapper for its column padding. Only the new
 * .ContentLocation__facts* elements are styled here; nothing live.css owns is
 * overridden.
 * ------------------------------------------------------------------------- */

.ContentLocation__facts {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  width: 100%;
}

.ContentLocation__fact {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.ContentLocation__fact-title {
  color: var(--color-natural-rope);
}

.ContentLocation__fact-text a {
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
  transition: opacity var(--transition-fast);
}

.ContentLocation__fact-text a:hover,
.ContentLocation__fact-text a:focus-visible {
  opacity: 0.6;
}

.ContentLocation__facts-link {
  margin-top: var(--space-lg);
}

/* The map sits in the left column at 1/1; give it a little breathing room from
   the facts panel now that the two are not separated by the accordion frame. */
@media (min-width: 1230px) {
  .ContentLocation__accordion .ContentLocation__facts {
    gap: var(--space-xl);
  }
}