/* Shared component patterns beyond base/layout.
   media.css (imagery) and sections.css (long-form section vocabulary) are
   pulled in here so every page picks them up from its existing stylesheet
   list. scripts/build-css.mjs flattens these imports away for production. */
@import url("./media.css");
@import url("./sections.css");


/* Destination / attraction cards on hub pages */
.dest-card__img { aspect-ratio: 16 / 10; }

/* Blog / guide cards */
.post-card__body { padding: var(--space-5); display: grid; gap: var(--space-2); }
.post-card__date { font-size: var(--text-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-fg-muted); }
.post-card__title { font-size: var(--text-md); }

/* Table (comparison, capacity) */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.table th, .table td { text-align: start; padding: var(--space-3); border-block-end: 1px solid var(--color-line); }
.table th { font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-fg-muted); font-weight: var(--weight-semibold); }
.table td strong { font-family: var(--font-display); }

/* Tag pills */
.pill {
  display: inline-block;
  font-size: var(--text-2xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.35em 0.8em;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  color: var(--color-fg-muted);
}

/* Related links block */
.related { display: grid; gap: var(--space-3); }
.related a {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: var(--space-3);
  border-block-end: 1px solid var(--color-line);
  text-decoration: none;
  font-weight: var(--weight-medium);
}
.related a::after { content: "→"; color: var(--color-accent); }
.related a:hover { color: var(--color-ocean); }