/**
 *  @package michael-travels-theme
 *
 *  A day of a trip.
 *
 *  Fuse loads a stylesheet named posttype_<type> on that type's own pages,
 *  and the .dep file beside this one names the block stylesheets the
 *  template's sections need. That is how they get loaded: a record's
 *  sections come from its template, so its content holds no blocks for
 *  Fuse to find, and without this the page would render correctly and
 *  look wrong.
 *
 *  Anything specific to this record type belongs here.
 */


/**
 *  The stats bar is one short run of small figures, and a full section's
 *  worth of air above and below left it floating in a band far taller than
 *  anything in it. Half the padding sits it up against the heading it
 *  belongs to.
 *
 *  Mobile keeps the full measure: the figures wrap onto several lines there,
 *  so the section has real height of its own and the padding is in
 *  proportion.
 *
 *  Set as the container variable rather than as padding, so the shorthand
 *  Fuse writes still supplies the horizontal side.
 */
@media screen and (min-width: 768px) {

  .travels-section--facts {
    --fuse-container-padding-y: calc(var(--mt-section-space-y) / 2);
  }

}


/*  ============================================================================
    Previous day, next day
    ============================================================================  */

/**
 *  Two columns, so the day before sits on the left and the day after on the
 *  right whether or not both are there. A day at either end of a trip has one
 *  neighbour, and it should stay on its own side rather than sliding across.
 */
.travels-day-nav {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--mt-space-5);
}

@media screen and (min-width: 576px) {

  .travels-day-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .travels-day-nav-link--next {
    grid-column: 2;
    text-align: right;
  }

}

.travels-day-nav-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.travels-day-nav-link .mt-meta {
  margin-bottom: var(--mt-space-1);
}

.travels-day-nav-title {
  display: block;
  font-family: var(--mt-font-display);
  font-size: clamp(1.25rem, 2.2vw, 1.625rem);
  line-height: 1.2;
  transition: color 0.18s ease;
}

.travels-day-nav-link:hover .travels-day-nav-title,
.travels-day-nav-link:focus-visible .travels-day-nav-title {
  color: var(--mt-accent);
}