/**
 * @file
 * The site's content: nodes in lists and in full, trip facts, photos and captions from the old posts, the trip
 * tables, audio and maps.
 */

/* Nodes in lists: cards */
.node--in-list {
  margin: 0 0 clamp(16px, 2.5vw, 28px);
  padding: clamp(20px, 3vw, 32px);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}
.node--in-list::after { content: ""; display: block; clear: both; }
.node__title {
  margin: 0 0 .4rem;
  font-size: var(--text-2xl);
}
.node__title a { color: var(--color-text); text-decoration: none; }
.node__title a:hover { color: var(--color-accent-text); }

/* Byline and tags */
.node__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1rem;
  margin: 0 0 1.25rem;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}
.node__byline { display: flex; flex-wrap: wrap; gap: .1rem .5rem; margin: 0; }
.node__author { font-weight: var(--weight-strong); color: var(--color-text); }
.node__author + time::before { content: "·"; margin-right: .5rem; color: var(--color-text-subtle); }
.node__tags { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; padding: 0; list-style: none; }
.node__tags a {
  display: inline-block;
  padding: .15em .7em;
  border-radius: var(--radius-pill);
  background: var(--color-accent-soft);
  color: var(--color-accent-text);
  font-size: var(--text-xs);
  font-weight: var(--weight-strong);
  text-decoration: none;
}
.node__tags a:hover { background: var(--color-accent); color: var(--color-accent-contrast); }

/* Trip facts: the labelled fields as a grid of small cards */
.node__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: .6rem;
  margin: 0 0 1.5rem;
}
.node__facts .field {
  margin: 0;
  padding: .7rem .9rem;
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
}
.node--in-list .node__facts .field { background: var(--color-bg); }
.node__facts .field__label {
  margin: 0 0 .1rem;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-strong);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.node__facts .field__label::after { content: none; }
.node__facts .field__item {
  font-size: var(--text-lg);
  font-weight: var(--weight-strong);
  line-height: 1.3;
  overflow-wrap: anywhere;
}

/* The node's own links (a blog, an audio download) */
.node__links {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem 1.25rem;
  margin: 1.25rem 0 0;
  padding: 1rem 0 0;
  border-top: 1px solid var(--color-border);
  list-style: none;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* The inline "read more" in a teaser */
.read-more__link {
  color: var(--color-accent-text);
  font-weight: var(--weight-strong);
  text-decoration: none;
  white-space: nowrap;
}
.read-more__link:hover { text-decoration: underline; }
p.read-more { margin-top: .5rem; }

/* Body text */
.node__content { overflow-wrap: break-word; }
.node__content::after { content: ""; display: block; clear: both; }
.node__content > p:empty { display: none; }
.node__content img { border-radius: var(--radius-sm); }
.node__content ul, .node__content ol { padding-left: 1.4em; }
.node__content li { margin-bottom: .3em; }

/* Photos in the old posts: the Flickr embeds, floated to the side, and the lightbox thumbnails. */
.flickr, .flickrfloat {
  margin: .3rem 0 1rem 1.25rem;
}
.flickrfloat { float: right; max-width: 50%; clear: right; }
.flickrfloat .flickrfloat { float: none; max-width: none; margin: 0; }
.flickr-img-wrapper { display: inline-block; }
.flickr-img-wrapper img, .flickr img {
  display: block;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  transition: transform var(--motion-base) var(--ease), box-shadow var(--motion-base) var(--ease);
}
.flickr-img-wrapper a:hover img { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.flickrfloat br { display: none; }
.caption, .generated-caption {
  display: block;
  margin-top: .4rem;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-style: italic;
  line-height: 1.4;
}
.hide-generated-caption .generated-caption { display: none; }
a[rel^="lightbox"] img { cursor: zoom-in; }

@media (max-width: 40em) {
  .flickrfloat, .flickr { float: none; max-width: none; margin: 1rem 0; }
  .flickr-img-wrapper, .flickr-img-wrapper img { width: 100%; }
  .node__content img[align], .node__content img[style*="float"] { float: none !important; display: block; margin: 1rem auto !important; }
}

/* Tables: trip statistics and the trip tables. On small screens a wide table scrolls sideways in place. */
@media (max-width: 40em) {
  .layout-content table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
.tripinfo_table_table {
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  border-collapse: separate;
  border-spacing: 0;
  background: var(--color-surface);
}
.tripinfo_table_table td { text-align: right; font-variant-numeric: tabular-nums; }
.tripinfo_table_table caption {
  padding: .6rem 0;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  text-align: left;
}
.tripinfo_table_table tr:hover td { background: var(--color-surface-2); }

/* Audio: the player and the recording's details (the hobobiker module's audio-info list) as one card. */
audio { display: block; width: 100% !important; max-width: 560px; height: 44px !important; }
.audio-node { margin: 1.5rem 0; }
.audio-node .item-list ul.audio-info {
  display: grid;
  gap: .35rem;
  margin: 0;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  list-style: none;
  font-size: var(--text-sm);
}
.audio-info li { margin: 0; }
.audio-info li.first { margin-bottom: .5rem; }
.audio-info strong { display: inline-block; min-width: 4.5rem; color: var(--color-text-muted); font-weight: var(--weight-medium); }

/* Maps */
.leaflet-container {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

/* Views: lists of nodes */
.views-row { margin: 0; }
.item-list ul { padding-left: 1.2em; }